meteo/Sentri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes to login page styling, added dark and light mode and fixed some layout.

Browse Source
This commit is contained in:
Marco
2026-05-22 23:41:57 +02:00
parent 3d6e3c376f
commit 4eba391e7f
4 changed files with 171 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
pub/login/css/style.full.css
View File

@@ -4,9 +4,7 @@
* Copyright (c) 2024 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
*/
:root,
[data-coreui-theme=light] {
color-scheme: light;
:root {
--cui-blue: #458588;
--cui-indigo: #8f3f71;
--cui-purple: #b16286;
@@ -70,8 +68,8 @@
--cui-danger-border-subtle: #d3869b;
--cui-light-border-subtle: #ebdbb2;
--cui-dark-border-subtle: #928374;
--cui-white-rgb: 255, 255, 255;
--cui-black-rgb: 0, 0, 0;
--cui-white-rgb: 251, 241, 199;
--cui-black-rgb: 29, 32, 33;
--cui-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--cui-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--cui-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
@@ -79,21 +77,21 @@
--cui-body-font-size: 1rem;
--cui-body-font-weight: 400;
--cui-body-line-height: 1.5;
--cui-body-color: #fbf1c7;
--cui-body-color-rgb: 33, 37, 41;
--cui-body-bg: #282828;
--cui-body-bg-rgb: 255, 255, 255;
--cui-emphasis-color: #282828;
--cui-emphasis-color-rgb: 0, 0, 0;
--cui-secondary-color: rgb(213, 196, 161);
--cui-body-color: #3c3836;
--cui-body-color-rgb: 235, 219, 178;
--cui-body-bg: #ebdbb2;
--cui-body-bg-rgb: 235, 219, 178;
--cui-emphasis-color: #ebdbb2;
--cui-emphasis-color-rgb: 235, 219, 178;
--cui-secondary-color: #3c3836;
--cui-secondary-color-rgb: 33, 37, 41;
--cui-secondary-bg: #bdae93;
--cui-secondary-bg-rgb: 233, 236, 239;
--cui-secondary-bg: #ebdbb2;
--cui-secondary-bg-rgb: 235, 219, 178;
--cui-tertiary-color: rgba(33, 37, 41, 0.5);
--cui-tertiary-color-rgb: 33, 37, 41;
--cui-tertiary-bg: #d5c4a1;
--cui-tertiary-bg-rgb: 248, 249, 250;
--cui-heading-color: inherit;
--cui-tertiary-bg: #ebdbb2;
--cui-tertiary-bg-rgb: 235, 219, 178;
--cui-heading-color: #3c3836;
--cui-link-color: #458588;
--cui-link-color-rgb: 13, 110, 253;
--cui-link-decoration: underline;
@@ -104,7 +102,7 @@
--cui-highlight-bg: #fff3cd;
--cui-border-width: 1px;
--cui-border-style: solid;
--cui-border-color: #d5c4a1;
--cui-border-color: #7c6f64;
--cui-border-color-translucent: rgba(0, 0, 0, 0.175);
--cui-border-radius: 0.375rem;
--cui-border-radius-sm: 0.25rem;
@@ -125,91 +123,127 @@
--cui-form-invalid-color: #dc3545;
--cui-form-invalid-border-color: #dc3545;
--cui-input-placeholder-color: #a89984;
--cui-input-group-addon-color: #282828;
--cui-input-group-addon-color: #3c3836;
}
[data-coreui-theme=dark] {
color-scheme: dark;
--cui-body-color: #fbf1c7;
--cui-body-color-rgb: 33, 37, 41;
--cui-body-bg: #282828;
--cui-body-bg-rgb: 255, 255, 255;
--cui-emphasis-color: #282828;
--cui-emphasis-color-rgb: 0, 0, 0;
--cui-secondary-color: rgb(40, 40, 40);
--cui-secondary-color-rgb: 33, 37, 41;
--cui-secondary-bg: #bdae93;
--cui-secondary-bg-rgb: 168, 153, 132;
--cui-tertiary-color: rgba(33, 37, 41, 0.5);
--cui-tertiary-color-rgb: 33, 37, 41;
--cui-tertiary-bg: #A89984;
--cui-tertiary-bg-rgb: 40, 40, 40;
--cui-high-emphasis: rgba(255, 255, 255, 0.87);
--cui-medium-emphasis: rgba(255, 255, 255, 0.6);
--cui-disabled: rgba(255, 255, 255, 0.38);
--cui-primary: #83a598;
--cui-secondary: #928374;
--cui-success: #98971a;
--cui-info: #458588;
--cui-warning: #fabd2f;
--cui-danger: #cc241d;
--cui-light: #fbf1c7;
--cui-dark: #282828;
--cui-gray-100: #f9f5d7;
--cui-gray-200: #ebdbb2;
--cui-gray-300: #d5c4a1;
--cui-gray-400: #bdae93;
--cui-gray-500: #a89984;
--cui-gray-600: #928374;
--cui-gray-700: #665c54;
--cui-gray-800: #3c3836;
--cui-gray-900: #282828;
--cui-primary-rgb: 131, 165, 152;
--cui-secondary-rgb: 146, 131, 116;
--cui-success-rgb: 152, 151, 26;
--cui-info-rgb: 69, 133, 136;
--cui-warning-rgb: 250, 189, 47;
--cui-danger-rgb: 204, 36, 29;
--cui-light-rgb: 251, 241, 199;
--cui-dark-rgb: 40, 40, 40;
--cui-primary-text-emphasis: #458588;
--cui-secondary-text-emphasis: #3c3836;
--cui-success-text-emphasis: #98971a;
--cui-info-text-emphasis: #83a598;
--cui-warning-text-emphasis: #d79921;
--cui-danger-text-emphasis: #cc241d;
--cui-light-text-emphasis: #a89984;
--cui-dark-text-emphasis: #a89984;
--cui-primary-bg-subtle: #d5c4a1;
--cui-secondary-bg-subtle: #ebdbb2;
--cui-success-bg-subtle: #b8bb26;
--cui-info-bg-subtle: #83a598;
--cui-warning-bg-subtle: #fabd2f;
--cui-danger-bg-subtle: #fb4934;
--cui-light-bg-subtle: #f9f5d7;
--cui-dark-bg-subtle: #928374;
--cui-primary-border-subtle: #83a598;
--cui-secondary-border-subtle: #a89984;
--cui-success-border-subtle: #b8bb26;
--cui-info-border-subtle: #8ec07c;
--cui-warning-border-subtle: #d79921;
--cui-danger-border-subtle: #d3869b;
--cui-light-border-subtle: #ebdbb2;
--cui-dark-border-subtle: #928374;
--cui-heading-color: #fbf1c7;
--cui-link-color: #458588;
--cui-link-hover-color: #83a598;
--cui-link-color-rgb: 13, 110, 253;
--cui-link-hover-color-rgb: 10, 88, 202;
--cui-code-color: #e685b5;
--cui-highlight-color: rgba(255, 255, 255, 0.87);
--cui-highlight-bg: #664d03;
--cui-border-color: #323a49;
--cui-border-color-translucent: rgba(213, 196, 161, 2);
--cui-form-valid-color: #75b798;
--cui-form-valid-border-color: #75b798;
--cui-form-invalid-color: #98971a;
--cui-form-invalid-border-color: #98971a;
@media (prefers-color-scheme: dark) {
:root {
--cui-body-color: #fbf1c7;
--cui-body-color-rgb: 33, 37, 41;
--cui-body-bg: #282828;
--cui-body-bg-rgb: 255, 255, 255;
--cui-emphasis-color: #282828;
--cui-emphasis-color-rgb: 0, 0, 0;
--cui-secondary-color: rgb(40, 40, 40);
--cui-secondary-color-rgb: 33, 37, 41;
--cui-secondary-bg: #bdae93;
--cui-secondary-bg-rgb: 168, 153, 132;
--cui-tertiary-color: rgba(33, 37, 41, 0.5);
--cui-tertiary-color-rgb: 33, 37, 41;
--cui-tertiary-bg: #282828;
--cui-tertiary-bg-rgb: 40, 40, 40;
--cui-high-emphasis: rgba(255, 255, 255, 0.87);
--cui-medium-emphasis: rgba(255, 255, 255, 0.6);
--cui-disabled: rgba(255, 255, 255, 0.38);
--cui-primary: #83a598;
--cui-secondary: #928374;
--cui-success: #98971a;
--cui-info: #458588;
--cui-warning: #fabd2f;
--cui-danger: #cc241d;
--cui-light: #fbf1c7;
--cui-dark: #282828;
--cui-gray-100: #f9f5d7;
--cui-gray-200: #ebdbb2;
--cui-gray-300: #d5c4a1;
--cui-gray-400: #bdae93;
--cui-gray-500: #a89984;
--cui-gray-600: #928374;
--cui-gray-700: #665c54;
--cui-gray-800: #3c3836;
--cui-gray-900: #282828;
--cui-primary-rgb: 131, 165, 152;
--cui-secondary-rgb: 146, 131, 116;
--cui-success-rgb: 152, 151, 26;
--cui-info-rgb: 69, 133, 136;
--cui-warning-rgb: 250, 189, 47;
--cui-danger-rgb: 204, 36, 29;
--cui-light-rgb: 251, 241, 199;
--cui-dark-rgb: 40, 40, 40;
--cui-primary-text-emphasis: #458588;
--cui-secondary-text-emphasis: #3c3836;
--cui-success-text-emphasis: #98971a;
--cui-info-text-emphasis: #83a598;
--cui-warning-text-emphasis: #d79921;
--cui-danger-text-emphasis: #cc241d;
--cui-light-text-emphasis: #a89984;
--cui-dark-text-emphasis: #a89984;
--cui-primary-bg-subtle: #d5c4a1;
--cui-secondary-bg-subtle: #ebdbb2;
--cui-success-bg-subtle: #b8bb26;
--cui-info-bg-subtle: #83a598;
--cui-warning-bg-subtle: #fabd2f;
--cui-danger-bg-subtle: #fb4934;
--cui-light-bg-subtle: #f9f5d7;
--cui-dark-bg-subtle: #928374;
--cui-primary-border-subtle: #83a598;
--cui-secondary-border-subtle: #a89984;
--cui-success-border-subtle: #b8bb26;
--cui-info-border-subtle: #8ec07c;
--cui-warning-border-subtle: #d79921;
--cui-danger-border-subtle: #d3869b;
--cui-light-border-subtle: #ebdbb2;
--cui-dark-border-subtle: #928374;
--cui-heading-color: #fbf1c7;
--cui-link-color: #458588;
--cui-link-hover-color: #83a598;
--cui-link-color-rgb: 13, 110, 253;
--cui-link-hover-color-rgb: 10, 88, 202;
--cui-code-color: #e685b5;
--cui-highlight-color: rgba(255, 255, 255, 0.87);
--cui-highlight-bg: #664d03;
--cui-border-color: #a89984;
--cui-border-color-translucent: rgba(213, 196, 161, 2);
--cui-form-valid-color: #75b798;
--cui-form-valid-border-color: #75b798;
--cui-form-invalid-color: #98971a;
--cui-form-invalid-border-color: #98971a;
--cui-input-group-addon-color: #ebdbb2;
}
}
.portal-image {
width: 100%;
height: auto;
aspect-ratio: 3 / 1;
object-fit: contain;
display: block;
min-height: 200px;
content: url('/src/images/callconfig-logo-login-light.png');
}
@media (prefers-color-scheme: dark) {
.portal-image {
content: url('/src/images/logo-login-dark.webp');
}
}
.code-input {
width: 40px;
height: 40px;
font-size: 24px;
text-align: center;
margin: 5px;
background-color: var(--cui-body-bg);
color: var(--cui-body-color);
border-color: var(--cui-body-color);
border: 2px solid var(--cui-body-color);;
outline: 1px;
}
.code-input:focus {
border-color: var(--cui-primary-text-emphasis);
box-shadow: 0 0 0 3px rgba(69, 133, 136, 0.3);
}
*,
@@ -3493,18 +3527,18 @@ textarea.form-control-lg {
}
.btn-primary {
--cui-btn-color: #fff;
--cui-btn-bg: #83a598;
--cui-btn-border-color: #83a598;
--cui-btn-hover-color: #fff;
--cui-btn-color: #ebdbb2;
--cui-btn-bg: #458588;
--cui-btn-border-color: #458588;
--cui-btn-hover-color: #ebdbb2;
--cui-btn-hover-bg: #458588;
--cui-btn-hover-border-color: #458588;
--cui-btn-focus-shadow-rgb: 69, 133, 136;
--cui-btn-active-color: #fff;
--cui-btn-active-color: #ebdbb2;
--cui-btn-active-bg: #458588;
--cui-btn-active-border-color: #458588;
--cui-btn-active-shadow: inset 0 3px 5px rgba(69, 133, 136, 0.125);
--cui-btn-disabled-color: #fff;
--cui-btn-disabled-color: #ebdbb2;
--cui-btn-disabled-bg: #83a598;
--cui-btn-disabled-border-color: #83a598;
}
@@ -3885,21 +3919,23 @@ textarea.form-control-lg {
--cui-btn-border-radius: var(--cui-border-radius-sm);
}
[data-coreui-theme=dark] .btn-primary {
--cui-btn-color: #fff;
--cui-btn-bg: #83a598;
--cui-btn-border-color: #83a598;
--cui-btn-hover-color: #fff;
--cui-btn-hover-bg: #458588;
--cui-btn-hover-border-color: #458588;
--cui-btn-focus-shadow-rgb: 69, 133, 136;
--cui-btn-active-color: #fff;
--cui-btn-active-bg: #458588;
--cui-btn-active-border-color: #458588;
--cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
--cui-btn-disabled-color: #fff;
--cui-btn-disabled-bg: #83a598;
--cui-btn-disabled-border-color: #83a598;
@media (prefers-color-scheme: dark) {
.btn-primary {
--cui-btn-color: #ebdbb2;
--cui-btn-bg: #458588;
--cui-btn-border-color: #458588;
--cui-btn-hover-color: #ebdbb2;
--cui-btn-hover-bg: #458588;
--cui-btn-hover-border-color: #076678;
--cui-btn-focus-shadow-rgb: 69, 133, 136;
--cui-btn-active-color: #ebdbb2;
--cui-btn-active-bg: #458588;
--cui-btn-active-border-color: #076678;
--cui-btn-active-shadow: inset 0 3px 5px rgba(69, 133, 136, 0.125);
--cui-btn-disabled-color: #ebdbb2;
--cui-btn-disabled-bg: #83a598;
--cui-btn-disabled-border-color: #83a598;
}
}
[data-coreui-theme=dark] .btn-secondary {