diff options
Diffstat (limited to 'app/Resources/static/themes/material/css/cards.scss')
-rw-r--r-- | app/Resources/static/themes/material/css/cards.scss | 245 |
1 files changed, 245 insertions, 0 deletions
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..3edbe673 --- /dev/null +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -0,0 +1,245 @@ | |||
1 | /* ========================================================================== | ||
2 | Cards | ||
3 | ========================================================================== */ | ||
4 | |||
5 | main { | ||
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 | |||
146 | a.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 | display: flex; | ||
179 | flex-flow: row wrap; | ||
180 | |||
181 | &:hover ul.tools-list { | ||
182 | display: inline; | ||
183 | text-align: right; | ||
184 | } | ||
185 | |||
186 | .preview { | ||
187 | max-width: 100px; | ||
188 | height: auto; | ||
189 | margin-right: 10px; | ||
190 | flex: 1; | ||
191 | |||
192 | img { | ||
193 | max-width: 100%; | ||
194 | max-height: 100%; | ||
195 | } | ||
196 | } | ||
197 | |||
198 | div.metadata { | ||
199 | .chip { | ||
200 | background-color: $blueAccentColor; | ||
201 | padding: 0 15px 0 10px; | ||
202 | margin: auto 2px; | ||
203 | border-radius: 6px; | ||
204 | |||
205 | a, | ||
206 | i { | ||
207 | color: #fff; | ||
208 | } | ||
209 | |||
210 | i.material-icons { | ||
211 | float: right; | ||
212 | font-size: 20px; | ||
213 | line-height: 32px; | ||
214 | padding-left: 8px; | ||
215 | } | ||
216 | } | ||
217 | } | ||
218 | |||
219 | div.card-content { | ||
220 | flex: 4; | ||
221 | } | ||
222 | |||
223 | ul.tools-list { | ||
224 | flex: 1; | ||
225 | display: none; | ||
226 | flex-basis: 5em; | ||
227 | align-self: flex-end; | ||
228 | float: right; | ||
229 | max-width: 6em; | ||
230 | } | ||
231 | } | ||
232 | |||
233 | #content .collection .collection-item { | ||
234 | min-height: 65px; | ||
235 | height: auto; | ||
236 | } | ||
237 | |||
238 | .quickstart .card .card-action a, | ||
239 | .quickstart .card .card-action a:hover { | ||
240 | color: #fff !important; | ||
241 | } | ||
242 | |||
243 | .settings .div_tabs { | ||
244 | padding-bottom: 15px; | ||
245 | } | ||