From 75db3195d4f0aaa5f727018ef3cb8a72f247934a Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Tue, 2 Aug 2022 23:56:47 +0200 Subject: [PATCH] CSS modernized --- .../allianceauth/authentication/css/admin.css | 26 ++++---- .../static/allianceauth/services/admin.css | 9 ++- .../static/allianceauth/css/auth-base.css | 65 +++++++------------ .../static/allianceauth/css/checkbox.css | 36 +++++----- 4 files changed, 64 insertions(+), 72 deletions(-) diff --git a/allianceauth/authentication/static/allianceauth/authentication/css/admin.css b/allianceauth/authentication/static/allianceauth/authentication/css/admin.css index 7ea91049..3c7d2fd5 100644 --- a/allianceauth/authentication/static/allianceauth/authentication/css/admin.css +++ b/allianceauth/authentication/static/allianceauth/authentication/css/admin.css @@ -6,24 +6,26 @@ CSS for allianceauth admin site .img-circle { border-radius: 50%; } + .column-user_profile_pic { - width: 1px; white-space: nowrap; + width: 1px; } /* tooltip */ .tooltip { - position: relative ; + position: relative; } + .tooltip:hover::after { - content: attr(data-tooltip) ; - position: absolute ; - top: 1.1em ; - left: 1em ; - min-width: 200px ; - border: 1px #808080 solid ; - padding: 8px ; - color: black ; - background-color: rgb(255, 255, 204) ; - z-index: 1 ; + background-color: rgb(255 255 204); + border: 1px rgb(128 128 128) solid; + color: rgb(0 0 0); + content: attr(data-tooltip); + left: 1em; + min-width: 200px; + padding: 8px; + position: absolute; + top: 1.1em; + z-index: 1; } diff --git a/allianceauth/services/static/allianceauth/services/admin.css b/allianceauth/services/static/allianceauth/services/admin.css index a8e5c54c..83771b51 100644 --- a/allianceauth/services/static/allianceauth/services/admin.css +++ b/allianceauth/services/static/allianceauth/services/admin.css @@ -2,5 +2,10 @@ CSS for allianceauth admin site */ -.img-circle { border-radius: 50%; } -.column-user_profile_pic { width: 50px; } +.img-circle { + border-radius: 50%; +} + +.column-user_profile_pic { + width: 50px; +} diff --git a/allianceauth/static/allianceauth/css/auth-base.css b/allianceauth/static/allianceauth/css/auth-base.css index 29a51398..1e9a5f9b 100644 --- a/allianceauth/static/allianceauth/css/auth-base.css +++ b/allianceauth/static/allianceauth/css/auth-base.css @@ -2,17 +2,9 @@ body { margin-bottom: 32px; } -.gray-icon-color .fa { - color: #505050; -} - -.notification-bell-color { - color: #a88f1e; -} - .navbar-brand { height: 58px; - padding: 19px 19px; + padding: 19px; } .auth-navbar-top { @@ -48,36 +40,36 @@ ul.list-group.list-group-horizontal > li.list-group-item { } @media all { - /* style nav tabs in dark mode*/ + /* style nav tabs in dark mode */ .template-dark-mode .nav-tabs > li.active > a { - background-color: rgb(70, 69, 69) !important; - color: rgb(255, 255, 255) !important; + background-color: rgb(70 69 69) !important; + color: rgb(255 255 255) !important; } .panel-tabs-aa { border-top: none; - border-top-left-radius: 0%; - border-top-right-radius: 0%; + border-top-left-radius: 0; + border-top-right-radius: 0; } /* style group headers within a table */ .template-light-mode .tr-group { - background-color: #e6e6e6 !important; + background-color: rgb(230 230 230) !important; font-weight: bold; } .template-dark-mode .tr-group { - background-color: rgb(105, 105, 105) !important; + background-color: rgb(105 105 105) !important; font-weight: bold; } /* default style for tables */ .template-light-mode .table-aa > thead > tr > th { - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid rgb(242 242 242); } .template-dark-mode .table-aa > thead > tr > th { - border-bottom: 1px solid rgb(70, 69, 69); + border-bottom: 1px solid rgb(70 69 69); } .table-aa > thead > tr > th { @@ -85,11 +77,11 @@ ul.list-group.list-group-horizontal > li.list-group-item { } .template-light-mode .table-aa > tbody > tr > td { - border-bottom: 1px solid #f2f2f2; + border-bottom: 1px solid rgb(242 242 242); } .template-dark-mode .table-aa > tbody > tr > td { - border-bottom: 1px solid rgb(70, 69, 69); + border-bottom: 1px solid rgb(70 69 69); } .table-aa > tbody > tr > td { @@ -101,8 +93,8 @@ ul.list-group.list-group-horizontal > li.list-group-item { } .task-status-progress-bar { - font-size: 15px!important; - line-height: normal!important; + font-size: 15px !important; + line-height: normal !important; } } @@ -110,11 +102,11 @@ ul.list-group.list-group-horizontal > li.list-group-item { ------------------------------------------------------------------------------------- */ @media all { .template-light-mode .nav-pills > li > a.active { - background-color: rgb(236, 240, 241); + background-color: rgb(236 240 241); } .template-dark-mode .nav-pills > li > a.active { - background-color: rgb(48, 48, 48); + background-color: rgb(48 48 48); } } @@ -136,45 +128,41 @@ ul.list-group.list-group-horizontal > li.list-group-item { .dropdown-menu > li > a { clear: both; - color: rgb(123, 138, 139); + color: rgb(123 138 139); display: block; font-weight: 400; - line-height: 1.42857143; + line-height: 1.42857; padding: 3px 20px; white-space: nowrap; } .top-user-menu { - color: rgb(255, 255, 255); + color: rgb(255 255 255); } .top-menu-bar-language-select form { border-bottom: 1px solid transparent; border-top: 1px solid transparent; - -webkit-box-shadow: inset 0 1px 0 rgb(255 255 255), 0 1px 0 rgb(255 255 255); box-shadow: inset 0 1px 0 rgb(255 255 255), 0 1px 0 rgb(255 255 255); - margin-bottom: 7.5px; - margin-left: 5px; - margin-right: 5px; - margin-top: 7.5px; + margin: 7.5px 5px; padding: 10px 15px; } } @media all and (max-width: 768px) { - .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a { + .navbar-nav .open .dropdown-menu .dropdown-header, + .navbar-nav .open .dropdown-menu > li > a { padding: 5px 15px 5px 25px; } } @media all and (min-width: 768px) { .top-user-menu { - color: rgb(123, 138, 139); + color: rgb(123 138 139); } .top-menu-bar-language-select form { border: 0; - -webkit-box-shadow: none; box-shadow: none; margin-left: 0; margin-right: 0; @@ -188,7 +176,7 @@ ul.list-group.list-group-horizontal > li.list-group-item { ------------------------------------------------------------------------------------- */ @media all { .nav-item-eve-time .eve-time-wrapper { - color: rgb(255, 255, 255); + color: rgb(255 255 255); display: block; line-height: 21px; padding: 10px 15px; @@ -207,14 +195,11 @@ ul.list-group.list-group-horizontal > li.list-group-item { @media (min-width: 768px) { /* class for vertically aligning columns in a bootstrap row */ .row.vertical-flexbox-row2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; flex-wrap: wrap; } - .row.vertical-flexbox-row2 > [class*='col-'] { + .row.vertical-flexbox-row2 > [class*="col-"] { display: flex; flex-direction: column; } diff --git a/allianceauth/static/allianceauth/css/checkbox.css b/allianceauth/static/allianceauth/css/checkbox.css index 048970ad..27b46f40 100644 --- a/allianceauth/static/allianceauth/css/checkbox.css +++ b/allianceauth/static/allianceauth/css/checkbox.css @@ -1,20 +1,20 @@ -.checkbox label:after, -.radio label:after { - content: ''; - display: table; +.checkbox label::after, +.radio label::after { clear: both; + content: ""; + display: table; } .checkbox .cr, .radio .cr { - position: relative; + border: 1px solid rgb(169 169 169); + border-radius: 0.25em; display: inline-block; - border: 1px solid #a9a9a9; - border-radius: .25em; - width: 1.3em; - height: 1.3em; float: left; - margin-right: .5em; + height: 1.3em; + margin-right: 0.5em; + position: relative; + width: 1.3em; } .radio .cr { @@ -23,11 +23,11 @@ .checkbox .cr .cr-icon, .radio .cr .cr-icon { - position: absolute; - font-size: .8em; - line-height: 0; - top: 50%; + font-size: 0.8em; left: 20%; + line-height: 0; + position: absolute; + top: 50%; } .radio .cr .cr-icon { @@ -41,18 +41,18 @@ .checkbox label input[type="checkbox"] + .cr > .cr-icon, .radio label input[type="radio"] + .cr > .cr-icon { - transform: scale(3) rotateZ(-20deg); opacity: 0; - transition: all .3s ease-in; + transform: scale(3) rotateZ(-20deg); + transition: all 0.3s ease-in; } .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon { - transform: scale(1) rotateZ(0deg); opacity: 1; + transform: scale(1) rotateZ(0deg); } .checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr { - opacity: .5; + opacity: 0.5; }