115 lines
2.9 KiB
SCSS
115 lines
2.9 KiB
SCSS
@use "../../abstracts/variables" as *;
|
|
@use "../../abstracts/mixins" as *;
|
|
|
|
.simulation-player-wrapper {
|
|
position: fixed;
|
|
bottom: 32px;
|
|
left: 50%;
|
|
z-index: 2;
|
|
transform: translate(-50%, 0);
|
|
.simulation-player-container {
|
|
.controls-container {
|
|
@include flex-center;
|
|
gap: 12px;
|
|
margin-bottom: 4px;
|
|
.simulation-button-container {
|
|
@include flex-center;
|
|
gap: 2px;
|
|
padding: 6px 8px;
|
|
min-width: 64px;
|
|
background-color: var(--background-color);
|
|
border-radius: #{$border-radius-small};
|
|
cursor: pointer;
|
|
&:hover {
|
|
background-color: var(--highlight-accent-color);
|
|
color: var(--accent-color);
|
|
path {
|
|
stroke: var(--accent-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.speed-control-container {
|
|
@include flex-center;
|
|
gap: 18px;
|
|
padding: 5px 16px;
|
|
background: var(--background-color);
|
|
border-radius: #{$border-radius-medium};
|
|
box-sizing: #{$box-shadow-medium};
|
|
.min-value,
|
|
.max-value {
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
.slider-container {
|
|
width: 580px;
|
|
max-width: 80vw;
|
|
height: 28px;
|
|
background: var(--background-color-gray);
|
|
border-radius: #{$border-radius-small};
|
|
position: relative;
|
|
padding: 4px 26px;
|
|
.custom-slider {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
.slider-input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
z-index: 3;
|
|
cursor: pointer;
|
|
}
|
|
.slider-handle {
|
|
position: absolute;
|
|
width: 42px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
background: var(--accent-color);
|
|
color: var(--primary-color);
|
|
border-radius: #{$border-radius-small};
|
|
transform: translateX(-50%);
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.marker{
|
|
position: absolute;
|
|
background-color: var(--text-disabled);
|
|
width: 2px;
|
|
height: 12px;
|
|
border-radius: 1px;
|
|
top: 8px;
|
|
}
|
|
.marker.marker-10{
|
|
left: 10%;
|
|
}
|
|
.marker.marker-20{
|
|
left: 20%;
|
|
}
|
|
.marker.marker-30{
|
|
left: 30%;
|
|
}
|
|
.marker.marker-40{
|
|
left: 40%;
|
|
}
|
|
.marker.marker-50{
|
|
left: 50%;
|
|
}
|
|
.marker.marker-60{
|
|
left: 60%;
|
|
}
|
|
.marker.marker-70{
|
|
left: 70%;
|
|
}
|
|
.marker.marker-80{
|
|
left: 80%;
|
|
}
|
|
.marker.marker-90{
|
|
left: 90%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|