mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 12:55:55 +00:00
d078d6e3a9
used `sass-migrator` and some manual intervention to migrate all of the
`@import`s to `@use` statements.
1. needed to prefix all of the `styles/main.scss` imports to use a
relative path (i.e. `../../../../styles/main.scss`
2. needed to add a `@use "container"` to `styles/tab-container` so it
could resolve its `@extend`s
- not sure if this was just an ordering issue or what, but it works
2735 lines
61 KiB
SCSS
2735 lines
61 KiB
SCSS
@use "button";
|
|
@use "checkbox";
|
|
@use "interactable";
|
|
@use "text";
|
|
@use "link";
|
|
@use "card";
|
|
@use "tag";
|
|
@use "progress";
|
|
@use "tooltip";
|
|
@use "balloon";
|
|
@use "slider";
|
|
|
|
.tw-line-height-body {
|
|
line-height: 1.5!important
|
|
}
|
|
|
|
.tw-line-height-heading {
|
|
line-height: 1.2!important
|
|
}
|
|
|
|
.tw-regular {
|
|
font-weight: 400!important
|
|
}
|
|
|
|
.tw-semibold,.tw-strong {
|
|
font-weight: 600!important
|
|
}
|
|
|
|
.tw-bold {
|
|
font-weight: 700!important
|
|
}
|
|
|
|
.tw-italic {
|
|
font-style: italic!important
|
|
}
|
|
|
|
.tw-strikethrough {
|
|
text-decoration: line-through!important
|
|
}
|
|
|
|
.tw-white-space-nowrap {
|
|
white-space: nowrap!important
|
|
}
|
|
|
|
.tw-white-space-pre-wrap {
|
|
white-space: pre-wrap!important
|
|
}
|
|
|
|
.tw-underline {
|
|
text-decoration: underline!important
|
|
}
|
|
|
|
.tw-upcase {
|
|
text-transform: uppercase!important
|
|
}
|
|
|
|
.tw-capcase {
|
|
text-transform: capitalize!important
|
|
}
|
|
|
|
.tw-word-break-normal {
|
|
word-break: normal!important
|
|
}
|
|
|
|
.tw-word-break-all {
|
|
word-break: break-all!important
|
|
}
|
|
|
|
.tw-word-break-keep-all {
|
|
word-break: keep-all!important
|
|
}
|
|
|
|
.tw-word-break-word {
|
|
word-break: break-word!important
|
|
}
|
|
|
|
.tw-tabular-nums {
|
|
-webkit-font-feature-settings: "tnum";
|
|
font-feature-settings: "tnum";
|
|
font-variant-numeric: tabular-nums
|
|
}
|
|
|
|
.tw-align-center {
|
|
text-align: center!important
|
|
}
|
|
|
|
.tw-align-left {
|
|
text-align: left!important
|
|
}
|
|
|
|
.tw-align-right {
|
|
text-align: right!important
|
|
}
|
|
|
|
.tw-align-justify {
|
|
text-align: justify!important
|
|
}
|
|
|
|
.tw-initial {
|
|
display: initial!important
|
|
}
|
|
|
|
.tw-inline {
|
|
display: inline!important
|
|
}
|
|
|
|
.tw-inline-block {
|
|
display: inline-block!important
|
|
}
|
|
|
|
.tw-block {
|
|
display: block!important
|
|
}
|
|
|
|
.tw-hide {
|
|
display: none!important
|
|
}
|
|
|
|
.tw-overflow-hidden {
|
|
overflow: hidden!important
|
|
}
|
|
|
|
.tw-overflow-auto {
|
|
overflow: auto!important
|
|
}
|
|
|
|
.tw-overflow-scroll {
|
|
overflow: scroll!important
|
|
}
|
|
|
|
.tw-overflow-visible {
|
|
overflow: visible!important
|
|
}
|
|
|
|
.tw-resize-none {
|
|
resize: none!important
|
|
}
|
|
|
|
.tw-resize-x {
|
|
resize: horizontal!important
|
|
}
|
|
|
|
.tw-resize-y {
|
|
resize: vertical!important
|
|
}
|
|
|
|
.tw-full-width {
|
|
width: 100%!important
|
|
}
|
|
|
|
.tw-full-height {
|
|
height: 100%!important
|
|
}
|
|
|
|
.tw-visible {
|
|
visibility: visible!important
|
|
}
|
|
|
|
.tw-hidden {
|
|
visibility: hidden!important
|
|
}
|
|
|
|
.tw-clearfix:after {
|
|
display: table;
|
|
clear: both;
|
|
content: ""
|
|
}
|
|
|
|
.tw-hide-accessible {
|
|
position: absolute;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
margin: -.1rem;
|
|
padding: 0;
|
|
border: none;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0)
|
|
}
|
|
|
|
.tw-ellipsis {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden
|
|
}
|
|
|
|
@supports (-webkit-line-clamp:2) {
|
|
.tw-line-clamp-2 {
|
|
overflow: hidden!important;
|
|
text-overflow: ellipsis!important;
|
|
white-space: normal!important;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical
|
|
}
|
|
}
|
|
|
|
.tw-button,.tw-core-button {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
text-decoration: none
|
|
}
|
|
|
|
.tw-flex {
|
|
display: flex!important
|
|
}
|
|
|
|
@media (min-width: 480px) {
|
|
.tw-xs-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.tw-sm-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.tw-md-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.tw-lg-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1440px) {
|
|
.tw-xl-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1600px) {
|
|
.tw-xxl-flex {
|
|
display:flex!important
|
|
}
|
|
}
|
|
|
|
.tw-flex {
|
|
display: flex !important;
|
|
}
|
|
|
|
.tw-flex-inline {
|
|
display: inline-flex !important;
|
|
}
|
|
|
|
.tw-flex-wrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
|
|
.tw-flex-nowrap {
|
|
flex-wrap: nowrap!important
|
|
}
|
|
|
|
.tw-flex-wrap-reverse {
|
|
flex-wrap: wrap-reverse!important
|
|
}
|
|
|
|
.tw-inline-flex {
|
|
display: inline-flex!important
|
|
}
|
|
|
|
.tw-flex-column {
|
|
flex-direction: column!important
|
|
}
|
|
|
|
.tw-flex-row {
|
|
flex-direction: row!important
|
|
}
|
|
|
|
.tw-flex-column-reverse {
|
|
flex-direction: column-reverse!important
|
|
}
|
|
|
|
.tw-flex-row-reverse {
|
|
flex-direction: row-reverse!important
|
|
}
|
|
|
|
.tw-align-items-start {
|
|
align-items: flex-start!important
|
|
}
|
|
|
|
.tw-align-items-end {
|
|
align-items: flex-end!important
|
|
}
|
|
|
|
.tw-align-items-center {
|
|
align-items: center!important
|
|
}
|
|
|
|
.tw-align-items-baseline {
|
|
align-items: baseline!important
|
|
}
|
|
|
|
.tw-align-items-stretch {
|
|
align-items: stretch!important
|
|
}
|
|
|
|
.tw-align-self-auto {
|
|
align-self: auto!important
|
|
}
|
|
|
|
.tw-align-self-start {
|
|
align-self: flex-start!important
|
|
}
|
|
|
|
.tw-align-self-end {
|
|
align-self: flex-end!important
|
|
}
|
|
|
|
.tw-align-self-center {
|
|
align-self: center!important
|
|
}
|
|
|
|
.tw-align-self-baseline {
|
|
align-self: baseline!important
|
|
}
|
|
|
|
.tw-align-self-stretch {
|
|
align-self: stretch!important
|
|
}
|
|
|
|
.tw-justify-content-start {
|
|
justify-content: flex-start!important
|
|
}
|
|
|
|
.tw-justify-content-end {
|
|
justify-content: flex-end!important
|
|
}
|
|
|
|
.tw-justify-content-center {
|
|
justify-content: center!important
|
|
}
|
|
|
|
.tw-justify-content-between {
|
|
justify-content: space-between!important
|
|
}
|
|
|
|
.tw-justify-content-around {
|
|
justify-content: space-around!important
|
|
}
|
|
|
|
.tw-align-content-start {
|
|
align-content: flex-start!important
|
|
}
|
|
|
|
.tw-align-content-end {
|
|
align-content: flex-end!important
|
|
}
|
|
|
|
.tw-align-content-center {
|
|
align-content: center!important
|
|
}
|
|
|
|
.tw-align-content-between {
|
|
align-content: space-between!important
|
|
}
|
|
|
|
.tw-align-content-around {
|
|
align-content: space-around!important
|
|
}
|
|
|
|
.tw-align-content-stretch {
|
|
align-content: stretch!important
|
|
}
|
|
|
|
.tw-flex-grow-0 {
|
|
flex-grow: 0!important
|
|
}
|
|
|
|
.tw-flex-grow-1 {
|
|
flex-grow: 1!important
|
|
}
|
|
|
|
.tw-flex-grow-2 {
|
|
flex-grow: 2!important
|
|
}
|
|
|
|
.tw-flex-grow-3 {
|
|
flex-grow: 3!important
|
|
}
|
|
|
|
.tw-flex-grow-4 {
|
|
flex-grow: 4!important
|
|
}
|
|
|
|
.tw-flex-shrink-0 {
|
|
flex-shrink: 0!important
|
|
}
|
|
|
|
.tw-flex-shrink-1 {
|
|
flex-shrink: 1!important
|
|
}
|
|
|
|
.tw-flex-shrink-2 {
|
|
flex-shrink: 2!important
|
|
}
|
|
|
|
.tw-flex-shrink-3 {
|
|
flex-shrink: 3!important
|
|
}
|
|
|
|
.tw-flex-shrink-4 {
|
|
flex-shrink: 4!important
|
|
}
|
|
|
|
.tw-button,.tw-button-icon {
|
|
display: inline-flex;
|
|
align-items: center
|
|
}
|
|
|
|
.tw-item-order-0 {
|
|
order: 0!important
|
|
}
|
|
|
|
.tw-item-order-1 {
|
|
order: 1!important
|
|
}
|
|
|
|
.tw-item-order-2 {
|
|
order: 2!important
|
|
}
|
|
|
|
.tw-item-order-3 {
|
|
order: 3!important
|
|
}
|
|
|
|
.tw-item-order-4 {
|
|
order: 4!important
|
|
}
|
|
|
|
.tw-relative {
|
|
position: relative!important
|
|
}
|
|
|
|
.tw-absolute {
|
|
position: absolute!important
|
|
}
|
|
|
|
.tw-fixed {
|
|
position: fixed!important
|
|
}
|
|
|
|
.tw-top-0 {
|
|
top: 0!important
|
|
}
|
|
|
|
.tw-right-0 {
|
|
right: 0!important
|
|
}
|
|
|
|
.tw-bottom-0 {
|
|
bottom: 0!important
|
|
}
|
|
|
|
.tw-left-0 {
|
|
left: 0!important
|
|
}
|
|
|
|
.tw-z-above {
|
|
z-index: 10!important
|
|
}
|
|
|
|
.tw-z-default {
|
|
z-index: 1!important
|
|
}
|
|
|
|
.tw-z-below {
|
|
z-index: -1!important
|
|
}
|
|
|
|
.tw-pd-0 {
|
|
padding: 0!important
|
|
}
|
|
|
|
.tw-pd-05 {
|
|
padding: .5rem!important
|
|
}
|
|
|
|
.tw-pd-1 {
|
|
padding: 1rem!important
|
|
}
|
|
|
|
.tw-pd-2 {
|
|
padding: 2rem!important
|
|
}
|
|
|
|
.tw-pd-3 {
|
|
padding: 3rem!important
|
|
}
|
|
|
|
.tw-pd-4 {
|
|
padding: 4rem!important
|
|
}
|
|
|
|
.tw-pd-5 {
|
|
padding: 5rem!important
|
|
}
|
|
|
|
.tw-pd-6 {
|
|
padding: 6rem!important
|
|
}
|
|
|
|
.tw-pd-7 {
|
|
padding: 7rem!important
|
|
}
|
|
|
|
.tw-pd-8 {
|
|
padding: 8rem!important
|
|
}
|
|
|
|
.tw-pd-9 {
|
|
padding: 9rem!important
|
|
}
|
|
|
|
.tw-pd-10 {
|
|
padding: 10rem!important
|
|
}
|
|
|
|
.tw-pd-t-0 {
|
|
padding-top: 0!important
|
|
}
|
|
|
|
.tw-pd-t-05 {
|
|
padding-top: .5rem!important
|
|
}
|
|
|
|
.tw-pd-t-1 {
|
|
padding-top: 1rem!important
|
|
}
|
|
|
|
.tw-pd-t-2 {
|
|
padding-top: 2rem!important
|
|
}
|
|
|
|
.tw-pd-t-3 {
|
|
padding-top: 3rem!important
|
|
}
|
|
|
|
.tw-pd-t-4 {
|
|
padding-top: 4rem!important
|
|
}
|
|
|
|
.tw-pd-t-5 {
|
|
padding-top: 5rem!important
|
|
}
|
|
|
|
.tw-pd-t-6 {
|
|
padding-top: 6rem!important
|
|
}
|
|
|
|
.tw-pd-t-7 {
|
|
padding-top: 7rem!important
|
|
}
|
|
|
|
.tw-pd-t-8 {
|
|
padding-top: 8rem!important
|
|
}
|
|
|
|
.tw-pd-t-9 {
|
|
padding-top: 9rem!important
|
|
}
|
|
|
|
.tw-pd-t-10 {
|
|
padding-top: 10rem!important
|
|
}
|
|
|
|
.tw-pd-r-0 {
|
|
padding-right: 0!important
|
|
}
|
|
|
|
.tw-pd-r-05 {
|
|
padding-right: .5rem!important
|
|
}
|
|
|
|
.tw-pd-r-1 {
|
|
padding-right: 1rem!important
|
|
}
|
|
|
|
.tw-pd-r-2 {
|
|
padding-right: 2rem!important
|
|
}
|
|
|
|
.tw-pd-r-3 {
|
|
padding-right: 3rem!important
|
|
}
|
|
|
|
.tw-pd-r-4 {
|
|
padding-right: 4rem!important
|
|
}
|
|
|
|
.tw-pd-r-5 {
|
|
padding-right: 5rem!important
|
|
}
|
|
|
|
.tw-pd-r-6 {
|
|
padding-right: 6rem!important
|
|
}
|
|
|
|
.tw-pd-r-7 {
|
|
padding-right: 7rem!important
|
|
}
|
|
|
|
.tw-pd-r-8 {
|
|
padding-right: 8rem!important
|
|
}
|
|
|
|
.tw-pd-r-9 {
|
|
padding-right: 9rem!important
|
|
}
|
|
|
|
.tw-pd-r-10 {
|
|
padding-right: 10rem!important
|
|
}
|
|
|
|
.tw-pd-b-0 {
|
|
padding-bottom: 0!important
|
|
}
|
|
|
|
.tw-pd-b-05 {
|
|
padding-bottom: .5rem!important
|
|
}
|
|
|
|
.tw-pd-b-1 {
|
|
padding-bottom: 1rem!important
|
|
}
|
|
|
|
.tw-pd-b-2 {
|
|
padding-bottom: 2rem!important
|
|
}
|
|
|
|
.tw-pd-b-3 {
|
|
padding-bottom: 3rem!important
|
|
}
|
|
|
|
.tw-pd-b-4 {
|
|
padding-bottom: 4rem!important
|
|
}
|
|
|
|
.tw-pd-b-5 {
|
|
padding-bottom: 5rem!important
|
|
}
|
|
|
|
.tw-pd-b-6 {
|
|
padding-bottom: 6rem!important
|
|
}
|
|
|
|
.tw-pd-b-7 {
|
|
padding-bottom: 7rem!important
|
|
}
|
|
|
|
.tw-pd-b-8 {
|
|
padding-bottom: 8rem!important
|
|
}
|
|
|
|
.tw-pd-b-9 {
|
|
padding-bottom: 9rem!important
|
|
}
|
|
|
|
.tw-pd-b-10 {
|
|
padding-bottom: 10rem!important
|
|
}
|
|
|
|
.tw-pd-l-0 {
|
|
padding-left: 0!important
|
|
}
|
|
|
|
.tw-pd-l-05 {
|
|
padding-left: .5rem!important
|
|
}
|
|
|
|
.tw-pd-l-1 {
|
|
padding-left: 1rem!important
|
|
}
|
|
|
|
.tw-pd-l-2 {
|
|
padding-left: 2rem!important
|
|
}
|
|
|
|
.tw-pd-l-3 {
|
|
padding-left: 3rem!important
|
|
}
|
|
|
|
.tw-pd-l-4 {
|
|
padding-left: 4rem!important
|
|
}
|
|
|
|
.tw-pd-l-5 {
|
|
padding-left: 5rem!important
|
|
}
|
|
|
|
.tw-pd-l-6 {
|
|
padding-left: 6rem!important
|
|
}
|
|
|
|
.tw-pd-l-7 {
|
|
padding-left: 7rem!important
|
|
}
|
|
|
|
.tw-pd-l-8 {
|
|
padding-left: 8rem!important
|
|
}
|
|
|
|
.tw-pd-l-9 {
|
|
padding-left: 9rem!important
|
|
}
|
|
|
|
.tw-pd-l-10 {
|
|
padding-left: 10rem!important
|
|
}
|
|
|
|
.tw-pd-y-0 {
|
|
padding-top: 0!important;
|
|
padding-bottom: 0!important
|
|
}
|
|
|
|
.tw-pd-y-05 {
|
|
padding-top: .5rem!important;
|
|
padding-bottom: .5rem!important
|
|
}
|
|
|
|
.tw-pd-y-1 {
|
|
padding-top: 1rem!important;
|
|
padding-bottom: 1rem!important
|
|
}
|
|
|
|
.tw-pd-y-2 {
|
|
padding-top: 2rem!important;
|
|
padding-bottom: 2rem!important
|
|
}
|
|
|
|
.tw-pd-y-3 {
|
|
padding-top: 3rem!important;
|
|
padding-bottom: 3rem!important
|
|
}
|
|
|
|
.tw-pd-y-4 {
|
|
padding-top: 4rem!important;
|
|
padding-bottom: 4rem!important
|
|
}
|
|
|
|
.tw-pd-y-5 {
|
|
padding-top: 5rem!important;
|
|
padding-bottom: 5rem!important
|
|
}
|
|
|
|
.tw-pd-y-6 {
|
|
padding-top: 6rem!important;
|
|
padding-bottom: 6rem!important
|
|
}
|
|
|
|
.tw-pd-y-7 {
|
|
padding-top: 7rem!important;
|
|
padding-bottom: 7rem!important
|
|
}
|
|
|
|
.tw-pd-y-8 {
|
|
padding-top: 8rem!important;
|
|
padding-bottom: 8rem!important
|
|
}
|
|
|
|
.tw-pd-y-9 {
|
|
padding-top: 9rem!important;
|
|
padding-bottom: 9rem!important
|
|
}
|
|
|
|
.tw-pd-y-10 {
|
|
padding-top: 10rem!important;
|
|
padding-bottom: 10rem!important
|
|
}
|
|
|
|
.tw-pd-x-0 {
|
|
padding-left: 0!important;
|
|
padding-right: 0!important
|
|
}
|
|
|
|
.tw-pd-x-05 {
|
|
padding-left: .5rem!important;
|
|
padding-right: .5rem!important
|
|
}
|
|
|
|
.tw-pd-x-1 {
|
|
padding-left: 1rem!important;
|
|
padding-right: 1rem!important
|
|
}
|
|
|
|
.tw-pd-x-2 {
|
|
padding-left: 2rem!important;
|
|
padding-right: 2rem!important
|
|
}
|
|
|
|
.tw-pd-x-3 {
|
|
padding-left: 3rem!important;
|
|
padding-right: 3rem!important
|
|
}
|
|
|
|
.tw-pd-x-4 {
|
|
padding-left: 4rem!important;
|
|
padding-right: 4rem!important
|
|
}
|
|
|
|
.tw-pd-x-5 {
|
|
padding-left: 5rem!important;
|
|
padding-right: 5rem!important
|
|
}
|
|
|
|
.tw-pd-x-6 {
|
|
padding-left: 6rem!important;
|
|
padding-right: 6rem!important
|
|
}
|
|
|
|
.tw-pd-x-7 {
|
|
padding-left: 7rem!important;
|
|
padding-right: 7rem!important
|
|
}
|
|
|
|
.tw-pd-x-8 {
|
|
padding-left: 8rem!important;
|
|
padding-right: 8rem!important
|
|
}
|
|
|
|
.tw-pd-x-9 {
|
|
padding-left: 9rem!important;
|
|
padding-right: 9rem!important
|
|
}
|
|
|
|
.tw-pd-x-10 {
|
|
padding-left: 10rem!important;
|
|
padding-right: 10rem!important
|
|
}
|
|
|
|
.tw-mg-0 {
|
|
margin: 0!important
|
|
}
|
|
|
|
.tw-mg-05 {
|
|
margin: .5rem!important
|
|
}
|
|
|
|
.tw-mg-1 {
|
|
margin: 1rem!important
|
|
}
|
|
|
|
.tw-mg-2 {
|
|
margin: 2rem!important
|
|
}
|
|
|
|
.tw-mg-3 {
|
|
margin: 3rem!important
|
|
}
|
|
|
|
.tw-mg-4 {
|
|
margin: 4rem!important
|
|
}
|
|
|
|
.tw-mg-5 {
|
|
margin: 5rem!important
|
|
}
|
|
|
|
.tw-mg-6 {
|
|
margin: 6rem!important
|
|
}
|
|
|
|
.tw-mg-7 {
|
|
margin: 7rem!important
|
|
}
|
|
|
|
.tw-mg-8 {
|
|
margin: 8rem!important
|
|
}
|
|
|
|
.tw-mg-9 {
|
|
margin: 9rem!important
|
|
}
|
|
|
|
.tw-mg-10 {
|
|
margin: 10rem!important
|
|
}
|
|
|
|
.tw-mg-auto {
|
|
margin: auto!important
|
|
}
|
|
|
|
.tw-mg-t-0 {
|
|
margin-top: 0!important
|
|
}
|
|
|
|
.tw-mg-t-05 {
|
|
margin-top: .5rem!important
|
|
}
|
|
|
|
.tw-mg-t-1 {
|
|
margin-top: 1rem!important
|
|
}
|
|
|
|
.tw-mg-t-2 {
|
|
margin-top: 2rem!important
|
|
}
|
|
|
|
.tw-mg-t-3 {
|
|
margin-top: 3rem!important
|
|
}
|
|
|
|
.tw-mg-t-4 {
|
|
margin-top: 4rem!important
|
|
}
|
|
|
|
.tw-mg-t-5 {
|
|
margin-top: 5rem!important
|
|
}
|
|
|
|
.tw-mg-t-6 {
|
|
margin-top: 6rem!important
|
|
}
|
|
|
|
.tw-mg-t-7 {
|
|
margin-top: 7rem!important
|
|
}
|
|
|
|
.tw-mg-t-8 {
|
|
margin-top: 8rem!important
|
|
}
|
|
|
|
.tw-mg-t-9 {
|
|
margin-top: 9rem!important
|
|
}
|
|
|
|
.tw-mg-t-10 {
|
|
margin-top: 10rem!important
|
|
}
|
|
|
|
.tw-mg-t-auto {
|
|
margin-top: auto!important
|
|
}
|
|
|
|
.tw-mg-r-0 {
|
|
margin-right: 0!important
|
|
}
|
|
|
|
.tw-mg-r-05 {
|
|
margin-right: .5rem!important
|
|
}
|
|
|
|
.tw-mg-r-1 {
|
|
margin-right: 1rem!important
|
|
}
|
|
|
|
.tw-mg-r-2 {
|
|
margin-right: 2rem!important
|
|
}
|
|
|
|
.tw-mg-r-3 {
|
|
margin-right: 3rem!important
|
|
}
|
|
|
|
.tw-mg-r-4 {
|
|
margin-right: 4rem!important
|
|
}
|
|
|
|
.tw-mg-r-5 {
|
|
margin-right: 5rem!important
|
|
}
|
|
|
|
.tw-mg-r-6 {
|
|
margin-right: 6rem!important
|
|
}
|
|
|
|
.tw-mg-r-7 {
|
|
margin-right: 7rem!important
|
|
}
|
|
|
|
.tw-mg-r-8 {
|
|
margin-right: 8rem!important
|
|
}
|
|
|
|
.tw-mg-r-9 {
|
|
margin-right: 9rem!important
|
|
}
|
|
|
|
.tw-mg-r-10 {
|
|
margin-right: 10rem!important
|
|
}
|
|
|
|
.tw-mg-r-auto {
|
|
margin-right: auto!important
|
|
}
|
|
|
|
.tw-mg-b-0 {
|
|
margin-bottom: 0!important
|
|
}
|
|
|
|
.tw-mg-b-05 {
|
|
margin-bottom: .5rem!important
|
|
}
|
|
|
|
.tw-mg-b-1 {
|
|
margin-bottom: 1rem!important
|
|
}
|
|
|
|
.tw-mg-b-2 {
|
|
margin-bottom: 2rem!important
|
|
}
|
|
|
|
.tw-mg-b-3 {
|
|
margin-bottom: 3rem!important
|
|
}
|
|
|
|
.tw-mg-b-4 {
|
|
margin-bottom: 4rem!important
|
|
}
|
|
|
|
.tw-mg-b-5 {
|
|
margin-bottom: 5rem!important
|
|
}
|
|
|
|
.tw-mg-b-6 {
|
|
margin-bottom: 6rem!important
|
|
}
|
|
|
|
.tw-mg-b-7 {
|
|
margin-bottom: 7rem!important
|
|
}
|
|
|
|
.tw-mg-b-8 {
|
|
margin-bottom: 8rem!important
|
|
}
|
|
|
|
.tw-mg-b-9 {
|
|
margin-bottom: 9rem!important
|
|
}
|
|
|
|
.tw-mg-b-10 {
|
|
margin-bottom: 10rem!important
|
|
}
|
|
|
|
.tw-mg-b-auto {
|
|
margin-bottom: auto!important
|
|
}
|
|
|
|
.tw-mg-l-0 {
|
|
margin-left: 0!important
|
|
}
|
|
|
|
.tw-mg-l-05 {
|
|
margin-left: .5rem!important
|
|
}
|
|
|
|
.tw-mg-l-1 {
|
|
margin-left: 1rem!important
|
|
}
|
|
|
|
.tw-mg-l-2 {
|
|
margin-left: 2rem!important
|
|
}
|
|
|
|
.tw-mg-l-3 {
|
|
margin-left: 3rem!important
|
|
}
|
|
|
|
.tw-mg-l-4 {
|
|
margin-left: 4rem!important
|
|
}
|
|
|
|
.tw-mg-l-5 {
|
|
margin-left: 5rem!important
|
|
}
|
|
|
|
.tw-mg-l-6 {
|
|
margin-left: 6rem!important
|
|
}
|
|
|
|
.tw-mg-l-7 {
|
|
margin-left: 7rem!important
|
|
}
|
|
|
|
.tw-mg-l-8 {
|
|
margin-left: 8rem!important
|
|
}
|
|
|
|
.tw-mg-l-9 {
|
|
margin-left: 9rem!important
|
|
}
|
|
|
|
.tw-mg-l-10 {
|
|
margin-left: 10rem!important
|
|
}
|
|
|
|
.tw-mg-l-auto {
|
|
margin-left: auto!important
|
|
}
|
|
|
|
.tw-mg-y-0 {
|
|
margin-top: 0!important;
|
|
margin-bottom: 0!important
|
|
}
|
|
|
|
.tw-mg-y-05 {
|
|
margin-top: .5rem!important;
|
|
margin-bottom: .5rem!important
|
|
}
|
|
|
|
.tw-mg-y-1 {
|
|
margin-top: 1rem!important;
|
|
margin-bottom: 1rem!important
|
|
}
|
|
|
|
.tw-mg-y-2 {
|
|
margin-top: 2rem!important;
|
|
margin-bottom: 2rem!important
|
|
}
|
|
|
|
.tw-mg-y-3 {
|
|
margin-top: 3rem!important;
|
|
margin-bottom: 3rem!important
|
|
}
|
|
|
|
.tw-mg-y-4 {
|
|
margin-top: 4rem!important;
|
|
margin-bottom: 4rem!important
|
|
}
|
|
|
|
.tw-mg-y-5 {
|
|
margin-top: 5rem!important;
|
|
margin-bottom: 5rem!important
|
|
}
|
|
|
|
.tw-mg-y-6 {
|
|
margin-top: 6rem!important;
|
|
margin-bottom: 6rem!important
|
|
}
|
|
|
|
.tw-mg-y-7 {
|
|
margin-top: 7rem!important;
|
|
margin-bottom: 7rem!important
|
|
}
|
|
|
|
.tw-mg-y-8 {
|
|
margin-top: 8rem!important;
|
|
margin-bottom: 8rem!important
|
|
}
|
|
|
|
.tw-mg-y-9 {
|
|
margin-top: 9rem!important;
|
|
margin-bottom: 9rem!important
|
|
}
|
|
|
|
.tw-mg-y-10 {
|
|
margin-top: 10rem!important;
|
|
margin-bottom: 10rem!important
|
|
}
|
|
|
|
.tw-mg-y-auto {
|
|
margin-top: auto!important;
|
|
margin-bottom: auto!important
|
|
}
|
|
|
|
.tw-mg-x-0 {
|
|
margin-left: 0!important;
|
|
margin-right: 0!important
|
|
}
|
|
|
|
.tw-mg-x-05 {
|
|
margin-left: .5rem!important;
|
|
margin-right: .5rem!important
|
|
}
|
|
|
|
.tw-mg-x-1 {
|
|
margin-left: 1rem!important;
|
|
margin-right: 1rem!important
|
|
}
|
|
|
|
.tw-mg-x-2 {
|
|
margin-left: 2rem!important;
|
|
margin-right: 2rem!important
|
|
}
|
|
|
|
.tw-mg-x-3 {
|
|
margin-left: 3rem!important;
|
|
margin-right: 3rem!important
|
|
}
|
|
|
|
.tw-mg-x-4 {
|
|
margin-left: 4rem!important;
|
|
margin-right: 4rem!important
|
|
}
|
|
|
|
.tw-mg-x-5 {
|
|
margin-left: 5rem!important;
|
|
margin-right: 5rem!important
|
|
}
|
|
|
|
.tw-mg-x-6 {
|
|
margin-left: 6rem!important;
|
|
margin-right: 6rem!important
|
|
}
|
|
|
|
.tw-mg-x-7 {
|
|
margin-left: 7rem!important;
|
|
margin-right: 7rem!important
|
|
}
|
|
|
|
.tw-mg-x-8 {
|
|
margin-left: 8rem!important;
|
|
margin-right: 8rem!important
|
|
}
|
|
|
|
.tw-mg-x-9 {
|
|
margin-left: 9rem!important;
|
|
margin-right: 9rem!important
|
|
}
|
|
|
|
.tw-mg-x-10 {
|
|
margin-left: 10rem!important;
|
|
margin-right: 10rem!important
|
|
}
|
|
|
|
.tw-mg-x-auto {
|
|
margin-left: auto!important;
|
|
margin-right: auto!important
|
|
}
|
|
|
|
.tw-align-top {
|
|
vertical-align: top!important
|
|
}
|
|
|
|
.tw-align-middle {
|
|
vertical-align: middle!important
|
|
}
|
|
|
|
.tw-align-bottom {
|
|
vertical-align: bottom!important
|
|
}
|
|
|
|
.tw-align-baseline {
|
|
vertical-align: baseline!important
|
|
}
|
|
|
|
.tw-align-text-top {
|
|
vertical-align: text-top!important
|
|
}
|
|
|
|
.tw-align-text-bottom {
|
|
vertical-align: text-bottom!important
|
|
}
|
|
|
|
.tw-border {
|
|
border: 1px solid hsla(0,0%,100%,.1)!important;
|
|
border: var(--border-width-default) solid var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-border-t {
|
|
border-top: 1px solid hsla(0,0%,100%,.1)!important;
|
|
border-top: var(--border-width-default) solid var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-border-r {
|
|
border-right: 1px solid hsla(0,0%,100%,.1)!important;
|
|
border-right: var(--border-width-default) solid var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-border-b {
|
|
border-bottom: 1px solid hsla(0,0%,100%,.1)!important;
|
|
border-bottom: var(--border-width-default) solid var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-border-l {
|
|
border-left: 1px solid hsla(0,0%,100%,.1)!important;
|
|
border-left: var(--border-width-default) solid var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-border--marked {
|
|
border-left: 3px solid #9147ff!important;
|
|
border-left: var(--border-width-marked) solid var(--color-border-brand)!important
|
|
}
|
|
|
|
.tw-border-radius-none {
|
|
border-radius: 0!important;
|
|
border-radius: var(--border-radius-none)!important
|
|
}
|
|
|
|
.tw-border-top-left-radius-none {
|
|
border-top-left-radius: 0!important;
|
|
border-top-left-radius: var(--border-radius-none)!important
|
|
}
|
|
|
|
.tw-border-top-right-radius-none {
|
|
border-top-right-radius: 0!important;
|
|
border-top-right-radius: var(--border-radius-none)!important
|
|
}
|
|
|
|
.tw-border-bottom-right-radius-none {
|
|
border-bottom-right-radius: 0!important;
|
|
border-bottom-right-radius: var(--border-radius-none)!important
|
|
}
|
|
|
|
.tw-border-bottom-left-radius-none {
|
|
border-bottom-left-radius: 0!important;
|
|
border-bottom-left-radius: var(--border-radius-none)!important
|
|
}
|
|
|
|
.tw-border-radius-small {
|
|
border-radius: .2rem!important;
|
|
border-radius: var(--border-radius-small)!important
|
|
}
|
|
|
|
.tw-border-top-left-radius-small {
|
|
border-top-left-radius: .2rem!important;
|
|
border-top-left-radius: var(--border-radius-small)!important
|
|
}
|
|
|
|
.tw-border-top-right-radius-small {
|
|
border-top-right-radius: .2rem!important;
|
|
border-top-right-radius: var(--border-radius-small)!important
|
|
}
|
|
|
|
.tw-border-bottom-right-radius-small {
|
|
border-bottom-right-radius: .2rem!important;
|
|
border-bottom-right-radius: var(--border-radius-small)!important
|
|
}
|
|
|
|
.tw-border-bottom-left-radius-small {
|
|
border-bottom-left-radius: .2rem!important;
|
|
border-bottom-left-radius: var(--border-radius-small)!important
|
|
}
|
|
|
|
.tw-border-radius-medium {
|
|
border-radius: .4rem!important;
|
|
border-radius: var(--border-radius-medium)!important
|
|
}
|
|
|
|
.tw-border-top-left-radius-medium {
|
|
border-top-left-radius: .4rem!important;
|
|
border-top-left-radius: var(--border-radius-medium)!important
|
|
}
|
|
|
|
.tw-border-top-right-radius-medium {
|
|
border-top-right-radius: .4rem!important;
|
|
border-top-right-radius: var(--border-radius-medium)!important
|
|
}
|
|
|
|
.tw-border-bottom-right-radius-medium {
|
|
border-bottom-right-radius: .4rem!important;
|
|
border-bottom-right-radius: var(--border-radius-medium)!important
|
|
}
|
|
|
|
.tw-border-bottom-left-radius-medium {
|
|
border-bottom-left-radius: .4rem!important;
|
|
border-bottom-left-radius: var(--border-radius-medium)!important
|
|
}
|
|
|
|
.tw-border-radius-large {
|
|
border-radius: .6rem!important;
|
|
border-radius: var(--border-radius-large)!important
|
|
}
|
|
|
|
.tw-border-top-left-radius-large {
|
|
border-top-left-radius: .6rem!important;
|
|
border-top-left-radius: var(--border-radius-large)!important
|
|
}
|
|
|
|
.tw-border-top-right-radius-large {
|
|
border-top-right-radius: .6rem!important;
|
|
border-top-right-radius: var(--border-radius-large)!important
|
|
}
|
|
|
|
.tw-border-bottom-right-radius-large {
|
|
border-bottom-right-radius: .6rem!important;
|
|
border-bottom-right-radius: var(--border-radius-large)!important
|
|
}
|
|
|
|
.tw-border-bottom-left-radius-large {
|
|
border-bottom-left-radius: .6rem!important;
|
|
border-bottom-left-radius: var(--border-radius-large)!important
|
|
}
|
|
|
|
.tw-border-radius-rounded {
|
|
border-radius: 9000px!important;
|
|
border-radius: var(--border-radius-rounded)!important
|
|
}
|
|
|
|
.tw-border-top-left-radius-rounded {
|
|
border-top-left-radius: 9000px!important;
|
|
border-top-left-radius: var(--border-radius-rounded)!important
|
|
}
|
|
|
|
.tw-border-top-right-radius-rounded {
|
|
border-top-right-radius: 9000px!important;
|
|
border-top-right-radius: var(--border-radius-rounded)!important
|
|
}
|
|
|
|
.tw-border-bottom-right-radius-rounded {
|
|
border-bottom-right-radius: 9000px!important;
|
|
border-bottom-right-radius: var(--border-radius-rounded)!important
|
|
}
|
|
|
|
.tw-border-bottom-left-radius-rounded {
|
|
border-bottom-left-radius: 9000px!important;
|
|
border-bottom-left-radius: var(--border-radius-rounded)!important
|
|
}
|
|
|
|
.tw-c-background-subscriber-stream-tag-default {
|
|
background-color: #24094e!important;
|
|
background-color: var(--color-background-subscriber-stream-tag-default)!important
|
|
}
|
|
|
|
.tw-c-background-subscriber-stream-tag-hover {
|
|
background-color: #15052e!important;
|
|
background-color: var(--color-background-subscriber-stream-tag-hover)!important
|
|
}
|
|
|
|
.tw-c-background-subscriber-stream-tag-active {
|
|
background-color: #24094e!important;
|
|
background-color: var(--color-background-subscriber-stream-tag-active)!important
|
|
}
|
|
|
|
.tw-c-background-body {
|
|
background-color: #0e0e10!important;
|
|
background-color: var(--color-background-body)!important
|
|
}
|
|
|
|
.tw-c-background-base {
|
|
background-color: #18181b!important;
|
|
background-color: var(--color-background-base)!important
|
|
}
|
|
|
|
.tw-c-background-alt {
|
|
background-color: #1f1f23!important;
|
|
background-color: var(--color-background-alt)!important
|
|
}
|
|
|
|
.tw-c-background-alt-2 {
|
|
background-color: #26262c!important;
|
|
background-color: var(--color-background-alt-2)!important
|
|
}
|
|
|
|
.tw-c-background-float {
|
|
background-color: #1f1f23!important;
|
|
background-color: var(--color-background-float)!important
|
|
}
|
|
|
|
.tw-c-background-accent {
|
|
background-color: #772ce8!important;
|
|
background-color: var(--color-background-accent)!important
|
|
}
|
|
|
|
.tw-c-background-accent-alt {
|
|
background-color: #5c16c5!important;
|
|
background-color: var(--color-background-accent-alt)!important
|
|
}
|
|
|
|
.tw-c-background-accent-alt-2 {
|
|
background-color: #451093!important;
|
|
background-color: var(--color-background-accent-alt-2)!important
|
|
}
|
|
|
|
.tw-c-background-placeholder {
|
|
background-color: hsla(0,0%,100%,.05)!important;
|
|
background-color: var(--color-background-placeholder)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-placeholder {
|
|
background-color: hsla(0,0%,100%,.15)!important;
|
|
background-color: var(--color-background-overlay-placeholder)!important
|
|
}
|
|
|
|
.tw-c-background-live {
|
|
background-color: #e91916!important;
|
|
background-color: var(--color-background-live)!important
|
|
}
|
|
|
|
.tw-c-background-prime {
|
|
background-color: #0e9bd8!important;
|
|
background-color: var(--color-background-prime)!important
|
|
}
|
|
|
|
.tw-c-background-error {
|
|
background-color: #ff4f4d!important;
|
|
background-color: var(--color-background-error)!important
|
|
}
|
|
|
|
.tw-c-background-warn {
|
|
background-color: #ffb31a!important;
|
|
background-color: var(--color-background-warn)!important
|
|
}
|
|
|
|
.tw-c-background-success {
|
|
background-color: #00db84!important;
|
|
background-color: var(--color-background-success)!important
|
|
}
|
|
|
|
.tw-c-background-info {
|
|
background-color: #528bff!important;
|
|
background-color: var(--color-background-info)!important
|
|
}
|
|
|
|
.tw-c-background-brand {
|
|
background-color: #bf94ff!important;
|
|
background-color: var(--color-background-brand)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-error {
|
|
background-color: #ff8280!important;
|
|
background-color: var(--color-background-overlay-error)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-warn {
|
|
background-color: #ffb31a!important;
|
|
background-color: var(--color-background-overlay-warn)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-success {
|
|
background-color: #00f593!important;
|
|
background-color: var(--color-background-overlay-success)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-info {
|
|
background-color: #a3c2ff!important;
|
|
background-color: var(--color-background-overlay-info)!important
|
|
}
|
|
|
|
.tw-c-background-overlay-brand {
|
|
background-color: #bf94ff!important;
|
|
background-color: var(--color-background-overlay-brand)!important
|
|
}
|
|
|
|
.tw-c-background-image-selector-overlay {
|
|
background-color: transparent!important;
|
|
background-color: var(--color-background-image-selector-overlay)!important
|
|
}
|
|
|
|
.tw-c-background-tag-default {
|
|
background-color: hsla(0,0%,100%,.15)!important;
|
|
background-color: var(--color-background-tag-default)!important
|
|
}
|
|
|
|
.tw-c-background-tag-hover {
|
|
background-color: hsla(0,0%,100%,.2)!important;
|
|
background-color: var(--color-background-tag-hover)!important
|
|
}
|
|
|
|
.tw-c-background-tag-active {
|
|
background-color: hsla(0,0%,100%,.15)!important;
|
|
background-color: var(--color-background-tag-active)!important
|
|
}
|
|
|
|
.tw-c-background-tooltip {
|
|
background-color: #fff!important;
|
|
background-color: var(--color-background-tooltip)!important
|
|
}
|
|
|
|
.tw-c-background-overlay {
|
|
background-color: rgba(0,0,0,.6)!important;
|
|
background-color: var(--color-background-overlay-alt)!important
|
|
}
|
|
|
|
.tw-c-background-range {
|
|
background-color: hsla(0,0%,100%,.2)!important;
|
|
background-color: var(--color-background-range)!important
|
|
}
|
|
|
|
.tw-c-background-range-fill {
|
|
background-color: #a970ff!important;
|
|
background-color: var(--color-background-range-fill)!important
|
|
}
|
|
|
|
.tw-c-background-range-overlay {
|
|
background-color: hsla(0,0%,100%,.3)!important;
|
|
background-color: var(--color-background-range-overlay)!important
|
|
}
|
|
|
|
.tw-c-background-range-overlay-fill {
|
|
background-color: #fff!important;
|
|
background-color: var(--color-background-range-overlay-fill)!important
|
|
}
|
|
|
|
.tw-c-background-top-nav {
|
|
background-color: #451093!important;
|
|
background-color: var(--color-background-top-nav)!important
|
|
}
|
|
|
|
.tw-c-background-chat {
|
|
background-color: #040109!important;
|
|
background-color: var(--color-background-chat)!important
|
|
}
|
|
|
|
.tw-c-background-chat-alt {
|
|
background-color: #15052e!important;
|
|
background-color: var(--color-background-chat-alt)!important
|
|
}
|
|
|
|
.tw-c-background-chat-header {
|
|
background-color: #0d031c!important;
|
|
background-color: var(--color-background-chat-header)!important
|
|
}
|
|
|
|
.tw-c-background-chat-line-mentioning {
|
|
background-color: #323239!important;
|
|
background-color: var(--color-background-chat-line-mentioning)!important
|
|
}
|
|
|
|
.tw-c-background-chat-line-mentioned {
|
|
background-color: #f7f7f8!important;
|
|
background-color: var(--color-background-chat-line-mentioned)!important
|
|
}
|
|
|
|
.tw-c-background-modal-overlay {
|
|
background-color: rgba(0,0,0,.85)!important;
|
|
background-color: var(--color-background-modal-overlay)!important
|
|
}
|
|
|
|
.tw-c-background-modal {
|
|
background-color: #15052e!important;
|
|
background-color: var(--color-background-modal)!important
|
|
}
|
|
|
|
.tw-c-background-graph {
|
|
background-color: #0d031c!important;
|
|
background-color: var(--color-background-graph)!important
|
|
}
|
|
|
|
.tw-c-background-graph-fill {
|
|
background-color: #772ce8!important;
|
|
background-color: var(--color-background-graph-fill)!important
|
|
}
|
|
|
|
.tw-c-background-scrollbar {
|
|
background-color: #1f1f23!important;
|
|
background-color: var(--color-background-scrollbar)!important
|
|
}
|
|
|
|
.tw-c-border-subscriber-stream-tag {
|
|
border-color: #330c6e!important;
|
|
border-color: var(--color-border-subscriber-stream-tag)!important
|
|
}
|
|
|
|
.tw-c-border-base {
|
|
border-color: hsla(0,0%,100%,.1)!important;
|
|
border-color: var(--color-border-base)!important
|
|
}
|
|
|
|
.tw-c-border-region {
|
|
border-color: #000!important;
|
|
border-color: var(--color-border-region)!important
|
|
}
|
|
|
|
.tw-c-border-overlay {
|
|
border-color: hsla(0,0%,100%,.25)!important;
|
|
border-color: var(--color-border-overlay)!important
|
|
}
|
|
|
|
.tw-c-border-alert {
|
|
border-color: #e91916!important;
|
|
border-color: var(--color-border-alert)!important
|
|
}
|
|
|
|
.tw-c-border-error {
|
|
border-color: #e91916!important;
|
|
border-color: var(--color-border-error)!important
|
|
}
|
|
|
|
.tw-c-border-warn {
|
|
border-color: #ffb31a!important;
|
|
border-color: var(--color-border-warn)!important
|
|
}
|
|
|
|
.tw-c-border-success {
|
|
border-color: #00db84!important;
|
|
border-color: var(--color-border-success)!important
|
|
}
|
|
|
|
.tw-c-border-info {
|
|
border-color: #528bff!important;
|
|
border-color: var(--color-border-info)!important
|
|
}
|
|
|
|
.tw-c-border-brand {
|
|
border-color: #9147ff!important;
|
|
border-color: var(--color-border-brand)!important
|
|
}
|
|
|
|
.tw-c-border-error-decorative {
|
|
border-color: #ff4f4d!important;
|
|
border-color: var(--color-border-error-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-warn-decorative {
|
|
border-color: #ffb31a!important;
|
|
border-color: var(--color-border-warn-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-success-decorative {
|
|
border-color: #00db84!important;
|
|
border-color: var(--color-border-success-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-info-decorative {
|
|
border-color: #528bff!important;
|
|
border-color: var(--color-border-info-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-brand-decorative {
|
|
border-color: #a970ff!important;
|
|
border-color: var(--color-border-brand-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-error {
|
|
border-color: #ff4f4d!important;
|
|
border-color: var(--color-border-overlay-error)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-warn {
|
|
border-color: #ffb31a!important;
|
|
border-color: var(--color-border-overlay-warn)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-success {
|
|
border-color: #00db84!important;
|
|
border-color: var(--color-border-overlay-success)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-info {
|
|
border-color: #528bff!important;
|
|
border-color: var(--color-border-overlay-info)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-brand {
|
|
border-color: #fff!important;
|
|
border-color: var(--color-border-overlay-brand)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-error-decorative {
|
|
border-color: #ff4f4d!important;
|
|
border-color: var(--color-border-overlay-error-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-warn-decorative {
|
|
border-color: #ffb31a!important;
|
|
border-color: var(--color-border-overlay-warn-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-success-decorative {
|
|
border-color: #00db84!important;
|
|
border-color: var(--color-border-overlay-success-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-info-decorative {
|
|
border-color: #528bff!important;
|
|
border-color: var(--color-border-overlay-info-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-overlay-brand-decorative {
|
|
border-color: #a970ff!important;
|
|
border-color: var(--color-border-overlay-brand-decorative)!important
|
|
}
|
|
|
|
.tw-c-border-image-selector {
|
|
border-color: rgba(0,0,0,.3)!important;
|
|
border-color: var(--color-border-image-selector)!important
|
|
}
|
|
|
|
.tw-c-border-image-selector-overlay {
|
|
border-color: hsla(0,0%,100%,.3)!important;
|
|
border-color: var(--color-border-image-selector-overlay)!important
|
|
}
|
|
|
|
.tw-c-border-image-selector-overlay-selected {
|
|
border-color: #fff!important;
|
|
border-color: var(--color-border-image-selector-overlay-selected)!important
|
|
}
|
|
|
|
.tw-c-border-range-handle {
|
|
border-color: #a970ff!important;
|
|
border-color: var(--color-border-range-handle)!important
|
|
}
|
|
|
|
.tw-c-border-range-handle-focus {
|
|
border-color: #fff!important;
|
|
border-color: var(--color-border-range-handle-focus)!important
|
|
}
|
|
|
|
.tw-c-border-tag {
|
|
border-color: hsla(0,0%,100%,.15)!important;
|
|
border-color: var(--color-border-tag)!important
|
|
}
|
|
|
|
.tw-c-border-whisper-incoming {
|
|
border-color: #a970ff!important;
|
|
border-color: var(--color-border-whisper-incoming)!important
|
|
}
|
|
|
|
.tw-c-border-whisper-outgoing {
|
|
border-color: #adadb8!important;
|
|
border-color: var(--color-border-whisper-outgoing)!important
|
|
}
|
|
|
|
.tw-c-border-spinner {
|
|
border-color: hsla(0,0%,100%,.15)!important;
|
|
border-color: var(--color-border-spinner)!important
|
|
}
|
|
|
|
.tw-c-border-spinner-fill {
|
|
border-color: #dedee3!important;
|
|
border-color: var(--color-border-spinner-fill)!important
|
|
}
|
|
|
|
.tw-c-border-quote {
|
|
border-color: #3b3b44!important;
|
|
border-color: var(--color-border-quote)!important
|
|
}
|
|
|
|
.tw-c-text-base {
|
|
color: #efeff1!important;
|
|
color: var(--color-text-base)!important
|
|
}
|
|
|
|
.tw-c-text-alt {
|
|
color: #dedee3!important;
|
|
color: var(--color-text-alt)!important
|
|
}
|
|
|
|
.tw-c-text-alt-2 {
|
|
color: #adadb8!important;
|
|
color: var(--color-text-alt-2)!important
|
|
}
|
|
|
|
.tw-c-text-link {
|
|
color: #a970ff!important;
|
|
color: var(--color-text-link)!important
|
|
}
|
|
|
|
.tw-c-text-link-hover {
|
|
color: #a970ff!important;
|
|
color: var(--color-text-link-hover)!important
|
|
}
|
|
|
|
.tw-c-text-link-active {
|
|
color: #a970ff!important;
|
|
color: var(--color-text-link-active)!important
|
|
}
|
|
|
|
.tw-c-text-link-focus {
|
|
color: #a970ff!important;
|
|
color: var(--color-text-link-focus)!important
|
|
}
|
|
|
|
.tw-c-text-link-visited {
|
|
color: #a970ff!important;
|
|
color: var(--color-text-link-visited)!important
|
|
}
|
|
|
|
.tw-c-text-live {
|
|
color: #ff8280!important;
|
|
color: var(--color-text-live)!important
|
|
}
|
|
|
|
.tw-c-text-alert {
|
|
color: #ff8280!important;
|
|
color: var(--color-text-alert)!important
|
|
}
|
|
|
|
.tw-c-text-prime {
|
|
color: #0e9bd8!important;
|
|
color: var(--color-text-prime)!important
|
|
}
|
|
|
|
.tw-c-text-error {
|
|
color: #ff8280!important;
|
|
color: var(--color-text-error)!important
|
|
}
|
|
|
|
.tw-c-text-warn {
|
|
color: #e69900!important;
|
|
color: var(--color-text-warn)!important
|
|
}
|
|
|
|
.tw-c-text-success {
|
|
color: #00c274!important;
|
|
color: var(--color-text-success)!important
|
|
}
|
|
|
|
.tw-c-text-info {
|
|
color: #7aa7ff!important;
|
|
color: var(--color-text-info)!important
|
|
}
|
|
|
|
.tw-c-text-brand {
|
|
color: #9147ff!important;
|
|
color: var(--color-text-brand)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-error {
|
|
color: #ff8280!important;
|
|
color: var(--color-text-overlay-error)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-warn {
|
|
color: #e69900!important;
|
|
color: var(--color-text-overlay-warn)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-success {
|
|
color: #00c274!important;
|
|
color: var(--color-text-overlay-success)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-info {
|
|
color: #7aa7ff!important;
|
|
color: var(--color-text-overlay-info)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-brand {
|
|
color: #fff!important;
|
|
color: var(--color-text-overlay-brand)!important
|
|
}
|
|
|
|
.tw-c-text-accessible-red {
|
|
color: #ff8280!important;
|
|
color: var(--color-text-accessible-red)!important
|
|
}
|
|
|
|
.tw-c-text-accessible-green {
|
|
color: #00c274!important;
|
|
color: var(--color-text-accessible-green)!important
|
|
}
|
|
|
|
.tw-c-text-accessible-blue {
|
|
color: #7aa7ff!important;
|
|
color: var(--color-text-accessible-blue)!important
|
|
}
|
|
|
|
.tw-c-text-badge-alt {
|
|
color: #000!important;
|
|
color: var(--color-text-badge-alt)!important
|
|
}
|
|
|
|
.tw-c-text-badge-alt-2 {
|
|
color: #000!important;
|
|
color: var(--color-text-badge-alt-2)!important
|
|
}
|
|
|
|
.tw-c-text-hint {
|
|
color: #848494!important;
|
|
color: var(--color-text-hint)!important
|
|
}
|
|
|
|
.tw-c-text-tag {
|
|
color: hsla(0,0%,100%,.7)!important;
|
|
color: var(--color-text-tag)!important
|
|
}
|
|
|
|
.tw-c-text-tooltip {
|
|
color: #040109!important;
|
|
color: var(--color-text-tooltip)!important
|
|
}
|
|
|
|
.tw-c-text-overlay {
|
|
color: #fff!important;
|
|
color: var(--color-text-overlay)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-alt {
|
|
color: hsla(0,0%,100%,.85)!important;
|
|
color: var(--color-text-overlay-alt)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-link {
|
|
color: #fff!important;
|
|
color: var(--color-text-overlay-link)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-link-hover {
|
|
color: #e3d1ff!important;
|
|
color: var(--color-text-overlay-link-hover)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-link-active {
|
|
color: #e3d1ff!important;
|
|
color: var(--color-text-overlay-link-active)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-link-focus {
|
|
color: #e3d1ff!important;
|
|
color: var(--color-text-overlay-link-focus)!important
|
|
}
|
|
|
|
.tw-c-text-overlay-link-visited {
|
|
color: #fff!important;
|
|
color: var(--color-text-overlay-link-visited)!important
|
|
}
|
|
|
|
.tw-c-text-chat-line-mentioning {
|
|
color: #fff!important;
|
|
color: var(--color-text-chat-line-mentioning)!important
|
|
}
|
|
|
|
.tw-c-text-chat-line-mentioned {
|
|
color: #18181b!important;
|
|
color: var(--color-text-chat-line-mentioned)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-hosting {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-hosting)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-rerun {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-rerun)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-offline {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-offline)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-hosting-overlay {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-hosting-overlay)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-rerun-overlay {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-rerun-overlay)!important
|
|
}
|
|
|
|
.tw-c-text-channel-status-text-indicator-offline-overlay {
|
|
color: #000!important;
|
|
color: var(--color-text-channel-status-text-indicator-offline-overlay)!important
|
|
}
|
|
|
|
.tw-c-text-inherit {
|
|
color: inherit
|
|
}
|
|
|
|
.tw-c-background-inherit {
|
|
background-color: inherit
|
|
}
|
|
|
|
.tw-elevation-1 {
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)!important;
|
|
box-shadow: var(--shadow-elevation-1)!important
|
|
}
|
|
|
|
.tw-elevation-2 {
|
|
box-shadow: 0 4px 8px rgba(0,0,0,.4),0 0 4px rgba(0,0,0,.4)!important;
|
|
box-shadow: var(--shadow-elevation-2)!important
|
|
}
|
|
|
|
.tw-elevation-3 {
|
|
box-shadow: 0 6px 16px rgba(0,0,0,.5),0 0 4px rgba(0,0,0,.4)!important;
|
|
box-shadow: var(--shadow-elevation-3)!important
|
|
}
|
|
|
|
.tw-elevation-4 {
|
|
box-shadow: 0 12px 32px rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.4)!important;
|
|
box-shadow: var(--shadow-elevation-4)!important
|
|
}
|
|
|
|
.tw-elevation-5 {
|
|
box-shadow: 0 32px 64px rgba(0,0,0,.6),0 0 16px rgba(0,0,0,.4)!important;
|
|
box-shadow: var(--shadow-elevation-5)!important
|
|
}
|
|
|
|
.tw-font-size-1 {
|
|
font-size: 5.4rem!important;
|
|
font-size: var(--font-size-1)!important
|
|
}
|
|
|
|
.tw-font-size-2 {
|
|
font-size: 3.6rem!important;
|
|
font-size: var(--font-size-2)!important
|
|
}
|
|
|
|
.tw-font-size-3 {
|
|
font-size: 2.4rem!important;
|
|
font-size: var(--font-size-3)!important
|
|
}
|
|
|
|
.tw-font-size-4 {
|
|
font-size: 1.8rem!important;
|
|
font-size: var(--font-size-4)!important
|
|
}
|
|
|
|
.tw-font-size-5 {
|
|
font-size: 1.4rem!important;
|
|
font-size: var(--font-size-5)!important
|
|
}
|
|
|
|
.tw-font-size-6 {
|
|
font-size: 1.3rem!important;
|
|
font-size: var(--font-size-6)!important
|
|
}
|
|
|
|
.tw-font-size-7 {
|
|
font-size: 1.2rem!important;
|
|
font-size: var(--font-size-7)!important
|
|
}
|
|
|
|
.tw-font-size-8 {
|
|
font-size: 1.2rem!important;
|
|
font-size: var(--font-size-8)!important
|
|
}
|
|
|
|
.tw-font-size-base {
|
|
font-size: 1.3rem!important;
|
|
font-size: var(--font-size-base)!important
|
|
}
|
|
|
|
.tw-button {
|
|
border-radius: .4rem;
|
|
border-radius: var(--border-radius-medium);
|
|
background-color: #9147ff;
|
|
background-color: var(--color-background-button-primary-default);
|
|
color: #fff;
|
|
color: var(--color-text-button);
|
|
height: 3rem;
|
|
height: var(--button-size-default);
|
|
position: relative;
|
|
justify-content: center;
|
|
font-size: 1.3rem;
|
|
font-size: var(--font-size-6);
|
|
line-height: 2rem;
|
|
vertical-align: middle;
|
|
user-select: none
|
|
}
|
|
|
|
.tw-button[data-focus-visible-added],.tw-root--hover .tw-button:hover:not(.tw-button--disabled) {
|
|
background-color: #772ce8;
|
|
background-color: var(--color-background-button-primary-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button);
|
|
text-decoration: none
|
|
}
|
|
|
|
.tw-button:active:not(.tw-button--disabled),.tw-button:hover:active:not(.tw-button--disabled) {
|
|
background-color: #5c16c5;
|
|
background-color: var(--color-background-button-primary-active);
|
|
color: #fff;
|
|
color: var(--color-text-button);
|
|
box-shadow: 0 0 6px 0 #772ce8;
|
|
box-shadow: var(--shadow-button-active);
|
|
text-decoration: none
|
|
}
|
|
|
|
.tw-button--secondary[data-focus-visible-added],.tw-root--hover .tw-button--secondary:hover:not(.tw-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.2);
|
|
background-color: var(--color-background-button-secondary-hover)
|
|
}
|
|
|
|
.tw-button__text {
|
|
position: relative;
|
|
padding: .5rem 1rem;
|
|
padding: var(--button-padding-y) var(--button-padding-x);
|
|
text-align: center
|
|
}
|
|
|
|
.tw-button--secondary {
|
|
background-clip: padding-box;
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-secondary-default);
|
|
color: #efeff1;
|
|
color: var(--color-text-button-secondary)
|
|
}
|
|
|
|
.tw-button--secondary:active:not(.tw-button--disabled),.tw-button--secondary:hover:active:not(.tw-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-secondary-active);
|
|
box-shadow: 0 0 6px 0 #772ce8;
|
|
box-shadow: var(--shadow-button-active)
|
|
}
|
|
|
|
.tw-button--alert {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-alert);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert)
|
|
}
|
|
|
|
.tw-button--alert[data-focus-visible-added],.tw-root--hover .tw-button--alert:hover:not(.tw-button--disabled) {
|
|
background-color: #bb1411;
|
|
background-color: var(--color-background-button-alert-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert-hover)
|
|
}
|
|
|
|
.tw-button--alert:active:not(.tw-button--disabled),.tw-button--alert:hover:active:not(.tw-button--disabled) {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-alert-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert-active)
|
|
}
|
|
|
|
.tw-button--alert.tw-button--disabled {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-disabled);
|
|
color: hsla(0,0%,100%,.5);
|
|
color: var(--color-text-button-disabled)
|
|
}
|
|
|
|
.tw-button--success {
|
|
background-color: #00f593;
|
|
background-color: var(--color-background-button-success);
|
|
color: #000;
|
|
color: var(--color-text-button-success)
|
|
}
|
|
|
|
.tw-button--success[data-focus-visible-added],.tw-root--hover .tw-button--success:hover:not(.tw-button--disabled) {
|
|
background-color: #00ad96;
|
|
background-color: var(--color-background-button-success-hover);
|
|
color: #000;
|
|
color: var(--color-text-button-success-hover)
|
|
}
|
|
|
|
.tw-button--success:active:not(.tw-button--disabled),.tw-button--success:hover:active:not(.tw-button--disabled) {
|
|
background-color: #00f593;
|
|
background-color: var(--color-background-button-success-active);
|
|
color: #000;
|
|
color: var(--color-text-button-success-active)
|
|
}
|
|
|
|
.tw-button--success.tw-button--disabled {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-disabled);
|
|
color: hsla(0,0%,100%,.5);
|
|
color: var(--color-text-button-disabled)
|
|
}
|
|
|
|
.tw-button--status {
|
|
transition-duration: .1s;
|
|
transition-property: background-color,border,text;
|
|
transition-timing-function: ease
|
|
}
|
|
|
|
.tw-button--status .tw-button__alert-text,.tw-button--status .tw-button__primary-text {
|
|
display: block
|
|
}
|
|
|
|
.tw-button--status.tw-button--disabled .tw-button__alert-icon,.tw-button--status.tw-button--disabled .tw-button__alert-text,.tw-button-icon--status:not(.tw-button-icon--disabled).tw-button-icon--disabled .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled).tw-button-icon--disabled .tw-button-icon__alert-icon {
|
|
display: none
|
|
}
|
|
|
|
.tw-button--status .tw-button__alert-text {
|
|
margin-top: -2rem;
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-button--status .tw-button__alert-icon {
|
|
position: relative;
|
|
left: -2rem;
|
|
margin-right: -2rem;
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) {
|
|
background-color: #bb1411;
|
|
background-color: var(--color-background-button-status-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-status-hover)
|
|
}
|
|
|
|
.tw-button--status[data-focus-visible-added] {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-status-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-status-active)
|
|
}
|
|
|
|
.tw-button--text[data-focus-visible-added],.tw-root--hover .tw-button--text:hover:not(.tw-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.2);
|
|
background-color: var(--color-background-button-text-hover)
|
|
}
|
|
|
|
.tw-button--status.tw-button--disabled .tw-button__primary-icon,.tw-button--status.tw-button--disabled .tw-button__primary-text,.tw-button--status:active .tw-button__alert-icon,.tw-button--status:active .tw-button__alert-text,.tw-button--status[data-focus-visible-added] .tw-button__alert-icon,.tw-button--status[data-focus-visible-added] .tw-button__alert-text,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__alert-icon,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__alert-text {
|
|
opacity: 1
|
|
}
|
|
|
|
.tw-button--state-loading .tw-button__icon,.tw-button--state-loading .tw-button__num-block,.tw-button--state-loading .tw-button__text,.tw-button--state-success .tw-button__icon,.tw-button--state-success .tw-button__num-block,.tw-button--state-success .tw-button__text,.tw-button--status:active .tw-button__primary-icon,.tw-button--status:active .tw-button__primary-text,.tw-button--status[data-focus-visible-added] .tw-button__primary-icon,.tw-button--status[data-focus-visible-added] .tw-button__primary-text,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__primary-icon,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__primary-text {
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-button--text {
|
|
background-color: transparent;
|
|
background-color: var(--color-background-button-text-default);
|
|
color: #a970ff;
|
|
color: var(--color-text-button-text)
|
|
}
|
|
|
|
.tw-button--text:active:not(.tw-button--disabled),.tw-button--text:hover:active:not(.tw-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-text-active);
|
|
box-shadow: 0 0 6px 0 #772ce8;
|
|
box-shadow: var(--shadow-button-active)
|
|
}
|
|
|
|
.tw-button--text.tw-button--disabled {
|
|
color: hsla(0,0%,100%,.5);
|
|
color: var(--color-text-button-disabled)
|
|
}
|
|
|
|
.tw-button__icon,.tw-button__loading-spinner,.tw-button__num-block,.tw-button__succcess-icon,.tw-button__text {
|
|
transition-duration: .2s;
|
|
transition-property: opacity
|
|
}
|
|
|
|
.tw-button__loading-spinner,.tw-button__success-icon {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-button--state-loading .tw-button__loading-spinner,.tw-button--state-success .tw-button__success-icon {
|
|
opacity: 1
|
|
}
|
|
|
|
.tw-button--disabled,.tw-core-button--disabled {
|
|
opacity: .5
|
|
}
|
|
|
|
.tw-button__icon {
|
|
display: inline-flex;
|
|
padding: .4rem .8rem
|
|
}
|
|
|
|
.tw-button--purchase,.tw-button__icon--left {
|
|
padding-right: 0
|
|
}
|
|
|
|
.tw-button__icon--right {
|
|
padding-left: 0
|
|
}
|
|
|
|
.tw-button__icon+.tw-button__text {
|
|
padding-left: .5rem
|
|
}
|
|
|
|
.tw-button--dropmenu .tw-button__text {
|
|
flex-grow: 1;
|
|
text-align: left
|
|
}
|
|
|
|
.tw-button--small {
|
|
border-radius: .2rem;
|
|
border-radius: var(--border-radius-small);
|
|
font-size: 1.2rem;
|
|
font-size: var(--font-size-7);
|
|
line-height: 1.4rem;
|
|
height: 2.4rem;
|
|
height: var(--button-size-small)
|
|
}
|
|
|
|
.tw-button--small .tw-button__alert-text {
|
|
margin-top: -1.4rem
|
|
}
|
|
|
|
.tw-button--small .tw-button__alert-icon {
|
|
left: -1.4rem;
|
|
margin-right: -1.4rem
|
|
}
|
|
|
|
.tw-button--small .tw-button__num-block {
|
|
border-top-right-radius: .2rem;
|
|
border-top-right-radius: var(--border-radius-small);
|
|
border-bottom-right-radius: .2rem;
|
|
border-bottom-right-radius: var(--border-radius-small)
|
|
}
|
|
|
|
.tw-button--large {
|
|
border-radius: .6rem;
|
|
border-radius: var(--border-radius-large);
|
|
font-size: 1.4rem;
|
|
font-size: var(--font-size-5);
|
|
line-height: 2.6rem;
|
|
height: 3.6rem;
|
|
height: var(--button-size-large)
|
|
}
|
|
|
|
.tw-button--large .tw-button__alert-text {
|
|
margin-top: -2.6rem
|
|
}
|
|
|
|
.tw-button--large .tw-button__alert-icon {
|
|
left: -2.6rem;
|
|
margin-right: -2.6rem
|
|
}
|
|
|
|
.tw-button--large .tw-button__num-block {
|
|
border-top-right-radius: .6rem;
|
|
border-top-right-radius: var(--border-radius-large);
|
|
border-bottom-right-radius: .6rem;
|
|
border-bottom-right-radius: var(--border-radius-large)
|
|
}
|
|
|
|
.tw-button--full-width {
|
|
width: 100%
|
|
}
|
|
|
|
.tw-button--purchase .tw-button__text {
|
|
flex-grow: 1
|
|
}
|
|
|
|
.tw-button__num-block {
|
|
background-color: rgba(0,0,0,.25);
|
|
background-color: var(--color-background-button-purchase);
|
|
padding: .5rem 1rem;
|
|
padding: var(--button-padding-y) var(--button-padding-x);
|
|
border-top-right-radius: .4rem;
|
|
border-top-right-radius: var(--border-radius-medium);
|
|
border-bottom-right-radius: .4rem;
|
|
border-bottom-right-radius: var(--border-radius-medium)
|
|
}
|
|
|
|
.tw-button--overlay.tw-button--disabled {
|
|
background-color: #fff;
|
|
background-color: var(--color-background-button-overlay-primary-default);
|
|
color: #000;
|
|
color: var(--color-text-button-overlay-primary)
|
|
}
|
|
|
|
.tw-button-icon {
|
|
border-radius: .4rem;
|
|
border-radius: var(--border-radius-medium);
|
|
background-color: transparent;
|
|
background-color: var(--color-background-button-text-default);
|
|
color: #efeff1;
|
|
color: var(--color-fill-button-icon);
|
|
height: 3rem;
|
|
height: var(--button-size-default);
|
|
width: 3rem;
|
|
width: var(--button-size-default);
|
|
justify-content: center;
|
|
user-select: none
|
|
}
|
|
|
|
.tw-button-icon:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon:not(:disabled):hover,.tw-root--touch .tw-button-icon:not(.tw-button-icon--disabled):hover,.tw-root--touch .tw-button-icon:not(:disabled):hover {
|
|
background-color: hsla(0,0%,100%,.2);
|
|
background-color: var(--color-background-button-text-hover);
|
|
color: #efeff1;
|
|
color: var(--color-fill-button-icon-hover)
|
|
}
|
|
|
|
.tw-button-icon:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon:not(:disabled)[data-focus-visible-added] {
|
|
box-shadow: 0 0 6px 0 #772ce8;
|
|
box-shadow: var(--shadow-button-focus)
|
|
}
|
|
|
|
.tw-button-icon:not(.tw-button-icon--disabled):active,.tw-button-icon:not(:disabled):active {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-text-active);
|
|
color: #efeff1;
|
|
color: var(--color-fill-button-icon-active)
|
|
}
|
|
|
|
.tw-button-icon--disabled,.tw-button-icon:disabled {
|
|
opacity: .5;
|
|
cursor: not-allowed
|
|
}
|
|
|
|
.tw-button-icon--alert {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-alert);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert)
|
|
}
|
|
|
|
.tw-button-icon--alert:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--alert:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon--alert:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--alert:not(:disabled):hover {
|
|
background-color: #bb1411;
|
|
background-color: var(--color-background-button-alert-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert-hover)
|
|
}
|
|
|
|
.tw-button-icon--alert:not(.tw-button-icon--disabled):active,.tw-button-icon--alert:not(:disabled):active {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-alert-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-alert-active)
|
|
}
|
|
|
|
.tw-button-icon--alert.tw-button-icon--disabled,.tw-button-icon--alert:disabled {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-disabled)
|
|
}
|
|
|
|
.tw-button-icon--success {
|
|
background-color: #00f593;
|
|
background-color: var(--color-background-button-success);
|
|
color: #000;
|
|
color: var(--color-text-button-success)
|
|
}
|
|
|
|
.tw-button-icon--success:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--success:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon--success:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--success:not(:disabled):hover {
|
|
background-color: #00ad96;
|
|
background-color: var(--color-background-button-success-hover);
|
|
color: #000;
|
|
color: var(--color-text-button-success-hover)
|
|
}
|
|
|
|
.tw-button-icon--success:not(.tw-button-icon--disabled):active,.tw-button-icon--success:not(:disabled):active {
|
|
background-color: #00f593;
|
|
background-color: var(--color-background-button-success-active);
|
|
color: #000;
|
|
color: var(--color-text-button-success-active)
|
|
}
|
|
|
|
.tw-button-icon--success.tw-button-icon--disabled,.tw-button-icon--success:disabled {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-disabled)
|
|
}
|
|
|
|
.tw-button-icon--overlay {
|
|
border: 1px solid transparent;
|
|
border: var(--border-width-default) solid transparent;
|
|
background-color: transparent;
|
|
background-color: var(--color-background-button-icon-overlay-default);
|
|
color: #fff;
|
|
color: var(--color-text-button-overlay)
|
|
}
|
|
|
|
.tw-root--hover .tw-button-icon--overlay:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--overlay:not(:disabled):hover {
|
|
background-color: hsla(0,0%,100%,.2);
|
|
background-color: var(--color-background-button-icon-overlay-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-overlay-hover)
|
|
}
|
|
|
|
.tw-button-icon--overlay:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--overlay:not(:disabled)[data-focus-visible-added] {
|
|
background-color: hsla(0,0%,100%,.2);
|
|
background-color: var(--color-background-button-icon-overlay-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-overlay-focus);
|
|
box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3);
|
|
box-shadow: var(--shadow-button-overlay-focus)
|
|
}
|
|
|
|
.tw-button-icon--overlay:not(.tw-button-icon--disabled):active,.tw-button-icon--overlay:not(:disabled):active {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-icon-overlay-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-overlay-active);
|
|
box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3);
|
|
box-shadow: var(--shadow-button-overlay-active)
|
|
}
|
|
|
|
.tw-button-icon--status {
|
|
transition-duration: .12s;
|
|
transition-property: background,border,text;
|
|
transition-timing-function: ease
|
|
}
|
|
|
|
.tw-button-icon--status .tw-button-icon__alert-icon {
|
|
position: relative;
|
|
left: -2rem;
|
|
margin-right: -2rem;
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-root--hover .tw-button-icon--status:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--status:not(:disabled):hover {
|
|
background-color: #bb1411;
|
|
background-color: var(--color-background-button-status-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-status-hover)
|
|
}
|
|
|
|
.tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--status:not(:disabled)[data-focus-visible-added] {
|
|
background-color: #bb1411;
|
|
background-color: var(--color-background-button-status-focus);
|
|
color: #fff;
|
|
color: var(--color-text-button-status-focus)
|
|
}
|
|
|
|
.tw-button-icon--status:not(.tw-button-icon--disabled):active,.tw-button-icon--status:not(:disabled):active {
|
|
background-color: #e91916;
|
|
background-color: var(--color-background-button-status-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-status-active)
|
|
}
|
|
|
|
.tw-button-icon--status:not(.tw-button-icon--disabled).tw-button-icon--disabled .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):active .tw-button-icon__alert-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):hover .tw-button-icon__alert-icon,.tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added] .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled).tw-button-icon--disabled .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):active .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled):hover .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled)[data-focus-visible-added] .tw-button-icon__alert-icon {
|
|
opacity: 1
|
|
}
|
|
|
|
.tw-button-icon--status:not(.tw-button-icon--disabled):active .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):hover .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added] .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):active .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):hover .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled)[data-focus-visible-added] .tw-button-icon__primary-icon {
|
|
opacity: 0
|
|
}
|
|
|
|
.tw-button-icon__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center
|
|
}
|
|
|
|
.tw-button-icon--small {
|
|
border-radius: .2rem;
|
|
border-radius: var(--border-radius-small);
|
|
height: 2.4rem;
|
|
height: var(--button-size-small);
|
|
width: 2.4rem;
|
|
width: var(--button-size-small)
|
|
}
|
|
|
|
.tw-button-icon--small .tw-button-icon__icon {
|
|
padding: .3rem
|
|
}
|
|
|
|
.tw-button-icon--small .tw-button-icon__alert-icon {
|
|
left: -1.6rem;
|
|
margin-right: -1.6rem
|
|
}
|
|
|
|
.tw-button-icon--large {
|
|
border-radius: .6rem;
|
|
border-radius: var(--border-radius-large);
|
|
height: 3.6rem;
|
|
height: var(--button-size-large);
|
|
width: 3.6rem;
|
|
width: var(--button-size-large)
|
|
}
|
|
|
|
.tw-button-icon--large .tw-button-icon__icon {
|
|
padding: .5rem
|
|
}
|
|
|
|
.tw-button-icon--large .tw-button-icon__alert-icon {
|
|
left: -2.4rem;
|
|
margin-right: -2.4rem
|
|
}
|
|
|
|
.tw-core-button {
|
|
font-size: 1.3rem;
|
|
font-size: var(--button-text-default);
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
height: 3rem;
|
|
height: var(--button-size-default)
|
|
}
|
|
|
|
.tw-core-button:hover {
|
|
text-decoration: none
|
|
}
|
|
|
|
.tw-core-button--small {
|
|
font-size: 1.2rem;
|
|
font-size: var(--button-text-small);
|
|
height: 2.4rem;
|
|
height: var(--button-size-small)
|
|
}
|
|
|
|
.tw-core-button--large {
|
|
font-size: 1.4rem;
|
|
font-size: var(--button-text-large);
|
|
height: 3.6rem;
|
|
height: var(--button-size-large)
|
|
}
|
|
|
|
.tw-core-button--primary {
|
|
background-color: #9147ff;
|
|
background-color: var(--color-background-button-primary-default);
|
|
color: #fff;
|
|
color: var(--color-text-button-primary)
|
|
}
|
|
|
|
.tw-core-button--primary[data-focus-visible-added],.tw-root--hover .tw-core-button--primary:hover:not(.tw-core-button--disabled) {
|
|
background-color: #772ce8;
|
|
background-color: var(--color-background-button-primary-hover);
|
|
color: #fff;
|
|
color: var(--color-text-button-primary)
|
|
}
|
|
|
|
.tw-core-button--primary[data-focus-visible-added] {
|
|
box-shadow: 0 0 6px 0 #772ce8;
|
|
box-shadow: var(--shadow-button-focus)
|
|
}
|
|
|
|
.tw-core-button--primary:active:not(.tw-core-button--disabled),.tw-core-button--primary:hover:active:not(.tw-core-button--disabled) {
|
|
background-color: #5c16c5;
|
|
background-color: var(--color-background-button-primary-active);
|
|
color: #fff;
|
|
color: var(--color-text-button-primary)
|
|
}
|
|
|
|
.tw-core-button--primary.tw-core-button--disabled {
|
|
background-color: hsla(0,0%,100%,.15);
|
|
background-color: var(--color-background-button-disabled);
|
|
color: hsla(0,0%,100%,.5);
|
|
color: var(--color-text-button-disabled)
|
|
}
|
|
|
|
.tw-core-button--primary.tw-core-button--overlay {
|
|
background-color: #fff;
|
|
background-color: var(--color-background-button-overlay-primary-default);
|
|
color: #000;
|
|
color: var(--color-text-button-overlay-primary)
|
|
}
|
|
|
|
.tw-core-button--primary.tw-core-button--overlay[data-focus-visible-added],.tw-root--hover .tw-core-button--primary.tw-core-button--overlay:hover:not(.tw-core-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.9);
|
|
background-color: var(--color-background-button-overlay-primary-hover);
|
|
color: #000;
|
|
color: var(--color-text-button-overlay-primary)
|
|
}
|
|
|
|
.tw-core-button--primary.tw-core-button--overlay[data-focus-visible-added] {
|
|
box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3);
|
|
box-shadow: var(--shadow-button-overlay-focus)
|
|
}
|
|
|
|
.tw-core-button--primary.tw-core-button--overlay:active:not(.tw-core-button--disabled),.tw-core-button--primary.tw-core-button--overlay:hover:active:not(.tw-core-button--disabled) {
|
|
background-color: hsla(0,0%,100%,.85);
|
|
background-color: var(--color-background-button-overlay-primary-active);
|
|
color: #000;
|
|
color: var(--color-text-button-overlay-primary);
|
|
box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3);
|
|
box-shadow: var(--shadow-button-overlay-active)
|
|
}
|
|
|
|
.tw-core-button-label {
|
|
padding: 0 1rem;
|
|
padding: 0 var(--button-padding-x)
|
|
}
|
|
|
|
.tw-core-button-label--icon {
|
|
padding-left: .8rem;
|
|
padding-left: calc(var(--button-padding-x) - .2rem)
|
|
}
|
|
|
|
.tw-core-button-label--dropdown {
|
|
padding-right: .8rem;
|
|
padding-right: calc(var(--button-padding-x) - .2rem)
|
|
}
|