Finished Global CSS Draft. Fine Optimation for all apps still needed. But overall happy with the result

group_vars/all/13_theming.yml

@@ -29,5 +29,13 @@ global_theming:
       # Shadows & borders (unchanged)
       shadow: "rgba(0, 0, 0, 0.1)"
       border: "#DDDDDD"
-
+      # New settings for cards and buttons:
+      # Cards: a slightly lighter tone than the background for subtle differentiation
+      card_bg_color: "#E6EFF9"
+      # Buttons: a background that is only a bit darker than the main background and in a blue tone
+      button_bg_color: "#C6D7E6"
+      # Bold, larger shadow for containers (cards, dropdowns, etc.)
+      large_shadow: "4px 4px 15px rgba(0, 0, 0, 0.2)"
+      # Reduced shadow for buttons
+      small_shadow: "1px 1px 3px rgba(0, 0, 0, 0.1)"
 global_theming_enabled: true

playbook.servers.yml

@@ -244,4 +244,11 @@
   roles:
    -  role: nginx-global-www
 
+# Helper Roles for partial deployment
+- name: Copy global css 
+  hosts: nginx-global-css
+  become: true
+  roles:
+   -  role: nginx-global-css
+
 - import_playbook: playbook.destructor.yml

roles/docker-peertube/README.md

@@ -34,3 +34,4 @@ docker logs peertube-application-1 | grep -A1 root
 ## further information
 - https://docs.joinpeertube.org/install-docker
 - https://github.com/Chocobozzz/PeerTube/issues/3091
