summaryrefslogtreecommitdiffstats
path: root/assets/css/components
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css/components')
-rw-r--r--assets/css/components/_lightbox.scss45
1 files changed, 33 insertions, 12 deletions
diff --git a/assets/css/components/_lightbox.scss b/assets/css/components/_lightbox.scss
index b23943a..d980c41 100644
--- a/assets/css/components/_lightbox.scss
+++ b/assets/css/components/_lightbox.scss
@@ -6,9 +6,6 @@
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 ) 8 )
9 ),
10 --dims: (
11 --col-width: 17em
12 ) 9 )
13 )); 10 ));
14 11
@@ -20,11 +17,11 @@
20 top: 0; 17 top: 0;
21 left: 0; 18 left: 0;
22 box-sizing: border-box; 19 box-sizing: border-box;
20 flex-direction: column;
23 align-items: center; 21 align-items: center;
24 justify-content: center; 22 justify-content: center;
25 width: 100%; 23 width: 100%;
26 height: 100%; 24 height: 100%;
27 padding: 1em calc(3em + 1rem);
28 transition: opacity .2s, visibility .2s; 25 transition: opacity .2s, visibility .2s;
29 opacity: 0; 26 opacity: 0;
30 27
@@ -45,9 +42,22 @@
45 opacity: 1; 42 opacity: 1;
46 } 43 }
47 44
45 @include element('infobar') {
46 display: flex;
47 box-sizing: border-box;
48 flex: 0 0 auto;
49 align-items: center;
50 width: 100%;
51 padding: 0 1rem;
52 }
53
48 @include element('img') { 54 @include element('img') {
49 max-width: 100%; 55 max-width: 100%;
50 max-height: 100%; 56 min-height: 0;
57 max-height: 100%;
58 margin-top: auto;
59 margin-bottom: auto;
60 padding-bottom: 2rem;
51 } 61 }
52 62
53 @include element('close', 'prev', 'next') { 63 @include element('close', 'prev', 'next') {
@@ -63,20 +73,31 @@
63 } 73 }
64 74
65 @include element('close') { 75 @include element('close') {
66 position: absolute; 76 margin: 0 -1rem 0 auto;
67 top: 0; 77 padding: 1rem;
68 right: 0; 78 font-size: 1.5em;
69 padding: 1rem;
70 font-size: 1.5em;
71 } 79 }
72 80
73 @include element('prev', 'next') { 81 @include element('prev', 'next') {
74 position: absolute; 82 position: absolute;
75 top: 50%; 83 top: 50%;
76 padding: .5rem; 84 padding: 2rem .5rem;
77 transform: translate(0, -50%); 85 transform: translate(0, -50%);
78 font-size: 3em; 86 font-size: 3em;
79 87
88 &::before {
89 content: '';
90 display: block;
91 position: absolute;
92 z-index: -1;
93 top: 50%;
94 left: 50%;
95 width: 1.2em;
96 height: 1.2em;
97 transform: translate(-50%, -50%);
98 background-color: rgba(#000, .25);
99 }
100
80 > * { 101 > * {
81 stroke-width: .75px; 102 stroke-width: .75px;
82 } 103 }