Files: 26ba1836edbcddea8eab8725913e63bc364f2eef / style.css
3212 bytesRaw
1 | body { |
2 | font-family: "Source Sans Pro", sans-serif; |
3 | } |
4 | |
5 | .screen { |
6 | position: absolute; |
7 | top: 0px; bottom: 0px; |
8 | left: 0px; right: 0px; |
9 | overflow-y: hidden; |
10 | } |
11 | |
12 | .column { |
13 | display: flex; |
14 | flex-direction: column; |
15 | background: #f5f5f5; |
16 | min-height: 0px; |
17 | } |
18 | |
19 | .row { |
20 | display: flex; |
21 | flex-direction: row; |
22 | } |
23 | |
24 | .stretch { |
25 | flex-basis: 0; |
26 | } |
27 | |
28 | .fixed { |
29 | flex-grow: 1; |
30 | flex-shrink: 1; |
31 | } |
32 | |
33 | .scroll-y { |
34 | overflow-y: auto; |
35 | } |
36 | |
37 | .scroll-x { |
38 | overflow-x: auto; |
39 | } |
40 | |
41 | .button { |
42 | border: 2px; margin: 3px; |
43 | max-width: 50px; |
44 | overflow-x: hidden; |
45 | } |
46 | |
47 | |
48 | img { |
49 | max-width: 600px; |
50 | display: block; |
51 | } |
52 | |
53 | pre { |
54 | max-width: 650px; |
55 | white-space: pre-wrap; |
56 | } |
57 | |
58 | /* scrolling feeds, threads */ |
59 | |
60 | .scroller { |
61 | width: 100%; |
62 | } |
63 | |
64 | .scroller > * { |
65 | margin-left: auto; |
66 | margin-right: auto; |
67 | } |
68 | |
69 | .scroller__wrapper { |
70 | width: 100%; |
71 | } |
72 | |
73 | @media (min-width: 600px) { |
74 | .scroller__wrapper { |
75 | width: 600px; |
76 | } |
77 | } |
78 | |
79 | |
80 | /* --- hypertabs ------- */ |
81 | |
82 | .hypertabs__tabs { |
83 | overflow-y: hide; |
84 | } |
85 | |
86 | .hypertabs > .row { |
87 | flex-grow: 0; flex-shrink: 0; |
88 | margin: 10px; |
89 | } |
90 | |
91 | .hypertabs__tabs > * { |
92 | max-width: 50px; |
93 | overflow-x: hidden; |
94 | margin-right: 5px; |
95 | padding-top: 1px; |
96 | } |
97 | |
98 | .hypertabs--selected { |
99 | background: white; |
100 | border: 1px solid #ccc; |
101 | padding-top: 0; |
102 | padding-left: 5px; |
103 | padding-right: 5px; |
104 | max-width: 200px; |
105 | } |
106 | |
107 | /* message id */ |
108 | |
109 | input { |
110 | margin-left: 3px; |
111 | margin-right: 3px; |
112 | border: 1px solid #eee; |
113 | } |
114 | |
115 | textarea { |
116 | border: 1px solid #eee; |
117 | } |
118 | |
119 | /* compose */ |
120 | |
121 | .compose { |
122 | width: 100%; |
123 | } |
124 | |
125 | /* messages */ |
126 | |
127 | .message { |
128 | border: 1px solid #eee; |
129 | padding: 5px; |
130 | margin-top: .5em; |
131 | background: white; |
132 | display: block; |
133 | flex-basis: 0; |
134 | max-width: 100%; |
135 | min-width: 300px; |
136 | word-wrap:break-word; |
137 | display:inline-block; |
138 | } |
139 | |
140 | .message_meta input { |
141 | border: none; |
142 | font-size: .8em; |
143 | color: #666; |
144 | background: #ddd; |
145 | } |
146 | |
147 | .message_meta { |
148 | margin-left: auto; |
149 | } |
150 | .message_meta > * { |
151 | margin-left: 5px; |
152 | } |
153 | .message_actions { |
154 | float: right; |
155 | } |
156 | |
157 | .message > .title > .avatar { |
158 | margin-left: 0; |
159 | } |
160 | |
161 | .message_content { |
162 | margin-top: 5px; |
163 | border-top: 1px solid #eee; |
164 | padding-top: 3px; |
165 | } |
166 | |
167 | /* -- suggest box */ |
168 | |
169 | |
170 | .suggest-box > * { |
171 | background: #f5f5f5; |
172 | border: 1px solid #ccc; |
173 | margin: 3px; |
174 | } |
175 | |
176 | .suggest-box { |
177 | width: 200px; |
178 | } |
179 | |
180 | .suggest-box ul { |
181 | list-style-type: none; |
182 | padding-left: -20px; |
183 | } |
184 | |
185 | .suggest-box .selected { |
186 | background: #ccc; |
187 | } |
188 | |
189 | .suggest-box img { |
190 | width: 40px; |
191 | } |
192 | .suggest-box,.selected img { |
193 | width: 200px; |
194 | } |
195 | /* avatar */ |
196 | |
197 | .avatar { |
198 | display: flex; |
199 | flex-direction: row; |
200 | } |
201 | .avatar img { |
202 | width: 40px; |
203 | height: 40px; |
204 | margin-right: 3px; |
205 | border: 1px solid #ccc; |
206 | } |
207 | |
208 | .profile { |
209 | background: #fff; |
210 | border: 1px solid #eee; |
211 | } |
212 | |
213 | .profile img { |
214 | width: 150px; |
215 | height: 150px; |
216 | margin-right: 1em; |
217 | margin-bottom: 1em; |
218 | border: 1px solid #ccc; |
219 | } |
220 | |
221 | /* lightbox - used in message-confirm */ |
222 | |
223 | .lightbox { |
224 | overflow: auto; |
225 | background: #fff; |
226 | width: 600px; |
227 | border: 1px solid #eee; |
228 | top: 2em; |
229 | bottom: 2em; |
230 | left: 2em; |
231 | right: 2em; |
232 | padding: 1em; |
233 | } |
234 | |
235 | .message-confirm { |
236 | background: #fff; |
237 | } |
238 | |
239 | /* searchprompt */ |
240 | |
241 | .searchprompt { |
242 | width: 250px; |
243 | margin-left: 10px; |
244 | margin-bottom: 5px; |
245 | } |
246 | |
247 | a { |
248 | color: #333; |
249 | } |
250 | |
251 | a:hover { |
252 | color: #000; |
253 | } |
254 | |
255 | /* TextNodeSearcher highlights */ |
256 | |
257 | highlight { |
258 | background: yellow; |
259 | } |
260 | |
261 |
Built with git-ssb-web