diff options
Diffstat (limited to 'app/Resources/static/themes/material/css')
4 files changed, 92 insertions, 23 deletions
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss index 75658a58..755372c9 100644 --- a/app/Resources/static/themes/material/css/article.scss +++ b/app/Resources/static/themes/material/css/article.scss | |||
@@ -5,6 +5,7 @@ | |||
5 | #article { | 5 | #article { |
6 | font-size: 20px; | 6 | font-size: 20px; |
7 | margin: 0 auto; | 7 | margin: 0 auto; |
8 | padding-bottom: 80px; | ||
8 | max-width: 45em; | 9 | max-width: 45em; |
9 | 10 | ||
10 | article { | 11 | article { |
@@ -172,18 +173,18 @@ | |||
172 | &:hover { | 173 | &:hover { |
173 | width: 260px !important; | 174 | width: 260px !important; |
174 | 175 | ||
175 | .collapsible-body { | ||
176 | height: auto; | ||
177 | |||
178 | li a i.material-icons { | ||
179 | margin: auto 5px auto -8px; | ||
180 | } | ||
181 | } | ||
182 | |||
183 | span { | 176 | span { |
184 | opacity: 1; | 177 | opacity: 1; |
185 | } | 178 | } |
186 | } | 179 | } |
180 | |||
181 | .collapsible-body { | ||
182 | height: auto; | ||
183 | |||
184 | li a i.material-icons { | ||
185 | margin: auto 5px auto -8px; | ||
186 | } | ||
187 | } | ||
187 | } | 188 | } |
188 | 189 | ||
189 | .progress { | 190 | .progress { |
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index 4f67e038..9ae1be82 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -18,6 +18,24 @@ main { | |||
18 | overflow: hidden; | 18 | overflow: hidden; |
19 | } | 19 | } |
20 | 20 | ||
21 | @mixin mixin-reading-time { | ||
22 | .reading-time { | ||
23 | display: inline-flex; | ||
24 | vertical-align: middle; | ||
25 | |||
26 | .card-reading-time, | ||
27 | .card-created-at { | ||
28 | display: inline-flex; | ||
29 | } | ||
30 | |||
31 | span { | ||
32 | margin-right: 5px; | ||
33 | } | ||
34 | |||
35 | @content; | ||
36 | } | ||
37 | } | ||
38 | |||
21 | .card { | 39 | .card { |
22 | .card-content .card-title, | 40 | .card-content .card-title, |
23 | .card-reveal .card-title { | 41 | .card-reveal .card-title { |
@@ -98,14 +116,7 @@ main { | |||
98 | margin-right: 5px !important; | 116 | margin-right: 5px !important; |
99 | } | 117 | } |
100 | 118 | ||
101 | .reading-time { | 119 | @include mixin-reading-time; |
102 | display: inline-flex; | ||
103 | vertical-align: middle; | ||
104 | |||
105 | span { | ||
106 | margin-right: 5px; | ||
107 | } | ||
108 | } | ||
109 | } | 120 | } |
110 | 121 | ||
111 | .card-image { | 122 | .card-image { |
@@ -186,6 +197,17 @@ a.original:not(.waves-effect) { | |||
186 | flex-grow: 1; | 197 | flex-grow: 1; |
187 | } | 198 | } |
188 | 199 | ||
200 | .card-tag-form { | ||
201 | display: flex; | ||
202 | min-width: 100px; | ||
203 | flex-grow: 1; | ||
204 | } | ||
205 | |||
206 | .card-tag-form input { | ||
207 | margin-bottom: 0; | ||
208 | height: 2rem; | ||
209 | } | ||
210 | |||
189 | .card-tag-rss { | 211 | .card-tag-rss { |
190 | display: flex; | 212 | display: flex; |
191 | } | 213 | } |
@@ -219,10 +241,18 @@ a.original:not(.waves-effect) { | |||
219 | } | 241 | } |
220 | 242 | ||
221 | div.metadata { | 243 | div.metadata { |
244 | overflow: hidden; | ||
245 | height: 1.5em; | ||
246 | display: flex; | ||
247 | |||
248 | ul.tags { | ||
249 | margin-left: 4px; | ||
250 | } | ||
251 | |||
222 | .chip { | 252 | .chip { |
223 | background-color: $blueAccentColor; | 253 | background-color: $blueAccentColor; |
224 | padding: 0 7px; | 254 | padding: 0 7px; |
225 | margin: auto 2px; | 255 | margin: auto 1px; |
226 | border-radius: 6px; | 256 | border-radius: 6px; |
227 | line-height: 22px; | 257 | line-height: 22px; |
228 | height: 22px; | 258 | height: 22px; |
@@ -239,6 +269,16 @@ a.original:not(.waves-effect) { | |||
239 | padding-left: 8px; | 269 | padding-left: 8px; |
240 | } | 270 | } |
241 | } | 271 | } |
272 | |||
273 | @include mixin-reading-time { | ||
274 | padding: 0 5px; | ||
275 | flex-wrap: wrap; | ||
276 | margin-left: auto; | ||
277 | |||
278 | i.material-icons { | ||
279 | font-size: 20px; | ||
280 | } | ||
281 | } | ||
242 | } | 282 | } |
243 | 283 | ||
244 | div.card-content { | 284 | div.card-content { |
@@ -272,9 +312,3 @@ a.original:not(.waves-effect) { | |||
272 | .settings .div_tabs { | 312 | .settings .div_tabs { |
273 | padding-bottom: 15px; | 313 | padding-bottom: 15px; |
274 | } | 314 | } |
275 | |||
276 | @media only screen and (min-width: 992px) { | ||
277 | .card-tag-labels li { | ||
278 | max-width: 50%; | ||
279 | } | ||
280 | } | ||
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss index 72584426..4242ead2 100644 --- a/app/Resources/static/themes/material/css/media_queries.scss +++ b/app/Resources/static/themes/material/css/media_queries.scss | |||
@@ -12,6 +12,16 @@ | |||
12 | .pagination { | 12 | .pagination { |
13 | margin-left: auto; | 13 | margin-left: auto; |
14 | } | 14 | } |
15 | |||
16 | .card-tag-labels li { | ||
17 | max-width: 50%; | ||
18 | } | ||
19 | } | ||
20 | |||
21 | @media screen and (min-width: 993px) { | ||
22 | body.entry main #content { | ||
23 | padding-left: 70px; | ||
24 | } | ||
15 | } | 25 | } |
16 | 26 | ||
17 | @media only screen and (max-width: 992px) { | 27 | @media only screen and (max-width: 992px) { |
@@ -163,4 +173,23 @@ | |||
163 | .row .col { | 173 | .row .col { |
164 | padding: 0; | 174 | padding: 0; |
165 | } | 175 | } |
176 | |||
177 | .card-stacked div.metadata .reading-time { | ||
178 | display: none; | ||
179 | } | ||
180 | } | ||
181 | |||
182 | @media screen and (max-width: 310px), | ||
183 | screen and (min-width: 601px) and (max-width: 660px), | ||
184 | screen and (min-width: 993px) and (max-width: 1050px), | ||
185 | screen and (min-width: 1201px) and (max-width: 1250px) { | ||
186 | .card .card-action .reading-time .card-created-at { | ||
187 | display: none; | ||
188 | } | ||
189 | } | ||
190 | |||
191 | @media only print { | ||
192 | body { | ||
193 | display: block; | ||
194 | } | ||
166 | } | 195 | } |
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss index 147f163f..b7288278 100644 --- a/app/Resources/static/themes/material/css/nav.scss +++ b/app/Resources/static/themes/material/css/nav.scss | |||
@@ -131,6 +131,11 @@ nav { | |||
131 | display: none; | 131 | display: none; |
132 | } | 132 | } |
133 | 133 | ||
134 | .entry-nav-top--sticky { | ||
135 | position: sticky; | ||
136 | top: 0; | ||
137 | } | ||
138 | |||
134 | @media (min-width: 993px) { | 139 | @media (min-width: 993px) { |
135 | .button-collapse { | 140 | .button-collapse { |
136 | display: none; | 141 | display: none; |