Search the source of every open source package.
28 results
OptionsScreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
font-weight: bold;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
transform: scale( 1 );
transition: none;
pointer-events: all;
background-color: #111111;
.title {
color: white;
text-shadow: none;
box-shadow: none;
align-self: flex-end;
font-size: 75px;
text-shadow: 0px 0px 2px black;
flex-shrink: 0;
font-family: Consolas;
margin: 20px 0px;
}
.button {
//flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-shrink: 0;
flex-grow: 0;
color: rgba(255,255,255, 0.9);
width: auto;
padding: 15px 32px;
text-align: center;
align-self: center;
font-size: 24px;
font-weight: 600;
margin: 20px;
gap: 0;
transition: all 50ms linear;
cursor: pointer;
}
> .container {
position: relative;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
.title {
align-self: center;
font-size: 60px;
flex-shrink: 0;
}
> .buttons {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-shrink: 0;
// gap: 8px;
}
.content {
padding: 5px;
flex-grow: 1;
flex-direction: column;
align-self: center;
//border-radius: 20px;
&.bg {
//background-color: rgba(220,220,220,0.5);
}
}
}
// Buttons on the left side
.container .buttons {
.button-bg .button {
width: 100%;
min-width: 400px;
max-width: 600px;
}
}
.content {
height: auto;
// Buttons inside the content box
.buttons {
.button {
padding: 5px;
font-size: 30px;
}
}
&.tabs-container {
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
}
.tabs-group {
flex-direction: row;
align-items: center;
flex-grow: 0;
.button {
margin: 0 15px;
background-color: #242424;
// Can't remove this sound once it's set
// Use .inactive instead
&:hover {
//sound-in: ui.button.over;
}
&:hover {
background-color: #3B3B3B; //#EC594F;
}
&:active {
background-color: #6E6E6E33; //#D32F2F;
}
&.active {
background-color: #F44336;
}
&.inactive:hover {
sound-in: ui.button.over;
}
}
}
}
.content.tab-content {
// CONTENT ADD HERE
.button {
margin: 0;
}
}
.content.tab-content .button, .menu.buttons .button {
&:hover {
sound-in: ui.button.over;
}
&.green {
background-color: #4CAF50;
&:hover {
background-color: #57BB5A;
}
&:active {
background-color: #45A049;
}
}
&.red {
background-color: #F44336;
&:hover {
background-color: #EC594F;
}
&:active {
background-color: #D32F2F;
}
}
&.gray, &.grey {
background-color: #666;
color: white;
&:hover {
background-color: #777;
}
&:active {
background-color: #444;
}
}
}
.table {
position: relative;
flex-shrink: 1;
flex-grow: 0;
justify-content: center;
flex-wrap: wrap;
color: #9b9fa8;
align-self: center;
max-width: 1500px;
width: 85%;
font-size: 30px;
// TABLE ADD HERE
overflow-y: scroll;
.row {
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
font-weight: 600;
margin: 10px 0;
}
.row.title {
color: white;
margin-top: 20px;
padding: 5px 0;
justify-content: flex-start;
font-size: 32px;
font-weight: 800;
border-bottom: 0.2em solid rgb(30, 30, 30, 0.25);
&:first-child {
margin-top: 0;
}
}
.column {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.column:last-child {
align-items: flex-end;
justify-content: center;
//height: 100%;
}
.column.value {
.button {
width: 100px;
justify-content: center;
}
}
SliderControl {
width: 100%;
}
}
.cycling-selector {
display: flex;
flex-direction: column;
align-items: center;
width: 100%; /* Adjust width as needed */
max-width: 500px; /* Set max width */
background-color: #111; /* Dark background similar to your image */
padding: 10px;
border-radius: 5px;
color: white;
font-family: Arial, sans-serif;
}
.cycling-label {
text-align: center;
margin-bottom: 10px; /* Spacing between label and controls */
font-size: 14px;
width: 100%;
}
.cycling-controls {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.button {
width: auto;
padding: 5px;
}
}
.cycling-controls .value {
align-items: center;
font-weight: bold;
font-size: 22px;
padding: 5px;
}
.cycling-controls .arrow {
border: none;
color: white;
font-size: 40px;
line-height: 10px;
cursor: pointer;
padding: 5px;
&.left {
padding-left: 0;
}
&.right {
padding-right: 0;
}
}
.cycling-controls .arrow:hover {
color: #ccc;
}
}
.slidercontrol
{
flex-direction: row;
min-width: 50px;
position: relative;
flex-shrink: 0;
flex-direction: row;
pointer-events: all;
cursor: pointer;
gap: 8px;
flex-grow: 1;
align-items: center;
> .inner
{
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
min-height: 32px;
> .values
{
width: 100%;
pointer-events: none;
font-size: 14px;
color: #aaa;
> .left
{
flex-grow: 1;
}
}
> .track
{
position: relative;
background-color: #888;
height: 7px;
margin: 8px;
align-items: center;
border-radius: 4px;
> .track-active
{
background-color: #fff;
position: absolute;
height: 100%;
left: 0px;
border-radius: 4px;
}
> .thumb
{
position: relative;
background-color: #fff;
border-radius: 100px;
width: 16px;
height: 16px;
transform: translateX( -50% );
}
}
}
>.entry
{
width: 50px;
flex-shrink: 0;
flex-grow: 0;
> textentry
{
text-align: right;
width: 100%;
border-radius: 4px;
padding: 0;
min-height: 0px;
> .content-label
{
padding: 0 4px;
}
}
}
}
.slidercontrol .value-tooltip
{
position: absolute;
bottom: 150%;
left: -8px;
z-index: 1000;
flex-direction: column;
> .label
{
background-color: black;
padding: 8px 12px;
border-radius: 8px;
}
>.tail
{
left: 8px;
background-color: black;
width: 10px;
height: 10px;
transform: rotateZ(45 deg);
}
}@import "base/_popup.scss";
@import "base/_splitcontainer.scss";
@import "base/_tabcontainer.scss";
@import "base/_navigator.scss";
@import "base/_textentry.scss";
.button
{
cursor: pointer;
}
IconPanel
{
font-family: Material Icons;
}
.is-half
{
width: 50%;
}
.is-third
{
width: 33%;
}
.is-quarter
{
width: 25%;
}
.button.has-subtitle
{
position: relative;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-left: 40px; // icon space
.iconpanel
{
position: absolute;
left: 5px;
top: 0;
bottom: 0;
align-items: center;
}
.button-label
{
font-weight: bold;
}
.button-subtitle
{
font-size: 12px;
opacity: 0.5;
mix-blend-mode: lighten;
}
}.video-texture {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
$form-control-height: 28px !default;
@import "form/_checkbox.scss";
@import "form/_switch.scss";
@import "form/_dropdown.scss";
@import "form/_slider.scss";
@import "form/_coloreditor.scss";
@import "form/_colorproperty.scss";
.form
{
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
overflow: scroll;
}
.field-group
{
flex-direction: column;
flex-shrink: 0;
}
.field-header
{
flex-shrink: 0;
}
.field
{
color: white;
font-size: 14px;
flex-shrink: 0;
flex-grow: 0;
> .label
{
flex-grow: 0;
flex-shrink: 0;
font-weight: 600;
opacity: 0.4;
width: 20%;
font-size: 13px;
}
> .control
{
flex-shrink: 0;
flex-grow: 1;
flex-direction: column;
}
}
.is-vertical > .field, .field.is-vertical
{
flex-direction: column;
> .label
{
width: auto;
height: auto;
}
}.packagefilter
{
width: 100%;
margin-bottom: 40px;
flex-shrink: 0;
.left
{
flex-grow: 1;
flex-shrink: 0;
gap: 16px;
}
.right
{
flex-grow: 0;
flex-shrink: 0;
gap: 16px;
textentry
{
width: 300px;
}
}
}
.packagefilterfacet, .packagefilter textentry
{
background-color: rgba( black, 0.4 );
padding: 4px 12px;
gap: 16px;
flex-shrink: 0;
flex-grow: 0;
font-size: 18px;
.clear-button
{
height: 100%;
margin-right: -16px;
align-items: center;
padding: 0px 12px;
&:hover
{
background-color: white;
color: #222;
}
}
}
.packagefilterfacet
{
cursor: pointer;
align-items: center;
&.is-active
{
opacity: 1;
}
}
$primary: red !default;
$primary-alt: white !default;
.slidercontrol
{
flex-direction: row;
min-width: 50px;
position: relative;
flex-shrink: 0;
flex-direction: row;
pointer-events: all;
cursor: pointer;
gap: 8px;
flex-grow: 1;
align-items: center;
> .inner
{
flex-direction: column;
flex-shrink: 1;
flex-grow: 1;
min-height: 32px;
> .values
{
color: $primary;
}
> .track
{
background-color: rgba( $primary, 0.2 );
height: 10px;
margin: 10px 18px;
> .track-active
{
background-color: $primary;
}
> .thumb
{
background-color: $primary;
position: relative;
width: 22px;
height: 22px;
box-shadow: 2px 2px 20px #0002;
}
}
}
> .entry
{
width: 50px;
flex-shrink: 0;
flex-grow: 0;
> textentry
{
text-align: right;
width: 100%;
border-radius: 4px;
padding: 0;
min-height: 0px;
> .content-label
{
padding: 0 4px;
}
}
}
&:active
{
> .inner > .track > .thumb
{
width: 22px;
height: 22px;
background-color: #fff;
}
}
}
Panel
{
position: absolute;
top: -500;
left: 0;
right: 1000;
bottom: 0;
justify-content: center;
align-items: center;
font-weight: bold;
border-radius: 20px;
.title
{
font-size: 25px;
font-family: Poppins;
color: #fff;
}
}TwitchChatExample
{
position: absolute;
justify-content: flex-end;
align-items: flex-start;
flex-direction: column-reverse;
color: white;
TwitchChatEntry
{
position: relative;
flex-shrink: 0;
width: 100%;
align-items: flex-start;
left: 0px;
transition: all 0.2s ease-out;
&:intro
{
left: -16px;
opacity: 0;
}
gap: 4px;
.username
{
align-items: center;
flex-shrink: 0;
.badges
{
.badge
{
width: 18px;
height: 18px;
background-color: white;
margin-right: 3px;
border-radius: 2px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
&.moderator
{
background-color: #00AD03;
background-image: url("badges/moderator.png");
}
&.subscriber
{
background-color: #6441A4;
background-image: url("badges/subscriber.png");
}
&.vip
{
background-color: #E005B9;
background-image: url("badges/vip.png");
}
&.broadcaster
{
background-color: #e91916;
background-image: url("badges/broadcaster.png");
}
&.premium
{
background-color: #00a0d6;
background-image: url("badges/premium.png");
}
&.staff
{
background-color: black;
background-image: url("badges/staff.png");
}
&.turbo
{
background-color: #59399A;
background-image: url("badges/turbo.png");
}
&.verified
{
background-image: url("badges/verified.png");
}
}
}
.avatar
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 50%;
margin-right: 4px;
}
.name
{
font-weight: 700;
}
}
.message
{
flex-wrap: wrap;
> *
{
margin-right: 4px;
flex-shrink: 0;
}
.emote
{
width: 24px;
height: 24px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
menupanel
{
position: absolute;
z-index: 1000;
pointer-events: all;
font-size: 12px;
flex-shrink: 0;
.background
{
position: absolute;
left: -5000px;
right: -5000px;
top: -5000px;
bottom: -5000px;
}
.inner
{
min-width: 200px;
min-height: 20px;
flex-direction: column;
font-family: Poppins;
font-weight: bold;
border-radius: 10px;
box-shadow: 5px 5px 30px #000e;
background-color: #2a2a2a;
flex-shrink: 0;
.spacer
{
height: 1px;
background-color: #0005;
}
.option
{
color: #fffa;
padding: 0px 8px;
cursor: pointer;
flex-shrink: 0;
height: 32px;
&:first-child
{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
&:last-child
{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon
{
padding: 8px;
font-family: Material Icons;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.text
{
padding: 8px;
flex-shrink: 0;
}
&:hover
{
background-color: #3472e6;
color: #f5f8fe;
}
}
}
}
RootPanel
{
font-family: Roboto;
color: white;
}
IconPanel, i
{
font-family: Material Icons;
}
.tooltip
{
background-color: rgba( black, 0.8 );
border: 1px solid rgba( #555, 0.1 );
padding: 10px;
border-radius: 4px;
color: white;
font-weight: bold;
transition: opacity 0.09s ease;
opacity: 1;
margin: 0px;
&:intro, &:outro
{
opacity: 0;
}
}
.textentry
{
cursor: text;
align-items: center;
justify-content: center;
white-space: nowrap;
overflow: hidden;
flex-direction: row;
position: relative;
&.disabled
{
cursor: default;
}
&.is-multiline
{
align-items: flex-start;
white-space: normal;
}
.content-label,
.placeholder
{
flex-grow: 1;
}
.placeholder
{
opacity: 0.2;
pointer-events: none;
display: none;
}
.iconpanel
{
position: absolute;
right: 0;
font-size: 24px;
padding-right: 10px;
pointer-events: none;
}
&.has-icon
{
padding-right: 30px;
}
.content-label,
.prefix-label,
.suffix-label,
.placeholder
{
padding: 10px;
overflow: hidden;
}
.prefix-label,
.suffix-label
{
flex-shrink: 0;
opacity: 0.5;
background-color: rgba( black, 0.8 );
}
&.has-placeholder
{
.placeholder
{
display: flex;
}
.content-label
{
display: none;
}
}
&:hover
{
.placeholder
{
display: none;
}
.content-label
{
display: flex;
}
}
&.invalid
{
box-shadow: 0px 0px 1px 2px #f8356b;
}
}
$popup-border-radius: 10px !default;
$primary: #e500ff !default;
$primary-fg: white !default;
.popup-panel
{
background-color: #2b303c;
flex-direction: column;
color: #cfdbf2;
transition: all 0.1s ease-out;
position: absolute;
z-index: 1000;
min-height: 20px;
min-width: 10px;
overflow: scroll;
pointer-events: all;
&.medium
{
max-width: 300px;
}
&.center-horizontal
{
transform-origin: top center;
}
&.below-center
{
transform: translateX( -50% );
transform-origin: 50% 0%;
}
&.above-left
{
transform-origin: 0% 100%;
}
&.left
{
transform-origin: 100% 50%;
transform: translate( 00% -50% );
}
&:intro
{
transform: scale( 0 );
pointer-events: none;
opacity: 0;
}
&:outro
{
opacity: 0;
transition: all 0.1s ease-in;
margin-top: 50px;
pointer-events: none;
}
&.below-stretch
{
transform-origin: 0% 0%;
&:intro
{
transform: scaleY( 0.1 );
}
}
> .canvas
{
flex-direction: column;
}
.information
{
padding: 16px;
font-size: 14px;
opacity: 0.5;
}
.button
{
background-color: transparent;
border-radius: 0;
font-size: 18px;
padding: 8px 12px;
padding-right: 24px;
min-height: 10px;
border: 0;
flex-shrink: 0;
gap: 16px;
cursor: pointer;
color: #ccc;
font-weight: 400;
white-space: nowrap;
.iconpanel
{
color: #eee;
flex-grow: 0;
flex-shrink: 0;
}
.button-label
{
flex-grow: 1;
flex-shrink: 0;
}
.count
{
flex-grow: 0;
flex-shrink: 0;
margin-left: 32px;
text-align: right;
}
&:hover, &.active, &:active
{
color: #fff;
background-color: #fff1;
.iconpanel
{
color: #fff;
}
}
&.disabled
{
pointer-events: none;
opacity: 0.2;
}
}
}
@keyframes pop-up {
from {
opacity: 0;
transform: translateY( 100% );
}
to {
opacity: 1;
transform: translateY( 0% );
}
}
@keyframes hide {
from {
opacity: 1;
transform: translateY( 0% );
}
to {
opacity: 0;
transform: translateY( 100% );
}
}
@keyframes spin {
from {
transform: rotate( 0deg );
}
to {
transform: rotate( 360deg );
}
}
VideoControlOverlay {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
> #spinner {
display: none;
}
&.loading > #spinner {
display: flex;
position: absolute;
left: 30%;
top: 30%;
width: 40%;
height: 40%;
animation: spin 1s infinite;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
&.conceal > #bottomBar {
transform: translateY( 100% );
opacity: 0;
animation: hide 0.08s;
}
> #bottomBar {
position: absolute;
bottom: 0%;
width: 100%;
align-items: center;
padding: 5px;
font-family: Poppins;
background-color: #000000FC;
color: #FFFFFFF0;
transform: translateY( 0% );
opacity: 1;
animation: pop-up 0.08s;
.button {
border: 1px solid #FFFFFF02;
border-radius: 5px;
padding: 5px;
background-color: #000E;
&:hover {
background-color: #222E;
}
&:active {
transform: scale(0.98);
}
}
.symbol {
font-size: 32px;
font-family: Material Icons;
}
> * {
margin: 0px 5px;
}
#timecodeArea {
position: relative;
width: 20%;
justify-content: center;
align-items: center;
font-size: 18px;
&.big {
width: 22.5%;
}
.progress {
flex-wrap: nowrap;
align-items: center;
&.time {
min-width: 10%;
}
&.right {
justify-content: flex-end;
}
}
}
#progressBar {
.inner {
justify-content: center;
min-height: 0px;
.track {
height: 14px;
margin: 0px;
.thumb {
height: 14px;
width: 14px;
}
}
}
.value-tooltip {
// Only required because SliderControl.ShowValueTooltip isn't hooked up to anything.
display: none;
}
}
}
}
.textentry
{
font-size: 16px;
}
.splitcontainer
{
flex-grow: 1;
> .split-left, > .split-right
{
flex-grow: 1;
}
> .split-left
{
height: 100%;
}
> .splitter
{
flex-grow: 1;
width: 8px;
cursor: ew-resize;
&:hover
{
}
}
&.dragging > .splitter
{
}
&.vertical
{
flex-direction: column;
> .splitter
{
height: 8px;
width: 100%;
cursor: ns-resize;
}
}
}
$outline: #fff;
$highlight: #5c5;
.card-package
{
max-width: 250px;
min-width: 250px;
border: 1px solid transparent;
margin: 2px;
flex-direction: column;
.card-image
{
border-radius: 5px;
box-shadow: 5px 5px 30px rgba( black, 0.2 );
cursor: pointer;
background-position: center;
background-size: cover;
position: relative;
.hover-overlay
{
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
justify-content: center;
align-items: center;
border-radius: 5px;
opacity: 0;
background-color: rgba( #222, 0.0 );
display: none;
transition: all 0.3s ease-out;
pointer-events: none;
.thumb-video
{
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
i
{
font-size: 80px;
text-shadow: 4px 4px 4px black;
}
}
&:hover
{
box-shadow: 0px 0px 2px 2px $outline, 0px 0px 10px rgba( $outline, 0.8 );
.hover-overlay
{
opacity: 1;
display: flex;
}
}
&:active
{
top: 5px;
left: 2px;
}
}
.package-card-body
{
flex-shrink: 0;
font-size: 13px;
flex-direction: row;
margin-top: 12px;
// border: 1px solid red;
gap: 10px;
.org-image
{
width: 38px;
flex-shrink: 0;
//border: 1px solid green;
.img
{
width: 38px;
height: 38px;
background-size: cover;
border-radius: 5px;
background-color: white;
}
}
.body-content
{
// border: 1px solid cyan;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
white-space: nowrap;
gap: 3px;
.orgrow
{
flex-direction: row;
flex-shrink: 0;
flex-grow: 1;
gap: 4px;
color: #5A738B;
.orgname
{
flex-grow: 0;
}
.updated
{
flex-shrink: 0;
}
}
.body-meta
{
gap: 12px;
margin-top: 6px;
color: #5A738B;
> div
{
gap: 2px;
font-size: 13px;
align-items: center;
i
{
font-size: 16px;
}
}
}
}
.title
{
font-weight: bold;
text-overflow: ellipsis;
cursor: pointer;
&:hover
{
text-decoration: underline;
}
}
.orgname
{
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
&:hover
{
text-decoration: underline;
color: white;
}
}
}
.card-image
{
aspect-ratio: 16/9;
flex-grow: 1;
flex-shrink: 0;
}
&.is-favourite .body-meta .favourite
{
color: #fac;
}
&:intro
{
opacity: 0.0;
}
opacity: 1;
transition: all 0.1s ease-out;
}
.card-decorator-unplayed, .card-decorator-updated
{
background-color: #182229;
color: #65788B;
position: absolute;
left: 0px;
top: 0px;
padding: 6px 8px;
text-transform: uppercase;
border-radius: 3px 0px 2px 0px;
font-size: 10px;
letter-spacing: 1px;
}
.card-decorator-updated
{
background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
color: lighten( $highlight, 0.5 );
}
.card-decorator-hidden
{
position: absolute;
background-color: #0009;
bottom: 0;
left: 0;
right: 0;
color: white;
padding: 10px;
text-transform: uppercase;
font-size: 12px;
z-index: 5;
}
.card-decorator-users
{
background-color: darken( rgba( $highlight, 0.95 ), 0.33 );
color: lighten( $highlight, 0.5 );
position: absolute;
right: 0px;
top: 0px;
padding: 3px 8px;
border-radius: 0px 3px 0px 2px;
aspect-ratio: 1;
box-shadow: 2px 2px 16px #0002;
font-size: 12px;
font-weight: bold;
gap: 3px;
align-items: center;
i
{
font-size: 16px;
}
}
.Main {
width: 100%;
height: 100%;
pointer-events: all;
position: absolute;
justify-content: center;
align-items: center;
background-color: black;
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.checkbox.switch
{
cursor: pointer;
> .checkmark
{
font-size: 22px;
border: 0px solid $primary;
border-radius: 100px;
text-align: center;
justify-content: center;
align-items: center;
color: $primary-alt;
padding: $switch-padding;
padding-right: 32px;
padding-left: $switch-padding;
transition: all 0.3s ease;
background-color: rgba( $primary, 0.1 );
> .handle
{
background-color: $primary-alt;
width: 20px;
height: 20px;
border-radius: 100px;
box-shadow: 2px 2px 12px black;
}
}
&.checked
{
> .checkmark
{
background-color: $primary;
padding-left: 32px;
padding-right: $switch-padding;
}
}
&:active
{
transform: scale( 0.9 );
transform-origin: 20px 50%;
}
}
.package-list
{
overflow-y: scroll;
flex-shrink: 1;
flex-wrap: wrap;
flex-grow: 1;
gap: 10px;
justify-content: space-around;
h1
{
width: 100%;
margin-top: 50px;
font-size: 40px;
}
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.button.popupbutton.dropdown
{
cursor: pointer;
transition: all .1s ease-out;
position: relative;
> .dropdown_indicator
{
position: absolute;
right: 8px;
}
&.open
{
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
transition: border-radius 0.2s ease-out;
}
}
select
{
min-height: 40px;
> option
{
display: none;
}
}Menu
{
}.navigator-body
{
&.hidden
{
display: none;
}
}
$primary: red !default;
$primary-alt: white !default;
$switch-padding: 6px !default;
.coloreditor
{
flex-direction: column;
min-width: 250px;
max-width: 250px;
> .canvas
{
border-top: 1px solid rgba( white, 0.5 );
flex-grow: 1;
flex-direction: column;
padding: 10px 15px;
> textentry.textentry
{
flex-grow: 0;
flex-shrink: 0;
width: auto;
}
}
.slider
{
padding: 6.5px;
}
.slider .track
{
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
transition: all 0.1s ease-out;
.inner
{
display: none;
}
}
.slider:hover, .slider:active
{
padding: 7px;
.track
{
height: 20px;
border-radius: 6px;
}
.thumb
{
width: 10px;
height: 16px;
margin-left: 2px;
}
}
.slider .thumb
{
width: 10px;
height: 10px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
backdrop-filter: invert( 1 );
margin-left: 1px;
pointer-events: none;
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
.hue .track
{
background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
.inner
{
display: none;
}
}
.satval
{
background: linear-gradient(to right, white, transparent);
height: 200px;
position: relative;
&:active
{
z-index: 10;
cursor: none;
}
.value_gradient
{
background: linear-gradient(to bottom, black, white);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
mix-blend-mode: multiply;
}
.thumb
{
z-index: 10;
}
}
.presets
{
flex-wrap: wrap;
align-content: center;
justify-content: center;
padding: 15px;
border-top: 1px solid rgba( white, 0.5 );
.preset
{
background-color: white;
width: 16px;
height: 16px;
margin: 2px;
border-radius: 20px;
cursor: pointer;
&:hover
{
box-shadow: 0px 0px 1px 2px white;
}
}
}
}
.coloreditorrgba
{
flex-direction: column;
.slider
{
padding-right: 16px;
}
.slider .track
{
background-color: transparent;
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
.inner
{
display: none;
}
}
.slider .thumb
{
width: 12px;
height: 12px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
margin-left: 2px;
backdrop-filter: invert( 1 );
}
.red_slider .track
{
background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
}
.green_slider .track
{
background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
}
.blue_slider .track
{
background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
}
.coloreditorhsva
{
flex-direction: column;
.slider
{
padding-right: 16px;
}
.slider .track
{
background-color: transparent;
height: 14px;
border-radius: 14px;
left: 0px;
right: 0px;
.inner
{
display: none;
}
}
.slider .thumb
{
width: 12px;
height: 12px;
box-shadow: 0px 0px 0px transparent;
background-color: white;
margin-left: 2px;
backdrop-filter: invert( 1 );
}
.hue_slider .track
{
background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
}
.alpha_slider .track
{
background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
}
}
.colorproperty
{
align-items: center;
position: relative;
.colorsquare
{
width: 20px;
height: 20px;
border-radius: 4px;
margin-right: 8px;
position: absolute;
left: 7px;
z-index: 1;
cursor: pointer;
}
> .textentry:not( .a.b.c )
{
padding-left: 36px;
}
}
$primary: red !default;
$primary-alt: white !default;
$form-control-height: 24px !default;
.checkbox
{
cursor: pointer;
color: rgba( $primary-alt, 0.6 );
align-items: center;
label
{
pointer-events: none;
}
> .checkmark
{
padding: 1px;
font-size: 22px;
border: 3px solid $primary;
border-radius: 4px;
text-align: center;
justify-content: center;
align-items: center;
color: transparent;
min-height: $form-control-height;
margin-right: 10px;
pointer-events: none;
}
&.checked
{
> .checkmark
{
color: $primary-alt;
background-color: $primary;
}
}
&:active
{
color: $primary-alt;
}
&:hover
{
color: $primary-alt;
}
}
$popup-border-radius: 10px !default;
$primary: #e500ff !default;
$primary-fg: white !default;
.popup-panel
{
background-color: #2b303c;
background-image: linear-gradient( #2b303c, #1d2028 );
border-radius: $popup-border-radius;
box-shadow: 5px 5px 30px rgba( black, 0.8 );
flex-direction: column;
color: #cfdbf2;
transition: all 0.1s ease-out;
position: absolute;
z-index: 1000;
min-height: 10px;
min-width: 10px;
font-family: Poppins;
overflow: scroll;
pointer-events: all;
&.flat-top
{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
.button:nth-child(1)
{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
&.medium
{
max-width: 300px;
}
> .header
{
font-size: 16px;
font-weight: 600;
padding: 8px 12px;
align-items: center;
background-color: rgba( $primary, 0.4 );
border-radius: $popup-border-radius $popup-border-radius 0 0;
color: $primary-fg;
flex-shrink: 0;
.iconpanel
{
margin-right: 10px;
font-size: 18px;
color: $primary-fg;
}
}
&.center-horizontal
{
transform-origin: top center;
}
&.below-center
{
transform: translateX( -50% );
transform-origin: 50% 0%;
}
&.above-left
{
transform-origin: 0% 100%;
}
&.left
{
transform-origin: 100% 50%;
transform: translate( 00% -50% );
}
&:intro
{
transform: scale( 0 );
pointer-events: none;
opacity: 0;
}
&:outro
{
opacity: 0;
transition: all 0.1s ease-in;
margin-top: 50px;
pointer-events: none;
}
&.below-stretch
{
transform-origin: 0% 0%;
&:intro
{
transform: scaleY( 0.1 );
}
}
&.success:outro
{
opacity: 0;
transition: all 0.1s ease;
margin-top: 0px;
transform: scale( 0.7 );
&.center-horizontal
{
transform: scale( 1.4 ) translateX( -50% );
transform-origin: center;
}
}
> .arrow-top
{
//background-color: #454e60;
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: 50%;
//transform: rotate( 45deg );
z-index: -10;
}
> .canvas
{
flex-direction: column;
}
.information
{
padding: 16px;
font-size: 14px;
opacity: 0.5;
}
.button
{
background-color: transparent;
border-radius: 0;
font-size: 18px;
padding: 8px 12px;
padding-right: 24px;
min-height: 10px;
border: 0;
flex-shrink: 0;
gap: 16px;
&:nth-child( even )
{
background-color: rgba( black, 0.3 );
}
color: #cfdbf2;
font-weight: 400;
white-space: nowrap;
&:first-child
{
border-top-left-radius: $popup-border-radius;
border-top-right-radius: $popup-border-radius;
}
&:last-child
{
border-bottom-left-radius: $popup-border-radius;
border-bottom-right-radius: $popup-border-radius;
}
.iconpanel
{
color: $primary;
flex-grow: 0;
flex-shrink: 0;
}
.button-label
{
flex-grow: 1;
flex-shrink: 0;
}
.count
{
flex-grow: 0;
flex-shrink: 0;
margin-left:32px;
text-align: right;
}
&:hover, &.active
{
color: $primary-fg;
background-color: $primary;
&:nth-child( even )
{
background-color: rgba( $primary, 0.8 );
}
// Lol might be too much
// box-shadow: 0px 0px 100px rgba( $primary, 0.2 );
// text-shadow: 0px 0px 20px rgba( white, 0.2 );
.iconpanel
{
color: $primary-fg;
}
}
&:active
{
color: $primary-fg;
background-color: rgba( #a1b7e1, 0.3 );
.iconpanel
{
color: $primary-fg;
}
}
&.disabled
{
pointer-events: none;
opacity: 0.2;
}
}
}
.switchcontrol
{
flex-direction: row;
width: 100px;
min-height: 24px;
align-items: center;
cursor: pointer;
.switch-frame
{
flex-grow: 0;
flex-shrink: 1;
width: 48px;
height: 16px;
background-color: #fff1;
margin: 0px 5px;
align-items: center;
border-radius: 100px;
transition: all 0.4s linear;
.switch-inner
{
position: relative;
flex-grow: 0;
flex-shrink: 1;
background-color: #999;
width: 25px;
height: 25px;
border-radius: 100px;
left: 20%;
transform: translateX( -50% );
transition: all 0.3s ease-out;
}
}
&.active
{
.switch-frame
{
background-color: #fffa;
}
.switch-inner
{
left: 80%;
background-color: #fff;
}
}
}
NameTag {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
white-space: nowrap;
justify-content: center;
align-items: center;
font-weight: bold;
.card {
flex-direction: row;
background-color: #0004;
border-radius: 5px;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 16px;
.avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 100px;
}
.name {
font-family: Poppins;
color: #fff;
}
.voice {
background-color: #111a;
border-radius: 20px;
padding: 4px;
position: absolute;
top: -12px;
right: -12px;
font-family: "Material Icons";
font-size: 24px;
color: #aaa;
}
}
}
.tabcontainer
{
flex-grow: 1;
flex-direction: column;
> .tabs
{
flex-grow: 0;
flex-shrink: 0;
> .button
{
padding: 5px 10px;
border-radius: 4px 4px 0px 0px;
opacity: 0.2;
font-family: Roboto;
font-size: 13px;
background-color: #aaa;
.iconpanel
{
margin-right: 4px;
}
&:hover
{
opacity: 0.5;
}
&.active
{
opacity: 1;
}
}
}
> .sheets
{
border: 4px solid #aaa;
border-radius: 0px 2px 2px 2px;
flex-grow: 1;
flex-direction: column;
> :not( .active )
{
display: none;
}
}
&.tabs-bottom
{
flex-direction: column-reverse;
> .tabs
{
padding-left: 5px; // just to get out of the sheet border radius
}
> .tabs .button
{
border-radius: 0px 0px 4px 4px;
}
> .sheet
{
border-radius: 3px 3px 3px 0px;
}
}
&.tabs-left
{
flex-direction: row;
> .tabs
{
padding-top: 5px; // just to get out of the sheet border radius
flex-direction: column;
}
> .tabs .button
{
border-radius: 4px 0 0px 4px;
}
> .sheet
{
border-radius: 0px 3px 3px 3px;
}
}
}