git ssb

10+

Matt McKegg / patchwork



Tree: fc4bdfbe7e94b2507aba1991405f77aa19c43e3c

Files: fc4bdfbe7e94b2507aba1991405f77aa19c43e3c / styles / light / message.mcss

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

Built with git-ssb-web