mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-02 07:58:31 +00:00
2520 lines
No EOL
78 KiB
SCSS
2520 lines
No EOL
78 KiB
SCSS
.theme--ffz, .theme--ffz .theme--dark, .theme--ffz.theme--dark {
|
|
--ffz-color-0: #2b2b2b;
|
|
--ffz-color-1: #dedede;
|
|
--ffz-color-2: #d9d9d9;
|
|
--ffz-color-3: #f0f0f0;
|
|
--ffz-color-4: #e3e3e3;
|
|
--ffz-color-5: #a3a3a3;
|
|
--ffz-color-6: #fff;
|
|
--ffz-color-7: #bfbfbf;
|
|
--ffz-color-8: hsla(0, 0%, 100%, 0.05);
|
|
--ffz-color-9: #949494;
|
|
--ffz-color-10: #7d7d7d;
|
|
--ffz-color-11: rgba(163,163,163, 0.2);
|
|
--ffz-color-12: #f2f2f2;
|
|
--ffz-color-13: rgba(163,163,163, 0.4);
|
|
--ffz-color-14: rgba(163,163,163, 0.1);
|
|
--ffz-color-15: rgba(163,163,163, 0.5);
|
|
--ffz-color-16: #ec1313;
|
|
--ffz-color-17: #a50d0d;
|
|
--ffz-color-18: #616161;
|
|
--ffz-color-19: rgba(0, 0, 0, 0.25);
|
|
--ffz-color-20: #14b866;
|
|
--ffz-color-21: #12a159;
|
|
--ffz-color-22: #404040;
|
|
--ffz-color-23: #1f1f1f;
|
|
--ffz-color-24: hsla(0, 0%, 100%, 0.3);
|
|
--ffz-color-25: #fafafa;
|
|
--ffz-color-26: #bfbfbf;
|
|
--ffz-color-27: rgba(0, 0, 0, 0.6);
|
|
--ffz-color-28: #5c5c5c;
|
|
--ffz-color-29: #121212;
|
|
--ffz-color-30: #d1d1d1;
|
|
--ffz-color-31: #ffb300;
|
|
--ffz-color-32: #cccccc;
|
|
--ffz-color-33: hsla(0, 0%, 100%, 0.15);
|
|
--ffz-color-34: #0e9bd8;
|
|
--ffz-color-35: #1c1c1c;
|
|
--ffz-color-36: #adadad;
|
|
--ffz-color-37: rgba(0, 0, 0, 0.34);
|
|
--ffz-color-38: rgba(0, 0, 0, 0.26);
|
|
--ffz-color-39: rgba(0, 0, 0, 0.28);
|
|
--ffz-color-40: #121212;
|
|
--ffz-color-41: #ffea00;
|
|
--ffz-color-42: rgba(125,125,125, 0.2);
|
|
--ffz-color-43: rgba(163,163,163, 0.25);
|
|
--ffz-color-44: rgba(92,92,92, 0.5);
|
|
--ffz-color-45: rgba(165, 13, 13, 0.2);
|
|
--ffz-color-46: rgba(236, 19, 19, 0.2);
|
|
--ffz-color-47: hsla(0, 0%, 100%, 0.8);
|
|
--ffz-color-48: hsla(0, 0%, 100%, 0.5);
|
|
--ffz-color-49: rgba(0, 0, 0, 0.05);
|
|
--ffz-color-50: hsla(0, 0%, 100%, 0.1);
|
|
--ffz-color-51: #e8e8e8;
|
|
--ffz-color-52: hsla(0, 0%, 73%, 0.9);
|
|
--ffz-color-53: #000;
|
|
--ffz-color-54: #4a4a4a;
|
|
--ffz-color-55: #3b5998;
|
|
--ffz-color-56: #45668e;
|
|
--ffz-color-57: #1da1f2;
|
|
--ffz-color-58: #ff4500;
|
|
|
|
body {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
a {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
a:hover {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
a:focus {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
a:active {
|
|
color: var(--ffz-color-4)
|
|
}
|
|
.button {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.button:focus, .button:hover {
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.button:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button:active {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button:disabled {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
border-color: var(--ffz-color-8);
|
|
box-shadow: none
|
|
}
|
|
.button:disabled:focus, .button:disabled:hover {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
border-color: var(--ffz-color-8);
|
|
box-shadow: none
|
|
}
|
|
.button--checkbox, .button--hollow, .button--radio {
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.button--checkbox:focus, .button--checkbox:hover, .button--hollow:focus, .button--hollow:hover, .button--radio:focus, .button--radio:hover {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.button--checkbox:focus, .button--hollow:focus, .button--radio:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13)
|
|
}
|
|
.button--checkbox:active, .button--hollow:active, .button--radio:active {
|
|
background-color: var(--ffz-color-14);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-15);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-15);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.button--checkbox.button--dropmenu:after, .button--hollow.button--dropmenu:after, .button--radio.button--dropmenu:after {
|
|
border-color: var(--ffz-color-1);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--checkbox.button--dropmenu:focus:after, .button--checkbox.button--dropmenu:hover:after, .button--hollow.button--dropmenu:focus:after, .button--hollow.button--dropmenu:hover:after, .button--radio.button--dropmenu:focus:after, .button--radio.button--dropmenu:hover:after {
|
|
border-color: var(--ffz-color-12);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--checkbox, .button--radio {
|
|
background-color: transparent;
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-10);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.button--checkbox:nth-of-type(n+2), .button--radio:nth-of-type(n+2) {
|
|
-webkit-box-shadow: inset -1px 0 0 var(--ffz-color-10), inset 0 1px 0 var(--ffz-color-10), inset 0 -1px 0 var(--ffz-color-10);
|
|
box-shadow: inset -1px 0 0 var(--ffz-color-10), inset 0 1px 0 var(--ffz-color-10), inset 0 -1px 0 var(--ffz-color-10)
|
|
}
|
|
.button--checkbox [type=checkbox]:focus + .button__label, .button--checkbox [type=radio]:focus + .button__label, .button--radio [type=checkbox]:focus + .button__label, .button--radio [type=radio]:focus + .button__label {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button--checkbox [type=checkbox]:active + .button__label, .button--checkbox [type=radio]:active + .button__label, .button--radio [type=checkbox]:active + .button__label, .button--radio [type=radio]:active + .button__label {
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button--checkbox [type=checkbox]:checked + .button__label, .button--checkbox [type=radio]:checked + .button__label, .button--radio [type=checkbox]:checked + .button__label, .button--radio [type=radio]:checked + .button__label {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.button--checkbox [type=checkbox]:focus + .button__label, .button--radio [type=checkbox]:focus + .button__label {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button--checkbox [type=checkbox]:active + .button__label, .button--radio [type=checkbox]:active + .button__label {
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.button--checkbox [type=checkbox]:checked:focus + .button__label, .button--radio [type=checkbox]:checked:focus + .button__label {
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.button--checkbox [type=checkbox]:checked:active + .button__label, .button--radio [type=checkbox]:checked:active + .button__label {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.button--text {
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.button--text:focus, .button--text:hover {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.button--text:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13)
|
|
}
|
|
.button--text:active {
|
|
background-color: var(--ffz-color-14);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-15);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-15);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.button--text.button--dropmenu:after {
|
|
border-color: var(--ffz-color-1);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--text.button--dropmenu:hover:after {
|
|
border-color: var(--ffz-color-12);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--alert {
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-16)
|
|
}
|
|
.button--alert:focus, .button--alert:hover {
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-17)
|
|
}
|
|
.button--alert:active {
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-16)
|
|
}
|
|
.button--icon figure svg {
|
|
fill: var(--ffz-color-6)
|
|
}
|
|
.button--icon.button--hollow figure svg {
|
|
fill: var(--ffz-color-1)
|
|
}
|
|
.button--icon.button--text figure svg {
|
|
fill: var(--ffz-color-1)
|
|
}
|
|
.button--icon-only {
|
|
background-color: transparent
|
|
}
|
|
.button--icon-only figure svg {
|
|
fill: var(--ffz-color-1)
|
|
}
|
|
.button--icon-only:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-13)
|
|
}
|
|
.button--icon-only:focus, .button--icon-only:hover {
|
|
background-color: var(--ffz-color-11)
|
|
}
|
|
.button--icon-only:focus figure svg, .button--icon-only:hover figure svg {
|
|
fill: var(--ffz-color-12)
|
|
}
|
|
.button--icon-only:active {
|
|
background-color: var(--ffz-color-14)
|
|
}
|
|
.button--icon-only:active figure svg {
|
|
fill: var(--ffz-color-12)
|
|
}
|
|
.button--icon-only.button--secondary figure svg {
|
|
fill: var(--ffz-color-9)
|
|
}
|
|
.button--icon-only.button--secondary:focus figure svg, .button--icon-only.button--secondary:hover figure svg {
|
|
fill: var(--ffz-color-18)
|
|
}
|
|
.button--icon-only.button--secondary:active figure svg {
|
|
fill: var(--ffz-color-18)
|
|
}
|
|
.button--icon-only.button--dropmenu:after {
|
|
border-color: var(--ffz-color-1);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--icon-only.button--dropmenu:hover:after {
|
|
border-color: var(--ffz-color-12);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button--dropmenu:after {
|
|
border-color: var(--ffz-color-6);
|
|
border-right-color: transparent;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent
|
|
}
|
|
.button__num-block {
|
|
background-color: var(--ffz-color-19)
|
|
}
|
|
.button--status {
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.button--status.button--icon.button--icon-only figure svg {
|
|
fill: var(--ffz-color-6)
|
|
}
|
|
.button--status:focus, .button--status:hover {
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-16)
|
|
}
|
|
.button--status:active {
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-16)
|
|
}
|
|
.button--success {
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.button--success:focus, .button--success:hover {
|
|
background-color: var(--ffz-color-21);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.button--success:active {
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.button--disabled {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
border-color: var(--ffz-color-8)
|
|
}
|
|
.button--disabled:focus, .button--disabled:hover {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
border-color: var(--ffz-color-8)
|
|
}
|
|
.card a:hover {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.card--bordered {
|
|
background-color: var(--ffz-color-0);
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.card__img {
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.card__img--avatar:after {
|
|
border-color: var(--ffz-color-24)
|
|
}
|
|
.card__body--alt {
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.card__overlay .card__bread, .card__overlay .card__title {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.card__overlay .card__info {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
a:focus .card__overlay .card__title, a:hover .card__overlay .card__title {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.card__bread {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.card__bread a {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.card__title a {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.card__title a:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
a:hover .card__title {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.card__info {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.card__info a {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.card__info a:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.card__meta {
|
|
background-color: var(--ffz-color-27);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.card__meta svg {
|
|
fill: var(--ffz-color-25)
|
|
}
|
|
.card__delete svg {
|
|
fill: var(--ffz-color-26)
|
|
}
|
|
.form__icon svg {
|
|
fill: var(--ffz-color-25)
|
|
}
|
|
.form__input[type=email], .form__input[type=password], .form__input[type=search], .form__input[type=text], select.form__input, textarea.form__input {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.form__input[type=email]::-webkit-input-placeholder, .form__input[type=password]::-webkit-input-placeholder, .form__input[type=search]::-webkit-input-placeholder, .form__input[type=text]::-webkit-input-placeholder, select.form__input::-webkit-input-placeholder, textarea.form__input::-webkit-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__input[type=email]::-moz-placeholder, .form__input[type=password]::-moz-placeholder, .form__input[type=search]::-moz-placeholder, .form__input[type=text]::-moz-placeholder, select.form__input::-moz-placeholder, textarea.form__input::-moz-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__input[type=email]:-ms-input-placeholder, .form__input[type=password]:-ms-input-placeholder, .form__input[type=search]:-ms-input-placeholder, .form__input[type=text]:-ms-input-placeholder, select.form__input:-ms-input-placeholder, textarea.form__input:-ms-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__input[type=email]::placeholder, .form__input[type=password]::placeholder, .form__input[type=search]::placeholder, .form__input[type=text]::placeholder, select.form__input::placeholder, textarea.form__input::placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__input[type=email]:focus, .form__input[type=password]:focus, .form__input[type=search]:focus, .form__input[type=text]:focus, select.form__input:focus, textarea.form__input:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=checkbox], .form__input[type=radio] {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.form__input[type=checkbox] + label, .form__input[type=radio] + label {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.form__input[type=checkbox] + label:before, .form__input[type=radio] + label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.form__input[type=checkbox]:focus + label:before, .form__input[type=radio]:focus + label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=checkbox]:checked + label:before {
|
|
background-color: var(--ffz-color-7);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=checkbox]:checked + label:after {
|
|
border-bottom-color: var(--ffz-color-6);
|
|
border-left-color: var(--ffz-color-6)
|
|
}
|
|
.form__input[type=checkbox]:checked:checked:focus + label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=radio] + label:after {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.form__input[type=radio]:checked + label:after {
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.form__label {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.form__label--optional:after {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__hint {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.form__group--error .form__label {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.form__group--error .form__input, .form__group--error .form__input:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.form__group--error .form__hint--error {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.form__input[type=range]::-moz-range-track {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-ms-track {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-webkit-slider-runnable-track {
|
|
background-color: var(--ffz-color-28);
|
|
-webkit-box-shadow: var(--ffz-color-28) 0 0 0 1px inset;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-moz-range-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-ms-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-webkit-slider-thumb {
|
|
-webkit-box-shadow: var(--ffz-color-28) 0 0 0 1px inset;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-ms-fill-lower {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]::-ms-fill-upper {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.form__input[type=range]:focus::-moz-range-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=range]:focus::-ms-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.form__input[type=range]:focus::-webkit-slider-thumb {
|
|
-webkit-box-shadow: var(--ffz-color-7) 0 0 0 1px inset, 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-tabs {
|
|
-webkit-box-shadow: inset 0 -1px 0 var(--ffz-color-28);
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-28)
|
|
}
|
|
.tw-tabs__item > a, .tw-tabs__item > button {
|
|
color: var(--ffz-color-30)
|
|
}
|
|
.tw-tabs__item > a:hover, .tw-tabs__item > button:hover {
|
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-5) inset;
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-5)
|
|
}
|
|
.tw-tabs__item > a:focus, .tw-tabs__item > button:focus {
|
|
-webkit-box-shadow: 0 -2px 0 var(--ffz-color-5) inset, 0 4px 6px -4px var(--ffz-color-7);
|
|
box-shadow: inset 0 -2px 0 var(--ffz-color-5), 0 4px 6px -4px var(--ffz-color-7)
|
|
}
|
|
.tw-tabs__item > a.active, .tw-tabs__item > button.active {
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-5) inset;
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-5)
|
|
}
|
|
.brick {
|
|
background-color: var(--ffz-color-0);
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.balloon-wrapper--hotspot:after {
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.balloon-wrapper--hotspot:hover:after {
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.balloon {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1);
|
|
-webkit-box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19);
|
|
box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19)
|
|
}
|
|
.balloon:after {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.balloon--left:after {
|
|
-webkit-box-shadow: 1px -1px 0 var(--ffz-color-22);
|
|
box-shadow: 1px -1px 0 var(--ffz-color-22)
|
|
}
|
|
.balloon--right:after {
|
|
-webkit-box-shadow: -1px 1px 0 var(--ffz-color-22);
|
|
box-shadow: -1px 1px 0 var(--ffz-color-22)
|
|
}
|
|
.balloon--up:after {
|
|
-webkit-box-shadow: 1px 1px 0 var(--ffz-color-22);
|
|
box-shadow: 1px 1px 0 var(--ffz-color-22)
|
|
}
|
|
.balloon--down:after {
|
|
-webkit-box-shadow: -1px -1px 0 var(--ffz-color-22);
|
|
box-shadow: -1px -1px 0 var(--ffz-color-22)
|
|
}
|
|
.balloon--tooltip {
|
|
background-color: var(--ffz-color-6);
|
|
color: var(--ffz-color-29);
|
|
box-shadow: none
|
|
}
|
|
.balloon--tooltip:after {
|
|
background-color: var(--ffz-color-6);
|
|
box-shadow: none
|
|
}
|
|
.balloon--cols .balloon__list ~ .balloon__list {
|
|
-webkit-box-shadow: -1px 0 0 var(--ffz-color-22);
|
|
box-shadow: -1px 0 0 var(--ffz-color-22)
|
|
}
|
|
.balloon .balloon__link {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.balloon .balloon__link.balloon__link--selected {
|
|
background-color: var(--ffz-color-28) !important
|
|
}
|
|
.balloon .balloon__link.balloon__link--active, .balloon .balloon__link:hover {
|
|
background-color: var(--ffz-color-10);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.balloon__link.balloon__link--alert {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.balloon__link.balloon__link--disabled {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.balloon__title {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.balloon__stroke {
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.balloon--alert {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.balloon--alert {
|
|
color: var(--ffz-color-6) !important
|
|
}
|
|
.balloon--alert:after {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.balloon--alert:after {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.pill {
|
|
background-color: var(--ffz-color-28);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.progress-bar {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.progress-bar__fill {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.progress-bar--error {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.progress-bar--caution {
|
|
background-color: var(--ffz-color-31)
|
|
}
|
|
.progress-bar--countdown .progress-bar__fill {
|
|
background-color: var(--ffz-color-32)
|
|
}
|
|
.toggle input[type=checkbox]:focus + .toggle__button {
|
|
background-color: var(--ffz-color-10);
|
|
-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: 0 0 6px -2px var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.toggle input[type=checkbox]:checked + .toggle__button {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.toggle input[type=checkbox]:checked + .toggle__button:before {
|
|
border-bottom-color: var(--ffz-color-6);
|
|
border-left-color: var(--ffz-color-6)
|
|
}
|
|
.toggle__button {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.toggle__button:hover {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.toggle__button:after {
|
|
background-color: var(--ffz-color-6)
|
|
}
|
|
.toggle__label-off, .toggle__label-on {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.border {
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.border-t {
|
|
border-top-color: var(--ffz-color-22)
|
|
}
|
|
.border-r {
|
|
border-right-color: var(--ffz-color-22)
|
|
}
|
|
.border-b {
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.border-l {
|
|
border-left-color: var(--ffz-color-22)
|
|
}
|
|
.border--marked {
|
|
border-left-color: var(--ffz-color-5) !important
|
|
}
|
|
.c-background-body {
|
|
background-color: var(--ffz-color-23) !important
|
|
}
|
|
.c-background {
|
|
background-color: var(--ffz-color-0) !important
|
|
}
|
|
.c-background-alt {
|
|
background-color: var(--ffz-color-23) !important
|
|
}
|
|
.c-background-alt-2 {
|
|
background-color: var(--ffz-color-29) !important
|
|
}
|
|
.c-background-accent {
|
|
background-color: var(--ffz-color-5) !important
|
|
}
|
|
.c-background-accent-alt {
|
|
background-color: var(--ffz-color-28) !important
|
|
}
|
|
.c-background-accent-alt-2 {
|
|
background-color: var(--ffz-color-22) !important
|
|
}
|
|
.c-background-placeholder {
|
|
background-color: var(--ffz-color-8) !important
|
|
}
|
|
.c-background-overlay-placeholder {
|
|
background-color: var(--ffz-color-33) !important
|
|
}
|
|
.c-background-live {
|
|
background-color: var(--ffz-color-16) !important
|
|
}
|
|
.c-background-prime {
|
|
background-color: var(--ffz-color-34) !important
|
|
}
|
|
.c-background-tooltip {
|
|
background-color: var(--ffz-color-6) !important
|
|
}
|
|
.c-background-overlay {
|
|
background-color: var(--ffz-color-27) !important
|
|
}
|
|
.c-background-top-nav {
|
|
background-color: var(--ffz-color-28) !important
|
|
}
|
|
.c-background-chat {
|
|
background-color: var(--ffz-color-29) !important
|
|
}
|
|
.c-background-chat-alt {
|
|
background-color: var(--ffz-color-0) !important
|
|
}
|
|
.c-background-chat-header {
|
|
background-color: var(--ffz-color-23) !important
|
|
}
|
|
.c-background-chat-line-mentioning {
|
|
background-color: var(--ffz-color-28) !important
|
|
}
|
|
.c-background-chat-line-mentioned {
|
|
background-color: var(--ffz-color-12) !important
|
|
}
|
|
.c-background-modal-overlay {
|
|
background-color: var(--ffz-color-27) !important
|
|
}
|
|
.c-background-modal {
|
|
background-color: var(--ffz-color-0) !important
|
|
}
|
|
.c-background-graph {
|
|
background-color: var(--ffz-color-23) !important
|
|
}
|
|
.c-background-graph-fill {
|
|
background-color: var(--ffz-color-7) !important
|
|
}
|
|
.c-text {
|
|
color: var(--ffz-color-1) !important
|
|
}
|
|
.c-text-alt {
|
|
color: var(--ffz-color-26) !important
|
|
}
|
|
.c-text-alt-2 {
|
|
color: var(--ffz-color-9) !important
|
|
}
|
|
.c-text-link {
|
|
color: var(--ffz-color-2) !important
|
|
}
|
|
.c-text-link-hover {
|
|
color: var(--ffz-color-3) !important
|
|
}
|
|
.c-text-link-focus {
|
|
color: var(--ffz-color-3) !important
|
|
}
|
|
.c-text-link-active {
|
|
color: var(--ffz-color-4) !important
|
|
}
|
|
.c-text-link-visited {
|
|
color: var(--ffz-color-2) !important
|
|
}
|
|
.c-text-alert, .c-text-live {
|
|
color: var(--ffz-color-16) !important
|
|
}
|
|
.c-text-prime {
|
|
color: var(--ffz-color-34) !important
|
|
}
|
|
.c-text-hint {
|
|
color: var(--ffz-color-9) !important
|
|
}
|
|
.c-text-error {
|
|
color: var(--ffz-color-16) !important
|
|
}
|
|
.c-text-tooltip {
|
|
color: var(--ffz-color-29) !important
|
|
}
|
|
.c-text-overlay {
|
|
color: var(--ffz-color-25) !important
|
|
}
|
|
.c-text-overlay-alt {
|
|
color: var(--ffz-color-26) !important
|
|
}
|
|
.c-text-chat-line-mentioning {
|
|
color: var(--ffz-color-6) !important
|
|
}
|
|
.c-text-chat-line-mentioned {
|
|
color: var(--ffz-color-35) !important
|
|
}
|
|
.c-border {
|
|
border-color: var(--ffz-color-22) !important
|
|
}
|
|
.c-border-brand {
|
|
border-color: var(--ffz-color-5) !important
|
|
}
|
|
.c-border-alert, .c-border-error {
|
|
border-color: var(--ffz-color-16) !important
|
|
}
|
|
.c-border-whisper-incoming {
|
|
border-color: var(--ffz-color-2) !important
|
|
}
|
|
.c-border-whisper-outgoing {
|
|
border-color: var(--ffz-color-36) !important
|
|
}
|
|
.c-border-spinner {
|
|
border-color: var(--ffz-color-33) !important
|
|
}
|
|
.c-border-spinner-fill {
|
|
border-color: var(--ffz-color-1) !important
|
|
}
|
|
.elevation-1 {
|
|
-webkit-box-shadow: 0 2px 4px -1px var(--ffz-color-37), 0 2px 2px -2px var(--ffz-color-38), 0 1px 4px 0 var(--ffz-color-39) !important;
|
|
box-shadow: 0 2px 4px -1px var(--ffz-color-37), 0 2px 2px -2px var(--ffz-color-38), 0 1px 4px 0 var(--ffz-color-39) !important
|
|
}
|
|
.elevation-2 {
|
|
-webkit-box-shadow: 0 4px 6px -2px var(--ffz-color-37), 0 3px 4px -2px var(--ffz-color-38), 0 1px 8px 0 var(--ffz-color-39) !important;
|
|
box-shadow: 0 4px 6px -2px var(--ffz-color-37), 0 3px 4px -2px var(--ffz-color-38), 0 1px 8px 0 var(--ffz-color-39) !important
|
|
}
|
|
.elevation-3 {
|
|
-webkit-box-shadow: 0 6px 10px 0 var(--ffz-color-37), 0 1px 8px -3px var(--ffz-color-38), 0 2px 16px 0 var(--ffz-color-39) !important;
|
|
box-shadow: 0 6px 10px 0 var(--ffz-color-37), 0 1px 8px -3px var(--ffz-color-38), 0 2px 16px 0 var(--ffz-color-39) !important
|
|
}
|
|
.elevation-4 {
|
|
-webkit-box-shadow: 0 10px 14px 4px var(--ffz-color-37), 0 6px 14px -6px var(--ffz-color-38), 0 4px 24px 0 var(--ffz-color-39) !important;
|
|
box-shadow: 0 10px 14px 4px var(--ffz-color-37), 0 6px 14px -6px var(--ffz-color-38), 0 4px 24px 0 var(--ffz-color-39) !important
|
|
}
|
|
.elevation-5 {
|
|
-webkit-box-shadow: 0 14px 20px 8px var(--ffz-color-37), 0 10px 22px -8px var(--ffz-color-38), 0 8px 38px 0 var(--ffz-color-39) !important;
|
|
box-shadow: 0 14px 20px 8px var(--ffz-color-37), 0 10px 22px -8px var(--ffz-color-38), 0 8px 38px 0 var(--ffz-color-39) !important
|
|
}
|
|
.twilight-root {
|
|
background-color: var(--ffz-color-23);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-typeset p code {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.tw-typeset pre {
|
|
border-color: var(--ffz-color-22);
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.tw-typeset blockquote {
|
|
border-left-color: var(--ffz-color-5)
|
|
}
|
|
.tw-typeset hr {
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.tw-tooltip {
|
|
background-color: var(--ffz-color-6);
|
|
color: var(--ffz-color-29)
|
|
}
|
|
.tw-tooltip:after {
|
|
background-color: var(--ffz-color-6)
|
|
}
|
|
.tw-thumbnail-card a:hover .tw-thumbnail-card__title {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.tw-thumbnail-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-thumbnail-card__meta {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-textarea {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent
|
|
}
|
|
.tw-textarea::-webkit-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-textarea::-moz-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-textarea:-ms-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-textarea::placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-textarea:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-textarea--error {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.tw-tab-nav {
|
|
-webkit-box-shadow: inset 0 -1px 0 var(--ffz-color-28);
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-28)
|
|
}
|
|
.tw-tab-nav__item:not(.tw-tab-nav__item--disabled) a, .tw-tab-nav__item:not(.tw-tab-nav__item--disabled) button {
|
|
color: var(--ffz-color-30)
|
|
}
|
|
.tw-tab-nav__item:not(.tw-tab-nav__item--disabled) a:hover, .tw-tab-nav__item:not(.tw-tab-nav__item--disabled) button:hover {
|
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-5) inset;
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-5)
|
|
}
|
|
.tw-tab-nav__item:not(.tw-tab-nav__item--disabled) a:focus, .tw-tab-nav__item:not(.tw-tab-nav__item--disabled) button:focus {
|
|
-webkit-box-shadow: 0 -2px 0 var(--ffz-color-5) inset, 0 4px 6px -4px var(--ffz-color-7);
|
|
box-shadow: inset 0 -2px 0 var(--ffz-color-5), 0 4px 6px -4px var(--ffz-color-7)
|
|
}
|
|
.tw-tab-nav__item:not(.tw-tab-nav__item--disabled) a.active, .tw-tab-nav__item:not(.tw-tab-nav__item--disabled) button.active {
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: 0 -1px 0 var(--ffz-color-5) inset;
|
|
box-shadow: inset 0 -1px 0 var(--ffz-color-5)
|
|
}
|
|
.tw-tab-nav__item--disabled a, .tw-tab-nav__item--disabled button {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-tab-nav__item--disabled a:hover, .tw-tab-nav__item--disabled button:hover {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-select {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent
|
|
}
|
|
.tw-select::-webkit-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-select::-moz-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-select:-ms-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-select::placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-select:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-select--error {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.tw-button--checkbox, .tw-button--radio {
|
|
border-color: var(--ffz-color-10);
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-button--checkbox:hover, .tw-button--radio:hover {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button--checkbox:focus, .tw-button--radio:focus {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox:active, .tw-button--radio:active {
|
|
border-color: var(--ffz-color-15);
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:focus + .tw-button__label, .tw-button--checkbox [type=radio]:focus + .tw-button__label, .tw-button--radio [type=checkbox]:focus + .tw-button__label, .tw-button--radio [type=radio]:focus + .tw-button__label {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:active + .tw-button__label, .tw-button--checkbox [type=radio]:active + .tw-button__label, .tw-button--radio [type=checkbox]:active + .tw-button__label, .tw-button--radio [type=radio]:active + .tw-button__label {
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:checked + .tw-button__label, .tw-button--checkbox [type=radio]:checked + .tw-button__label, .tw-button--radio [type=checkbox]:checked + .tw-button__label, .tw-button--radio [type=radio]:checked + .tw-button__label {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:focus + .tw-button__label, .tw-button--radio [type=checkbox]:focus + .tw-button__label {
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:active + .tw-button__label, .tw-button--radio [type=checkbox]:active + .tw-button__label {
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:checked:focus + .tw-button__label, .tw-button--radio [type=checkbox]:checked:focus + .tw-button__label {
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--checkbox [type=checkbox]:checked:active + .tw-button__label, .tw-button--radio [type=checkbox]:checked:active + .tw-button__label {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-range, .tw-range:active, .tw-range:focus, .tw-range:hover {
|
|
background-color: transparent;
|
|
box-shadow: none
|
|
}
|
|
.tw-range::-moz-range-track {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-ms-track {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-webkit-slider-runnable-track {
|
|
background-color: var(--ffz-color-28);
|
|
-webkit-box-shadow: var(--ffz-color-28) 0 0 0 1px inset;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-moz-range-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-ms-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-webkit-slider-thumb {
|
|
-webkit-box-shadow: var(--ffz-color-28) 0 0 0 1px inset;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-ms-fill-lower {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range::-ms-fill-upper {
|
|
background-color: var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.tw-range:focus::-moz-range-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-range:focus::-ms-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-range:focus::-webkit-slider-thumb {
|
|
-webkit-box-shadow: var(--ffz-color-7) 0 0 0 1px inset, 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-range--error::-moz-range-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.tw-range--error::-ms-thumb {
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.tw-range--error::-webkit-slider-thumb {
|
|
-webkit-box-shadow: var(--ffz-color-16) 0 0 0 1px inset;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.tw-toggle__input:focus + .tw-toggle__button {
|
|
background-color: var(--ffz-color-10);
|
|
-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: 0 0 6px -2px var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.tw-toggle__input:checked + .tw-toggle__button {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.tw-toggle__input:checked + .tw-toggle__button:before {
|
|
border-bottom-color: var(--ffz-color-6);
|
|
border-left-color: var(--ffz-color-6)
|
|
}
|
|
.tw-toggle__button {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.tw-toggle__button:hover {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.tw-toggle__button:after {
|
|
background-color: var(--ffz-color-6)
|
|
}
|
|
.tw-toggle--error .tw-toggle__button {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent
|
|
}
|
|
.tw-radio__input {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-radio__input:checked + .tw-radio__label:after {
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.tw-radio__input:focus + .tw-radio__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-radio__label {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-radio__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent
|
|
}
|
|
.tw-radio__label:before {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.tw-radio__label:after {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.tw-radio--error .tw-radio__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent
|
|
}
|
|
.tw-progress-bar {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.tw-progress-bar.tw-progress-bar--vod {
|
|
background-color: var(--ffz-color-40)
|
|
}
|
|
.tw-progress-bar.tw-progress-bar--vod .tw-progress-bar__fill {
|
|
background-color: var(--ffz-color-2)
|
|
}
|
|
.tw-progress-bar__fill {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.tw-progress-bar--error {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-progress-bar--caution {
|
|
background-color: var(--ffz-color-31)
|
|
}
|
|
.tw-progress-bar--countdown .tw-progress-bar__fill {
|
|
background-color: var(--ffz-color-32)
|
|
}
|
|
.tw-placeholder:before {
|
|
background-color: var(--ffz-color-8)
|
|
}
|
|
.tw-placeholder--overlay:before {
|
|
background-color: var(--ffz-color-33)
|
|
}
|
|
.tw-pill {
|
|
background-color: var(--ffz-color-28);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-pill--alt {
|
|
background-color: var(--ffz-color-30)
|
|
}
|
|
.tw-pill--alt2 {
|
|
background-color: var(--ffz-color-9)
|
|
}
|
|
.tw-pill--brand {
|
|
background-color: var(--ffz-color-2)
|
|
}
|
|
.tw-pill--live, .tw-pill--notification {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-pill--warn {
|
|
background-color: var(--ffz-color-41)
|
|
}
|
|
.tw-pill--alert {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-pill--success {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.tw-pill--prime {
|
|
background-color: var(--ffz-color-34)
|
|
}
|
|
.tw-tag {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-tag {
|
|
border-color: transparent
|
|
}
|
|
.tw-tag:hover {
|
|
border-color: transparent;
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.tw-tag:focus {
|
|
border-color: var(--ffz-color-32);
|
|
background-color: var(--ffz-color-7);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-tag:active {
|
|
border-color: var(--ffz-color-7);
|
|
background-color: var(--ffz-color-5);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-tag:disabled, .tw-tag:disabled:active, .tw-tag:disabled:focus {
|
|
border-color: var(--ffz-color-8);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
box-shadow: none
|
|
}
|
|
.tw-tag__close:after {
|
|
border-left-color: var(--ffz-color-22)
|
|
}
|
|
.tw-loading-spinner {
|
|
border-top-color: var(--ffz-color-33);
|
|
border-right-color: var(--ffz-color-33);
|
|
border-bottom-color: var(--ffz-color-33);
|
|
border-left-color: var(--ffz-color-1)
|
|
}
|
|
.tw-loading-spinner--inherit-color {
|
|
border-top-color: var(--ffz-color-33);
|
|
border-right-color: var(--ffz-color-33);
|
|
border-bottom-color: var(--ffz-color-33)
|
|
}
|
|
.tw-live-indicator {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-live-indicator--pulse:after {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-group__label {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-group__optional {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-group__hint {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-group--error .tw-group__hint, .tw-group--error .tw-group__label, .tw-group__hint--error {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.tw-interactable--disabled, .tw-interactable:disabled {
|
|
background-color: var(--ffz-color-8)
|
|
}
|
|
.tw-interactable--hover, .tw-interactable:hover {
|
|
background-color: var(--ffz-color-10);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-interactable:active {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-interactable:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.tw-interactable--selected {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.tw-interactable--alpha.tw-interactable--hover, .tw-interactable--alpha:hover {
|
|
background-color: var(--ffz-color-42)
|
|
}
|
|
.tw-interactable--alpha:active {
|
|
background-color: var(--ffz-color-43)
|
|
}
|
|
.tw-interactable--alpha:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.tw-interactable--alpha.tw-interactable--selected {
|
|
background-color: var(--ffz-color-44)
|
|
}
|
|
.tw-interactable--alert {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.tw-interactable--alert--hover, .tw-interactable--alert:focus, .tw-interactable--alert:hover {
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-interactable--alert--active, .tw-interactable--alert:active {
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-interactable--alert.tw-interactable--alpha {
|
|
color: var(--ffz-color-16)
|
|
}
|
|
.tw-interactable--alert.tw-interactable--alpha.tw-interactable--hover, .tw-interactable--alert.tw-interactable--alpha:focus, .tw-interactable--alert.tw-interactable--alpha:hover {
|
|
background-color: var(--ffz-color-45)
|
|
}
|
|
.tw-interactable--alert.tw-interactable--alpha--active, .tw-interactable--alert.tw-interactable--alpha:active {
|
|
background-color: var(--ffz-color-46)
|
|
}
|
|
.tw-input__icon svg {
|
|
fill: var(--ffz-color-25)
|
|
}
|
|
.tw-input {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent
|
|
}
|
|
.tw-input::-webkit-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-input::-moz-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-input:-ms-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-input::placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-input:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-input--error {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16)
|
|
}
|
|
.svg {
|
|
fill: var(--ffz-color-25)
|
|
}
|
|
.svg--alt {
|
|
fill: var(--ffz-color-30)
|
|
}
|
|
.svg--alt-2 {
|
|
fill: var(--ffz-color-9)
|
|
}
|
|
.svg--brand {
|
|
fill: var(--ffz-color-2)
|
|
}
|
|
.svg--live {
|
|
fill: var(--ffz-color-16)
|
|
}
|
|
.svg--warn {
|
|
fill: var(--ffz-color-41)
|
|
}
|
|
.svg--alert {
|
|
fill: var(--ffz-color-16)
|
|
}
|
|
.svg--success {
|
|
fill: var(--ffz-color-20)
|
|
}
|
|
.svg--prime {
|
|
fill: var(--ffz-color-34)
|
|
}
|
|
.svg--placeholder {
|
|
fill: var(--ffz-color-8)
|
|
}
|
|
.svg--overlay-placeholder {
|
|
fill: var(--ffz-color-33)
|
|
}
|
|
.svg--inherit {
|
|
fill: currentColor;
|
|
}
|
|
.tw-drop-zone {
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.tw-drop-zone--error {
|
|
border-color: var(--ffz-color-16)
|
|
}
|
|
.tw-drop-zone--over {
|
|
border-color: var(--ffz-color-5)
|
|
}
|
|
.tw-checkbox__input {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-checkbox__input:checked + .tw-checkbox__label:before {
|
|
background-color: var(--ffz-color-7);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.tw-checkbox__input:checked + .tw-checkbox__label:after {
|
|
border-bottom-color: var(--ffz-color-6);
|
|
border-left-color: var(--ffz-color-6)
|
|
}
|
|
.tw-checkbox__input:focus + .tw-checkbox__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.tw-checkbox__label {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-checkbox__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28), 0 0 0 transparent
|
|
}
|
|
.tw-checkbox--error .tw-checkbox__label:before {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent;
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-16), 0 0 0 transparent
|
|
}
|
|
.tw-balloon {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1);
|
|
-webkit-box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19);
|
|
box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19)
|
|
}
|
|
.tw-balloon > .tw-balloon__tail {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.tw-balloon--left > .tw-balloon__tail {
|
|
-webkit-box-shadow: 1px -1px 0 var(--ffz-color-22);
|
|
box-shadow: 1px -1px 0 var(--ffz-color-22)
|
|
}
|
|
.tw-balloon--right > .tw-balloon__tail {
|
|
-webkit-box-shadow: -1px 1px 0 var(--ffz-color-22);
|
|
box-shadow: -1px 1px 0 var(--ffz-color-22)
|
|
}
|
|
.tw-balloon--up > .tw-balloon__tail {
|
|
-webkit-box-shadow: 1px 1px 0 var(--ffz-color-22);
|
|
box-shadow: 1px 1px 0 var(--ffz-color-22)
|
|
}
|
|
.tw-balloon--down > .tw-balloon__tail {
|
|
-webkit-box-shadow: -1px -1px 0 var(--ffz-color-22);
|
|
box-shadow: -1px -1px 0 var(--ffz-color-22)
|
|
}
|
|
.tw-button-icon {
|
|
border-color: transparent;
|
|
background-color: transparent
|
|
}
|
|
.tw-button-icon {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-button-icon:hover {
|
|
border-color: transparent;
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button-icon:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button-icon:focus {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button-icon:active {
|
|
border-color: var(--ffz-color-15);
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button-icon--disabled, .tw-button-icon:disabled {
|
|
border-color: var(--ffz-color-8);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-button-icon--disabled:focus, .tw-button-icon--disabled:hover, .tw-button-icon:disabled:focus, .tw-button-icon:disabled:hover {
|
|
border-color: var(--ffz-color-8);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
box-shadow: none
|
|
}
|
|
.tw-button-icon--primary {
|
|
border-color: transparent;
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--primary:hover {
|
|
border-color: var(--ffz-color-7);
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--primary:focus {
|
|
border-color: var(--ffz-color-32);
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button-icon--primary:active {
|
|
border-color: var(--ffz-color-7);
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button-icon--hollow {
|
|
border-color: var(--ffz-color-10);
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-button-icon--hollow:hover {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button-icon--hollow:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button-icon--hollow:focus {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button-icon--hollow:active {
|
|
border-color: var(--ffz-color-15);
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button-icon--alert {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--alert:focus, .tw-button-icon--alert:hover {
|
|
border-color: var(--ffz-color-17);
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--alert:active {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--success {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--success:focus, .tw-button-icon--success:hover {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-21);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--success:active {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--overlay {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--overlay:hover {
|
|
border-color: var(--ffz-color-6);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--overlay:focus {
|
|
border-color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--overlay:focus {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-47);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-47)
|
|
}
|
|
.tw-button-icon--overlay:active {
|
|
border-color: var(--ffz-color-6);
|
|
background-color: transparent;
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-47);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-47)
|
|
}
|
|
.tw-button-icon--overlay.tw-button-icon--hollow {
|
|
border-color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--overlay.tw-button-icon--disabled, .tw-button-icon--overlay.tw-button-icon--disabled:focus, .tw-button-icon--overlay.tw-button-icon--disabled:hover, .tw-button-icon--overlay:disabled, .tw-button-icon--overlay:disabled:focus, .tw-button-icon--overlay:disabled:hover {
|
|
background-color: transparent;
|
|
color: var(--ffz-color-48)
|
|
}
|
|
.tw-button-icon--status:focus, .tw-button-icon--status:hover {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--status:active {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button-icon--secondary {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-button-icon--secondary:hover {
|
|
color: var(--ffz-color-18)
|
|
}
|
|
.tw-button-icon--secondary:focus {
|
|
color: var(--ffz-color-18)
|
|
}
|
|
.tw-button-icon--secondary:active {
|
|
color: var(--ffz-color-18)
|
|
}
|
|
.tw-button {
|
|
border-color: transparent;
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button:hover {
|
|
border-color: var(--ffz-color-7);
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button:focus {
|
|
border-color: var(--ffz-color-32);
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button:active {
|
|
border-color: var(--ffz-color-7);
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--hollow, .tw-button--hollow.tw-button--icon-only {
|
|
border-color: var(--ffz-color-10);
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-button--hollow.tw-button--icon-only:hover, .tw-button--hollow:hover {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button--hollow.tw-button--icon-only:focus, .tw-button--hollow:focus {
|
|
border-color: var(--ffz-color-13);
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--hollow.tw-button--icon-only:active, .tw-button--hollow:active {
|
|
border-color: var(--ffz-color-15);
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--alert {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--alert:focus, .tw-button--alert:hover {
|
|
border-color: var(--ffz-color-17);
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--alert:active {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--success {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--success:focus, .tw-button--success:hover {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-21);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--success:active {
|
|
border-color: var(--ffz-color-20);
|
|
background-color: var(--ffz-color-20);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--status:focus, .tw-button--status:hover {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--status:active {
|
|
border-color: var(--ffz-color-16);
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--text {
|
|
background-color: transparent;
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-button--text:focus, .tw-button--text:hover {
|
|
border-color: transparent;
|
|
background-color: var(--ffz-color-11);
|
|
color: var(--ffz-color-12)
|
|
}
|
|
.tw-button--text:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--text:focus {
|
|
border-color: var(--ffz-color-13)
|
|
}
|
|
.tw-button--text:active {
|
|
border-color: var(--ffz-color-15);
|
|
background-color: var(--ffz-color-14);
|
|
color: var(--ffz-color-12);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.tw-button--overlay {
|
|
border-color: transparent;
|
|
background-color: transparent;
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--overlay:hover {
|
|
border-color: var(--ffz-color-6);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--overlay:focus {
|
|
border-color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--overlay:focus {
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-47);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-47)
|
|
}
|
|
.tw-button--overlay:active {
|
|
border-color: var(--ffz-color-6);
|
|
background-color: transparent;
|
|
color: var(--ffz-color-6);
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-47);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-47)
|
|
}
|
|
.tw-button--overlay.tw-button--hollow, .tw-button--overlay.tw-button--state-loading, .tw-button--overlay.tw-button--state-success {
|
|
border-color: var(--ffz-color-6)
|
|
}
|
|
.tw-button--overlay.tw-button--hollow.tw-button--disabled, .tw-button--overlay.tw-button--hollow.tw-button--disabled:active, .tw-button--overlay.tw-button--hollow.tw-button--disabled:focus, .tw-button--overlay.tw-button--hollow.tw-button--disabled:hover, .tw-button--overlay.tw-button--state-loading.tw-button--disabled, .tw-button--overlay.tw-button--state-loading.tw-button--disabled:active, .tw-button--overlay.tw-button--state-loading.tw-button--disabled:focus, .tw-button--overlay.tw-button--state-loading.tw-button--disabled:hover, .tw-button--overlay.tw-button--state-success.tw-button--disabled, .tw-button--overlay.tw-button--state-success.tw-button--disabled:active, .tw-button--overlay.tw-button--state-success.tw-button--disabled:focus, .tw-button--overlay.tw-button--state-success.tw-button--disabled:hover {
|
|
border-color: var(--ffz-color-48)
|
|
}
|
|
.tw-button--overlay.tw-button--disabled, .tw-button--overlay.tw-button--disabled:focus, .tw-button--overlay.tw-button--disabled:hover {
|
|
background-color: transparent;
|
|
color: var(--ffz-color-48)
|
|
}
|
|
.tw-button--disabled {
|
|
border-color: var(--ffz-color-8);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-button--disabled:active, .tw-button--disabled:focus, .tw-button--disabled:hover {
|
|
border-color: var(--ffz-color-8);
|
|
background-color: var(--ffz-color-8);
|
|
color: var(--ffz-color-9);
|
|
box-shadow: none
|
|
}
|
|
.tw-button__num-block {
|
|
background-color: var(--ffz-color-19)
|
|
}
|
|
.tw-box-art-card a:hover .tw-box-art-card__title {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.tw-box-art-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.tw-box-art-card__meta {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.tw-badge {
|
|
background-color: var(--ffz-color-2);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.tw-badge--alt {
|
|
background-color: var(--ffz-color-30)
|
|
}
|
|
.tw-badge--alt2 {
|
|
background-color: var(--ffz-color-9)
|
|
}
|
|
.tw-badge--brand {
|
|
background-color: var(--ffz-color-2)
|
|
}
|
|
.tw-badge--live, .tw-badge--notification {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-badge--warn {
|
|
background-color: var(--ffz-color-41)
|
|
}
|
|
.tw-badge--alert {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.tw-badge--success {
|
|
background-color: var(--ffz-color-20)
|
|
}
|
|
.tw-badge--prime {
|
|
background-color: var(--ffz-color-34)
|
|
}
|
|
.tw-badge--dashboard {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.thread-header__title-bar-container {
|
|
background-color: var(--ffz-color-23);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-22), 0 2px 0 var(--ffz-color-49);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-22), 0 2px 0 var(--ffz-color-49)
|
|
}
|
|
.thread-header__title-bar-container--focused {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.thread-header__title-bar-container--highlighted {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.emote-picker__content-block:not(:first-child) {
|
|
border-top-color: var(--ffz-color-22)
|
|
}
|
|
.emote-picker__tab {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.emote-picker__tab:hover {
|
|
border-top-color: var(--ffz-color-5)
|
|
}
|
|
.emote-picker__tab--active {
|
|
color: var(--ffz-color-25);
|
|
border-top-color: var(--ffz-color-5)
|
|
}
|
|
.emote-picker__tab--disabled {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.emote-picker__emote-link:hover {
|
|
background-color: var(--ffz-color-50)
|
|
}
|
|
.emote-picker__emote-lock {
|
|
background-color: var(--ffz-color-27);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.whispers-list-item:hover {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.side-nav__overlay-wrapper, .side-nav__theme-wrapper {
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.side-nav__toggle-visibility {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.side-nav-card__link {
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.side-nav-card__title {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.side-nav-card__metadata {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.side-nav-card:hover .side-nav-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.side-nav-card:hover .side-nav-card__metadata {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.follow-btn__status-btn {
|
|
background-color: var(--ffz-color-20);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.follow-btn__status-btn .svg--heart, .follow-btn__status-btn .svg--unheart {
|
|
fill: var(--ffz-color-6)
|
|
}
|
|
.follow-btn__status-btn:hover {
|
|
background-color: var(--ffz-color-16);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.follow-btn__dropdown-toggle {
|
|
background-color: var(--ffz-color-51);
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.followed-channels__load-more {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.followed-channels__load-more:hover {
|
|
color: var(--ffz-color-26);
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.followed-channel__live-indicator, .followed-channel__live-indicator--watch-party {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.followed-channel__live-indicator--watch-party {
|
|
background-color: var(--ffz-color-9)
|
|
}
|
|
.right-column__toggle-visibility {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.user-card__overlay {
|
|
background-color: var(--ffz-color-27)
|
|
}
|
|
.user-card__status-btn {
|
|
background-color: var(--ffz-color-20);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.user-card__status-btn:hover {
|
|
background-color: var(--ffz-color-16);
|
|
border-color: var(--ffz-color-20)
|
|
}
|
|
.top-nav__home-link, .top-nav__home-link:hover {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.top-nav__menu {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.top-nav__nav-link.active, .top-nav__nav-link:hover {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.top-nav__beta-badge {
|
|
background-color: var(--ffz-color-16);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.top-nav__beta-badge:hover {
|
|
background-color: var(--ffz-color-17);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.blue-bar {
|
|
background-color: var(--ffz-color-34)
|
|
}
|
|
.blue-bar__link {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.blue-bar__link:hover {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
.search-panel__highlight-link {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.search-panel__link {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.search-panel__card:hover .search-panel__highlight-link, .search-panel__card:hover .search-panel__link {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.notice-wrap__title {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.notice-wrap__text {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.search-title-bar {
|
|
background-color: var(--ffz-color-29);
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.search-result-view__titlesep {
|
|
color: var(--ffz-color-9);
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.search-result-view__titlesep:hover {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.search-live-result-card__info {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.onsite-notification-toast {
|
|
-webkit-box-shadow: 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.onsite-notification-toast--hover, .onsite-notification-toast:hover {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7)
|
|
}
|
|
.persistent-notification__read {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.persistent-notification__unread {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.language-selector__list--border-right {
|
|
border-right-color: var(--ffz-color-22)
|
|
}
|
|
.dashboard-nav__link {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.dashboard-nav__link--active {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.dashboard-nav__link:hover {
|
|
background-color: var(--ffz-color-10);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.dashboard-nav__link:active {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.dashboard-hotspot--announcement {
|
|
background-color: var(--ffz-color-16)
|
|
}
|
|
.twp-button:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.twp-button--hollow {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.twp-button--hollow {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.twp-button--hollow:focus, .twp-button--hollow:hover {
|
|
background-color: var(--ffz-color-11)
|
|
}
|
|
.twp-button--hollow:focus, .twp-button--hollow:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.twp-button--hollow:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.twp-button--text {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.twp-button--text:focus, .twp-button--text:hover {
|
|
background-color: var(--ffz-color-11)
|
|
}
|
|
.twp-button--text:focus, .twp-button--text:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.twp-button--text:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.twp-button--icon-only figure svg {
|
|
fill: var(--ffz-color-2)
|
|
}
|
|
.twp-button--icon-only:focus {
|
|
-webkit-box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10);
|
|
box-shadow: 0 0 6px 0 var(--ffz-color-7), inset 0 0 0 1px var(--ffz-color-10)
|
|
}
|
|
.twp-button--icon-only:focus figure svg, .twp-button--icon-only:hover figure svg {
|
|
fill: var(--ffz-color-3)
|
|
}
|
|
.twp-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.twp-card__title a {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.twp-card__title a:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
a:hover .twp-card__title {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.twp-card__info {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.twp-card__info a {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.twp-card__info a:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.phx-selectbox {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-25);
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-28);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-28)
|
|
}
|
|
.phx-selectbox::-webkit-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.phx-selectbox::-moz-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.phx-selectbox:-ms-input-placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.phx-selectbox::placeholder {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.phx-selectbox:focus {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7), 0 0 6px -2px var(--ffz-color-7)
|
|
}
|
|
.vod-message.vod-message--focused {
|
|
-webkit-box-shadow: inset 0 0 0 1px var(--ffz-color-7);
|
|
box-shadow: inset 0 0 0 1px var(--ffz-color-7)
|
|
}
|
|
.vod-message.vod-message--focused, .vod-message:hover {
|
|
background-color: var(--ffz-color-22)
|
|
}
|
|
.vod-message.vod-message--focused .vod-message__timestamp, .vod-message:hover .vod-message__timestamp {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.vod-message.vod-message--focused .vod-message__timestamp, .vod-message:hover .vod-message__timestamp {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.vod-message.vod-message--focused .vod-message__timestamp:hover, .vod-message:hover .vod-message__timestamp:hover {
|
|
background-color: var(--ffz-color-7)
|
|
}
|
|
.vod-message.vod-message--focused .vod-message__reply, .vod-message:hover .vod-message__reply {
|
|
-webkit-box-shadow: inset 3px 0 0 0 var(--ffz-color-18);
|
|
box-shadow: inset 3px 0 0 0 var(--ffz-color-18)
|
|
}
|
|
.video-chat__message-list-wrapper::-webkit-scrollbar-thumb {
|
|
border-color: var(--ffz-color-23)
|
|
}
|
|
.video-chat__sync-button {
|
|
background-color: var(--ffz-color-52)
|
|
}
|
|
.video-chat__sync-button {
|
|
color: var(--ffz-color-53)
|
|
}
|
|
.video-chat__sync-button:focus, .video-chat__sync-button:hover {
|
|
background-color: var(--ffz-color-26)
|
|
}
|
|
.video-chat__sync-button:focus, .video-chat__sync-button:hover {
|
|
color: var(--ffz-color-53)
|
|
}
|
|
.vod-message__timestamp {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.video-chat__message-author {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.video-chat__message-author--creator, .video-chat__message-author--creator:hover, .video-chat__message-author--me, .video-chat__message-author--me:hover {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.vod-message__show-more-replies {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.vod-message__reply {
|
|
-webkit-box-shadow: inset 3px 0 0 0 var(--ffz-color-54);
|
|
box-shadow: inset 3px 0 0 0 var(--ffz-color-54)
|
|
}
|
|
.video-chat {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.video-chat__input {
|
|
-webkit-box-shadow: inset 0 1px 0 0 var(--ffz-color-22);
|
|
box-shadow: inset 0 1px 0 0 var(--ffz-color-22)
|
|
}
|
|
.video-chat__header {
|
|
-webkit-box-shadow: inset 0 -1px 0 0 var(--ffz-color-22);
|
|
box-shadow: inset 0 -1px 0 0 var(--ffz-color-22)
|
|
}
|
|
.mod-comment__unpublished-message {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.sm-sb-link:focus .sm-sb, .sm-sb-link:hover .sm-sb {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.sm-sb-link:focus .sm-sb__text, .sm-sb-link:hover .sm-sb__text {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.sm-sb {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.sm-sb__text {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.sm-cp-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.sm-cp-card a:hover .sm-cp-card__title {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.sm-graph-panel {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.footer__link, .footer__link:hover {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.live-channel-card__meta {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.live-channel-card__channel {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.live-channel-card__videos {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.live-channel-card__channel:hover, .live-channel-card__videos:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.live-channel-card__boxart {
|
|
border-color: var(--ffz-color-0)
|
|
}
|
|
.carousel-nav__item {
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.carousel-nav__item--active {
|
|
border-bottom-color: var(--ffz-color-5)
|
|
}
|
|
.channel-header__subscription-balloon-options .subscription-balloon-options__prime-crown {
|
|
color: var(--ffz-color-34)
|
|
}
|
|
.channel-header__subscription-balloon-options .subscription-balloon-options__subbed-star {
|
|
color: var(--ffz-color-20)
|
|
}
|
|
.anon-front__social-container {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.twi-drop-zone {
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.twi-drop-zone--over {
|
|
border-color: var(--ffz-color-5)
|
|
}
|
|
.social-button__link--copy:after {
|
|
color: var(--ffz-color-5)
|
|
}
|
|
.social-button__link--facebook:after {
|
|
color: var(--ffz-color-55)
|
|
}
|
|
.social-button__link--vkontakte:after {
|
|
color: var(--ffz-color-56)
|
|
}
|
|
.social-button__link--twitter:after {
|
|
color: var(--ffz-color-57)
|
|
}
|
|
.social-button__link--reddit:after {
|
|
color: var(--ffz-color-58)
|
|
}
|
|
.social-button__icon--reddit {
|
|
background-color: var(--ffz-color-58)
|
|
}
|
|
.social-button__icon--twitter {
|
|
background-color: var(--ffz-color-57)
|
|
}
|
|
.social-button__icon--vkontakte {
|
|
background-color: var(--ffz-color-56)
|
|
}
|
|
.social-button__icon--facebook {
|
|
background-color: var(--ffz-color-55)
|
|
}
|
|
.social-button__icon--copy {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.t-bits-card__footer {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.t-bits-card__footer {
|
|
border-top-color: var(--ffz-color-22)
|
|
}
|
|
.t-bits-card__footer {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.t-bits-card__top-controls {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.bits-buy-card__sub-text {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.bits-buy-card__close {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.cheermote-list .cheermote-list__item-button {
|
|
border-color: var(--ffz-color-22)
|
|
}
|
|
.cheermote-list .cheermote-list__item-button[disabled] {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.cheermote-list .cheermote-list__item-button:focus:not([disabled]), .cheermote-list .cheermote-list__item-button:hover:not([disabled]) {
|
|
background-color: var(--ffz-color-28);
|
|
-webkit-box-shadow: 0 1px 5px var(--ffz-color-28);
|
|
box-shadow: 0 1px 5px var(--ffz-color-28)
|
|
}
|
|
.pinned-cheer__bounding-box {
|
|
background-color: var(--ffz-color-0);
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.pinned-cheer__headline {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.pinned-cheer__progress-bar {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.channel-header {
|
|
background-color: var(--ffz-color-0);
|
|
border-bottom-color: var(--ffz-color-22)
|
|
}
|
|
.channel-header__item {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.channel-header__item:before {
|
|
background-color: var(--ffz-color-22)
|
|
}
|
|
.channel-header__item--selected, .channel-header__item:hover {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
.channel-header__item--selected:after, .channel-header__item:hover:after {
|
|
border-bottom-color: var(--ffz-color-28)
|
|
}
|
|
.channel-header__item--selected:after, .channel-header__item--selected:hover:after, .channel-header__item:active:after {
|
|
border-bottom-color: var(--ffz-color-5)
|
|
}
|
|
.channel-header__item-count {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.channel-header__dropdown-hover-target:hover .channel-header__item-count {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.channel-header .interactable:hover .channel-header__item-count {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.channel-header__user {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.channel-header__user:hover {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
.channel-header__user:hover .channel-header__user-avatar:after {
|
|
border-bottom-color: var(--ffz-color-28)
|
|
}
|
|
.channel-header__user--selected .channel-header__user-avatar:after, .channel-header__user--selected:hover .channel-header__user-avatar:after, .channel-header__user:active .channel-header__user-avatar:after {
|
|
border-bottom-color: var(--ffz-color-5)
|
|
}
|
|
.channel-header__verified {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.autocomplete-balloon__item {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.autocomplete-balloon__item--selected {
|
|
background-color: var(--ffz-color-7);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.chat-line__message--mention-sender {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.chat-line__message--mention-recipient {
|
|
background-color: var(--ffz-color-30)
|
|
}
|
|
.chat-line__message--mention-recipient {
|
|
color: var(--ffz-color-29)
|
|
}
|
|
.chat-line__message--special {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.chat-line__moderation, .chat-line__status {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.chat-line__mod-icons .mod-icon {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.chat-line__raid, .chat-line__subscribe {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.chat-line__raid--prime, .chat-line__subscribe--prime {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.chat-line__raid--message, .chat-line__subscribe--message {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.chat-line__timestamp {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.chat-list .chat-list__more-messages {
|
|
color: var(--ffz-color-25);
|
|
background-color: var(--ffz-color-27)
|
|
}
|
|
.chat__pane {
|
|
background-color: var(--ffz-color-29);
|
|
border-left-color: var(--ffz-color-22);
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.chat__header {
|
|
-webkit-box-shadow: inset 0 -1px 0 0 var(--ffz-color-22);
|
|
box-shadow: inset 0 -1px 0 0 var(--ffz-color-22);
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.chat-settings__swatch--selected {
|
|
-webkit-box-shadow: 0 0 0 3px var(--ffz-color-28);
|
|
box-shadow: 0 0 0 3px var(--ffz-color-28)
|
|
}
|
|
.chat-settings__swatch:hover {
|
|
-webkit-box-shadow: 0 0 0 3px var(--ffz-color-10);
|
|
box-shadow: 0 0 0 3px var(--ffz-color-10)
|
|
}
|
|
.chat-settings__badge-chooser--selected {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.chat-settings__badge-chooser:hover {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.chat-settings__badge-chooser__none {
|
|
color: var(--ffz-color-9);
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.chat-viewers__pane {
|
|
background-color: var(--ffz-color-29);
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.chat-viewers__header {
|
|
border-bottom-color: var(--ffz-color-22);
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.clips-chat-card {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.clips-chat-card:hover .clips-chat-card__title {
|
|
color: var(--ffz-color-3)
|
|
}
|
|
.clips-chat-card__thumb {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.clips-chat-card__title {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.chat-hosting-notification__container {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.raid-prompt {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.chat-resub-notification__notification-wrapper {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.viewer-card__display-name__link {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.viewer-card__display-name__link:hover {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.clip-carousel-button {
|
|
background-color: var(--ffz-color-5)
|
|
}
|
|
.clip-carousel-button .svg--angleleft, .clip-carousel-button .svg--angleright {
|
|
fill: var(--ffz-color-6)
|
|
}
|
|
.fuel-bar {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.channel-info-bar {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.channel-info-bar__action-container {
|
|
border-top-color: var(--ffz-color-22)
|
|
}
|
|
.clmgr-table__row-expanded {
|
|
border-color: var(--ffz-color-5)
|
|
}
|
|
.clmgr-result__subtitle {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.clmgr-result:hover .clmgr-result__subtitle {
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.clmgr-table__row {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.clmgr-table__row:nth-child(2n) {
|
|
background-color: var(--ffz-color-23)
|
|
}
|
|
.clmgr-table__row:hover {
|
|
background-color: var(--ffz-color-29)
|
|
}
|
|
.event {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.event__header {
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.event__header-overlay {
|
|
background-color: var(--ffz-color-27)
|
|
}
|
|
.event__video:before {
|
|
background-color: var(--ffz-color-22)
|
|
}
|
|
.event__broadcast-wrapper:hover .event__broadcast {
|
|
border-left-color: var(--ffz-color-10)
|
|
}
|
|
.event__broadcast-wrapper:hover .event__broadcast:before {
|
|
background-color: var(--ffz-color-10)
|
|
}
|
|
.event__broadcast {
|
|
border-left-color: var(--ffz-color-22)
|
|
}
|
|
.event__broadcast-details {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.event__broadcast:before {
|
|
background-color: var(--ffz-color-22)
|
|
}
|
|
.video-preview-card__channel, .video-preview-card__videos {
|
|
color: var(--ffz-color-1)
|
|
}
|
|
.video-preview-card__channel:hover, .video-preview-card__videos:hover {
|
|
color: var(--ffz-color-2)
|
|
}
|
|
.video-preview-card__videos {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.video-preview-card__boxart--overlay {
|
|
border-color: var(--ffz-color-0)
|
|
}
|
|
.video-carousel:hover .vod-carousel__button {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
.video-filters--active {
|
|
background-color: var(--ffz-color-28)
|
|
}
|
|
.video-filters:hover {
|
|
background-color: var(--ffz-color-10);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.video-filters:active {
|
|
background-color: var(--ffz-color-5);
|
|
color: var(--ffz-color-6)
|
|
}
|
|
.follow-game-card--overlay {
|
|
background-color: var(--ffz-color-27);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.follow-game-card__meta {
|
|
color: var(--ffz-color-9)
|
|
}
|
|
.embed-card__overlay {
|
|
background-color: var(--ffz-color-27);
|
|
color: var(--ffz-color-25)
|
|
}
|
|
.embed-card__overlay:hover svg {
|
|
color: var(--ffz-color-26)
|
|
}
|
|
.thumbnail-selector-cropper__thumbnail-select-image:hover:before {
|
|
background-color: var(--ffz-color-22)
|
|
}
|
|
.thumbnail-selector-cropper__thumbnail-select-image--selected {
|
|
border-color: var(--ffz-color-5)
|
|
}
|
|
.video-card-dropdown__dropdown-wrapper {
|
|
background-color: var(--ffz-color-0);
|
|
color: var(--ffz-color-1);
|
|
-webkit-box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19);
|
|
box-shadow: 0 0 0 1px var(--ffz-color-22), 0 1px 1px var(--ffz-color-19)
|
|
}
|
|
.video-card {
|
|
background-color: var(--ffz-color-0)
|
|
}
|
|
} |