From 75db3195d4f0aaa5f727018ef3cb8a72f247934a Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
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;
 }