git ssb

0+

alanz / patchwork



forked from Matt McKegg / patchwork

Tree: 47f88c71eec1667f35848253793375e28d250237

Files: 47f88c71eec1667f35848253793375e28d250237 / styles / light / message.mcss

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

Built with git-ssb-web