diff options
Diffstat (limited to 'app/Resources/static/themes/baggy/css/layout.scss')
-rw-r--r-- | app/Resources/static/themes/baggy/css/layout.scss | 300 |
1 files changed, 300 insertions, 0 deletions
diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss new file mode 100644 index 00000000..cb14e62d --- /dev/null +++ b/app/Resources/static/themes/baggy/css/layout.scss | |||
@@ -0,0 +1,300 @@ | |||
1 | #content { | ||
2 | margin-top: 2em; | ||
3 | min-height: 30em; | ||
4 | } | ||
5 | |||
6 | footer { | ||
7 | text-align: right; | ||
8 | position: relative; | ||
9 | bottom: 0; | ||
10 | right: 5em; | ||
11 | color: #999; | ||
12 | font-size: 0.8em; | ||
13 | font-style: italic; | ||
14 | z-index: 20; | ||
15 | |||
16 | a { | ||
17 | color: #999; | ||
18 | font-weight: normal; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .list-entries { | ||
23 | letter-spacing: -5px; | ||
24 | } | ||
25 | |||
26 | .listmode.entry { | ||
27 | width: 100%; | ||
28 | height: inherit; | ||
29 | } | ||
30 | |||
31 | .card-entry-tags { | ||
32 | max-height: 2em; | ||
33 | overflow-y: hidden; | ||
34 | padding: 0; | ||
35 | margin: 0; | ||
36 | } | ||
37 | |||
38 | .card-entry-tags li, | ||
39 | .card-entry-tags span { | ||
40 | display: inline-block; | ||
41 | margin: 0 5px; | ||
42 | padding: 5px 12px; | ||
43 | background-color: rgba(0, 0, 0, 0.6); | ||
44 | border-radius: 3px; | ||
45 | max-height: 2em; | ||
46 | overflow: hidden; | ||
47 | text-overflow: ellipsis; | ||
48 | } | ||
49 | |||
50 | .card-entry-tags a, | ||
51 | .card-entry-labels a { | ||
52 | text-decoration: none; | ||
53 | font-weight: normal; | ||
54 | color: #fff; | ||
55 | } | ||
56 | |||
57 | .nav-panel-add-tag { | ||
58 | margin-top: 10px; | ||
59 | } | ||
60 | |||
61 | .list-entries + .results { | ||
62 | margin-bottom: 2em; | ||
63 | } | ||
64 | |||
65 | .reading-time, | ||
66 | .created-at { | ||
67 | color: #999; | ||
68 | font-style: italic; | ||
69 | font-weight: normal; | ||
70 | font-size: 0.9em; | ||
71 | } | ||
72 | |||
73 | .estimatedTime small { | ||
74 | position: relative; | ||
75 | top: -1px; | ||
76 | } | ||
77 | |||
78 | .entry { | ||
79 | background-color: #fff; | ||
80 | letter-spacing: normal; | ||
81 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); | ||
82 | display: inline-block; | ||
83 | width: 32%; | ||
84 | margin-bottom: 1.5em; | ||
85 | vertical-align: top; | ||
86 | margin-right: 1%; | ||
87 | position: relative; | ||
88 | overflow: hidden; | ||
89 | padding: 1.5em 0 3em; | ||
90 | height: 440px; | ||
91 | |||
92 | img.preview { | ||
93 | width: 100%; | ||
94 | object-fit: cover; | ||
95 | height: 100%; | ||
96 | } | ||
97 | |||
98 | &::before { | ||
99 | content: ""; | ||
100 | width: 0; | ||
101 | height: 0; | ||
102 | border: 10px solid transparent; | ||
103 | border-bottom-color: #000; | ||
104 | position: absolute; | ||
105 | bottom: 0.7em; | ||
106 | z-index: 10; | ||
107 | right: 1.5em; | ||
108 | transition: all 0.5s ease; | ||
109 | } | ||
110 | |||
111 | &::after { | ||
112 | content: ""; | ||
113 | position: absolute; | ||
114 | height: 7px; | ||
115 | width: 100%; | ||
116 | bottom: 0; | ||
117 | left: 0; | ||
118 | background-color: #000; | ||
119 | transition: all 0.5s ease; | ||
120 | } | ||
121 | |||
122 | &:hover { | ||
123 | box-shadow: 0 3px 10px rgba(0, 0, 0, 1); | ||
124 | |||
125 | &::after { | ||
126 | height: 40px; | ||
127 | } | ||
128 | |||
129 | &::before { | ||
130 | bottom: 2.3em; | ||
131 | } | ||
132 | |||
133 | h2 a { | ||
134 | color: #666; | ||
135 | } | ||
136 | |||
137 | .tools { | ||
138 | bottom: 0; | ||
139 | } | ||
140 | } | ||
141 | |||
142 | h2 { | ||
143 | text-transform: none; | ||
144 | margin-bottom: 0; | ||
145 | line-height: 1.2; | ||
146 | margin-left: 5px; | ||
147 | } | ||
148 | |||
149 | &::after { | ||
150 | content: none; | ||
151 | } | ||
152 | |||
153 | a { | ||
154 | display: block; | ||
155 | text-decoration: none; | ||
156 | color: #000; | ||
157 | word-wrap: break-word; | ||
158 | transition: all 0.5s ease; | ||
159 | } | ||
160 | |||
161 | p { | ||
162 | color: #666; | ||
163 | font-size: 0.9em; | ||
164 | line-height: 1.7; | ||
165 | margin: 5px 5px auto; | ||
166 | } | ||
167 | |||
168 | h2 a::first-letter { | ||
169 | text-transform: uppercase; | ||
170 | } | ||
171 | |||
172 | .tools { | ||
173 | position: absolute; | ||
174 | bottom: -40px; | ||
175 | left: 0; | ||
176 | background: #000; | ||
177 | width: 100%; | ||
178 | z-index: 10; | ||
179 | padding-right: 0.5em; | ||
180 | text-align: right; | ||
181 | transition: all 0.5s ease; | ||
182 | |||
183 | a { | ||
184 | color: #666; | ||
185 | text-decoration: none; | ||
186 | display: block; | ||
187 | padding: 0.4em; | ||
188 | |||
189 | &:hover { | ||
190 | color: #fff; | ||
191 | } | ||
192 | } | ||
193 | |||
194 | li { | ||
195 | display: inline-block; | ||
196 | margin-top: 10px; | ||
197 | } | ||
198 | |||
199 | li:first-child { | ||
200 | float: left; | ||
201 | font-size: 0.9em; | ||
202 | max-width: calc(100% - 40px * 4); | ||
203 | text-overflow: ellipsis; | ||
204 | overflow: hidden; | ||
205 | white-space: nowrap; | ||
206 | max-height: 2em; | ||
207 | margin-left: 10px; | ||
208 | } | ||
209 | } | ||
210 | |||
211 | .card-entry-labels { | ||
212 | position: absolute; | ||
213 | top: 100px; | ||
214 | left: -1em; | ||
215 | z-index: 90; | ||
216 | max-width: 50%; | ||
217 | padding-left: 0; | ||
218 | |||
219 | li { | ||
220 | margin: 10px 10px 10px auto; | ||
221 | padding: 5px 12px 5px 25px; | ||
222 | background-color: rgba(0, 0, 0, 0.6); | ||
223 | border-radius: 0 3px 3px 0; | ||
224 | color: #fff; | ||
225 | cursor: default; | ||
226 | max-height: 2em; | ||
227 | overflow: hidden; | ||
228 | text-overflow: ellipsis; | ||
229 | white-space: nowrap; | ||
230 | |||
231 | a { | ||
232 | color: #fff; | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | } | ||
237 | |||
238 | .entry:nth-child(3n+1) { | ||
239 | margin-left: 0; | ||
240 | } | ||
241 | |||
242 | .results { | ||
243 | letter-spacing: -5px; | ||
244 | padding: 0 0 0.5em; | ||
245 | |||
246 | > * { | ||
247 | display: inline-block; | ||
248 | vertical-align: top; | ||
249 | letter-spacing: normal; | ||
250 | width: 50%; | ||
251 | text-align: right; | ||
252 | } | ||
253 | } | ||
254 | |||
255 | div.pagination ul { | ||
256 | text-align: right; | ||
257 | } | ||
258 | |||
259 | .nb-results { | ||
260 | text-align: left; | ||
261 | font-style: italic; | ||
262 | color: #999; | ||
263 | display: inline-flex; | ||
264 | } | ||
265 | |||
266 | div.pagination ul { | ||
267 | a { | ||
268 | color: #999; | ||
269 | text-decoration: none; | ||
270 | |||
271 | &:hover, | ||
272 | &:focus { | ||
273 | text-decoration: underline; | ||
274 | } | ||
275 | } | ||
276 | |||
277 | > * { | ||
278 | display: inline-block; | ||
279 | margin-left: 0.5em; | ||
280 | } | ||
281 | |||
282 | .prev.disabled, | ||
283 | .next.disabled { | ||
284 | display: none; | ||
285 | } | ||
286 | |||
287 | .current { | ||
288 | height: 25px; | ||
289 | padding: 4px 8px; | ||
290 | border: 1px solid #d5d5d5; | ||
291 | text-decoration: none; | ||
292 | font-weight: bold; | ||
293 | color: #000; | ||
294 | background-color: #ccc; | ||
295 | } | ||
296 | } | ||
297 | |||
298 | .hide { | ||
299 | display: none; | ||
300 | } | ||