studio-variable/index-main
4
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

style: reformat SCSS + add pointer-events: none on dimmed header elements

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-02-27 12:03:15 +01:00
parent 03032dcda8
commit e8bd478338
4 changed files with 270 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

202
assets/css/components/_bottom-bar.scss
View file

@ -1,122 +1,112 @@
#bottom-bar{
position: fixed;
#bottom-bar {
position: fixed;
left: 0;
bottom: calc(var(--header-h) * -0.75);
&.is-visible {
bottom: 0px;
}
z-index: calc(var(--z-header) - 10);
height: calc(var(--header-h) * 0.75);
width: 100vw;
background-color: var(--color-bg);
padding-left: var(--padding-body);
padding-right: var(--padding-body);
transition: bottom var(--transition-scroll);
.progress-container {
position: absolute;
top: 0;
left: 0;
bottom: calc(var(--header-h)*-0.75);
&.is-visible{
bottom: 0px;
}
z-index: calc(var(--z-header) - 10);
height: calc(var(--header-h)*0.75);
height: 2px;
width: 100vw;
background-color: var(--color-bg);
background-color: var(--grey-800);
padding-left: var(--padding-body);
padding-right: var(--padding-body);
.progress-bar {
height: 2px;
background-color: var(--color-txt);
width: 40%;
}
}
transition: bottom var(--transition-scroll);
.bottom-bar__inner {
height: calc(var(--header-h) * 0.75);
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--padding-inner);
}
.btn--back-to-top {
@include icon(20px);
position: relative;
top: -3px;
width: 100px;
.progress-container{
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 100vw;
background-color: var(--grey-800);
.progress-bar{
height: 2px;
background-color: var(--color-txt);
width: 40%;
}
a {
justify-content: flex-end;
}
.bottom-bar__inner{
height: calc(var(--header-h)*0.75);
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--padding-inner);
.icon {
transform: rotate(-90deg);
transform-origin: center;
svg {
fill: var(--color-txt);
}
}
}
.title-group {
font-size: var(--fs-small);
display: flex;
color: var(--color-txt-light);
flex-grow: 1;
width: 100%;
padding-top: 5px;
min-width: 0;
.title-type {
text-transform: uppercase;
&::after {
content: "/";
padding-left: 1ch;
padding-right: 1ch;
}
}
.btn--back-to-top{
@include icon(20px);
position: relative;
top: -3px;
width: 100px;
a{
justify-content: flex-end;
}
.title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.icon{
transform: rotate(-90deg);
transform-origin: center;
svg{
fill: var(--color-txt);
}
}
@media #{$small} {
// display: flex;
// align-items: center;
// justify-content: center;
.bottom-bar__inner {
height: calc(var(--header-h) * 0.75);
justify-content: center;
align-items: center;
}
.title-group{
font-size: var(--fs-small);
display: flex;
color: var(--color-txt-light);
flex-grow: 1;
width: 100%;
padding-top: 5px;
min-width: 0;
.title-type{
text-transform: uppercase;
&::after{
content: "/";
padding-left: 1ch;
padding-right: 1ch;
}
}
.title{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn--download,
.btn--back-to-top {
display: none;
}
}
@media #{$small} {
// display: flex;
// align-items: center;
// justify-content: center;
.bottom-bar__inner{
height: calc(var(--header-h)*0.75);
justify-content: center;
align-items: center;
}
.btn--download, .btn--back-to-top{ display: none; }
@media #{$x-small} {
display: flex;
align-items: center;
justify-content: center;
.title-group {
display: none;
}
@media #{$x-small} {
display: flex;
align-items: center;
justify-content: center;
.title-group{
display: none;
}
}
}
}
}