Search the source of every open source package.
23 results
.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;
}
}
$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;
}
}
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;
}
}
}
.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;
}
}
$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;
}
}
}