html: Add search hints.
[software/mumi.git] / assets / css / screen.css
1 html, body {
2 background-color: #fff;
3 width: 100%;
4 height: 100%;
5 padding: 0px;
6 margin: 0px;
7 }
8
9 h1 {
10 clear: both;
11 margin-top: 1.3rem;
12 margin-bottom: 0.5rem;
13 }
14
15 .title {
16 clear: both;
17 font-size: 16px;
18 margin-bottom: 1rem;
19 border-bottom: 1px dashed #ddd;
20 padding: 0px;
21 padding-bottom: 1rem;
22 color: #586069;
23 }
24
25 .comment-box {
26 margin-top: 1rem;
27 margin-bottom: 2rem;
28 border-top: 1px dashed #ddd;
29 padding-top: 1rem;
30 }
31
32 h2 {
33 border-bottom: 1px solid #eee;
34 padding-bottom: 5px;
35 }
36
37 ul.merged li, ul.blockedby li, ul.blocks li {
38 display: inline-block;
39 }
40 ul.merged li + li:before,
41 ul.blockedby li + li:before,
42 ul.blocks li + li:before {
43 content: ", ";
44 }
45
46 p + p {
47 text-indent: 0.5rem;
48 margin-top: 1.0rem;
49 }
50
51 .card-body form {
52 padding-bottom: 1em;
53 }
54
55 tr.heading th {
56 background-color: #f8f9fa;
57 font-weight: bold;
58 }
59
60 tr td:nth-child(1),
61 tr td:nth-child(4) {
62 width: 4rem;
63 }
64
65 tr td:nth-child(3){
66 width: 19rem;
67 }
68
69 tr.serious svg {
70 fill: #ff5a2a;
71 margin-right: .5em;
72 height: 1.2em;
73 vertical-align: text-bottom;
74 }
75 tr.important svg {
76 fill: #000;
77 margin-right: .5em;
78 height: 1.2em;
79 vertical-align: text-bottom;
80 }
81
82 #header {
83 background: #333333;
84 border-color: #1A1A1A1A;
85 border-style: none none solid none;
86 border-width: thin;
87 width: 100%;
88 margin-bottom: 1rem;
89 padding: .5em;
90 color: #fff;
91 border-radius: 0;
92 }
93 #header .navbar-brand {
94 padding: 0;
95 }
96
97 @media (min-width: 576px) {
98 #search input:focus {
99 width: 400px;
100 }
101 #search #search-hints {
102 width: 400px;
103 }
104 }
105
106 @media (min-width: 768px) {
107 #search input:focus {
108 width: 500px;
109 }
110 #search.form-inline #search-hints {
111 width: 500px;
112 }
113 }
114
115 #search #search-hints {
116 display: none;
117 position: absolute;
118 background: white;
119 top: 2.5rem;
120 border: 1px solid #ced4da;
121 border-top: none;
122 box-shadow: 3px 3px 10px #ddd;
123 padding: 1em;
124 z-index: 2;
125 }
126 #search.form-inline:focus-within #search-hints {
127 display: block;
128 }
129 #search { z-index: 3; }
130
131 footer {
132 border-color: #1A1A1A1A;
133 border-style: dashed none none none;
134 border-width: 2px;
135 width: 100%;
136 align-items: center;
137 text-align: center;
138 margin-top: 3rem;
139 padding: 1rem;
140 color: #586069;
141 background: #fafafa;
142 }
143
144 table {
145 width: 100%;
146 }
147
148 /* messages */
149 .row.event {
150 margin-bottom: 1em;
151 font-size: 1.2em;
152 }
153
154 .info .stat {
155 display: block;
156 color: #586069;
157 }
158 .info .stat .label {
159 display: block;
160 }
161
162 .conversation .avatar {
163 display: none;
164 }
165
166 .message .from .avatar {
167 width: 1.2em;
168 height: 1.2em;
169 border-radius: 3px;
170 color: #fff;
171 display: inline-flex;
172 justify-content: center;
173 align-items: center;
174 margin-right: 3px;
175 }
176
177 @media (min-width: 768px) {
178 .conversation .avatar {
179 height: 48px;
180 width: 48px;
181 border: 1px solid #ddd;
182 border-radius: 6px;
183 color: #fff;
184 display: flex;
185 justify-content: center;
186 align-items: center;
187 font-size: 32px;
188 position: absolute;
189 }
190 }
191
192 .address + .address:before {
193 content: ", ";
194 }
195
196 @media (min-width: 768px) {
197 .message {
198 margin-left: 65px;
199 }
200 }
201
202 .message .body pre {
203 background: transparent;
204 border: none;
205 }
206
207 .message .body .multipart {
208 padding-bottom: 1rem;
209 }
210
211 .message .body .multipart + .multipart {
212 padding-top: 1rem;
213 padding-bottom: 1rem;
214 border-top: 1px dashed #ddd;
215 }
216
217 .multipart.application-pgp-signature {
218 display: none;
219 }
220
221 .multipart.text-x-patch {
222 }
223
224 .multipart.scheme {
225 white-space: pre-wrap;
226 font-family: monospace;
227 }
228
229 .attachment:before {
230 background-image: url('/img/file.svg');
231 background-size: 1rem;
232 display: inline-block;
233 height: 1rem;
234 width: 1rem;
235 content: "";
236 }
237
238 .download-part {
239 float: right;
240 font-size: 0.8em;
241 font-style: italic;
242 }
243
244 @media (min-width: 768px) {
245 .message .card-header:before {
246 content: "";
247 border-color: transparent;
248 border-right-color: #ddd;
249 border-style: solid solid outset;
250 border-width: 10px;
251 height: 0;
252 width: 0;
253 margin-left: -40px;
254 top: calc(1rem - 1px);
255 position: absolute;
256 }
257 .message .card:before {
258 content: "";
259 border-color: transparent;
260 border-right-color: #f8f9fa;
261 border-style: solid solid outset;
262 border-width: 9px;
263 height: 0;
264 width: 0;
265 left: -18px;
266 top: 1rem;
267 position: absolute;
268 z-index: 10;
269 }
270 .message .from .avatar {
271 display: none;
272 }
273 }
274
275 .message .from .address {
276 font-weight: bold;
277 }
278
279 .message .details {
280 margin-top: .5em;
281 display: none;
282 }
283
284 .message span.line {
285 white-space: pre-wrap;
286 font-family: monospace;
287 }
288
289 /* diff styles */
290 .message span.line.diff.file {
291 color: #005cc5;
292 }
293 .message span.line.diff.separator {
294 color: #005cc5;
295 }
296 .message span.line.diff.addition {
297 color: #22863a;
298 background-color: #f0fff4;
299 }
300 .message span.line.diff.deletion {
301 color: #b31d28;
302 background-color: #ffeef0;
303 }
304 .message span.line.diff.range {
305 color: #6f42c1;
306 font-weight: bold;
307 }
308
309 /* commit styles */
310 .message span.commit {
311 font-family: monospace;
312 }
313 .message span.commit.attribution {
314 color: #005cc5;
315 }
316 .message span.commit.header {
317 color: #005cc5;
318 }
319 .message span.commit.changelog {
320 color: #005cc5;
321 }
322
323 /* quote styles */
324 .message span.line.quote {
325 margin-left: 1em;
326 color: #3868cc;
327 }
328
329 .message span.line.cut-here {
330 color: #888;
331 }
332
333 .filter {
334 display: inline-block;
335 color: #fff;
336 background: #aaa;
337 text-align: center;
338 padding: 2px;
339 border-radius: 3px;
340 font-family: monospace;
341 margin: 1px;
342 }
343
344 .status-tag {
345 display: inline-block;
346 color: #fff;
347 text-align: center;
348 padding: 4px;
349 border-radius: 3px;
350 margin-right: 8px;
351 }
352
353 .status-tag.done {
354 background: #cb2431;
355 }
356 .status-tag.open {
357 background: #2cbe4e;
358 }
359
360 .error.parse {
361 font-style: italic;
362 font-size: 0.8em;
363 }