125 lines
2.2 KiB
CSS
125 lines
2.2 KiB
CSS
body {
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
color: white;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin: 12px;
|
|
background: #070809;
|
|
}
|
|
|
|
.vl-button,
|
|
.vl-toggle-button {
|
|
border: solid 1px #1d1e1f;
|
|
background: #1a1b1c;
|
|
}
|
|
|
|
.vl-button,
|
|
.vl-toggle-button,
|
|
.vl-dropdown button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: #efefef;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
border-radius: 8px;
|
|
transition-property: background-color, border-color;
|
|
transition-duration: 250ms;
|
|
transition-timing-function: ease-in;
|
|
cursor: pointer;
|
|
min-width: 65px;
|
|
}
|
|
|
|
.vl-button svg {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.vl-toggle-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.vl-toggle-button {
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.vl-toggle-button svg {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.vl-button:hover,
|
|
button:hover {
|
|
background: #1d1e1f;
|
|
border-color: #202122;
|
|
}
|
|
|
|
.vl-button:focus, button:focus {
|
|
outline: 2px solid #4e367e;
|
|
background: #1d1e1f;
|
|
border-color: #202122;
|
|
}
|
|
|
|
.vl-button:active,
|
|
button:active {
|
|
background: #191a1b;
|
|
border-color: #1c1d1e;
|
|
}
|
|
|
|
.vl-dropdown {
|
|
box-shadow: 0 0 12px #00000071;
|
|
}
|
|
|
|
.vl-dropdown-enter-active,
|
|
.vl-dropdown-leave-active {
|
|
transition: all 300ms ease;
|
|
}
|
|
|
|
.vl-dropdown-enter-from,
|
|
.vl-dropdown-leave-to {
|
|
transform: translateY(-8px) scale(0.85);
|
|
opacity: 0;
|
|
}
|
|
|
|
.vl-toggle-button {
|
|
color: #bcbcbc;
|
|
}
|
|
|
|
.vl-toggle-group button {
|
|
border-radius: 0px;
|
|
border-left: 0px;
|
|
}
|
|
|
|
.vl-toggle-group button:first-child {
|
|
border-radius: 8px 0px 0px 8px;
|
|
}
|
|
|
|
.vl-toggle-group button:last-child {
|
|
border-radius: 0px 8px 8px 0px;
|
|
border-left: 0px;
|
|
}
|
|
|
|
/*
|
|
.vl-select-left:active, .vl-select-middle:active, .vl-select-right:active, .vl-select-left:hover, .vl-select-middle:hover, .vl-select-right:hover {
|
|
border-color: #1d1e1f;
|
|
}*/
|
|
|
|
.vl-toggle-button[data-state="checked"],
|
|
.vl-toggle-button[data-state="on"] {
|
|
background: #1f2021;
|
|
color: #efefef;
|
|
}
|
|
|
|
.vl-toggle-button:focus {
|
|
position: relative;
|
|
z-index: 1;
|
|
box-shadow: #4e367e 0px 0px 0px 2px
|
|
} |