From 052700a642b8c171026e3d77bcf84574bf9a9bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?P=C4=93teris=20Caune?= Date: Tue, 5 Nov 2019 10:45:39 +0200 Subject: [PATCH] Make log events fit better on mobile screens. --- CHANGELOG.md | 1 + static/css/bootstrap.css | 431 +++++++++++----------------- static/css/log.css | 12 + stuff/bootstrap/variables.less | 2 +- templates/front/details_events.html | 2 +- templates/front/log.html | 4 +- 6 files changed, 187 insertions(+), 265 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 149579ad..13aa5a81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ All notable changes to this project will be documented in this file. ### Bug Fixes - On mobile, "My Checks" page, always show the gear (Details) button (#286) + - Make log events fit better on mobile screens ## 1.10.0 - 2019-10-21 diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css index 58e6c066..174291cd 100644 --- a/static/css/bootstrap.css +++ b/static/css/bootstrap.css @@ -272,7 +272,7 @@ body { font-size: 14px; line-height: 1.42857143; color: #333333; - background-color: #fff; + background-color: #ffffff; } input, button, @@ -283,7 +283,7 @@ textarea { line-height: inherit; } a { - color: #0091EA; + color: #0091ea; text-decoration: none; } a:hover, @@ -313,8 +313,8 @@ img { .img-thumbnail { padding: 4px; line-height: 1.42857143; - background-color: #fff; - border: 1px solid #ddd; + background-color: #ffffff; + border: 1px solid #dddddd; border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; @@ -367,7 +367,7 @@ h6, .h5, .h6 { font-family: inherit; - font-weight: 300; + font-weight: 400; line-height: 1.1; color: inherit; } @@ -490,7 +490,7 @@ small, mark, .mark { background-color: #fcf8e3; - padding: 0.2em; + padding: .2em; } .text-left { text-align: left; @@ -719,15 +719,15 @@ samp { code { padding: 2px 4px; font-size: 90%; - color: #222; + color: #222222; background-color: transparent; border-radius: 2px; } kbd { padding: 2px 4px; font-size: 90%; - color: #fff; - background-color: #333; + color: #ffffff; + background-color: #333333; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } @@ -747,7 +747,7 @@ pre { word-wrap: break-word; color: #333333; background-color: #f5f5f5; - border: 1px solid #ccc; + border: 1px solid #cccccc; border-radius: 2px; } pre code { @@ -793,71 +793,13 @@ pre code { margin-left: -15px; margin-right: -15px; } -.col-xs-1, -.col-sm-1, -.col-md-1, -.col-lg-1, -.col-xs-2, -.col-sm-2, -.col-md-2, -.col-lg-2, -.col-xs-3, -.col-sm-3, -.col-md-3, -.col-lg-3, -.col-xs-4, -.col-sm-4, -.col-md-4, -.col-lg-4, -.col-xs-5, -.col-sm-5, -.col-md-5, -.col-lg-5, -.col-xs-6, -.col-sm-6, -.col-md-6, -.col-lg-6, -.col-xs-7, -.col-sm-7, -.col-md-7, -.col-lg-7, -.col-xs-8, -.col-sm-8, -.col-md-8, -.col-lg-8, -.col-xs-9, -.col-sm-9, -.col-md-9, -.col-lg-9, -.col-xs-10, -.col-sm-10, -.col-md-10, -.col-lg-10, -.col-xs-11, -.col-sm-11, -.col-md-11, -.col-lg-11, -.col-xs-12, -.col-sm-12, -.col-md-12, -.col-lg-12 { +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } -.col-xs-1, -.col-xs-2, -.col-xs-3, -.col-xs-4, -.col-xs-5, -.col-xs-6, -.col-xs-7, -.col-xs-8, -.col-xs-9, -.col-xs-10, -.col-xs-11, -.col-xs-12 { +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-12 { @@ -1014,18 +956,7 @@ pre code { margin-left: 0%; } @media (min-width: 768px) { - .col-sm-1, - .col-sm-2, - .col-sm-3, - .col-sm-4, - .col-sm-5, - .col-sm-6, - .col-sm-7, - .col-sm-8, - .col-sm-9, - .col-sm-10, - .col-sm-11, - .col-sm-12 { + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-12 { @@ -1183,18 +1114,7 @@ pre code { } } @media (min-width: 992px) { - .col-md-1, - .col-md-2, - .col-md-3, - .col-md-4, - .col-md-5, - .col-md-6, - .col-md-7, - .col-md-8, - .col-md-9, - .col-md-10, - .col-md-11, - .col-md-12 { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-12 { @@ -1352,18 +1272,7 @@ pre code { } } @media (min-width: 1200px) { - .col-lg-1, - .col-lg-2, - .col-lg-3, - .col-lg-4, - .col-lg-5, - .col-lg-6, - .col-lg-7, - .col-lg-8, - .col-lg-9, - .col-lg-10, - .col-lg-11, - .col-lg-12 { + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-12 { @@ -1546,11 +1455,11 @@ th { padding: 8px; line-height: 1.42857143; vertical-align: top; - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; } .table > thead > tr > th { vertical-align: bottom; - border-bottom: 2px solid #ddd; + border-bottom: 2px solid #dddddd; } .table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, @@ -1561,10 +1470,10 @@ th { border-top: 0; } .table > tbody + tbody { - border-top: 2px solid #ddd; + border-top: 2px solid #dddddd; } .table .table { - background-color: #fff; + background-color: #ffffff; } .table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, @@ -1575,7 +1484,7 @@ th { padding: 5px; } .table-bordered { - border: 1px solid #ddd; + border: 1px solid #dddddd; } .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, @@ -1583,7 +1492,7 @@ th { .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { - border: 1px solid #ddd; + border: 1px solid #dddddd; } .table-bordered > thead > tr > th, .table-bordered > thead > tr > td { @@ -1721,7 +1630,7 @@ table th[class*="col-"] { margin-bottom: 15px; overflow-y: hidden; -ms-overflow-style: -ms-autohiding-scrollbar; - border: 1px solid #ddd; + border: 1px solid #dddddd; } .table-responsive > .table { margin-bottom: 0; @@ -1827,9 +1736,9 @@ output { font-size: 14px; line-height: 1.42857143; color: #555555; - background-color: #fff; + background-color: #ffffff; background-image: none; - border: 1px solid #ccc; + border: 1px solid #cccccc; border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); @@ -1844,14 +1753,14 @@ output { box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); } .form-control::-moz-placeholder { - color: #999; + color: #999999; opacity: 1; } .form-control:-ms-input-placeholder { - color: #999; + color: #999999; } .form-control::-webkit-input-placeholder { - color: #999; + color: #999999; } .form-control::-ms-expand { border: 0; @@ -2306,7 +2215,7 @@ select[multiple].input-lg { .btn:hover, .btn:focus, .btn.focus { - color: #333; + color: #333333; text-decoration: none; } .btn:active, @@ -2330,25 +2239,25 @@ fieldset[disabled] a.btn { pointer-events: none; } .btn-default { - color: #333; - background-color: #fff; - border-color: #ccc; + color: #333333; + background-color: #ffffff; + border-color: #cccccc; } .btn-default:focus, .btn-default.focus { - color: #333; + color: #333333; background-color: #e6e6e6; border-color: #8c8c8c; } .btn-default:hover { - color: #333; + color: #333333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { - color: #333; + color: #333333; background-color: #e6e6e6; border-color: #adadad; } @@ -2361,7 +2270,7 @@ fieldset[disabled] a.btn { .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus { - color: #333; + color: #333333; background-color: #d4d4d4; border-color: #8c8c8c; } @@ -2379,33 +2288,33 @@ fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus { - background-color: #fff; - border-color: #ccc; + background-color: #ffffff; + border-color: #cccccc; } .btn-default .badge { - color: #fff; - background-color: #333; + color: #ffffff; + background-color: #333333; } .btn-primary { - color: #fff; + color: #ffffff; background-color: #22bc66; border-color: #1ea65a; } .btn-primary:focus, .btn-primary.focus { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #0b3a20; } .btn-primary:hover { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #15733e; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #15733e; } @@ -2418,7 +2327,7 @@ fieldset[disabled] .btn-default.focus { .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus { - color: #fff; + color: #ffffff; background-color: #15733e; border-color: #0b3a20; } @@ -2441,28 +2350,28 @@ fieldset[disabled] .btn-primary.focus { } .btn-primary .badge { color: #22bc66; - background-color: #fff; + background-color: #ffffff; } .btn-success { - color: #fff; + color: #ffffff; background-color: #22bc66; border-color: #1ea65a; } .btn-success:focus, .btn-success.focus { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #0b3a20; } .btn-success:hover { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #15733e; } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { - color: #fff; + color: #ffffff; background-color: #1a914f; border-color: #15733e; } @@ -2475,7 +2384,7 @@ fieldset[disabled] .btn-primary.focus { .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { - color: #fff; + color: #ffffff; background-color: #15733e; border-color: #0b3a20; } @@ -2498,28 +2407,28 @@ fieldset[disabled] .btn-success.focus { } .btn-success .badge { color: #22bc66; - background-color: #fff; + background-color: #ffffff; } .btn-info { - color: #fff; + color: #ffffff; background-color: #5bc0de; border-color: #46b8da; } .btn-info:focus, .btn-info.focus { - color: #fff; + color: #ffffff; background-color: #31b0d5; border-color: #1b6d85; } .btn-info:hover { - color: #fff; + color: #ffffff; background-color: #31b0d5; border-color: #269abc; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { - color: #fff; + color: #ffffff; background-color: #31b0d5; border-color: #269abc; } @@ -2532,7 +2441,7 @@ fieldset[disabled] .btn-success.focus { .btn-info:active.focus, .btn-info.active.focus, .open > .dropdown-toggle.btn-info.focus { - color: #fff; + color: #ffffff; background-color: #269abc; border-color: #1b6d85; } @@ -2555,28 +2464,28 @@ fieldset[disabled] .btn-info.focus { } .btn-info .badge { color: #5bc0de; - background-color: #fff; + background-color: #ffffff; } .btn-warning { - color: #fff; + color: #ffffff; background-color: #f0ad4e; border-color: #eea236; } .btn-warning:focus, .btn-warning.focus { - color: #fff; + color: #ffffff; background-color: #ec971f; border-color: #985f0d; } .btn-warning:hover { - color: #fff; + color: #ffffff; background-color: #ec971f; border-color: #d58512; } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { - color: #fff; + color: #ffffff; background-color: #ec971f; border-color: #d58512; } @@ -2589,7 +2498,7 @@ fieldset[disabled] .btn-info.focus { .btn-warning:active.focus, .btn-warning.active.focus, .open > .dropdown-toggle.btn-warning.focus { - color: #fff; + color: #ffffff; background-color: #d58512; border-color: #985f0d; } @@ -2612,28 +2521,28 @@ fieldset[disabled] .btn-warning.focus { } .btn-warning .badge { color: #f0ad4e; - background-color: #fff; + background-color: #ffffff; } .btn-danger { - color: #fff; + color: #ffffff; background-color: #d9534f; border-color: #d43f3a; } .btn-danger:focus, .btn-danger.focus { - color: #fff; + color: #ffffff; background-color: #c9302c; border-color: #761c19; } .btn-danger:hover { - color: #fff; + color: #ffffff; background-color: #c9302c; border-color: #ac2925; } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { - color: #fff; + color: #ffffff; background-color: #c9302c; border-color: #ac2925; } @@ -2646,7 +2555,7 @@ fieldset[disabled] .btn-warning.focus { .btn-danger:active.focus, .btn-danger.active.focus, .open > .dropdown-toggle.btn-danger.focus { - color: #fff; + color: #ffffff; background-color: #ac2925; border-color: #761c19; } @@ -2669,10 +2578,10 @@ fieldset[disabled] .btn-danger.focus { } .btn-danger .badge { color: #d9534f; - background-color: #fff; + background-color: #ffffff; } .btn-link { - color: #0091EA; + color: #0091ea; font-weight: normal; border-radius: 0; } @@ -2800,8 +2709,8 @@ tbody.collapse.in { list-style: none; font-size: 14px; text-align: left; - background-color: #fff; - border: 1px solid #ccc; + background-color: #ffffff; + border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); @@ -2836,7 +2745,7 @@ tbody.collapse.in { .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { - color: #fff; + color: #ffffff; text-decoration: none; outline: 0; background-color: #22bc66; @@ -3172,7 +3081,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { color: #555555; text-align: center; background-color: #eeeeee; - border: 1px solid #ccc; + border: 1px solid #cccccc; border-radius: 2px; } .input-group-addon.input-sm { @@ -3273,7 +3182,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav .open > a:hover, .nav .open > a:focus { background-color: #eeeeee; - border-color: #0091EA; + border-color: #0091ea; } .nav .nav-divider { height: 1px; @@ -3285,7 +3194,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { max-width: none; } .nav-tabs { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; } .nav-tabs > li { float: left; @@ -3298,14 +3207,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn { border-radius: 2px 2px 0 0; } .nav-tabs > li > a:hover { - border-color: #eeeeee #eeeeee #ddd; + border-color: #eeeeee #eeeeee #dddddd; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #555555; - background-color: #fff; - border: 1px solid #ddd; + background-color: #ffffff; + border: 1px solid #dddddd; border-bottom-color: transparent; cursor: default; } @@ -3340,17 +3249,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { - border: 1px solid #ddd; + border: 1px solid #dddddd; } @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; border-radius: 2px 2px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus { - border-bottom-color: #fff; + border-bottom-color: #ffffff; } } .nav-pills > li { @@ -3365,8 +3274,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { - color: #555; - background-color: #EEE; + color: #555555; + background-color: #eeeeee; } .nav-stacked > li { float: none; @@ -3408,17 +3317,17 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { - border: 1px solid #ddd; + border: 1px solid #dddddd; } @media (min-width: 768px) { .nav-tabs-justified > li > a { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; border-radius: 2px 2px 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, .nav-tabs-justified > .active > a:focus { - border-bottom-color: #fff; + border-bottom-color: #ffffff; } } .tab-content > .tab-pane { @@ -3759,11 +3668,11 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } } .navbar-default { - background-color: #FFF; + background-color: #ffffff; border-color: #eeeeee; } .navbar-default .navbar-brand { - color: #777; + color: #777777; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { @@ -3771,37 +3680,37 @@ select[multiple].input-group-sm > .input-group-btn > .btn { background-color: transparent; } .navbar-default .navbar-text { - color: #777; + color: #777777; } .navbar-default .navbar-nav > li > a { - color: #777; + color: #777777; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { - color: #333; + color: #333333; background-color: transparent; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { - color: #555; + color: #555555; background-color: transparent; } .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus { - color: #ccc; + color: #cccccc; background-color: transparent; } .navbar-default .navbar-toggle { - border-color: #ddd; + border-color: #dddddd; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background-color: #ddd; + background-color: #dddddd; } .navbar-default .navbar-toggle .icon-bar { - background-color: #888; + background-color: #888888; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { @@ -3811,51 +3720,51 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; - color: #555; + color: #555555; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { - color: #777; + color: #777777; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: #333; + color: #333333; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #555; + color: #555555; background-color: transparent; } .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #ccc; + color: #cccccc; background-color: transparent; } } .navbar-default .navbar-link { - color: #777; + color: #777777; } .navbar-default .navbar-link:hover { - color: #333; + color: #333333; } .navbar-default .btn-link { - color: #777; + color: #777777; } .navbar-default .btn-link:hover, .navbar-default .btn-link:focus { - color: #333; + color: #333333; } .navbar-default .btn-link[disabled]:hover, fieldset[disabled] .navbar-default .btn-link:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:focus { - color: #ccc; + color: #cccccc; } .navbar-inverse { - background-color: #222; + background-color: #222222; border-color: #080808; } .navbar-inverse .navbar-brand { @@ -3863,7 +3772,7 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { - color: #fff; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-text { @@ -3874,30 +3783,30 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { - color: #fff; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus { - color: #fff; + color: #ffffff; background-color: #080808; } .navbar-inverse .navbar-nav > .disabled > a, .navbar-inverse .navbar-nav > .disabled > a:hover, .navbar-inverse .navbar-nav > .disabled > a:focus { - color: #444; + color: #444444; background-color: transparent; } .navbar-inverse .navbar-toggle { - border-color: #333; + border-color: #333333; } .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { - background-color: #333; + background-color: #333333; } .navbar-inverse .navbar-toggle .icon-bar { - background-color: #fff; + background-color: #ffffff; } .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { @@ -3907,7 +3816,7 @@ fieldset[disabled] .navbar-default .btn-link:focus { .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: #080808; - color: #fff; + color: #ffffff; } @media (max-width: 767px) { .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { @@ -3921,19 +3830,19 @@ fieldset[disabled] .navbar-default .btn-link:focus { } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { - color: #fff; + color: #ffffff; background-color: transparent; } .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #fff; + color: #ffffff; background-color: #080808; } .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #444; + color: #444444; background-color: transparent; } } @@ -3941,20 +3850,20 @@ fieldset[disabled] .navbar-default .btn-link:focus { color: #9d9d9d; } .navbar-inverse .navbar-link:hover { - color: #fff; + color: #ffffff; } .navbar-inverse .btn-link { color: #9d9d9d; } .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link:focus { - color: #fff; + color: #ffffff; } .navbar-inverse .btn-link[disabled]:hover, fieldset[disabled] .navbar-inverse .btn-link:hover, .navbar-inverse .btn-link[disabled]:focus, fieldset[disabled] .navbar-inverse .btn-link:focus { - color: #444; + color: #444444; } .breadcrumb { padding: 8px 15px; @@ -3969,26 +3878,26 @@ fieldset[disabled] .navbar-inverse .btn-link:focus { .breadcrumb > li + li:before { content: "/\00a0"; padding: 0 5px; - color: #ccc; + color: #cccccc; } .breadcrumb > .active { color: #777777; } .label { display: inline; - padding: 0.2em 0.6em 0.3em; + padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; - color: #fff; + color: #ffffff; text-align: center; white-space: nowrap; vertical-align: baseline; - border-radius: 0.25em; + border-radius: .25em; } a.label:hover, a.label:focus { - color: #fff; + color: #ffffff; text-decoration: none; cursor: pointer; } @@ -4047,7 +3956,7 @@ a.label:focus { padding: 3px 7px; font-size: 12px; font-weight: bold; - color: #fff; + color: #ffffff; line-height: 1; vertical-align: middle; white-space: nowrap; @@ -4069,14 +3978,14 @@ a.label:focus { } a.badge:hover, a.badge:focus { - color: #fff; + color: #ffffff; text-decoration: none; cursor: pointer; } .list-group-item.active > .badge, .nav-pills > .active > a > .badge { - color: #0091EA; - background-color: #fff; + color: #0091ea; + background-color: #ffffff; } .list-group-item > .badge { float: right; @@ -4214,8 +4123,8 @@ a.badge:focus { display: block; padding: 10px 15px; margin-bottom: -1px; - background-color: #fff; - border: 1px solid #ddd; + background-color: #ffffff; + border: 1px solid #dddddd; } .list-group-item:first-child { border-top-right-radius: 2px; @@ -4228,18 +4137,18 @@ a.badge:focus { } a.list-group-item, button.list-group-item { - color: #555; + color: #555555; } a.list-group-item .list-group-item-heading, button.list-group-item .list-group-item-heading { - color: #333; + color: #333333; } a.list-group-item:hover, button.list-group-item:hover, a.list-group-item:focus, button.list-group-item:focus { text-decoration: none; - color: #555; + color: #555555; background-color: #f5f5f5; } button.list-group-item { @@ -4267,7 +4176,7 @@ button.list-group-item { .list-group-item.active:hover, .list-group-item.active:focus { z-index: 2; - color: #fff; + color: #ffffff; background-color: #22bc66; border-color: #22bc66; } @@ -4413,7 +4322,7 @@ button.list-group-item-danger.active:focus { } .panel { margin-bottom: 20px; - background-color: #fff; + background-color: #ffffff; border: 1px solid transparent; border-radius: 2px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); @@ -4447,7 +4356,7 @@ button.list-group-item-danger.active:focus { .panel-footer { padding: 10px 15px; background-color: #f5f5f5; - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; } @@ -4561,7 +4470,7 @@ button.list-group-item-danger.active:focus { .panel > .panel-body + .table-responsive, .panel > .table + .panel-body, .panel > .table-responsive + .panel-body { - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; } .panel > .table > tbody:first-child > tr:first-child th, .panel > .table > tbody:first-child > tr:first-child td { @@ -4638,37 +4547,37 @@ button.list-group-item-danger.active:focus { } .panel-group .panel-heading + .panel-collapse > .panel-body, .panel-group .panel-heading + .panel-collapse > .list-group { - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; } .panel-group .panel-footer { border-top: 0; } .panel-group .panel-footer + .panel-collapse .panel-body { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #dddddd; } .panel-default { - border-color: #ddd; + border-color: #dddddd; } .panel-default > .panel-heading { color: #333333; background-color: #f5f5f5; - border-color: #ddd; + border-color: #dddddd; } .panel-default > .panel-heading + .panel-collapse > .panel-body { - border-top-color: #ddd; + border-top-color: #dddddd; } .panel-default > .panel-heading .badge { color: #f5f5f5; background-color: #333333; } .panel-default > .panel-footer + .panel-collapse > .panel-body { - border-bottom-color: #ddd; + border-bottom-color: #dddddd; } .panel-primary { border-color: #22bc66; } .panel-primary > .panel-heading { - color: #fff; + color: #ffffff; background-color: #22bc66; border-color: #22bc66; } @@ -4677,7 +4586,7 @@ button.list-group-item-danger.active:focus { } .panel-primary > .panel-heading .badge { color: #22bc66; - background-color: #fff; + background-color: #ffffff; } .panel-primary > .panel-footer + .panel-collapse > .panel-body { border-bottom-color: #22bc66; @@ -4759,14 +4668,14 @@ button.list-group-item-danger.active:focus { font-size: 21px; font-weight: bold; line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; + color: #000000; + text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); } .close:hover, .close:focus { - color: #000; + color: #000000; text-decoration: none; cursor: pointer; opacity: 0.5; @@ -4821,8 +4730,8 @@ button.close { } .modal-content { position: relative; - background-color: #fff; - border: 1px solid #999; + background-color: #ffffff; + border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); @@ -4837,7 +4746,7 @@ button.close { bottom: 0; left: 0; z-index: 1040; - background-color: #000; + background-color: #000000; } .modal-backdrop.fade { opacity: 0; @@ -4948,9 +4857,9 @@ button.close { .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: #fff; + color: #ffffff; text-align: center; - background-color: #000; + background-color: #000000; border-radius: 2px; } .tooltip-arrow { @@ -4965,56 +4874,56 @@ button.close { left: 50%; margin-left: -5px; border-width: 5px 5px 0; - border-top-color: #000; + border-top-color: #000000; } .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; - border-top-color: #000; + border-top-color: #000000; } .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; - border-top-color: #000; + border-top-color: #000000; } .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; - border-right-color: #000; + border-right-color: #000000; } .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; - border-left-color: #000; + border-left-color: #000000; } .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; - border-bottom-color: #000; + border-bottom-color: #000000; } .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; - border-bottom-color: #000; + border-bottom-color: #000000; } .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; - border-bottom-color: #000; + border-bottom-color: #000000; } .popover { position: absolute; @@ -5040,9 +4949,9 @@ button.close { word-spacing: normal; word-wrap: normal; font-size: 14px; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; - border: 1px solid #ccc; + border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 3px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -5100,7 +5009,7 @@ button.close { bottom: 1px; margin-left: -10px; border-bottom-width: 0; - border-top-color: #fff; + border-top-color: #ffffff; } .popover.right > .arrow { top: 50%; @@ -5115,7 +5024,7 @@ button.close { left: 1px; bottom: -10px; border-left-width: 0; - border-right-color: #fff; + border-right-color: #ffffff; } .popover.bottom > .arrow { left: 50%; @@ -5130,7 +5039,7 @@ button.close { top: 1px; margin-left: -10px; border-top-width: 0; - border-bottom-color: #fff; + border-bottom-color: #ffffff; } .popover.left > .arrow { top: 50%; @@ -5144,7 +5053,7 @@ button.close { content: " "; right: 1px; border-right-width: 0; - border-left-color: #fff; + border-left-color: #ffffff; bottom: -10px; } .clearfix:before, diff --git a/static/css/log.css b/static/css/log.css index 5a72cd5b..2757666e 100644 --- a/static/css/log.css +++ b/static/css/log.css @@ -29,6 +29,12 @@ padding-left: 20px; } +@media (max-width: 767px) { + #log .delta { + display: none; + } +} + #log .details { width: 100%; max-width: 0; @@ -58,6 +64,11 @@ background: #fff3f2; } +#log td.event { + text-align: right; + width: 1%; +} + #log .n-cell { font-family: monospace; text-align: right; @@ -70,3 +81,4 @@ #log .alert-info { font-size: 12px; } + diff --git a/stuff/bootstrap/variables.less b/stuff/bootstrap/variables.less index 985fd6f4..a5fec2ed 100755 --- a/stuff/bootstrap/variables.less +++ b/stuff/bootstrap/variables.less @@ -67,7 +67,7 @@ //** By default, this inherits from the ``. @headings-font-family: inherit; -@headings-font-weight: 300; +@headings-font-weight: 400; @headings-line-height: 1.1; @headings-color: inherit; diff --git a/templates/front/details_events.html b/templates/front/details_events.html index cb425d0f..e02c8820 100644 --- a/templates/front/details_events.html +++ b/templates/front/details_events.html @@ -9,7 +9,7 @@ - + {% if event.kind == "fail" %} Failure {% elif event.kind == "start" %} diff --git a/templates/front/log.html b/templates/front/log.html index 9233e1b5..26dd9ac8 100644 --- a/templates/front/log.html +++ b/templates/front/log.html @@ -17,7 +17,7 @@
  • Log
    • -
  • +