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