mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-03-12 12:42:39 +01:00
Compare commits
No commits in common. "769b43ce07ea7328360ec8ddcb39bf631499737f" and "fedc5572f170aaea43d1f6359a86a1f02707d303" have entirely different histories.
769b43ce07
...
fedc5572f1
@ -29,13 +29,5 @@ 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
|
||||
|
||||
@ -244,11 +244,4 @@
|
||||
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
|
||||
@ -34,4 +34,3 @@ 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)
|
||||
@ -1,3 +1,8 @@
|
||||
- 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}}"
|
||||
@ -16,18 +21,8 @@
|
||||
mode: '0644'
|
||||
when: run_once_nginx_global_css is not defined
|
||||
|
||||
- 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
|
||||
- name: run the global css tasks once
|
||||
set_fact:
|
||||
run_once_nginx_global_css: true
|
||||
when: run_once_nginx_global_css is not defined
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Global Theming Styles – Color and Shadow Variables */
|
||||
/* Global Theming Styles – Overrides Application Defaults */
|
||||
:root {
|
||||
--primary-color: {{ global_theming.css.colors.primary }};
|
||||
--secondary-color: {{ global_theming.css.colors.secondary }};
|
||||
@ -14,15 +14,9 @@
|
||||
--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 (Color/Shadow Variables Only) */
|
||||
/* Bootstrap Overrides */
|
||||
:root {
|
||||
--bs-primary: var(--primary-color);
|
||||
--bs-secondary: var(--secondary-color);
|
||||
@ -33,42 +27,51 @@
|
||||
--bs-success: var(--success-color);
|
||||
--bs-info: var(--info-color);
|
||||
--bs-link-color: var(--link-color);
|
||||
--bs-btn-color: var(--background-dark-color);
|
||||
--bs-btn-color: var(--button-text-color);
|
||||
}
|
||||
|
||||
/* Peertube Overrides */
|
||||
:root {
|
||||
--mainColor: var(--primary-color);
|
||||
/* Ensure Styles Take Priority */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
all: unset;
|
||||
all: revert;
|
||||
}
|
||||
|
||||
/* Global Defaults (Colors Only) */
|
||||
/* Global Defaults */
|
||||
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 (Color Only) */
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--link-color) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Buttons (Background, Text, Border, and Shadow)
|
||||
Now using a button background that is only slightly darker than the overall background */
|
||||
/* Buttons */
|
||||
button, .btn {
|
||||
background-color: var(--button-bg-color) !important;
|
||||
color: var(--primary-color) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
box-shadow: var(--small-shadow) !important;
|
||||
background-color: var(--primary-color) !important;
|
||||
color: var(--button-text-color) !important;
|
||||
border: 1px solid var(--border-color) !important;
|
||||
box-shadow: 2px 2px 5px var(--shadow-color) !important;
|
||||
padding: 10px 15px;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover, .btn:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
/* States: Success, Warning, Error, Info (Background and Text Colors) */
|
||||
/* Success, Warning, Error States */
|
||||
.success, .alert-success {
|
||||
background-color: var(--success-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
@ -79,89 +82,89 @@ button:hover, .btn:hover {
|
||||
}
|
||||
.error, .alert-danger {
|
||||
background-color: var(--error-color) !important;
|
||||
color: var(--background-dark-color) !important;
|
||||
color: var(--button-text-color) !important;
|
||||
}
|
||||
.info, .alert-info {
|
||||
background-color: var(--info-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
/* Inputs & Forms in Light Mode (Using a Light Tone from the Corporate Design) */
|
||||
/* Inputs & Forms */
|
||||
input, textarea, select {
|
||||
background-color: var(--info-color) !important; /* Instead of var(--background-color) */
|
||||
background-color: var(--background-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
border: 1px solid 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 (Background and Text Colors) */
|
||||
/* Navigation */
|
||||
.navbar, .navbar-light, .navbar-dark {
|
||||
background-color: var(--background-color) !important;
|
||||
color: var(--primary-color) !important;
|
||||
background-color: var(--primary-color) !important;
|
||||
color: var(--button-text-color) !important;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--background-dark-color) !important;
|
||||
color: var(--button-text-color) !important;
|
||||
}
|
||||
|
||||
.navbar a.dropdown-item {
|
||||
color: var(--background-dark-color) !important;
|
||||
/* Tables */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: var(--background-dark-color) !important;
|
||||
}
|
||||
|
||||
/* Tables (Borders and Header Colors) */
|
||||
th, td {
|
||||
border-color: var(--border-color) !important;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
thead {
|
||||
background-color: var(--primary-color);
|
||||
color: var(--background-dark-color);
|
||||
color: var(--button-text-color);
|
||||
}
|
||||
|
||||
/* Cards / Containers (Background, Border, and Shadow)
|
||||
Cards now use a slightly lighter background and a bold, clear shadow */
|
||||
/* Cards / Containers */
|
||||
.card {
|
||||
background-color: var(--card-bg-color) !important;
|
||||
box-shadow: var(--large-shadow) !important;
|
||||
border-color: var(--border-color) !important;
|
||||
background-color: var(--background-color) !important;
|
||||
box-shadow: 2px 2px 10px var(--shadow-color) !important;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Headings (Text Color) */
|
||||
/* Headings */
|
||||
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;
|
||||
}
|
||||
div#mastodon p{
|
||||
color: var(--button-text-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
|
||||
/* Enforce Style Priority */
|
||||
html, body, * {
|
||||
/* No additional !important directives */
|
||||
}
|
||||
|
||||
|
||||
/* Dropdown Menu and Submenu */
|
||||
.navbar .dropdown-menu,
|
||||
.nav-item .dropdown-menu {
|
||||
background-color: var(--background-color) !important;
|
||||
@ -172,25 +175,12 @@ div#mastodon p{
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
<link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">
|
||||
1
roles/nginx-global-css/templates/sub_filter.conf.j2
Normal file
1
roles/nginx-global-css/templates/sub_filter.conf.j2
Normal file
@ -0,0 +1 @@
|
||||
sub_filter '<head>' '<head><link rel="stylesheet" type="text/css" href="/global.css?version={{global_css_version}}">';
|
||||
@ -2,4 +2,5 @@
|
||||
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>';
|
||||
@ -1 +0,0 @@
|
||||
<script>{{matomo_tracking_code_one_liner}}</script>
|
||||
@ -7,11 +7,9 @@ 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 %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user