DRCIT/snipe-it
1
0
Fork 0
mirror of https://github.com/snipe/snipe-it.git synced 2025-01-12 06:17:28 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #11281 from Godmartinz/chore_dark_mode_color_clean_up

Browse source 
cleans up dark modes
This commit is contained in:
snipe 2022-06-13 19:48:15 -07:00 committed by GitHub
parent 495e68d23c 4252bd2348
commit cb8dbcc172
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 96 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
resources/assets/less/skins/skin-blue-dark.less
View file

@ -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);

44
resources/assets/less/skins/skin-green-dark.less
View file

@ -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);

42
resources/assets/less/skins/skin-orange-dark.less
View file

@ -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;

28
resources/assets/less/skins/skin-purple-dark.less
View file

@ -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);
}

4
resources/assets/less/skins/skin-red-dark.less
View file

@ -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);

113
resources/assets/less/skins/skin-yellow-dark.less
View file

@ -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;
}
}