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