StackExchange - OLD vs NEW CSS styling (stacks.css)

// OLD CSS (stacks.css) retrieved with WAYBACK MACHINE (Jul 16, 2020)
// NEW CSS (stacks.css) (retrived: Aug 29, 2020)
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
border: 0;
border: 0;
font: inherit;
font: inherit;
font-size: 100%;
font-size: 100%;
vertical-align: baseline
vertical-align: baseline
}
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block
display: block
}
}
body {
body {
line-height: 1
line-height: 1
}
}
ol,ul {
ol,ul {
list-style: none
list-style: none
}
}
blockquote,q {
blockquote,q {
quotes: none
quotes: none
}
}
blockquote:before,blockquote:after,q:before,q:after {
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: '';
content: none
content: none
}
}
table {
table {
border-collapse: collapse;
border-collapse: collapse;
border-spacing: 0
border-spacing: 0
}
}
sub,sup {
sub,sup {
font-size: 80%;
font-size: 80%;
line-height: 1;
line-height: 1;
vertical-align: sub
vertical-align: sub
}
}
sup {
sup {
vertical-align: super
vertical-align: super
}
}
button {
button {
margin: 0
margin: 0
}
}
.svg-icon,.svg-spot {
.svg-icon,.svg-spot {
vertical-align: bottom
vertical-align: bottom
}
}
.svg-icon:not(.native) *,.svg-spot:not(.native) * {
.svg-icon:not(.native) *,.svg-spot:not(.native) * {
fill: currentColor
fill: currentColor
}
}
.s-avatar {
.s-avatar {
display: inline-block;
display: inline-block;
position: relative;
position: relative;
width: 16px;
width: 16px;
height: 16px;
height: 16px;
border-radius: 3px;
border-radius: 3px;
background-color: #fff;
background-color: #fff;
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 100%;
background-size: 100%;
vertical-align: bottom
vertical-align: bottom
}
}
.s-avatar .s-avatar--letter {
.s-avatar .s-avatar--letter {
display: block;
display: block;
color: #fff;
color: #fff;
font-size: 11px;
font-size: 11px;
font-weight: bold;
font-weight: bold;
line-height: 1.4545455;
line-height: 1.4545455;
text-align: center;
text-align: center;
text-transform: uppercase;
text-transform: uppercase;
-webkit-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-ms-user-select: none;
user-select: none
user-select: none
}
}
.s-avatar .s-avatar--badge {
.s-avatar .s-avatar--badge {
position: absolute;
position: absolute;
right: -4px;
right: -4px;
bottom: -4px
bottom: -4px
}
}
.s-avatar .s-avatar--image {
.s-avatar .s-avatar--image {
width: 16px;
width: 16px;
height: 16px;
height: 16px;
border-radius: 3px;
border-radius: 3px;
display: block
display: block
}
}
.s-avatar.s-avatar__24 {
.s-avatar.s-avatar__24 {
width: 24px;
width: 24px;
height: 24px
height: 24px
}
}
.s-avatar.s-avatar__24 .s-avatar--letter {
.s-avatar.s-avatar__24 .s-avatar--letter {
font-size: 16px
font-size: 16px
}
}
.s-avatar.s-avatar__24 .s-avatar--badge {
.s-avatar.s-avatar__24 .s-avatar--badge {
-webkit-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1)
transform: scale(1.1)
}
}
.s-avatar.s-avatar__24 .s-avatar--image {
.s-avatar.s-avatar__24 .s-avatar--image {
width: 24px;
width: 24px;
height: 24px
height: 24px
}
}
.s-avatar.s-avatar__32 {
.s-avatar.s-avatar__32 {
width: 32px;
width: 32px;
height: 32px;
height: 32px;
border-radius: 5px
border-radius: 5px
}
}
.s-avatar.s-avatar__32 .s-avatar--letter {
.s-avatar.s-avatar__32 .s-avatar--letter {
font-size: 22px
font-size: 22px
}
}
.s-avatar.s-avatar__32 .s-avatar--badge {
.s-avatar.s-avatar__32 .s-avatar--badge {
-webkit-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3)
transform: scale(1.3)
}
}
.s-avatar.s-avatar__32 .s-avatar--image {
.s-avatar.s-avatar__32 .s-avatar--image {
width: 32px;
width: 32px;
height: 32px;
height: 32px;
border-radius: 5px
border-radius: 5px
}
}
.s-avatar.s-avatar__48 {
.s-avatar.s-avatar__48 {
width: 48px;
width: 48px;
height: 48px;
height: 48px;
border-radius: 5px
border-radius: 5px
}
}
.s-avatar.s-avatar__48 .s-avatar--letter {
.s-avatar.s-avatar__48 .s-avatar--letter {
font-size: 34px
font-size: 34px
}
}
.s-avatar.s-avatar__48 .s-avatar--badge {
.s-avatar.s-avatar__48 .s-avatar--badge {
-webkit-transform: scale(1.6);
-webkit-transform: scale(1.6);
transform: scale(1.6)
transform: scale(1.6)
}
}
.s-avatar.s-avatar__48 .s-avatar--image {
.s-avatar.s-avatar__48 .s-avatar--image {
width: 48px;
width: 48px;
height: 48px;
height: 48px;
border-radius: 5px
border-radius: 5px
}
}
.s-avatar.s-avatar__64 {
.s-avatar.s-avatar__64 {
width: 64px;
width: 64px;
height: 64px;
height: 64px;
border-radius: 7px
border-radius: 7px
}
}
.s-avatar.s-avatar__64 .s-avatar--letter {
.s-avatar.s-avatar__64 .s-avatar--letter {
font-size: 44px
font-size: 44px
}
}
.s-avatar.s-avatar__64 .s-avatar--badge {
.s-avatar.s-avatar__64 .s-avatar--badge {
-webkit-transform: scale(2.4);
-webkit-transform: scale(2.4);
transform: scale(2.4)
transform: scale(2.4)
}
}
.s-avatar.s-avatar__64 .s-avatar--image {
.s-avatar.s-avatar__64 .s-avatar--image {
width: 64px;
width: 64px;
height: 64px;
height: 64px;
border-radius: 7px
border-radius: 7px
}
}
.s-avatar.s-avatar__96 {
.s-avatar.s-avatar__96 {
width: 96px;
width: 96px;
height: 96px;
height: 96px;
border-radius: 10px
border-radius: 10px
}
}
.s-avatar.s-avatar__96 .s-avatar--letter {
.s-avatar.s-avatar__96 .s-avatar--letter {
font-size: 66px
font-size: 66px
}
}
.s-avatar.s-avatar__96 .s-avatar--badge {
.s-avatar.s-avatar__96 .s-avatar--badge {
-webkit-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3)
transform: scale(3)
}
}
.s-avatar.s-avatar__96 .s-avatar--image {
.s-avatar.s-avatar__96 .s-avatar--image {
width: 96px;
width: 96px;
height: 96px;
height: 96px;
border-radius: 10px
border-radius: 10px
}
}
.s-avatar.s-avatar__128 {
.s-avatar.s-avatar__128 {
width: 128px;
width: 128px;
height: 128px;
height: 128px;
border-radius: 14px
border-radius: 14px
}
}
.s-avatar.s-avatar__128 .s-avatar--letter {
.s-avatar.s-avatar__128 .s-avatar--letter {
font-size: 88px
font-size: 88px
}
}
.s-avatar.s-avatar__128 .s-avatar--badge {
.s-avatar.s-avatar__128 .s-avatar--badge {
-webkit-transform: scale(3);
-webkit-transform: scale(3);
transform: scale(3)
transform: scale(3)
}
}
.s-avatar.s-avatar__128 .s-avatar--image {
.s-avatar.s-avatar__128 .s-avatar--image {
width: 128px;
width: 128px;
height: 128px;
height: 128px;
border-radius: 14px
border-radius: 14px
}
}
.s-badge {
.s-badge {
display: inline-flex;
display: inline-flex;
align-content: center;
align-content: center;
justify-content: center;
justify-content: center;
min-width: 0;
min-width: 0;
padding: 0 6px;
padding: 0 6px;
border-width: 1px;
border-width: 1px;
border-style: solid;
border-style: solid;
border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-size: 12px;
font-weight: normal;
font-weight: normal;
line-height: 2;
line-height: 2;
text-decoration: none;
text-decoration: none;
vertical-align: middle;
vertical-align: middle;
white-space: nowrap;
white-space: nowrap;
border-color: var(--black-100);
border-color: var(--black-100);
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--black-700)
color: var(--black-700)
}
}
.s-badge .s-tag--dismiss {
.s-badge .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
a.s-badge:hover {
a.s-badge:hover {
text-decoration: none
text-decoration: none
}
}
.s-badge--image {
.s-badge--image {
display: inline-flex;
display: inline-flex;
align-self: center;
align-self: center;
margin-right: 1px;
margin-right: 1px;
margin-left: -5px
margin-left: -5px
}
}
.s-badge__sm {
.s-badge__sm {
align-self: flex-start;
align-self: flex-start;
padding-right: 4px;
padding-right: 4px;
padding-left: 3px;
padding-left: 3px;
font-size: 11px;
font-size: 11px;
line-height: 1.8
line-height: 1.8
}
}
.s-badge__xs {
align-self: flex-start;
padding-right: 1px;
padding-left: 1px;
font-size: 11px;
line-height: 1.2
}
.s-badge__gold {
.s-badge__gold {
border-color: var(--gold-darker);
border-color: var(--gold-darker);
background-color: var(--gold-lighter);
background-color: var(--gold-lighter);
color: var(--black-700)
color: var(--black-700)
}
}
.s-badge__gold .s-tag--dismiss {
.s-badge__gold .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__silver {
.s-badge__silver {
border-color: var(--silver-darker);
border-color: var(--silver-darker);
background-color: var(--silver-lighter);
background-color: var(--silver-lighter);
color: var(--black-700)
color: var(--black-700)
}
}
.s-badge__silver .s-tag--dismiss {
.s-badge__silver .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__bronze {
.s-badge__bronze {
border-color: var(--bronze-darker);
border-color: var(--bronze-darker);
background-color: var(--bronze-lighter);
background-color: var(--bronze-lighter);
color: var(--black-700)
color: var(--black-700)
}
}
.s-badge__bronze .s-tag--dismiss {
.s-badge__bronze .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__bounty {
.s-badge__bounty {
border-color: transparent;
border-color: transparent;
background-color: var(--blue-600);
background-color: var(--blue-600);
color: var(--white)
color: var(--white)
}
}
.s-badge__bounty .s-tag--dismiss {
.s-badge__bounty .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__votes {
.s-badge__votes {
border-color: var(--black-150);
border-color: var(--black-150);
background-color: var(--white);
background-color: var(--white);
color: var(--black-700)
color: var(--black-700)
}
}
.s-badge__votes .s-tag--dismiss {
.s-badge__votes .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__answered {
.s-badge__answered {
border-color: transparent;
border-color: transparent;
background-color: var(--green-400);
background-color: var(--green-400);
color: var(--white)
color: var(--white)
}
}
.s-badge__answered .s-tag--dismiss {
.s-badge__answered .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__rep {
.s-badge__rep {
border-color: var(--green-400);
border-color: var(--green-400);
background-color: var(--white);
background-color: var(--white);
color: var(--green-500)
color: var(--green-500)
}
}
.s-badge__rep .s-tag--dismiss {
.s-badge__rep .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__rep-down {
.s-badge__rep-down {
border-color: var(--red-400);
border-color: var(--red-400);
background-color: var(--white);
background-color: var(--white);
color: var(--red-500)
color: var(--red-500)
}
}
.s-badge__rep-down .s-tag--dismiss {
.s-badge__rep-down .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__important {
.s-badge__important {
border-color: transparent;
border-color: transparent;
background-color: var(--red-600);
background-color: var(--red-600);
color: var(--white)
color: var(--white)
}
}
.s-badge__important .s-tag--dismiss {
.s-badge__important .s-tag--dismiss {
background-color: transparent
background-color: transparent
}
}
.s-badge__admin {
border-color: transparent;
background-color: var(--blue-600);
color: var(--white)
}
.s-badge__admin .s-tag--dismiss {
background-color: transparent
}
.s-badge__moderator {
border-color: transparent;
background-color: var(--blue-600);
color: var(--white)
}
.s-badge__moderator .s-tag--dismiss {
background-color: transparent
}
.s-badge__staff {
border-color: transparent;
background-color: var(--orange-400);
color: var(--white)
}
.s-badge__staff .s-tag--dismiss {
background-color: transparent
}
.s-badge__staff--sm {
border-color: transparent;
background-color: var(--orange-400);
color: var(--white)
}
.s-badge__staff--sm .s-tag--dismiss {
background-color: transparent
}
.s-award-bling {
.s-award-bling {
display: flex;
display: flex;
align-items: center;
align-items: center;
color: inherit
color: inherit
}
}
.s-award-bling:before {
.s-award-bling:before {
content: "";
content: "";
margin-right: 4px;
margin-right: 4px;
width: 8px;
width: 8px;
height: 8px;
height: 8px;
border-radius: 100%
border-radius: 100%
}
}
.s-award-bling.s-award-bling__gold:before {
.s-award-bling.s-award-bling__gold:before {
background-color: var(--gold)
background-color: var(--gold)
}
}
.s-award-bling.s-award-bling__silver:before {
.s-award-bling.s-award-bling__silver:before {
background-color: var(--silver)
background-color: var(--silver)
}
}
.s-award-bling.s-award-bling__bronze:before {
.s-award-bling.s-award-bling__bronze:before {
background-color: var(--bronze)
background-color: var(--bronze)
}
}
.s-empty-state {
.s-empty-state {
color: var(--fc-light);
color: var(--fc-light);
text-align: center;
text-align: center;
margin-left: auto;
margin-left: auto;
margin-right: auto
margin-right: auto
}
}
.s-empty-state p {
.s-empty-state p {
font-size: 13px;
font-size: 13px;
margin-bottom: 12px
margin-bottom: 12px
}
}
.s-empty-state p strong {
.s-empty-state p strong {
color: var(--fc-dark)
color: var(--fc-dark)
}
}
.s-breadcrumbs {
.s-breadcrumbs {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
align-items: start;
align-items: start;
color: var(--black-150);
color: var(--black-150);
font-size: 12px
font-size: 12px
}
}
.s-breadcrumbs .s-breadcrumbs--item {
.s-breadcrumbs .s-breadcrumbs--item {
display: flex;
display: flex;
flex-wrap: nowrap;
flex-wrap: nowrap;
margin-top: 2px;
margin-top: 2px;
margin-bottom: 2px
margin-bottom: 2px
}
}
.s-breadcrumbs .s-breadcrumbs--divider {
.s-breadcrumbs .s-breadcrumbs--divider {
margin-right: 4px;
margin-right: 4px;
margin-left: 4px
margin-left: 4px
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-breadcrumbs .s-breadcrumbs--divider {
html.html__responsive:not(.html__unpinned-leftnav) .s-breadcrumbs .s-breadcrumbs--divider {
margin-right:2px;
margin-right:2px;
margin-left: 2px
margin-left: 2px
}
}
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-breadcrumbs .s-breadcrumbs--divider {
html.html__responsive.html__unpinned-leftnav .s-breadcrumbs .s-breadcrumbs--divider {
margin-right:2px;
margin-right:2px;
margin-left: 2px
margin-left: 2px
}
}
}
}
.s-breadcrumbs .s-breadcrumbs--link {
.s-breadcrumbs .s-breadcrumbs--link {
color: var(--black-350)
color: var(--black-350)
}
}
.s-breadcrumbs .s-breadcrumbs--link:hover {
.s-breadcrumbs .s-breadcrumbs--link:hover {
color: var(--black-600)
color: var(--black-600)
}
}
.s-btn-group {
.s-btn-group {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 1px
margin-bottom: 1px
}
}
.s-btn-group .s-btn {
.s-btn-group .s-btn {
margin-bottom: -1px;
margin-bottom: -1px;
white-space: nowrap
white-space: nowrap
}
}
.s-btn-group .s-btn:not(:last-child) {
.s-btn-group .s-btn:not(:last-child) {
margin-right: -1px
margin-right: -1px
}
}
.s-btn-group .s-btn:not(:first-child):not(:last-child) {
.s-btn-group .s-btn:not(:first-child):not(:last-child) {
border-radius: 0
border-radius: 0
}
}
.s-btn-group .s-btn:first-child:not(:only-child) {
.s-btn-group .s-btn:first-child:not(:only-child) {
border-top-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0
border-bottom-right-radius: 0
}
}
.s-btn-group .s-btn:last-child:not(:only-child) {
.s-btn-group .s-btn:last-child:not(:only-child) {
border-top-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
border-bottom-left-radius: 0
}
}
.s-btn-group .s-btn.is-selected {
.s-btn-group .s-btn.is-selected {
z-index: 25
z-index: 25
}
}
.s-btn-group .s-btn:active {
.s-btn-group .s-btn:active {
z-index: 30
z-index: 30
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn {
padding-left:.4em;
padding-left:.4em;
padding-right: .4em
padding-right: .4em
}
}
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn {
padding-left:.4em;
padding-left:.4em;
padding-right: .4em
padding-right: .4em
}
}
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown {
padding-right:1.2em
padding-right:1.2em
}
}
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown:after {
html.html__responsive:not(.html__unpinned-leftnav) .s-btn-group .s-btn.s-btn__dropdown:after {
right: .4em
right: .4em
}
}
}
}
@media (max-width: 640px) {
@media (max-width: 640px) {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown {
padding-right:1.2em
padding-right:1.2em
}
}
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown:after {
html.html__responsive.html__unpinned-leftnav .s-btn-group .s-btn.s-btn__dropdown:after {
right: .4em
right: .4em
}
}
}
}
.s-btn-group .s-btn-group--container {
.s-btn-group .s-btn-group--container {
display: flex
display: flex
}
}
.s-btn-group .s-btn-group--container .s-btn {
.s-btn-group .s-btn-group--container .s-btn {
margin-right: -1px
margin-right: -1px
}
}
.s-btn-group .s-btn-group--container:not(:first-child):not(:last-child) .s-btn {
.s-btn-group .s-btn-group--container:not(:first-child):not(:last-child) .s-btn {
border-radius: 0
border-radius: 0
}
}
.s-btn-group .s-btn-group--container:first-child .s-btn {
.s-btn-group .s-btn-group--container:first-child .s-btn {
border-top-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: 0
margin-left: 0
}
}
.s-btn-group .s-btn-group--container:last-child .s-btn {
.s-btn-group .s-btn-group--container:last-child .s-btn {
border-top-left-radius: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
border-bottom-left-radius: 0
}
}
.s-card {
.s-card {
padding: 12px;
padding: 12px;
border: 1px solid var(--black-100);
border: 1px solid var(--black-100);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white)
background-color: var(--white)
}
}
.s-card p:last-of-type {
.s-card p:last-of-type {
margin-bottom: 0
margin-bottom: 0
}
}
a.s-card:not(.s-card__muted):hover,a.s-card:not(.s-card__muted):focus,a.s-card:not(.s-card__muted):active {
a.s-card:not(.s-card__muted):hover,a.s-card:not(.s-card__muted):focus,a.s-card:not(.s-card__muted):active {
border-color: var(--black-200)
border-color: var(--black-200)
}
}
.s-card__muted {
.s-card__muted {
border-color: var(--black-075)
border-color: var(--black-075)
}
}
.s-card__muted>* {
.s-card__muted>* {
opacity: .65
opacity: .65
}
}
pre.s-code-block {
font-size: 13px;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,sans-serif;
line-height: 1.30769231;
color: var(--highlight-color);
background-color: var(--highlight-bg);
border-radius: 5px;
max-height: 24rem;
margin: 0;
padding: 8px 12px;
overflow: auto;
scrollbar-color: var(--scrollbar) transparent
}
pre.s-code-block::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: transparent
}
pre.s-code-block::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent
}
pre.s-code-block::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--scrollbar)
}
pre.s-code-block::-webkit-scrollbar-corner {
background-color: transparent;
border-color: transparent
}
pre.s-code-block>code,code[class*="language-"] {
font-family: inherit
}
pre.s-code-block>code .hljs-subst,code[class*="language-"] .hljs-subst {
color: var(--highlight-color)
}
pre.s-code-block>code .hljs-comment,code[class*="language-"] .hljs-comment {
color: var(--highlight-comment)
}
pre.s-code-block>code .hljs-keyword,code[class*="language-"] .hljs-keyword,pre.s-code-block>code .hljs-selector-tag,code[class*="language-"] .hljs-selector-tag,pre.s-code-block>code .hljs-meta-keyword,code[class*="language-"] .hljs-meta-keyword,pre.s-code-block>code .hljs-doctag,code[class*="language-"] .hljs-doctag,pre.s-code-block>code .hljs-section,code[class*="language-"] .hljs-section {
color: var(--highlight-keyword)
}
pre.s-code-block>code .hljs-attr,code[class*="language-"] .hljs-attr {
color: var(--highlight-attribute)
}
pre.s-code-block>code .hljs-attribute,code[class*="language-"] .hljs-attribute {
color: var(--highlight-symbol)
}
pre.s-code-block>code .hljs-name,code[class*="language-"] .hljs-name,pre.s-code-block>code .hljs-type,code[class*="language-"] .hljs-type,pre.s-code-block>code .hljs-number,code[class*="language-"] .hljs-number,pre.s-code-block>code .hljs-selector-id,code[class*="language-"] .hljs-selector-id,pre.s-code-block>code .hljs-quote,code[class*="language-"] .hljs-quote,pre.s-code-block>code .hljs-template-tag,code[class*="language-"] .hljs-template-tag {
color: var(--highlight-namespace)
}
pre.s-code-block>code .hljs-selector-class,code[class*="language-"] .hljs-selector-class {
color: var(--highlight-keyword)
}
pre.s-code-block>code .hljs-string,code[class*="language-"] .hljs-string,pre.s-code-block>code .hljs-regexp,code[class*="language-"] .hljs-regexp,pre.s-code-block>code .hljs-symbol,code[class*="language-"] .hljs-symbol,pre.s-code-block>code .hljs-variable,code[class*="language-"] .hljs-variable,pre.s-code-block>code .hljs-template-variable,code[class*="language-"] .hljs-template-variable,pre.s-code-block>code .hljs-link,code[class*="language-"] .hljs-link,pre.s-code-block>code .hljs-selector-attr,code[class*="language-"] .hljs-selector-attr {
color: var(--highlight-variable)
}
pre.s-code-block>code .hljs-meta,code[class*="language-"] .hljs-meta,pre.s-code-block>code .hljs-selector-pseudo,code[class*="language-"] .hljs-selector-pseudo {
color: var(--highlight-keyword)
}
pre.s-code-block>code .hljs-built_in,code[class*="language-"] .hljs-built_in,pre.s-code-block>code .hljs-title,code[class*="language-"] .hljs-title,pre.s-code-block>code .hljs-literal,code[class*="language-"] .hljs-literal {
color: var(--highlight-literal)
}
pre.s-code-block>code .hljs-bullet,code[class*="language-"] .hljs-bullet,pre.s-code-block>code .hljs-code,code[class*="language-"] .hljs-code {
color: var(--highlight-punctuation)
}
pre.s-code-block>code .hljs-meta-string,code[class*="language-"] .hljs-meta-string {
color: var(--highlight-variable)
}
pre.s-code-block>code .hljs-deletion,code[class*="language-"] .hljs-deletion {
color: var(--highlight-deletion)
}
pre.s-code-block>code .hljs-addition,code[class*="language-"] .hljs-addition {
color: var(--highlight-addition)
}
pre.s-code-block>code .hljs-emphasis,code[class*="language-"] .hljs-emphasis {
font-style: italic
}
pre.s-code-block>code .hljs-strong,code[class*="language-"] .hljs-strong {
font-weight: bold
}
.s-expandable {
.s-expandable {
display: flex;
display: flex;
-webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
align-items: flex-start;
align-items: flex-start;
transition: clip-path 0s 100ms,-webkit-clip-path 0s 100ms
transition: clip-path 0s 100ms,-webkit-clip-path 0s 100ms
}
}
.s-expandable:after {
.s-expandable:after {
content: '';
content: '';
-ms-flex-preferred-size: 0;
-ms-flex-preferred-size: 0;
flex-basis: 0;
flex-basis: 0;
height: 10px;
height: 10px;
max-height: 0px;
max-height: 0px;
transition: height 100ms linear,max-height 0s 100ms linear
transition: height 100ms linear,max-height 0s 100ms linear
}
}
.s-expandable--content {
.s-expandable--content {
-ms-flex-preferred-size: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
flex-basis: 100%;
max-height: 1000000px;
max-height: 1000000px;
margin-bottom: 0;
margin-bottom: 0;
-webkit-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
transform-origin: 0 0;
transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),transform 100ms cubic-bezier(1, 0, 1, 1),opacity 100ms cubic-bezier(1, 0, 1, 1)
transition: margin-bottom 100ms cubic-bezier(0, 0, 0, 1),transform 100ms cubic-bezier(1, 0, 1, 1),opacity 100ms cubic-bezier(1, 0, 1, 1)
}
}
.s-expandable:not(.is-expanded) {
.s-expandable:not(.is-expanded) {
overflow: hidden;
overflow: hidden;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
transition: none
transition: none
}
}
.s-expandable:not(.is-expanded) .s-expandable--content {
.s-expandable:not(.is-expanded) .s-expandable--content {
visibility: hidden;
visibility: hidden;
max-height: 0;
max-height: 0;
margin-bottom: -1500px;
margin-bottom: -1500px;
opacity: 0;
opacity: 0;
-webkit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
transform: scaleY(0);
transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),visibility 0s 100ms,max-height 0s 100ms,transform 100ms cubic-bezier(0, 1, 1, 1),opacity 100ms cubic-bezier(0, 1, 1, 1)
transition: margin-bottom 100ms cubic-bezier(1, 0, 1, 1),visibility 0s 100ms,max-height 0s 100ms,transform 100ms cubic-bezier(0, 1, 1, 1),opacity 100ms cubic-bezier(0, 1, 1, 1)
}
}
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
.s-expandable:not(.is-expanded) .s-expandable--content {
.s-expandable:not(.is-expanded) .s-expandable--content {
opacity:1;
opacity:1;
-webkit-transform: none;
-webkit-transform: none;
transform: none
transform: none
}
}
}
}
.s-expandable:not(.is-expanded):after {
.s-expandable:not(.is-expanded):after {
height: 0;
height: 0;
max-height: 10px;
max-height: 10px;
transition: height 100ms linear
transition: height 100ms linear
}
}
.s-input,.s-textarea {
.s-input,.s-textarea {
-webkit-appearance: none;
-webkit-appearance: none;
width: 100%;
width: 100%;
margin: 0;
margin: 0;
padding: .6em .7em;
padding: .6em .7em;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white);
background-color: var(--white);
color: var(--fc-dark);
color: var(--fc-dark);
font-size: 13px;
font-size: 13px;
font-family: inherit;
font-family: inherit;
line-height: 1.15384615;
line-height: 1.15384615;
scrollbar-color: var(--scrollbar) transparent
scrollbar-color: var(--scrollbar) transparent
}
}
@supports (-webkit-overflow-scrolling: touch) {
@supports (-webkit-overflow-scrolling: touch) {
.s-input,.s-textarea {
.s-input,.s-textarea {
font-size: 16px;
font-size: 16px;
padding: .36em .55em
padding: .36em .55em
}
}
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
line-height: normal !important
line-height: normal !important
}
}
}
}
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
.s-input::-webkit-input-placeholder,.s-textarea::-webkit-input-placeholder {
color: var(--black-200)
color: var(--black-200)
}
}
.s-input::-ms-input-placeholder,.s-textarea::-ms-input-placeholder {
.s-input::-ms-input-placeholder,.s-textarea::-ms-input-placeholder {
color: var(--black-200)
color: var(--black-200)
}
}
.s-input::placeholder,.s-textarea::placeholder {
.s-input::placeholder,.s-textarea::placeholder {
color: var(--black-200)
color: var(--black-200);
opacity: 1
}
}
.s-input::-ms-clear,.s-textarea::-ms-clear {
.s-input::-ms-clear,.s-textarea::-ms-clear {
display: none
display: none
}
}
.s-input::-webkit-scrollbar,.s-textarea::-webkit-scrollbar {
.s-input::-webkit-scrollbar,.s-textarea::-webkit-scrollbar {
width: 10px;
width: 10px;
height: 10px;
height: 10px;
background-color: transparent
background-color: transparent
}
}
.s-input::-webkit-scrollbar-track,.s-textarea::-webkit-scrollbar-track {
.s-input::-webkit-scrollbar-track,.s-textarea::-webkit-scrollbar-track {
border-radius: 10px;
border-radius: 10px;
background-color: transparent
background-color: transparent
}
}
.s-input::-webkit-scrollbar-thumb,.s-textarea::-webkit-scrollbar-thumb {
.s-input::-webkit-scrollbar-thumb,.s-textarea::-webkit-scrollbar-thumb {
border-radius: 10px;
border-radius: 10px;
background-color: var(--scrollbar)
background-color: var(--scrollbar)
}
}
.s-input::-webkit-scrollbar-corner,.s-textarea::-webkit-scrollbar-corner {
.s-input::-webkit-scrollbar-corner,.s-textarea::-webkit-scrollbar-corner {
background-color: transparent;
background-color: transparent;
border-color: transparent
border-color: transparent
}
}
.s-input::-webkit-contacts-auto-fill-button,.s-textarea::-webkit-contacts-auto-fill-button {
background-color: var(--black)
}
.s-input:-webkit-autofill,.s-textarea:-webkit-autofill {
border-color: var(--blue-300);
-webkit-text-fill-color: var(--black);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset;
transition: background-color 0s 50000s
}
.s-input:-webkit-autofill:focus,.s-textarea:-webkit-autofill:focus {
border-color: var(--blue-300);
-webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset,0 0 0 4px var(--focus-ring)
}
.s-input.s-input__search,.s-input.s-input__creditcard {
.s-input.s-input__search,.s-input.s-input__creditcard {
padding-left: 32px
padding-left: 32px
}
}
fieldset {
fieldset {
min-width: 0;
min-width: 0;
padding: 0;
padding: 0;
border: 0
border: 0
}
}
.s-label {
.s-label {
padding: 0 2px;
padding: 0 2px;
color: var(--fc-dark);
color: var(--fc-dark);
font-family: inherit;
font-family: inherit;
font-size: 1.15384615rem;
font-size: 1.15384615rem;
font-weight: 700;
font-weight: 700;
cursor: pointer
cursor: pointer
}
}
legend.s-label {
legend.s-label {
cursor: default
cursor: default
}
}
.s-label--status {
.s-label--status {
margin-left: 4px;
margin-left: 4px;
padding: 2px 8px;
padding: 2px 8px;
border-radius: 1000px;
border-radius: 1000px;
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--fc-medium);
color: var(--fc-medium);
font-size: 12px;
font-size: 12px;
font-weight: 400;
font-weight: 400;
vertical-align: text-bottom
vertical-align: text-bottom
}
}
.s-label--status.s-label--status__required {
.s-label--status.s-label--status__required {
background-color: var(--red-100);
background-color: var(--red-100);
color: var(--red-600)
color: var(--red-600)
}
}
.s-label--status.s-label--status__new {
.s-label--status.s-label--status__new {
background-color: var(--green-100);
background-color: var(--green-100);
color: var(--green-700)
color: var(--green-700)
}
}
.s-label--status.s-label--status__beta {
.s-label--status.s-label--status__beta {
background-color: var(--blue-100);
background-color: var(--blue-100);
color: var(--blue-700)
color: var(--blue-700)
}
}
.s-description {
.s-description {
padding: 0 2px;
padding: 0 2px;
color: var(--fc-medium);
color: var(--fc-medium);
font-size: 12px
font-size: 12px
}
}
.s-label .s-description,.s-label .s-input-message {
.s-label .s-description,.s-label .s-input-message {
padding: 0;
padding: 0;
margin-top: 4px;
margin-top: 4px;
margin-bottom: 0;
margin-bottom: 0;
font-weight: normal
font-weight: normal
}
}
.s-input-fill {
.s-input-fill {
padding: .6em .7em;
padding: .6em .7em;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-right-width: 0;
border-right-width: 0;
border-left-width: 0;
border-left-width: 0;
background-color: var(--black-050);
background-color: var(--black-050);
color: var(--fc-medium);
color: var(--fc-medium);
font-family: inherit;
font-family: inherit;
white-space: nowrap;
white-space: nowrap;
line-height: 1.15384615
line-height: 1.15384615
}
}
.s-input-fill.s-input-fill__clear {
.s-input-fill.s-input-fill__clear {
border-color: transparent;
border-color: transparent;
background-color: transparent
background-color: transparent
}
}
.s-input-fill.order-first {
.s-input-fill.order-first {
border-left-width: 1px;
border-left-width: 1px;
border-top-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px
border-bottom-left-radius: 3px
}
}
.s-input-fill.order-last {
.s-input-fill.order-last {
border-right-width: 1px;
border-right-width: 1px;
border-top-right-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px
border-bottom-right-radius: 3px
}
}
.s-select {
.s-select {
position: relative;
position: relative;
color: var(--fc-dark)
color: var(--fc-dark)
}
}
.s-select:before,.s-select:after {
.s-select:before,.s-select:after {
content: "";
content: "";
position: absolute;
position: absolute;
z-index: 25;
z-index: 25;
right: 13px;
right: 13px;
border-color: currentColor transparent;
border-color: currentColor transparent;
border-style: solid;
border-style: solid;
border-width: 4px;
border-width: 4px;
pointer-events: none
pointer-events: none
}
}
.s-select:before {
.s-select:before {
top: calc(50% - 5px);
top: calc(50% - 5px);
border-top-width: 0;
border-top-width: 0;
border-bottom-width: 4px
border-bottom-width: 4px
}
}
.s-select:after {
.s-select:after {
top: calc(50% + 1px);
top: calc(50% + 1px);
border-top-width: 4px;
border-top-width: 4px;
border-bottom-width: 0
border-bottom-width: 0
}
}
.s-select>select {
.s-select>select {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
appearance: none;
appearance: none;
position: relative;
position: relative;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
padding: .6em .7em;
padding: .6em .7em;
padding-right: 32px;
padding-right: 32px;
border: 1px solid var(--black-200);
border: 1px solid var(--black-200);
border-radius: 3px;
border-radius: 3px;
background-color: var(--white);
background-color: var(--white);
outline: 0;
outline: 0;
font-size: 13px;
font-size: 13px;
font-family: inherit;
font-family: inherit;
color: var(--black);
color: var(--black);
line-height: 1.15384615
line-height: 1.15384615
}
}
.s-select>select::-moz-focus-inner {
.s-select>select::-moz-focus-inner {
outline: none !important
outline: none !important
}
}
.s-select>select:-moz-focusring {
.s-select>select:-moz-focusring {
color: transparent;
color: transparent;
text-shadow: 0 0 0 #000
text-shadow: 0 0 0 #000
}
}
.s-select>select::-ms-expand {
.s-select>select::-ms-expand {
display: none
display: none
}
}
@supports (-webkit-overflow-scrolling: touch) {
@supports (-webkit-overflow-scrolling: touch) {
.s-select>select {
.s-select>select {
font-size: 16px;
font-size: 16px;
padding: .4em .55em
padding: .4em .55em
Original Text
Changed Text