Optimized CSS for Mastodon

group_vars/all/13_theming.yml

@@ -14,7 +14,7 @@ global_theming:
       # As the info color – a very light blue (symbolizing the sky)
       info:     "#F0F8FF"
     filters:
-      saturation_change:  50
+      saturation_change:  0
       hue_shift:          0
 
 # Global Theming is default enabled for all roles

roles/nginx-global-css/templates/global.css.j2

@@ -196,92 +196,6 @@ HINT:
   --pf-v5-global--palette--black-900:   var(--color-10);  /* #151515 */
   --pf-v5-global--palette--black-1000:  var(--color-05);  /* #030303 */
 
-  /* --- Blue Palette --- */
-  --pf-v5-global--palette--blue-50:    var(--color-98);  /* #e7f1fa */
-  --pf-v5-global--palette--blue-100:   var(--color-95);  /* #bee1f4 */
-  --pf-v5-global--palette--blue-200:   var(--color-85);  /* #73bcf7 */
-  --pf-v5-global--palette--blue-300:   var(--color-75);  /* #2b9af3 */
-  --pf-v5-global--palette--blue-400:   var(--color-65);  /* #06c */
-  --pf-v5-global--palette--blue-500:   var(--color-40);  /* #004080 */
-  --pf-v5-global--palette--blue-600:   var(--color-30);  /* #002952 */
-  --pf-v5-global--palette--blue-700:   var(--color-10);  /* #001223 */
-
-  /* --- Cyan Palette --- */
-  --pf-v5-global--palette--cyan-50:    var(--color-98);  /* #f2f9f9 */
-  --pf-v5-global--palette--cyan-100:   var(--color-85);  /* #a2d9d9 */
-  --pf-v5-global--palette--cyan-200:   var(--color-75);  /* #73c5c5 */
-  --pf-v5-global--palette--cyan-300:   var(--color-65);  /* #009596 */
-  --pf-v5-global--palette--cyan-400:   var(--color-40);  /* #005f60 */
-  --pf-v5-global--palette--cyan-500:   var(--color-30);  /* #003737 */
-  --pf-v5-global--palette--cyan-600:   var(--color-20);  /* #002323 */
-  --pf-v5-global--palette--cyan-700:   var(--color-10);  /* #000f0f */
-
-  /* --- Gold Palette --- */
-  --pf-v5-global--palette--gold-50:    var(--color-98);  /* #fdf7e7 */
-  --pf-v5-global--palette--gold-100:   var(--color-90);  /* #f9e0a2 */
-  --pf-v5-global--palette--gold-200:   var(--color-80);  /* #f6d173 */
-  --pf-v5-global--palette--gold-300:   var(--color-70);  /* #f4c145 */
-  --pf-v5-global--palette--gold-400:   var(--color-60);  /* #f0ab00 */
-  --pf-v5-global--palette--gold-500:   var(--color-50);  /* #c58c00 */
-  --pf-v5-global--palette--gold-600:   var(--color-40);  /* #795600 */
-  --pf-v5-global--palette--gold-700:   var(--color-30);  /* #3d2c00 */
-
-  /* --- Green Palette --- */
-  --pf-v5-global--palette--green-50:   var(--color-98);  /* #f3faf2 */
-  --pf-v5-global--palette--green-100:  var(--color-85);  /* #bde5b8 */
-  --pf-v5-global--palette--green-200:  var(--color-75);  /* #95d58e */
-  --pf-v5-global--palette--green-300:  var(--color-65);  /* #6ec664 */
-  --pf-v5-global--palette--green-400:  var(--color-60);  /* #5ba352 */
-  --pf-v5-global--palette--green-500:  var(--color-50);  /* #3e8635 */
-  --pf-v5-global--palette--green-600:  var(--color-40);  /* #1e4f18 */
-  --pf-v5-global--palette--green-700:  var(--color-20);  /* #0f280d */
-
-  /* --- Light Blue Palette --- */
-  --pf-v5-global--palette--light-blue-100: var(--color-95);  /* #beedf9 */
-  --pf-v5-global--palette--light-blue-200: var(--color-85);  /* #7cdbf3 */
-  --pf-v5-global--palette--light-blue-300: var(--color-75);  /* #35caed */
-  --pf-v5-global--palette--light-blue-400: var(--color-65);  /* #00b9e4 */
-  --pf-v5-global--palette--light-blue-500: var(--color-50);  /* #008bad */
-  --pf-v5-global--palette--light-blue-600: var(--color-40);  /* #005c73 */
-  --pf-v5-global--palette--light-blue-700: var(--color-20);  /* #002d39 */
-
-  /* --- Light Green Palette --- */
-  --pf-v5-global--palette--light-green-100: var(--color-95); /* #e4f5bc */
-  --pf-v5-global--palette--light-green-200: var(--color-85); /* #c8eb79 */
-  --pf-v5-global--palette--light-green-300: var(--color-75); /* #ace12e */
-  --pf-v5-global--palette--light-green-400: var(--color-65); /* #92d400 */
-  --pf-v5-global--palette--light-green-500: var(--color-50); /* #6ca100 */
-  --pf-v5-global--palette--light-green-600: var(--color-40); /* #486b00 */
-  --pf-v5-global--palette--light-green-700: var(--color-20); /* #253600 */
-
-  /* --- Orange Palette --- */
-  --pf-v5-global--palette--orange-50:  var(--color-98);  /* #fff6ec */
-  --pf-v5-global--palette--orange-100: var(--color-85);  /* #f4b678 */
-  --pf-v5-global--palette--orange-200: var(--color-75);  /* #ef9234 */
-  --pf-v5-global--palette--orange-300: var(--color-65);  /* #ec7a08 */
-  --pf-v5-global--palette--orange-400: var(--color-50);  /* #c46100 */
-  --pf-v5-global--palette--orange-500: var(--color-40);  /* #8f4700 */
-  --pf-v5-global--palette--orange-600: var(--color-30);  /* #773d00 */
-  --pf-v5-global--palette--orange-700: var(--color-20);  /* #3b1f00 */
-
-  /* --- Purple Palette --- */
-  --pf-v5-global--palette--purple-50:   var(--color-98);  /* #f2f0fc */
-  --pf-v5-global--palette--purple-100:  var(--color-90);  /* #cbc1ff */
-  --pf-v5-global--palette--purple-200:  var(--color-80);  /* #b2a3ff */
-  --pf-v5-global--palette--purple-300:  var(--color-70);  /* #a18fff */
-  --pf-v5-global--palette--purple-400:  var(--color-60);  /* #8476d1 */
-  --pf-v5-global--palette--purple-500:  var(--color-50);  /* #6753ac */
-  --pf-v5-global--palette--purple-600:  var(--color-40);  /* #40199a */
-  --pf-v5-global--palette--purple-700:  var(--color-20);  /* #1f0066 */
-
-  /* --- Red Palette --- */
-  --pf-v5-global--palette--red-50:    var(--color-98);  /* #faeae8 */
-  --pf-v5-global--palette--red-100:   var(--color-70);  /* #c9190b */
-  --pf-v5-global--palette--red-200:   var(--color-50);  /* #a30000 */
-  --pf-v5-global--palette--red-300:   var(--color-40);  /* #7d1007 */
-  --pf-v5-global--palette--red-400:   var(--color-30);  /* #470000 */
-  --pf-v5-global--palette--red-500:   var(--color-20);  /* #2c0000 */
-
   /* --- White --- */
   --pf-v5-global--palette--white:      var(--color-99);
 
