From 4252bd23485f3f2434e24a12995215a7d9e8b9a5 Mon Sep 17 00:00:00 2001 From: Godfrey M Date: Wed, 8 Jun 2022 13:17:16 -0700 Subject: [PATCH] cleans up dark modes --- .../assets/less/skins/skin-blue-dark.less | 28 ++--- .../assets/less/skins/skin-green-dark.less | 44 +++---- .../assets/less/skins/skin-orange-dark.less | 42 ++----- .../assets/less/skins/skin-purple-dark.less | 28 ++--- .../assets/less/skins/skin-red-dark.less | 4 +- .../assets/less/skins/skin-yellow-dark.less | 113 +++++++----------- 6 files changed, 96 insertions(+), 163 deletions(-) diff --git a/resources/assets/less/skins/skin-blue-dark.less b/resources/assets/less/skins/skin-blue-dark.less index ac47e29fe..56233c505 100644 --- a/resources/assets/less/skins/skin-blue-dark.less +++ b/resources/assets/less/skins/skin-blue-dark.less @@ -61,12 +61,12 @@ .btn, .btn:hover { - color: #fff; + color: #fff !important; &.btn-primary, .btn-primary:link { background-color: darken(@blue, 10%); - border-color: darken(@blue, 20%); - color: #fff; + border-color: #FFF; + color: #FFF; } @@ -90,10 +90,10 @@ a { &:hover { - color: #fff; + color: var(--hover-link); } &:visited { - color: #fff; + color: var(--visited-link); } } @@ -107,7 +107,7 @@ a { :root { --background: #222; --back-main: #333; - --back-sub: #3d4144; + --back-sub: #272727; --back-sub-alt: rgba(0, 0, 0, 0.36); --button-default: darken(@blue, 15%); --button-primary: darken(@blue, 25%); @@ -115,9 +115,9 @@ a { --header: @blue; /* Use same as Header picker */ --text-main: #BBB; --text-sub: #9b9b9b; - --link: #1978D4; /* Use same as Header picker, lighten by 70% */ - --visited-link: #3c8dbc ; /* Use same as Header picker, lighten by 70% */ - --hover-link: #4B77BE; /* Use same as Header picker, lighten by 70% */ + --link: #00BFFF; /* Use same as Header picker, lighten by 70% */ + --visited-link: lighten(#00BFFF,15%); /* Use same as Header picker, lighten by 70% */ + --hover-link: lighten(#00BFFF,30%); /* Use same as Header picker, lighten by 70% */ --nav-link: #FFF; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */ } @@ -146,14 +146,6 @@ a:link { color: var(--link); } -a:visited { - color: var(--nav-link); -} - -a:hover { - color: var(--hover-link); -} - .btn-primary.hover { color: var(--nav-link); } @@ -203,7 +195,7 @@ body { color: var(--link); } .btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue { - color: var(--text-main)!important; + color: var(--text-main); } .btn-primary:hover { background-color: var(--button-primary); diff --git a/resources/assets/less/skins/skin-green-dark.less b/resources/assets/less/skins/skin-green-dark.less index 50d36f0d3..9d518d36a 100644 --- a/resources/assets/less/skins/skin-green-dark.less +++ b/resources/assets/less/skins/skin-green-dark.less @@ -61,39 +61,39 @@ .btn, .btn:hover { - color: #fff; + color: #FFF !important; &.btn-primary, .btn-primary:link { background-color: darken(@green, 10%); - border-color: darken(@green, 20%); - color: #fff; + border-color: #FFF; + color: #FFF; } &a.btn-primary:hover { background-color: darken(@green, 20%); border-color: darken(@green, 20%); - color: #fff; + color: #FFF; } &.btn-white:link { background-color: darken(@green, 10%); - color: #fff; + color: #FFF; } &.btn-white:hover { background-color: darken(@green, 30%); - color: #fff; + color: #FFF; } } a { &:hover { - color: #fff; + color: var(--hover-link); } &:visited { - color: #fff; + color: var(--visited-link); } } @@ -107,17 +107,17 @@ a { :root { --background: #222; --back-main: #333; - --back-sub: #3d4144; + --back-sub: #312F2F; --back-sub-alt: rgba(0, 0, 0, 0.36); - --button-default: darken(@green, 15%); - --button-primary: darken(@green, 25%); - --button-hover: darken(@green, 30%); - --header: @green; /* Use same as Header picker */ - --text-main: #BBB; + --button-default: #006400; + --button-primary: darken(#006400, 10%); + --button-hover: darken(#006400, 30%); + --header: #006400; /* Use same as Header picker */ + --text-main: #FFF; --text-sub: #9b9b9b; - --link: #28A228; /* Use same as Header picker, lighten by 70% */ - --visited-link: #5D995D; /* Use same as Header picker, lighten by 70% */ - --hover-link: #00AA00; /* Use same as Header picker, lighten by 70% */ + --link: #9ACD32; /* Use same as Header picker, lighten by 70% */ + --visited-link: lighten(#9ACD32, 15%); /* Use same as Header picker, lighten by 70% */ + --hover-link: lighten(#9ACD32, 30%); /* Use same as Header picker, lighten by 70% */ --nav-link: #FFF; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */ } @@ -146,14 +146,6 @@ a:link { color: var(--link); } -a:visited { - color: var(--nav-link); -} - -a:hover { - color: var(--hover-link); -} - .btn-primary.hover { color: var(--nav-link); } @@ -203,7 +195,7 @@ body { color: var(--link); } .btn-primary, .btn-primary.hover, .btn-primary:active, .text-green { - color: var(--text-main)!important; + color: var(--text-main); } .btn-primary:hover { background-color: var(--button-primary); diff --git a/resources/assets/less/skins/skin-orange-dark.less b/resources/assets/less/skins/skin-orange-dark.less index 823fab7c5..51a37f424 100644 --- a/resources/assets/less/skins/skin-orange-dark.less +++ b/resources/assets/less/skins/skin-orange-dark.less @@ -61,11 +61,11 @@ .btn, .btn:hover { - color: #fff; + color: #fff !important; &.btn-primary, .btn-primary:link { background-color: darken(@orange, 10%); - border-color: darken(@orange, 20%); + border-color: #fff; color: #fff; } @@ -87,27 +87,14 @@ } } - -a { - &:hover { - color: #fff; - } - &:visited { - color: #fff; - } -} - .text-primary { color: #fff; } - - - :root { --background: #222; --back-main: #333; - --back-sub: #3d4144; + --back-sub: #2E2C2C; --back-sub-alt: rgba(0, 0, 0, 0.36); --button-default: darken(@orange, 15%); --button-primary: darken(@orange, 25%); @@ -115,9 +102,9 @@ a { --header: @orange; /* Use same as Header picker */ --text-main: #BBB; --text-sub: #9b9b9b; - --link: #D43900; /* Use same as Header picker, lighten by 70% */ - --visited-link: #D46A43; /* Use same as Header picker, lighten by 70% */ - --hover-link: #FF4500; /* Use same as Header picker, lighten by 70% */ + --link: #FFA500; /* Use same as Header picker, lighten by 70% */ + --visited-link: lighten(#FFA500, 15%); /* Use same as Header picker, lighten by 70% */ + --hover-link: lighten(#FFA500, 30%); /* Use same as Header picker, lighten by 70% */ --nav-link: #FFF; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */ } @@ -147,7 +134,7 @@ a:link { } a:visited { - color: var(--nav-link); + color: var(--visited-link); } a:hover { @@ -206,6 +193,7 @@ a:link.btn-default{ } .btn-primary, .btn-primary.hover, .btn-primary:active, .text-orange { color: var(--nav-link)!important; + border-color: var(--button-primary); } .btn-primary:hover { background-color: var(--button-primary); @@ -348,20 +336,6 @@ input[type=text], input[type=search] { border-bottom: #000; } -a { - color: var(--link); - - &:link { - color: var(--link) } - &:hover { - color: var(--hover-link); - text-decoration: underline; - } - &:visited { - color: var(--visited-link) - } -} - .row-striped { vertical-align: top; line-height: 2.6; diff --git a/resources/assets/less/skins/skin-purple-dark.less b/resources/assets/less/skins/skin-purple-dark.less index 30fe545ee..c84622345 100644 --- a/resources/assets/less/skins/skin-purple-dark.less +++ b/resources/assets/less/skins/skin-purple-dark.less @@ -61,11 +61,11 @@ .btn, .btn:hover { - color: #fff; + color: #fff !important; &.btn-primary, .btn-primary:link { background-color: darken(@purple, 10%); - border-color: darken(@purple, 20%); + border-color: #FFF; color: #fff; } @@ -90,10 +90,10 @@ a { &:hover { - color: #fff; + color: var(--hover-link); } &:visited { - color: #fff; + color: var(--visited-link); } } @@ -107,7 +107,7 @@ a { :root { --background: #222; --back-main: #333; - --back-sub: #3d4144; + --back-sub: #080808; --back-sub-alt: rgba(0, 0, 0, 0.36); --button-default: darken(@purple, 15%); --button-primary: darken(@purple, 25%); @@ -115,9 +115,9 @@ a { --header: @purple; /* Use same as Header picker */ --text-main: #BBB; --text-sub: #9b9b9b; - --link: #9370DB; /* Use same as Header picker, lighten by 70% */ - --visited-link: #B93CF6; /* Use same as Header picker, lighten by 70% */ - --hover-link: #BF55EC; /* Use same as Header picker, lighten by 70% */ + --link: #AC83FF; /* Use same as Header picker, lighten by 70% */ + --visited-link: lighten(#AC83FF, 15%); /* Use same as Header picker, lighten by 70% */ + --hover-link: lighten(#AC83FF, 30%); /* Use same as Header picker, lighten by 70% */ --nav-link: #FFF; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */ } @@ -136,6 +136,10 @@ a { .thead, .navbar-nav>li>a:link { color: var(--nav-link); } +.label-default{ + background-color:var(--back-sub); + color:#fff; +} .modal-content { background-color: var(--back-main); @@ -146,14 +150,6 @@ a:link { color: var(--link); } -a:visited { - color: var(--nav-link); -} - -a:hover { - color: var(--hover-link); -} - .btn-primary.hover { color: var(--nav-link); } diff --git a/resources/assets/less/skins/skin-red-dark.less b/resources/assets/less/skins/skin-red-dark.less index f821dd385..2195224cb 100644 --- a/resources/assets/less/skins/skin-red-dark.less +++ b/resources/assets/less/skins/skin-red-dark.less @@ -65,7 +65,7 @@ &.btn-primary, .btn-primary:link { background-color: darken(@red, 10%); - border-color: darken(@red, 20%); + border-color: #FFF; color: #fff; } @@ -204,7 +204,7 @@ body { color: var(--link); } .btn-primary, .btn-primary.hover, .btn-primary:active, .text-red { - color: var(--text-main)!important; + color: var(--button-primary); } .btn-primary:hover { background-color: var(--button-primary); diff --git a/resources/assets/less/skins/skin-yellow-dark.less b/resources/assets/less/skins/skin-yellow-dark.less index a208e2fde..88ace6295 100644 --- a/resources/assets/less/skins/skin-yellow-dark.less +++ b/resources/assets/less/skins/skin-yellow-dark.less @@ -11,11 +11,10 @@ //Navbar .main-header { .navbar { - .navbar-variant(@yellow; #fff); .sidebar-toggle { - color: #fff; + color: #000 !important; &:hover { - background-color: darken(@yellow, 5%); + background-color: var(--link); } } @media (max-width: @screen-header-collapse) { @@ -52,48 +51,43 @@ .skin-dark-sidebar(@yellow); } -.skin-yellow-dark.layout-top-nav .main-header > .logo { - .logo-variant { - background-color: none; - } -} - - - .btn, .btn:hover { - color: #fff; + color: #000; &.btn-primary, .btn-primary:link { - background-color: darken(@yellow, 10%); - border-color: darken(@yellow, 20%); - color: #fff; + background-color: var(--button-default); + border-color: var(--button-default); + color: #545454; } &a.btn-primary:hover { - background-color: darken(@yellow, 20%); - border-color: darken(@yellow, 20%); - color: #fff; + background-color: var(--button-hover); + border-color: var(--button-hover); + color: #545454; } &.btn-white:link { - background-color: darken(@yellow, 10%); - color: #fff; + background-color: var(--button-default); + color: #545454; } &.btn-white:hover { - background-color: darken(@yellow, 30%); - color: #fff; + background-color: var(--hover-link); + color: #545454; } } a { + &:link { + color: var(--link); + } &:hover { - color: #fff; + color: var(--hover-link); } &:visited { - color: #fff; + color: var(--visited-link); } } @@ -109,17 +103,17 @@ a { --back-main: #333; --back-sub: #3d4144; --back-sub-alt: rgba(0, 0, 0, 0.36); - --button-default: darken(@yellow, 15%); - --button-primary: darken(@yellow, 25%); - --button-hover: darken(@yellow, 30%); - --header: @yellow; /* Use same as Header picker */ + --button-default: #FFFF00; + --button-primary: darken(#FFFF00, 25%); + --button-hover: darken(#FFFF00, 30%); + --header: #FFFF00; /* Use same as Header picker */ --text-main: #BBB; --text-sub: #9b9b9b; - --link: lighten(@yellow, 30%); /* Use same as Header picker, lighten by 70% */ - --visited-link: lighten(@yellow, 40%); /* Use same as Header picker, lighten by 70% */ - --hover-link: lighten(@yellow, 45%); /* Use same as Header picker, lighten by 70% */ - --nav-link: #FFF; /* Use same as Header picker */ - --light-link: #fff; /* Use same as Header picker */ + --link: #F0E68C; /* Use same as Header picker, lighten by 70% */ + --visited-link: lighten(#F0E68C, 15%); /* Use same as Header picker, lighten by 70% */ + --hover-link: lighten(#F0E68C, 45%); /* Use same as Header picker, lighten by 70% */ + --nav-link: #222; /* Use same as Header picker */ + --light-link: #545454; /* Use same as Header picker */ } .main-header .navbar, .main-header .logo { @@ -128,7 +122,12 @@ a { background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%); border-color: var(--header); } - +.label-default{ + background-color:var(--back-sub); +} +a.btn.btn-default{ + color:var(--nav-link); +} .bootstrap-table .fixed-table-container .table thead th .sortable { color: var(--nav-link); } @@ -136,23 +135,15 @@ a { .thead, .navbar-nav>li>a:link { color: var(--nav-link); } +.navbar-nav>li>a:visited { + color: var(--nav-link); +} .modal-content { background-color: var(--back-main); color: var(--text-main); } -a:link { - color: var(--link); -} - -a:visited { - color: var(--nav-link); -} - -a:hover { - color: var(--hover-link); -} a:link.btn-default{ color: var(--nav-link); } @@ -161,14 +152,13 @@ a:link.btn-default{ } .small-box h3, .small-box p { - color: var(--nav-link) !important; + color: #fff !important; a:hover { text-decoration: none; color: var(--nav-link) !important; } } - #accessoriesTable>tbody>tr>td>nobr>a>i.fa { color: var(--text-main); } @@ -192,7 +182,7 @@ body { } .btn-default{ background-color: var(--button-default); - color: var(--link); + } .btn-default dropdown-toggle { @@ -324,7 +314,10 @@ input[type=text], input[type=search] { .skin-yellow-dark .main-header .navbar .dropdown-menu li a { color: var(--header); } -.fixed-table-body thead th .th-inner, .skin-yellow-dark .sidebar-menu>li.active>a, .skin-yellow .sidebar-menu>li:hover>a, .sidebar-toggle:hover { +div.th-inner{ + color:var(--text-main); +} +.fixed-table-body thead th .th-inner, .skin-yellow-dark, .skin-yellow { background-color: var(--header)!important; } .tab-content, .tab-pane { @@ -336,7 +329,9 @@ input[type=text], input[type=search] { } .table-striped>tbody>tr:nth-of-type(even){ background-color: var(--back-sub-alt); - +} +.th-inner{ + color: var(--nav-link); } #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header { color: var(--text-main); @@ -346,20 +341,6 @@ input[type=text], input[type=search] { border-bottom: #000; } -a { - color: var(--link); - - &:link { - color: var(--link) } - &:hover { - color: var(--hover-link); - text-decoration: underline; - } - &:visited { - color: var(--visited-link) - } -} - .row-striped { vertical-align: top; line-height: 2.6; @@ -369,7 +350,6 @@ a { //border-left: 1px solid #dddddd; //border-right: 1px solid #dddddd; display: table; - } .row-striped .row:nth-of-type(odd) div { @@ -377,7 +357,6 @@ a { color: var(--text-main); border-top: 1px solid #dddddd; display: table-cell; - } .row-striped .row:nth-of-type(even) div { @@ -398,4 +377,4 @@ a { .search-highlight, .search-highlight:hover { background-color: #e9d15b; -} +} \ No newline at end of file