168 lines
5.1 KiB
Django/Jinja
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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 }};
}
/* 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(--button-text-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) */
button, .btn {
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;
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(--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) */
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);
}
.bg-light{
background-color: var(--background-color) !important;
}
/* Navigation (Background and Text Colors) */
.navbar, .navbar-light, .navbar-dark {
background-color: var(--background-color) !important;
color: var(--button-text-color) !important;
}
.navbar a {
color: var(--button-text-color) !important;
}
.navbar .dropdown-item a {
color: var(--background-color) !important;
}
/* Tables (Borders and Header Colors) */
th, td {
border: 1px solid var(--border-color);
}
thead {
background-color: var(--primary-color);
color: var(--button-text-color);
}
/* Cards / Containers (Background, Border, and Shadow) */
.card {
background-color: var(--background-color) !important;
box-shadow: 2px 2px 10px var(--shadow-color) !important;
border: 1px solid var(--border-color);
}
/* Headings (Text Color) */
h1, h2 {
color: var(--text-color);
}
/* 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);
}
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;
}
}
/* 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. Occured in Mastodon */
button.icon-button {
color: var(--button-text-color) !important;
}