demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

edit wip

Browse source
This commit is contained in:
Robin Appelman 2023-11-24 22:42:25 +01:00
commit 189788a1b6
14 changed files with 599 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

113
style/pages/edit/multislider.css Normal file
View file

@ -0,0 +1,113 @@
.container {
padding-top: 30px;
display: flex;
height: 35px;
}
.slider {
position: relative;
width: 400px;
}
.slider__track,
.slider__range,
.slider__left-value,
.slider__right-value,
.slider__left-input,
.slider__right-input {
position: absolute;
}
.slider__track,
.slider__range {
border-radius: 3px;
height: 5px;
}
.slider__track {
background-color: #ced4da;
width: 100%;
z-index: 1;
}
.slider__range {
background-color: #9fe5e1;
z-index: 2;
}
.slider__left-value,
.slider__right-value {
font-size: 12px;
margin-top: 20px;
}
.slider__left-input,
.slider__right-input {
font-size: 12px;
margin-top: -36px;
}
.slider__left-input input,
.slider__right-input input {
width: 80px;
}
.slider__left-value, .slider__left-input {
left: 6px;
}
.slider__right-value, .slider__right-input {
right: -4px;
}
/* Removing the default appearance */
.thumb,
.thumb::-webkit-slider-thumb {
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.thumb {
pointer-events: none;
position: absolute;
height: 0;
width: 400px;
outline: none;
}
.thumb--left {
z-index: 3;
}
.thumb--right {
z-index: 4;
}
/* For Chrome browsers */
.thumb::-webkit-slider-thumb {
background-color: #f1f5f7;
border: none;
border-radius: 50%;
box-shadow: 0 0 1px 1px #ced4da;
cursor: pointer;
height: 18px;
width: 18px;
margin-top: 4px;
pointer-events: all;
position: relative;
}
/* For Firefox browsers */
.thumb::-moz-range-thumb {
background-color: #f1f5f7;
border: none;
border-radius: 50%;
box-shadow: 0 0 1px 1px #ced4da;
cursor: pointer;
height: 18px;
width: 18px;
margin-top: 4px;
pointer-events: all;
position: relative;
}

5
style/pages/editor.css Normal file
View file

@ -0,0 +1,5 @@
@import 'edit/multislider.css';
.edit-page .edit-disabled {
opacity: 0.5;
}