Simplify glow border styling for buttons and link cards

splashkit · Oct 21, 2024 · d38e004 · d38e004
1 parent 43f25fd
commit d38e004
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 33 deletions.
diff --git a/src/styles/cards.css b/src/styles/cards.css
@@ -15,7 +15,6 @@
 
 /* Card styling for the light and dark themes, including smooth transitions for background and text colors. */
 [data-theme="light"] .card {
-  background: var(--sl-color-gray-6);
   background: var(--sl-card-background-light);
   color: var(--sl-hover-text-dark);
   transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
@@ -77,46 +76,22 @@
 /* --- END: Card styling ------*/
 
 /* --- START: Link card styling ------*/
-[data-theme="light"] .sl-link-card {
-  background: var(--sl-card-background-light);
-  border: 1px solid var(--sl-logo-blue);
-  box-shadow: 0px 0px 5px var(--sl-logo-blue);
-  margin: 5px;
-
-  .description {
-    color: var(--sl-hover-text-dark);
-  }
-}
-
-[data-theme="dark"] .sl-link-card {
-  background: var(--sl-card-background-dark);
+.sl-link-card {
   border: 1px solid var(--sl-logo-orange);
   box-shadow: 0px 0px 5px var(--sl-logo-orange);
-  margin: 5px;
 
   .description {
-    color: var(--sl-hover-text-light);
+    color: var(--sl-color-gray-2);
   }
 }
 
 /* Hover effects */
-[data-theme="light"] .sl-link-card:hover {
-  background: var(--sl-card-background-light);
-  border: 1px solid var(--sl-logo-orange);
-  box-shadow: 0px 0px 15px var(--sl-logo-orange);
-
-  .description {
-    color: var(--sl-hover-text-dark);
-  }
-}
-
-[data-theme="dark"] .sl-link-card:hover {
-  background: var(--sl-card-background-dark);
+.sl-link-card:hover {
   border: 1px solid var(--sl-logo-blue);
-  box-shadow: 0px 0px 15px var(--sl-logo-blue);
+  box-shadow: 0px 0px 10px var(--sl-logo-blue);
 
   .description {
-    color: var(--sl-hover-text-light);
+    color: var(--sl-color-gray-1);
   }
 }
 

diff --git a/src/styles/custom.css b/src/styles/custom.css
@@ -15,10 +15,8 @@
 
 /* Light mode colors. */
 :root[data-theme='light'] {
-  /*   --sl-color-accent: #00A9E0; */
+  --sl-color-accent: #00A9E0;
   --sl-color-accent: #3D50f5;
-  --link-button-border-color: var(--sk-logo-blue);
-  --link-hover-button-border-color: var(--sk-logo-orange);
 }
 
 .hero {