@@ -337,23 +251,6 @@ HINT:
   --pf-v5-global--custom-color--200:    var(--color-65);
   --pf-v5-global--custom-color--300:    var(--color-30);
 
-  /* --- Success Colors --- */
-  --pf-v5-global--success-color--100:   var(--color-50);
-  --pf-v5-global--success-color--200:   var(--color-40);
-
-  /* --- Info Colors --- */
-  --pf-v5-global--info-color--100:      var(--color-75);
-  --pf-v5-global--info-color--200:      var(--color-30);
-
-  /* --- Warning Colors --- */
-  --pf-v5-global--warning-color--100:   var(--color-60);
-  --pf-v5-global--warning-color--200:   var(--color-40);
-
-  /* --- Danger Colors --- */
-  --pf-v5-global--danger-color--100:    var(--color-70);
-  --pf-v5-global--danger-color--200:    var(--color-50);
-  --pf-v5-global--danger-color--300:    var(--color-30);
-
   /* --- Link Colors --- */
   --pf-v5-global--link--Color:                  var(--color-65);
   --pf-v5-global--link--Color--hover:           var(--color-40);
@@ -533,8 +430,33 @@ HINT:
 }
 
 /** Mastodon Overrides **/
-:root{
+div#mastodon, div#admin-wrapper {
-    --surface-variant-background-color: var(--color-80);
+  /* Dropdown */
+  --dropdown-border-color: var(--color-35);
+  --dropdown-background-color: rgba(var(--color-rgb-03), 0.9);
+  --dropdown-shadow: 0 20px 25px -5px rgba(var(--color-rgb-01), 0.25),
+                       0 8px 10px -6px rgba(var(--color-rgb-01), 0.25);
+
+  /* Modal */
+  --modal-background-color: rgba(var(--color-rgb-03), 0.7);
+  --modal-background-variant-color: rgba(var(--color-rgb-05), 0.7);
+  --modal-border-color: var(--color-35);
+
+  /* Background */
+  --background-border-color: var(--color-82);
+  --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+  --background-color: var(--color-93);
+  --background-color-tint: rgba(var(--color-rgb-03), 0.9);
+
+  /* Surface */
+  --surface-background-color: var(--color-90);
+  --surface-variant-background-color: var(--color-89);
+  --surface-variant-active-background-color: var(--color-35);
+  --on-surface-color: rgba(var(--color-rgb-05), 0.5);
+
+  /* Media & Overlay */
+  --media-outline-color: rgba(var(--color-rgb-99), 0.15);
+  --overlay-icon-shadow: drop-shadow(0 0 8px rgba(var(--color-rgb-01), 0.25));
 }
 
 /* Modal Overwrittes */ 
