franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Replace lightbox icons

Browse Source
This commit is contained in:
Franzz
2026-04-26 23:21:09 +02:00
parent f2af936e60
commit 844c9c0a53
4 changed files with 32 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/styles/_lightbox.scss
View File

@@ -1,28 +1,6 @@
@use "common";
@use "color";
@mixin lightbox-icon($icon) {
background: none;
font-size: 2em;
display: inline-block;
line-height: 1;
&:before {
@if $icon == prev {
content: "‹";
}
@else if $icon == next {
content: "›";
}
@else if $icon == close {
content: "×";
}
@else if $icon == cancel {
content: "□";
}
}
}
body.lb-disable-scrolling {
overflow: hidden;
}
@@ -102,9 +80,9 @@ body.lb-disable-scrolling {
line-height: 1.33333333em;
&.comment {
.spot-icon {
vertical-align: center;
}
.spot-icon {
vertical-align: center;
}
.comment-text {
display: inline-block;
width: calc(100% - 1.25em*1.33333333333 - 0.5rem);
@@ -201,8 +179,7 @@ body.lb-disable-scrolling {
cursor: pointer;
color: color.$over-img;
text-decoration: none;
text-align: center;
text-shadow: 0px 1px 1px color.$over-img-shadow;
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
width: 150px;
height: 150px;
position: absolute;
@@ -211,25 +188,26 @@ body.lb-disable-scrolling {
transition: opacity 0.3s, color 0.3s;
opacity: 0;
outline: none;
&:before {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
font-size: 2em;
&:hover {
color: color.$over-img-hover;
}
.spot-icon {
vertical-align: inherit;
top: 50%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
}
}
a.lb-prev {
@include lightbox-icon(prev);
left: 0;
}
a.lb-next {
@include lightbox-icon(next);
right: 0;
}
}
@@ -244,8 +222,8 @@ body.lb-disable-scrolling {
line-height: 0;
.lb-cancel {
@include lightbox-icon(cancel);
@extend .flicker;
font-size: 2em;
color: color.$default;
text-decoration: none;
}
@@ -275,13 +253,13 @@ body.lb-disable-scrolling {
}
.lb-closeContainer .lb-close {
@include lightbox-icon(close);
@extend .clickable;
height: auto;
font-size: 1.3333333333em;
line-height: 1em;
text-align: center;
width: 1.25em;
color: color.$default-inv;
&:hover {
color: color.$default-inv-hover;