tec
/
this-month-in-org
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Change image-slider to scss too

This commit is contained in:
TEC 2021-12-02 15:07:27 +08:00
parent 70c372b172
commit c3de374aba
Signed by: tec
GPG Key ID: 779591AFDB81F06C
2 changed files with 38 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/img-slider.css
View File

@ -1,38 +0,0 @@
div.image-slider {
position:relative;
display: inline-block;
line-height: 0;
margin: 16px 0;
filter: invert(1%) sepia(4%);
}
#theme-switch:checked ~ #page div.image-slider.invertible {
filter: invert(90%) hue-rotate(180deg) sepia(1%)
}
div.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width:50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
border-right: 1px solid #9993;
}
div.image-slider > div:active {
width:25px;
}
div.image-slider > div:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 13px; height: 13px;
background: linear-gradient(-45deg, #aaaa 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
div.image-slider img {
user-select: none;
max-width: min(640px, 75vw);
filter: none;
}

38
assets/img-slider.scss Normal file
View File

@ -0,0 +1,38 @@
div.image-slider {
position:relative;
display: inline-block;
line-height: 0;
margin: 16px 0;
filter: invert(1%) sepia(4%);
& > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width:50%;
max-width: 100%;
overflow: hidden;
resize: horizontal;
border-right: 1px solid #9993;
&:active {
width:25px;
}
&:before {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 13px; height: 13px;
background: linear-gradient(-45deg, #aaaa 50%, transparent 0);
background-clip: content-box;
cursor: ew-resize;
-webkit-filter: drop-shadow(0 0 2px black);
filter: drop-shadow(0 0 2px black);
}
}
& img {
user-select: none;
max-width: min(640px, 75vw);
filter: none;
}
}
#theme-switch:checked ~ #page div.image-slider.invertible {
filter: invert(90%) hue-rotate(180deg) sepia(1%)
}