git ssb

10+

Matt McKegg / patchwork



Tree: f2e05ea5dbafcd1d773de66351a65641b3f48090

Files: f2e05ea5dbafcd1d773de66351a65641b3f48090 / styles / light / message.mcss

3957 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 -reply {
51 header {
52 font-size: 100%
53 div.meta {
54 a.channel {
55 display: none;
56 }
57 span.private {
58 (img) {
59 width: 40px
60 height: 40px
61 }
62 }
63 }
64 div.main {
65 a.avatar {
66 img {
67 width: 40px
68 height: 40px
69 }
70 }
71 }
72 }
73 }
74
75 -missing {
76 header {
77 div.main {
78 div.main {
79 margin-left: 0
80 }
81 }
82 }
83 section {
84 font-size: 90%
85 font-style: italic
86 color: #777
87 }
88 }
89
90 -new {
91 box-shadow: 0 0 1px #ffc600;
92 z-index: 1;
93 }
94
95 header {
96 font-size: 120%
97 margin: 15px 20px 0
98 display: flex
99
100 div.mini {
101 flex: 1
102 }
103
104 div.main {
105 display: flex
106 flex: 1
107
108 a.avatar {
109 img {
110 width: 50px
111 height: 50px
112 }
113 }
114
115 div.main {
116 div.name {
117 a {
118 color: #444
119 font-weight: bold
120 }
121 }
122 div.meta {
123 font-size: 90%
124 }
125 margin-left: 10px
126 }
127 }
128
129 div.meta {
130 display: flex;
131 flex-direction: column-reverse;
132 align-items: flex-end;
133 justify-content: flex-end;
134
135 span.flag {
136 width: 12px
137 height: 12px
138
139 background-repeat: no-repeat
140 background-position: center
141 display: inline-block
142 vertical-align: middle;
143 margin-top: -3px;
144
145 -new {
146 background-image: svg(new)
147 }
148
149 @svg new {
150 width: 12px
151 height: 12px
152 content: "<circle cx='6' stroke='none' fill='#ffcf04' cy='6' r='5' />"
153 }
154 }
155
156 em {
157 display: inline-block
158 padding: 4px
159 }
160
161 a.channel {
162 font-weight: bold;
163 }
164
165 a.likes {
166 color: #286bc3;
167 font-size:90%;
168 }
169
170 span.private {
171 display: inline-block;
172 margin: -3px -3px 3px 4px;
173 border: 4px solid #525050;
174 position: relative;
175
176 a {
177 display: inline-block
178
179 img {
180 margin: 0
181 vertical-align: bottom
182 border: none
183 }
184 }
185
186 :after {
187 content: 'private';
188 position: absolute;
189 background: #525050;
190 bottom: 0;
191 left: -1px;
192 font-size: 10px;
193 padding: 2px 4px 0 2px;
194 border-top-right-radius: 5px;
195 color: white;
196 font-weight: bold;
197 pointer-events: none;
198 white-space: nowrap
199 }
200 }
201 }
202 }
203
204 section {
205 margin: 0
206 padding: 0 20px
207 (img) {
208 max-width: 100%
209 }
210 }
211
212 a.backlink {
213 display: block;
214 border-top: 1px solid #EEE;
215 padding: 10px 15px;
216 background: #ffffff;
217 color: #8f8f8f;
218 margin-top: -1px;
219 font-size: 9pt;
220
221 :hover {
222 text-decoration: none
223 color: #777
224 }
225 }
226
227 footer {
228 margin: 5px 0 20px;
229 padding: 0 20px
230
231 div.actions {
232 a {
233 opacity: 0.4
234 transition: opacity 0.2s
235 font-weight: bold
236 color: #333
237
238 :hover {
239 opacity: 1
240 text-decoration: none;
241 }
242 }
243 a + a {
244 margin-left: 25px;
245 }
246 }
247 }
248}
249

Built with git-ssb-web