aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorPaulino Michelazzo <paulino@michelazzo.com.br>2016-10-18 22:48:23 +0200
committerPaulino Michelazzo <paulino@michelazzo.com.br>2016-10-18 22:48:23 +0200
commit99731f0bb1f6fd2815eeb9af504ce86df927657b (patch)
treeb080efc608d2bbd52b77a4a0067402007f50c5a8 /app/Resources/static/themes/material
parent3a3c6b866b52721431bed22426d9abfcd0d2dfe0 (diff)
parent7180aaed45dce62e40620a9e4b202526ebd6a3bb (diff)
downloadwallabag-99731f0bb1f6fd2815eeb9af504ce86df927657b.tar.gz
wallabag-99731f0bb1f6fd2815eeb9af504ce86df927657b.tar.zst
wallabag-99731f0bb1f6fd2815eeb9af504ce86df927657b.zip
Merge remote-tracking branch 'wallabag/master'
Diffstat (limited to 'app/Resources/static/themes/material')
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css782
-rwxr-xr-xapp/Resources/static/themes/material/css/print.css77
-rwxr-xr-xapp/Resources/static/themes/material/js/init.js99
3 files changed, 958 insertions, 0 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
new file mode 100755
index 00000000..2cc2e8a0
--- /dev/null
+++ b/app/Resources/static/themes/material/css/main.css
@@ -0,0 +1,782 @@
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@font-face {
21 font-family: icomoon;
22 src: url("../fonts/IcoMoon-Free.ttf");
23 font-weight: normal;
24 font-style: normal;
25}
26
27@font-face {
28 font-family: 'Material Icons';
29 font-style: normal;
30 font-weight: 400;
31 src: url(../fonts/MaterialIcons-Regular.eot);
32
33 /* For IE6-8 */
34 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");
35}
36
37.material-icons {
38 font-family: 'Material Icons';
39 font-weight: normal;
40 font-style: normal;
41 font-size: 24px; /* Preferred icon size */
42 width: 1em;
43 height: 1em;
44 display: inline-block;
45 line-height: 1;
46 text-transform: none;
47 letter-spacing: normal;
48 word-wrap: normal;
49 white-space: nowrap;
50 direction: ltr;
51
52 /* Support for all WebKit browsers. */
53 -webkit-font-smoothing: antialiased;
54
55 /* Support for Safari and Chrome. */
56 text-rendering: optimizeLegibility;
57
58 /* Support for Firefox. */
59 -moz-osx-font-smoothing: grayscale;
60
61 /* Support for IE. */
62 font-feature-settings: 'liga';
63}
64
65[class^="icon-"]::before,
66[class*=" icon-"]::before {
67 font-family: icomoon;
68 speak: none;
69 font-style: normal;
70 font-weight: normal;
71 font-variant: normal;
72 text-transform: none;
73 line-height: 1;
74 background-size: 24px;
75
76 /* Enable Ligatures ================ */
77 letter-spacing: 0;
78 -webkit-font-feature-settings: "liga";
79 -moz-font-feature-settings: "liga=1";
80 -moz-font-feature-settings: "liga";
81 -ms-font-feature-settings: "liga" 1;
82 -o-font-feature-settings: "liga";
83 font-feature-settings: "liga";
84
85 /* Better Font Rendering =========== */
86 -webkit-font-smoothing: antialiased;
87 -moz-osx-font-smoothing: grayscale;
88}
89
90.icon-image {
91 background-size: 16px;
92 background-repeat: no-repeat;
93 padding-right: 1em !important;
94 padding-left: 1em !important;
95}
96
97.icon-eye::before {
98 content: "\e9ce";
99}
100
101.icon-no-eye::before {
102 content: "\e9d1";
103}
104
105.icon-calendar::before {
106 content: "\e953";
107}
108
109.icon-mail::before {
110 content: "\ea86";
111}
112
113.icon-time::before {
114 content: "\e952";
115}
116
117/* Carrot (http://carrot.org) */
118.icon-image--carrot {
119 background-image: url("../../_global/img/icons/carrot-icon--black.png");
120}
121
122/* Diaspora */
123.icon-image--diaspora {
124 background-image: url("../../_global/img/icons/diaspora-icon--black.png");
125}
126
127/* Shaarli */
128.icon-image--shaarli {
129 background-image: url("../../_global/img/icons/shaarli.png");
130}
131
132body {
133 display: flex;
134 min-height: 100vh;
135 flex-direction: column;
136 background: #f0f0f0;
137}
138
139body.login main {
140 padding: 0;
141 min-height: 100vh;
142}
143
144.border-bottom {
145 border-bottom: 1px solid #ddd;
146}
147
148nav,
149main,
150footer {
151 padding-left: 240px;
152}
153
154main,
155#content,
156.valign-wrapper {
157 height: 100%;
158}
159
160#main {
161 flex: 1 0 auto;
162}
163
164.results {
165 height: 1em;
166 line-height: 30px;
167}
168
169.results .nb-results,
170.results .pagination {
171 margin: 15px;
172 margin-bottom: 0;
173}
174
175.pagination {
176 float: right;
177}
178
179.pagination ul {
180 margin: 0 !important;
181}
182
183.pagination li {
184 padding: 0;
185}
186
187.pagination a {
188 padding: 0 10px;
189 height: 30px;
190 display: block;
191}
192
193.pagination .disabled {
194 margin-right: 10px;
195 margin-left: 10px;
196}
197
198div.pagination ul .prev.disabled,
199div.pagination ul .next.disabled {
200 display: none;
201}
202
203.pagination li.active span {
204 padding: 0 10px;
205 height: 30px;
206 display: block;
207 color: #fff;
208}
209
210.page-footer .footer-copyright p {
211 display: inline;
212}
213
214.hidden {
215 display: none;
216}
217
218.picker__date-display {
219 display: none;
220}
221
222footer.page-footer {
223 margin-top: 10px;
224 padding-top: 0;
225}
226
227footer .row {
228 margin-bottom: 10px;
229}
230
231/* ==========================================================================
232 1 = Nav
233 ========================================================================== */
234
235nav input {
236 color: #aaa;
237}
238
239.nav-wrapper .button-collapse {
240 padding: 0 15px;
241}
242
243.nav-input {
244 display: none;
245}
246
247.nav-panels {
248 overflow: hidden;
249}
250
251.nav-panel-buttom li {
252 max-height: 64px;
253}
254
255.nav-panels {
256 transition: background 0.2s ease;
257}
258
259.nav-panel-add .add,
260.nav-panel-search .search,
261.nav-panels .close {
262 color: #444 !important;
263}
264
265.nav-panels .action {
266 padding-left: 0.75rem;
267 font-size: 2.1rem;
268 white-space: nowrap;
269}
270
271.nav-panels .input-field input {
272 display: block;
273 line-height: inherit;
274 padding-left: 4rem !important;
275 width: calc(100% - 8rem);
276}
277
278.nav-panels .input-field input:focus {
279 background-color: #fff;
280 border: 0;
281 box-shadow: none;
282 color: #444;
283}
284
285.input-field.nav-panel-add label {
286 left: 1rem;
287}
288
289.input-field.nav-panel-add .close {
290 position: absolute;
291 top: 0;
292 right: 1rem;
293 color: transparent;
294 cursor: pointer;
295 font-size: 2rem;
296 transition: 0.3s color;
297}
298
299#button_filters {
300 display: none;
301}
302
303#button_export {
304 display: none;
305}
306
307.input-field.nav-panel-add,
308.input-field.nav-panel-add form {
309 height: 100%;
310}
311
312/* ==========================================================================
313 2 = Side-nav
314 ========================================================================== */
315
316.side-nav.fixed a {
317 font-size: 13px;
318 line-height: 44px;
319 height: 44px;
320}
321
322.side-nav .collapsible-header,
323.side-nav.fixed .collapsible-header {
324 height: 45px;
325 line-height: 44px;
326 padding: 0 20px;
327}
328
329.bold > a {
330 font-weight: bold;
331}
332
333.side-nav > li.logo {
334 line-height: 0;
335 text-align: center;
336}
337
338#main .logo a {
339 height: 100pt;
340}
341
342#main .logo img {
343 height: 100pt;
344 width: 100pt;
345}
346
347#main .logo:hover {
348 background: transparent;
349}
350
351.side-nav li {
352 padding: 0;
353}
354
355.side-nav a {
356 margin: 0 1rem;
357}
358
359span.numberItems {
360 float: right;
361}
362
363nav ul a:hover {
364 background-color: initial;
365}
366
367/* ==========================================================================
368 * 3 = Filters slider
369 * ========================================================================== */
370
371#filters button {
372 padding: 0;
373 width: 100%;
374}
375
376.side-nav.fixed.right-aligned {
377 right: -250px;
378 left: auto !important;
379 overflow-y: visible;
380}
381
382#filters div.with-checkbox {
383 height: 3rem;
384 margin-top: 0;
385}
386
387/* ==========================================================================
388 4 = Cards
389 ========================================================================== */
390
391main #content {
392 padding: 0 0.5rem;
393}
394
395main ul.row {
396 padding: 0 0.75rem;
397}
398
399.data .card .card-body {
400 height: 22em;
401 overflow: hidden;
402}
403
404.card .card-content .card-title {
405 line-height: 32px;
406 max-height: 64px;
407}
408
409.card .card-content i.right,
410.card .card-reveal i.right {
411 margin-left: 0;
412}
413
414.card .card-entry-labels {
415 position: absolute;
416 top: 10px;
417 z-index: 90;
418 max-width: 50%;
419}
420
421.card .card-entry-labels li,
422.card-tag-labels li {
423 margin: 10px 10px 10px auto;
424 padding: 5px 12px 5px 16px !important;
425 background-color: rgba(0, 151, 167, 0.85);
426 border-radius: 0 3px 3px 0;
427 color: #fff;
428 cursor: default;
429 max-height: 2em;
430 overflow: hidden;
431 text-overflow: ellipsis;
432 white-space: nowrap;
433}
434
435.card .card-entry-labels-hidden {
436 margin-top: 5px;
437}
438
439.card .card-entry-labels-hidden li {
440 display: inline-block;
441 background-color: rgba(0, 151, 167, 0.85);
442 margin: 0 5px;
443 padding: 5px 12px;
444 border-radius: 3px;
445 color: #fff;
446 max-height: 2em;
447 max-width: calc(100% - 15px);
448 overflow: hidden;
449 text-overflow: ellipsis;
450 white-space: nowrap;
451}
452
453.card-entry-tags a,
454.card-entry-labels a,
455.card-tag-labels a,
456.card-entry-labels-hidden a,
457#list .chip a {
458 text-decoration: none;
459 font-weight: normal;
460 color: #fff;
461}
462
463.card .card-content .estimatedTime {
464 margin-bottom: 10px;
465}
466
467.card .card-action .original {
468 line-height: 24px;
469}
470
471.card .card-action ul.links {
472 margin: 0;
473 font-size: 24px;
474 line-height: 24px;
475}
476
477.card .card-action a {
478 color: #fff;
479 margin: 0;
480}
481
482.card .card-action a:hover {
483 color: #fff;
484}
485
486.quickstart .card .card-action a,
487.quickstart .card .card-action a:hover {
488 color: #fff !important;
489}
490
491.settings .div_tabs {
492 padding-bottom: 15px;
493}
494
495.card.sw {
496 max-width: 370px;
497 margin-left: auto;
498 margin-right: auto;
499}
500
501.card .card-image {
502 height: 14em;
503}
504
505.card .card-image .preview {
506 height: 14em;
507 background-size: cover;
508 background-repeat: no-repeat;
509 background-position: 50%;
510}
511
512/* ==========================================================================
513 5 = Article
514 ========================================================================== */
515
516#article {
517 font-size: 20px;
518 margin: 0 auto;
519 max-width: 40em;
520}
521
522#article img,
523#article figure {
524 max-width: 100%;
525 height: auto;
526}
527
528#article > header > h1 {
529 font-size: 1.6em;
530}
531
532.reader-mode {
533 width: 95px !important;
534 transition: width 0.2s ease;
535}
536
537.reader-mode:hover {
538 width: 240px !important;
539}
540
541.reader-mode .collapsible-body {
542 height: 0;
543 overflow: hidden;
544}
545
546.reader-mode:hover .collapsible-body {
547 height: auto;
548}
549
550.reader-mode span {
551 opacity: 0;
552 transition: opacity 0.2s ease;
553}
554
555.reader-mode:hover span {
556 opacity: 1;
557}
558
559.progress {
560 position: fixed;
561 top: 0;
562 width: 100%;
563 height: 3px;
564 margin: 0;
565 z-index: 9999;
566}
567
568#article aside .link {
569 color: #000;
570 font-size: 0.8em;
571 text-decoration: none;
572}
573
574#article aside #list {
575 float: right;
576 margin: 0 15px 10px;
577}
578
579#article aside .chip {
580 background-color: rgba(0, 151, 167, 0.85);
581 color: #fff;
582 padding: 0 15px 0 10px;
583}
584
585#article aside .chip i {
586 color: #fff;
587}
588
589/* ==========================================================================
590 6 = Media queries
591 ========================================================================== */
592
593@media only screen and (max-width: 992px) {
594 header,
595 main,
596 footer {
597 padding-left: 0;
598 }
599
600 nav,
601 main,
602 footer {
603 padding-left: 0;
604 }
605
606 .pagination {
607 width: auto;
608 }
609
610 #article {
611 padding: 15px;
612 max-width: 35em;
613 margin-left: auto;
614 margin-right: auto;
615 font-size: 18px;
616 }
617
618 #article > header > h1 {
619 font-size: 1.33em;
620 }
621
622 .reader-mode {
623 width: 240px !important;
624 }
625
626 .reader-mode span {
627 opacity: 1;
628 }
629
630 .tabs {
631 display: inline-block;
632 height: auto;
633 }
634
635 .tab {
636 min-width: 100%;
637 }
638
639 .indicator {
640 display: none;
641 }
642
643 .pagination li.prev,
644 .pagination li.next {
645 width: auto;
646 }
647}
648
649@media only screen and (min-width: 400px) {
650 .nav-panel-buttom {
651 float: right;
652 }
653}
654
655@media only screen and (min-width: 993px) and (max-width: 1180px) {
656 .row .col.l1 {
657 width: 25%;
658 margin-left: 0;
659 }
660
661 .row .col.l2 {
662 width: 33.33333%;
663 margin-left: 0;
664 }
665
666 .row .col.l3 {
667 width: 41.66667%;
668 margin-left: 0;
669 }
670
671 .row .col.l4 {
672 width: 50%;
673 margin-left: 0;
674 }
675
676 .row .col.l5 {
677 width: 58.33333%;
678 margin-left: 0;
679 }
680
681 .row .col.l6 {
682 width: 66.66667%;
683 margin-left: 0;
684 }
685
686 .row .col.l7 {
687 width: 75%;
688 margin-left: 0;
689 }
690
691 .row .col.l8 {
692 width: 83.33333%;
693 margin-left: 0;
694 }
695
696 .row .col.l9 {
697 width: 91.66667%;
698 margin-left: 0;
699 }
700
701 .row .col.l10 {
702 width: 100%;
703 margin-left: 0;
704 }
705}
706
707@media only screen and (max-width: 350px) {
708 .nb-results {
709 display: none;
710 }
711}
712
713/* ==========================================================================
714 7 = Font
715 ========================================================================== */
716
717.icon-google-plus2::before {
718 content: "\ea89";
719}
720
721.icon-facebook2::before {
722 content: "\ea8d";
723}
724
725.icon-twitter::before {
726 content: "\ea96";
727}
728
729.icon-apple::before {
730 content: "\eabf";
731}
732
733.icon-android::before {
734 content: "\eac1";
735}
736
737.icon-chrome::before {
738 content: "\eae5";
739}
740
741.icon-firefox::before {
742 content: "\eae6";
743}
744
745.icon-link::before {
746 content: "\e9cb";
747}
748
749footer [class^="icon-"],
750footer [class*=" icon-"] {
751 font-size: 2em;
752 transition: text-shadow 0.2s ease;
753 padding-right: 10px;
754}
755
756footer [class^="icon-"]:hover,
757footer [class*=" icon-"]:hover {
758 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
759}
760
761/* ==========================================================================
762 8 = Others
763 ========================================================================== */
764
765/* force height on non-input field in the settings page */
766div.settings div.input-field div,
767div.settings div.input-field ul {
768 margin-top: 40px;
769}
770
771/* but avoid to kill all file input */
772div.settings div.file-field div {
773 margin-top: inherit;
774}
775
776.input-field label.active {
777 font-size: 1rem;
778}
779
780nav .input-field input {
781 margin: 0;
782}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.css
new file mode 100755
index 00000000..98505aae
--- /dev/null
+++ b/app/Resources/static/themes/material/css/print.css
@@ -0,0 +1,77 @@
1@media print {
2 /* ### Layout ### */
3
4 body {
5 font-family: Serif;
6 background-color: #fff;
7 }
8
9 @page {
10 margin: 1cm;
11 }
12
13 img {
14 max-width: 100% !important;
15 }
16
17 /* ### Content ### */
18
19 /* Hide useless blocks */
20 body > header,
21 #article_toolbar,
22 #links,
23 #sort,
24 body > footer,
25 .top_link,
26 div.tools,
27 header div,
28 .messages,
29 .entry + .results,
30 #slide-out,
31 .progress,
32 .hide-on-large-only,
33 #article > aside,
34 #article .mbm a {
35 display: none !important;
36 }
37
38 main {
39 padding-left: 0 !important;
40 }
41
42 #article {
43 margin: inherit !important;
44 }
45
46 article {
47 border: none !important;
48 }
49
50 /* Add URL after links */
51 .vieworiginal a::after {
52 content: " (" attr(href) ")";
53 }
54
55 /* Add explanation after abbr */
56 abbr[title]::after {
57 content: " (" attr(title) ")";
58 }
59
60 /* Change border on current pager item */
61 .pagination span.current {
62 border-style: dashed;
63 }
64
65 #main {
66 width: 100%;
67 padding: 0;
68 margin: 0;
69 margin-left: 0;
70 padding-right: 0;
71 padding-bottom: 0;
72 }
73
74 #article {
75 width: 100%;
76 }
77}
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js
new file mode 100755
index 00000000..a68269e0
--- /dev/null
+++ b/app/Resources/static/themes/material/js/init.js
@@ -0,0 +1,99 @@
1import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
2
3const $ = require('jquery');
4
5global.jQuery = $;
6require('materialize'); // eslint-disable-line
7const annotator = require('annotator');
8
9$(document).ready(() => {
10 // sideNav
11 $('.button-collapse').sideNav();
12 $('select').material_select();
13 $('.collapsible').collapsible({
14 accordion: false,
15 });
16 $('.datepicker').pickadate({
17 selectMonths: true,
18 selectYears: 15,
19 formatSubmit: 'dd/mm/yyyy',
20 hiddenName: true,
21 format: 'dd/mm/yyyy',
22 });
23 initFilters();
24 initExport();
25
26 $('#nav-btn-add-tag').on('click', () => {
27 $('.nav-panel-add-tag').toggle(100);
28 $('.nav-panel-menu').addClass('hidden');
29 $('#tag_label').focus();
30 return false;
31 });
32 $('#nav-btn-add').on('click', () => {
33 $('.nav-panel-buttom').hide(100);
34 $('.nav-panel-add').show(100);
35 $('.nav-panels .action').hide(100);
36 $('.nav-panel-menu').addClass('hidden');
37 $('.nav-panels').css('background', 'white');
38 $('#entry_url').focus();
39 return false;
40 });
41 $('#nav-btn-search').on('click', () => {
42 $('.nav-panel-buttom').hide(100);
43 $('.nav-panel-search').show(100);
44 $('.nav-panels .action').hide(100);
45 $('.nav-panel-menu').addClass('hidden');
46 $('.nav-panels').css('background', 'white');
47 $('#searchfield').focus();
48 return false;
49 });
50 $('.close').on('click', () => {
51 $('.nav-panel-add').hide(100);
52 $('.nav-panel-search').hide(100);
53 $('.nav-panel-buttom').show(100);
54 $('.nav-panels .action').show(100);
55 $('.nav-panel-menu').removeClass('hidden');
56 $('.nav-panels').css('background', 'transparent');
57 return false;
58 });
59 $(window).scroll(() => {
60 const s = $(window).scrollTop();
61 const d = $(document).height();
62 const c = $(window).height();
63 const scrollPercent = (s / (d - c)) * 100;
64 $('.progress .determinate').css('width', `${scrollPercent}%`);
65 });
66
67/* ==========================================================================
68 Annotations & Remember position
69 ========================================================================== */
70
71 if ($('article').length) {
72 const app = new annotator.App();
73 const x = JSON.parse($('#annotationroutes').html());
74
75 app.include(annotator.ui.main, {
76 element: document.querySelector('article'),
77 });
78
79 app.include(annotator.storage.http, x);
80
81 app.start().then(() => {
82 app.annotations.load({ entry: x.entryId });
83 });
84
85 $(window).scroll(() => {
86 const scrollTop = $(window).scrollTop();
87 const docHeight = $(document).height();
88 const scrollPercent = (scrollTop) / (docHeight);
89 const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
90 savePercent(x.entryId, scrollPercentRounded);
91 });
92
93 retrievePercent(x.entryId);
94
95 $(window).resize(() => {
96 retrievePercent(x.entryId);
97 });
98 }
99});