+- [OIDC Plugin installation](https://chatgpt.com/c/67a4f448-4be8-800f-8639-4c15cb2fb44e)

roles/nginx-global-css/tasks/main.yml

@@ -1,8 +1,3 @@
-- name: Get the current Unix timestamp as version
-  set_fact:
-    global_css_version: "{{ ansible_date_time.epoch }}"
-  when: run_once_nginx_global_css is not defined
-
 - name: Ensure {{nginx.directories.global}} directory exists
   file:
     path: "{{nginx.directories.global}}"
@@ -21,8 +16,18 @@
     mode: '0644'
   when: run_once_nginx_global_css is not defined
 
-- name: run the global css tasks once
+- name: Get stat for global.css destination file
+  stat:
+    path: "{{ global_css_destination }}"
+  register: global_css_stat
+  when: run_once_nginx_global_css is not defined
+
+- name: Set global_css_version to file modification time
+  set_fact:
+    global_css_version: "{{ global_css_stat.stat.mtime }}"
+  when: run_once_nginx_global_css is not defined
+
+- name: Mark global css tasks as run once
   set_fact:
     run_once_nginx_global_css: true
   when: run_once_nginx_global_css is not defined
-

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

@@ -1,4 +1,4 @@
-/* Global Theming Styles – Overrides Application Defaults */
+/* Global Theming Styles – Color and Shadow Variables */
 :root {
     --primary-color:         {{ global_theming.css.colors.primary }};
     --secondary-color:       {{ global_theming.css.colors.secondary }};
@@ -14,9 +14,15 @@
     --button-text-color:     {{ global_theming.css.colors.button_text }};
     --shadow-color:          {{ global_theming.css.colors.shadow }};
     --border-color:          {{ global_theming.css.colors.border }};
+    
+    /* New variables for cards and buttons */
+    --card-bg-color:         {{ global_theming.css.colors.card_bg_color }};
+    --large-shadow:          {{ global_theming.css.colors.large_shadow }};
+    --button-bg-color:       {{ global_theming.css.colors.button_bg_color }};
+    --small-shadow:          {{ global_theming.css.colors.small_shadow }};
 }
 
-/* Bootstrap Overrides */
+/* Bootstrap Overrides (Color/Shadow Variables Only) */
 :root {
     --bs-primary: var(--primary-color);
     --bs-secondary: var(--secondary-color);
@@ -27,51 +33,42 @@
     --bs-success: var(--success-color);
     --bs-info: var(--info-color);
     --bs-link-color: var(--link-color);
-    --bs-btn-color: var(--button-text-color);
+    --bs-btn-color: var(--background-dark-color);
 }
 
-/* Ensure Styles Take Priority */
+/* Peertube Overrides */
-*,
+:root {
-*::before,
+    --mainColor: var(--primary-color);
-*::after {
-    all: unset;
-    all: revert;
 }
 
-/* Global Defaults */
+/* Global Defaults (Colors Only) */
 body {
     background-color: var(--background-color) !important;
     color: var(--text-color) !important;
     /* Use the corporate-design font family */
     font-family: "Liberation Sans", Arial, sans-serif;
-    line-height: 1.6;
 }
 
-/* Links */
+/* Links (Color Only) */
 a {
     color: var(--link-color) !important;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
 }
 
-/* Buttons */
+/* Buttons (Background, Text, Border, and Shadow)
+   Now using a button background that is only slightly darker than the overall background */
 button, .btn {
-    background-color: var(--primary-color) !important;
+    background-color: var(--button-bg-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--primary-color) !important;
-    border: 1px solid var(--border-color) !important;
+    border-color: var(--border-color) !important;
-    box-shadow: 2px 2px 5px var(--shadow-color) !important;
+    box-shadow: var(--small-shadow) !important;
-    padding: 10px 15px;
-    border-radius: 5px;
-    font-weight: bold;
     cursor: pointer;
 }
+
 button:hover, .btn:hover {
     filter: brightness(0.9);
 }
 
-/* Success, Warning, Error States */
+/* States: Success, Warning, Error, Info (Background and Text Colors) */
 .success, .alert-success {
     background-color: var(--success-color) !important;
     color: var(--text-color) !important;
@@ -82,89 +79,89 @@ button:hover, .btn:hover {
 }
 .error, .alert-danger {
     background-color: var(--error-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--background-dark-color) !important;
 }
 .info, .alert-info {
     background-color: var(--info-color) !important;
     color: var(--text-color) !important;
 }
 
-/* Inputs & Forms */
+/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
 input, textarea, select {
-    background-color: var(--background-color) !important;
+    background-color: var(--info-color) !important;  /* Instead of var(--background-color) */
     color: var(--text-color) !important;
-    border: 1px solid var(--border-color) !important;
+    border-color: var(--border-color) !important;
-    padding: 8px;
-    border-radius: 4px;
 }
 input:focus, textarea:focus, select:focus {
     border-color: var(--primary-color) !important;
-    outline: none;
     box-shadow: 0 0 5px var(--shadow-color);
 }
 
-/* Navigation */
+/* Navigation (Background and Text Colors) */
 .navbar, .navbar-light, .navbar-dark {
-    background-color: var(--primary-color) !important;
+    background-color: var(--background-color) !important;
-    color: var(--button-text-color) !important;
+    color: var(--primary-color) !important;
-}
-.navbar a {
-    color: var(--button-text-color) !important;
 }
 
-/* Tables */
+.navbar a {
-table {
+    color: var(--background-dark-color) !important;
-    width: 100%;
-    border-collapse: collapse;
 }
+
+.navbar a.dropdown-item {
+    color: var(--background-dark-color) !important;
+}
+
+.card-body {
+    color: var(--background-dark-color) !important;
+}
+
+/* Tables (Borders and Header Colors) */
 th, td {
-    padding: 10px;
+    border-color: var(--border-color) !important;
-    border: 1px solid var(--border-color);
 }
 thead {
     background-color: var(--primary-color);
-    color: var(--button-text-color);
+    color: var(--background-dark-color);
 }
 
-/* Cards / Containers */
+/* Cards / Containers (Background, Border, and Shadow)
+   Cards now use a slightly lighter background and a bold, clear shadow */
 .card {
-    background-color: var(--background-color) !important;
+    background-color: var(--card-bg-color) !important;
-    box-shadow: 2px 2px 10px var(--shadow-color) !important;
+    box-shadow: var(--large-shadow) !important;
-    border: 1px solid var(--border-color);
+    border-color: var(--border-color) !important;
-    border-radius: 8px;
 }
 
-/* Headings */
+/* Headings (Text Color) */
 h1, h2 {
     color: var(--text-color);
 }
 
+div#mastodon p{
+    color: var(--background-dark-color) !important;
+}
+
+
+/* Dark Mode Adjustments (Background and Text Colors) */
 @media (prefers-color-scheme: dark) {
     h1, h2 {
         color: #ffffff !important;
         text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3);
     }
-}
-
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
     body {
         background-color: var(--background-dark-color) !important;
         color: var(--text-color) !important;
     }
     input, textarea, select {
+        color: var(--button-text-color) !important;
         background-color: var(--background-dark-color) !important;
-        color: var(--text-color) !important;
+    }
+    div#mastodon p{
+        color: var(--button-text-color) !important;
     }
 }
 