@@ -719,11 +641,6 @@ h1, h2, h3, h4, h5, h6, p{
     color: var(--color-40) !important;
 }
 
-/* Ensure the button itself uses the light text color. Occurred in Mastodon */
-button.icon-button {
-    color: var(--color-99) !important;
-}
-
 /* Keycloak Header */
 div#app header, div#app header *{
     background-color: var(--color-60) !important;
@@ -741,16 +658,6 @@ div#app header, div#app header *{
     background-color: var(--color-90) !important;
 }
 
-
-/** Mastodon Specific **/ 
-div#mastodon div.compose-panel div.compose-form__highlightable{
-    background-color: var(--color-90) !important;
-}
-
-div#mastodon strong{
-    color: var(--color-40) !important;
-}
-
 /** Nextcloud specific **/
 html.ng-csp header#header{
     color:              var(--color-90) !important;
@@ -765,6 +672,38 @@ html.ng-csp div#postsetupchecks ul.info{
     background-color: transparent !important;
 }
 
+div#mastodon .column-link{
+    color: var(--color-55); 
+}
+
+div#mastodon .column-back-button {
+    color: var(--color-58);
+}
+
+div#mastodon textarea, div#mastodon input, div#mastodon .compose-form__highlightable {
+    background-color: var(--color-89);
+    color: var(--color-19);
+}
+
+div#mastodon .status-card__title, div#mastodon .display-name strong{
+    color: var(--color-33);
+}
+
+div#mastodon a.unhandled-link, div#mastodon .dropdown-button, div#mastodon .status__content a, div#mastodon .status-card__author{
+    color: var(--color-29);
+}
+div#mastodon .dropdown-button{
+    border: 1px solid #8c8dff;
+}
+
+div#mastodon .button, div#mastodon .button:active, div#mastodon .button:focus, div#mastodon .button:hover{
+    background-color: var(--color-71);
+}
+
+.compose-form__actions .icon-button {
+    color: var(--color-28);
+}
+
 /** OpenProject **/
 header.op-app-header{
     background-color: var(--color-40) !important;