summaryrefslogtreecommitdiffstats
path: root/assets/css
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-30 08:00:19 +0100
committerVolpeon <git@volpeon.ink>2021-12-30 08:00:19 +0100
commitfc7923a355394da3ff121193efe27814909aa766 (patch)
tree979b6d5e2153b8b7e53b875ce36d709aba768fc2 /assets/css
parentImproved lightbox (diff)
downloadvolpeon.ink-fc7923a355394da3ff121193efe27814909aa766.tar.gz
volpeon.ink-fc7923a355394da3ff121193efe27814909aa766.tar.bz2
volpeon.ink-fc7923a355394da3ff121193efe27814909aa766.zip
Fixed lightbox in light mode
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/components/_lightbox.scss30
-rw-r--r--assets/css/objects/_icon.scss2
2 files changed, 17 insertions, 15 deletions
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index d980c41..01c1219 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -5,8 +5,12 @@
5 --button: ( 5 --button: (
6 --idle: prop(--colors --fg-hi, $global: true), 6 --idle: prop(--colors --fg-hi, $global: true),
7 --hover: prop(--colors --fg-lo, $global: true), 7 --hover: prop(--colors --fg-lo, $global: true),
8 --bg: prop(--colors --bg-hi, $global: true),
8 ) 9 )
9 ) 10 ),
11 --dims: (
12 --pad: 1rem,
13 ),
10 )); 14 ));
11 15
12 @include component(namespace()) { 16 @include component(namespace()) {
@@ -48,7 +52,7 @@
48 flex: 0 0 auto; 52 flex: 0 0 auto;
49 align-items: center; 53 align-items: center;
50 width: 100%; 54 width: 100%;
51 padding: 0 1rem; 55 padding: 0 prop(--dims --pad);
52 } 56 }
53 57
54 @include element('img') { 58 @include element('img') {
@@ -73,17 +77,18 @@
73 } 77 }
74 78
75 @include element('close') { 79 @include element('close') {
76 margin: 0 -1rem 0 auto; 80 margin: 0 calc(-1 * #{prop(--dims --pad)}) 0 auto;
77 padding: 1rem; 81 padding: prop(--dims --pad);
78 font-size: 1.5em; 82 font-size: 1.5em;
79 } 83 }
80 84
81 @include element('prev', 'next') { 85 @include element('prev', 'next') {
82 position: absolute; 86 position: absolute;
83 top: 50%; 87 top: 50%;
84 padding: 2rem .5rem; 88 padding: 2rem .5rem;
85 transform: translate(0, -50%); 89 transform: translate(0, -50%);
86 font-size: 3em; 90 font-size: 3em;
91 --icon-stroke-width: .75px;
87 92
88 &::before { 93 &::before {
89 content: ''; 94 content: '';
@@ -95,11 +100,8 @@
95 width: 1.2em; 100 width: 1.2em;
96 height: 1.2em; 101 height: 1.2em;
97 transform: translate(-50%, -50%); 102 transform: translate(-50%, -50%);
98 background-color: rgba(#000, .25); 103 opacity: .25;
99 } 104 background-color: prop(--colors --button --bg);
100
101 > * {
102 stroke-width: .75px;
103 } 105 }
104 } 106 }
105 107
diff --git a/assets/css/objects/_icon.scss b/assets/css/objects/_icon.scss
index 7c5d03a..15389f5 100644
--- a/assets/css/objects/_icon.scss
+++ b/assets/css/objects/_icon.scss
@@ -9,7 +9,7 @@
9 display: block; 9 display: block;
10 width: 1em; 10 width: 1em;
11 height: 1em; 11 height: 1em;
12 stroke-width: 1.5px; 12 stroke-width: var(--icon-stroke-width, 1.5px);
13 stroke-linecap: round; 13 stroke-linecap: round;
14 stroke-linejoin: round; 14 stroke-linejoin: round;
15 15