mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-01-21 07:55:00 +00:00
1a01f672d6
- Custom CSS variables were declared with Bootstrap 4 since it did not use CSS variables itself. In Boostrap 5, CSS variables are available. Use them to eliminate custom color definitions. This means that when Bootstrap colors are changed, custom colored elements will not look different. - Use color utilities from Bootstratp instead of .processing, .warning, and .normal. - Collect more repeated colors into variables. This will make themeing easier. - Using Bootstrap variables also makes implement dark mode easier. Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Veiko Aasa <veiko17@disroot.org>
1024 lines
22 KiB
CSS
1024 lines
22 KiB
CSS
/*
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
*/
|
|
|
|
:root {
|
|
--neutral-light-color: #f5f5f5; /* Light grey */
|
|
--freedombox-blue-color: #4989D4; /* Blue */
|
|
--progress-color: #3498db; /* Blue */
|
|
--freedombox-form-disabled-bg-color: #e9ecef; /* Grey */
|
|
--freedombox-navbar-color: white;
|
|
}
|
|
|
|
@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
|
|
*/
|
|
section:not(:first-child),
|
|
h1:not(:first-child),
|
|
h2:not(:first-child),
|
|
h3:not(:first-child),
|
|
h4:not(:first-child),
|
|
h5:not(:first-child),
|
|
h6:not(:first-child) {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.btn[disabled] {
|
|
cursor: not-allowed !important;
|
|
opacity: .65;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Primary color changed in bootstrap 4, we want colors closer to FreedomBox
|
|
colors */
|
|
.btn-primary {
|
|
--bs-btn-bg: #337ab7; /* Originally: #0d6efd */
|
|
--bs-btn-border-color: #2e6da4; /* Originally: #0d6efd */
|
|
--bs-btn-hover-bg: #286090; /* Originally: #0b5ed7 */
|
|
--bs-btn-hover-border-color: #204d74; /* Originally: #0a58ca */
|
|
--bs-btn-active-bg: #286090; /* Originally: #0a58ca */
|
|
--bs-btn-active-border-color: #204d74; /* Originally: #0a53be */
|
|
--bs-btn-disabled-bg: #286090; /* Originally: #0d6efd */
|
|
--bs-btn-disabled-border-color: #204d74; /* Originally: #0d6efd */
|
|
}
|
|
|
|
/* Default style removed in bootstrap 4 */
|
|
.btn-default {
|
|
--bs-btn-color: #333;
|
|
--bs-btn-bg: #fff;
|
|
--bs-btn-border-color: #ccc;
|
|
--bs-btn-hover-color: #333;
|
|
--bs-btn-hover-bg: #e6e6e6;
|
|
--bs-btn-hover-border-color: #adadad;
|
|
--bs-btn-focus-shadow-rgb: 192, 192, 192;
|
|
--bs-btn-active-color: #333;
|
|
--bs-btn-active-bg: #e6e6e6;
|
|
--bs-btn-active-border-color: #adadad;
|
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
--bs-btn-disabled-color: #333;
|
|
--bs-btn-disabled-bg: #e6e6e6;
|
|
--bs-btn-disabled-border-color: #adadad;
|
|
}
|
|
|
|
/* Help block removed from bootstrap 4, needs updated django-bootstrap-from */
|
|
.help-block {
|
|
display: block;
|
|
margin-top: 0.3125rem;
|
|
margin-bottom: 0.625rem;
|
|
color: var(--bs-secondary);
|
|
}
|
|
|
|
/* .close was renamed to .alert-dismissable.btn-close in Bootstrap 5, needs
|
|
updated django-bootstrap-from */
|
|
form .alert {
|
|
padding-right: 3rem;
|
|
}
|
|
|
|
form .alert .close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
padding: 1.25rem 1rem;
|
|
cursor: pointer;
|
|
color: transparent;
|
|
box-sizing: content-box;
|
|
width: 1em;
|
|
height: 1em;
|
|
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
|
|
border: 0;
|
|
border-radius: 0.375rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Disabled form elements show as gray, removed in Bootstrap 5 */
|
|
.form-control:disabled, .form-control[readonly] {
|
|
background-color: var(--freedombox-form-disabled-bg-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* form-horizontal removed in bootstrap, needs updated django-bootstrap-form */
|
|
.form-horizontal > .form-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* In Bootstrap 5, instead of styling .col-* to 100% width by default, .row > *
|
|
is styled as .form-group has been removed. Needs updated
|
|
django-bootstrap-form */
|
|
.form-horizontal > .form-group > * {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.form-horizontal > .form-group > .col-md-4 {
|
|
width: 33.33333333%;
|
|
}
|
|
|
|
.form-horizontal > .form-group > .col-md-8 {
|
|
width: 66.66666667%;
|
|
}
|
|
}
|
|
|
|
.radio .help-block {
|
|
padding-left: 1.2rem;
|
|
}
|
|
|
|
.checkbox .help-block {
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
/* label styling moved to .form-label in Bootstrap 5, needs updated
|
|
django-bootstrap-form */
|
|
label {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Form group has been removed in Bootstrap 5, need updated
|
|
django-bootstrap-form */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* 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: var(--bs-form-invalid-color);
|
|
}
|
|
|
|
.has-error .form-control {
|
|
border-color: var(--bs-form-invalid-border-color);
|
|
}
|
|
|
|
/*
|
|
* Basic styling
|
|
*/
|
|
body {
|
|
padding-top: 6rem;
|
|
position: relative;
|
|
font-family: Lato, sans-serif;
|
|
}
|
|
|
|
.multiple-checkbox li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.multiple-checkbox > div {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.navbar .fa:not(.fa-bars) {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.navbar-brand {
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
.nav-tabs {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
|
|
#wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.container {
|
|
/* Same width as container-xxl in Bootstrap 5 */
|
|
max-width: 1320px;
|
|
}
|
|
|
|
.content-container {
|
|
max-width: 1000px;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* When an exception's text is shown in message as alert component, don't
|
|
overflow the alert's width. */
|
|
.alert.d-flex div {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Tags */
|
|
.tag {
|
|
--bs-btn-padding-y: 0.25rem; /* Make the badge shorter */
|
|
}
|
|
|
|
/* Tag Input Container */
|
|
.tag-input {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #ced4da;
|
|
border-radius: .25rem;
|
|
padding: .375rem .75rem;
|
|
background-color: #fff;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Remove tag button */
|
|
.tag .remove-tag {
|
|
background-color: transparent; /* Match the tag's background color */
|
|
border: none;
|
|
cursor: pointer;
|
|
--bs-btn-padding-y: 0; /* To make the entire tag button shorter */
|
|
}
|
|
|
|
/* Adjust input field width */
|
|
.tag-input input[type="search"] {
|
|
flex-grow: 1;
|
|
border: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
width: auto;
|
|
min-width: 3rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
#clients th, #clients td {
|
|
line-height: 3rem;
|
|
}
|
|
|
|
/* Icon when collapsible content is shown */
|
|
.collapsible-button .fa {
|
|
margin-left: 0.3125rem;
|
|
}
|
|
|
|
.collapsible-button .fa-chevron-right:before,
|
|
.no-js .collapsible-button.collapsed .fa-chevron-right:before {
|
|
content: "\f078";
|
|
}
|
|
|
|
.collapsible-button.collapsed .fa-chevron-right:before {
|
|
content: "\f054";
|
|
}
|
|
|
|
/* No-JS fallbacks for collapsible content */
|
|
.no-js .collapse:not(.no-no-js) {
|
|
display: block;
|
|
}
|
|
|
|
.manual-page {
|
|
text-align: right;
|
|
}
|
|
|
|
/*
|
|
* Top navigation
|
|
*/
|
|
.main-header {
|
|
background: var(--freedombox-blue-color);
|
|
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 .nav-item .nav-link {
|
|
padding: 0.9375rem !important;
|
|
height: 3.25rem;
|
|
}
|
|
|
|
.main-header .nav-link {
|
|
--bs-navbar-color: var(--freedombox-navbar-color);
|
|
--bs-navbar-active-color: var(--freedombox-navbar-color);
|
|
--bs-navbar-hover-color: var(--freedombox-navbar-color);
|
|
--bs-nav-link-color: var(--freedombox-navbar-color);
|
|
--bs-nav-link-active-color: var(--freedombox-navbar-color);
|
|
--bs-nav-link-hover-color: var(--freedombox-navbar-color);
|
|
}
|
|
|
|
.main-header .navbar-toggler {
|
|
--bs-navbar-toggler-border-color: var(--freedombox-navbar-color);
|
|
--bs-navbar-color: var(--freedombox-navbar-color);
|
|
/* In mobile layout, during first setup, maintain the height of the navbar */
|
|
margin: 0.6875rem 0;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.main-header .dropdown-menu {
|
|
--bs-dropdown-link-color: var(--freedombox-navbar-color);
|
|
--bs-dropdown-link-active-color: var(--freedombox-navbar-color);
|
|
--bs-dropdown-link-hover-color: var(--freedombox-navbar-color);
|
|
--bs-dropdown-link-hover-bg: var(--freedombox-blue-color);
|
|
--bs-dropdown-link-active-bg: var(--freedombox-blue-color);
|
|
--bs-dropdown-bg: var(--freedombox-blue-color);
|
|
--bs-dropdown-border-color: var(--freedombox-navbar-color);
|
|
}
|
|
|
|
.main-header .navbar-nav .nav-item:last-of-type .dropdown-menu {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
.main-header .navbar-brand.active,
|
|
.main-header .nav-link.active {
|
|
border-bottom: var(--freedombox-navbar-color) 3px solid;
|
|
}
|
|
|
|
/* Cards in Index, Apps, System and Help pages */
|
|
.card-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.row > .card-list {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.card-section-title, .system-section-title {
|
|
display: flex;
|
|
font-weight: 800;
|
|
font-size: 1.25rem;
|
|
margin: 1.25rem 0;
|
|
border-bottom: var(--bs-secondary-border-subtle) solid 2px;
|
|
}
|
|
|
|
.card {
|
|
display: block;
|
|
line-height: 1.42857143;
|
|
text-align: center;
|
|
width: 10rem;
|
|
padding: 1rem;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
transition: border .2s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
background: var(--bs-secondary-bg);
|
|
}
|
|
|
|
.card > a {
|
|
display: block;
|
|
padding: 0rem;
|
|
color: var(--bs-body-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-description {
|
|
font-weight: 400;
|
|
color: var(--bs-secondary);
|
|
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-list {
|
|
justify-content: left;
|
|
margin: 0;
|
|
}
|
|
|
|
.system-page .card {
|
|
text-align: left;
|
|
width: 20.625rem;
|
|
padding: 0;
|
|
}
|
|
|
|
.system-page .card > a {
|
|
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;
|
|
}
|
|
|
|
.system-page .card-icon {
|
|
grid-row: 1 / 3;
|
|
grid-column: 1;
|
|
}
|
|
|
|
.system-page .card-icon span {
|
|
height: auto;
|
|
font-size: 2.1875rem;
|
|
}
|
|
|
|
.system-page .card-description {
|
|
grid-row: 2;
|
|
grid-column: 2;
|
|
padding: 0;
|
|
min-height: 1.125rem;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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: #ccc;
|
|
--bs-btn-hover-bg: #ccc;
|
|
--bs-btn-disabled-bg: #ccc;
|
|
--bs-btn-disabled-border-color: transparent;
|
|
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);
|
|
--bs-btn-hover-bg: var(--freedombox-blue-color);
|
|
--bs-btn-disabled-bg: 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(--bs-secondary-border-subtle);
|
|
background-color: var(--neutral-light-color);
|
|
border-radius: 0.25rem;
|
|
padding: 0.5rem 1rem 0.25rem;
|
|
margin-left: -1rem;
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
|
|
.app-header > img {
|
|
margin: 0 auto;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.help-about-links ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Notifications
|
|
*/
|
|
.notifications {
|
|
margin-left: -0.9375rem;
|
|
margin-right: -0.9375rem;
|
|
position: relative;
|
|
transition: none; /* Remove Bootstrap's default animation */
|
|
}
|
|
|
|
.notifications.collapsing {
|
|
display: none; /* Don't show up with blue background momentarily */
|
|
}
|
|
|
|
.notifications > ul {
|
|
position: absolute; /* Don't increase parent's height */
|
|
list-style: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
float: none;
|
|
margin-top: 0;
|
|
background-clip: border-box;
|
|
background-color: var(--bs-body-bg);
|
|
border: 1px solid var(--bs-border-color-translucent);
|
|
border-radius: 0 0 0.25em 0.25em;
|
|
}
|
|
|
|
/* Style for individual notification */
|
|
.notification {
|
|
padding: 0.625rem 0.9375rem;
|
|
border-left: 0.3125rem solid;
|
|
}
|
|
|
|
.notification:not(:first-child) {
|
|
border-top: 1px solid var(--bs-border-color-translucent);
|
|
}
|
|
|
|
.notification-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
img.notification-icon {
|
|
display: inline-block;
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
/* Show badge with various colors and overlap it onto icon */
|
|
.notifications-dropdown .badge {
|
|
padding: 0.125rem 0.3125rem;
|
|
margin-left: -0.75rem;
|
|
}
|
|
|
|
.notification-exception, .notification-error {
|
|
border-left-color: var(--bs-danger);
|
|
}
|
|
|
|
.notification-warning {
|
|
border-left-color: var(--bs-warning);
|
|
}
|
|
|
|
.notification-info, .notification-debug {
|
|
border-left-color: var(--bs-info);
|
|
}
|
|
|
|
/* Two different notifications for each small and one for large screens */
|
|
.notifications-dropdown {
|
|
display: none;
|
|
}
|
|
|
|
.collapse .notifications-dropdown {
|
|
display: block;
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.notifications-dropdown {
|
|
display: block;
|
|
}
|
|
|
|
.collapsing .notifications-dropdown,
|
|
.collapse .notifications-dropdown {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Accordion */
|
|
.accordion {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.accordion-header {
|
|
margin: 0;
|
|
}
|