mirror of
https://github.com/kevinveenbirkenbach/computer-playbook.git
synced 2025-02-23 21:01:53 +01:00
233 lines
7.1 KiB
Django/Jinja
233 lines
7.1 KiB
Django/Jinja
/* Global Theming Styles – Color and Shadow Variables */
|
||
:root {
|
||
--primary-color: {{ global_theming.css.colors.primary }};
|
||
--secondary-color: {{ global_theming.css.colors.secondary }};
|
||
--background-color: {{ global_theming.css.colors.background }};
|
||
--background-dark-color: {{ global_theming.css.colors.background_dark }};
|
||
--text-color: {{ global_theming.css.colors.text }};
|
||
--accent-color: {{ global_theming.css.colors.accent }};
|
||
--success-color: {{ global_theming.css.colors.success }};
|
||
--warning-color: {{ global_theming.css.colors.warning }};
|
||
--error-color: {{ global_theming.css.colors.error }};
|
||
--info-color: {{ global_theming.css.colors.info }};
|
||
--link-color: {{ global_theming.css.colors.link }};
|
||
--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) */
|
||
:root {
|
||
--bs-primary: var(--primary-color);
|
||
--bs-secondary: var(--secondary-color);
|
||
--bs-body-bg: var(--background-color);
|
||
--bs-body-color: var(--text-color);
|
||
--bs-danger: var(--error-color);
|
||
--bs-warning: var(--warning-color);
|
||
--bs-success: var(--success-color);
|
||
--bs-info: var(--info-color);
|
||
--bs-link-color: var(--link-color);
|
||
--bs-btn-color: var(--background-dark-color);
|
||
}
|
||
|
||
/** Mastodon Overrides **/
|
||
:root{
|
||
--surface-variant-background-color: var(--button-bg-color)
|
||
}
|
||
|
||
/** Nextcloud Specific**/
|
||
:root{
|
||
--color-main-background: var(--background-color);
|
||
--color-main-background-rgb: var(--background-color);
|
||
--color-primary-element: var(--button-bg-color);
|
||
}
|
||
|
||
/* Peertube Overrides */
|
||
:root {
|
||
--mainColor: var(--primary-color);
|
||
}
|
||
|
||
/* 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;
|
||
}
|
||
|
||
/* Links (Color Only) */
|
||
a {
|
||
color: var(--link-color) !important;
|
||
}
|
||
|
||
/* 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(--button-bg-color) !important;
|
||
color: var(--primary-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
cursor: pointer;
|
||
}
|
||
|
||
button:hover, .btn:hover {
|
||
filter: brightness(0.9);
|
||
}
|
||
|
||
/* States: Success, Warning, Error, Info (Background and Text Colors) */
|
||
.success, .alert-success {
|
||
background-color: var(--success-color) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
.warning, .alert-warning {
|
||
background-color: var(--warning-color) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
.error, .alert-danger {
|
||
background-color: var(--error-color) !important;
|
||
color: var(--background-dark-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) */
|
||
input, textarea, select {
|
||
background-color: var(--info-color) !important; /* Instead of var(--background-color) */
|
||
color: var(--text-color) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
input:focus, textarea:focus, select:focus {
|
||
border-color: var(--primary-color) !important;
|
||
box-shadow: 0 0 5px var(--shadow-color);
|
||
}
|
||
|
||
/* Navigation (Background and Text Colors) */
|
||
.navbar, .navbar-light, .navbar-dark {
|
||
background-color: var(--background-color) !important;
|
||
color: var(--primary-color) !important;
|
||
}
|
||
|
||
.navbar a {
|
||
color: var(--background-dark-color) !important;
|
||
}
|
||
|
||
.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 {
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
thead {
|
||
background-color: var(--button-bg-color) !important;
|
||
color: var(--background-dark-color) !important;
|
||
}
|
||
|
||
/* Cards / Containers (Background, Border, and Shadow)
|
||
Cards now use a slightly lighter background and a bold, clear shadow */
|
||
.card {
|
||
background-color: var(--card-bg-color) !important;
|
||
box-shadow: var(--large-shadow) !important;
|
||
border-color: var(--border-color) !important;
|
||
}
|
||
|
||
/* Headings (Text Color) */
|
||
h1, h2, p{
|
||
color: var(--background-dark-color) !important;
|
||
}
|
||
|
||
/* Dropdown Menu and Submenu (Background, Text, and Shadow) */
|
||
.navbar .dropdown-menu,
|
||
.nav-item .dropdown-menu {
|
||
background-color: var(--background-color) !important;
|
||
color: var(--text-color) !important;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.dropdown-item {
|
||
color: var(--text-color) !important;
|
||
background-color: var(--background-color) !important;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
/** 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;
|
||
}
|
||
|
||
/** Nextcloud specific **/
|
||
html.ng-csp header#header{
|
||
color: var(--background-color) !important;
|
||
background-color: var(--button-bg-color) !important;
|
||
}
|
||
|
||
html.ng-csp button.files-list__row-name-link, html.ng-csp button.button-vue{
|
||
background-color: transparent !important;
|
||
color: background-color: var(--button-bg-color) !important;
|
||
}
|
||
|
||
div#content-vue p, div#content-vue span{
|
||
color: var(--background-dark-color) !important;
|
||
}
|
||
|
||
/** OpenProject **/
|
||
header.op-app-header{
|
||
background-color: var(--background-dark-color) !important;
|
||
color: var(--text-color) !important;
|
||
}
|
||
|
||
/** Open Project **/
|
||
div#wrapper button, div#wrapper input, button.top-menu-search-button, div.menu-sidebar a{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
main-menu-toggle button{
|
||
border: 0px none !important;
|
||
}
|
||
|
||
/* Peertube specific configuration */
|
||
.peertube-container button {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/** Taiga specific configuration **/
|
||
|
||
section.main.kanban{
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
div.master, div.kanban-header, div.kanban-table-inner, section.kanban button,a.dropdown-project-list-projects{
|
||
background-color: var(--info-color) !important;
|
||
color: var(--background-dark-color) !important;
|
||
}
|
||
|
||
section.kanban h1, section.kanban h2{
|
||
color: var(--background-dark-color) !important;
|
||
}
|