Mercurial > addons > firefox-addons > feed-preview
comparison web_resources/style/feed-preview.css @ 0:bc5cc170163c
Initial revision
author | Guido Berhoerster <guido+feed-preview@berhoerster.name> |
---|---|
date | Wed, 03 Oct 2018 23:40:57 +0200 |
parents | |
children | 1c31f4102408 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:bc5cc170163c |
---|---|
1 @import url("common.css"); | |
2 | |
3 html, | |
4 body { | |
5 padding: 16px 32px; | |
6 background: var(--grey-10); | |
7 } | |
8 | |
9 #feed-header { | |
10 max-width: 80ch; | |
11 margin: 0 auto; | |
12 } | |
13 | |
14 #feed-logo { | |
15 float: right; | |
16 max-width: 188px; | |
17 max-height: 48px; | |
18 margin: 0 0 8px 8px; | |
19 } | |
20 | |
21 #feed-title { | |
22 font-size: 1.777em; | |
23 margin: 0 0 4px 0; | |
24 } | |
25 | |
26 #feed-subtitle { | |
27 color: var(--grey-50); | |
28 margin: 0 0 16px 0; | |
29 } | |
30 | |
31 .entry { | |
32 clear: both; | |
33 margin: 16px auto; | |
34 padding: 16px; | |
35 max-width: 80ch; | |
36 background: var(--white-100); | |
37 border-radius: 4px; | |
38 box-shadow: 0 1px 2px var(--grey-90-a40); | |
39 } | |
40 | |
41 details.entry > summary { | |
42 display: flex; | |
43 align-items: center; | |
44 list-style-type: none; | |
45 padding: 0 8px; | |
46 } | |
47 | |
48 details.entry > summary:focus { | |
49 outline: none; | |
50 } | |
51 | |
52 details.entry > summary::before { | |
53 content: url('../images/arrow.svg'); | |
54 width: 16px; | |
55 height: 16px; | |
56 flex: 0 0 16px; | |
57 } | |
58 | |
59 details.entry[open] > summary { | |
60 margin: 0 0 8px 0; | |
61 } | |
62 | |
63 details.entry[open] > summary::before { | |
64 transform: rotate(90deg); | |
65 } | |
66 | |
67 .entry-header { | |
68 margin: 0 0 0 8px; | |
69 } | |
70 | |
71 .entry-title { | |
72 font-size: 1.333em; | |
73 margin: 0 0 4px 0; | |
74 } | |
75 | |
76 .entry-date { | |
77 color: var(--grey-50); | |
78 margin: 0; | |
79 } | |
80 | |
81 .entry-content { | |
82 width: 100%; | |
83 height: 24em; | |
84 border: 1px solid var(--grey-90-a10); | |
85 } | |
86 | |
87 .entry-files { | |
88 padding: 0 8px; | |
89 } | |
90 | |
91 .entry-files-title { | |
92 font-size: 1em; | |
93 margin: 0 0 4px 0; | |
94 } | |
95 | |
96 .entry-files-list { | |
97 margin: 0; | |
98 padding: 0 0 0 32px; | |
99 color: var(--grey-50); | |
100 } |