git ssb

1+

Daan Patchwork / patchwork



Tree: 4d9f238ff73f7136cd292da88f06c17fe1a8c445

Files: 4d9f238ff73f7136cd292da88f06c17fe1a8c445 / styles / base / message.mcss

6082 bytesRaw
1Message {
2 display: flex
3 flex-direction: column
4 position: relative
5 font-size: 120%
6 line-height: 1.4
7 flex-shrink: 0
8 (highlight) {
9 border-radius: 3px
10 padding: 0 2px
11 }
12 header {
13 margin: 15px 20px 0
14 font-size: 120%
15 display: flex
16 div.mini {
17 flex: 1
18 }
19 div.main {
20 display: flex
21 flex: 1
22 a.avatar {
23 img {
24 width: 50px
25 height: 50px
26 object-fit: cover
27 }
28 }
29 div.main {
30 div.name {
31 a {
32 font-weight: bold
33 }
34 }
35 margin-left: 10px
36 }
37 }
38 div.meta {
39 display: flex
40 flex-direction: column
41 align-items: flex-end
42 span.flag {
43 width: 12px
44 height: 12px
45 background-repeat: no-repeat
46 background-position: center
47 display: inline-block
48 vertical-align: middle
49 -unread {
50 :after {
51 content: ' unread'
52 }
53 }
54 -new {
55 :after {
56 content: ' new'
57 }
58 }
59 -new, -unread {
60 width: auto
61 height: auto
62 :before {
63 content: '✸'
64 }
65 }
66 }
67 em {
68 display: inline-block
69 padding: 4px
70 }
71 div.counts {
72 font-size: 85%
73 a.likes {
74 ::before {
75 content: '❤ '
76 color: #ff2f92
77 }
78 :hover {
79 color: #ff2f92
80 }
81 }
82 a + a {
83 padding-left: 5px
84 }
85 }
86 span.private {
87 display: inline-block
88 margin: -3px -3px 3px 4px
89 position: relative
90 a {
91 display: inline-block
92 img {
93 margin: 0
94 vertical-align: bottom
95 border: none
96 border-radius: 0px
97 }
98 :first-child {
99 img {
100 border-top-left-radius: 3px
101 border-bottom-left-radius: 3px
102 }
103 }
104 :last-child {
105 img {
106 border-top-right-radius: 3px
107 border-bottom-right-radius: 3px
108 }
109 }
110 }
111 :after {
112 content: 'private'
113 position: absolute
114 bottom: 0
115 left: -1px
116 font-size: 10px
117 pointer-events: none
118 white-space: nowrap
119 }
120 }
121 }
122 }
123 a.contentWarning {
124 padding: 10px 20px
125 font-weight: bold
126 }
127 section.content {
128 margin: 0
129 padding: 0 20px
130 max-height: 1170px
131 overflow: hidden
132 -expanded {
133 max-height: none
134 }
135 (img) {
136 max-width: 100%
137 }
138 }
139 a.backlink {
140 display: block
141 margin-top: -1px
142 font-size: 9pt
143 :hover {
144 text-decoration: none
145 }
146 }
147 footer {
148 margin: 5px 0 20px
149 padding: 0 20px
150 div.expander {
151 text-align: center
152 -truncated {
153 padding-top: 50px
154 margin-top: -50px
155 -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0))
156 a {
157 :before {
158 content: '▼ '
159 font-size: 80%
160 }
161 }
162 }
163 }
164 div.actions {
165 a.like {
166 :before {
167 content: "❤ "
168 }
169 }
170 a.tag {
171 :before {
172 content: ' '
173 -webkit-mask-box-image: svg(tag)
174 height: 16px
175 width: 16px
176 display: inline-block
177 vertical-align: bottom
178 margin-right: 5px
179 }
180 :hover {
181 background: #7f2fff
182 }
183 }
184 a.reply {
185 :before {
186 content: "↩ "
187 }
188 }
189 a {
190 font-size: 13px
191 padding: 6px 10px
192 border-radius: 3px
193 display: inline-block
194 text-align: center
195 transition: background-color 0.25s ease, color 0.25s ease
196 :hover {
197 color: white
198 }
199 -right {
200 float: right
201 }
202 }
203 a + a {
204 margin-left: 10px
205 }
206 @svg tag {
207 height: 50px
208 width: 50px
209 content: '<path d="M47.146,22.904l-9.21-10.506l-0.075-0.077C36.936,11.469,35.732,11,34.476,11c-0.001,0-0.002,0-0.003,0H5 c-1.654,0-3,1.346-3,3v22c0,1.654,1.346,3,3,3h29.472c0.001,0,0.002,0,0.003,0c1.258,0,2.461-0.469,3.387-1.321l9.26-10.557 C47.688,26.555,48,25.801,48,25C48,24.21,47.697,23.468,47.146,22.904z M37,28c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3 S38.657,28,37,28z"/>'
210 }
211 }
212 }
213 :focus {
214 z-index: 1
215 }
216 -following {
217 header {
218 div.main {
219 div.main {
220 div.name {
221 $following
222 }
223 }
224 }
225 }
226 }
227 -data {
228 header {
229 div.main {
230 font-size: 80%
231 a.avatar {
232 img {
233 width: 25px
234 }
235 }
236 }
237 }
238 (pre) {
239 overflow: auto
240 max-height: 200px
241 }
242 }
243 -mini {
244 header {
245 font-size: 100%
246 div.main {
247 a.avatar {
248 img {
249 width: 40px
250 height: 40px
251 object-fit: cover
252 }
253 }
254 }
255 }
256 }
257 -missing {
258 header {
259 div.main {
260 div.main {
261 margin-left: 0
262 }
263 }
264 }
265 section {
266 margin: 0 15px
267 font-size: 90%
268 font-style: italic
269 color: #777
270 }
271 }
272 -compact {
273 section {
274 max-height: 300px
275 }
276 }
277 -reply {
278 header {
279 font-size: 100%
280 div.meta {
281 a.channel {
282 display: none
283 }
284 span.private {
285 (img) {
286 width: 40px
287 height: 40px
288 }
289 }
290 }
291 div.main {
292 a.avatar {
293 img {
294 width: 40px
295 height: 40px
296 object-fit: cover
297 }
298 }
299 }
300 }
301 }
302 -new, -unread {
303 z-index: 1
304 }
305 -hasContentWarning {
306 section.content {
307 max-height: 0px
308 }
309 footer {
310 div.expander {
311 -webkit-mask-image: none !important
312 padding-top: 0px !important
313 margin-top: 0px !important
314 }
315 }
316 }
317}
318

Built with git-ssb-web