]> git.immae.eu Git - github/wallabag/wallabag.git/blob - app/Resources/static/themes/material/css/cards.scss
Merge pull request #4438 from wallabag/dependabot/composer/scheb/two-factor-bundle...
[github/wallabag/wallabag.git] / app / Resources / static / themes / material / css / cards.scss
1 /* ==========================================================================
2 Cards
3 ========================================================================== */
4
5 main {
6 #content {
7 padding: 0 0.5rem;
8 }
9
10 ul.row {
11 margin: 0.4rem 0 0;
12 padding: 0 0.75rem;
13 }
14 }
15
16 .data .card .card-body {
17 height: 19em;
18 overflow: hidden;
19 }
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
39 .card {
40 .card-content .card-title,
41 .card-reveal .card-title {
42 line-height: 22.8px;
43 max-height: 80px;
44 font-size: 19px;
45 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
46 }
47
48 .card-stacked .card-content .card-title {
49 display: inline-block;
50 }
51
52 .card-content .activator,
53 .card-reveal .activator {
54 cursor: pointer;
55 font-family: "Material Icons";
56 }
57
58 .card-content i.right,
59 .card-reveal i.right {
60 margin-left: 0;
61 }
62
63 .card-content .original {
64 line-height: 24px;
65 font-size: 15px;
66 }
67
68 .card-entry-labels {
69 position: absolute;
70 top: 10px;
71 z-index: 90;
72 max-width: 50%;
73 }
74
75 .card-entry-labels-hidden {
76 margin: 2.5px auto;
77 }
78
79 .card-entry-labels-hidden li {
80 display: inline-block;
81 background-color: $blueAccentColor;
82 margin: 0 5px;
83 padding: 5px 12px;
84 border-radius: 3px;
85 color: #fff;
86 max-height: 2em;
87 max-width: calc(100% - 15px);
88 overflow: hidden;
89 text-overflow: ellipsis;
90 white-space: nowrap;
91 }
92
93 .card-content .estimatedTime {
94 margin-bottom: 10px;
95 }
96
97 .card-action {
98 padding: 10px 5px 10px 15px;
99
100 ul.links {
101 margin: 0;
102 font-size: 24px;
103 line-height: 24px;
104 }
105
106 a {
107 color: #fff;
108 margin: 0;
109 }
110
111 a:hover {
112 color: #fff;
113 }
114
115 ul.tools li a.tool {
116 margin-right: 5px !important;
117 }
118
119 @include mixin-reading-time;
120 }
121
122 .card-image {
123 height: 10em;
124 }
125
126 .card-fullimage {
127 height: 13.5em;
128 }
129
130 &.sw {
131 max-width: 370px;
132 margin-left: auto;
133 margin-right: auto;
134 }
135 }
136
137 a.original:not(.waves-effect) {
138 text-overflow: ellipsis;
139 white-space: nowrap;
140 overflow: hidden;
141 display: block;
142 }
143
144 .card .card-image .preview,
145 .card .card-fullimage .preview,
146 .card-stacked .preview {
147 height: 100%;
148 background: no-repeat 50%/cover;
149 background-color: #efefef;
150 display: block;
151
152 &--default {
153 background-size: contain;
154 }
155 }
156
157 .card-entry-labels li,
158 .card-tag-labels li {
159 margin: 10px 10px 10px auto;
160 padding: 5px 12px 5px 16px !important;
161 background-color: $blueAccentColor;
162 border-radius: 3px;
163 color: #fff;
164 cursor: default;
165 }
166
167 .card-entry-labels li {
168 text-overflow: ellipsis;
169 white-space: nowrap;
170 border-radius: 0 3px 3px 0;
171 overflow: hidden;
172 }
173
174 .card-tag-labels li {
175 display: flex;
176 }
177
178 .card-entry-tags a,
179 .card-entry-labels a,
180 .card-tag-labels a,
181 .card-entry-labels-hidden a,
182 #list .chip a {
183 text-decoration: none;
184 font-weight: normal;
185 color: #fff;
186 }
187
188 .card-tag-link {
189 width: calc(100% - 48px);
190 line-height: 1.3;
191 white-space: nowrap;
192 text-overflow: ellipsis;
193 overflow: hidden;
194 }
195
196 .card-tag-form {
197 display: flex;
198 min-width: 100px;
199 flex-grow: 1;
200 }
201
202 .card-tag-form input {
203 margin-bottom: 0;
204 height: 1.8rem;
205 }
206
207 .card-tag-icon {
208 display: flex;
209 }
210
211 .card-tag-labels {
212 display: grid;
213 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
214 }
215
216 .card-tag-labels li {
217 margin: 10px;
218 align-items: center;
219 }
220
221 .card-stacked {
222 display: flex;
223 flex-flow: row wrap;
224
225 &:hover ul.tools-list {
226 display: inline;
227 text-align: right;
228 }
229
230 .card-preview {
231 max-width: 100px;
232 max-height: 50px;
233 margin-right: 10px;
234 flex: 1;
235 }
236
237 div.metadata {
238 overflow: hidden;
239 height: 1.5em;
240 display: flex;
241
242 ul.tags {
243 margin-left: 4px;
244 }
245
246 .chip {
247 background-color: $blueAccentColor;
248 padding: 0 7px;
249 margin: auto 1px;
250 border-radius: 6px;
251 line-height: 22px;
252 height: 22px;
253
254 a,
255 i {
256 color: #fff;
257 }
258
259 i.material-icons {
260 float: right;
261 font-size: 20px;
262 line-height: 32px;
263 padding-left: 8px;
264 }
265 }
266
267 @include mixin-reading-time {
268 padding: 0 5px;
269 flex-wrap: wrap;
270 margin-left: auto;
271
272 i.material-icons {
273 font-size: 20px;
274 }
275 }
276 }
277
278 div.card-content {
279 flex: 4;
280 }
281
282 ul.tools-list {
283 flex: 1;
284 display: none;
285 flex-basis: 5em;
286 align-self: flex-end;
287 float: right;
288 max-width: 6em;
289 }
290
291 .tags {
292 display: inline-block;
293 }
294 }
295
296 #content .collection .collection-item {
297 min-height: 65px;
298 height: auto;
299 }
300
301 .quickstart .card .card-action a,
302 .quickstart .card .card-action a:hover {
303 color: #fff !important;
304 }
305
306 .settings .div_tabs {
307 padding-bottom: 15px;
308 }