lunax/snipe_it
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity Actions

cleans up dark modes

Browse source
This commit is contained in:
Godfrey M 2022-06-08 13:17:16 -07:00
parent 728338bfa8
commit 4252bd2348
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 { .btn, .btn:hover {
color: #fff; color: #fff !important;
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@blue, 10%); background-color: darken(@blue, 10%);
border-color: darken(@blue, 20%); border-color: #FFF;
color: #fff; color: #FFF;
} }
@ -90,10 +90,10 @@
a { a {
&:hover { &:hover {
color: #fff; color: var(--hover-link);
} }
&:visited { &:visited {
color: #fff; color: var(--visited-link);
} }
} }
@ -107,7 +107,7 @@ a {
:root { :root {
--background: #222; --background: #222;
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #272727;
--back-sub-alt: rgba(0, 0, 0, 0.36); --back-sub-alt: rgba(0, 0, 0, 0.36);
--button-default: darken(@blue, 15%); --button-default: darken(@blue, 15%);
--button-primary: darken(@blue, 25%); --button-primary: darken(@blue, 25%);
@ -115,9 +115,9 @@ a {
--header: @blue; /* Use same as Header picker */ --header: @blue; /* Use same as Header picker */
--text-main: #BBB; --text-main: #BBB;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #1978D4; /* Use same as Header picker, lighten by 70% */ --link: #00BFFF; /* Use same as Header picker, lighten by 70% */
--visited-link: #3c8dbc ; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(#00BFFF,15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #4B77BE; /* 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 */ --nav-link: #FFF; /* Use same as Header picker */
--light-link: #fff; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */
} }
@ -146,14 +146,6 @@ a:link {
color: var(--link); color: var(--link);
} }
a:visited {
color: var(--nav-link);
}
a:hover {
color: var(--hover-link);
}
.btn-primary.hover { .btn-primary.hover {
color: var(--nav-link); color: var(--nav-link);
} }
@ -203,7 +195,7 @@ body {
color: var(--link); color: var(--link);
} }
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue { .btn-primary, .btn-primary.hover, .btn-primary:active, .text-blue {
color: var(--text-main)!important; color: var(--text-main);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--button-primary); background-color: var(--button-primary);

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

@ -61,39 +61,39 @@
.btn, .btn:hover { .btn, .btn:hover {
color: #fff; color: #FFF !important;
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@green, 10%); background-color: darken(@green, 10%);
border-color: darken(@green, 20%); border-color: #FFF;
color: #fff; color: #FFF;
} }
&a.btn-primary:hover { &a.btn-primary:hover {
background-color: darken(@green, 20%); background-color: darken(@green, 20%);
border-color: darken(@green, 20%); border-color: darken(@green, 20%);
color: #fff; color: #FFF;
} }
&.btn-white:link { &.btn-white:link {
background-color: darken(@green, 10%); background-color: darken(@green, 10%);
color: #fff; color: #FFF;
} }
&.btn-white:hover { &.btn-white:hover {
background-color: darken(@green, 30%); background-color: darken(@green, 30%);
color: #fff; color: #FFF;
} }
} }
a { a {
&:hover { &:hover {
color: #fff; color: var(--hover-link);
} }
&:visited { &:visited {
color: #fff; color: var(--visited-link);
} }
} }
@ -107,17 +107,17 @@ a {
:root { :root {
--background: #222; --background: #222;
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #312F2F;
--back-sub-alt: rgba(0, 0, 0, 0.36); --back-sub-alt: rgba(0, 0, 0, 0.36);
--button-default: darken(@green, 15%); --button-default: #006400;
--button-primary: darken(@green, 25%); --button-primary: darken(#006400, 10%);
--button-hover: darken(@green, 30%); --button-hover: darken(#006400, 30%);
--header: @green; /* Use same as Header picker */ --header: #006400; /* Use same as Header picker */
--text-main: #BBB; --text-main: #FFF;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #28A228; /* Use same as Header picker, lighten by 70% */ --link: #9ACD32; /* Use same as Header picker, lighten by 70% */
--visited-link: #5D995D; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(#9ACD32, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #00AA00; /* 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 */ --nav-link: #FFF; /* Use same as Header picker */
--light-link: #fff; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */
} }
@ -146,14 +146,6 @@ a:link {
color: var(--link); color: var(--link);
} }
a:visited {
color: var(--nav-link);
}
a:hover {
color: var(--hover-link);
}
.btn-primary.hover { .btn-primary.hover {
color: var(--nav-link); color: var(--nav-link);
} }
@ -203,7 +195,7 @@ body {
color: var(--link); color: var(--link);
} }
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-green { .btn-primary, .btn-primary.hover, .btn-primary:active, .text-green {
color: var(--text-main)!important; color: var(--text-main);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--button-primary); background-color: var(--button-primary);

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

@ -61,11 +61,11 @@
.btn, .btn:hover { .btn, .btn:hover {
color: #fff; color: #fff !important;
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@orange, 10%); background-color: darken(@orange, 10%);
border-color: darken(@orange, 20%); border-color: #fff;
color: #fff; color: #fff;
} }
@ -87,27 +87,14 @@
} }
} }
a {
&:hover {
color: #fff;
}
&:visited {
color: #fff;
}
}
.text-primary { .text-primary {
color: #fff; color: #fff;
} }
:root { :root {
--background: #222; --background: #222;
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #2E2C2C;
--back-sub-alt: rgba(0, 0, 0, 0.36); --back-sub-alt: rgba(0, 0, 0, 0.36);
--button-default: darken(@orange, 15%); --button-default: darken(@orange, 15%);
--button-primary: darken(@orange, 25%); --button-primary: darken(@orange, 25%);
@ -115,9 +102,9 @@ a {
--header: @orange; /* Use same as Header picker */ --header: @orange; /* Use same as Header picker */
--text-main: #BBB; --text-main: #BBB;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #D43900; /* Use same as Header picker, lighten by 70% */ --link: #FFA500; /* Use same as Header picker, lighten by 70% */
--visited-link: #D46A43; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(#FFA500, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #FF4500; /* 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 */ --nav-link: #FFF; /* Use same as Header picker */
--light-link: #fff; /* Use same as Header picker */ --light-link: #fff; /* Use same as Header picker */
} }
@ -147,7 +134,7 @@ a:link {
} }
a:visited { a:visited {
color: var(--nav-link); color: var(--visited-link);
} }
a:hover { a:hover {
@ -206,6 +193,7 @@ a:link.btn-default{
} }
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-orange { .btn-primary, .btn-primary.hover, .btn-primary:active, .text-orange {
color: var(--nav-link)!important; color: var(--nav-link)!important;
border-color: var(--button-primary);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--button-primary); background-color: var(--button-primary);
@ -348,20 +336,6 @@ input[type=text], input[type=search] {
border-bottom: #000; 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 { .row-striped {
vertical-align: top; vertical-align: top;
line-height: 2.6; line-height: 2.6;

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

@ -61,11 +61,11 @@
.btn, .btn:hover { .btn, .btn:hover {
color: #fff; color: #fff !important;
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@purple, 10%); background-color: darken(@purple, 10%);
border-color: darken(@purple, 20%); border-color: #FFF;
color: #fff; color: #fff;
} }
@ -90,10 +90,10 @@
a { a {
&:hover { &:hover {
color: #fff; color: var(--hover-link);
} }
&:visited { &:visited {
color: #fff; color: var(--visited-link);
} }
} }
@ -107,7 +107,7 @@ a {
:root { :root {
--background: #222; --background: #222;
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #080808;
--back-sub-alt: rgba(0, 0, 0, 0.36); --back-sub-alt: rgba(0, 0, 0, 0.36);
--button-default: darken(@purple, 15%); --button-default: darken(@purple, 15%);
--button-primary: darken(@purple, 25%); --button-primary: darken(@purple, 25%);
@ -115,9 +115,9 @@ a {
--header: @purple; /* Use same as Header picker */ --header: @purple; /* Use same as Header picker */
--text-main: #BBB; --text-main: #BBB;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #9370DB; /* Use same as Header picker, lighten by 70% */ --link: #AC83FF; /* Use same as Header picker, lighten by 70% */
--visited-link: #B93CF6; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(#AC83FF, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #BF55EC; /* 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 */ --nav-link: #FFF; /* Use same as Header picker */
--light-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 { .thead, .navbar-nav>li>a:link {
color: var(--nav-link); color: var(--nav-link);
} }
.label-default{
background-color:var(--back-sub);
color:#fff;
}
.modal-content { .modal-content {
background-color: var(--back-main); background-color: var(--back-main);
@ -146,14 +150,6 @@ a:link {
color: var(--link); color: var(--link);
} }
a:visited {
color: var(--nav-link);
}
a:hover {
color: var(--hover-link);
}
.btn-primary.hover { .btn-primary.hover {
color: var(--nav-link); color: var(--nav-link);
} }

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

@ -65,7 +65,7 @@
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@red, 10%); background-color: darken(@red, 10%);
border-color: darken(@red, 20%); border-color: #FFF;
color: #fff; color: #fff;
} }
@ -204,7 +204,7 @@ body {
color: var(--link); color: var(--link);
} }
.btn-primary, .btn-primary.hover, .btn-primary:active, .text-red { .btn-primary, .btn-primary.hover, .btn-primary:active, .text-red {
color: var(--text-main)!important; color: var(--button-primary);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: var(--button-primary); background-color: var(--button-primary);

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

@ -11,11 +11,10 @@
//Navbar //Navbar
.main-header { .main-header {
.navbar { .navbar {
.navbar-variant(@yellow; #fff);
.sidebar-toggle { .sidebar-toggle {
color: #fff; color: #000 !important;
&:hover { &:hover {
background-color: darken(@yellow, 5%); background-color: var(--link);
} }
} }
@media (max-width: @screen-header-collapse) { @media (max-width: @screen-header-collapse) {
@ -52,48 +51,43 @@
.skin-dark-sidebar(@yellow); .skin-dark-sidebar(@yellow);
} }
.skin-yellow-dark.layout-top-nav .main-header > .logo {
.logo-variant {
background-color: none;
}
}
.btn, .btn:hover { .btn, .btn:hover {
color: #fff; color: #000;
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@yellow, 10%); background-color: var(--button-default);
border-color: darken(@yellow, 20%); border-color: var(--button-default);
color: #fff; color: #545454;
} }
&a.btn-primary:hover { &a.btn-primary:hover {
background-color: darken(@yellow, 20%); background-color: var(--button-hover);
border-color: darken(@yellow, 20%); border-color: var(--button-hover);
color: #fff; color: #545454;
} }
&.btn-white:link { &.btn-white:link {
background-color: darken(@yellow, 10%); background-color: var(--button-default);
color: #fff; color: #545454;
} }
&.btn-white:hover { &.btn-white:hover {
background-color: darken(@yellow, 30%); background-color: var(--hover-link);
color: #fff; color: #545454;
} }
} }
a { a {
&:link {
color: var(--link);
}
&:hover { &:hover {
color: #fff; color: var(--hover-link);
} }
&:visited { &:visited {
color: #fff; color: var(--visited-link);
} }
} }
@ -109,17 +103,17 @@ a {
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #3d4144;
--back-sub-alt: rgba(0, 0, 0, 0.36); --back-sub-alt: rgba(0, 0, 0, 0.36);
--button-default: darken(@yellow, 15%); --button-default: #FFFF00;
--button-primary: darken(@yellow, 25%); --button-primary: darken(#FFFF00, 25%);
--button-hover: darken(@yellow, 30%); --button-hover: darken(#FFFF00, 30%);
--header: @yellow; /* Use same as Header picker */ --header: #FFFF00; /* Use same as Header picker */
--text-main: #BBB; --text-main: #BBB;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: lighten(@yellow, 30%); /* Use same as Header picker, lighten by 70% */ --link: #F0E68C; /* Use same as Header picker, lighten by 70% */
--visited-link: lighten(@yellow, 40%); /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(#F0E68C, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: lighten(@yellow, 45%); /* Use same as Header picker, lighten by 70% */ --hover-link: lighten(#F0E68C, 45%); /* Use same as Header picker, lighten by 70% */
--nav-link: #FFF; /* Use same as Header picker */ --nav-link: #222; /* Use same as Header picker */
--light-link: #fff; /* Use same as Header picker */ --light-link: #545454; /* Use same as Header picker */
} }
.main-header .navbar, .main-header .logo { .main-header .navbar, .main-header .logo {
@ -128,7 +122,12 @@ a {
background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%); background: linear-gradient(to bottom, var(--header) 0%,var(--header) 100%);
border-color: var(--header); 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 { .bootstrap-table .fixed-table-container .table thead th .sortable {
color: var(--nav-link); color: var(--nav-link);
} }
@ -136,23 +135,15 @@ a {
.thead, .navbar-nav>li>a:link { .thead, .navbar-nav>li>a:link {
color: var(--nav-link); color: var(--nav-link);
} }
.navbar-nav>li>a:visited {
color: var(--nav-link);
}
.modal-content { .modal-content {
background-color: var(--back-main); background-color: var(--back-main);
color: var(--text-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{ a:link.btn-default{
color: var(--nav-link); color: var(--nav-link);
} }
@ -161,14 +152,13 @@ a:link.btn-default{
} }
.small-box h3, .small-box p { .small-box h3, .small-box p {
color: var(--nav-link) !important; color: #fff !important;
a:hover { a:hover {
text-decoration: none; text-decoration: none;
color: var(--nav-link) !important; color: var(--nav-link) !important;
} }
} }
#accessoriesTable>tbody>tr>td>nobr>a>i.fa { #accessoriesTable>tbody>tr>td>nobr>a>i.fa {
color: var(--text-main); color: var(--text-main);
} }
@ -192,7 +182,7 @@ body {
} }
.btn-default{ .btn-default{
background-color: var(--button-default); background-color: var(--button-default);
color: var(--link);
} }
.btn-default dropdown-toggle { .btn-default dropdown-toggle {
@ -324,7 +314,10 @@ input[type=text], input[type=search] {
.skin-yellow-dark .main-header .navbar .dropdown-menu li a { .skin-yellow-dark .main-header .navbar .dropdown-menu li a {
color: var(--header); 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; background-color: var(--header)!important;
} }
.tab-content, .tab-pane { .tab-content, .tab-pane {
@ -336,7 +329,9 @@ input[type=text], input[type=search] {
} }
.table-striped>tbody>tr:nth-of-type(even){ .table-striped>tbody>tr:nth-of-type(even){
background-color: var(--back-sub-alt); 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 { #webui>div>div>div>div>div>table>tbody>tr>td>a>i.fa, .box-body, .box-footer, .box-header {
color: var(--text-main); color: var(--text-main);
@ -346,20 +341,6 @@ input[type=text], input[type=search] {
border-bottom: #000; 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 { .row-striped {
vertical-align: top; vertical-align: top;
line-height: 2.6; line-height: 2.6;
@ -369,7 +350,6 @@ a {
//border-left: 1px solid #dddddd; //border-left: 1px solid #dddddd;
//border-right: 1px solid #dddddd; //border-right: 1px solid #dddddd;
display: table; display: table;
} }
.row-striped .row:nth-of-type(odd) div { .row-striped .row:nth-of-type(odd) div {
@ -377,7 +357,6 @@ a {
color: var(--text-main); color: var(--text-main);
border-top: 1px solid #dddddd; border-top: 1px solid #dddddd;
display: table-cell; display: table-cell;
} }
.row-striped .row:nth-of-type(even) div { .row-striped .row:nth-of-type(even) div {