asteroid/bibi/resources/styles/_nombre.scss
2023-12-27 22:39:56 -08:00

77 lines
No EOL
2.6 KiB
SCSS

// ================================================================================
// + Nombre
// --------------------------------------------------------------------------------
div#bibi-nombre {
& {
display: none;
pointer-events: none;
box-sizing: border-box;
overflow: hidden;
position: absolute;
z-index: $INVARIABLE__Nombre_ZIndex;
margin: auto;
// @____Bibi:Dress__('-') border-radius: $Nombre_Height * 0.5;
// @____Bibi:Dress__('-') @include size($Nombre_Width, $Nombre_Height);
// @____Bibi:Dress__('-') line-height: $Nombre_Height;
font-size: 10px;
text-align: center;
// @____Bibi:Dress__('-') background: $Nombre_BackgroundColor;
// @____Bibi:Dress__('-') html.slider-opened & { background: $Nombre_BackgroundColor__SliderOpened; }
opacity: 0;
transition: .125s ease-out;
}
html.busy & { display: none !important; }
&.active { display: block; }
&.hot { opacity: 1; }
html.view-paged &,
html.view-horizontal & {
top: auto;
right: -100%;
left: -100%;
}
html.view-paged & {
bottom: 2px;
}
html.view-horizontal & {
bottom: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Height + 2) + "px"
}
html.view-vertical & {
top: -100%;
right: $TEMPORARY__Scrollbar-Track_Size + 2px; // TO BE OVERWRITTEN ... (O.ScrollBars.Width + 2) + "px"
bottom: -100%;
left: auto;
// @____Bibi:Dress__('-') transform: rotate(90deg) translateY(($Nombre_Width - $Nombre_Height) * -0.5);
}
// @____Bibi:Dress__('-') html.slider-opened.appearance-horizontal & { bottom: $Slider_PaddingEnd__SliderOpened !important; }
// @____Bibi:Dress__('-') html.slider-opened.appearance-vertical & { right: $Slider_PaddingEnd__SliderOpened !important; }
span {
& {
display: inline-block;
}
&.bibi-nombre-current {
font-size: 1.2em;
font-weight: bold;
// @____Bibi:Dress__('-') color: $Nombre-Current_Color;
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Current_Color__SliderOpened; }
}
&.bibi-nombre-delimiter {
margin: 0 0.1em 0 0.2em;
// @____Bibi:Dress__('-') color: $Nombre-Delimiter_Color;
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Delimiter_Color__SliderOpened; }
}
&.bibi-nombre-total {
// @____Bibi:Dress__('-') color: $Nombre-Total_Color;
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Total_Color__SliderOpened; }
}
&.bibi-nombre-percent {
margin-left: .25em;
// @____Bibi:Dress__('-') color: $Nombre-Percent_Color;
// @____Bibi:Dress__('-') html.slider-opened & { color: $Nombre-Percent_Color__SliderOpened; }
span.unit {
margin-left: .125em;
font-size: .75em;
}
}
}
}