-/* Enforce Style Priority */
+/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
-html, body, * {
-    /* No additional !important directives */
-}
-
-
-/* Dropdown Menu and Submenu */
 .navbar .dropdown-menu,
 .nav-item .dropdown-menu {
     background-color: var(--background-color) !important;
@@ -175,12 +172,25 @@ html, body, * {
 .dropdown-item {
     color: var(--text-color) !important;
     background-color: var(--background-color) !important;
-    padding: 8px 12px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: var(--secondary-color) !important;
     color: var(--text-color) !important;
-    text-decoration: none;
+}
+
+/* Ensure the button itself uses the light text color. Occurred in Mastodon */
+button.icon-button {
+    color: var(--button-text-color) !important;
+}
+
+/** Nextcloud specific **/
+button.files-list__row-name-link, button.button-vue{
+    background-color: transparent !important;
+}
+
+/* Peertube specific configuration */
+.peertube-container button {
+    background-color: transparent !important;
 }

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

@@ -0,0 +1 @@
+<link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">

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

@@ -1 +0,0 @@
-sub_filter '<head>' '<head><link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">';

roles/nginx-global-matomo/templates/matomo-tracking.conf.j2

@@ -2,5 +2,4 @@
 add_header Content-Security-Policy: "";
 
 # sub filters to integrate matomo tracking code in nginx websites
-sub_filter '</head>' '<script>{{matomo_tracking_code_one_liner}}</script></head>';
 sub_filter '</body>' '<noscript><p><img src="//matomo.{{primary_domain}}/matomo.php?idsite={{matomo_site_id}}&rec=1" style="border:0;" alt="" /></p></noscript></body>';

roles/nginx-global-matomo/templates/script.j2

@@ -0,0 +1 @@
+<script>{{matomo_tracking_code_one_liner}}</script>

roles/nginx-global/templates/global.includes.conf.j2

@@ -7,9 +7,11 @@ sub_filter_types text/html;
   {% include 'roles/nginx-global-matomo/templates/matomo-tracking.conf.j2' %}
 {% endif %}
 
+{% if global_theming_enabled | bool or global_matomo_tracking_enabled | bool%}
+  sub_filter '</head>' '{% if global_matomo_tracking_enabled | bool %}{% include 'roles/nginx-global-matomo/templates/script.j2' %}{% endif %}{% if global_theming_enabled | bool %}{% include 'roles/nginx-global-css/templates/link.j2' %}{% endif %}</head>';
+{% endif %}
+
 {% if global_theming_enabled | bool %}
-  # Include Global Theming
-  {% include 'roles/nginx-global-css/templates/sub_filter.conf.j2' %}
   # Include Global CSS Location
   {% include 'roles/nginx-global-css/templates/location.conf.j2' %}
 {% endif %}