updates colors in light color modes

This commit is contained in:
Godfrey M 2022-06-06 11:40:57 -07:00
parent f7449921e9
commit 8c1843b351
5 changed files with 54 additions and 42 deletions

View file

@ -64,7 +64,7 @@
&.btn-primary, .btn-primary:link { &.btn-primary, .btn-primary:link {
background-color: darken(@light-blue, 10%); background-color: darken(@light-blue, 10%);
border-color: darken(@light-blue, 20%); border-color: darken(@light-blue, 20%);
color: #fff; color: #fff !important;
} }
@ -99,16 +99,6 @@
} }
a {
color: @light-blue;
&:hover {
color: darken(@light-blue, 20%);
}
&:visited {
color: @light-blue;
}
}
:root { :root {
--button-default: darken(@blue, 15%); --button-default: darken(@blue, 15%);
--button-primary: darken(@blue, 25%); --button-primary: darken(@blue, 25%);
@ -116,12 +106,18 @@ 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: @blue; /* Use same as Header picker, lighten by 70% */
--visited-link: #3c8dbc ; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(@blue,10%); /* Use same as Header picker, lighten by 70% */
--hover-link: #4B77BE; /* Use same as Header picker, lighten by 70% */ --hover-link: lighten(@blue,20%); /* 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 */
} }
a.btn-info:link, a.btn-warning:link, a.btn-danger:link{
color: #FFF;
}
&a.btn-info:visited, a.btn-warning:visited, a.btn-danger:visited{
color: #FFF;
}
a:link { a:link {
color: var(--link); color: var(--link);
} }
@ -130,6 +126,10 @@ a:visited {
color: var(--visited-link); color: var(--visited-link);
} }
a:hover {
color: var(--hover-link);
}
.text-primary { .text-primary {
color: darken(@light-blue, 20%); color: darken(@light-blue, 20%);
} }

View file

@ -7,7 +7,6 @@
@import "../variables.less"; @import "../variables.less";
@import "../mixins.less"; @import "../mixins.less";
:root{ :root{
--visited-link: #5D995D; /* Use same as Header picker, lighten by 70% */
--background: #222; --background: #222;
--back-main: #333; --back-main: #333;
--back-sub: #3d4144; --back-sub: #3d4144;
@ -18,7 +17,9 @@
--header: @green; /* Use same as Header picker */ --header: @green; /* Use same as Header picker */
--text-main: #BBB; --text-main: #BBB;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #28A228; /* Use same as Header picker, lighten by 70% */ --link: @green; /* Use same as Header picker, lighten by 70% */
--visited-link: lighten(@green, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: lighten(@green, 20%);
} }
.skin-green { .skin-green {
//Navbar //Navbar
@ -97,7 +98,12 @@
color: #fff; color: #fff;
} }
} }
a.btn-info:link, a.btn-warning:link, a.btn-danger:link{
color: #FFF;
}
&a.btn-info:visited, a.btn-warning:visited, a.btn-danger:visited{
color: #FFF;
}
a:link { a:link {
color: var(--link); color: var(--link);
} }

View file

@ -87,12 +87,12 @@
a { a {
color: @orange; color: var(--link);
&:hover { &:hover {
color: darken(@orange, 20%); color: var(--hover-link);
} }
&:visited { &:visited {
color: @orange; color: var(--visited-link);
} }
} }
@ -106,18 +106,18 @@ 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: @orange; /* Use same as Header picker, lighten by 70% */
--visited-link: #D46A43; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(@orange, 10%); /* Use same as Header picker, lighten by 70% */
--hover-link: #FF4500; /* Use same as Header picker, lighten by 70% */ --hover-link: lighten(@orange, 15%); /* 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 */
} }
a:link {
color: var(--link);
}
a:visited { a.btn-info:link, a.btn-warning:link, a.btn-danger:link{
color: var(--visited-link); color: #FFF;
}
&a.btn-info:visited, a.btn-warning:visited, a.btn-danger:visited{
color: #FFF;
} }
.fixed-table-container tbody .selected td { .fixed-table-container tbody .selected td {

View file

@ -87,12 +87,12 @@
a { a {
color: @purple; color: var(--link);
&:hover { &:hover {
color: darken(@purple, 20%); color: var(--hover-link);
} }
&:visited { &:visited {
color: @purple; color: var(--visited-link);
} }
} }
@ -107,18 +107,18 @@ 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: @purple; /* Use same as Header picker, lighten by 70% */
--visited-link: #B93CF6; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(@purple, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #BF55EC; /* Use same as Header picker, lighten by 70% */ --hover-link: lighten(@purple, 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 */
} }
a:link {
color: var(--link);
}
a:visited { a.btn-info:link, a.btn-warning:link, a.btn-danger:link{
color: var(--visited-link); color: #FFF;
}
&a.btn-info:visited, a.btn-warning:visited, a.btn-danger:visited{
color: #FFF;
} }
.fixed-table-container tbody .selected td { .fixed-table-container tbody .selected td {

View file

@ -108,9 +108,9 @@ a {
--text-main: #BBB; --text-main: #BBB;
--text-alt: #222; --text-alt: #222;
--text-sub: #9b9b9b; --text-sub: #9b9b9b;
--link: #e00000; /* Use same as Header picker, lighten by 70% */ --link: @red; /* Use same as Header picker, lighten by 70% */
--visited-link: #D24D57; /* Use same as Header picker, lighten by 70% */ --visited-link: lighten(@red, 15%); /* Use same as Header picker, lighten by 70% */
--hover-link: #D24D57; /* Use same as Header picker, lighten by 70% */ --hover-link: lighten(@red, 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 */
} }
@ -121,6 +121,12 @@ a:link {
a:visited { a:visited {
color: var(--visited-link); color: var(--visited-link);
} }
a.btn-info:link, a.btn-warning:link, a.btn-danger:link{
color: #FFF;
}
&a.btn-info:visited, a.btn-warning:visited, a.btn-danger:visited{
color: #FFF;
}
.fixed-table-container tbody .selected td { .fixed-table-container tbody .selected td {
background-color: #fff8af; background-color: #fff8af;