From 924bef5028d5f0750aceb25caf6ffc157ee0c520 Mon Sep 17 00:00:00 2001
From: A user <resucutie@proton.me>
Date: Sat, 26 Aug 2023 19:40:25 -0300
Subject: [PATCH] Improvements to mastodon's coloring (#182)

* applying more colors to uncolored elements

- Fix coloring for detailed posts while also removing the coloring for focused posts
- Fix coloring for tab settings
- Apply accent color for switchers, pillbars and text boxes
- Fix compose placeholder coloring

* more coloring changes

- apply accent color to radio boxes and graphs
- fix coloring for announcements
- tweak colors from cards on posts

* fix user profile coloring

* color literally details
---
 styles/mastodon/catppuccin.user.css | 80 +++++++++++++++++++++++------
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/styles/mastodon/catppuccin.user.css b/styles/mastodon/catppuccin.user.css
index 9db75f5..4859fde 100644
--- a/styles/mastodon/catppuccin.user.css
+++ b/styles/mastodon/catppuccin.user.css
@@ -199,7 +199,7 @@ domain("piaille.fr") {
         border-bottom: none;
     }
     
-    .navigation-panel {
+    .navigation-panel, .column-link{
         background: transparent;
     }
 
@@ -277,12 +277,33 @@ domain("piaille.fr") {
     .column-header__back-button,
     .navigation-bar strong,
     .reply-indicator__content a.unhandled-link,
-    .status__content a.unhandled-link {
+    .status__content a.unhandled-link,
+    .announcements__item__content a.unhandled-link,
+    .reactions-bar__item.active .reactions-bar__item__count,
+    .column-header.active .column-header__icon{
       color: @accent-color;
     }
+    
+    .conversation__unread,
+    .react-toggle--checked .react-toggle-track, .react-toggle--checked:hover .react-toggle-track,
+    .pillbar-button:not([disabled]).active, .pillbar-button:not([disabled]).active:focus, .pillbar-button:not([disabled]).active:hover,
+    .radio-button__input.checked{
+        background-color: @accent-color;
+    }
+    
+    .reactions-bar__item.active {
+        background-color: rgba(@accent-color, .25);
+    }
+    
+    .trends__item__sparkline path:last-child {
+        stroke: @accent-color !important;
+    }
+    .trends__item__sparkline path:first-child {
+        fill: rgba(@accent-color, .25) !important;
+    }
 
     .icon-button,
-    .notification__message .fa {
+    .notification__message .fa{
       color: @surface2;
     }
 
@@ -305,7 +326,6 @@ domain("piaille.fr") {
     .column-header__back-button,
     .column-back-button,
     .drawer__header,
-    .account__section-headline,
     .notification__filter-bar,
     .account__section-headline button,
     .notification__filter-bar button,
@@ -319,21 +339,49 @@ domain("piaille.fr") {
     .account__header__fields,
     .account__header__fields dt,
     .account__header__fields dd:not(.account__header__bio .account__header__fields dd),
-    .focusable:focus,
-    .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected {
+    .admin-wrapper .sidebar ul .simple-navigation-active-leaf .selected,
+    .explore__search-header,
+    .column-inline-form,
+    .follow_requests-unlocked_explanation,
+    .conversation--unread,
+    .column-header__collapsible-inner,
+    .announcements,
+    .status-card__image,
+    .account__header__bar{
       border-color: @crust;
       background: @surface0;
     }
+    
+    .account__section-headline {
+        background: @mantle;
+        border-color: @crust
+    }
+    
+    .focusable:focus {
+        background: unset;
+    }
 
     .admin-wrapper .sidebar ul a:hover,
-    .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover {
+    .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover,
+    .detailed-status, .detailed-status__action-bar{
       background: @surface0;
     }
+    
+    .detailed-status__wrapper > div:first-child .detailed-status {
+        border-top: none;
+    }
 
     .dismissable-banner {
       border-color: @surface1;
       background: @base;
     }
+    
+    .column-header__wrapper.active {
+        box-shadow: 0 1px 0 rgba(@accent-color,.3);
+    }
+    .column-header__wrapper.active::before {
+        background: radial-gradient(ellipse,rgba(@accent-color,.23) 0,rgba(99,100,255,0) 60%);
+    }
 
     .theme-mastodon-light .account__header__bar,
     .theme-mastodon-light .column-header__back-button,
@@ -352,11 +400,11 @@ domain("piaille.fr") {
     }
 
 
-    .public-layout .public-account-header__tabs__tabs .counter::after {
-      border-color: @accent-color;
-    }
-
-    .public-layout .public-account-header__tabs__tabs .counter.active::after {
+    .public-layout .public-account-header__tabs__tabs .counter::after,
+    .public-layout .public-account-header__tabs__tabs .counter.active::after ,
+    .react-toggle--checked .react-toggle-thumb,
+    .radio-button__input.checked,
+    .account__action-bar__tab.active{
       border-color: @accent-color;
     }
 
@@ -461,7 +509,8 @@ domain("piaille.fr") {
     }
 
     .drawer__inner,
-    .drawer__inner__mastodon {
+    .drawer__inner__mastodon,
+    .explore__search-header .search__input{
       background-color: @base;
     }
 
@@ -474,7 +523,7 @@ domain("piaille.fr") {
     }
 
     .compose-form .autosuggest-textarea__textarea::placeholder {
-      color: @subtext0
+      color: @subtext0 !important
     }
 
     .compose-form .compose-form__buttons-wrapper {
@@ -582,7 +631,8 @@ domain("piaille.fr") {
       color: @text !important;
     }
 
-    .table > thead > tr > th {
+    .table > thead > tr > th,
+    .setting-text:active, .setting-text:focus{
       border-color: @accent-color !important;
     }