diff options
author | Thomas Citharel <tcit@tcit.fr> | 2017-05-04 17:44:42 +0200 |
---|---|---|
committer | Thomas Citharel <tcit@tcit.fr> | 2017-05-04 17:44:42 +0200 |
commit | 2003ffa97e98d35130c93d158c453ce9b926b838 (patch) | |
tree | 6545ea0372db17f4bded869f5678e03eae0bc711 /app/Resources/static/themes/material | |
parent | 18e1da6277c4a5759384cfa66e0cd00afd7ce763 (diff) | |
download | wallabag-2003ffa97e98d35130c93d158c453ce9b926b838.tar.gz wallabag-2003ffa97e98d35130c93d158c453ce9b926b838.tar.zst wallabag-2003ffa97e98d35130c93d158c453ce9b926b838.zip |
Fix according to review
Diffstat (limited to 'app/Resources/static/themes/material')
5 files changed, 39 insertions, 1052 deletions
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss index 7d0bdac7..dc12f857 100644 --- a/app/Resources/static/themes/material/css/article.scss +++ b/app/Resources/static/themes/material/css/article.scss | |||
@@ -106,11 +106,11 @@ | |||
106 | font-size: 0.8em; | 106 | font-size: 0.8em; |
107 | display: flex; | 107 | display: flex; |
108 | flex-flow: row wrap; | 108 | flex-flow: row wrap; |
109 | margin: 0 auto; | ||
110 | 109 | ||
111 | li { | 110 | li { |
112 | display: inline-flex; | 111 | display: inline-flex; |
113 | vertical-align: middle; | 112 | vertical-align: middle; |
113 | margin: 0 5px; | ||
114 | } | 114 | } |
115 | 115 | ||
116 | a { | 116 | a { |
@@ -121,7 +121,7 @@ | |||
121 | 121 | ||
122 | #list { | 122 | #list { |
123 | float: right; | 123 | float: right; |
124 | margin: 0 15px 10px; | 124 | margin: -5px 15px auto; |
125 | } | 125 | } |
126 | 126 | ||
127 | .chip { | 127 | .chip { |
@@ -133,12 +133,19 @@ | |||
133 | i { | 133 | i { |
134 | color: #fff; | 134 | color: #fff; |
135 | } | 135 | } |
136 | |||
137 | i.material-icons { | ||
138 | float: right; | ||
139 | font-size: 20px; | ||
140 | line-height: 32px; | ||
141 | padding-left: 8px; | ||
142 | } | ||
136 | } | 143 | } |
137 | } | 144 | } |
138 | } | 145 | } |
139 | 146 | ||
140 | .reader-mode { | 147 | .reader-mode { |
141 | width: 95px !important; | 148 | width: 70px !important; |
142 | transition: width 0.2s ease; | 149 | transition: width 0.2s ease; |
143 | 150 | ||
144 | .collapsible-body { | 151 | .collapsible-body { |
@@ -150,17 +157,21 @@ | |||
150 | opacity: 0; | 157 | opacity: 0; |
151 | transition: opacity 0.2s ease; | 158 | transition: opacity 0.2s ease; |
152 | } | 159 | } |
153 | } | ||
154 | 160 | ||
155 | .reader-mode:hover { | 161 | &:hover { |
156 | width: 240px !important; | 162 | width: 260px !important; |
157 | 163 | ||
158 | .collapsible-body { | 164 | .collapsible-body { |
159 | height: auto; | 165 | height: auto; |
160 | } | ||
161 | 166 | ||
162 | span { | 167 | li a i.material-icons { |
163 | opacity: 1; | 168 | margin: auto 5px auto 0; |
169 | } | ||
170 | } | ||
171 | |||
172 | span { | ||
173 | opacity: 1; | ||
174 | } | ||
164 | } | 175 | } |
165 | } | 176 | } |
166 | 177 | ||
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 18ef6e60..2fa6535a 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -114,20 +114,6 @@ main { | |||
114 | } | 114 | } |
115 | } | 115 | } |
116 | 116 | ||
117 | .card-entry-labels li, | ||
118 | .card-tag-labels li { | ||
119 | margin: 10px 10px 10px auto; | ||
120 | padding: 5px 12px 5px 16px !important; | ||
121 | background-color: $blueAccentColor; | ||
122 | border-radius: 0 3px 3px 0; | ||
123 | color: #fff; | ||
124 | cursor: default; | ||
125 | max-height: 2em; | ||
126 | overflow: hidden; | ||
127 | text-overflow: ellipsis; | ||
128 | white-space: nowrap; | ||
129 | } | ||
130 | |||
131 | .card-image { | 117 | .card-image { |
132 | height: 10em; | 118 | height: 10em; |
133 | } | 119 | } |
@@ -156,6 +142,20 @@ a.original { | |||
156 | display: block; | 142 | display: block; |
157 | } | 143 | } |
158 | 144 | ||
145 | .card-entry-labels li, | ||
146 | .card-tag-labels li { | ||
147 | margin: 10px 10px 10px auto; | ||
148 | padding: 5px 12px 5px 16px !important; | ||
149 | background-color: $blueAccentColor; | ||
150 | border-radius: 0 3px 3px 0; | ||
151 | color: #fff; | ||
152 | cursor: default; | ||
153 | max-height: 2em; | ||
154 | overflow: hidden; | ||
155 | text-overflow: ellipsis; | ||
156 | white-space: nowrap; | ||
157 | } | ||
158 | |||
159 | .card-entry-tags a, | 159 | .card-entry-tags a, |
160 | .card-entry-labels a, | 160 | .card-entry-labels a, |
161 | .card-tag-labels a, | 161 | .card-tag-labels a, |
diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss index 268e6dca..1eeab902 100644 --- a/app/Resources/static/themes/material/css/icons.scss +++ b/app/Resources/static/themes/material/css/icons.scss | |||
@@ -111,7 +111,7 @@ | |||
111 | a.icon-image { | 111 | a.icon-image { |
112 | background-repeat: no-repeat; | 112 | background-repeat: no-repeat; |
113 | padding-right: 0.4em !important; | 113 | padding-right: 0.4em !important; |
114 | padding-left: 1em !important; | 114 | padding-left: 0 !important; |
115 | margin-left: 25px; | 115 | margin-left: 25px; |
116 | 116 | ||
117 | &::before { | 117 | &::before { |
@@ -120,7 +120,7 @@ a.icon-image { | |||
120 | width: 24px; | 120 | width: 24px; |
121 | height: 24px; | 121 | height: 24px; |
122 | float: left; | 122 | float: left; |
123 | margin: 0 6px 0 0; | 123 | margin: 7px 1.5px 0 0; |
124 | } | 124 | } |
125 | 125 | ||
126 | &.carrot::before { | 126 | &.carrot::before { |
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css deleted file mode 100755 index 45428e23..00000000 --- a/app/Resources/static/themes/material/css/main.css +++ /dev/null | |||
@@ -1,1024 +0,0 @@ | |||
1 | /* ========================================================================== | ||
2 | Sommaire | ||
3 | |||
4 | 0 = Common | ||
5 | 1 = Nav | ||
6 | 2 = Side-nav | ||
7 | 3 = Filters slider | ||
8 | 4 = Cards | ||
9 | 5 = Article | ||
10 | 6 = Media queries | ||
11 | 7 = Font | ||
12 | 8 = Others | ||
13 | |||
14 | ========================================================================== */ | ||
15 | |||
16 | /* ========================================================================== | ||
17 | 0 = Common | ||
18 | ========================================================================== */ | ||
19 | |||
20 | /** | ||
21 | * | ||
22 | * Material icons | ||
23 | * | ||
24 | */ | ||
25 | |||
26 | @font-face { | ||
27 | font-family: 'Material Icons'; | ||
28 | font-style: normal; | ||
29 | font-weight: 400; | ||
30 | src: url(../fonts/MaterialIcons-Regular.eot); | ||
31 | |||
32 | /* For IE6-8 */ | ||
33 | src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); | ||
34 | } | ||
35 | |||
36 | .material-icons { | ||
37 | font-family: 'Material Icons'; | ||
38 | font-weight: normal; | ||
39 | font-style: normal; | ||
40 | font-size: 24px; /* Preferred icon size */ | ||
41 | width: 1em; | ||
42 | height: 1em; | ||
43 | display: inline-block; | ||
44 | line-height: 1; | ||
45 | text-transform: none; | ||
46 | letter-spacing: normal; | ||
47 | word-wrap: normal; | ||
48 | white-space: nowrap; | ||
49 | direction: ltr; | ||
50 | |||
51 | /* Support for all WebKit browsers. */ | ||
52 | -webkit-font-smoothing: antialiased; | ||
53 | |||
54 | /* Support for Safari and Chrome. */ | ||
55 | text-rendering: optimizeLegibility; | ||
56 | |||
57 | /* Support for Firefox. */ | ||
58 | -moz-osx-font-smoothing: grayscale; | ||
59 | |||
60 | /* Support for IE. */ | ||
61 | font-feature-settings: 'liga'; | ||
62 | } | ||
63 | |||
64 | /* Rules for sizing the icon. */ | ||
65 | .material-icons.md-18 { font-size: 18px; } | ||
66 | .material-icons.md-24 { font-size: 24px; } | ||
67 | .material-icons.md-36 { font-size: 36px; } | ||
68 | .material-icons.md-48 { font-size: 48px; } | ||
69 | |||
70 | /* Rules for using icons as black on a light background. */ | ||
71 | .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } | ||
72 | .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } | ||
73 | |||
74 | /* Rules for using icons as white on a dark background. */ | ||
75 | .material-icons.md-light { color: rgba(255, 255, 255, 1); } | ||
76 | .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } | ||
77 | |||
78 | /** | ||
79 | * | ||
80 | * Icomoon icons | ||
81 | * | ||
82 | */ | ||
83 | |||
84 | @font-face { | ||
85 | font-family: icomoon; | ||
86 | src: url("../fonts/IcoMoon-Free.ttf"); | ||
87 | font-weight: normal; | ||
88 | font-style: normal; | ||
89 | } | ||
90 | |||
91 | [class^="icon-"]::before, | ||
92 | [class*=" icon-"]::before { | ||
93 | font-family: icomoon; | ||
94 | speak: none; | ||
95 | font-style: normal; | ||
96 | font-weight: normal; | ||
97 | font-variant: normal; | ||
98 | text-transform: none; | ||
99 | line-height: 1; | ||
100 | background-size: 24px; | ||
101 | |||
102 | /* Enable Ligatures ================ */ | ||
103 | letter-spacing: 0; | ||
104 | -webkit-font-feature-settings: "liga"; | ||
105 | -moz-font-feature-settings: "liga=1"; | ||
106 | -moz-font-feature-settings: "liga"; | ||
107 | -ms-font-feature-settings: "liga" 1; | ||
108 | -o-font-feature-settings: "liga"; | ||
109 | font-feature-settings: "liga"; | ||
110 | |||
111 | /* Better Font Rendering =========== */ | ||
112 | -webkit-font-smoothing: antialiased; | ||
113 | -moz-osx-font-smoothing: grayscale; | ||
114 | } | ||
115 | |||
116 | .icon-image { | ||
117 | background-size: 16px; | ||
118 | background-repeat: no-repeat; | ||
119 | padding-right: 1em !important; | ||
120 | padding-left: 1em !important; | ||
121 | } | ||
122 | |||
123 | .icon-eye::before { | ||
124 | content: "\e9ce"; | ||
125 | } | ||
126 | |||
127 | .icon-no-eye::before { | ||
128 | content: "\e9d1"; | ||
129 | } | ||
130 | |||
131 | .icon-calendar::before { | ||
132 | content: "\e953"; | ||
133 | } | ||
134 | |||
135 | .icon-mail::before { | ||
136 | content: "\ea86"; | ||
137 | } | ||
138 | |||
139 | .icon-time::before { | ||
140 | content: "\e952"; | ||
141 | } | ||
142 | |||
143 | /* Carrot (http://carrot.org) */ | ||
144 | .icon-image--carrot { | ||
145 | background-image: url("../../_global/img/icons/carrot-icon--black.png"); | ||
146 | } | ||
147 | |||
148 | /* Diaspora */ | ||
149 | .icon-image--diaspora { | ||
150 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); | ||
151 | } | ||
152 | |||
153 | /* Unmark.it */ | ||
154 | .icon-image--unmark { | ||
155 | background-image: url("../../_global/img/icons/unmark-icon--black.png"); | ||
156 | } | ||
157 | |||
158 | /* Shaarli */ | ||
159 | .icon-image--shaarli { | ||
160 | background-image: url("../../_global/img/icons/shaarli.png"); | ||
161 | } | ||
162 | |||
163 | /* Scuttle */ | ||
164 | .icon-image--scuttle { | ||
165 | background-image: url("../../_global/img/icons/scuttle.png"); | ||
166 | } | ||
167 | |||
168 | body { | ||
169 | display: flex; | ||
170 | min-height: 100vh; | ||
171 | flex-direction: column; | ||
172 | background: #fafafa; | ||
173 | } | ||
174 | |||
175 | body.login main { | ||
176 | padding: 0; | ||
177 | min-height: 100vh; | ||
178 | } | ||
179 | |||
180 | .border-bottom { | ||
181 | border-bottom: 1px solid #ddd; | ||
182 | } | ||
183 | |||
184 | nav, | ||
185 | main, | ||
186 | footer { | ||
187 | padding-left: 240px; | ||
188 | } | ||
189 | |||
190 | main, | ||
191 | #content, | ||
192 | .valign-wrapper { | ||
193 | height: 100%; | ||
194 | } | ||
195 | |||
196 | #main { | ||
197 | flex: 1 0 auto; | ||
198 | } | ||
199 | |||
200 | .results { | ||
201 | height: 1em; | ||
202 | } | ||
203 | |||
204 | .results .nb-results, | ||
205 | .results .pagination { | ||
206 | margin: 15px; | ||
207 | margin-bottom: 0; | ||
208 | } | ||
209 | |||
210 | .results .nb-results { | ||
211 | display: inline-flex; | ||
212 | } | ||
213 | |||
214 | .results a { | ||
215 | color: #444; | ||
216 | } | ||
217 | |||
218 | .pagination { | ||
219 | float: right; | ||
220 | } | ||
221 | |||
222 | .pagination ul { | ||
223 | margin: 0 !important; | ||
224 | } | ||
225 | |||
226 | .pagination li { | ||
227 | padding: 0; | ||
228 | } | ||
229 | |||
230 | .pagination a { | ||
231 | padding: 0 10px; | ||
232 | height: 30px; | ||
233 | display: block; | ||
234 | } | ||
235 | |||
236 | .pagination .disabled { | ||
237 | margin-right: 10px; | ||
238 | margin-left: 10px; | ||
239 | } | ||
240 | |||
241 | div.pagination ul .prev.disabled, | ||
242 | div.pagination ul .next.disabled { | ||
243 | display: none; | ||
244 | } | ||
245 | |||
246 | .pagination li.active span { | ||
247 | padding: 0 10px; | ||
248 | height: 30px; | ||
249 | display: block; | ||
250 | color: #fff; | ||
251 | } | ||
252 | |||
253 | .page-footer .footer-copyright { | ||
254 | min-width: 50px; | ||
255 | height: auto !important; | ||
256 | line-height: 1em !important; | ||
257 | } | ||
258 | |||
259 | .page-footer .footer-copyright p { | ||
260 | text-overflow: ellipsis; | ||
261 | white-space: nowrap; | ||
262 | overflow: hidden; | ||
263 | display: block; | ||
264 | } | ||
265 | |||
266 | .hidden { | ||
267 | display: none; | ||
268 | } | ||
269 | |||
270 | .picker__date-display { | ||
271 | display: none; | ||
272 | } | ||
273 | |||
274 | footer.page-footer { | ||
275 | margin-top: 10px; | ||
276 | padding-top: 0; | ||
277 | } | ||
278 | |||
279 | footer .row { | ||
280 | margin-bottom: 10px; | ||
281 | } | ||
282 | |||
283 | /* ========================================================================== | ||
284 | 1 = Nav | ||
285 | ========================================================================== */ | ||
286 | |||
287 | nav input { | ||
288 | color: #aaa; | ||
289 | } | ||
290 | |||
291 | nav { | ||
292 | height: auto; | ||
293 | } | ||
294 | |||
295 | .nav-wrapper { | ||
296 | display: flex; | ||
297 | flex-wrap: wrap; | ||
298 | justify-content: space-between; | ||
299 | min-height: 64px; | ||
300 | } | ||
301 | |||
302 | .nav-wrapper .button-collapse { | ||
303 | padding: 0 15px; | ||
304 | } | ||
305 | |||
306 | .nav-input { | ||
307 | display: none; | ||
308 | } | ||
309 | |||
310 | .nav-panel-buttom { | ||
311 | display: flex; | ||
312 | flex-grow: 1; | ||
313 | justify-content: flex-end; | ||
314 | } | ||
315 | |||
316 | .nav-panel-buttom li { | ||
317 | max-height: 64px; | ||
318 | } | ||
319 | |||
320 | .nav-panels { | ||
321 | transition: background 0.2s ease; | ||
322 | } | ||
323 | |||
324 | .nav-panel-add .add, | ||
325 | .nav-panel-search .search, | ||
326 | .nav-panels .close { | ||
327 | color: #444 !important; | ||
328 | } | ||
329 | |||
330 | .nav-panels .action { | ||
331 | padding-left: 0.75rem; | ||
332 | font-size: 2.1rem; | ||
333 | white-space: nowrap; | ||
334 | } | ||
335 | |||
336 | .nav-panels .input-field input { | ||
337 | display: block; | ||
338 | line-height: inherit; | ||
339 | padding-left: 4rem !important; | ||
340 | width: calc(100% - 8rem); | ||
341 | } | ||
342 | |||
343 | .nav-panels .input-field input:focus { | ||
344 | background-color: #fff; | ||
345 | border: 0; | ||
346 | box-shadow: none; | ||
347 | color: #444; | ||
348 | } | ||
349 | |||
350 | .input-field.nav-panel-add label, | ||
351 | .input-field.nav-panel-search label { | ||
352 | left: 1rem; | ||
353 | } | ||
354 | |||
355 | .input-field.nav-panel-add .close, | ||
356 | .input-field.nav-panel-search .close { | ||
357 | position: absolute; | ||
358 | top: 0; | ||
359 | right: 1rem; | ||
360 | color: transparent; | ||
361 | cursor: pointer; | ||
362 | font-size: 2rem; | ||
363 | transition: 0.3s color; | ||
364 | } | ||
365 | |||
366 | #button_filters { | ||
367 | display: none; | ||
368 | } | ||
369 | |||
370 | #button_export { | ||
371 | display: none; | ||
372 | } | ||
373 | |||
374 | .input-field.nav-panel-add, | ||
375 | .input-field.nav-panel-add form, | ||
376 | .input-field.nav-panel-search, | ||
377 | .input-field.nav-panel-search form { | ||
378 | display: flex; | ||
379 | flex: 1; | ||
380 | } | ||
381 | |||
382 | /* ========================================================================== | ||
383 | 2 = Side-nav | ||
384 | ========================================================================== */ | ||
385 | |||
386 | .side-nav.fixed a { | ||
387 | font-size: 13px; | ||
388 | line-height: 44px; | ||
389 | height: 44px; | ||
390 | } | ||
391 | |||
392 | .side-nav .collapsible-header, | ||
393 | .side-nav.fixed .collapsible-header { | ||
394 | height: 45px; | ||
395 | line-height: 44px; | ||
396 | padding: 0 20px; | ||
397 | } | ||
398 | |||
399 | .bold > a { | ||
400 | font-weight: bold; | ||
401 | } | ||
402 | |||
403 | .side-nav > li.logo { | ||
404 | line-height: 0; | ||
405 | text-align: center; | ||
406 | } | ||
407 | |||
408 | #main .logo a { | ||
409 | height: 100pt; | ||
410 | } | ||
411 | |||
412 | #main .logo img { | ||
413 | height: 100pt; | ||
414 | width: 100pt; | ||
415 | } | ||
416 | |||
417 | #main .logo:hover { | ||
418 | background: transparent; | ||
419 | } | ||
420 | |||
421 | .side-nav li { | ||
422 | padding: 0; | ||
423 | } | ||
424 | |||
425 | .side-nav a { | ||
426 | margin: 0 1rem; | ||
427 | } | ||
428 | |||
429 | span.numberItems { | ||
430 | float: right; | ||
431 | } | ||
432 | |||
433 | nav ul a:hover { | ||
434 | background-color: initial; | ||
435 | } | ||
436 | |||
437 | /* ========================================================================== | ||
438 | * 3 = Filters slider | ||
439 | * ========================================================================== */ | ||
440 | |||
441 | #filters button { | ||
442 | padding: 0; | ||
443 | width: 100%; | ||
444 | } | ||
445 | |||
446 | .side-nav.fixed.right-aligned { | ||
447 | right: -250px; | ||
448 | left: auto !important; | ||
449 | } | ||
450 | |||
451 | #filters div.with-checkbox { | ||
452 | height: 3rem; | ||
453 | margin-top: 0; | ||
454 | } | ||
455 | |||
456 | /* ========================================================================== | ||
457 | 4 = Cards | ||
458 | ========================================================================== */ | ||
459 | |||
460 | main #content { | ||
461 | padding: 0 0.5rem; | ||
462 | } | ||
463 | |||
464 | main ul.row { | ||
465 | padding: 0 0.75rem; | ||
466 | } | ||
467 | |||
468 | .data .card .card-body { | ||
469 | height: 19em; | ||
470 | overflow: hidden; | ||
471 | } | ||
472 | |||
473 | .card .card-content .card-title, | ||
474 | .card .card-reveal .card-title { | ||
475 | line-height: 22.8px; | ||
476 | max-height: 80px; | ||
477 | font-size: 19px; | ||
478 | font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
479 | color: #313131; | ||
480 | } | ||
481 | |||
482 | .card .card-content .activator, | ||
483 | .card .card-reveal .activator { | ||
484 | cursor: pointer; | ||
485 | font-family: "Material Icons"; | ||
486 | } | ||
487 | |||
488 | .card .card-content i.right, | ||
489 | .card .card-reveal i.right { | ||
490 | margin-left: 0; | ||
491 | } | ||
492 | |||
493 | .card .card-content .original { | ||
494 | line-height: 24px; | ||
495 | font-size: 15px; | ||
496 | } | ||
497 | |||
498 | a.original { | ||
499 | text-overflow: ellipsis; | ||
500 | white-space: nowrap; | ||
501 | overflow: hidden; | ||
502 | display: block; | ||
503 | } | ||
504 | |||
505 | .card .card-entry-labels { | ||
506 | position: absolute; | ||
507 | top: 10px; | ||
508 | z-index: 90; | ||
509 | max-width: 50%; | ||
510 | } | ||
511 | |||
512 | .card .card-entry-labels li, | ||
513 | .card-tag-labels li { | ||
514 | margin: 10px 10px 10px auto; | ||
515 | padding: 5px 12px 5px 16px !important; | ||
516 | background-color: rgba(0, 151, 167, 0.85); | ||
517 | border-radius: 0 3px 3px 0; | ||
518 | color: #fff; | ||
519 | cursor: default; | ||
520 | max-height: 2em; | ||
521 | overflow: hidden; | ||
522 | text-overflow: ellipsis; | ||
523 | white-space: nowrap; | ||
524 | } | ||
525 | |||
526 | .card .card-entry-labels-hidden { | ||
527 | margin: 2.5px auto; | ||
528 | } | ||
529 | |||
530 | .card .card-entry-labels-hidden li { | ||
531 | display: inline-block; | ||
532 | background-color: rgba(0, 151, 167, 0.85); | ||
533 | margin: 0 5px; | ||
534 | padding: 5px 12px; | ||
535 | border-radius: 3px; | ||
536 | color: #fff; | ||
537 | max-height: 2em; | ||
538 | max-width: calc(100% - 15px); | ||
539 | overflow: hidden; | ||
540 | text-overflow: ellipsis; | ||
541 | white-space: nowrap; | ||
542 | } | ||
543 | |||
544 | .card .card-entry-labels-hidden li:first-child { | ||
545 | margin-left: 0; | ||
546 | } | ||
547 | |||
548 | .card-entry-tags a, | ||
549 | .card-entry-labels a, | ||
550 | .card-tag-labels a, | ||
551 | .card-entry-labels-hidden a, | ||
552 | #list .chip a { | ||
553 | text-decoration: none; | ||
554 | font-weight: normal; | ||
555 | color: #fff; | ||
556 | } | ||
557 | |||
558 | .card .card-content .estimatedTime { | ||
559 | margin-bottom: 10px; | ||
560 | } | ||
561 | |||
562 | .card .card-action { | ||
563 | padding: 10px 5px 10px 15px; | ||
564 | } | ||
565 | |||
566 | .card .card-action ul.links { | ||
567 | margin: 0; | ||
568 | font-size: 24px; | ||
569 | line-height: 24px; | ||
570 | } | ||
571 | |||
572 | .card .card-action ul.tools li a.tool { | ||
573 | margin-right: 5px !important; | ||
574 | } | ||
575 | |||
576 | .card-stacked:hover ul.tools-list { | ||
577 | display: block; | ||
578 | } | ||
579 | |||
580 | .card-stacked ul.tools-list { | ||
581 | display: none; | ||
582 | } | ||
583 | |||
584 | .card .card-action a { | ||
585 | color: #fff; | ||
586 | margin: 0; | ||
587 | } | ||
588 | |||
589 | .card .card-action a:hover { | ||
590 | color: #fff; | ||
591 | } | ||
592 | |||
593 | .card .card-action .reading-time { | ||
594 | display: inline-flex; | ||
595 | vertical-align: middle; | ||
596 | } | ||
597 | |||
598 | .quickstart .card .card-action a, | ||
599 | .quickstart .card .card-action a:hover { | ||
600 | color: #fff !important; | ||
601 | } | ||
602 | |||
603 | .settings .div_tabs { | ||
604 | padding-bottom: 15px; | ||
605 | } | ||
606 | |||
607 | .card.sw { | ||
608 | max-width: 370px; | ||
609 | margin-left: auto; | ||
610 | margin-right: auto; | ||
611 | } | ||
612 | |||
613 | .card .card-image { | ||
614 | height: 10em; | ||
615 | } | ||
616 | |||
617 | .card .card-fullimage { | ||
618 | height: 13.5em; | ||
619 | } | ||
620 | |||
621 | .card .card-image .preview, | ||
622 | .card .card-fullimage .preview { | ||
623 | height: 14em; | ||
624 | background-size: cover; | ||
625 | background-repeat: no-repeat; | ||
626 | background-position: 50%; | ||
627 | } | ||
628 | |||
629 | /* ========================================================================== | ||
630 | 5 = Article | ||
631 | ========================================================================== */ | ||
632 | |||
633 | #article { | ||
634 | font-size: 20px; | ||
635 | margin: 0 auto; | ||
636 | max-width: 45em; | ||
637 | } | ||
638 | |||
639 | #article article { | ||
640 | color: #424242; | ||
641 | font-size: 18px; | ||
642 | line-height: 1.7em; | ||
643 | } | ||
644 | |||
645 | #article article h1, | ||
646 | #article article h2, | ||
647 | #article article h3, | ||
648 | #article article h4, | ||
649 | #article article h5, | ||
650 | #article article h6 { | ||
651 | color: #212121; | ||
652 | } | ||
653 | |||
654 | #article article h1 strong, | ||
655 | #article article h2 strong, | ||
656 | #article article h3 strong, | ||
657 | #article article h4 strong, | ||
658 | #article article h5 strong, | ||
659 | #article article h6 strong { | ||
660 | font-weight: 500; | ||
661 | } | ||
662 | |||
663 | #article article h6 { | ||
664 | font-size: 1.2rem; | ||
665 | } | ||
666 | |||
667 | #article article h5 { | ||
668 | font-size: 1.6rem; | ||
669 | } | ||
670 | |||
671 | #article article h4 { | ||
672 | font-size: 1.9rem; | ||
673 | } | ||
674 | |||
675 | #article article h3 { | ||
676 | font-size: 2.2rem; | ||
677 | } | ||
678 | |||
679 | #article article h2 { | ||
680 | font-size: 2.5rem; | ||
681 | } | ||
682 | |||
683 | #article article h1 { | ||
684 | font-size: 2.7rem; | ||
685 | } | ||
686 | |||
687 | #article img, | ||
688 | #article figure { | ||
689 | max-width: 100%; | ||
690 | height: auto; | ||
691 | } | ||
692 | |||
693 | #article article a { | ||
694 | border-bottom: 1px dotted #03a9f4; | ||
695 | text-decoration: none; | ||
696 | } | ||
697 | |||
698 | #article article a:hover { | ||
699 | border-bottom-style: solid; | ||
700 | } | ||
701 | |||
702 | #article article ul { | ||
703 | padding-left: 30px; | ||
704 | } | ||
705 | |||
706 | #article article ul, | ||
707 | #article article ul li { | ||
708 | list-style-type: disc; | ||
709 | } | ||
710 | |||
711 | #article article blockquote { | ||
712 | font-style: italic; | ||
713 | } | ||
714 | |||
715 | #article article strong { | ||
716 | font-weight: bold; | ||
717 | } | ||
718 | |||
719 | #article article pre { | ||
720 | box-sizing: border-box; | ||
721 | margin: 0 0 1.75em; | ||
722 | border: #e3f2fd 1px solid; | ||
723 | width: 100%; | ||
724 | padding: 10px; | ||
725 | font-family: monospace; | ||
726 | font-size: 0.8em; | ||
727 | white-space: pre; | ||
728 | overflow: auto; | ||
729 | background: #f5f5f5; | ||
730 | border-radius: 3px; | ||
731 | } | ||
732 | |||
733 | #article > header > h1 { | ||
734 | font-size: 2em; | ||
735 | margin: 2.1rem 0 0.68rem; | ||
736 | } | ||
737 | |||
738 | .reader-mode { | ||
739 | width: 95px !important; | ||
740 | transition: width 0.2s ease; | ||
741 | } | ||
742 | |||
743 | .reader-mode:hover { | ||
744 | width: 240px !important; | ||
745 | } | ||
746 | |||
747 | .reader-mode .collapsible-body { | ||
748 | height: 0; | ||
749 | overflow: hidden; | ||
750 | } | ||
751 | |||
752 | .reader-mode:hover .collapsible-body { | ||
753 | height: auto; | ||
754 | } | ||
755 | |||
756 | .reader-mode span { | ||
757 | opacity: 0; | ||
758 | transition: opacity 0.2s ease; | ||
759 | } | ||
760 | |||
761 | .reader-mode:hover span { | ||
762 | opacity: 1; | ||
763 | } | ||
764 | |||
765 | .progress { | ||
766 | position: fixed; | ||
767 | top: 0; | ||
768 | width: 100%; | ||
769 | height: 3px; | ||
770 | margin: 0; | ||
771 | z-index: 9999; | ||
772 | } | ||
773 | |||
774 | #article aside .tools { | ||
775 | font-size: 0.8em; | ||
776 | display: flex; | ||
777 | flex-flow: row wrap; | ||
778 | margin: 0 auto; | ||
779 | } | ||
780 | |||
781 | article aside .tools li { | ||
782 | display: inline-flex; | ||
783 | vertical-align: middle; | ||
784 | } | ||
785 | |||
786 | #article aside .tools a { | ||
787 | color: #000; | ||
788 | text-decoration: none; | ||
789 | } | ||
790 | |||
791 | #article aside #list { | ||
792 | float: right; | ||
793 | margin: 0 15px 10px; | ||
794 | } | ||
795 | |||
796 | #article aside .chip { | ||
797 | background-color: rgba(0, 151, 167, 0.85); | ||
798 | padding: 0 15px 0 10px; | ||
799 | margin: auto 2px; | ||
800 | } | ||
801 | |||
802 | #article aside .chip a, | ||
803 | #article aside .chip i { | ||
804 | color: #fff; | ||
805 | } | ||
806 | |||
807 | /* ========================================================================== | ||
808 | 6 = Media queries | ||
809 | ========================================================================== */ | ||
810 | |||
811 | @media only screen and (max-width: 992px) { | ||
812 | header, | ||
813 | main, | ||
814 | footer { | ||
815 | padding-left: 0; | ||
816 | } | ||
817 | |||
818 | nav, | ||
819 | main, | ||
820 | footer { | ||
821 | padding-left: 0; | ||
822 | } | ||
823 | |||
824 | .pagination { | ||
825 | width: auto; | ||
826 | } | ||
827 | |||
828 | .nav-panels .action { | ||
829 | padding-right: 0.75rem; | ||
830 | } | ||
831 | |||
832 | .nav-panel-buttom { | ||
833 | justify-content: space-around; | ||
834 | } | ||
835 | |||
836 | #article { | ||
837 | max-width: 35em; | ||
838 | margin-left: auto; | ||
839 | margin-right: auto; | ||
840 | font-size: 18px; | ||
841 | } | ||
842 | |||
843 | #article > header > h1 { | ||
844 | font-size: 1.33em; | ||
845 | } | ||
846 | |||
847 | .reader-mode { | ||
848 | width: 240px !important; | ||
849 | } | ||
850 | |||
851 | .reader-mode span { | ||
852 | opacity: 1; | ||
853 | } | ||
854 | |||
855 | .tabs { | ||
856 | display: inline-block; | ||
857 | height: auto; | ||
858 | } | ||
859 | |||
860 | .tab { | ||
861 | min-width: 100%; | ||
862 | } | ||
863 | |||
864 | .indicator { | ||
865 | display: none; | ||
866 | } | ||
867 | |||
868 | .pagination li.prev, | ||
869 | .pagination li.next { | ||
870 | width: auto; | ||
871 | } | ||
872 | |||
873 | .drag-target + .drag-target { | ||
874 | height: 50%; | ||
875 | } | ||
876 | |||
877 | .drag-target + .drag-target + .drag-target { | ||
878 | top: 50%; | ||
879 | } | ||
880 | } | ||
881 | |||
882 | @media only screen and (min-width: 1200px) and (max-width: 1650px) { | ||
883 | .row .col.l3 { | ||
884 | width: 33.33333%; | ||
885 | margin-left: 0; | ||
886 | } | ||
887 | } | ||
888 | |||
889 | @media only screen and (min-width: 993px) and (max-width: 1200px) { | ||
890 | .row .col.l1 { | ||
891 | width: 25%; | ||
892 | margin-left: 0; | ||
893 | } | ||
894 | |||
895 | .row .col.l2 { | ||
896 | width: 33.33333%; | ||
897 | margin-left: 0; | ||
898 | } | ||
899 | |||
900 | .row .col.l3 { | ||
901 | width: 41.66667%; | ||
902 | margin-left: 0; | ||
903 | } | ||
904 | |||
905 | .row .col.l4 { | ||
906 | width: 50%; | ||
907 | margin-left: 0; | ||
908 | } | ||
909 | |||
910 | .row .col.l5 { | ||
911 | width: 58.33333%; | ||
912 | margin-left: 0; | ||
913 | } | ||
914 | |||
915 | .row .col.l6 { | ||
916 | width: 66.66667%; | ||
917 | margin-left: 0; | ||
918 | } | ||
919 | |||
920 | .row .col.l7 { | ||
921 | width: 75%; | ||
922 | margin-left: 0; | ||
923 | } | ||
924 | |||
925 | .row .col.l8 { | ||
926 | width: 83.33333%; | ||
927 | margin-left: 0; | ||
928 | } | ||
929 | |||
930 | .row .col.l9 { | ||
931 | width: 91.66667%; | ||
932 | margin-left: 0; | ||
933 | } | ||
934 | |||
935 | .row .col.l10 { | ||
936 | width: 100%; | ||
937 | margin-left: 0; | ||
938 | } | ||
939 | } | ||
940 | |||
941 | @media only screen and (max-width: 350px) { | ||
942 | .nb-results { | ||
943 | display: none; | ||
944 | } | ||
945 | |||
946 | main ul.row { | ||
947 | padding: 0; | ||
948 | } | ||
949 | |||
950 | .row .col { | ||
951 | padding: 0; | ||
952 | } | ||
953 | } | ||
954 | |||
955 | /* ========================================================================== | ||
956 | 7 = Font | ||
957 | ========================================================================== */ | ||
958 | |||
959 | .icon-google-plus2::before { | ||
960 | content: "\ea89"; | ||
961 | } | ||
962 | |||
963 | .icon-facebook2::before { | ||
964 | content: "\ea8d"; | ||
965 | } | ||
966 | |||
967 | .icon-twitter::before { | ||
968 | content: "\ea96"; | ||
969 | } | ||
970 | |||
971 | .icon-apple::before { | ||
972 | content: "\eabf"; | ||
973 | } | ||
974 | |||
975 | .icon-android::before { | ||
976 | content: "\eac1"; | ||
977 | } | ||
978 | |||
979 | .icon-chrome::before { | ||
980 | content: "\eae5"; | ||
981 | } | ||
982 | |||
983 | .icon-firefox::before { | ||
984 | content: "\eae6"; | ||
985 | } | ||
986 | |||
987 | .icon-link::before { | ||
988 | content: "\e9cb"; | ||
989 | } | ||
990 | |||
991 | footer [class^="icon-"], | ||
992 | footer [class*=" icon-"] { | ||
993 | font-size: 2em; | ||
994 | transition: text-shadow 0.2s ease; | ||
995 | padding-right: 10px; | ||
996 | } | ||
997 | |||
998 | footer [class^="icon-"]:hover, | ||
999 | footer [class*=" icon-"]:hover { | ||
1000 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
1001 | } | ||
1002 | |||
1003 | /* ========================================================================== | ||
1004 | 8 = Others | ||
1005 | ========================================================================== */ | ||
1006 | |||
1007 | /* force height on non-input field in the settings page */ | ||
1008 | div.settings div.input-field div, | ||
1009 | div.settings div.input-field ul { | ||
1010 | margin-top: 40px; | ||
1011 | } | ||
1012 | |||
1013 | /* but avoid to kill all file input */ | ||
1014 | div.settings div.file-field div { | ||
1015 | margin-top: inherit; | ||
1016 | } | ||
1017 | |||
1018 | .input-field label.active { | ||
1019 | font-size: 1rem; | ||
1020 | } | ||
1021 | |||
1022 | nav .input-field input { | ||
1023 | margin: 0; | ||
1024 | } | ||
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss index b430077e..86e4a095 100644 --- a/app/Resources/static/themes/material/css/sidenav.scss +++ b/app/Resources/static/themes/material/css/sidenav.scss | |||
@@ -10,7 +10,7 @@ | |||
10 | } | 10 | } |
11 | 11 | ||
12 | a { | 12 | a { |
13 | margin: 0 1rem; | 13 | margin: 0 auto; |
14 | } | 14 | } |
15 | 15 | ||
16 | &.fixed a { | 16 | &.fixed a { |