git ssb

0+

alanz / patchwork



forked from Matt McKegg / patchwork

Tree: 63c02a8e459eeb0415408ada6ccd068308da3d5c

Files: 63c02a8e459eeb0415408ada6ccd068308da3d5c / styles / light / message.mcss

4436 bytesRaw
1Message {
2 display: flex
3 flex-direction: column
4 background: white
5 position: relative
6 font-size: 120%
7 line-height: 1.4
8 flex-shrink: 0
9
10 (highlight) {
11 background-color: yellow
12 }
13
14 :focus {
15 z-index: 1
16 }
17
18 -data {
19 header {
20 div.main {
21 font-size: 80%
22 a.avatar {
23 img {
24 width: 25px
25 }
26 }
27 }
28 }
29 (pre) {
30 overflow: auto
31 max-height: 200px
32 }
33 }
34
35 -mini {
36 header {
37 font-size: 100%
38 margin-bottom: 15px
39 div.main {
40 a.avatar {
41 img {
42 width: 40px
43 height: 40px
44 }
45 }
46 }
47 }
48 }
49
50 -compact {
51 section {
52 max-height: 300px
53 }
54 }
55
56 -reply {
57 header {
58 font-size: 100%
59 div.meta {
60 a.channel {
61 display: none;
62 }
63 span.private {
64 (img) {
65 width: 40px
66 height: 40px
67 }
68 }
69 }
70 div.main {
71 a.avatar {
72 img {
73 width: 40px
74 height: 40px
75 }
76 }
77 }
78 }
79 }
80
81 -missing {
82 header {
83 div.main {
84 div.main {
85 margin-left: 0
86 }
87 }
88 }
89 section {
90 font-size: 90%
91 font-style: italic
92 color: #777
93 }
94 }
95
96 -new {
97 box-shadow: 0 0 1px #ffc600;
98 z-index: 1;
99 }
100
101 header {
102 font-size: 120%
103 margin: 15px 20px 0
104 display: flex
105
106 div.mini {
107 flex: 1
108 }
109
110 div.main {
111 display: flex
112 flex: 1
113
114 a.avatar {
115 img {
116 width: 50px
117 height: 50px
118 }
119 }
120
121 div.main {
122 div.name {
123 a {
124 color: #444
125 font-weight: bold
126 }
127 }
128 div.meta {
129 font-size: 90%
130 }
131 margin-left: 10px
132 }
133 }
134
135 div.meta {
136 display: flex;
137 flex-direction: column-reverse;
138 align-items: flex-end;
139 justify-content: flex-end;
140
141 span.flag {
142 width: 12px
143 height: 12px
144
145 background-repeat: no-repeat
146 background-position: center
147 display: inline-block
148 vertical-align: middle;
149 margin-top: -3px;
150
151 -new {
152 background-image: svg(new)
153 }
154
155 @svg new {
156 width: 12px
157 height: 12px
158 content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
159 }
160 }
161
162 em {
163 display: inline-block
164 padding: 4px
165 }
166
167 a.channel {
168 font-weight: bold;
169 }
170
171 a.likes {
172 color: #286bc3;
173 font-size:90%;
174 }
175
176 span.private {
177 display: inline-block;
178 margin: -3px -3px 3px 4px;
179 border: 4px solid #525050;
180 position: relative;
181
182 a {
183 display: inline-block
184
185 img {
186 margin: 0
187 vertical-align: bottom
188 border: none
189 }
190 }
191
192 :after {
193 content: 'private';
194 position: absolute;
195 background: #525050;
196 bottom: 0;
197 left: -1px;
198 font-size: 10px;
199 padding: 2px 4px 0 2px;
200 border-top-right-radius: 5px;
201 color: white;
202 font-weight: bold;
203 pointer-events: none;
204 white-space: nowrap
205 }
206 }
207 }
208 }
209
210 section {
211 margin: 0
212 padding: 0 20px
213 max-height: 1500px
214 overflow: hidden
215
216 (img) {
217 max-width: 100%
218 }
219
220 -expanded {
221 max-height: none
222 }
223 }
224
225 a.backlink {
226 display: block;
227 border-top: 1px solid #EEE;
228 padding: 10px 15px;
229 background: #ffffff;
230 color: #8f8f8f;
231 margin-top: -1px;
232 font-size: 9pt;
233
234 :hover {
235 text-decoration: none
236 color: #777
237 }
238 }
239
240 footer {
241 margin: 5px 0 20px;
242 padding: 0 20px
243
244 div.expander {
245 text-align: center;
246 background-color: white;
247
248 -truncated {
249 padding-top: 50px;
250 margin-top: -50px;
251 -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
252 a {
253 :before { content: '▼ '; font-size: 80% }
254 }
255 }
256 }
257
258 div.actions {
259 a {
260 opacity: 0.4
261 transition: opacity 0.2s
262 font-weight: bold
263 color: #333
264
265 :hover {
266 opacity: 1
267 text-decoration: none;
268 }
269 }
270 a + a {
271 margin-left: 25px;
272 }
273 }
274 }
275}
276

Built with git-ssb-web