With the recent release of FBX 24.24, I really liked how Plinth looks (no fuzzy background and clear app icons). All very plain and clear.
If anyone is working on the UI, it would be nice if the app icons were “centered” on the screen (especially for mobile devices).
Thanks and best!
I am very happy that my Freedombox is super stable and all updates worked fine for such a long time.
About the way plinth looks, I feel a little disturbed not to see edges of the icons anymore, but that is still fine.
I haven’t really noticed until it was mentioned. It is a matter of preference, so maybe it could be added to the user-specific CSS file.
For comparison:
@fefekrzr , how did you do this?
thanks.
I’ve tested this by adding justify-content: center to the .row class in DevTools. While this demonstrates the concept, it’s a temporary solution that could affect other elements using the same class. I’d suggest reviewing the HTML structure before making any permanent changes, because I haven’t yet.
Just what I wanted.
I edited last line of the below in /usr/share/plinth/static/theme/css/main.css to center
/* Cards in Apps, System and Help pages */
.card-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
Saved, restarted plinth and voila : )
Edit: This does kind of mess up the system tab icons (as they are rather large buttons)… but maybe i can look at them too at a later time.
Looks pretty clean. Congrats!
If you want to change the style of a single page instead of all four card pages (home, apps, system, help), then you can make the style page-specific like this:
.index-page .card-list {
/* Home page specific card styling goes here */
}
.apps-page .card-list {
/* Apps page specific card styling goes here */
}
.system-page .card-list {
/* System page specific card styling goes here */
}
I am glad to see some positive feedback for the recent UI changes. We discussed these changes during a progress/hack about how the interface would become simpler and about how the interface would match many other interfaces users are familiar with but were not sure everyone would like it.
Thanks @sunil. Will try with the specifics you provided.
Personally, I think its a good step for a more netutral interface and would make future customization (i.e. dark theme) simpler.
I have submitted a merge request to
I added a section in the customization wiki page on how to customize styling.
Thanks @sunil
I’m sure this is going to be very useful.
I’ve had a look at the css file, and with your recommendation have created a different style page for index, apps and system.
I’ve also put ChatGPT to work to transform the light theme to dark (i enjoyed having proprietary work for open source for once : )
After tweaking what AI threw me, I’m comfortable with the below.
For those who would like to get the css, I’m pasting the code below:
/*
# SPDX-License-Identifier: AGPL-3.0-or-later
*/
:root {
--background-color: #1e1e1e; /* Dark grey background */
--neutral-light-color: #333333; /* Darker grey */
--neutral-dark-color: #222222; /* Even darker grey */
--info-color: #5bc0de; /* Pale blue, almost turquoise (unchanged, as it's still visible on dark) */
--freedombox-blue-color: #4989D4; /* Blue (unchanged, it contrasts well in dark) */
--progress-color: #3498db; /* Blue (unchanged, it contrasts well in dark) */
--error-color: #d9534f; /* Red (unchanged, it contrasts well in dark) */
--warning-color: #ec971f; /* Orange (unchanged, it contrasts well in dark) */
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Italic.woff2') format('woff2');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Regular.woff2') format('woff2');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Semibold.woff2') format('woff2');
font-style: normal;
font-weight: 600;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-SemiboldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 600;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Bold.woff2') format('woff2');
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-BoldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 700;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Heavy.woff2') format('woff2');
font-style: normal;
font-weight: 800;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-HeavyItalic.woff2') format('woff2');
font-style: italic;
font-weight: 800;
}
/*
* Bootstrap override
*/
/* Heading margins from bootstrap 3 */
h1, h2, h3, h4, h5, h6 {
margin-top: 1.25rem;
margin-bottom: 0.625rem;
color: #ffffff; /* Light text color for headings */
}
/* Warning colors from bootstrap 3 */
.badge-warning,
.bg-warning,
.btn-warning {
background-color: #ec971f !important; /* Orange for dark mode */
color: #fff !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:disabled,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: var(--warning-color) !important;
color: #fff !important;
}
.btn[disabled] {
cursor: not-allowed !important;
opacity: .65;
box-shadow: none;
}
/* Primary color changed in bootstrap 4 */
.btn-primary {
background-color: #4989D4; /* Blue for dark mode */
border-color: #357ab7;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #286090;
border-color: #204d74;
}
/* Default style removed in bootstrap 4 */
.btn-default {
color: #f5f5f5; /* Light grey text for dark mode */
background-color: #333333; /* Dark background for default button */
border-color: #555555; /* Slightly lighter dark border */
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: #f5f5f5; /* Light grey text on hover */
background-color: #444444; /* Darker background on hover */
border-color: #666666; /* Lighter dark border on hover */
}
/* Help block removed from bootstrap 4, needs updated django-bootstrap-form */
.help-block {
display: block;
margin-top: 0.3125rem;
margin-bottom: 0.625rem;
color: #b0b0b0; /* Lighter grey text for help block */
}
/* form-horizontal removed in bootstrap, needs updated django-bootstrap-form */
.form-horizontal > .form-group {
display: flex;
flex-wrap: wrap;
margin-right: -0.9375rem;
margin-left: -0.9375rem;
}
.radio .help-block {
padding-left: 1.2rem;
color: #b0b0b0; /* Lighter grey text for radio help block */
}
.checkbox .help-block {
padding-left: 1.4rem;
color: #b0b0b0; /* Lighter grey text for checkbox help block */
}
/* Form error display was changed in bootstrap 4, provide compatibility */
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
color: #f5b7b1; /* Lighter red for error message */
}
.has-error .form-control {
border-color: #f5b7b1; /* Lighter red border for error state */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/*
* Basic styling
*/
body {
padding-top: 6rem;
position: relative;
font-family: Lato, sans-serif;
background-color: #121212; /* Dark background for body */
color: #e0e0e0; /* Light text for dark mode */
}
.multiple-checkbox li {
list-style-type: none;
}
.multiple-checkbox > div {
padding-left: 40px;
}
.navbar .fa:not(.fa-bars) {
margin-right: 0.25rem;
color: #e0e0e0; /* Icon color for dark mode */
}
.no-brand .navbar-brand {
display: none;
}
.navbar-brand .fa {
float: left;
margin-top: -0.4375rem;
padding: 0.5rem;
}
.navbar-brand {
height: 3.3125rem;
margin-right: -1.25rem;
color: #e0e0e0; /* Light text for navbar */
}
@media (max-width: 767px) {
.navbar-brand {
margin-right: auto;
}
}
.nav-tabs {
margin-bottom: 1.25rem;
border-bottom: 2px solid #121212; /* Darker border for tabs in dark mode */
}
.dropdown-toggle::after {
vertical-align: middle;
}
.running-status-parent {
display: inline-block;
}
.running-status {
border-radius: 50%;
border: 1px solid black;
width: 0.5rem;
height: 0.5rem;
display: inline-block;
}
.running-status.loading {
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
border-radius: 50%;
width: 1rem;
height: 1rem;
display: inline-block;
animation: spin 1s linear infinite;
}
.nav-link:hover, .nav-link:visited, .nav-link:link, .nav-link:active {
text-decoration: none;
color: #f5f5f5; /* Light color on hover for nav-links */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hide log out button if user dropdown is available */
.js #logout-nojs {
display: none;
}
/* Hide the dropdown icon when javascript is not available */
.no-js .dropdown-toggle:after {
display: none;
}
.diagnostics-results .diagnostics-result {
width: 3.75rem;
text-align: center;
}
.centered-column {
text-align: center;
}
html {
position: relative;
}
body,
html {
height: 100%;
background-color: #121212; /* Dark background for the entire page */
}
#wrapper {
position: relative;
}
.container {
max-width: 1320px;
}
.content-container {
max-width: 1000px;
margin-bottom: 1.25rem;
}
/* Tag Input Container */
.tag-input {
display: flex;
align-items: center;
border: 1px solid #555;
border-radius: .25rem;
padding: .375rem .75rem;
background-color: #121212; /* Dark background for tag input */
margin-bottom: 2rem;
color: #e0e0e0; /* Light text for tag input */
}
/* Remove tag button */
.tag-badge .remove-tag {
background-color: transparent; /* Match the tag's background color */
border: none;
cursor: pointer;
}
/* Adjust input field width */
.tag-input input[type="search"] {
flex-grow: 1;
border: none;
outline: none;
box-shadow: none;
width: auto;
min-width: 3rem;
color: #e0e0e0; /* Light text inside the tag input field */
}
/* dropdown-menu for tags is a scrollable list */
.tag-input .dropdown-menu {
bottom: calc(-100% - 10px);
overflow-y: auto;
}
@media (min-width: 768px) {
.content-container {
padding: 1.5rem 3rem 3rem;
}
}
footer {
text-align: center;
padding-top: 20rem;
color: #b0b0b0; /* Light grey text for footer */
}
/*
* Bootstrap extensions
*/
/* Use .list-group-two-column when there are some items aligned to right */
.list-group-two-column .list-group-item {
display: flex;
align-items: center;
}
.list-group-two-column .list-group-item > :not(:last-child) {
margin-right: 0.25rem;
}
.list-group-two-column .list-group-item > .badge.secondary {
font-size: 1rem;
font-weight: normal;
}
.list-group-two-column .list-group-item > .secondary {
margin-left: auto;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
}
.list-group-two-column .list-group-item > .secondary ~ .secondary {
margin-left: 0;
}
/* Hack to avoid inline styling on bootstrap progress bars */
.w-0 {width: 0%;} .w-1 {width: 1%;} .w-2 {width: 2%;} .w-3 {width: 3%;}
.w-4 {width: 4%;} .w-5 {width: 5%;} .w-6 {width: 6%;} .w-7 {width: 7%;}
.w-8 {width: 8%;} .w-9 {width: 9%;} .w-10 {width: 10%;} .w-11 {width: 11%;}
.w-12 {width: 12%;} .w-13 {width: 13%;} .w-14 {width: 14%;} .w-15 {width: 15%;}
.w-16 {width: 16%;} .w-17 {width: 17%;} .w-18 {width: 18%;} .w-19 {width: 19%;}
.w-20 {width: 20%;} .w-21 {width: 21%;} .w-22 {width: 22%;} .w-23 {width: 23%;}
.w-24 {width: 24%;} .w-25 {width: 25%;} .w-26 {width: 26%;} .w-27 {width: 27%;}
.w-28 {width: 28%;} .w-29 {width: 29%;} .w-30 {width: 30%;} .w-31 {width: 31%;}
.w-32 {width: 32%;} .w-33 {width: 33%;} .w-34 {width: 34%;} .w-35 {width: 35%;}
.w-36 {width: 36%;} .w-37 {width: 37%;} .w-38 {width: 38%;} .w-39 {width: 39%;}
.w-40 {width: 40%;} .w-41 {width: 41%;} .w-42 {width: 42%;} .w-43 {width: 43%;}
.w-44 {width: 44%;} .w-45 {width: 45%;} .w-46 {width: 46%;} .w-47 {width: 47%;}
.w-48 {width: 48%;} .w-49 {width: 49%;} .w-50 {width: 50%;} .w-51 {width: 51%;}
.w-52 {width: 52%;} .w-53 {width: 53%;} .w-54 {width: 54%;} .w-55 {width: 55%;}
.w-56 {width: 56%;} .w-57 {width: 57%;} .w-58 {width: 58%;} .w-59 {width: 59%;}
.w-60 {width: 60%;} .w-61 {width: 61%;} .w-62 {width: 62%;} .w-63 {width: 63%;}
.w-64 {width: 64%;} .w-65 {width: 65%;} .w-66 {width: 66%;} .w-67 {width: 67%;}
.w-68 {width: 68%;} .w-69 {width: 69%;} .w-70 {width: 70%;} .w-71 {width: 71%;}
.w-72 {width: 72%;} .w-73 {width: 73%;} .w-74 {width: 74%;} .w-75 {width: 75%;}
.w-76 {width: 76%;} .w-77 {width: 77%;} .w-78 {width: 78%;} .w-79 {width: 79%;}
.w-80 {width: 80%;} .w-81 {width: 81%;} .w-82 {width: 82%;} .w-83 {width: 83%;}
.w-84 {width: 84%;} .w-85 {width: 85%;} .w-86 {width: 86%;} .w-87 {width: 87%;}
.w-88 {width: 88%;} .w-89 {width: 89%;} .w-90 {width: 90%;} .w-91 {width: 91%;}
.w-92 {width: 92%;} .w-93 {width: 93%;} .w-94 {width: 94%;} .w-95 {width: 95%;}
.w-96 {width: 96%;} .w-97 {width: 97%;} .w-98 {width: 98%;} .w-99 {width: 99%;}
.w-100 {width: 100%;}
/*
* Clients information
*/
.client-icon {
display: inline-block;
width: 100%;
height: auto;
max-height: 1.25rem;
max-width: 1.25rem;
margin: auto;
}
#clients .btn {
width: 9rem;
margin-right: 1rem;
background-color: #121212; /* Dark button background */
color: #e0e0e0; /* Light text */
border: 1px solid #444; /* Dark border */
}
#clients th, #clients td {
line-height: 3rem;
color: #e0e0e0; /* Light text for tables */
}
/* Icon when collapsible content is shown */
.collapsible-button .fa {
margin-left: 0.3125rem;
color: #e0e0e0; /* Light icon color */
}
.collapsible-button .fa-chevron-right:before,
.no-js .collapsible-button.collapsed .fa-chevron-right:before {
content: "\f078"; /* FontAwesome icon for collapsed state */
}
.collapsible-button.collapsed .fa-chevron-right:before {
content: "\f054"; /* FontAwesome icon for expanded state */
}
/* No-JS fallbacks for collapsible content */
.no-js .collapse {
display: block;
}
.manual-page {
text-align: right;
color: #e0e0e0; /* Light text for manual page */
}
/*
* Top navigation
*/
.main-header {
background: #1e1e1e; /* Dark background for header */
box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.25);
border: none;
}
.main-header > .container > nav.navbar {
padding: 0;
}
.main-header .navbar-nav > li > a,
.main-header .navbar-toggler {
color: #FFF;
}
.main-header .nav-item .nav-link {
padding: 0.9375rem !important;
height: 3.25rem;
color: #e0e0e0; /* Light text for nav items */
}
.main-header .nav-link,
.main-header .nav-link:hover {
color: #FFF;
}
.main-header .navbar-toggler {
border: 1px solid #444; /* Dark border for toggler */
margin: 0.6875rem 0;
}
@media screen and (max-width: 767px) {
.main-header .navbar-nav .dropdown-menu {
background-color: #1e1e1e; /* Dark background for dropdown */
}
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav li > form > input,
.main-header .navbar-nav li > form > input:focus,
.main-header .navbar-nav li > form > input:hover,
.main-header .navbar-nav .show a,
.main-header .navbar-nav .show a:hover,
.main-header .navbar-nav .show a:focus {
color: #FFF;
background: transparent;
}
.main-header .navbar-nav .nav-item:last-of-type .dropdown-menu {
margin-bottom: 1.25rem;
}
}
/* Cards in Apps, System and Help pages */
.index-page .card-list {
/* Home page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.apps-page .card-list {
/* Apps page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.system-page .card-list {
/* System page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.card-section-title, .system-section-title {
display: flex;
font-weight: 800;
font-size: 1.25rem;
margin: 1.25rem 0;
border-bottom: var(--neutral-dark-color) solid 2px;
color: #e0e0e0; /* Light text for section titles */
}
a.menu_link {
text-decoration: none;
color: #e0e0e0; /* Light link color */
}
a.menu_link:hover, a.menu_link:active {
text-decoration: none;
color: #fff; /* Hover effect for links */
}
a.menu_link_active {
border-bottom: white 3px solid;
}
.card {
display: block;
line-height: 1.42857143;
text-align: center;
width: 10rem;
padding: 1rem;
border: none;
border-radius: 0.5rem;
background: #121212; /* Dark card background */
color: #e0e0e0; /* Light text */
transition: border .2s ease-in-out;
}
.card:hover {
background: #444; /* Slightly darker card on hover */
}
.card .nav-link {
display: block;
padding: 0rem;
color: #e0e0e0; /* Light text for links */
}
.card-title {
font-size: 1.25rem;
margin-bottom: 0;
color: #fff; /* Light color for card title */
}
.card-description {
font-weight: 400;
color: #b0b0b0; /* Lighter description color */
font-size: 0.875rem;
}
.card-icon span,
.card-icon img {
width: 6.25rem;
height: 6.25rem;
font-size: 5rem;
margin: 0.5rem 0;
}
/* System page - special card styling */
.system-page .card {
text-align: left;
width: 20.625rem;
padding: 0;
background: #121212; /* Dark background */
}
.system-page .card .nav-link {
display: grid;
grid-template-columns: 2.1875rem auto;
grid-column-gap: 0.625rem;
padding: 0.8125rem;
}
.system-page .card-title {
font-size: 1.125rem;
font-style: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
grid-row: 1;
grid-column: 2;
padding: 0.375rem 0 0;
color: #fff; /* Light color for card title */
}
.system-page .card-icon {
grid-row: 1 / 3;
grid-column: 1;
}
.system-page .card-icon span {
height: auto;
font-size: 2.1875rem;
color: #e0e0e0; /* Light color for icons */
}
.system-page .card-description {
grid-row: 2;
grid-column: 2;
padding: 0;
min-height: 1.125rem;
color: #b0b0b0; /* Lighter description color */
}
/* Button table - Tables with a list of actions as buttons on top */
.index-page .card-list:before,
.apps-page .card-list:before,
.system-page .system-section-title:first-child:before {
position: relative;
width: 25rem;
height: 25rem;
margin-left: -25rem;
margin-bottom: -25rem;
left: 18.75rem;
top: -1.25rem;
content: " ";
background-size: 100%;
background-repeat: no-repeat;
z-index: -1;
}
.names-table {
table-layout: fixed;
overflow-wrap: break-word;
color: #e0e0e0; /* Light text for table content */
}
.names-domain-column {
width: 50%;
}
/*
* First setup pages
*/
.firstboot-spinner {
text-align: center;
}
.firstboot-spinner span.fa {
float: none;
margin: auto;
}
.next-steps {
list-style: none;
margin-top: 1.5rem;
padding: 0;
}
.next-steps li {
display: flex;
align-items: center;
padding: 0.75rem 0;
color: #e0e0e0; /* Light text for steps */
}
.next-steps .app-icon {
font-size: 3rem;
margin-right: 1rem;
width: 3rem;
text-align: center;
}
.next-steps form {
display: inline;
}
/*
* Toggle button
*/
.toggle-button {
border-radius: 0.8125rem;
width: 3.125rem;
height: 1.625rem;
background: #444; /* Dark toggle button */
position: relative;
}
.toggle-button::before {
content: '';
display: block;
height: 1.5rem;
width: 1.5rem;
border-radius: 100%;
background: #fff;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
}
.toggle-button--toggled {
background: var(--freedombox-blue-color);
}
.toggle-button--toggled::before {
left: 100%;
transform: translateY(-50%) translateX(-100%);
}
.toggle-button.running-status-button::before {
top: 0;
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
animation: spin 1s linear infinite;
}
.toggle-button.toggle-button--toggled.running-status-button::before {
margin-left: -1.5rem;
}
/*
* Form button with loading progress.
*/
.running-status-button-before {
display: inline-block;
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
border-radius: 50%;
width: 1rem;
height: 1rem;
animation: spin 1s linear infinite;
margin-left: 0.625rem;
margin-bottom: -0.25rem;
margin-right: -1.625rem;
}
.running-status-button:disabled {
cursor: default;
}
input[type='submit'].running-status-button {
padding-left: 2rem;
}
/*
* Select all checkbox for multiple checkboxes field.
*/
.select-all-label {
border: 1px solid var(--neutral-light-color); /* Lighter border for dark mode */
background-color: var(--neutral-dark-color); /* Dark background for checkbox label */
border-radius: 0.25rem;
padding: 0.5rem 1rem 0.25rem;
margin-left: -1rem;
color: #e0e0e0; /* Light text color for better contrast */
}
/*
* Button toolbar
*/
.btn-toolbar {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.btn-toolbar > :not(:last-child):not(.running-status-button-before) {
margin-right: 0.5rem;
}
.btn-toolbar .button-secondary:first-child,
.btn-toolbar .form:not(.button-secondary) + .button-secondary,
.btn-toolbar .form:not(.button-secondary) + .running-status-button-before,
.btn-toolbar .btn:not(.button-secondary) + .button-secondary,
.btn-toolbar .btn:not(.button-secondary) + .running-status-button-before {
margin-left: auto;
}
.btn-toolbar > .running-status-button-before {
margin-bottom: 0;
align-self: center;
}
/*
* App's header
*/
.app-header {
display: grid;
grid-template-columns: 0.2fr 1fr;
column-gap: 1.25rem;
margin-bottom: 1.25rem;
background-color: var(--neutral-dark-color); /* Dark background for the header */
color: #e0e0e0; /* Light text color */
}
.app-header > img {
margin: 1.5625rem auto 0;
width: 100%;
}
.app-description {
grid-column: 2;
}
.app-header-single-column {
grid-template-columns: 1fr;
}
.app-header-single-column .app-description {
grid-column: 1;
}
.app-titles {
display: flex;
flex-flow: row;
justify-content: space-between;
}
.app-titles h3 {
margin-top: -0.3125rem;
margin-bottom: 1rem;
font-size: 1rem;
font-weight: normal;
font-style: italic;
color: #e0e0e0; /* Light text color for titles */
}
.form-app-enable-disable {
margin: auto 0;
}
@media screen and (max-width: 767px) {
.app-header {
display: flex;
flex-flow: column;
}
.app-header img {
width: 9.375rem;
height: 9.375rem;
margin-top: 0;
}
.app-titles {
display: flex;
flex-flow: column-reverse;
justify-content: center;
height: auto;
}
.app-titles h2 {
margin: 0 0 0.9375rem 0;
}
.app-titles .form-app-enable-disable {
margin: 1.875rem auto;
}
.app-titles .toggle-button {
transform: scale(1.2);
}
}
/*
* Help
*/
/* Manual - anchor is below navbar */
*[id^='idm']:before {
display: block;
content: " ";
margin-top: -3.75rem;
height: 3.75rem;
visibility: hidden;
}
.help-about-links h2 {
font-size: 1rem;
font-weight: bold;
color: #e0e0e0; /* Light color for help links */
}
.help-about-links ul {
list-style: none;
padding: 0;
}
/*
* Notifications
*/
.notifications {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}
.notifications .dropdown-menu {
width: 100%;
padding: 0;
float: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
background-clip: border-box;
background-color: var(--neutral-dark-color); /* Dark background for dropdown */
}
.notification {
padding: 0.625rem 0.9375rem;
border-left: 0.3125rem solid;
background-color: var(--neutral-dark-color); /* Dark background for notifications */
color: #e0e0e0; /* Light text for notifications */
}
.notification:not(:first-child) {
border-top: 1px solid #444; /* Darker border between notifications */
}
.notification-title {
font-weight: bold;
color: #fff; /* Light title color */
}
img.notification-icon {
display: inline-block;
width: 0.875rem;
height: 0.875rem;
margin-top: -0.25rem;
}
.notifications-dropdown .badge {
padding: 0.125rem 0.3125rem;
margin-left: -0.75rem;
color: #fff;
}
.badge-exception, .badge-error {
background-color: var(--error-color);
}
.badge-warning {
background-color: var(--warning-color);
}
.badge-info, .badge-debug {
background-color: var(--info-color);
}
.notification-exception, .notification-error {
border-left-color: var(--error-color);
}
.notification-warning {
border-left-color: var(--warning-color);
}
.notification-info, .notification-debug {
border-left-color: var(--info-color)
}
.warning {
color: var(--warning-color);
}
.processing {
color: var(--progress-color);
}
.normal {
color: var(--neutral-dark-color);
}
.notifications-dropdown {
display: none;
}
.collapse .notifications-dropdown {
display: block;
}
@media screen and (max-width: 767px) {
.notifications-dropdown {
display: block;
}
.collapse .notifications-dropdown {
display: none;
}
}
/* Accordion */
.accordion {
margin-bottom: 1.25rem;
background-color: var(--neutral-dark-color); /* Dark background for accordion */
}
.accordion .card-header h4 {
margin: 0;
color: #e0e0e0; /* Light color for accordion header */
}
Cheers.
Edit: The “black” or “dark colored” icons need some automation to transfom into white… Maybe next step is to look into these.
Edit2: Replacing #121212 with #242424 actually half solves the problem with the black icons.
OK… sorry if any confusion, but made more tweaks for a somewhat more comfortable dark mode.
Sharing code below (edit /usr/share/plinth/static/theme/css/main.css until @sunil 's request is merged):
/*
# SPDX-License-Identifier: AGPL-3.0-or-later
*/
:root {
--background-color: #303030; /* Dark grey background */
--neutral-light-color: #333333; /* Darker grey */
--neutral-dark-color: #242424; /* Even darker grey */
--info-color: #5bc0de; /* Pale blue, almost turquoise (unchanged, as it's still visible on dark) */
--freedombox-blue-color: #4989D4; /* Blue (unchanged, it contrasts well in dark) */
--progress-color: #3498db; /* Blue (unchanged, it contrasts well in dark) */
--error-color: #d9534f; /* Red (unchanged, it contrasts well in dark) */
--warning-color: #ec971f; /* Orange (unchanged, it contrasts well in dark) */
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Italic.woff2') format('woff2');
font-style: italic;
font-weight: 400;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Regular.woff2') format('woff2');
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Semibold.woff2') format('woff2');
font-style: normal;
font-weight: 600;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-SemiboldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 600;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Bold.woff2') format('woff2');
font-style: normal;
font-weight: 700;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-BoldItalic.woff2') format('woff2');
font-style: italic;
font-weight: 700;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-Heavy.woff2') format('woff2');
font-style: normal;
font-weight: 800;
}
@font-face {
font-family: 'Lato';
src: url('../lato/Lato-HeavyItalic.woff2') format('woff2');
font-style: italic;
font-weight: 800;
}
/*
* Bootstrap override
*/
/* Heading margins from bootstrap 3 */
h1, h2, h3, h4, h5, h6 {
margin-top: 1.25rem;
margin-bottom: 0.625rem;
color: #ffffff; /* Light text color for headings */
}
/* Warning colors from bootstrap 3 */
.badge-warning,
.bg-warning,
.btn-warning {
background-color: #ec971f !important; /* Orange for dark mode */
color: #fff !important;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:disabled,
.btn-warning.disabled,
.btn-warning[disabled] {
background-color: var(--warning-color) !important;
color: #fff !important;
}
.btn[disabled] {
cursor: not-allowed !important;
opacity: .65;
box-shadow: none;
}
/* Primary color changed in bootstrap 4 */
.btn-primary {
background-color: #4989D4; /* Blue for dark mode */
border-color: #357ab7;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[disabled] {
background-color: #286090;
border-color: #204d74;
}
/* Default style removed in bootstrap 4 */
.btn-default {
color: #f5f5f5; /* Light grey text for dark mode */
background-color: #333333; /* Dark background for default button */
border-color: #555555; /* Slightly lighter dark border */
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: #f5f5f5; /* Light grey text on hover */
background-color: #444444; /* Darker background on hover */
border-color: #666666; /* Lighter dark border on hover */
}
/* Help block removed from bootstrap 4, needs updated django-bootstrap-form */
.help-block {
display: block;
margin-top: 0.3125rem;
margin-bottom: 0.625rem;
color: #b0b0b0; /* Lighter grey text for help block */
}
/* form-horizontal removed in bootstrap, needs updated django-bootstrap-form */
.form-horizontal > .form-group {
display: flex;
flex-wrap: wrap;
margin-right: -0.9375rem;
margin-left: -0.9375rem;
}
.radio .help-block {
padding-left: 1.2rem;
color: #b0b0b0; /* Lighter grey text for radio help block */
}
.checkbox .help-block {
padding-left: 1.4rem;
color: #b0b0b0; /* Lighter grey text for checkbox help block */
}
/* Form error display was changed in bootstrap 4, provide compatibility */
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
color: #f5b7b1; /* Lighter red for error message */
}
.has-error .form-control {
border-color: #f5b7b1; /* Lighter red border for error state */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
/*
* Basic styling
*/
body {
padding-top: 6rem;
position: relative;
font-family: Lato, sans-serif;
background-color: #242424; /* Dark background for body */
color: #e0e0e0; /* Light text for dark mode */
}
.multiple-checkbox li {
list-style-type: none;
}
.multiple-checkbox > div {
padding-left: 40px;
}
.navbar .fa:not(.fa-bars) {
margin-right: 0.25rem;
color: #e0e0e0; /* Icon color for dark mode */
}
.no-brand .navbar-brand {
display: none;
}
.navbar-brand .fa {
float: left;
margin-top: -0.4375rem;
padding: 0.5rem;
}
.navbar-brand {
height: 3.3125rem;
margin-right: -1.25rem;
color: #e0e0e0; /* Light text for navbar */
}
@media (max-width: 767px) {
.navbar-brand {
margin-right: auto;
}
}
.nav-tabs {
margin-bottom: 1.25rem;
border-bottom: 2px solid #242424; /* Darker border for tabs in dark mode */
}
.dropdown-toggle::after {
vertical-align: middle;
}
.running-status-parent {
display: inline-block;
}
.running-status {
border-radius: 50%;
border: 1px solid black;
width: 0.5rem;
height: 0.5rem;
display: inline-block;
}
.running-status.loading {
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
border-radius: 50%;
width: 1rem;
height: 1rem;
display: inline-block;
animation: spin 1s linear infinite;
}
.nav-link:hover, .nav-link:visited, .nav-link:link, .nav-link:active {
text-decoration: none;
color: #f5f5f5; /* Light color on hover for nav-links */
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hide log out button if user dropdown is available */
.js #logout-nojs {
display: none;
}
/* Hide the dropdown icon when javascript is not available */
.no-js .dropdown-toggle:after {
display: none;
}
.diagnostics-results .diagnostics-result {
width: 3.75rem;
text-align: center;
}
.centered-column {
text-align: center;
}
html {
position: relative;
}
body,
html {
height: 100%;
background-color: #242424; /* Dark background for the entire page */
}
#wrapper {
position: relative;
}
.container {
max-width: 1320px;
}
.content-container {
max-width: 1000px;
margin-bottom: 1.25rem;
}
/* Tag Input Container */
.tag-input {
display: flex;
align-items: center;
border: 1px solid #555;
border-radius: .25rem;
padding: .375rem .75rem;
background-color: #242424; /* Dark background for tag input */
margin-bottom: 2rem;
color: #e0e0e0; /* Light text for tag input */
}
/* Remove tag button */
.tag-badge .remove-tag {
background-color: transparent; /* Match the tag's background color */
border: none;
cursor: pointer;
}
/* Adjust input field width */
.tag-input input[type="search"] {
flex-grow: 1;
border: none;
outline: none;
box-shadow: none;
width: auto;
min-width: 3rem;
color: #e0e0e0; /* Light text inside the tag input field */
}
/* dropdown-menu for tags is a scrollable list */
.tag-input .dropdown-menu {
bottom: calc(-100% - 10px);
overflow-y: auto;
}
@media (min-width: 768px) {
.content-container {
padding: 1.5rem 3rem 3rem;
}
}
footer {
text-align: center;
padding-top: 20rem;
color: #b0b0b0; /* Light grey text for footer */
}
/*
* Bootstrap extensions
*/
/* Use .list-group-two-column when there are some items aligned to right */
.list-group-two-column .list-group-item {
display: flex;
align-items: center;
}
.list-group-two-column .list-group-item > :not(:last-child) {
margin-right: 0.25rem;
}
.list-group-two-column .list-group-item > .badge.secondary {
font-size: 1rem;
font-weight: normal;
}
.list-group-two-column .list-group-item > .secondary {
margin-left: auto;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
}
.list-group-two-column .list-group-item > .secondary ~ .secondary {
margin-left: 0;
}
/* Hack to avoid inline styling on bootstrap progress bars */
.w-0 {width: 0%;} .w-1 {width: 1%;} .w-2 {width: 2%;} .w-3 {width: 3%;}
.w-4 {width: 4%;} .w-5 {width: 5%;} .w-6 {width: 6%;} .w-7 {width: 7%;}
.w-8 {width: 8%;} .w-9 {width: 9%;} .w-10 {width: 10%;} .w-11 {width: 11%;}
.w-12 {width: 12%;} .w-13 {width: 13%;} .w-14 {width: 14%;} .w-15 {width: 15%;}
.w-16 {width: 16%;} .w-17 {width: 17%;} .w-18 {width: 18%;} .w-19 {width: 19%;}
.w-20 {width: 20%;} .w-21 {width: 21%;} .w-22 {width: 22%;} .w-23 {width: 23%;}
.w-24 {width: 24%;} .w-25 {width: 25%;} .w-26 {width: 26%;} .w-27 {width: 27%;}
.w-28 {width: 28%;} .w-29 {width: 29%;} .w-30 {width: 30%;} .w-31 {width: 31%;}
.w-32 {width: 32%;} .w-33 {width: 33%;} .w-34 {width: 34%;} .w-35 {width: 35%;}
.w-36 {width: 36%;} .w-37 {width: 37%;} .w-38 {width: 38%;} .w-39 {width: 39%;}
.w-40 {width: 40%;} .w-41 {width: 41%;} .w-42 {width: 42%;} .w-43 {width: 43%;}
.w-44 {width: 44%;} .w-45 {width: 45%;} .w-46 {width: 46%;} .w-47 {width: 47%;}
.w-48 {width: 48%;} .w-49 {width: 49%;} .w-50 {width: 50%;} .w-51 {width: 51%;}
.w-52 {width: 52%;} .w-53 {width: 53%;} .w-54 {width: 54%;} .w-55 {width: 55%;}
.w-56 {width: 56%;} .w-57 {width: 57%;} .w-58 {width: 58%;} .w-59 {width: 59%;}
.w-60 {width: 60%;} .w-61 {width: 61%;} .w-62 {width: 62%;} .w-63 {width: 63%;}
.w-64 {width: 64%;} .w-65 {width: 65%;} .w-66 {width: 66%;} .w-67 {width: 67%;}
.w-68 {width: 68%;} .w-69 {width: 69%;} .w-70 {width: 70%;} .w-71 {width: 71%;}
.w-72 {width: 72%;} .w-73 {width: 73%;} .w-74 {width: 74%;} .w-75 {width: 75%;}
.w-76 {width: 76%;} .w-77 {width: 77%;} .w-78 {width: 78%;} .w-79 {width: 79%;}
.w-80 {width: 80%;} .w-81 {width: 81%;} .w-82 {width: 82%;} .w-83 {width: 83%;}
.w-84 {width: 84%;} .w-85 {width: 85%;} .w-86 {width: 86%;} .w-87 {width: 87%;}
.w-88 {width: 88%;} .w-89 {width: 89%;} .w-90 {width: 90%;} .w-91 {width: 91%;}
.w-92 {width: 92%;} .w-93 {width: 93%;} .w-94 {width: 94%;} .w-95 {width: 95%;}
.w-96 {width: 96%;} .w-97 {width: 97%;} .w-98 {width: 98%;} .w-99 {width: 99%;}
.w-100 {width: 100%;}
/*
* Clients information
*/
.client-icon {
display: inline-block;
width: 100%;
height: auto;
max-height: 1.25rem;
max-width: 1.25rem;
margin: auto;
}
#clients .btn {
width: 9rem;
margin-right: 1rem;
background-color: #242424; /* Dark button background */
color: #e0e0e0; /* Light text */
border: 1px solid #444; /* Dark border */
}
#clients th, #clients td {
line-height: 3rem;
color: #e0e0e0; /* Light text for tables */
}
/* Icon when collapsible content is shown */
.collapsible-button .fa {
margin-left: 0.3125rem;
color: #e0e0e0; /* Light icon color */
}
.collapsible-button .fa-chevron-right:before,
.no-js .collapsible-button.collapsed .fa-chevron-right:before {
content: "\f078"; /* FontAwesome icon for collapsed state */
}
.collapsible-button.collapsed .fa-chevron-right:before {
content: "\f054"; /* FontAwesome icon for expanded state */
}
/* No-JS fallbacks for collapsible content */
.no-js .collapse {
display: block;
}
.manual-page {
text-align: right;
color: #e0e0e0; /* Light text for manual page */
}
/*
* Top navigation
*/
.main-header {
background: #303030; /* Dark background for header */
box-shadow: 0 0.25rem 0.375rem 0 rgba(0, 0, 0, 0.25);
border: none;
}
.main-header > .container > nav.navbar {
padding: 0;
}
.main-header .navbar-nav > li > a,
.main-header .navbar-toggler {
color: #FFF;
}
.main-header .nav-item .nav-link {
padding: 0.9375rem !important;
height: 3.25rem;
color: #e0e0e0; /* Light text for nav items */
}
.main-header .nav-link,
.main-header .nav-link:hover {
color: #FFF;
}
.main-header .navbar-toggler {
border: 1px solid #444; /* Dark border for toggler */
margin: 0.6875rem 0;
}
@media screen and (max-width: 767px) {
.main-header .navbar-nav .dropdown-menu {
background-color: #303030; /* Dark background for dropdown */
}
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav li > form > input,
.main-header .navbar-nav li > form > input:focus,
.main-header .navbar-nav li > form > input:hover,
.main-header .navbar-nav .show a,
.main-header .navbar-nav .show a:hover,
.main-header .navbar-nav .show a:focus {
color: #FFF;
background: transparent;
}
.main-header .navbar-nav .nav-item:last-of-type .dropdown-menu {
margin-bottom: 1.25rem;
}
}
/* Cards in Apps, System and Help pages */
.index-page .card-list {
/* Home page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.apps-page .card-list {
/* Apps page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.system-page .card-list {
/* System page specific card styling goes here */
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.card-section-title, .system-section-title {
display: flex;
font-weight: 800;
font-size: 1.25rem;
margin: 1.25rem 0;
border-bottom: #ffffff solid 1px;
color: #e0e0e0; /* Light text for section titles */
}
a.menu_link {
text-decoration: none;
color: #e0e0e0; /* Light link color */
}
a.menu_link:hover, a.menu_link:active {
text-decoration: none;
color: #fff; /* Hover effect for links */
}
a.menu_link_active {
border-bottom: white 3px solid;
}
.card {
display: block;
line-height: 1.42857143;
text-align: center;
width: 10rem;
padding: 1rem;
border: none;
border-radius: 0.5rem;
background: #242424; /* Dark card background */
color: #e0e0e0; /* Light text */
transition: border .2s ease-in-out;
}
.card:hover {
background: #444; /* Slightly darker card on hover */
}
.card .nav-link {
display: block;
padding: 0rem;
color: #e0e0e0; /* Light text for links */
}
.card-title {
font-size: 1.25rem;
margin-bottom: 0;
color: #fff; /* Light color for card title */
}
.card-description {
font-weight: 400;
color: #b0b0b0; /* Lighter description color */
font-size: 0.875rem;
}
.card-icon span,
.card-icon img {
width: 6.25rem;
height: 6.25rem;
font-size: 5rem;
margin: 0.5rem 0;
}
/* System page - special card styling */
.system-page .card {
text-align: left;
width: 20.625rem;
padding: 0;
background: #242424; /* Dark background */
}
.system-page .card .nav-link {
display: grid;
grid-template-columns: 2.1875rem auto;
grid-column-gap: 0.625rem;
padding: 0.8125rem;
}
.system-page .card-title {
font-size: 1.125rem;
font-style: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
grid-row: 1;
grid-column: 2;
padding: 0.375rem 0 0;
color: #fff; /* Light color for card title */
}
.system-page .card-icon {
grid-row: 1 / 3;
grid-column: 1;
}
.system-page .card-icon span {
height: auto;
font-size: 2.1875rem;
color: #e0e0e0; /* Light color for icons */
}
.system-page .card-description {
grid-row: 2;
grid-column: 2;
padding: 0;
min-height: 1.125rem;
color: #b0b0b0; /* Lighter description color */
}
/* Button table - Tables with a list of actions as buttons on top */
.index-page .card-list:before,
.apps-page .card-list:before,
.system-page .system-section-title:first-child:before {
position: relative;
width: 25rem;
height: 25rem;
margin-left: -25rem;
margin-bottom: -25rem;
left: 18.75rem;
top: -1.25rem;
content: " ";
background-size: 100%;
background-repeat: no-repeat;
z-index: -1;
}
.names-table {
table-layout: fixed;
overflow-wrap: break-word;
color: #e0e0e0; /* Light text for table content */
}
.names-domain-column {
width: 50%;
}
/*
* First setup pages
*/
.firstboot-spinner {
text-align: center;
}
.firstboot-spinner span.fa {
float: none;
margin: auto;
}
.next-steps {
list-style: none;
margin-top: 1.5rem;
padding: 0;
}
.next-steps li {
display: flex;
align-items: center;
padding: 0.75rem 0;
color: #e0e0e0; /* Light text for steps */
}
.next-steps .app-icon {
font-size: 3rem;
margin-right: 1rem;
width: 3rem;
text-align: center;
}
.next-steps form {
display: inline;
}
/*
* Toggle button
*/
.toggle-button {
border-radius: 0.8125rem;
width: 3.125rem;
height: 1.625rem;
background: #444; /* Dark toggle button */
position: relative;
}
.toggle-button::before {
content: '';
display: block;
height: 1.5rem;
width: 1.5rem;
border-radius: 100%;
background: #fff;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
}
.toggle-button--toggled {
background: var(--freedombox-blue-color);
}
.toggle-button--toggled::before {
left: 100%;
transform: translateY(-50%) translateX(-100%);
}
.toggle-button.running-status-button::before {
top: 0;
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
animation: spin 1s linear infinite;
}
.toggle-button.toggle-button--toggled.running-status-button::before {
margin-left: -1.5rem;
}
/*
* Form button with loading progress.
*/
.running-status-button-before {
display: inline-block;
border: 0.25rem solid var(--neutral-light-color);
border-top: 0.25rem solid var(--progress-color);
border-radius: 50%;
width: 1rem;
height: 1rem;
animation: spin 1s linear infinite;
margin-left: 0.625rem;
margin-bottom: -0.25rem;
margin-right: -1.625rem;
}
.running-status-button:disabled {
cursor: default;
}
input[type='submit'].running-status-button {
padding-left: 2rem;
}
/*
* Select all checkbox for multiple checkboxes field.
*/
.select-all-label {
border: 1px solid var(--neutral-light-color); /* Lighter border for dark mode */
background-color: var(--neutral-dark-color); /* Dark background for checkbox label */
border-radius: 0.25rem;
padding: 0.5rem 1rem 0.25rem;
margin-left: -1rem;
color: #e0e0e0; /* Light text color for better contrast */
}
/*
* Button toolbar
*/
.btn-toolbar {
margin-top: 0.625rem;
margin-bottom: 0.625rem;
}
.btn-toolbar > :not(:last-child):not(.running-status-button-before) {
margin-right: 0.5rem;
}
.btn-toolbar .button-secondary:first-child,
.btn-toolbar .form:not(.button-secondary) + .button-secondary,
.btn-toolbar .form:not(.button-secondary) + .running-status-button-before,
.btn-toolbar .btn:not(.button-secondary) + .button-secondary,
.btn-toolbar .btn:not(.button-secondary) + .running-status-button-before {
margin-left: auto;
}
.btn-toolbar > .running-status-button-before {
margin-bottom: 0;
align-self: center;
}
/*
* App's header
*/
.app-header {
display: grid;
grid-template-columns: 0.2fr 1fr;
column-gap: 1.25rem;
margin-bottom: 1.25rem;
background-color: var(--neutral-dark-color); /* Dark background for the header */
color: #e0e0e0; /* Light text color */
}
.app-header > img {
margin: 1.5625rem auto 0;
width: 100%;
}
.app-description {
grid-column: 2;
}
.app-header-single-column {
grid-template-columns: 1fr;
}
.app-header-single-column .app-description {
grid-column: 1;
}
.app-titles {
display: flex;
flex-flow: row;
justify-content: space-between;
}
.app-titles h3 {
margin-top: -0.3125rem;
margin-bottom: 1rem;
font-size: 1rem;
font-weight: normal;
font-style: italic;
color: #e0e0e0; /* Light text color for titles */
}
.form-app-enable-disable {
margin: auto 0;
}
@media screen and (max-width: 767px) {
.app-header {
display: flex;
flex-flow: column;
}
.app-header img {
width: 9.375rem;
height: 9.375rem;
margin-top: 0;
}
.app-titles {
display: flex;
flex-flow: column-reverse;
justify-content: center;
height: auto;
}
.app-titles h2 {
margin: 0 0 0.9375rem 0;
}
.app-titles .form-app-enable-disable {
margin: 1.875rem auto;
}
.app-titles .toggle-button {
transform: scale(1.2);
}
}
/*
* Help
*/
/* Manual - anchor is below navbar */
*[id^='idm']:before {
display: block;
content: " ";
margin-top: -3.75rem;
height: 3.75rem;
visibility: hidden;
}
.help-about-links h2 {
font-size: 1rem;
font-weight: bold;
color: #e0e0e0; /* Light color for help links */
}
.help-about-links ul {
list-style: none;
padding: 0;
}
/*
* Notifications
*/
.notifications {
margin-left: -0.9375rem;
margin-right: -0.9375rem;
}
.notifications .dropdown-menu {
width: 100%;
padding: 0;
float: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
background-clip: border-box;
background-color: var(--neutral-dark-color); /* Dark background for dropdown */
}
.notification {
padding: 0.625rem 0.9375rem;
border-left: 0.3125rem solid;
background-color: var(--neutral-dark-color); /* Dark background for notifications */
color: #e0e0e0; /* Light text for notifications */
}
.notification:not(:first-child) {
border-top: 1px solid #444; /* Darker border between notifications */
}
.notification-title {
font-weight: bold;
color: #fff; /* Light title color */
}
img.notification-icon {
display: inline-block;
width: 0.875rem;
height: 0.875rem;
margin-top: -0.25rem;
}
.notifications-dropdown .badge {
padding: 0.125rem 0.3125rem;
margin-left: -0.75rem;
color: #fff;
}
.badge-exception, .badge-error {
background-color: var(--error-color);
}
.badge-warning {
background-color: var(--warning-color);
}
.badge-info, .badge-debug {
background-color: var(--info-color);
}
.notification-exception, .notification-error {
border-left-color: var(--error-color);
}
.notification-warning {
border-left-color: var(--warning-color);
}
.notification-info, .notification-debug {
border-left-color: var(--info-color)
}
.warning {
color: var(--warning-color);
}
.processing {
color: var(--progress-color);
}
.normal {
color: var(--neutral-dark-color);
}
.notifications-dropdown {
display: none;
}
.collapse .notifications-dropdown {
display: block;
}
@media screen and (max-width: 767px) {
.notifications-dropdown {
display: block;
}
.collapse .notifications-dropdown {
display: none;
}
}
/* Accordion */
.accordion {
margin-bottom: 1.25rem;
background-color: var(--neutral-dark-color); /* Dark background for accordion */
}
.accordion .card-header h4 {
margin: 0;
color: #e0e0e0; /* Light color for accordion header */
}
Now, who would be willing to place a “toggle” button for dark mode : )
Thanks.
@Ged296123 , thank you. For complete dark mode support, we need to update colors for buttons, alerts, tables, and many more components. Also we need proper colors for hover and focus status.
I have been working on migrating to Bootstrap 5 (it was needed anyway). After migrating to Bootstrap 5, the CSS will change quite a bit. But good news is that Bootstrap 5.3 (in testing) has built in support for dark mode. Bootstrap 5.2 in stable does not have support for it but we can easily provide support for it compared to Bootstrap 4.
Looking forward to it!