Merge pull request #11258 from Godmartinz/bug/sc-19123/link-colors-slightly-different-settings

Fixed colors in light color skins

resources/assets/less/skins/skin-blue.less

@@ -64,7 +64,7 @@
   &.btn-primary, .btn-primary:link {
     background-color: darken(@light-blue, 10%);
     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 {
   --button-default: darken(@blue, 15%);
   --button-primary: darken(@blue, 25%);
@@ -116,12 +106,18 @@ a {
   --header: @blue; /* Use same as Header picker */
   --text-main: #BBB;
   --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 */
   --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 {
   color: var(--link);
 }
@@ -130,6 +126,10 @@ a:visited {
   color: var(--visited-link);
 }
 
+a:hover {
+  color: var(--hover-link);
+}
+
 .text-primary {
   color: darken(@light-blue, 20%);
 }

resources/assets/less/skins/skin-green.less

@@ -7,7 +7,6 @@
 @import "../variables.less";
 @import "../mixins.less";
 :root{
-  --visited-link: #5D995D; /* Use same as Header picker, lighten by 70% */
   --background: #222;
   --back-main: #333;
   --back-sub: #3d4144;
@@ -18,7 +17,9 @@
   --header: @green; /* Use same as Header picker */
   --text-main: #BBB;
   --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 {
   //Navbar
@@ -97,7 +98,12 @@
     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 {
   color: var(--link);
 }

resources/assets/less/skins/skin-orange.less

@@ -87,12 +87,12 @@
 
 
 a {
-  color: @orange;
+  color: var(--link);
   &:hover {
-    color: darken(@orange, 20%);
+    color: var(--hover-link);
   }
   &:visited {
-    color: @orange;
+    color: var(--visited-link);
   }
 }
 
@@ -106,18 +106,18 @@ a {
   --header: @orange; /* Use same as Header picker */
   --text-main: #BBB;
   --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 */
   --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 {

resources/assets/less/skins/skin-purple.less

@@ -87,12 +87,12 @@
 
 
 a {
-  color: @purple;
+  color: var(--link);
   &:hover {
-    color: darken(@purple, 20%);
+    color: var(--hover-link);
   }
   &:visited {
-    color: @purple;
+    color: var(--visited-link);
   }
 }
 
@@ -107,18 +107,18 @@ a {
   --header: @purple; /* Use same as Header picker */
   --text-main: #BBB;
   --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 */
   --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 {

resources/assets/less/skins/skin-red.less

@@ -108,9 +108,9 @@ a {
   --text-main: #BBB;
   --text-alt: #222;
   --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 */
   --light-link: #fff; /* Use same as Header picker */
 }
@@ -121,6 +121,12 @@ a:link {
 a:visited {
   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 {
   background-color: #fff8af;