-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathday-26.css
More file actions
164 lines (146 loc) · 6.47 KB
/
day-26.css
File metadata and controls
164 lines (146 loc) · 6.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
.input { display: none; }
.gallery { display: flex; flex-wrap: wrap; padding: 4px 0 0 4px; }
.gallery-item {
align-items: center;
cursor: pointer;
display: flex;
height: 140px;
justify-content: center;
overflow: hidden;
position: relative;
width: 25%;
}
.gallery-item:hover { opacity: 0.8; }
.gallery-item-image { width: 100%; }
#close:checked ~ .main .lightbox { background-color: transparent; pointer-events: none; }
#close:checked ~ .main .lightbox-content { opacity: 0; transform: scale(0.7); }
#close:checked ~ .main .overlay { display: none; }
.lightbox {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
pointer-events: auto;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.overlay {
cursor: pointer;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.lightbox-content {
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12);
display: flex;
-webkit-box-orient: vertical;
flex-direction: column;
max-width: 80%;
opacity: 1;
padding: 24px;
position: relative;
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s;
width: -48.45360825vh;
width: calc((80vh - 4 * 24px) / 1 + 2 * 24px);
}
.lightbox-close { cursor: pointer; font-size: 1rem; position: absolute; top: 5px; right: 10px; }
.lightbox-photo {
height: 0;
overflow: hidden;
padding-bottom: 100%;
position: relative;
transition: padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-photo-image { max-width: 100%; }
.lightbox-photo-label { align-items: center; display: flex; flex-direction: row; justify-content: center; }
.lightbox-photo-label:after { position: absolute; text-align: center; width: 100%; z-index: 2; }
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-8"] { position: absolute; top: 0; z-index: 2; }
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"] {
align-items: center;
background: rgba(0, 0, 0, 0.54);
color: #fff;
cursor: pointer;
display: flex;
font-size: 2rem;
justify-content: center;
opacity: 0;
position: absolute;
top: 0;
bottom: 0;
text-align: center;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
width: 20%;
z-index: 9;
}
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"]:hover,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"]:hover,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"]:hover,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"]:hover,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"]:hover,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"]:hover,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"]:hover,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"]:hover,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"]:hover,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"]:hover,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"]:hover,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"]:hover,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"]:hover,
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"]:hover { opacity: 1; }
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"] { left: -24px; }
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-1"]:after,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-2"]:after,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-3"]:after,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-4"]:after,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-5"]:after,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-6"]:after,
#photo-8:checked ~ .main .lightbox-photo-label[for="photo-7"]:after { content: '<'; }
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"],
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"],
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"],
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"],
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"],
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"],
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"] { right: -24px; }
#photo-1:checked ~ .main .lightbox-photo-label[for="photo-2"]:after,
#photo-2:checked ~ .main .lightbox-photo-label[for="photo-3"]:after,
#photo-3:checked ~ .main .lightbox-photo-label[for="photo-4"]:after,
#photo-4:checked ~ .main .lightbox-photo-label[for="photo-5"]:after,
#photo-5:checked ~ .main .lightbox-photo-label[for="photo-6"]:after,
#photo-6:checked ~ .main .lightbox-photo-label[for="photo-7"]:after,
#photo-7:checked ~ .main .lightbox-photo-label[for="photo-8"]:after { content: '>'; }