aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material/css
diff options
context:
space:
mode:
Diffstat (limited to 'app/Resources/static/themes/material/css')
-rw-r--r--app/Resources/static/themes/material/css/article.scss189
-rw-r--r--app/Resources/static/themes/material/css/cards.scss194
-rw-r--r--app/Resources/static/themes/material/css/entries.scss87
-rw-r--r--app/Resources/static/themes/material/css/filters.scss15
-rw-r--r--app/Resources/static/themes/material/css/fonts.scss13
-rw-r--r--app/Resources/static/themes/material/css/icons.scss189
-rw-r--r--app/Resources/static/themes/material/css/index.scss17
-rwxr-xr-xapp/Resources/static/themes/material/css/layout.scss50
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css1024
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss149
-rw-r--r--app/Resources/static/themes/material/css/nav.scss106
-rwxr-xr-xapp/Resources/static/themes/material/css/print.scss (renamed from app/Resources/static/themes/material/css/print.css)5
-rw-r--r--app/Resources/static/themes/material/css/sidenav.scss45
-rw-r--r--app/Resources/static/themes/material/css/variables.scss5
-rw-r--r--app/Resources/static/themes/material/css/various.scss32
15 files changed, 1092 insertions, 1028 deletions
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
new file mode 100644
index 00000000..8b67f6bd
--- /dev/null
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -0,0 +1,189 @@
1/* ==========================================================================
2 Article
3 ========================================================================== */
4
5#article {
6 font-size: 20px;
7 margin: 0 auto;
8 max-width: 45em;
9
10 article {
11 color: #424242;
12 font-size: 18px;
13 line-height: 1.7em;
14
15 h1,
16 h2,
17 h3,
18 h4,
19 h5,
20 h6 {
21 color: #212121;
22
23 strong {
24 font-weight: 500;
25 }
26 }
27
28 h6 {
29 font-size: 1.2rem;
30 }
31
32 h5 {
33 font-size: 1.6rem;
34 }
35
36 h4 {
37 font-size: 1.9rem;
38 }
39
40 h3 {
41 font-size: 2.2rem;
42 }
43
44 h2 {
45 font-size: 2.5rem;
46 }
47
48 h1 {
49 font-size: 2.7rem;
50 }
51
52 a {
53 border-bottom: 1px dotted #03a9f4;
54 text-decoration: none;
55 }
56
57 a:hover {
58 border-bottom-style: solid;
59 }
60
61 ul {
62 padding-left: 30px;
63 }
64
65 ul,
66 ul li {
67 list-style-type: disc;
68 }
69
70 blockquote {
71 font-style: italic;
72 }
73
74 strong {
75 font-weight: bold;
76 }
77 }
78
79 img,
80 figure {
81 max-width: 100%;
82 height: auto;
83 }
84
85 pre {
86 box-sizing: border-box;
87 margin: 0 0 1.75em;
88 border: #e3f2fd 1px solid;
89 width: 100%;
90 padding: 10px;
91 font-family: monospace;
92 font-size: 0.8em;
93 white-space: pre;
94 overflow: auto;
95 background: #f5f5f5;
96 border-radius: 3px;
97 }
98
99 > header > h1 {
100 font-size: 2em;
101 margin: 2.1rem 0 0.68rem;
102 }
103
104 aside {
105 .tools {
106 display: flex;
107 flex-flow: row wrap;
108
109 .stats {
110 font-size: 0.8em;
111 margin: 8px 15px 5px;
112
113 li {
114 display: inline-flex;
115 vertical-align: middle;
116 margin: 0 5px;
117 }
118
119 a {
120 color: #000;
121 text-decoration: none;
122 }
123 }
124
125 .tags {
126 float: right;
127 margin: 5px 15px 10px;
128 }
129 }
130
131 .chip {
132 background-color: $blueAccentColor;
133 padding: 0 15px 0 10px;
134 margin: auto 2px;
135
136 a,
137 i {
138 color: #fff;
139 }
140
141 i.material-icons {
142 float: right;
143 font-size: 20px;
144 line-height: 32px;
145 padding-left: 8px;
146 }
147 }
148 }
149}
150
151.reader-mode {
152 width: 70px !important;
153 transition: width 0.2s ease;
154
155 .collapsible-body {
156 height: 0;
157 overflow: hidden;
158 }
159
160 span {
161 opacity: 0;
162 transition: opacity 0.2s ease;
163 }
164
165 &:hover {
166 width: 260px !important;
167
168 .collapsible-body {
169 height: auto;
170
171 li a i.material-icons {
172 margin: auto 5px auto -8px;
173 }
174 }
175
176 span {
177 opacity: 1;
178 }
179 }
180}
181
182.progress {
183 position: fixed;
184 top: 0;
185 width: 100%;
186 height: 3px;
187 margin: 0;
188 z-index: 9999;
189}
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
new file mode 100644
index 00000000..f5b79193
--- /dev/null
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -0,0 +1,194 @@
1/* ==========================================================================
2 Cards
3 ========================================================================== */
4
5main {
6 #content {
7 padding: 0 0.5rem;
8 }
9
10 ul.row {
11 padding: 0 0.75rem;
12 }
13}
14
15.data .card .card-body {
16 height: 19em;
17 overflow: hidden;
18}
19
20.card {
21 .card-content .card-title,
22 .card-reveal .card-title {
23 line-height: 22.8px;
24 max-height: 80px;
25 font-size: 19px;
26 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
27 color: #313131;
28 }
29
30 .card-stacked .card-content .card-title {
31 display: inline-block;
32 }
33
34 .card-content .activator,
35 .card-reveal .activator {
36 cursor: pointer;
37 font-family: "Material Icons";
38 }
39
40 .card-content i.right,
41 .card-reveal i.right {
42 margin-left: 0;
43 }
44
45 .card-content .original {
46 line-height: 24px;
47 font-size: 15px;
48 }
49
50 .card-entry-labels {
51 position: absolute;
52 top: 10px;
53 z-index: 90;
54 max-width: 50%;
55 }
56
57 .card-entry-labels-hidden {
58 margin: 2.5px auto;
59 }
60
61 .card-entry-labels-hidden li {
62 display: inline-block;
63 background-color: $blueAccentColor;
64 margin: 0 5px;
65 padding: 5px 12px;
66 border-radius: 3px;
67 color: #fff;
68 max-height: 2em;
69 max-width: calc(100% - 15px);
70 overflow: hidden;
71 text-overflow: ellipsis;
72 white-space: nowrap;
73 }
74
75 .card-entry-labels-hidden li {
76 display: inline-block;
77 background-color: $blueAccentColor;
78 margin: 0 5px;
79 padding: 5px 12px;
80 border-radius: 3px;
81 color: #fff;
82 max-height: 2em;
83 max-width: calc(100% - 15px);
84 overflow: hidden;
85 text-overflow: ellipsis;
86 white-space: nowrap;
87 }
88
89 .card-content .estimatedTime {
90 margin-bottom: 10px;
91 }
92
93 .card-action {
94 padding: 10px 5px 10px 15px;
95
96 ul.links {
97 margin: 0;
98 font-size: 24px;
99 line-height: 24px;
100 }
101
102 a {
103 color: #fff;
104 margin: 0;
105 }
106
107 a:hover {
108 color: #fff;
109 }
110
111 ul.tools li a.tool {
112 margin-right: 5px !important;
113 }
114
115 .reading-time {
116 display: inline-flex;
117 vertical-align: middle;
118
119 span {
120 margin-right: 5px;
121 }
122 }
123 }
124
125 .card-image {
126 height: 10em;
127 }
128
129 .card-fullimage {
130 height: 13.5em;
131 }
132
133 .card-image .preview,
134 .card-fullimage .preview {
135 height: 14em;
136 background: no-repeat 50%/cover;
137 }
138
139 &.sw {
140 max-width: 370px;
141 margin-left: auto;
142 margin-right: auto;
143 }
144}
145
146a.original:not(.waves-effect) {
147 text-overflow: ellipsis;
148 white-space: nowrap;
149 overflow: hidden;
150 display: block;
151}
152
153.card-entry-labels li,
154.card-tag-labels li {
155 margin: 10px 10px 10px auto;
156 padding: 5px 12px 5px 16px !important;
157 background-color: $blueAccentColor;
158 border-radius: 0 3px 3px 0;
159 color: #fff;
160 cursor: default;
161 max-height: 2em;
162 overflow: hidden;
163 text-overflow: ellipsis;
164 white-space: nowrap;
165}
166
167.card-entry-tags a,
168.card-entry-labels a,
169.card-tag-labels a,
170.card-entry-labels-hidden a,
171#list .chip a {
172 text-decoration: none;
173 font-weight: normal;
174 color: #fff;
175}
176
177.card-stacked {
178 &:hover ul.tools-list {
179 display: block;
180 }
181
182 ul.tools-list {
183 display: none;
184 }
185}
186
187.quickstart .card .card-action a,
188.quickstart .card .card-action a:hover {
189 color: #fff !important;
190}
191
192.settings .div_tabs {
193 padding-bottom: 15px;
194}
diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss
new file mode 100644
index 00000000..b6a46a9e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/entries.scss
@@ -0,0 +1,87 @@
1/* ==========================================================================
2 * Entries
3 * ========================================================================== */
4
5.results {
6 height: 1em;
7
8 .nb-results,
9 .pagination {
10 margin: 15px 15px 0;
11 }
12
13 .nb-results {
14 display: inline-flex;
15 }
16
17 a {
18 color: #444;
19 }
20}
21
22.pagination {
23 float: right;
24
25 ul {
26 margin: 0 !important;
27
28 .prev.disabled,
29 .next.disabled {
30 display: none;
31 }
32 }
33
34 li {
35 padding: 0;
36 }
37
38 a {
39 padding: 0 10px;
40 height: 30px;
41 display: block;
42 }
43
44 .disabled {
45 margin-right: 10px;
46 margin-left: 10px;
47 }
48
49 li.active span {
50 padding: 0 10px;
51 height: 30px;
52 display: block;
53 color: #fff;
54 }
55}
56
57.page-footer .footer-copyright {
58 min-width: 50px;
59 height: auto !important;
60 line-height: 1em !important;
61
62 p {
63 text-overflow: ellipsis;
64 white-space: nowrap;
65 overflow: hidden;
66 display: block;
67 }
68}
69
70.hidden {
71 display: none;
72}
73
74.picker__date-display {
75 display: none;
76}
77
78footer {
79 &.page-footer {
80 margin-top: 10px;
81 padding-top: 0;
82 }
83
84 .row {
85 margin-bottom: 10px;
86 }
87}
diff --git a/app/Resources/static/themes/material/css/filters.scss b/app/Resources/static/themes/material/css/filters.scss
new file mode 100644
index 00000000..299dad3d
--- /dev/null
+++ b/app/Resources/static/themes/material/css/filters.scss
@@ -0,0 +1,15 @@
1/* ==========================================================================
2 * Filters slider
3 * ========================================================================== */
4
5#filters {
6 button {
7 padding: 0;
8 width: 100%;
9 }
10
11 div.with-checkbox {
12 height: 3rem;
13 margin-top: 0;
14 }
15}
diff --git a/app/Resources/static/themes/material/css/fonts.scss b/app/Resources/static/themes/material/css/fonts.scss
new file mode 100644
index 00000000..743f1a84
--- /dev/null
+++ b/app/Resources/static/themes/material/css/fonts.scss
@@ -0,0 +1,13 @@
1/* ==========================================================================
2 * Fonts
3 * ========================================================================== */
4
5/**
6 * Icomoon
7 */
8@font-face {
9 font-family: icomoon;
10 src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
11 font-weight: normal;
12 font-style: normal;
13}
diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss
new file mode 100644
index 00000000..e7f215c0
--- /dev/null
+++ b/app/Resources/static/themes/material/css/icons.scss
@@ -0,0 +1,189 @@
1/* ==========================================================================
2 * Icons
3 * ========================================================================== */
4
5/**
6 *
7 * Material icons
8 *
9 */
10.material-icons {
11 font-family: 'Material Icons';
12 font-weight: normal;
13 font-style: normal;
14 font-size: 24px; /* Preferred icon size */
15 width: 1em;
16 height: 1em;
17 display: inline-block;
18 line-height: 1;
19 text-transform: none;
20 letter-spacing: normal;
21 word-wrap: normal;
22 white-space: nowrap;
23 direction: ltr;
24
25 /* Support for all WebKit browsers. */
26 -webkit-font-smoothing: antialiased;
27
28 /* Support for Safari and Chrome. */
29 text-rendering: optimizeLegibility;
30
31 /* Support for Firefox. */
32 -moz-osx-font-smoothing: grayscale;
33
34 /* Support for IE. */
35 font-feature-settings: 'liga';
36
37 .md-18 {
38 font-size: 18px;
39 }
40
41 .md-24 {
42 font-size: 24px;
43 }
44
45 .md-36 {
46 font-size: 36px;
47 }
48
49 .md-48 {
50 font-size: 48px;
51 }
52
53 .md-dark {
54 color: rgba(0, 0, 0, 0.54);
55
56 .md-inactive {
57 color: rgba(0, 0, 0, 0.26);
58 }
59 }
60
61 .md-light {
62 color: rgba(255, 255, 255, 1);
63
64 .md-inactive {
65 color: rgba(255, 255, 255, 0.3);
66 }
67 }
68}
69
70/**
71 *
72 * Icomoon icons
73 *
74 */
75[class^="icon-"]::before,
76[class*=" icon-"]::before {
77 font-family: icomoon;
78 speak: none;
79 font-style: normal;
80 font-weight: normal;
81 font-variant: normal;
82 text-transform: none;
83 line-height: 1;
84 background-size: 24px;
85
86 /* Enable Ligatures ================ */
87 letter-spacing: 0;
88 font-feature-settings: "liga";
89}
90
91.icon-eye::before {
92 content: "\e9ce";
93}
94
95.icon-no-eye::before {
96 content: "\e9d1";
97}
98
99.icon-calendar::before {
100 content: "\e953";
101}
102
103.icon-mail::before {
104 content: "\ea86";
105}
106
107.icon-time::before {
108 content: "\e952";
109}
110
111a.icon-image {
112 background-repeat: no-repeat;
113 padding-right: 0.4em !important;
114 padding-left: 0 !important;
115 margin-left: 25px;
116
117 &::before {
118 content: "";
119 display: block;
120 width: 24px;
121 height: 24px;
122 float: left;
123 margin: 7px 1.5px 0 0;
124 }
125
126 &.carrot::before {
127 background: url("../../_global/img/icons/carrot-icon--black.png") no-repeat center/90%;
128 }
129
130 &.diaspora::before {
131 background: url("../../_global/img/icons/diaspora-icon--black.png") no-repeat center/80%;
132 }
133
134 &.unmark::before {
135 background: url("../../_global/img/icons/unmark-icon--black.png") no-repeat center/80%;
136 }
137
138 &.shaarli::before {
139 background: url("../../_global/img/icons/shaarli.png") no-repeat center/80%;
140 }
141
142 &.scuttle::before {
143 background: url("../../_global/img/icons/scuttle.png") no-repeat center/80%;
144 }
145}
146
147.icon-google-plus2::before {
148 content: "\ea89";
149}
150
151.icon-facebook2::before {
152 content: "\ea8d";
153}
154
155.icon-twitter::before {
156 content: "\ea96";
157}
158
159.icon-apple::before {
160 content: "\eabf";
161}
162
163.icon-android::before {
164 content: "\eac1";
165}
166
167.icon-chrome::before {
168 content: "\eae5";
169}
170
171.icon-firefox::before {
172 content: "\eae6";
173}
174
175.icon-link::before {
176 content: "\e9cb";
177}
178
179footer [class^="icon-"],
180footer [class*=" icon-"] {
181 font-size: 2em;
182 transition: text-shadow 0.2s ease;
183 padding-right: 10px;
184}
185
186footer [class^="icon-"]:hover,
187footer [class*=" icon-"]:hover {
188 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
189}
diff --git a/app/Resources/static/themes/material/css/index.scss b/app/Resources/static/themes/material/css/index.scss
new file mode 100644
index 00000000..285a6504
--- /dev/null
+++ b/app/Resources/static/themes/material/css/index.scss
@@ -0,0 +1,17 @@
1@import 'variables';
2
3/* Style */
4@import 'article';
5@import 'cards';
6@import 'entries';
7@import 'filters';
8@import 'layout';
9@import 'nav';
10@import 'sidenav';
11@import 'various';
12
13/* Tools */
14@import 'fonts';
15@import 'icons';
16@import 'print';
17@import 'media_queries';
diff --git a/app/Resources/static/themes/material/css/layout.scss b/app/Resources/static/themes/material/css/layout.scss
new file mode 100755
index 00000000..8b8b06e6
--- /dev/null
+++ b/app/Resources/static/themes/material/css/layout.scss
@@ -0,0 +1,50 @@
1/* ==========================================================================
2 Layout
3 ========================================================================== */
4
5body {
6 display: flex;
7 min-height: 100vh;
8 flex-direction: column;
9 background: #fafafa;
10
11 &.login main {
12 padding: 0;
13 min-height: 100vh;
14 }
15}
16
17.border-bottom {
18 border-bottom: 1px solid #ddd;
19}
20
21nav,
22main,
23footer {
24 padding-left: 240px;
25}
26
27main,
28#content,
29.valign-wrapper {
30 height: 100%;
31}
32
33#main {
34 flex: 1 0 auto;
35
36 .logo {
37 a {
38 height: 100pt;
39 }
40
41 img {
42 height: 100pt;
43 width: 100pt;
44 }
45
46 &:hover {
47 background: transparent;
48 }
49 }
50}
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
168body {
169 display: flex;
170 min-height: 100vh;
171 flex-direction: column;
172 background: #fafafa;
173}
174
175body.login main {
176 padding: 0;
177 min-height: 100vh;
178}
179
180.border-bottom {
181 border-bottom: 1px solid #ddd;
182}
183
184nav,
185main,
186footer {
187 padding-left: 240px;
188}
189
190main,
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
241div.pagination ul .prev.disabled,
242div.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
274footer.page-footer {
275 margin-top: 10px;
276 padding-top: 0;
277}
278
279footer .row {
280 margin-bottom: 10px;
281}
282
283/* ==========================================================================
284 1 = Nav
285 ========================================================================== */
286
287nav input {
288 color: #aaa;
289}
290
291nav {
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
429span.numberItems {
430 float: right;
431}
432
433nav 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
460main #content {
461 padding: 0 0.5rem;
462}
463
464main 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
498a.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
781article 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
991footer [class^="icon-"],
992footer [class*=" icon-"] {
993 font-size: 2em;
994 transition: text-shadow 0.2s ease;
995 padding-right: 10px;
996}
997
998footer [class^="icon-"]:hover,
999footer [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 */
1008div.settings div.input-field div,
1009div.settings div.input-field ul {
1010 margin-top: 40px;
1011}
1012
1013/* but avoid to kill all file input */
1014div.settings div.file-field div {
1015 margin-top: inherit;
1016}
1017
1018.input-field label.active {
1019 font-size: 1rem;
1020}
1021
1022nav .input-field input {
1023 margin: 0;
1024}
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
new file mode 100644
index 00000000..96f34494
--- /dev/null
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -0,0 +1,149 @@
1/* ==========================================================================
2 Media queries
3 ========================================================================== */
4
5@media only screen and (max-width: 992px) {
6 header,
7 main,
8 footer {
9 padding-left: 0;
10 }
11
12 nav,
13 main,
14 footer {
15 padding-left: 0;
16 }
17
18 .pagination {
19 width: auto;
20 }
21
22 .nav-panels .action {
23 padding-right: 0.75rem;
24 }
25
26 .nav-panel-buttom {
27 justify-content: space-around;
28 }
29
30 #article {
31 max-width: 35em;
32 margin-left: auto;
33 margin-right: auto;
34 font-size: 18px;
35
36 > header > h1 {
37 font-size: 1.33em;
38 }
39 }
40
41 .reader-mode {
42 width: 240px !important;
43
44 span {
45 opacity: 1;
46 }
47 }
48
49 .tabs {
50 display: inline-block;
51 height: auto;
52 }
53
54 .tab {
55 min-width: 100%;
56 }
57
58 .indicator {
59 display: none;
60 }
61
62 .pagination li.prev,
63 .pagination li.next {
64 width: auto;
65 }
66
67 .drag-target + .drag-target {
68 height: 50%;
69 }
70
71 .drag-target + .drag-target + .drag-target {
72 top: 50%;
73 }
74}
75
76@media only screen and (min-width: 1200px) and (max-width: 1650px) {
77 .row .col.l3 {
78 width: 33.33333%;
79 margin-left: 0;
80 }
81}
82
83@media only screen and (min-width: 993px) and (max-width: 1200px) {
84 .row {
85 .col.l1 {
86 width: 25%;
87 margin-left: 0;
88 }
89
90 .col.l2 {
91 width: 33.33333%;
92 margin-left: 0;
93 }
94
95 .col.l3 {
96 width: 41.66667%;
97 margin-left: 0;
98 }
99
100 .col.l4 {
101 width: 50%;
102 margin-left: 0;
103 }
104
105 .col.l5 {
106 width: 58.33333%;
107 margin-left: 0;
108 }
109
110 .col.l6 {
111 width: 66.66667%;
112 margin-left: 0;
113 }
114
115 .col.l7 {
116 width: 75%;
117 margin-left: 0;
118 }
119
120 .col.l8 {
121 width: 83.33333%;
122 margin-left: 0;
123 }
124
125 .col.l9 {
126 width: 91.66667%;
127 margin-left: 0;
128 }
129
130 .col.l10 {
131 width: 100%;
132 margin-left: 0;
133 }
134 }
135}
136
137@media only screen and (max-width: 350px) {
138 .nb-results {
139 display: none;
140 }
141
142 main ul.row {
143 padding: 0;
144 }
145
146 .row .col {
147 padding: 0;
148 }
149}
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
new file mode 100644
index 00000000..1a25a5be
--- /dev/null
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -0,0 +1,106 @@
1
2/* ==========================================================================
3 Nav
4 ========================================================================== */
5
6nav {
7 height: auto;
8
9 input {
10 color: #aaa;
11 }
12
13 ul a:hover {
14 background-color: initial;
15 }
16}
17
18.nav-wrapper {
19 display: flex;
20 flex-wrap: wrap;
21 justify-content: space-between;
22 min-height: 64px;
23
24 .button-collapse {
25 padding: 0 15px;
26 }
27}
28
29.nav-input {
30 display: none;
31}
32
33.nav-panel-buttom {
34 display: flex;
35 flex-grow: 1;
36 justify-content: flex-end;
37
38 li {
39 max-height: 64px;
40 }
41}
42
43.nav-panel-add .add,
44.nav-panel-search .search,
45.nav-panels .close {
46 color: #444 !important;
47}
48
49.nav-panels {
50 transition: background 0.2s ease;
51
52 .action {
53 padding-left: 0.75rem;
54 font-size: 2.1rem;
55 white-space: nowrap;
56 }
57
58 .input-field input {
59 display: block;
60 line-height: inherit;
61 padding-left: 4rem !important;
62 width: calc(100% - 8rem);
63 height: 4.1rem;
64 }
65
66 .input-field input:focus {
67 background-color: #fff;
68 border: 0;
69 box-shadow: none;
70 color: #444;
71 }
72}
73
74.input-field {
75 &.nav-panel-add label,
76 &.nav-panel-search label {
77 left: 1rem;
78 }
79
80 &.nav-panel-add .close,
81 &.nav-panel-search .close {
82 position: absolute;
83 top: 0;
84 right: 1rem;
85 color: transparent;
86 cursor: pointer;
87 font-size: 2rem;
88 transition: 0.3s color;
89 }
90
91 &.nav-panel-add,
92 &.nav-panel-add form,
93 &.nav-panel-search,
94 &.nav-panel-search form {
95 display: flex;
96 flex: 1;
97 }
98}
99
100#button_filters {
101 display: none;
102}
103
104#button_export {
105 display: none;
106}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.scss
index 98505aae..967a8c2b 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.scss
@@ -64,11 +64,8 @@
64 64
65 #main { 65 #main {
66 width: 100%; 66 width: 100%;
67 padding: 0;
68 margin: 0; 67 margin: 0;
69 margin-left: 0; 68 padding: 0;
70 padding-right: 0;
71 padding-bottom: 0;
72 } 69 }
73 70
74 #article { 71 #article {
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss
new file mode 100644
index 00000000..416dc1c7
--- /dev/null
+++ b/app/Resources/static/themes/material/css/sidenav.scss
@@ -0,0 +1,45 @@
1/* ==========================================================================
2 Side-nav
3 ========================================================================== */
4
5.side-nav {
6 width: 240px;
7
8 li {
9 padding: 0;
10
11 &.logo > a:hover {
12 background: initial;
13 }
14 }
15
16 a {
17 margin: 0;
18 }
19
20 &.fixed a {
21 font-size: 13px;
22 line-height: 44px;
23 height: 44px;
24 }
25
26 .collapsible-header,
27 &.fixed .collapsible-header {
28 height: 45px;
29 line-height: 44px;
30 padding: 0 20px;
31 }
32
33 > li.logo {
34 line-height: 0;
35 text-align: center;
36 }
37}
38
39.bold > a {
40 font-weight: bold;
41}
42
43span.numberItems {
44 float: right;
45}
diff --git a/app/Resources/static/themes/material/css/variables.scss b/app/Resources/static/themes/material/css/variables.scss
new file mode 100644
index 00000000..25e22aca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/variables.scss
@@ -0,0 +1,5 @@
1/* ==========================================================================
2 Variables
3 ========================================================================== */
4
5$blueAccentColor: rgba(0, 151, 167, 0.85);
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
new file mode 100644
index 00000000..7daf40ec
--- /dev/null
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -0,0 +1,32 @@
1/* ==========================================================================
2 * Various
3 * ========================================================================== */
4
5div.settings div.file-field {
6 /* force height on non-input field in the settings page */
7 div,
8 ul {
9 margin-top: 40px;
10 }
11
12 /* but avoid to kill all file input */
13 div {
14 margin-top: inherit;
15 }
16}
17
18.input-field label.active {
19 font-size: 1rem;
20}
21
22nav .input-field input {
23 margin: 0;
24}
25
26.tabs {
27 display: flex;
28}
29
30.tab {
31 flex: 1;
32}
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-28 09:27:36 +0000