chaster: add a bunch of styling (mainly home page)

styles/chaster/catppuccin.user.css

@@ -99,10 +99,49 @@
       color: @text;
     }
 
+    .light-container {
+      background-color: @surface0;
+    }
+
+    .Home .home-card-features {
+      background-color: @surface1;
+      border-color: @surface1;
+    }
+
+    .Home .feature-icon {
+      background-color: @surface0;
+    }
+    .Footer {
+      background-color: @base;
+      .footer-links {
+        color: @subtext0;
+      }
+    }
+
+    // Home header
+    .kbOIjO {
+      background-color: @mantle;
+    }
+    .hlxGDx {
+      background-color: @crust;
+    }
+    .Header
+
+
+    hr {
+      border-top-color: @subtext0;
+    }
+
     .Profile .profile-header-container {
       background-color: @mantle;
     }
 
+    // premium
+    .bqPRPL {
+      animation: none;
+      color: @yellow;
+    }
+
     // chat sidebar
     .bBsMHS {
       background-color: @mantle;
@@ -121,6 +160,7 @@
     .card-content,
     .cXXCbt {
       background-color: @surface0;
+      border-color: @surface0;
     }
     .action-list-group .list-group-item:hover,
     .list-group-item:hover,
@@ -128,6 +168,15 @@
       background-color: @surface1;
     }
 
+    // lock history
+    .cJssHP {
+      background-color: @mantle;
+      box-shadow: none;
+    }
+    .icon-inset {
+      background-color: @base;
+    }
+
     .no-locks .no-locks-text {
       color: @text;
     }
@@ -176,11 +225,28 @@
       background-color: @accent-color;
       border-color: @accent-color;
     }
+
     // TODO
     .btn-primary:hover,
-    .btn-primary:focus {
+    .btn-primary:focus,
+    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
+      color: @base;
+      background-color: darken(@accent-color, 10%);
+      border-color: darken(@accent-color, 10%);
     }
 
+    .btn-outline-primary {
+      color: @accent-color !important;
+      border-color: @accent-color;
+    }
+    .btn-outline-primary:hover,
+    .btn-outline-primary:focus {
+      color: @base !important;
+      background-color: @accent-color;
+      border-color: @accent-color;
+    }
+
+
     .btn-secondary {
       color: @text;
       background-color: @surface0;
@@ -265,8 +331,11 @@
       color: @subtext0;
     }
     .navbar-dark .navbar-nav .nav-link:focus,
-    .navbar-dark .navbar-nav .nav-link:hover {
+    .navbar-dark .navbar-nav .nav-link:hover,
+    .Header.header-fixed .navbar-nav .nav-link,
+    .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover {
       color: @text;
+      text-shadow: none;
     }
 
     // countdowns
@@ -340,6 +409,10 @@
       background-color: @surface0;
       color: @subtext0;
     }
+    hr.kszVAv {
+      border-bottom-color: @subtext0;
+    }
+
     // tab header
     .TabHeader .selector-item.active {
       color: @text;
@@ -388,10 +461,17 @@
       background: @green;
     }
     .Toastify__toast--warning {
-      background: @yellow
+      background: @yellow;
     }
     .Toastify__toast--error {
-      background: @red
+      background: @red;
+    }
+    .Toastify__toast--dark {
+      background-color: @crust;
+      color: @text;
+    }
+    .Toastify__toast--dark .Toastify__close-button {
+      color: @subtext0;
     }
 
     // notification badge
@@ -457,18 +537,20 @@
 
    /*  The Accent Color is called with a double `@@` because
     *  it's referencing the @accent Variable passed to the Mixin. */
+
     color: @catppuccin[@@lookup][@@accent];
 
    /*  If you need to specify an overwrite specific to a Flavor
     *  like Latte, you can use a `when` guard clause. */
+
     & when (@lookup = latte) {
       /* your code for latte */
     }
 
    /*  You can also negate the statement above by using
     *  a `when not` guard clause. */
-    & when not (@lookup = latte) {
 
+    & when not (@lookup = latte) {
       /* your code for frappe, macchiato and mocha */
     }
 
@@ -480,11 +562,13 @@
   *  your desired Flavor and Accent Color to it. These are usually
   *  populated through the `@var`s in the Meta Block. */
   // synced colorscheme
+
   @media (prefers-color-scheme: light) {
     :root {
       #catppuccin(@lightFlavor, @accentColor);
     }
   }
+
   @media (prefers-color-scheme: dark) {
     #catppuccin(@darkFlavor, @accentColor);
   }