mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-25 00:24:35 +00:00
Merge branch 'feature-25999/C4_dark_theme' into merge_C4_25999_61235_61730
This commit is contained in:
Harald Bamberger
+186
-58
@@ -6,57 +6,176 @@ html {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
/* variables */
|
||||
:root {
|
||||
--fhc-cis-primary: #00649c;
|
||||
--fhc-cis-primary-hover: #005585;
|
||||
--fhc-cis-header-px: 1rem;
|
||||
--fhc-cis-header-py: .5rem;
|
||||
--fhc-cis-main-px: 1.5rem;
|
||||
--fhc-cis-main-py: 1.5rem;
|
||||
--fhc-cis-menu-lvl-1-bg: #00649c;
|
||||
--fhc-cis-menu-lvl-1-color: #fff;
|
||||
--fhc-cis-menu-lvl-1-bg-hover: #005585;
|
||||
--fhc-cis-menu-lvl-1-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-2-bg: #343a40;
|
||||
--fhc-cis-menu-lvl-2-color: #fff;
|
||||
--fhc-cis-menu-lvl-2-bg-hover: #2c3136;
|
||||
--fhc-cis-menu-lvl-2-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-2-color-active: #292b2a;
|
||||
--fhc-cis-menu-lvl-3-bg: #72777A;
|
||||
--fhc-cis-menu-lvl-3-color: #fff;
|
||||
--fhc-cis-menu-lvl-3-bg-hover: #616568;
|
||||
--fhc-cis-menu-lvl-3-color-hover: #fff;
|
||||
--fhc-cis-menu-lvl-4-bg: #ced4da;
|
||||
--fhc-cis-menu-lvl-4-color: #000;
|
||||
--fhc-cis-menu-lvl-4-bg-hover: #d5dae0;
|
||||
--fhc-cis-menu-lvl-4-color-hover: #000;
|
||||
--fhc-cis-menu-lvl-5-bg: #e9ecef;
|
||||
--fhc-cis-menu-lvl-5-color: #000;
|
||||
--fhc-cis-menu-lvl-5-bg-hover: #eceff1;
|
||||
--fhc-cis-menu-lvl-5-color-hover: #000;
|
||||
--fhc-cis-grade-positive: rgb(0, 128, 0);
|
||||
--fhc-cis-grade-negative: rgb(128, 0, 0);
|
||||
.fhc-dark-bg{
|
||||
background-color: var(--fhc-dark);
|
||||
color:var(--fhc-light) !important;
|
||||
}
|
||||
|
||||
.fhc-dark-color {
|
||||
color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.fhc-dark-bg:hover{
|
||||
filter: brightness(120%);
|
||||
}
|
||||
|
||||
.fhc-primary-color{
|
||||
color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
.fhc-primary-bg {
|
||||
background-color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
.fhc-primary-highlight-bg {
|
||||
background-color: var(--fhc-primary-highlight) !important;
|
||||
}
|
||||
|
||||
.fhc-body-bg{
|
||||
background-color:var(--fhc-background) !important;
|
||||
}
|
||||
|
||||
.fhc-body-color{
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
.fhc-secondary-bg{
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
|
||||
.fhc-secondary-color {
|
||||
color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
|
||||
.fhc-tertiary-bg{
|
||||
background-color: var(--fhc-secondary) !important;
|
||||
}
|
||||
|
||||
.fhc-tertiary-color {
|
||||
color: var(--fhc-secondary) !important;
|
||||
}
|
||||
|
||||
.fhc-fourth-bg {
|
||||
background-color: var(--fhc-fourth) !important;
|
||||
}
|
||||
|
||||
.fhc-fourth-color {
|
||||
color: var(--fhc-fourth) !important;
|
||||
}
|
||||
|
||||
.fhc-fifth-bg {
|
||||
background-color: var(--fhc-fifth) !important;
|
||||
}
|
||||
|
||||
.fhc-fifth-color {
|
||||
color: var(--fhc-fifth) !important;
|
||||
}
|
||||
|
||||
.fhc-body{
|
||||
color:var(--fhc-text);
|
||||
background-color: var(--fhc-background);
|
||||
border-color: var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-secondary {
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-tertiary);
|
||||
border-color: var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-tertiary{
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-secondary);
|
||||
border-color:var(--fhc-border);
|
||||
}
|
||||
|
||||
.fhc-link-color{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.fhc-text{
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
:root{
|
||||
/* sidebar colors */
|
||||
--fhc-cis-sidebar-bg: var(--fhc-secondary);
|
||||
--fhc-cis-menu-bg: var(--fhc-secondary);
|
||||
|
||||
--fhc-cis-header-px: 1rem;
|
||||
--fhc-cis-header-py: .5rem;
|
||||
--fhc-cis-main-px: 1.5rem;
|
||||
--fhc-cis-main-py: 1.5rem;
|
||||
|
||||
--fhc-cis-menu-lvl-1-bg: var(--fhc-primary);
|
||||
--fhc-cis-menu-lvl-1-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-1-bg-hover: var(--fhc-primary-highlight);
|
||||
--fhc-cis-menu-lvl-1-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-2-bg: var(--fhc-secondary);
|
||||
--fhc-cis-menu-lvl-2-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-2-bg-hover: var(--fhc-secondary-highlight);
|
||||
--fhc-cis-menu-lvl-2-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-3-bg: var(--fhc-tertiary);
|
||||
--fhc-cis-menu-lvl-3-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-3-bg-hover: var(--fhc-tertiary-highlight);
|
||||
--fhc-cis-menu-lvl-3-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-4-bg: var(--fhc-fourth);
|
||||
--fhc-cis-menu-lvl-4-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-4-bg-hover: var(--fhc-fourth-highlight);
|
||||
--fhc-cis-menu-lvl-4-color-hover: var(--fhc-text);
|
||||
|
||||
--fhc-cis-menu-lvl-5-bg: var(--fhc-fifth);
|
||||
--fhc-cis-menu-lvl-5-color: var(--fhc-text);
|
||||
--fhc-cis-menu-lvl-5-bg-hover: var(--fhc-fifth-highlight);
|
||||
--fhc-cis-menu-lvl-5-color-hover: var(--fhc-text);
|
||||
--fhc-cis-grade-positive: var(--fhc-success);
|
||||
--fhc-cis-grade-negative: var(--fhc-danger);
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
:root {
|
||||
--fhc-cis-menu-width: 250px;
|
||||
--fhc-cis-header-height: 60px;
|
||||
--fhc-cis-menu-bg: #72777A;
|
||||
}
|
||||
:root {
|
||||
--fhc-cis-menu-width: 250px;
|
||||
--fhc-cis-header-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
:root {
|
||||
--fhc-cis-menu-width: 400px;
|
||||
--fhc-cis-header-height: 40px;
|
||||
--fhc-cis-menu-bg: #343a40;
|
||||
}
|
||||
:root {
|
||||
--fhc-cis-menu-width: 400px;
|
||||
--fhc-cis-header-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* lvMenu entry style */
|
||||
#cis-menu .menu-entry {
|
||||
color: var(--fhc-text);
|
||||
}
|
||||
|
||||
[disabled="true"].menu-entry {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
background-color: var(--fhc-disabled) !important;
|
||||
color: black !important;
|
||||
opacity: 0.75;
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-khtml-user-select: none;
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Old versions of Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#cis-menu .menu-entry:hover{
|
||||
background-color: var(--fhc-cis-primary);
|
||||
color:white;
|
||||
background-color: var(--fhc-primary);
|
||||
color:var(--fhc-light);
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
@@ -199,6 +318,7 @@ html {
|
||||
|
||||
/* searchbar */
|
||||
#nav-search {
|
||||
background-color: var(--fhc-primary);
|
||||
z-index: 1;
|
||||
}
|
||||
#nav-search.me-3 {
|
||||
@@ -227,9 +347,16 @@ html {
|
||||
}
|
||||
|
||||
#cis-main {
|
||||
color: var(--fhc-text);
|
||||
background-color: var(--fhc-background);
|
||||
border-color: var(--fhc-border);
|
||||
padding: var(--fhc-cis-main-py) var(--fhc-cis-main-px);
|
||||
}
|
||||
|
||||
#cis-main .fa-arrow-up-right-from-square {
|
||||
color: var(--fhc-link) !important;
|
||||
}
|
||||
|
||||
#nav-main-sticky {
|
||||
max-height: calc(100vh - var(--fhc-cis-header-height));
|
||||
}
|
||||
@@ -249,10 +376,6 @@ html {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fhc-active {
|
||||
background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
|
||||
}
|
||||
|
||||
.fhc-seperator {
|
||||
position: relative;
|
||||
}
|
||||
@@ -265,7 +388,7 @@ html {
|
||||
margin-left: 12.5%;
|
||||
width: 75%; /* Full width of the parent element */
|
||||
height: 1px; /* Height of the border */
|
||||
background: linear-gradient(to right, #ffffff, var(--fhc-cis-primary), #ffffff);
|
||||
background: linear-gradient(to right, var(--fhc-background), var(--fhc-primary), var(--fhc-background));
|
||||
opacity: 0.8; /* Adjust opacity for a subtle fade effect */
|
||||
}
|
||||
|
||||
@@ -299,7 +422,7 @@ html {
|
||||
left: 0;
|
||||
height: var(--fhc-cis-header-height);
|
||||
width: var(--fhc-cis-menu-width);
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -331,7 +454,7 @@ html {
|
||||
}
|
||||
#nav-main-toggle .collapsed .fa-arrow-circle-left {
|
||||
transform: scaleX(-1);
|
||||
color: var(--bs-dark);
|
||||
color: var(--fhc-black-40);
|
||||
}
|
||||
#nav-search {
|
||||
position: fixed;
|
||||
@@ -349,7 +472,7 @@ html {
|
||||
#nav-user-btn {
|
||||
border-width: 0;
|
||||
padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
#nav-user-btn img {
|
||||
object-fit: contain;
|
||||
@@ -359,7 +482,7 @@ html {
|
||||
#nav-user-menu {
|
||||
position: absolute;
|
||||
min-width: var(--fhc-cis-menu-width);
|
||||
background-color: var(--fhc-cis-menu-lvl-2-bg);
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
#nav-user-menu img {
|
||||
@@ -394,7 +517,7 @@ html {
|
||||
margin-top: var(--fhc-cis-header-height);
|
||||
}
|
||||
#cis-header {
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
height: var(--fhc-cis-header-height);
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
@@ -431,18 +554,23 @@ html {
|
||||
}
|
||||
#nav-user-menu {
|
||||
position: absolute;
|
||||
background-color: var(--fhc-cis-menu-lvl-2-bg);
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
#nav-main-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#nav-main{
|
||||
background-color: var(--fhc-cis-sidebar-bg);
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.fhc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid var(--fhc-border);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.fhc-header > h1 {
|
||||
@@ -454,7 +582,7 @@ html {
|
||||
}
|
||||
}
|
||||
.fhc-header > h1 > small {
|
||||
color: #6c757d;
|
||||
color: var(--fhc-tertiary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
.fhc-header > h1 > small:before {
|
||||
@@ -465,7 +593,7 @@ html {
|
||||
text-decoration: none;
|
||||
}
|
||||
.fhc-header > a:after {
|
||||
color: var(--bs-body-color);
|
||||
color: var(--fhc-text);
|
||||
content: "\f059";
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -482,7 +610,7 @@ html {
|
||||
[disabled="true"].fhc-entry {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
background-color: #dadada !important;
|
||||
background-color: var(--fhc-disabled) !important;
|
||||
color: black !important;
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none;/* Safari */
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
#cms a.btn-outline-primary {
|
||||
color: var(--fhc-cis-primary);
|
||||
border-color: var(--fhc-cis-primary);
|
||||
color: var(--fhc-primary);
|
||||
border-color: var(--fhc-primary);
|
||||
}
|
||||
#cms a.btn-outline-primary:hover,
|
||||
#cms a.btn-outline-primary:focus {
|
||||
color: #fff;
|
||||
background-color: var(--fhc-cis-primary);
|
||||
border-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary);
|
||||
border-color: var(--fhc-primary);
|
||||
}
|
||||
#cms a.btn-primary {
|
||||
color: var(--fhc-cis-menu-lvl-1-color);
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@
|
||||
font-size: calc(1.325rem + .9vw);
|
||||
}
|
||||
.fhc-header > :first-child > small {
|
||||
color: var(--bs-secondary);
|
||||
color: var(--fhc-tertiary);
|
||||
font-size: .65em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,15 @@
|
||||
:root{
|
||||
--filter-widget-border: var(--fhc-dark);
|
||||
--filter-widget-color: var(--fhc-dark);
|
||||
--filter-widget-primary: var(--fhc-primary);
|
||||
--filter-widget-border-light: var(--fhc-border);
|
||||
}
|
||||
|
||||
.filter-name-title {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
color: black;
|
||||
color: var(--filter-widget-color);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
@@ -26,7 +33,7 @@
|
||||
}
|
||||
|
||||
.drag-and-drop-fields-span {
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--filter-widget-border);
|
||||
border-radius: 7px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 10px;
|
||||
@@ -64,7 +71,7 @@
|
||||
right: 100%;
|
||||
height: 100%;
|
||||
margin-right: 3px;
|
||||
border-left: 2px solid #428bca;
|
||||
border-left: 2px solid var(--filter-widget-primary);
|
||||
}
|
||||
|
||||
.selection-after::after {
|
||||
@@ -74,7 +81,7 @@
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3px;
|
||||
border-right: 2px solid #428bca;
|
||||
border-right: 2px solid var(--filter-widget-primary);
|
||||
}
|
||||
|
||||
.applied-filter-operation {
|
||||
@@ -139,10 +146,10 @@
|
||||
|
||||
.up-down-border {
|
||||
border-top-width: 1px;
|
||||
border-top-color: #ddd;
|
||||
border-top-color: var(--filter-widget-border-light);
|
||||
border-top-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #ddd;
|
||||
border-bottom-color: var(--filter-widget-border-light);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,9 @@
|
||||
:root{
|
||||
--fhc-filtercomponent-primary: var(--fhc-primary);
|
||||
--fhc-filtercomponent-bg:var(--fhc-background);
|
||||
--fhc-filtercomponent-border:var(--fhc-border);
|
||||
}
|
||||
|
||||
.filter-header-title {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -26,9 +32,9 @@
|
||||
margin-left: 7px;
|
||||
padding: 11px;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
background-color: var(--fhc-filtercomponent-bg);
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-color: var(--fhc-filtercomponent-border);
|
||||
border-width: 1px;
|
||||
border-radius: 7px;
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
@@ -47,7 +53,7 @@
|
||||
right: 100%;
|
||||
height: 100%;
|
||||
margin-right: 3px;
|
||||
border-left: 2px solid #428bca;
|
||||
border-left: 2px solid var(--fhc-filtercomponent-primary);
|
||||
}
|
||||
|
||||
.selection-after::after {
|
||||
@@ -57,7 +63,7 @@
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
margin-left: 3px;
|
||||
border-right: 2px solid #428bca;
|
||||
border-right: 2px solid var(--fhc-filtercomponent-primary);
|
||||
}
|
||||
|
||||
.filter-table-dataset {
|
||||
|
||||
@@ -8,11 +8,13 @@
|
||||
|
||||
}
|
||||
|
||||
|
||||
a.form-underline-content{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.form-underline .form-underline-content{
|
||||
border-width: 1px;
|
||||
border-color: transparent transparent #dee2e6 transparent;
|
||||
border-color: transparent transparent var(--fhc-border) transparent;
|
||||
border-style: solid;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0.5rem;
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
:root{
|
||||
--myLv-disabled: var(--fhc-disabled);
|
||||
}
|
||||
|
||||
.unavailable, .unavailable:hover{
|
||||
color: #565e647f !important;
|
||||
color: var(--myLv-disabled) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,24 @@
|
||||
/*
|
||||
* Hederer
|
||||
*/
|
||||
|
||||
:root{
|
||||
--nav-component-bg: var(--fhc-tertiary);
|
||||
--nav-component-border: var(--fhc-border);
|
||||
--nav-component-color: var(--fhc-text);
|
||||
--nav-left-component-border: var(--fhc-border);
|
||||
--nav-left-component-bg: var(--fhc-tertiary);
|
||||
--nav-left-component-color: var(--fhc-primary);
|
||||
--nav-left-component-hover: var(--fhc-secondary-highlight);
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
background-color: #f8f8f8;
|
||||
background-color: var(--nav-component-bg);
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
padding-left: 10px;
|
||||
border-style: solid;
|
||||
border-color: #e7e7e7;
|
||||
border-color: var(--nav-component-border);
|
||||
border-width: 0 0 1px;
|
||||
}
|
||||
|
||||
@@ -15,7 +26,7 @@
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.42857143;
|
||||
color: #5e5e5e !important;
|
||||
color: var(--nav-component-color) !important;
|
||||
padding-top: 15px !important;
|
||||
padding-right: 7px !important;
|
||||
padding-left: 7px !important;
|
||||
@@ -34,8 +45,8 @@
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
border-right: 1px solid #e7e7e7;
|
||||
background-color: #f8f8f8;
|
||||
border-right: 1px solid ;
|
||||
background-color:var(--nav-left-component-bg);
|
||||
}
|
||||
|
||||
.navbar-left-side ul {
|
||||
@@ -43,7 +54,7 @@
|
||||
}
|
||||
|
||||
.navbar-left-side ul li {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
border-bottom: 1px solid var(--nav-left-component-border);
|
||||
}
|
||||
|
||||
.left-side-menu-second-level {
|
||||
@@ -67,7 +78,7 @@
|
||||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857143;
|
||||
color: #23527c;
|
||||
color: var(--nav-left-component-color);
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
padding-left: 7px !important;
|
||||
@@ -76,7 +87,7 @@
|
||||
}
|
||||
|
||||
.left-side-menu-link-entry:hover {
|
||||
background-color: #eee;
|
||||
background-color: var(--nav-left-component-hover);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
|
||||
|
||||
:root{
|
||||
--profil-border: var(--fhc-border);
|
||||
--profil-tabulator-shadow:var(--fhc-shadow-20);
|
||||
}
|
||||
|
||||
|
||||
.image-lock{
|
||||
height:22px;
|
||||
width:21px;
|
||||
background-color:white;
|
||||
background-color:var(--profil-border);
|
||||
position:absolute;
|
||||
/* top: 1px is important, otherwise it goes over the border of the thumbnail*/
|
||||
top:1px;
|
||||
@@ -18,7 +21,7 @@
|
||||
|
||||
.tabulator-collapsed-row{
|
||||
padding:15px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
background-color: var(--profil-tabulator-shadow);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
.sprachen-entry{
|
||||
background-color: var(--fhc-cis-primary-hover);
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
|
||||
.sprachen-entry:hover {
|
||||
background-color: var(--fhc-primary);
|
||||
}
|
||||
|
||||
[selected="true"].sprachen-entry {
|
||||
background-color: var(--fhc-cis-primary);
|
||||
background-color: var(--fhc-primary-highlight);
|
||||
}
|
||||
|
||||
.sprachen-entry.btn {
|
||||
|
||||
@@ -1,14 +1,44 @@
|
||||
:root{
|
||||
--fhc-calendar-pane-height: calc(100vh - 220px);
|
||||
--fhc-calendar-past: #F5E9D7
|
||||
--calendar-pane-height: calc(100vh - 220px);
|
||||
|
||||
--calendar-primary: var(--fhc-primary);
|
||||
--calendar-border: var(--fhc-border);
|
||||
--calendar-border-highlight: var(--fhc-border-highlight);
|
||||
--calendar-text: var(--fhc-text);
|
||||
--calendar-text-light: var(--fhc-text);
|
||||
--calendar-bg: var(--fhc-background);
|
||||
--calendar-hour-indicator-bg: var(--fhc-background);
|
||||
--calendar-week-page-header-background: var(--fhc-background);
|
||||
--calendar-week-page-header-color: var(--fhc-text);
|
||||
--calendar-week-page-header-border: var(--fhc-border);
|
||||
--calendar-week-page-header-hover-background: var(--fhc-background-highlight);
|
||||
--calendar-all-day-event-background: var(--fhc-background);
|
||||
--calendar-past: var(--fhc-beige-10);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header {
|
||||
background-color: #e9ecef;
|
||||
:root.dark{
|
||||
--calendar-past: var(--fhc-beige-20);
|
||||
}
|
||||
|
||||
.fhc-calendar-hour-indicator{
|
||||
border-top: 1px solid var(--calendar-border);
|
||||
}
|
||||
|
||||
.fhc-calendar-hour-indicator span{
|
||||
background-color: var(--calendar-hour-indicator-bg) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header{
|
||||
color: var(--calendar-text);
|
||||
background-color: var(--calendar-week-page-header-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header > div {
|
||||
border-right: 1px solid var(--calendar-border);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page-header > div:hover{
|
||||
background-color: #dddfe2;
|
||||
background-color: var(--calendar-week-page-header-hover-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-months .col-4,
|
||||
@@ -70,7 +100,7 @@
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event-border{
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event {
|
||||
@@ -86,7 +116,7 @@
|
||||
grid-template-columns:repeat(7,1fr);
|
||||
width:100%;
|
||||
z-index:3;
|
||||
background-color:white;
|
||||
background-color:var(--calendar-all-day-event-background);
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .all-day-event-container::before {
|
||||
@@ -96,12 +126,12 @@
|
||||
bottom: 0;
|
||||
left: -3em;
|
||||
right: 100%;
|
||||
background-color: white;
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
background-color: var(--calendar-all-day-event-background);
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .all-day-event-border {
|
||||
box-shadow: 0 0 0 1px #dee2e6;
|
||||
box-shadow: 0 0 0 1px var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .all-day-event {
|
||||
@@ -117,13 +147,13 @@
|
||||
grid-template-columns: 3em 1fr;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
background-color:white;
|
||||
box-shadow: 1px 1px 0 #dee2e6;
|
||||
background-color:var(--calendar-all-day-event-background);
|
||||
box-shadow: 1px 1px 0 var(--fhc-box-shadow);
|
||||
}
|
||||
|
||||
/* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/
|
||||
.box-shadow-border{
|
||||
box-shadow: 0 0 0 1px #dee2e6 !important;
|
||||
box-shadow: 0 0 0 1px var(--calendar-border) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-no-events-overlay{
|
||||
@@ -138,7 +168,7 @@
|
||||
margin:auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: linear-gradient(120deg, white, gray );
|
||||
background-image: linear-gradient(120deg, var(--fhc-background), var(--fhc-dark) );
|
||||
opacity: .7;
|
||||
}
|
||||
.fhc-calendar-day-page {
|
||||
@@ -151,9 +181,7 @@
|
||||
.fhc-calendar-day-page .flex-column > .flex-grow-1 {
|
||||
padding-left: 3em;
|
||||
}
|
||||
.fhc-calendar-day-page .flex-column {
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .events {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 1fr;
|
||||
@@ -165,11 +193,19 @@
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day{
|
||||
color: var(--calendar-text) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day.fhc-calendar-past:not(.fhc-calendar-month-page-day-focusday) {
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-weekday,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-weekday {
|
||||
border: solid 1px #dee2e6;
|
||||
border: solid 1px var(--calendar-border);
|
||||
}
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day {
|
||||
@@ -179,7 +215,7 @@
|
||||
}
|
||||
.fhc-calendar-lg .fhc-calendar-month-page-day.active,
|
||||
.fhc-calendar-md .fhc-calendar-month-page-day.active {
|
||||
border-color: var(--bs-secondary);
|
||||
border-color: var(--calendar-border-highlight);
|
||||
}
|
||||
/*.fhc-calendar-lg .fhc-calendar-month-page-day .events,*/
|
||||
/*.fhc-calendar-md .fhc-calendar-month-page-day .events {*/
|
||||
@@ -224,8 +260,8 @@
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-weekday:hover {
|
||||
background-color:#37789c;
|
||||
color:white;
|
||||
background-color:var(--calendar-primary);
|
||||
color:var(--calendar-text-light);
|
||||
|
||||
}
|
||||
|
||||
@@ -238,14 +274,14 @@
|
||||
|
||||
|
||||
.fhc-calendar-past {
|
||||
background-color: var(--fhc-calendar-past);
|
||||
border-color: #E8E8E8;
|
||||
background-color: var(--calendar-past);
|
||||
border-color: var(--calendar-border);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fhc-calendar-month-page-day-focusday {
|
||||
border-color: black !important;
|
||||
background-color: white;
|
||||
border-color: var(--calendar-border-highlight) !important;
|
||||
background-color: var(--calendar-bg);
|
||||
position: relative;
|
||||
animation: dash-animation 2.5s linear infinite;
|
||||
}
|
||||
@@ -277,20 +313,20 @@
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
box-shadow: inset 0 0 0 2px black !important;
|
||||
box-shadow: inset 0 0 0 2px var(--calendar-border) !important;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fhc-calendar-sm .fhc-calendar-month-page-day.active .no,
|
||||
.fhc-calendar-xs .fhc-calendar-month-page-day.active .no {
|
||||
background-color: rgba(var(--bs-info-rgb), 0.25);
|
||||
background-color: var(--calendar-primary);
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.fhc-calendar-sm .fhc-calendar-month-page-day:not(.active):hover .no,
|
||||
.fhc-calendar-xs .fhc-calendar-month-page-day:not(.active):hover .no {
|
||||
background-color: rgba(var(--bs-secondary-rgb), 0.25);
|
||||
background-color: var(--calendar-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*.fhc-calendar-sm .fhc-calendar-month-page-day .no,*/
|
||||
@@ -318,6 +354,57 @@
|
||||
}
|
||||
|
||||
.selectedEvent {
|
||||
background-color: #00649c !important;
|
||||
color: white;
|
||||
background-color: var(--calendar-primary) !important;
|
||||
color: var(--calendar-text-light);
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .curTimeIndicator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding-left: 7rem;
|
||||
margin-top: -1px;
|
||||
z-index: 2;
|
||||
border-color: var(--calendar-border)!important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .curTimeIndicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
padding-left: 1rem;
|
||||
margin-top: -1px;
|
||||
z-index: 2;
|
||||
border-color: var(--calendar-border) !important;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .past::before{
|
||||
content:"";
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.fhc-calendar-week-page .overlay {
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.fhc-calendar-day-page .overlay {
|
||||
background-color: var(--calendar-past);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -1,6 +1,21 @@
|
||||
@import './calendar.css';
|
||||
@import './dashboard/news.css';
|
||||
|
||||
:root{
|
||||
--dashboard-danger: var(--fhc-danger);
|
||||
--fhc-dashboard-grid-size: 4;
|
||||
}
|
||||
|
||||
@media(max-width: 577px) {
|
||||
:root {
|
||||
--fhc-dashboard-grid-size: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.core-dashboard a{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.empty-tile-hover {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@@ -22,8 +37,8 @@
|
||||
}
|
||||
|
||||
.alert-danger .form-check-input:checked {
|
||||
border-color: #842029;
|
||||
background-color: #842029;
|
||||
border-color: var(--dashboard-danger);
|
||||
background-color: var(--dashboard-danger);
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -97,6 +112,10 @@
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#deleteBookmark i{
|
||||
color: var(--fhc-danger);
|
||||
}
|
||||
|
||||
.pin:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -141,4 +160,4 @@
|
||||
transform: rotate(0em);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
:root{
|
||||
--news-widget-height: 1;
|
||||
--news-widget-bg: var(--fhc-primary);
|
||||
--news-widget-highlight-color: var(--fhc-primary-highlight);
|
||||
--news-widget-border: var(--fhc-border);
|
||||
--news-widget-border-highlight: var(--fhc-border-highlight);
|
||||
--news-widget-text-light: var(--fhc-text);
|
||||
}
|
||||
|
||||
|
||||
@@ -48,31 +53,26 @@
|
||||
|
||||
.fhc-news-menu-item {
|
||||
padding: 0.375rem;
|
||||
color: var(--fhc-cis-menu-lvl-1-color);
|
||||
color: var(--news-widget-text-light);
|
||||
min-height: 5%;
|
||||
max-height: 30%;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #00649c;
|
||||
border: 1px solid #f1f1f1;
|
||||
background-color: var(--news-widget-bg);
|
||||
border: 1px solid var(--news-widget-border);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
|
||||
}
|
||||
|
||||
.fhc-news-menu-item:hover {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.fhc-news-menu-item:active {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-color-hover);
|
||||
border-color: #f1f1f1;
|
||||
background-color: var(--news-widget-highlight-color);
|
||||
border-color: var(--news-widget-border-highlight);
|
||||
}
|
||||
|
||||
.fhc-news-menu-item.selected {
|
||||
background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
|
||||
border-right: 2px solid #fff;
|
||||
background-color: var(--news-widget-highlight-color);
|
||||
border: 2px solid var(--news-widget-border-highlight);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -5,28 +5,35 @@
|
||||
|
||||
@import url(./switches.css);
|
||||
|
||||
#search-filter{
|
||||
border: 1px solid #ced4da;
|
||||
:root{
|
||||
--searchbar-shadow: var(--fhc-shadow-40);
|
||||
}
|
||||
|
||||
|
||||
.searchbar_settings {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
background-color: #343a40;
|
||||
background-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.searchbar_results {
|
||||
position: absolute;
|
||||
z-index: 9998;
|
||||
background-color: #fff;
|
||||
border: 1px solid lightgrey;
|
||||
background-color: var(--fhc-background);
|
||||
border: 1px solid var(--fhc-border);
|
||||
padding: .5rem;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
|
||||
box-shadow: 2px 2px 4px var(--searchbar-shadow);
|
||||
}
|
||||
|
||||
.searchbar_results a{
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
.searchbar_results a:not(a~i) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.searchbar_results_scroller {
|
||||
@@ -35,7 +42,7 @@
|
||||
}
|
||||
|
||||
.searchbar_result {
|
||||
border-bottom: 1px solid lightgrey;
|
||||
border-bottom: 1px solid var(--fhc-border);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,24 @@
|
||||
:root{
|
||||
--fhc-switches-checked-bg: var(--fhc-light);
|
||||
--fhc-switches-unchecked-bg: var(--fhc-disabled);
|
||||
--fhc-switches-shadow: var(--fhc-shadow-20);
|
||||
}
|
||||
|
||||
.fhc-switches:checked {
|
||||
background-color: white !important;
|
||||
border-color: white !important;
|
||||
background-color: var(--fhc-switches-checked-bg) !important;
|
||||
border-color: transparent;
|
||||
background-position: right center !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.fhc-switches {
|
||||
background-color: var(--bs-gray-600) !important;
|
||||
border-color: var(--bs-gray-600) !important;
|
||||
background-color: var(--fhc-switches-unchecked-bg) !important;
|
||||
border-color: transparent;
|
||||
background-position: left center !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b747a'/%3e%3c/svg%3e") !important;
|
||||
}
|
||||
|
||||
.fhc-switches:focus {
|
||||
box-shadow: 0 0 0 .25rem rgba(108, 117, 125,.25);
|
||||
box-shadow: 0 0 0 .25rem var(--fhc-switches-shadow);
|
||||
}
|
||||
|
||||
/*.form-switch .form-check-input:checked {
|
||||
|
||||
|
||||
rgb(52, 58, 64)*/
|
||||
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
Author : bambi
|
||||
*/
|
||||
:root {
|
||||
--fhc-verticalsplit-vsplitter-bg-color: #eee;
|
||||
--fhc-verticalsplit-vsplitter-border-color: #eee;
|
||||
--fhc-verticalsplit-vsplitter-splitactions-color: #000;
|
||||
--fhc-verticalsplit-vsplitter-bg-color: var(--fhc-background);
|
||||
--fhc-verticalsplit-vsplitter-border-color: var(--fhc-border);
|
||||
--fhc-verticalsplit-vsplitter-splitactions-color: var(--fhc-dark);
|
||||
}
|
||||
|
||||
.verticalsplitted {
|
||||
|
||||
@@ -24,46 +24,6 @@
|
||||
border-color: #DEE2E6 !important;
|
||||
}
|
||||
|
||||
.bg-info-subtle{
|
||||
background-color: #D9EDF7 !important;
|
||||
color: #31708F !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #BCE8F1 !important;
|
||||
}
|
||||
|
||||
.bg-warning-subtle{
|
||||
background-color: #FFF3CD !important;
|
||||
color: #664D03 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #FFE69C !important;
|
||||
}
|
||||
|
||||
.bg-success-subtle{
|
||||
background-color: #D1E7DD !important;
|
||||
color: #0A3622 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #A3CFBB !important;
|
||||
}
|
||||
|
||||
.bg-danger-subtle{
|
||||
background-color: #F8D7DA !important;
|
||||
color: #672B31 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #F1AEB5 !important;
|
||||
}
|
||||
|
||||
.bg-primary-subtle{
|
||||
background-color: #CFE2FF !important;
|
||||
color: #052C65 !important;
|
||||
border-style: solid !important;
|
||||
border-width: 1px !important;
|
||||
border-color: #9EC5FE !important;
|
||||
}
|
||||
|
||||
|
||||
/* html attribute disabled and title don't work together, sets the pointer-event to auto in order to see the title toolip */
|
||||
.btn:disabled {
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
/* css overrides for static cms content */
|
||||
@import './default_cms_fixes.css';
|
||||
|
||||
/* colors */
|
||||
:root {
|
||||
|
||||
--fhc-black-10: black;
|
||||
--fhc-black-20: #1d2024;
|
||||
--fhc-black-30: #212529;
|
||||
--fhc-black-40: #292b2a;
|
||||
--fhc-black-50: #2B3035;
|
||||
--fhc-black-60: #2c3136;
|
||||
--fhc-black-70: #343a40;
|
||||
|
||||
--fhc-white-10: #FFFFFF;
|
||||
--fhc-white-20: #f6f6f6;
|
||||
--fhc-white-30: #eceff1;
|
||||
--fhc-white-40: #e9ecef;
|
||||
--fhc-white-50: #dee2e6;
|
||||
--fhc-white-60: #d5dae0;
|
||||
--fhc-white-70: #ced4da;
|
||||
--fhc-white-80: #c7cbcf;
|
||||
--fhc-white-90: #aeb3b8;
|
||||
|
||||
--fhc-gray-10: #858f97;
|
||||
--fhc-gray-20: #72777A;
|
||||
--fhc-gray-30: #616568;
|
||||
--fhc-gray-40: #495057;
|
||||
|
||||
--fhc-blue-10: #0a57ca;
|
||||
--fhc-blue-20: #79b7d8;
|
||||
/* --fhc-blue-20: #00649c;*/
|
||||
--fhc-blue-30: #00598d;
|
||||
/*--fhc-blue-40: #005585;*/
|
||||
--fhc-blue-40: #61aed8;
|
||||
--fhc-blue-50: #00507e;
|
||||
|
||||
--fhc-blue-primary: #00649c;
|
||||
--fhc-blue-primary-highlight: #005585;
|
||||
|
||||
--fhc-red-10: #842029;
|
||||
--fhc-red-20: #800000;
|
||||
|
||||
--fhc-green-10: #008000;
|
||||
|
||||
--fhc-beige-10: rgba(245, 233, 215, 0.5);
|
||||
--fhc-beige-20: rgba(172, 153, 125, 0.5);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root.light {
|
||||
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-20);
|
||||
--fhc-primary-highlight: var(--fhc-blue-40);
|
||||
|
||||
--fhc-secondary: var(--fhc-white-20);
|
||||
--fhc-secondary-highlight: var(--fhc-white-40);
|
||||
|
||||
--fhc-tertiary: var(--fhc-white-40);
|
||||
--fhc-tertiary-highlight: var(--fhc-white-60);
|
||||
|
||||
--fhc-fourth: var(--fhc-white-60);
|
||||
--fhc-fourth-highlight: var(--fhc-white-80);
|
||||
|
||||
--fhc-fifth: var(--fhc-white-80);
|
||||
--fhc-fifth-highlight: var(--fhc-white-90);
|
||||
|
||||
/*background*/
|
||||
--fhc-background: var(--fhc-white-10);
|
||||
--fhc-background-highlight: var(--fhc-white-60);
|
||||
|
||||
/*text*/
|
||||
--fhc-text: var(--fhc-black-30);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(0, 0, 0, 0.2);
|
||||
--fhc-shadow-40: rgba(0, 0, 0, 0.4);
|
||||
--fhc-shadow-60: rgba(0, 0, 0, 0.6);
|
||||
--fhc-shadow-80: rgba(0, 0, 0, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-white-50);
|
||||
--fhc-border: var(--fhc-white-50);
|
||||
--fhc-border-highlight: var(--fhc-gray-40);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-blue-10);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-10);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-30);
|
||||
--fhc-light: var(--fhc-white-50);
|
||||
|
||||
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-blue-primary-highlight);
|
||||
--fhc-primary-highlight: var(--fhc-blue-primary);
|
||||
|
||||
--fhc-secondary: var(--fhc-black-50);
|
||||
--fhc-secondary-highlight: var(--fhc-black-70);
|
||||
|
||||
--fhc-tertiary: var(--fhc-black-70);
|
||||
--fhc-tertiary-highlight: var(--fhc-gray-40);
|
||||
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
|
||||
/*background*/
|
||||
--fhc-background: var(--fhc-black-30);
|
||||
--fhc-background-highlight: var(--fhc-black-20);
|
||||
|
||||
/*text*/
|
||||
--fhc-text: var(--fhc-white-50);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(125, 125, 125, 0.2);
|
||||
--fhc-shadow-40: rgba(125, 125, 125, 0.4);
|
||||
--fhc-shadow-60: rgba(125, 125, 125, 0.6);
|
||||
--fhc-shadow-80: rgba(125, 125, 125, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-gray-40);
|
||||
--fhc-border: var(--fhc-gray-40);
|
||||
--fhc-border-highlight: var(--fhc-white-90);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-white-70);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-gray-10);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-50);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
}
|
||||
|
||||
:root.purple {
|
||||
|
||||
--fhc-purple-primary: rgb(150, 120, 255);
|
||||
--fhc-purple-primary-highlight: rgb(170, 140, 255);
|
||||
--fhc-purple-5: rgb(245, 240, 255);
|
||||
--fhc-purple-10: rgb(235, 225, 255);
|
||||
--fhc-purple-20: rgb(220, 200, 255);
|
||||
--fhc-purple-30: rgb(200, 170, 255);
|
||||
--fhc-purple-40: rgb(180, 140, 240);
|
||||
--fhc-purple-50: rgb(160, 110, 225);
|
||||
--fhc-purple-60: rgb(140, 90, 210);
|
||||
--fhc-purple-70: rgb(120, 70, 195);
|
||||
--fhc-purple-80: rgb(100, 50, 180);
|
||||
--fhc-purple-90: rgb(80, 30, 165);
|
||||
|
||||
/* fhc base colors */
|
||||
--fhc-primary: var(--fhc-purple-primary-highlight);
|
||||
--fhc-primary-highlight: var(--fhc-purple-primary);
|
||||
|
||||
--fhc-secondary: var(--fhc-purple-20);
|
||||
--fhc-secondary-highlight: var(--fhc-purple-40);
|
||||
|
||||
--fhc-tertiary: var(--fhc-purple-30);
|
||||
--fhc-tertiary-highlight: var(--fhc-purple-50);
|
||||
|
||||
/* background */
|
||||
--fhc-background: var(--fhc-purple-5);
|
||||
--fhc-background-highlight: var(--fhc-purple-10);
|
||||
|
||||
/* text */
|
||||
--fhc-text: var(--fhc-black-20);
|
||||
|
||||
/* shadows and borders */
|
||||
--fhc-shadow-20: rgba(150, 100, 200, 0.2);
|
||||
--fhc-shadow-40: rgba(150, 100, 200, 0.4);
|
||||
--fhc-shadow-60: rgba(150, 100, 200, 0.6);
|
||||
--fhc-shadow-80: rgba(150, 100, 200, 0.8);
|
||||
--fhc-box-shadow: var(--fhc-white-50);
|
||||
--fhc-border: var(--fhc-white-50);
|
||||
--fhc-border-highlight: var(--fhc-gray-40);
|
||||
|
||||
/* links */
|
||||
--fhc-link: var(--fhc-black-50);
|
||||
|
||||
/* disabled */
|
||||
--fhc-disabled: var(--fhc-purple-20);
|
||||
|
||||
/* status colors */
|
||||
--fhc-danger: var(--fhc-red-10);
|
||||
--fhc-success: var(--fhc-green-10);
|
||||
--fhc-dark: var(--fhc-black-20);
|
||||
--fhc-light: var(--fhc-white-70);
|
||||
|
||||
}
|
||||
|
||||
/* fhc primary*/
|
||||
html.dark .bg-primary,
|
||||
html.dark .btn-primary,
|
||||
html.dark .btn-outline-primary {
|
||||
background-color: var(--fhc-primary) !important;
|
||||
border-color: var(--fhc-primary) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-primary:hover,
|
||||
html.dark .btn-primary:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
html.dark .text-primary {
|
||||
color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-primary,
|
||||
html.dark .border-primary {
|
||||
border-color: var(--fhc-primary) !important;
|
||||
}
|
||||
|
||||
/* fhc danger*/
|
||||
html.dark .bg-danger,
|
||||
html.dark .btn-danger,
|
||||
html.dark .btn-outline-danger {
|
||||
background-color: var(--fhc-danger) !important;
|
||||
border-color: var(--fhc-danger) !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html.dark .btn-outline-danger:hover,
|
||||
html.dark .btn-danger:hover {
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
||||
html.dark .text-danger {
|
||||
color: var(--fhc-danger) !important;
|
||||
}
|
||||
|
||||
html.dark .border-danger {
|
||||
border-color: var(--fhc-danger) !important;
|
||||
}
|
||||
|
||||
|
||||
html.dark .tabulator,
|
||||
html.dark .tabulator .tabulator-header,
|
||||
html.dark .tabulator .tabulator-header .tabulator-col,
|
||||
html.dark .tabulator .tabulator-table,
|
||||
html.dark .tabulator .tabulator-row {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
color: var(--fhc-text) !important;
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-cell {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
border-color: var(--fhc-border) !important;
|
||||
}
|
||||
|
||||
html.dark .tabulator .tabulator-header .tabulator-col:hover {
|
||||
background-color: var(--fhc-tertiary) !important;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* css overrides for dark mode */
|
||||
html.dark #fhc-cms-content *[style*="color"] {
|
||||
color: var(--fhc-text) !important;
|
||||
}
|
||||
|
||||
/* fhc cms classes */
|
||||
html.dark #fhc-cms-content a {
|
||||
color: var(--fhc-link);
|
||||
}
|
||||
|
||||
html.dark #fhc-cms-content img {
|
||||
background-color: var(--fhc-text);
|
||||
color: var(--fhc-background);
|
||||
}
|
||||
Reference in New Issue
Block a user