Merge branch 'modernize-css' into 'master'

CSS modernized

See merge request allianceauth/allianceauth!1448
This commit is contained in:
Ariel Rin 2022-09-07 06:21:15 +00:00
commit d2e494b9be
4 changed files with 64 additions and 72 deletions

View File

@ -6,24 +6,26 @@ CSS for allianceauth admin site
.img-circle { .img-circle {
border-radius: 50%; border-radius: 50%;
} }
.column-user_profile_pic { .column-user_profile_pic {
width: 1px;
white-space: nowrap; white-space: nowrap;
width: 1px;
} }
/* tooltip */ /* tooltip */
.tooltip { .tooltip {
position: relative ; position: relative;
} }
.tooltip:hover::after { .tooltip:hover::after {
content: attr(data-tooltip) ; background-color: rgb(255 255 204);
position: absolute ; border: 1px rgb(128 128 128) solid;
top: 1.1em ; color: rgb(0 0 0);
left: 1em ; content: attr(data-tooltip);
min-width: 200px ; left: 1em;
border: 1px #808080 solid ; min-width: 200px;
padding: 8px ; padding: 8px;
color: black ; position: absolute;
background-color: rgb(255, 255, 204) ; top: 1.1em;
z-index: 1 ; z-index: 1;
} }

View File

@ -2,5 +2,10 @@
CSS for allianceauth admin site CSS for allianceauth admin site
*/ */
.img-circle { border-radius: 50%; } .img-circle {
.column-user_profile_pic { width: 50px; } border-radius: 50%;
}
.column-user_profile_pic {
width: 50px;
}

View File

@ -2,17 +2,9 @@ body {
margin-bottom: 32px; margin-bottom: 32px;
} }
.gray-icon-color .fa {
color: #505050;
}
.notification-bell-color {
color: #a88f1e;
}
.navbar-brand { .navbar-brand {
height: 58px; height: 58px;
padding: 19px 19px; padding: 19px;
} }
.auth-navbar-top { .auth-navbar-top {
@ -48,36 +40,36 @@ ul.list-group.list-group-horizontal > li.list-group-item {
} }
@media all { @media all {
/* style nav tabs in dark mode*/ /* style nav tabs in dark mode */
.template-dark-mode .nav-tabs > li.active > a { .template-dark-mode .nav-tabs > li.active > a {
background-color: rgb(70, 69, 69) !important; background-color: rgb(70 69 69) !important;
color: rgb(255, 255, 255) !important; color: rgb(255 255 255) !important;
} }
.panel-tabs-aa { .panel-tabs-aa {
border-top: none; border-top: none;
border-top-left-radius: 0%; border-top-left-radius: 0;
border-top-right-radius: 0%; border-top-right-radius: 0;
} }
/* style group headers within a table */ /* style group headers within a table */
.template-light-mode .tr-group { .template-light-mode .tr-group {
background-color: #e6e6e6 !important; background-color: rgb(230 230 230) !important;
font-weight: bold; font-weight: bold;
} }
.template-dark-mode .tr-group { .template-dark-mode .tr-group {
background-color: rgb(105, 105, 105) !important; background-color: rgb(105 105 105) !important;
font-weight: bold; font-weight: bold;
} }
/* default style for tables */ /* default style for tables */
.template-light-mode .table-aa > thead > tr > th { .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 { .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 { .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 { .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 { .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 { .table-aa > tbody > tr > td {
@ -101,8 +93,8 @@ ul.list-group.list-group-horizontal > li.list-group-item {
} }
.task-status-progress-bar { .task-status-progress-bar {
font-size: 15px!important; font-size: 15px !important;
line-height: normal!important; line-height: normal !important;
} }
} }
@ -110,11 +102,11 @@ ul.list-group.list-group-horizontal > li.list-group-item {
------------------------------------------------------------------------------------- */ ------------------------------------------------------------------------------------- */
@media all { @media all {
.template-light-mode .nav-pills > li > a.active { .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 { .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 { .dropdown-menu > li > a {
clear: both; clear: both;
color: rgb(123, 138, 139); color: rgb(123 138 139);
display: block; display: block;
font-weight: 400; font-weight: 400;
line-height: 1.42857143; line-height: 1.42857;
padding: 3px 20px; padding: 3px 20px;
white-space: nowrap; white-space: nowrap;
} }
.top-user-menu { .top-user-menu {
color: rgb(255, 255, 255); color: rgb(255 255 255);
} }
.top-menu-bar-language-select form { .top-menu-bar-language-select form {
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
border-top: 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); box-shadow: inset 0 1px 0 rgb(255 255 255), 0 1px 0 rgb(255 255 255);
margin-bottom: 7.5px; margin: 7.5px 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 7.5px;
padding: 10px 15px; padding: 10px 15px;
} }
} }
@media all and (max-width: 768px) { @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; padding: 5px 15px 5px 25px;
} }
} }
@media all and (min-width: 768px) { @media all and (min-width: 768px) {
.top-user-menu { .top-user-menu {
color: rgb(123, 138, 139); color: rgb(123 138 139);
} }
.top-menu-bar-language-select form { .top-menu-bar-language-select form {
border: 0; border: 0;
-webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -188,7 +176,7 @@ ul.list-group.list-group-horizontal > li.list-group-item {
------------------------------------------------------------------------------------- */ ------------------------------------------------------------------------------------- */
@media all { @media all {
.nav-item-eve-time .eve-time-wrapper { .nav-item-eve-time .eve-time-wrapper {
color: rgb(255, 255, 255); color: rgb(255 255 255);
display: block; display: block;
line-height: 21px; line-height: 21px;
padding: 10px 15px; padding: 10px 15px;
@ -207,14 +195,11 @@ ul.list-group.list-group-horizontal > li.list-group-item {
@media (min-width: 768px) { @media (min-width: 768px) {
/* class for vertically aligning columns in a bootstrap row */ /* class for vertically aligning columns in a bootstrap row */
.row.vertical-flexbox-row2 { .row.vertical-flexbox-row2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.row.vertical-flexbox-row2 > [class*='col-'] { .row.vertical-flexbox-row2 > [class*="col-"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

View File

@ -1,20 +1,20 @@
.checkbox label:after, .checkbox label::after,
.radio label:after { .radio label::after {
content: '';
display: table;
clear: both; clear: both;
content: "";
display: table;
} }
.checkbox .cr, .checkbox .cr,
.radio .cr { .radio .cr {
position: relative; border: 1px solid rgb(169 169 169);
border-radius: 0.25em;
display: inline-block; display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left; float: left;
margin-right: .5em; height: 1.3em;
margin-right: 0.5em;
position: relative;
width: 1.3em;
} }
.radio .cr { .radio .cr {
@ -23,11 +23,11 @@
.checkbox .cr .cr-icon, .checkbox .cr .cr-icon,
.radio .cr .cr-icon { .radio .cr .cr-icon {
position: absolute; font-size: 0.8em;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%; left: 20%;
line-height: 0;
position: absolute;
top: 50%;
} }
.radio .cr .cr-icon { .radio .cr .cr-icon {
@ -41,18 +41,18 @@
.checkbox label input[type="checkbox"] + .cr > .cr-icon, .checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon { .radio label input[type="radio"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0; 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, .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon { .radio label input[type="radio"]:checked + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1; opacity: 1;
transform: scale(1) rotateZ(0deg);
} }
.checkbox label input[type="checkbox"]:disabled + .cr, .checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr { .radio label input[type="radio"]:disabled + .cr {
opacity: .5; opacity: 0.5;
} }