]> git.immae.eu Git - github/wallabag/wallabag.git/blame - app/Resources/static/themes/material/css/cards.scss
Merge pull request #3775 from wallabag/prepare-2.3.4
[github/wallabag/wallabag.git] / app / Resources / static / themes / material / css / cards.scss
CommitLineData
64f81bc3
TC
1/* ==========================================================================
2 Cards
3 ========================================================================== */
4
5main {
6 #content {
7 padding: 0 0.5rem;
8 }
9
10 ul.row {
f836b98f 11 margin: 0.4rem 0 0;
64f81bc3
TC
12 padding: 0 0.75rem;
13 }
14}
15
16.data .card .card-body {
17 height: 19em;
18 overflow: hidden;
19}
20
21.card {
22 .card-content .card-title,
23 .card-reveal .card-title {
24 line-height: 22.8px;
25 max-height: 80px;
26 font-size: 19px;
27 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
64f81bc3
TC
28 }
29
ff5cdbdc 30 .card-stacked .card-content .card-title {
34806fab
A
31 display: inline-block;
32 }
33
64f81bc3
TC
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);
64f81bc3
TC
70 overflow: hidden;
71 text-overflow: ellipsis;
72 white-space: nowrap;
73 }
74
75 .card-content .estimatedTime {
76 margin-bottom: 10px;
77 }
78
79 .card-action {
80 padding: 10px 5px 10px 15px;
81
82 ul.links {
83 margin: 0;
84 font-size: 24px;
85 line-height: 24px;
86 }
87
88 a {
89 color: #fff;
90 margin: 0;
91 }
92
93 a:hover {
94 color: #fff;
95 }
96
97 ul.tools li a.tool {
98 margin-right: 5px !important;
99 }
100
101 .reading-time {
102 display: inline-flex;
103 vertical-align: middle;
34806fab
A
104
105 span {
106 margin-right: 5px;
107 }
64f81bc3
TC
108 }
109 }
110
64f81bc3
TC
111 .card-image {
112 height: 10em;
113 }
114
115 .card-fullimage {
116 height: 13.5em;
117 }
118
119 .card-image .preview,
120 .card-fullimage .preview {
2daae770 121 height: 100%;
64f81bc3 122 background: no-repeat 50%/cover;
2daae770 123 background-color: #efefef;
2f510787 124 display: block;
64f81bc3 125
2daae770
S
126 &--default {
127 background-size: contain;
128 }
cefbe6a8
MB
129 }
130
64f81bc3
TC
131 &.sw {
132 max-width: 370px;
133 margin-left: auto;
134 margin-right: auto;
135 }
136}
137
4c6ee89c 138a.original:not(.waves-effect) {
64f81bc3
TC
139 text-overflow: ellipsis;
140 white-space: nowrap;
141 overflow: hidden;
142 display: block;
143}
144
2003ffa9
TC
145.card-entry-labels li,
146.card-tag-labels li {
147 margin: 10px 10px 10px auto;
148 padding: 5px 12px 5px 16px !important;
149 background-color: $blueAccentColor;
7475924e 150 border-radius: 3px;
2003ffa9
TC
151 color: #fff;
152 cursor: default;
3e7d86b2
S
153}
154
155.card-entry-labels li {
2003ffa9
TC
156 text-overflow: ellipsis;
157 white-space: nowrap;
7475924e 158 border-radius: 0 3px 3px 0;
3e7d86b2
S
159 overflow: hidden;
160}
161
162.card-tag-labels li {
163 display: flex;
164 justify-content: space-between;
2003ffa9
TC
165}
166
64f81bc3
TC
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
3e7d86b2
S
177.card-tag-labels a {
178 height: 100%;
179 align-items: center;
180}
181
182.card-tag-link {
183 display: flex;
184 min-width: 100px;
185 flex-grow: 1;
186}
187
188.card-tag-rss {
189 display: flex;
190}
191
192.card-tag-labels {
193 display: flex;
194 flex-wrap: wrap;
195}
196
197.card-tag-labels li {
198 margin: 10px;
199 flex-basis: 19%;
200 flex-grow: 1;
201 align-items: center;
202}
203
64f81bc3 204.card-stacked {
91775f36
TC
205 display: flex;
206 flex-flow: row wrap;
64f81bc3 207
91775f36
TC
208 &:hover ul.tools-list {
209 display: inline;
210 text-align: right;
64f81bc3 211 }
812c980f
NL
212
213 .preview {
91775f36
TC
214 max-width: 100px;
215 height: auto;
216 margin-right: 10px;
217 flex: 1;
812c980f
NL
218
219 img {
91775f36
TC
220 max-width: 100%;
221 max-height: 100%;
222 }
223 }
224
225 div.metadata {
226 .chip {
227 background-color: $blueAccentColor;
228 padding: 0 15px 0 10px;
229 margin: auto 2px;
84b041e8 230 border-radius: 6px;
91775f36
TC
231
232 a,
233 i {
234 color: #fff;
235 }
236
237 i.material-icons {
238 float: right;
239 font-size: 20px;
240 line-height: 32px;
241 padding-left: 8px;
242 }
812c980f
NL
243 }
244 }
245
91775f36
TC
246 div.card-content {
247 flex: 4;
812c980f 248 }
91775f36
TC
249
250 ul.tools-list {
251 flex: 1;
252 display: none;
253 flex-basis: 5em;
254 align-self: flex-end;
255 float: right;
256 max-width: 6em;
257 }
49fb9e7c
S
258
259 .tags {
260 display: inline-block;
261 }
91775f36
TC
262}
263
264#content .collection .collection-item {
265 min-height: 65px;
266 height: auto;
64f81bc3
TC
267}
268
269.quickstart .card .card-action a,
270.quickstart .card .card-action a:hover {
271 color: #fff !important;
272}
273
274.settings .div_tabs {
275 padding-bottom: 15px;
276}
3e7d86b2
S
277
278@media only screen and (min-width: 992px) {
279 .card-tag-labels li {
280 max-width: 50%;
281 }
282}