css: Add bubble tab to the left of messages on wide screens.
[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: 2em;
53 }
54
55 thead {
56 border-bottom: 2px solid #ddd;
57 font-weight: bold;
58 }
59
60 tr {
61 border-bottom: 1px solid #ddd;
62 }
63
64 tr td:nth-child(3){
65 min-width: 8rem;
66 }
67
68 tr.serious td:nth-child(1) {
69 background-color: #ff5a2a;
70 color: #fff;
71 }
72 tr.important td:nth-child(1) {
73 background-color: #feaaaa;
74 }
75
76 #header {
77 background: #333333;
78 border-color: #1A1A1A1A;
79 border-style: none none solid none;
80 border-width: thin;
81 width: 100%;
82 margin-bottom: 1rem;
83 padding: .5em;
84 color: #fff;
85 border-radius: 0;
86 }
87 #header .navbar-brand {
88 padding: 0;
89 }
90
91 #search input:focus {
92 width: 500px;
93 }
94
95 footer {
96 border-color: #1A1A1A1A;
97 border-style: dashed none none none;
98 border-width: 2px;
99 width: 100%;
100 align-items: center;
101 text-align: center;
102 margin-top: 3rem;
103 padding: 1rem;
104 color: #586069;
105 background: #fafafa;
106 }
107
108 table {
109 width: 100%;
110 }
111
112 /* messages */
113 .row.event {
114 margin-bottom: 1em;
115 font-size: 1.2em;
116 }
117
118 .info .stat {
119 display: block;
120 color: #586069;
121 }
122 .info .stat .label {
123 display: block;
124 }
125
126 .conversation .avatar {
127 display: none;
128 }
129
130 @media (min-width: 768px) {
131 .conversation .avatar {
132 height: 64px;
133 width: 64px;
134 border: 1px solid #ddd;
135 border-radius: 6px;
136 color: #fff;
137 display: flex;
138 justify-content: center;
139 align-items: center;
140 font-size: 58px;
141 position: absolute;
142 }
143 }
144
145 .address + .address:before {
146 content: ", ";
147 }
148
149 @media (min-width: 768px) {
150 .message {
151 margin-left: 80px;
152 }
153 }
154
155 .message .body pre {
156 background: transparent;
157 border: none;
158 }
159
160 .message .body .multipart {
161 padding-bottom: 1rem;
162 }
163
164 .message .body .multipart + .multipart {
165 padding-top: 1rem;
166 padding-bottom: 1rem;
167 border-top: 1px dashed #ddd;
168 }
169
170 .multipart.application-pgp-signature {
171 display: none;
172 }
173
174 .multipart.text-x-patch {
175 }
176
177 .multipart.scheme {
178 white-space: pre-wrap;
179 font-family: monospace;
180 }
181
182 .attachment:before {
183 background-image: url('/img/file.svg');
184 background-size: 1rem;
185 display: inline-block;
186 height: 1rem;
187 width: 1rem;
188 content: "";
189 }
190
191 .download-part {
192 float: right;
193 font-size: 0.8em;
194 font-style: italic;
195 }
196
197 @media (min-width: 768px) {
198 .message .card-header:before {
199 content: "";
200 border-color: transparent;
201 border-right-color: #ddd;
202 border-style: solid solid outset;
203 border-width: 10px;
204 height: 0;
205 width: 0;
206 margin-left: -40px;
207 top: calc(1rem - 1px);
208 position: absolute;
209 }
210 .message .card:before {
211 content: "";
212 border-color: transparent;
213 border-right-color: #f8f9fa;
214 border-style: solid solid outset;
215 border-width: 9px;
216 height: 0;
217 width: 0;
218 left: -18px;
219 top: 1rem;
220 position: absolute;
221 z-index: 10;
222 }
223 }
224
225 .message .from .address {
226 font-weight: bold;
227 }
228
229 .message .details {
230 margin-top: .5em;
231 display: none;
232 }
233
234 .message span.line {
235 white-space: pre-wrap;
236 font-family: monospace;
237 }
238
239 /* diff styles */
240 .message span.line.diff.file {
241 color: #005cc5;
242 }
243 .message span.line.diff.separator {
244 color: #005cc5;
245 }
246 .message span.line.diff.addition {
247 color: #22863a;
248 background-color: #f0fff4;
249 }
250 .message span.line.diff.deletion {
251 color: #b31d28;
252 background-color: #ffeef0;
253 }
254 .message span.line.diff.range {
255 color: #6f42c1;
256 font-weight: bold;
257 }
258
259 /* commit styles */
260 .message span.commit.attribution {
261 color: #005cc5;
262 }
263 .message span.commit.header {
264 color: #005cc5;
265 }
266 .message span.commit.changelog {
267 color: #005cc5;
268 }
269
270 /* quote styles */
271 .message span.line.quote {
272 margin-left: 1em;
273 color: #3868cc;
274 }
275
276 .message span.line.cut-here {
277 color: #888;
278 }
279
280 .filter {
281 display: inline-block;
282 color: #fff;
283 background: #aaa;
284 text-align: center;
285 padding: 2px;
286 border-radius: 3px;
287 font-family: monospace;
288 margin: 1px;
289 }
290
291 .status-tag {
292 display: inline-block;
293 color: #fff;
294 text-align: center;
295 padding: 4px;
296 border-radius: 3px;
297 margin-right: 8px;
298 }
299
300 .status-tag.done {
301 background: #cb2431;
302 }
303 .status-tag.open {
304 background: #2cbe4e;
305 }
306
307 .error.parse {
308 font-style: italic;
309 font-size: 0.8em;
310 }