##// END OF EJS Templates
system-info: fix styling for elements
marcink -
r3974:cb1bcddc default
parent child Browse files
Show More
@@ -1,578 +1,614 b''
1 1 //
2 2 // Typography
3 3 // modified from Bootstrap
4 4 // --------------------------------------------------
5 5
6 6 // Base
7 7 body {
8 8 font-size: @basefontsize;
9 9 font-family: @text-light;
10 10 letter-spacing: .02em;
11 11 color: @grey2;
12 12 }
13 13
14 14 #content, label{
15 15 font-size: @basefontsize;
16 16 }
17 17
18 18 label {
19 19 color: @grey2;
20 20 }
21 21
22 22 ::selection { background: @rchighlightblue; }
23 23
24 24 // Headings
25 25 // -------------------------
26 26
27 27 h1, h2, h3, h4, h5, h6,
28 28 .h1, .h2, .h3, .h4, .h5, .h6 {
29 29 margin: 0 0 @textmargin 0;
30 30 padding: 0;
31 31 line-height: 1.8em;
32 32 color: @text-color;
33 33 a {
34 34 color: @rcblue;
35 35 }
36 36 }
37 37
38 38 h1, .h1 { font-size: 1.54em; font-weight: @text-bold-weight; font-family: @text-bold; }
39 39 h2, .h2 { font-size: 1.23em; font-weight: @text-semibold-weight; font-family: @text-semibold; }
40 40 h3, .h3 { font-size: 1.23em; font-family: @text-regular; }
41 41 h4, .h4 { font-size: 1em; font-weight: @text-bold-weight; font-family: @text-bold; }
42 42 h5, .h5 { font-size: 1em; font-weight: @text-bold-weight; font-family: @text-bold; }
43 43 h6, .h6 { font-size: 1em; font-weight: @text-bold-weight; font-family: @text-bold; }
44 44
45 45 // Breadcrumbs
46 46 .breadcrumbs {
47 47 font-size: @repo-title-fontsize;
48 48 margin: 0;
49 49 width: ~"calc(100% - 180px)";
50 50 float: left;
51 51
52 52 h4 {
53 53 font-size: @basefontsize;
54 54 margin-bottom: 15px;
55 55 }
56 56 }
57 57
58 58 .breadcrumbs_light {
59 59 float:left;
60 60 font-size: 1.3em;
61 61 line-height: 38px;
62 62 }
63 63
64 64 // Body text
65 65 // -------------------------
66 66
67 67 p {
68 68 margin: 0 0 @textmargin 0;
69 69 padding: 0;
70 70 line-height: 2em;
71 71 }
72 72
73 73 .lead {
74 74 margin-bottom: @textmargin;
75 75 font-weight: 300;
76 76 line-height: 1.4;
77 77
78 78 @media (min-width: @screen-sm-min) {
79 79 font-size: (@basefontsize * 1.5);
80 80 }
81 81 }
82 82
83 83 a,
84 84 .link {
85 85 color: @rcblue;
86 86 text-decoration: none;
87 87 outline: none;
88 88 cursor: pointer;
89 89
90 90 &:focus {
91 91 outline: none;
92 92 }
93 93
94 94 &:hover {
95 95 color: @rcdarkblue;
96 96 }
97 97 }
98 98
99 99 img {
100 100 border: none;
101 101 outline: none;
102 102 }
103 103
104 104 strong {
105 105 font-weight: @text-bold-weight;
106 106 font-family: @text-bold;
107 107 }
108 108
109 109 em {
110 110 font-family: @text-italic;
111 111 font-style: italic;
112 112 }
113 113
114 114 strong em,
115 115 em strong {
116 116 font-style: italic;
117 117 font-weight: @text-bold-italic-weight;
118 118 font-family: @text-bold-italic;
119 119 }
120 120
121 121 //TODO: lisa: b and i are depreciated, but we are still using them in places.
122 122 // Should probably make some decision whether to keep or lose these.
123 123 b {
124 124
125 125 }
126 126
127 127 i {
128 128 font-style: normal;
129 129 }
130 130
131 131 label {
132 132 color: @text-color;
133 133
134 134 input[type="checkbox"] {
135 135 margin-right: 1em;
136 136 }
137 137 input[type="radio"] {
138 138 margin-right: 1em;
139 139 }
140 140 }
141 141
142 142 code,
143 143 .code {
144 144 font-size: .95em;
145 145 font-family: @text-code;
146 146 color: @grey3;
147 147
148 148 a {
149 149 color: lighten(@rcblue,10%)
150 150 }
151 151 }
152 152
153 153 pre {
154 154 margin: 0;
155 155 padding: 0;
156 156 border: 0;
157 157 outline: 0;
158 158 font-size: @basefontsize*.95;
159 159 line-height: 1.4em;
160 160 font-family: @text-code;
161 161 color: @grey3;
162 162 }
163 163
164 164 // Emphasis & misc
165 165 // -------------------------
166 166 .discreet {
167 167 color: @grey4;
168 168 font-size: 85%;
169 169 font-weight: normal;
170 170
171 171 a {
172 172 color: @grey4;
173 173
174 174 &:hover {
175 175 color: @rcdarkblue;
176 176 }
177 177 }
178 178 }
179 179
180 180 small,
181 181 .small {
182 182 font-size: 75%;
183 183 font-weight: normal;
184 184 line-height: 1em;
185 185 }
186 186
187 187 mark,
188 188 .mark {
189 189 padding: .2em;
190 190 }
191 191
192 192 // Alignment
193 193 .text-left { text-align: left; }
194 194 .text-right { text-align: right; }
195 195 .text-center { text-align: center; }
196 196 .text-justify { text-align: justify; }
197 197 .text-nowrap { white-space: nowrap; }
198 198
199 199 // Transformation
200 200 .text-lowercase { text-transform: lowercase; }
201 201 .text-uppercase { text-transform: uppercase; }
202 202 .text-capitalize { text-transform: capitalize; }
203 203
204 204 // Contextual colors
205 205 .text-muted {
206 206 color: @grey4;
207 207 }
208 208 .text-primary {
209 209 color: @rcblue;
210 210 }
211 211 .text-success {
212 212 color: @alert1;
213 213 }
214 214 .text-info {
215 215 color: @alert4;
216 216 }
217 217 .text-warning {
218 218 color: @alert3;
219 219 }
220 220 .text-danger {
221 221 color: @alert2;
222 222 }
223 223
224 224 // Contextual backgrounds
225 225 .bg-primary {
226 226 background-color: white;
227 227 }
228 228 .bg-success {
229 229 background-color: @alert1;
230 230 }
231 231 .bg-info {
232 232 background-color: @alert4;
233 233 }
234 234 .bg-warning {
235 235 background-color: @alert3;
236 236 }
237 237 .bg-danger {
238 238 background-color: @alert2;
239 239 }
240 240
241 241
242 242 // Page header
243 243 // -------------------------
244 244
245 245 .page-header {
246 246 margin: @pagepadding 0 @textmargin;
247 247 border-bottom: @border-thickness solid @grey5;
248 248 }
249 249
250 250 .title {
251 251 clear: both;
252 252 float: left;
253 253 width: 100%;
254 254 margin: @pagepadding/2 0 @pagepadding/4;
255 255 min-height: 25px;
256 256
257 257 .breadcrumbs {
258 258 float: left;
259 259 clear: both;
260 260 width: 700px;
261 261 margin: 0;
262 262
263 263 .q_filter_box {
264 264 margin-right: @padding;
265 265 }
266 266 }
267 267
268 268 h1 a {
269 269 color: @rcblue;
270 270 }
271 271
272 272 input{
273 273 margin-right: @padding;
274 274 }
275 275
276 276 h5, .h5 {
277 277 color: @grey1;
278 278 margin-bottom: @space;
279 279
280 280 span {
281 281 display: inline-block;
282 282 }
283 283 }
284 284
285 285 p {
286 286 margin-bottom: 0;
287 287 }
288 288
289 289 .links {
290 290 float: right;
291 291 display: inline;
292 292 margin: 0;
293 293 padding-left: 0;
294 294 list-style: none;
295 295 text-align: right;
296 296
297 297 li {
298 298 float: right;
299 299 list-style-type: none;
300 300 }
301 301
302 302 a {
303 303 display: inline-block;
304 304 margin-left: @textmargin/2;
305 305 }
306 306 }
307 307
308 308 .title-content {
309 309
310 310 &.repo-title {
311 311 float: none
312 312 }
313 313
314 314 float: left;
315 315 margin: 0;
316 316 padding: 0;
317 317
318 318 & + .breadcrumbs {
319 319 margin-top: @padding;
320 320 }
321 321
322 322 & + .links {
323 323 margin-top: -@button-padding;
324 324
325 325 & + .breadcrumbs {
326 326 margin-top: @padding;
327 327 }
328 328 }
329 329
330 330 .repo-group-desc {
331 331 padding: 8px 0px 0px 0px;
332 332 }
333 333 }
334 334
335 335 .title-main {
336 336 font-size: @repo-title-fontsize;
337 337 }
338 338
339 339 .title-description {
340 340 margin-top: .5em;
341 341 }
342 342
343 343 .q_filter_box {
344 344 width: 200px;
345 345 }
346 346
347 347 }
348 348
349 349 #readme .title {
350 350 text-transform: none;
351 351 }
352 352
353 353 // Lists
354 354 // -------------------------
355 355
356 356 // Unordered and Ordered lists
357 357 ul,
358 358 ol {
359 359 margin-top: 0;
360 360 margin-bottom: @textmargin;
361 361 ul,
362 362 ol {
363 363 margin-bottom: 0;
364 364 }
365 365 }
366 366
367 367 li {
368 368 line-height: 2em;
369 369 }
370 370
371 371 ul li {
372 372 position: relative;
373 373 list-style-type: disc;
374 374
375 375 p:first-child {
376 376 display:inline;
377 377 }
378 378 }
379 379
380 380 // List options
381 381
382 382 // Unstyled keeps list items block level, just removes default browser padding and list-style
383 383 .list-unstyled {
384 384 padding-left: 0;
385 385 list-style: none;
386 386 li:before { content: none; }
387 387 }
388 388
389 389 // Inline turns list items into inline-block
390 390 .list-inline {
391 391 .list-unstyled();
392 392 margin-left: -5px;
393 393
394 394 > li {
395 395 display: inline-block;
396 396 padding-left: 5px;
397 397 padding-right: 5px;
398 398 }
399 399 }
400 400
401 401 // Description Lists
402 402
403 403 dl {
404 404 margin-top: 0; // Remove browser default
405 405 margin-bottom: @textmargin;
406 406 }
407 407
408 408 dt,
409 409 dd {
410 410 line-height: 1.4em;
411 411 }
412 412
413 413 dt {
414 414 margin: @textmargin 0 0 0;
415 415 font-weight: @text-bold-weight;
416 416 font-family: @text-bold;
417 417 }
418 418
419 419 dd {
420 420 margin-left: 0; // Undo browser default
421 421 }
422 422
423 423 // Horizontal description lists
424 424 // Defaults to being stacked without any of the below styles applied, until the
425 425 // grid breakpoint is reached (default of ~768px).
426 426 // These are used in forms as well; see style guide.
427 427 // TODO: lisa: These should really not be used in forms.
428 428
429 429 .dl-horizontal {
430 430
431 431 overflow: hidden;
432 432 margin-bottom: @space;
433 433
434 434 dt, dd {
435 435 float: left;
436 436 margin: 5px 0 5px 0;
437 437 }
438 438
439 439 dt {
440 440 clear: left;
441 441 width: @label-width - @form-vertical-margin;
442 442 }
443 443
444 444 dd {
445 445 &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
446 446 margin-left: @form-vertical-margin;
447 447 max-width: @form-max-width - (@label-width - @form-vertical-margin) - @form-vertical-margin;
448 448 }
449 449
450 450 pre {
451 451 margin: 0;
452 452 }
453 453
454 454 &.settings {
455 455 dt {
456 456 text-align: left;
457 457 }
458 458 }
459 459
460 460 @media (min-width: 768px) {
461 461 dt {
462 462 float: left;
463 463 width: 185px;
464 464 clear: left;
465 465 text-align: right;
466 466 }
467 467 dd {
468 468 margin-left: 20px;
469 469 }
470 470 }
471
472 &.dt-300 {
473 dt {
474 width: 300px;
475 }
476 }
477
478 &.dt-400 {
479 dt {
480 width: 400px;
481 }
482 }
483
484 &.dt-500 {
485 dt {
486 width: 500px;
487 }
488 }
489
490 &.dt-600 {
491 dt {
492 width: 600px;
493 }
494 }
495
496 &.dt-700 {
497 dt {
498 width: 700px;
499 }
500 }
501
502 &.dt-800 {
503 dt {
504 width: 800px;
505 }
506 }
471 507 }
472 508
473 509
474 510 // Misc
475 511 // -------------------------
476 512
477 513 // Abbreviations and acronyms
478 514 abbr[title],
479 515 abbr[data-original-title] {
480 516 cursor: help;
481 517 border-bottom: @border-thickness dotted @grey4;
482 518 }
483 519 .initialism {
484 520 font-size: 90%;
485 521 text-transform: uppercase;
486 522 }
487 523
488 524 // Blockquotes
489 525 blockquote {
490 526 padding: 1em 2em;
491 527 margin: 0 0 2em;
492 528 font-size: @basefontsize;
493 529 border-left: 2px solid @grey6;
494 530
495 531 p,
496 532 ul,
497 533 ol {
498 534 &:last-child {
499 535 margin-bottom: 0;
500 536 }
501 537 }
502 538
503 539 footer,
504 540 small,
505 541 .small {
506 542 display: block;
507 543 font-size: 80%;
508 544
509 545 &:before {
510 546 content: '\2014 \00A0'; // em dash, nbsp
511 547 }
512 548 }
513 549 }
514 550
515 551 // Opposite alignment of blockquote
516 552 //
517 553 .blockquote-reverse,
518 554 blockquote.pull-right {
519 555 padding-right: 15px;
520 556 padding-left: 0;
521 557 border-right: 5px solid @grey6;
522 558 border-left: 0;
523 559 text-align: right;
524 560
525 561 // Account for citation
526 562 footer,
527 563 small,
528 564 .small {
529 565 &:before { content: ''; }
530 566 &:after {
531 567 content: '\00A0 \2014'; // nbsp, em dash
532 568 }
533 569 }
534 570 }
535 571
536 572 // Addresses
537 573 address {
538 574 margin-bottom: 2em;
539 575 font-style: normal;
540 576 line-height: 1.8em;
541 577 }
542 578
543 579 .error-message {
544 580 display: block;
545 581 margin: @padding/3 0;
546 582 color: @alert2;
547 583 }
548 584
549 585 .issue-tracker-link {
550 586 color: @rcblue;
551 587 }
552 588
553 589 .info_text{
554 590 font-size: @basefontsize;
555 591 color: @grey4;
556 592 font-family: @text-regular;
557 593 }
558 594
559 595 .help-block-inline {
560 596 margin: 0;
561 597 }
562 598
563 599 // help block text
564 600 .help-block {
565 601 display: block;
566 602 margin: 0 0 @padding;
567 603 color: @grey4;
568 604 font-family: @text-light;
569 605 &.pre-formatting {
570 606 white-space: pre-wrap;
571 607 }
572 608 }
573 609
574 610 .error-message {
575 611 display: block;
576 612 margin: @padding/3 0;
577 613 color: @alert2;
578 614 }
@@ -1,71 +1,63 b''
1 1
2 2 <div id="update_notice" style="display: none; margin: -40px 0px 20px 0px">
3 3 <div>${_('Checking for updates...')}</div>
4 4 </div>
5 5
6 6
7 7 <div class="panel panel-default">
8 8 <div class="panel-heading">
9 9 <h3 class="panel-title">${_('System Info')}</h3>
10 10 % if c.allowed_to_snapshot:
11 11 <a href="${h.route_path('admin_settings_system', _query={'snapshot':1})}" class="panel-edit">${_('create summary snapshot')}</a>
12 12 % endif
13 13 </div>
14 14 <div class="panel-body">
15 <dl class="dl-horizontal settings">
15 <dl class="dl-horizontal settings dt-400">
16 16 % for dt, dd, warn in c.data_items:
17 17 <dt>${dt}${':' if dt else '---'}</dt>
18 18 <dd>${dd}${'' if dt else '---'}
19 19 % if warn and warn['message']:
20 20 <div class="alert-${warn['type']}">
21 21 <strong>${warn['message']}</strong>
22 22 </div>
23 23 % endif
24 24 </dd>
25 25 % endfor
26 26 </dl>
27 27 </div>
28 28 </div>
29 29
30 30 <div class="panel panel-default">
31 31 <div class="panel-heading">
32 32 <h3 class="panel-title">${_('VCS Server')}</h3>
33 33 </div>
34 34 <div class="panel-body">
35 <dl class="dl-horizontal settings">
35 <dl class="dl-horizontal settings dt-400">
36 36 % for dt, dd in c.vcsserver_data_items:
37 37 <dt>${dt}${':' if dt else '---'}</dt>
38 38 <dd>${dd}${'' if dt else '---'}</dd>
39 39 % endfor
40 40 </dl>
41 41 </div>
42 42 </div>
43 43
44 44 <div class="panel panel-default">
45 45 <div class="panel-heading">
46 46 <h3 class="panel-title">${_('Python Packages')}</h3>
47 47 </div>
48 48 <div class="panel-body">
49 <table class="table">
50 <colgroup>
51 <col class='label'>
52 <col class='content'>
53 </colgroup>
54 <tbody>
55 % for key, value in c.py_modules['human_value']:
56 <tr>
57 <td>${key}</td>
58 <td>${value}</td>
59 </tr>
49 <dl class="dl-horizontal settings dt-400">
50 % for dt, dd in c.py_modules['human_value']:
51 <dt>${dt}${':' if dt else '---'}</dt>
52 <dd>${dd}${'' if dt else '---'}</dd>
60 53 % endfor
61 </tbody>
62 </table>
54 </dl>
63 55 </div>
64 56 </div>
65 57
66 58 <script>
67 59 $('#check_for_update').click(function(e){
68 60 $('#update_notice').show();
69 61 $('#update_notice').load("${h.route_path('admin_settings_system_update')}");
70 62 })
71 63 </script>
General Comments 0
You need to be logged in to leave comments. Login now