diff options
Diffstat (limited to 'src/css')
-rw-r--r-- | src/css/dumbymap.css | 60 | ||||
-rw-r--r-- | src/css/index.css | 62 |
2 files changed, 62 insertions, 60 deletions
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index cc161fa..f13119a 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css | |||
@@ -166,58 +166,6 @@ root { | |||
166 | } | 166 | } |
167 | } | 167 | } |
168 | 168 | ||
169 | .DumbyMap.Dumby[data-layout] .dumby-block { | ||
170 | padding: 1rem 1rem 1rem 2rem; | ||
171 | |||
172 | position: relative; | ||
173 | |||
174 | counter-increment: block; | ||
175 | |||
176 | &::before { | ||
177 | content: ''; | ||
178 | height: calc(100% - 2rem); | ||
179 | |||
180 | position: absolute; | ||
181 | left: 0.8rem; | ||
182 | |||
183 | border-left: 0.5em solid #e0e0e0; | ||
184 | |||
185 | transition: border-color 0.5s linear; | ||
186 | } | ||
187 | |||
188 | &.focus { | ||
189 | /* Dress up when block is focus */ | ||
190 | |||
191 | /* background: var(--block-focus-color); */ | ||
192 | &::before { | ||
193 | border-color: chocolate; | ||
194 | } | ||
195 | |||
196 | &::after { | ||
197 | content: counter(block) '/' attr(data-total); | ||
198 | padding: 0.3rem 0.5rem; | ||
199 | |||
200 | position: absolute; | ||
201 | left: 50%; | ||
202 | top: 50%; | ||
203 | z-index: 9999; | ||
204 | |||
205 | border: solid transparent; | ||
206 | border-radius: 5px; | ||
207 | |||
208 | background: gray; | ||
209 | |||
210 | color: white; | ||
211 | font-size: 1.5em; | ||
212 | font-weight: bold; | ||
213 | |||
214 | transform: translate(-50%, -50%); | ||
215 | opacity: 0; | ||
216 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); | ||
217 | } | ||
218 | } | ||
219 | |||
220 | } | ||
221 | 169 | ||
222 | .menu { | 170 | .menu { |
223 | display: block; | 171 | display: block; |
@@ -495,14 +443,6 @@ root { | |||
495 | } | 443 | } |
496 | } | 444 | } |
497 | 445 | ||
498 | .DumbyMap.Dumby[data-layout='normal'] { | ||
499 | max-width: 60em; | ||
500 | |||
501 | &::after { | ||
502 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); | ||
503 | } | ||
504 | } | ||
505 | |||
506 | .Dumby[data-layout='side-by-side'] { | 446 | .Dumby[data-layout='side-by-side'] { |
507 | &::after { | 447 | &::after { |
508 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); | 448 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); |
diff --git a/src/css/index.css b/src/css/index.css index 7ae5906..badec7e 100644 --- a/src/css/index.css +++ b/src/css/index.css | |||
@@ -178,3 +178,65 @@ main[data-mode='editing'] { | |||
178 | } | 178 | } |
179 | } | 179 | } |
180 | } | 180 | } |
181 | |||
182 | .Dumby[data-layout] .dumby-block { | ||
183 | padding: 1rem 1rem 1rem 2rem; | ||
184 | |||
185 | position: relative; | ||
186 | |||
187 | counter-increment: block; | ||
188 | |||
189 | &::before { | ||
190 | content: ''; | ||
191 | height: calc(100% - 2rem); | ||
192 | |||
193 | position: absolute; | ||
194 | left: 0.8rem; | ||
195 | |||
196 | border-left: 0.5em solid #e0e0e0; | ||
197 | |||
198 | transition: border-color 0.5s linear; | ||
199 | } | ||
200 | |||
201 | &.focus { | ||
202 | /* Dress up when block is focus */ | ||
203 | |||
204 | /* background: var(--block-focus-color); */ | ||
205 | &::before { | ||
206 | border-color: chocolate; | ||
207 | } | ||
208 | |||
209 | &::after { | ||
210 | content: counter(block) '/' attr(data-total); | ||
211 | padding: 0.3rem 0.5rem; | ||
212 | |||
213 | position: absolute; | ||
214 | left: 50%; | ||
215 | top: 50%; | ||
216 | z-index: 9999; | ||
217 | |||
218 | border: solid transparent; | ||
219 | border-radius: 5px; | ||
220 | |||
221 | background: gray; | ||
222 | |||
223 | color: white; | ||
224 | font-size: 1.5em; | ||
225 | font-weight: bold; | ||
226 | |||
227 | transform: translate(-50%, -50%); | ||
228 | opacity: 0; | ||
229 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); | ||
230 | } | ||
231 | } | ||
232 | |||
233 | } | ||
234 | |||
235 | .Dumby[data-layout='normal'] { | ||
236 | max-width: 60em; | ||
237 | |||
238 | &::after { | ||
239 | animation: 1.5s forwards fade-out cubic-bezier(0.44, 0.18, 0.86, -0.21); | ||
240 | } | ||
241 | } | ||
242 | |||