kevinveenbirkenbach/computer-playbook
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/computer-playbook.git synced 2025-02-23 12:51:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Deactivated dark theming and optimized mastodon

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-02-10 16:24:27 +01:00
parent eb405b4b25
commit 490a215dce
2 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
group_vars/all/13_theming.yml
View File

@ -11,7 +11,7 @@ global_theming:
# For dark mode: a dark, blue–gray background # For dark mode: a dark, blue–gray background
background_dark: "#2E3B4E" background_dark: "#2E3B4E"
# For the text – true black # For the text – true black
text: "#000000" text: "#2E3B4E"
# Accent color (e.g., for links or buttons) – a golden tone symbolizing the sun # Accent color (e.g., for links or buttons) – a golden tone symbolizing the sun
accent: "#FFD700" accent: "#FFD700"
# As the positive/success color – a light, slightly grayish green (forest) # As the positive/success color – a light, slightly grayish green (forest)

81
roles/nginx-global-css/templates/global.css.j2
View File

@ -41,6 +41,11 @@
--mainColor: var(--primary-color); --mainColor: var(--primary-color);
} }
/** Mastodon Overrides **/
:root{
--surface-variant-background-color: var(--button-bg-color)
}
/* Global Defaults (Colors Only) */ /* Global Defaults (Colors Only) */
body { body {
background-color: var(--background-color) !important; background-color: var(--background-color) !important;
@ -137,7 +142,7 @@ h1, h2 {
color: var(--text-color); color: var(--text-color);
} }
div#mastodon p{ p{
color: var(--background-dark-color) !important; color: var(--background-dark-color) !important;
} }
@ -164,6 +169,14 @@ div#mastodon p{
button.icon-button { button.icon-button {
color: var(--button-text-color) !important; color: var(--button-text-color) !important;
} }
/** Mastodon Specific **/
div#mastodon div.compose-panel div.compose-form__highlightable{
background-color: var(--background-color) !important;
}
div#mastodon strong{
color: var(--background-dark-color) !important;
}
/** OpenProject **/ /** OpenProject **/
header.op-app-header{ header.op-app-header{
@ -171,36 +184,6 @@ header.op-app-header{
color: var(--text-color) !important; color: var(--text-color) !important;
} }
/* Dark Mode Adjustments (Background and Text Colors) */
@media (prefers-color-scheme: dark) {
h1, h2 {
color: var(--background-color) !important;
text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3) !important;
}
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;
}
/** Nextcloud **/
div#content-vue p, div#content-vue span{
color: var(--background-color) !important;
}
/** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
color: var(--background-color) !important;
}
}
/** Open Project **/ /** Open Project **/
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{ div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
background-color: transparent !important; background-color: transparent !important;
@ -234,3 +217,39 @@ div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.d
section.kanban h1, section.kanban h2{ section.kanban h1, section.kanban h2{
color: var(--background-dark-color) !important; color: var(--background-dark-color) !important;
} }
/* Dark Mode Adjustments (Background and Text Colors) */
/*** !!! Contiously Deactivated: First focusing on Optimizing everything for bright mode ***
@media (prefers-color-scheme: dark) {
h1, h2 {
color: var(--background-color) !important;
text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.3) !important;
}
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;
}
// Keycloak Specific
html.pf-v5-theme-dark main#kc-main-content-page-container section{
background-color: var(--background-color) !important;
}
// Nextcloud
div#content-vue p, div#content-vue span{
color: var(--background-color) !important;
}
// Open Project
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
color: var(--background-color) !important;
}
}
*/