122 lines
2.3 KiB
SCSS
122 lines
2.3 KiB
SCSS
|
@use 'globals';
|
||
|
|
|
||
|
|
$background-color: #fff;
|
||
|
|
$tab-button-color-active: #0001;
|
||
|
|
|
||
|
|
.container-positioner {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 2rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: flex-end;
|
||
|
|
overflow: visible;
|
||
|
|
width: 100%;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: max-content max-content 1rem max-content;
|
||
|
|
filter: drop-shadow(globals.$popover-shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-box {
|
||
|
|
@include globals.rounded;
|
||
|
|
height: 3rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
list-style-type: none;
|
||
|
|
padding: 0.5rem;
|
||
|
|
margin: 0;
|
||
|
|
border: globals.$popover-border;
|
||
|
|
border-right: none;
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
background: $background-color;
|
||
|
|
grid-row: 2;
|
||
|
|
|
||
|
|
&__button {
|
||
|
|
@include globals.reset-button;
|
||
|
|
@include globals.rounded-sm;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0.25rem 0.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
height: 2rem;
|
||
|
|
|
||
|
|
&--active {
|
||
|
|
background: $tab-button-color-active;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-bar {
|
||
|
|
@include globals.rounded;
|
||
|
|
height: 3rem;
|
||
|
|
flex-shrink: 0;
|
||
|
|
border: globals.$popover-border;
|
||
|
|
border-top-left-radius: 0;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
width: 40rem;
|
||
|
|
grid-row: 2;
|
||
|
|
background: $background-color;
|
||
|
|
|
||
|
|
&--open {
|
||
|
|
border-top-right-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-buttons {
|
||
|
|
height: 3rem;
|
||
|
|
gird-row: 2;
|
||
|
|
grid-column: 4;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-panel-positioner {
|
||
|
|
grid-template-columns: subgrid;
|
||
|
|
grid-column: 2;
|
||
|
|
grid-row: 1;
|
||
|
|
position: relative;
|
||
|
|
overflow: visible;
|
||
|
|
/* Flexbox positioning is required for Safari */
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
anchor-name: --control-bar;
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-panel__container:popover-open {
|
||
|
|
@include globals.rounded;
|
||
|
|
inset: unset;
|
||
|
|
border: globals.$popover-border;
|
||
|
|
border-bottom: none;
|
||
|
|
border-bottom-left-radius: 0;
|
||
|
|
border-bottom-right-radius: 0;
|
||
|
|
margin: 0;
|
||
|
|
position: fixed;
|
||
|
|
display: block;
|
||
|
|
width: 40rem;
|
||
|
|
/* Anchor positioning is required for Chromium */
|
||
|
|
position-anchor: --control-bar;
|
||
|
|
position-area: top;
|
||
|
|
padding: 0;
|
||
|
|
background: $background-color;
|
||
|
|
box-shadow: globals.$popover-shadow;
|
||
|
|
/* Clip drop shadow */
|
||
|
|
clip-path: polygon(
|
||
|
|
-100% -100%,
|
||
|
|
200% -100%,
|
||
|
|
200% 200%,
|
||
|
|
100% 200%,
|
||
|
|
100% 100%,
|
||
|
|
-100% 100%
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
.control-panel {
|
||
|
|
padding: 0.5rem;
|
||
|
|
overflow: auto;
|
||
|
|
max-height: 8rem;
|
||
|
|
}
|