From 5dd8ecd5a16a9b4f419eb5977129e6fcbe5bd7c7 Mon Sep 17 00:00:00 2001
From: survellow <59056368+survellow@users.noreply.github.com>
Date: Thu, 18 Jan 2024 21:55:22 +0100
Subject: [PATCH] dark theme color scheme
---
frontend/package-lock.json | 7 +
frontend/package.json | 1 +
.../public/themes/lara-dark-blue/theme.css | 1640 +++++++++--------
.../public/themes/lara-light-blue/theme.css | 64 +-
frontend/src/components/MenuBar.vue | 22 +-
frontend/src/components/ModuleSelection.vue | 13 +-
frontend/src/main.ts | 2 +
frontend/src/view/DynamicPage.vue | 2 +-
8 files changed, 921 insertions(+), 830 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b5b4674..688b2de 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,6 +18,7 @@
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primevue": "^3.46.0",
+ "source-sans-pro": "^3.6.0",
"vue": "^3.4.11",
"vue-i18n": "^9.9.0",
"vue-router": "^4.2.5"
@@ -4033,6 +4034,12 @@
"source-map": "^0.6.0"
}
},
+ "node_modules/source-sans-pro": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/source-sans-pro/-/source-sans-pro-3.6.0.tgz",
+ "integrity": "sha512-C1RFUGu+YASuqpgDRInTM7Y6OwqeWNOuKn7v0P/4Kh66epTI4PYWwPWP5kdA4l/VqzBAWiqoz5dk0trof73R7w==",
+ "deprecated": "WARNING: This project has been renamed to source-sans. Install using source-sans instead."
+ },
"node_modules/stackback": {
"version": "0.0.2",
"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ef65913..89469bf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primevue": "^3.46.0",
+ "source-sans-pro": "^3.6.0",
"vue": "^3.4.11",
"vue-i18n": "^9.9.0",
"vue-router": "^4.2.5"
diff --git a/frontend/public/themes/lara-dark-blue/theme.css b/frontend/public/themes/lara-dark-blue/theme.css
index 30a3d60..552952f 100644
--- a/frontend/public/themes/lara-dark-blue/theme.css
+++ b/frontend/public/themes/lara-dark-blue/theme.css
@@ -1,17 +1,62 @@
:root {
- --surface-a: #071426;
- --surface-b: #040d19;
+ --htwk-yellow: #ffed00;
+ --htwk-magenta: #e5007d;
+ --htwk-rot: #e53009;
+ --htwk-gruen: #00964e;
+ --htwk-cyan: #009ee3;
+ --htwk-blau: #004699;
+
+ --htwk-silbergrau: #bec3c6;
+ --htwk-silbergrau-80: #cbd3d1;
+ --htwk-silbergrau-60: #d8dedc;
+ --htwk-silbergrau-40: #e5e9e8;
+ --htwk-grau-140: #1b2022;
+ --htwk-grau-120: #242b2d;
+ --htwk-grau: #2e3639;
+ --htwk-grau-80: #575e60;
+ --htwk-grau-60: #818688;
+ --htwk-grau-40: #abaeaf;
+ --htwk-dunkelblau: #022541;
+ --htwk-dunkelblau-80: #345067;
+ --htwk-dunkelblau-60: #677c8d;
+ --htwk-dunkelblau-40: #99a7b3;
+
+ --htwk-schwarz: #000000;
+
+ --button-primary: var(--htwk-yellow);
+ --button-primary-border: var(--htwk-yellow);
+ --button-secondary: color-mix(in srgb,var(--htwk-yellow),#000000 30%);
+ --button-tertiary: color-mix(in srgb,var(--htwk-yellow),#ffffff 50%);
+
+ --info-primary: var(--htwk-blau); /*#449bfc*/
+ --info-secondary: color-mix(in srgb,var(--htwk-blau),#ffffff 15%); /*#6cb0fc*/
+ --info-tertiary: color-mix(in srgb,var(--htwk-blau),#ffffff 30%); /*#7fbafd*/
+
+ --warning-primary: color-mix(in srgb,var(--htwk-yellow),#000000 15%); /*#fbc30c*/
+ --warning-secondary: var(--htwk-yellow); /*#fcd34d #fbcb2d*/
+ --warning-tertiary: color-mix(in srgb,var(--htwk-yellow),#ffffff 50%);/*#fde082*/
+
+ --error-primary: color-mix(in srgb,var(--htwk-magenta),#000000 15%); /*#ff5757*/
+ --error-secondary: var(--htwk-magenta); /*#fca5a5*/
+ --error-tertiary: color-mix(in srgb,var(--htwk-magenta),#ffffff 50%); /*#ffe7e6*/
+
+ --success-primary: var(--htwk-gruen); /*#1ea97c*/
+ --success-secondary: color-mix(in srgb,var(--htwk-gruen),#ffffff 15%); /*#86efac*/
+ --success-tertiary: color-mix(in srgb,var(--htwk-gruen),#ffffff 30%); /*#aaf4c5*/
+
+ --surface-a: var(--htwk-grau);/*#071426*/
+ --surface-b: var(--htwk-schwarz);/*#040d19*/;
--surface-c: rgba(255, 255, 255, 0.03);
- --surface-d: #0b213f;
- --surface-e: #071426;
- --surface-f: #071426;
+ --surface-d: var(--htwk-grau);/*#0b213f*/;
+ --surface-e: var(--htwk-grau);/*#071426*/
+ --surface-f: var(--htwk-grau);/*#071426*/
--text-color: rgba(255, 255, 255, 0.87);
--text-color-secondary: rgba(255, 255, 255, 0.6);
- --primary-color: #93c5fd;
- --primary-color-text: #1c2127;
- --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
+ --primary-color: var(--htwk-yellow); /*#93c5fd*/
+ --primary-color-text: var(--htwk-schwarz); /*#1c2127*/
+ --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica,
Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
- --surface-0: #040d19;
+ --surface-0: var(--htwk-schwarz);/*#040d19*/
--surface-50: #1d2530;
--surface-100: #363d47;
--surface-200: #4f565e;
@@ -31,21 +76,44 @@
--gray-600: #4f565e;
--gray-700: #363d47;
--gray-800: #1d2530;
- --gray-900: #040d19;
+ --gray-900: var(--htwk-schwarz);/*#040d19*/
--content-padding: 1.25rem;
--inline-spacing: 0.5rem;
--border-radius: 6px;
- --surface-ground: #040d19;
- --surface-section: #040d19;
- --surface-card: #071426;
- --surface-overlay: #071426;
- --surface-border: #0b213f;
+ --surface-ground: var(--htwk-grau); /*#040d19*/
+ --surface-section: var(--htwk-grau); /*#040d19*/
+ --surface-card: var(--htwk-grau);/*#071426*/
+ --surface-overlay: var(--htwk-grau);/*#071426*/
+ --surface-border: var(--htwk-dunkelblau-60);/*#0b213f*/
--surface-hover: rgba(255, 255, 255, 0.03);
- --focus-ring: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ --focus-ring: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5) /*rgba(147, 197, 253, 0.5)*/;
--maskbg: rgba(0, 0, 0, 0.4);
- --highlight-bg: rgba(147, 197, 253, 0.16);
+ --highlight-bg: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
--highlight-text-color: rgba(255, 255, 255, 0.87);
color-scheme: dark;
+ background-color: var(--htwk-grau-140);
+}
+
+/** css text selection in magenta */
+::selection {
+ background: var(--htwk-yellow);
+ color: var(--htwk-schwarz);
+}
+
+a {
+ color: var(--htwk-yellow);
+}
+
+a:visited {
+ color: var(--htwk-magenta);
+}
+
+a:hover, a:visited:hover {
+ color: white;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 100;
}
* {
@@ -53,7 +121,7 @@
}
.p-component {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: normal;
@@ -70,7 +138,7 @@
}
.p-error {
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-text-secondary {
@@ -88,14 +156,14 @@
.p-link {
font-size: 1rem;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-radius: 6px;
}
.p-link:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-component-overlay-enter {
@@ -239,7 +307,7 @@
--primary-200: #d1e6fe;
--primary-300: #bcdbfe;
--primary-400: #a8d0fd;
- --primary-500: #93c5fd;
+ --primary-500: var(--htwk-yellow);/*#93c5fd*/
--primary-600: #7da7d7;
--primary-700: #678ab1;
--primary-800: #516c8b;
@@ -253,13 +321,13 @@
right: 3.75rem;
}
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-autocomplete .p-autocomplete-multiple-container {
padding: 0.375rem 0.75rem;
@@ -272,7 +340,7 @@
.p-autocomplete-multiple-container
.p-autocomplete-input-token
input {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: rgba(255, 255, 255, 0.87);
@@ -281,7 +349,7 @@
}
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
padding: 0.375rem 0.75rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -294,17 +362,17 @@
.p-autocomplete
.p-autocomplete-multiple-container
.p-autocomplete-token.p-focus {
- background: #233752;
+ background: var(--htwk-grau-140);
color: rgba(255, 255, 255, 0.87);
}
.p-autocomplete.p-invalid.p-component > .p-inputtext {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-autocomplete-panel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -325,18 +393,18 @@
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-autocomplete-panel
.p-autocomplete-items
.p-autocomplete-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-autocomplete-panel
.p-autocomplete-items
.p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-autocomplete-panel
.p-autocomplete-items
@@ -348,39 +416,39 @@
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
}
.p-calendar.p-invalid.p-component > .p-inputtext {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-datepicker {
padding: 0.5rem;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
}
.p-datepicker:not(.p-datepicker-inline) {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.p-datepicker .p-datepicker-header {
padding: 0.5rem;
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
font-weight: 700;
margin: 0;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau);/*#0b213f*/
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
@@ -407,7 +475,7 @@
.p-datepicker .p-datepicker-header .p-datepicker-next:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datepicker .p-datepicker-header .p-datepicker-title {
line-height: 2rem;
@@ -430,7 +498,7 @@
.p-datepicker-header
.p-datepicker-title
.p-datepicker-month:enabled:hover {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
margin-right: 0.5rem;
@@ -458,31 +526,31 @@
}
.p-datepicker table td > span.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datepicker table td > span:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datepicker table td.p-datepicker-today > span {
background: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-datepicker table td.p-datepicker-today > span.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datepicker .p-datepicker-buttonbar {
padding: 1rem 0;
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
}
.p-datepicker .p-datepicker-buttonbar .p-button {
width: auto;
}
.p-datepicker .p-timepicker {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
padding: 0.5rem;
}
.p-datepicker .p-timepicker button {
@@ -505,7 +573,7 @@
.p-datepicker .p-timepicker button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datepicker .p-timepicker button:last-child {
margin-top: 0.2em;
@@ -529,7 +597,7 @@
}
.p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datepicker .p-yearpicker {
margin: 0.5rem 0;
@@ -541,10 +609,10 @@
}
.p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
- border-left: 1px solid #0b213f;
+ border-left: 1px solid var(--htwk-grau);/*#0b213f*/
padding-right: 0.5rem;
padding-left: 0.5rem;
padding-top: 0;
@@ -569,7 +637,7 @@
span:not(.p-highlight):not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datepicker:not(.p-disabled)
.p-monthpicker
@@ -581,7 +649,7 @@
.p-monthpicker-month:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datepicker:not(.p-disabled)
.p-yearpicker
@@ -593,7 +661,7 @@
.p-yearpicker-year:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
@media screen and (max-width: 769px) {
@@ -603,8 +671,8 @@
}
}
.p-cascadeselect {
- background: #040d19;
- border: 1px solid #0b213f;
+ background: var(--htwk-schwarz);/*#040d19*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -613,13 +681,13 @@
border-radius: 6px;
}
.p-cascadeselect:not(.p-disabled):hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
@@ -641,13 +709,13 @@
border-bottom-right-radius: 6px;
}
.p-cascadeselect.p-invalid.p-component {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-cascadeselect-panel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -669,18 +737,18 @@
.p-cascadeselect-items
.p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-cascadeselect-panel
.p-cascadeselect-items
.p-cascadeselect-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-cascadeselect-panel
.p-cascadeselect-items
.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-cascadeselect-panel
.p-cascadeselect-items
@@ -702,13 +770,13 @@
}
.p-input-filled .p-cascadeselect {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-checkbox {
@@ -716,8 +784,8 @@
height: 22px;
}
.p-checkbox .p-checkbox-box {
- border: 2px solid #0b213f;
- background: #040d19;
+ border: 2px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-schwarz);/*#040d19*/
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.87);
@@ -730,7 +798,7 @@
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
transition-duration: 0.2s;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
font-size: 14px;
}
.p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
@@ -738,50 +806,50 @@
height: 14px;
}
.p-checkbox .p-checkbox-box.p-highlight {
- border-color: #93c5fd;
- background: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
- border-color: #6cb0fc;
- background: #6cb0fc;
- color: #1c2127;
+ border-color: var(--button-secondary);
+ background: var(--button-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-checkbox.p-invalid > .p-checkbox-box {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-input-filled .p-checkbox .p-checkbox-box {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled
.p-checkbox:not(.p-checkbox-disabled)
.p-checkbox-box.p-highlight:hover {
- background: #6cb0fc;
+ background: var(--button-secondary);
}
.p-chips:not(.p-disabled):hover .p-chips-multiple-container {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-chips .p-chips-multiple-container {
padding: 0.375rem 0.75rem;
@@ -789,12 +857,12 @@
.p-chips .p-chips-multiple-container .p-chips-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
- background: #233752;
+ background: var(--htwk-grau-140);
color: rgba(255, 255, 255, 0.87);
}
.p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
@@ -804,7 +872,7 @@
padding: 0.375rem 0;
}
.p-chips .p-chips-multiple-container .p-chips-input-token input {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: rgba(255, 255, 255, 0.87);
@@ -812,7 +880,7 @@
margin: 0;
}
.p-chips.p-invalid.p-component > .p-inputtext {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-colorpicker-preview {
@@ -821,8 +889,8 @@
}
.p-colorpicker-panel {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.p-colorpicker-panel .p-colorpicker-color-handle,
.p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -837,8 +905,8 @@
}
.p-dropdown {
- background: #040d19;
- border: 1px solid #0b213f;
+ background: var(--htwk-schwarz);/*#040d19*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -847,13 +915,13 @@
border-radius: 6px;
}
.p-dropdown:not(.p-disabled):hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-dropdown:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-dropdown.p-dropdown-clearable .p-dropdown-label {
padding-right: 1.75rem;
@@ -882,13 +950,13 @@
right: 3rem;
}
.p-dropdown.p-invalid.p-component {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-dropdown-panel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -897,9 +965,9 @@
}
.p-dropdown-panel .p-dropdown-header {
padding: 0.75rem 1.25rem;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
margin: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
@@ -926,16 +994,16 @@
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-dropdown-panel
.p-dropdown-items
.p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-dropdown-panel
.p-dropdown-items
@@ -947,7 +1015,7 @@
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
@@ -957,25 +1025,25 @@
}
.p-input-filled .p-dropdown {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
background-color: transparent;
}
.p-editor-container .p-editor-toolbar {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-editor-container .p-editor-toolbar.ql-snow {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
stroke: rgba(255, 255, 255, 0.6);
@@ -1031,8 +1099,8 @@
.p-editor-toolbar.ql-snow
.ql-picker.ql-expanded
.ql-picker-options {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -1066,10 +1134,10 @@
border-bottom-left-radius: 6px;
}
.p-editor-container .p-editor-content.ql-snow {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.p-editor-container .p-editor-content .ql-editor {
- background: #040d19;
+ background: var(--htwk-schwarz);/*#040d19*/
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
@@ -1089,17 +1157,17 @@
.p-editor-container .ql-snow.ql-toolbar button.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
- stroke: #93c5fd;
+ stroke: var(--htwk-yellow);/*#93c5fd*/
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
- fill: #93c5fd;
+ fill: var(--htwk-yellow);/*#93c5fd*/
}
.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor-container
@@ -1110,20 +1178,20 @@
.ql-snow.ql-toolbar
.ql-picker-item.ql-selected
.ql-picker-label {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-inputgroup-addon {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
- border-top: 1px solid #0b213f;
- border-left: 1px solid #0b213f;
- border-bottom: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
+ border-left: 1px solid var(--htwk-grau);/*#0b213f*/
+ border-bottom: 1px solid var(--htwk-grau);/*#0b213f*/
padding: 0.75rem 0.75rem;
min-width: 3rem;
}
.p-inputgroup-addon:last-child {
- border-right: 1px solid #0b213f;
+ border-right: 1px solid var(--htwk-grau);/*#0b213f*/
}
.p-inputgroup > .p-component,
@@ -1184,7 +1252,7 @@
}
.p-inputnumber.p-invalid.p-component > .p-inputtext {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-inputswitch {
@@ -1192,7 +1260,7 @@
height: 1.75rem;
}
.p-inputswitch .p-inputswitch-slider {
- background: #233752;
+ background: var(--htwk-grau-140);
transition:
background-color 0.2s,
color 0.2s,
@@ -1215,33 +1283,33 @@
.p-inputswitch.p-focus .p-inputswitch-slider {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
background: rgba(255, 255, 255, 0.87);
}
.p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover
.p-inputswitch-slider {
- background: #7fbafd;
+ background: var(--button-tertiary);
}
.p-inputswitch.p-invalid .p-inputswitch-slider {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-inputtext {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: rgba(255, 255, 255, 0.87);
- background: #040d19;
+ background: var(--htwk-schwarz);/*#040d19*/
padding: 0.75rem 0.75rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -1251,16 +1319,16 @@
border-radius: 6px;
}
.p-inputtext:enabled:hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-inputtext:enabled:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-inputtext.p-invalid.p-component {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-inputtext.p-inputtext-sm {
font-size: 0.875rem;
@@ -1278,7 +1346,7 @@
}
.p-float-label > .p-invalid + label {
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-input-icon-left > svg:first-of-type,
@@ -1322,13 +1390,13 @@
}
.p-input-filled .p-inputtext {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-inputtext:enabled:hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-inputtext:enabled:focus {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-inputtext-sm .p-inputtext {
@@ -1342,9 +1410,9 @@
}
.p-listbox {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
transition:
background-color 0.2s,
@@ -1354,9 +1422,9 @@
}
.p-listbox .p-listbox-header {
padding: 0.75rem 1.25rem;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
margin: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
@@ -1382,13 +1450,13 @@
}
.p-listbox .p-listbox-list .p-listbox-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-listbox .p-listbox-list .p-listbox-item-group {
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
}
.p-listbox .p-listbox-list .p-listbox-empty-message {
@@ -1397,12 +1465,12 @@
background: transparent;
}
.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-listbox:not(.p-disabled)
.p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-listbox:not(.p-disabled)
.p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
@@ -1412,16 +1480,16 @@
.p-listbox.p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-listbox.p-invalid {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-multiselect {
- background: #040d19;
- border: 1px solid #0b213f;
+ background: var(--htwk-schwarz);/*#040d19*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -1430,13 +1498,13 @@
border-radius: 6px;
}
.p-multiselect:not(.p-disabled):hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-multiselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-multiselect .p-multiselect-label {
padding: 0.75rem 0.75rem;
@@ -1452,7 +1520,7 @@
.p-multiselect.p-multiselect-chip .p-multiselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -1469,7 +1537,7 @@
border-bottom-right-radius: 6px;
}
.p-multiselect.p-invalid.p-component {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
@@ -1477,9 +1545,9 @@
}
.p-multiselect-panel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -1488,9 +1556,9 @@
}
.p-multiselect-panel .p-multiselect-header {
padding: 0.75rem 1.25rem;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
margin: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
@@ -1532,7 +1600,7 @@
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-multiselect-panel .p-multiselect-items {
padding: 0.75rem 0;
@@ -1548,18 +1616,18 @@
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-multiselect-panel
.p-multiselect-items
.p-multiselect-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-multiselect-panel
.p-multiselect-items
.p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-multiselect-panel
.p-multiselect-items
@@ -1574,7 +1642,7 @@
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
}
.p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
@@ -1584,24 +1652,24 @@
}
.p-input-filled .p-multiselect {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-multiselect:not(.p-disabled):hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-multiselect:not(.p-disabled).p-focus {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-password.p-invalid.p-component > .p-inputtext {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-password-panel {
padding: 1.25rem;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -1610,7 +1678,7 @@
}
.p-password-panel .p-password-meter {
margin-bottom: 0.5rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-password-panel .p-password-meter .p-password-strength.weak {
background: #eb9a9c;
@@ -1627,8 +1695,8 @@
height: 22px;
}
.p-radiobutton .p-radiobutton-box {
- border: 2px solid #0b213f;
- background: #040d19;
+ border: 2px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-schwarz);/*#040d19*/
width: 22px;
height: 22px;
color: rgba(255, 255, 255, 0.87);
@@ -1640,49 +1708,49 @@
box-shadow 0.2s;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
width: 12px;
height: 12px;
transition-duration: 0.2s;
- background-color: #1c2127;
+ background-color: var(--htwk-schwarz);/*#1c2127*/
}
.p-radiobutton .p-radiobutton-box.p-highlight {
- border-color: #93c5fd;
- background: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
- border-color: #6cb0fc;
- background: #6cb0fc;
- color: #1c2127;
+ border-color: var(--button-primary-border);
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-radiobutton.p-invalid > .p-radiobutton-box {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-radiobutton:focus {
outline: 0 none;
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-input-filled
.p-radiobutton
.p-radiobutton-box.p-highlight:not(.p-disabled):hover {
- background: #6cb0fc;
+ background: var(--button-secondary);
}
.p-rating {
@@ -1707,16 +1775,16 @@
.p-rating .p-rating-item.p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-rating:not(.p-disabled):not(.p-readonly)
.p-rating-item:hover
.p-rating-icon {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-rating:not(.p-disabled):not(.p-readonly)
.p-rating-item:hover
@@ -1725,8 +1793,8 @@
}
.p-selectbutton .p-button {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
@@ -1740,7 +1808,7 @@
}
.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.p-selectbutton
@@ -1752,29 +1820,29 @@
color: rgba(255, 255, 255, 0.6);
}
.p-selectbutton .p-button.p-highlight {
- background: #93c5fd;
- border-color: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-selectbutton .p-button.p-highlight .p-button-icon-left,
.p-selectbutton .p-button.p-highlight .p-button-icon-right {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-selectbutton .p-button.p-highlight:hover {
- background: #7fbafd;
- border-color: #7fbafd;
- color: #1c2127;
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-selectbutton.p-invalid > .p-button {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-slider {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
border: 0 none;
border-radius: 6px;
}
@@ -1795,8 +1863,8 @@
.p-slider .p-slider-handle {
height: 1.143rem;
width: 1.143rem;
- background: #0b213f;
- border: 2px solid #93c5fd;
+ background: var(--htwk-grau);/*#0b213f*/
+ border: 2px solid var(--htwk-yellow);/*#93c5fd*/
border-radius: 50%;
transition:
background-color 0.2s,
@@ -1807,19 +1875,19 @@
.p-slider .p-slider-handle:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-slider .p-slider-range {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-slider:not(.p-disabled) .p-slider-handle:hover {
- background: #93c5fd;
- border-color: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-treeselect {
- background: #040d19;
- border: 1px solid #0b213f;
+ background: var(--htwk-schwarz);/*#040d19*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -1828,13 +1896,13 @@
border-radius: 6px;
}
.p-treeselect:not(.p-disabled):hover {
- border-color: #93c5fd;
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-treeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-treeselect .p-treeselect-label {
padding: 0.75rem 0.75rem;
@@ -1850,7 +1918,7 @@
.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding: 0.375rem 0.75rem;
margin-right: 0.5rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
}
@@ -1862,7 +1930,7 @@
border-bottom-right-radius: 6px;
}
.p-treeselect.p-invalid.p-component {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
@@ -1870,9 +1938,9 @@
}
.p-treeselect-panel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -1889,18 +1957,18 @@
}
.p-input-filled .p-treeselect {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-togglebutton.p-button {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
@@ -1915,12 +1983,12 @@
.p-togglebutton.p-button:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
- border-color: #93c5fd;
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover
@@ -1930,31 +1998,31 @@
color: rgba(255, 255, 255, 0.6);
}
.p-togglebutton.p-button.p-highlight {
- background: #93c5fd;
- border-color: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-togglebutton.p-button.p-highlight .p-button-icon-left,
.p-togglebutton.p-button.p-highlight .p-button-icon-right {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-togglebutton.p-button.p-highlight:hover {
- background: #7fbafd;
- border-color: #7fbafd;
- color: #1c2127;
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-togglebutton.p-button.p-highlight:hover .p-button-icon-left,
.p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-togglebutton.p-button.p-invalid > .p-button {
- border-color: #fca5a5;
+ border-color: var(--error-secondary);
}
.p-button {
- color: #1c2127;
- background: #93c5fd;
- border: 1px solid #93c5fd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border: 1px solid var(--htwk-yellow);/*#93c5fd*/
padding: 0.75rem 1.25rem;
font-size: 1rem;
transition:
@@ -1965,28 +2033,28 @@
border-radius: 6px;
}
.p-button:enabled:hover {
- background: #7fbafd;
- color: #1c2127;
- border-color: #7fbafd;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-tertiary);
}
.p-button:enabled:active {
- background: #6cb0fc;
- color: #1c2127;
- border-color: #6cb0fc;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-primary-border);
}
.p-button.p-button-outlined {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-outlined:enabled:hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-outlined:enabled:active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-outlined.p-button-plain {
@@ -2003,17 +2071,17 @@
}
.p-button.p-button-text {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-button.p-button-text:enabled:hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-button.p-button-text:enabled:active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
@@ -2030,7 +2098,7 @@
.p-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-button .p-button-label {
transition-duration: 0.2s;
@@ -2052,8 +2120,8 @@
min-width: 1rem;
height: 1rem;
line-height: 1rem;
- color: #93c5fd;
- background-color: #1c2127;
+ color: var(--htwk-yellow);/*#93c5fd*/
+ background-color: var(--htwk-schwarz);/*#1c2127*/
}
.p-button.p-button-raised {
box-shadow:
@@ -2113,7 +2181,7 @@
.p-button.p-button-secondary,
.p-buttonset.p-button-secondary > .p-button,
.p-splitbutton.p-button-secondary > .p-button {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
background: #cbd5e1;
border: 1px solid #cbd5e1;
}
@@ -2121,7 +2189,7 @@
.p-buttonset.p-button-secondary > .p-button:enabled:hover,
.p-splitbutton.p-button-secondary > .p-button:enabled:hover {
background: #b0bfd1;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #b0bfd1;
}
.p-button.p-button-secondary:enabled:focus,
@@ -2133,7 +2201,7 @@
.p-buttonset.p-button-secondary > .p-button:enabled:active,
.p-splitbutton.p-button-secondary > .p-button:enabled:active {
background: #95a9c2;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #95a9c2;
}
.p-button.p-button-secondary.p-button-outlined,
@@ -2182,16 +2250,16 @@
.p-button.p-button-info,
.p-buttonset.p-button-info > .p-button,
.p-splitbutton.p-button-info > .p-button {
- color: #1c2127;
- background: #93c5fd;
- border: 1px solid #93c5fd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border: 1px solid var(--htwk-yellow);/*#93c5fd*/
}
.p-button.p-button-info:enabled:hover,
.p-buttonset.p-button-info > .p-button:enabled:hover,
.p-splitbutton.p-button-info > .p-button:enabled:hover {
- background: #6cb0fc;
- color: #1c2127;
- border-color: #6cb0fc;
+ background: var(--info-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--info-secondary);
}
.p-button.p-button-info:enabled:focus,
.p-buttonset.p-button-info > .p-button:enabled:focus,
@@ -2201,105 +2269,105 @@
.p-button.p-button-info:enabled:active,
.p-buttonset.p-button-info > .p-button:enabled:active,
.p-splitbutton.p-button-info > .p-button:enabled:active {
- background: #449bfc;
- color: #1c2127;
- border-color: #449bfc;
+ background: var(--info-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--info-primary);
}
.p-button.p-button-info.p-button-outlined,
.p-buttonset.p-button-info > .p-button.p-button-outlined,
.p-splitbutton.p-button-info > .p-button.p-button-outlined {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:enabled:hover,
.p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover,
.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:enabled:active,
.p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active,
.p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-button.p-button-info.p-button-text,
.p-buttonset.p-button-info > .p-button.p-button-text,
.p-splitbutton.p-button-info > .p-button.p-button-text {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-button.p-button-info.p-button-text:enabled:hover,
.p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover,
.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover {
- background: rgba(147, 197, 253, 0.04);
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
border-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-button.p-button-info.p-button-text:enabled:active,
.p-buttonset.p-button-info > .p-button.p-button-text:enabled:active,
.p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
border-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-button.p-button-success,
.p-buttonset.p-button-success > .p-button,
.p-splitbutton.p-button-success > .p-button {
- color: #1c2127;
- background: #86efac;
- border: 1px solid #86efac;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--success-secondary);
+ border: 1px solid var(--success-secondary);
}
.p-button.p-button-success:enabled:hover,
.p-buttonset.p-button-success > .p-button:enabled:hover,
.p-splitbutton.p-button-success > .p-button:enabled:hover {
background: #65eb95;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #65eb95;
}
.p-button.p-button-success:enabled:focus,
.p-buttonset.p-button-success > .p-button:enabled:focus,
.p-splitbutton.p-button-success > .p-button:enabled:focus {
- box-shadow: 0 0 0 1px #aaf4c5;
+ box-shadow: 0 0 0 1px var(--success-tertiary);
}
.p-button.p-button-success:enabled:active,
.p-buttonset.p-button-success > .p-button:enabled:active,
.p-splitbutton.p-button-success > .p-button:enabled:active {
background: #44e67f;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #44e67f;
}
.p-button.p-button-success.p-button-outlined,
.p-buttonset.p-button-success > .p-button.p-button-outlined,
.p-splitbutton.p-button-success > .p-button.p-button-outlined {
background-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
border: 1px solid;
}
.p-button.p-button-success.p-button-outlined:enabled:hover,
.p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover,
.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover {
background: rgba(134, 239, 172, 0.04);
- color: #86efac;
+ color: var(--success-secondary);
border: 1px solid;
}
.p-button.p-button-success.p-button-outlined:enabled:active,
.p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active,
.p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active {
background: rgba(134, 239, 172, 0.16);
- color: #86efac;
+ color: var(--success-secondary);
border: 1px solid;
}
.p-button.p-button-success.p-button-text,
.p-buttonset.p-button-success > .p-button.p-button-text,
.p-splitbutton.p-button-success > .p-button.p-button-text {
background-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
border-color: transparent;
}
.p-button.p-button-success.p-button-text:enabled:hover,
@@ -2307,68 +2375,68 @@
.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover {
background: rgba(134, 239, 172, 0.04);
border-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
}
.p-button.p-button-success.p-button-text:enabled:active,
.p-buttonset.p-button-success > .p-button.p-button-text:enabled:active,
.p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active {
background: rgba(134, 239, 172, 0.16);
border-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
}
.p-button.p-button-warning,
.p-buttonset.p-button-warning > .p-button,
.p-splitbutton.p-button-warning > .p-button {
- color: #1c2127;
- background: #fcd34d;
- border: 1px solid #fcd34d;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--warning-secondary);
+ border: 1px solid var(--warning-secondary);
}
.p-button.p-button-warning:enabled:hover,
.p-buttonset.p-button-warning > .p-button:enabled:hover,
.p-splitbutton.p-button-warning > .p-button:enabled:hover {
- background: #fbcb2d;
- color: #1c2127;
- border-color: #fbcb2d;
+ background: var(--warning-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--warning-secondary);
}
.p-button.p-button-warning:enabled:focus,
.p-buttonset.p-button-warning > .p-button:enabled:focus,
.p-splitbutton.p-button-warning > .p-button:enabled:focus {
- box-shadow: 0 0 0 1px #fde082;
+ box-shadow: 0 0 0 1px var(--warning-tertiary);
}
.p-button.p-button-warning:enabled:active,
.p-buttonset.p-button-warning > .p-button:enabled:active,
.p-splitbutton.p-button-warning > .p-button:enabled:active {
- background: #fbc30c;
- color: #1c2127;
- border-color: #fbc30c;
+ background: var(--warning-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--warning-primary);
}
.p-button.p-button-warning.p-button-outlined,
.p-buttonset.p-button-warning > .p-button.p-button-outlined,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined {
background-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
border: 1px solid;
}
.p-button.p-button-warning.p-button-outlined:enabled:hover,
.p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover {
background: rgba(252, 211, 77, 0.04);
- color: #fcd34d;
+ color: var(--warning-secondary);
border: 1px solid;
}
.p-button.p-button-warning.p-button-outlined:enabled:active,
.p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active,
.p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active {
background: rgba(252, 211, 77, 0.16);
- color: #fcd34d;
+ color: var(--warning-secondary);
border: 1px solid;
}
.p-button.p-button-warning.p-button-text,
.p-buttonset.p-button-warning > .p-button.p-button-text,
.p-splitbutton.p-button-warning > .p-button.p-button-text {
background-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
border-color: transparent;
}
.p-button.p-button-warning.p-button-text:enabled:hover,
@@ -2376,20 +2444,20 @@
.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover {
background: rgba(252, 211, 77, 0.04);
border-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-button.p-button-warning.p-button-text:enabled:active,
.p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active,
.p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active {
background: rgba(252, 211, 77, 0.16);
border-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-button.p-button-help,
.p-buttonset.p-button-help > .p-button,
.p-splitbutton.p-button-help > .p-button {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
background: #d8b4fe;
border: 1px solid #d8b4fe;
}
@@ -2397,7 +2465,7 @@
.p-buttonset.p-button-help > .p-button:enabled:hover,
.p-splitbutton.p-button-help > .p-button:enabled:hover {
background: #c289fd;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #c289fd;
}
.p-button.p-button-help:enabled:focus,
@@ -2409,7 +2477,7 @@
.p-buttonset.p-button-help > .p-button:enabled:active,
.p-splitbutton.p-button-help > .p-button:enabled:active {
background: #ab5efd;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #ab5efd;
}
.p-button.p-button-help.p-button-outlined,
@@ -2458,15 +2526,15 @@
.p-button.p-button-danger,
.p-buttonset.p-button-danger > .p-button,
.p-splitbutton.p-button-danger > .p-button {
- color: #1c2127;
- background: #fca5a5;
- border: 1px solid #fca5a5;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--error-secondary);
+ border: 1px solid var(--error-secondary);
}
.p-button.p-button-danger:enabled:hover,
.p-buttonset.p-button-danger > .p-button:enabled:hover,
.p-splitbutton.p-button-danger > .p-button:enabled:hover {
background: #fb7d7d;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #fb7d7d;
}
.p-button.p-button-danger:enabled:focus,
@@ -2478,35 +2546,35 @@
.p-buttonset.p-button-danger > .p-button:enabled:active,
.p-splitbutton.p-button-danger > .p-button:enabled:active {
background: #f95454;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
border-color: #f95454;
}
.p-button.p-button-danger.p-button-outlined,
.p-buttonset.p-button-danger > .p-button.p-button-outlined,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined {
background-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
border: 1px solid;
}
.p-button.p-button-danger.p-button-outlined:enabled:hover,
.p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover {
background: rgba(252, 165, 165, 0.04);
- color: #fca5a5;
+ color: var(--error-secondary);
border: 1px solid;
}
.p-button.p-button-danger.p-button-outlined:enabled:active,
.p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active,
.p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active {
background: rgba(252, 165, 165, 0.16);
- color: #fca5a5;
+ color: var(--error-secondary);
border: 1px solid;
}
.p-button.p-button-danger.p-button-text,
.p-buttonset.p-button-danger > .p-button.p-button-text,
.p-splitbutton.p-button-danger > .p-button.p-button-text {
background-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
border-color: transparent;
}
.p-button.p-button-danger.p-button-text:enabled:hover,
@@ -2514,24 +2582,24 @@
.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover {
background: rgba(252, 165, 165, 0.04);
border-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-button.p-button-danger.p-button-text:enabled:active,
.p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active,
.p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active {
background: rgba(252, 165, 165, 0.16);
border-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-button.p-button-link {
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
background: transparent;
border: transparent;
}
.p-button.p-button-link:enabled:hover {
background: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-label {
@@ -2539,12 +2607,12 @@
}
.p-button.p-button-link:enabled:focus {
background: transparent;
- box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 1px rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
border-color: transparent;
}
.p-button.p-button-link:enabled:active {
background: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
@@ -2567,18 +2635,18 @@
.p-speeddial-item.p-focus > .p-speeddial-action {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-speeddial-action {
width: 3rem;
height: 3rem;
background: rgba(255, 255, 255, 0.87);
- color: #040d19;
+ color: var(--htwk-schwarz);/*#040d19*/
}
.p-speeddial-action:hover {
background: rgba(255, 255, 255, 0.6);
- color: #040d19;
+ color: var(--htwk-schwarz);/*#040d19*/
}
.p-speeddial-direction-up .p-speeddial-item {
@@ -2632,20 +2700,20 @@
}
.p-splitbutton.p-button-outlined > .p-button {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-splitbutton.p-button-outlined > .p-button:enabled:hover,
.p-splitbutton.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-outlined > .p-button:enabled:active,
.p-splitbutton.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-outlined.p-button-plain > .p-button {
color: rgba(255, 255, 255, 0.6);
@@ -2665,21 +2733,21 @@
}
.p-splitbutton.p-button-text > .p-button {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-splitbutton.p-button-text > .p-button:enabled:hover,
.p-splitbutton.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-splitbutton.p-button-text > .p-button:enabled:active,
.p-splitbutton.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-splitbutton.p-button-text.p-button-plain > .p-button {
@@ -2770,61 +2838,61 @@
.p-splitbutton.p-button-info.p-button-outlined > .p-button {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border: 1px solid;
}
.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:hover,
.p-splitbutton.p-button-info.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):hover {
- background: rgba(147, 197, 253, 0.04);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-info.p-button-outlined > .p-button:enabled:active,
.p-splitbutton.p-button-info.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):active {
- background: rgba(147, 197, 253, 0.16);
- color: #93c5fd;
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-info.p-button-text > .p-button {
background-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
border-color: transparent;
}
.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:hover,
.p-splitbutton.p-button-info.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):hover {
- background: rgba(147, 197, 253, 0.04);
+ background: rgba(var(--htwk-yellow), 0.04); /*rgba(147, 197, 253, 0.04)*/
border-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-info.p-button-text > .p-button:enabled:active,
.p-splitbutton.p-button-info.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):active {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
border-color: transparent;
- color: #93c5fd;
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-splitbutton.p-button-success.p-button-outlined > .p-button {
background-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
border: 1px solid;
}
.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:hover,
.p-splitbutton.p-button-success.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):hover {
- background: rgba(134, 239, 172, 0.04);
- color: #86efac;
+ background: #86efac0a;
+ color: var(--success-secondary);
}
.p-splitbutton.p-button-success.p-button-outlined > .p-button:enabled:active,
.p-splitbutton.p-button-success.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(134, 239, 172, 0.16);
- color: #86efac;
+ color: var(--success-secondary);
}
.p-splitbutton.p-button-success.p-button-text > .p-button {
background-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
border-color: transparent;
}
.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:hover,
@@ -2832,36 +2900,36 @@
> .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(134, 239, 172, 0.04);
border-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
}
.p-splitbutton.p-button-success.p-button-text > .p-button:enabled:active,
.p-splitbutton.p-button-success.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(134, 239, 172, 0.16);
border-color: transparent;
- color: #86efac;
+ color: var(--success-secondary);
}
.p-splitbutton.p-button-warning.p-button-outlined > .p-button {
background-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
border: 1px solid;
}
.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:hover,
.p-splitbutton.p-button-warning.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(252, 211, 77, 0.04);
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-splitbutton.p-button-warning.p-button-outlined > .p-button:enabled:active,
.p-splitbutton.p-button-warning.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(252, 211, 77, 0.16);
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-splitbutton.p-button-warning.p-button-text > .p-button {
background-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
border-color: transparent;
}
.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:hover,
@@ -2869,14 +2937,14 @@
> .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(252, 211, 77, 0.04);
border-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-splitbutton.p-button-warning.p-button-text > .p-button:enabled:active,
.p-splitbutton.p-button-warning.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(252, 211, 77, 0.16);
border-color: transparent;
- color: #fcd34d;
+ color: var(--warning-secondary);
}
.p-splitbutton.p-button-help.p-button-outlined > .p-button {
@@ -2918,24 +2986,24 @@
.p-splitbutton.p-button-danger.p-button-outlined > .p-button {
background-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
border: 1px solid;
}
.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:hover,
.p-splitbutton.p-button-danger.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(252, 165, 165, 0.04);
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-splitbutton.p-button-danger.p-button-outlined > .p-button:enabled:active,
.p-splitbutton.p-button-danger.p-button-outlined
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(252, 165, 165, 0.16);
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-splitbutton.p-button-danger.p-button-text > .p-button {
background-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
border-color: transparent;
}
.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:hover,
@@ -2943,14 +3011,14 @@
> .p-button:not(button):not(a):not(.p-disabled):hover {
background: rgba(252, 165, 165, 0.04);
border-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-splitbutton.p-button-danger.p-button-text > .p-button:enabled:active,
.p-splitbutton.p-button-danger.p-button-text
> .p-button:not(button):not(a):not(.p-disabled):active {
background: rgba(252, 165, 165, 0.16);
border-color: transparent;
- color: #fca5a5;
+ color: var(--error-secondary);
}
.p-carousel .p-carousel-content .p-carousel-prev,
@@ -2977,7 +3045,7 @@
.p-carousel .p-carousel-content .p-carousel-next:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-carousel .p-carousel-indicators {
padding: 1rem;
@@ -2987,7 +3055,7 @@
margin-bottom: 0.5rem;
}
.p-carousel .p-carousel-indicators .p-carousel-indicator button {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
width: 2rem;
height: 0.5rem;
transition:
@@ -3000,7 +3068,7 @@
background: rgba(255, 255, 255, 0.03);
}
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
@@ -3013,17 +3081,17 @@
border-radius: 0;
}
.p-datatable .p-datatable-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
}
.p-datatable .p-datatable-footer {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
@@ -3031,21 +3099,21 @@
.p-datatable .p-datatable-thead > tr > th {
text-align: left;
padding: 1rem 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
transition: box-shadow 0.2s;
}
.p-datatable .p-datatable-tfoot > tr > td {
text-align: left;
padding: 1rem 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.p-datatable .p-sortable-column .p-sortable-column-icon {
color: rgba(255, 255, 255, 0.6);
@@ -3057,7 +3125,7 @@
min-width: 1.143rem;
line-height: 1.143rem;
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
margin-left: 0.5rem;
}
.p-datatable .p-sortable-column:not(.p-highlight):hover {
@@ -3070,31 +3138,31 @@
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-sortable-column.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-sortable-column.p-highlight:hover {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-sortable-column:focus {
- box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.15rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
outline: 0 none;
}
.p-datatable .p-datatable-tbody > tr {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
transition: box-shadow 0.2s;
}
.p-datatable .p-datatable-tbody > tr > td {
text-align: left;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
@@ -3127,7 +3195,7 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem;
@@ -3136,18 +3204,18 @@
font-weight: 700;
}
.p-datatable .p-datatable-tbody > tr:focus {
- outline: 0.15rem solid rgba(147, 197, 253, 0.5);
+ outline: 0.15rem solid rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
outline-offset: -0.15rem;
}
.p-datatable .p-datatable-tbody > tr.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
- box-shadow: inset 0 2px 0 0 rgba(147, 197, 253, 0.16);
+ box-shadow: inset 0 2px 0 0 rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
- box-shadow: inset 0 -2px 0 0 rgba(147, 197, 253, 0.16);
+ box-shadow: inset 0 -2px 0 0 rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-datatable.p-datatable-hoverable-rows
.p-datatable-tbody
@@ -3156,7 +3224,7 @@
color: rgba(255, 255, 255, 0.87);
}
.p-datatable .p-column-resizer-helper {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-datatable.p-datatable-scrollable
> .p-datatable-wrapper
@@ -3176,7 +3244,7 @@
> .p-virtualscroller
> .p-datatable-table
> .p-datatable-tfoot {
- background-color: #071426;
+ background-color: var(--htwk-grau);/*#071426*/
}
.p-datatable .p-datatable-loading-icon {
font-size: 2rem;
@@ -3271,12 +3339,12 @@
border-width: 0 1px 0 1px;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
- background: #0d1a2c;
+ background: var(--htwk-grau-120);
}
.p-datatable.p-datatable-striped
.p-datatable-tbody
> tr:nth-child(even).p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-datatable.p-datatable-striped
@@ -3331,27 +3399,27 @@
border-radius: 0;
}
.p-dataview .p-dataview-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
}
.p-dataview .p-dataview-content {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border: 0 none;
padding: 0;
}
.p-dataview.p-dataview-list .p-dataview-content > .p-grid > div {
- border: solid #0b213f;
+ border: solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
}
.p-dataview .p-dataview-footer {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
@@ -3388,13 +3456,13 @@
}
.p-column-filter-menu-button.p-column-filter-menu-button-active,
.p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-column-filter-menu-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-column-filter-clear-button {
@@ -3417,13 +3485,13 @@
.p-column-filter-clear-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-column-filter-overlay {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
@@ -3447,7 +3515,7 @@
.p-column-filter-row-items
.p-column-filter-row-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-column-filter-overlay
.p-column-filter-row-items
@@ -3460,25 +3528,25 @@
.p-column-filter-row-item:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.15rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau-140);/*#0b213f*/
margin: 0.25rem 0;
}
.p-column-filter-overlay-menu .p-column-filter-operator {
padding: 0.75rem 1.25rem;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
margin: 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.p-column-filter-overlay-menu .p-column-filter-constraint {
padding: 1.25rem;
- border-bottom: 1px solid #0b213f;
+ border-bottom: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.p-column-filter-overlay-menu
.p-column-filter-constraint
@@ -3505,36 +3573,36 @@
/* FullCalendar 5 */
}
.fc.fc-unthemed .fc-view-container th {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-view-container td.fc-widget-content {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-view-container td.fc-head-container {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.fc.fc-unthemed .fc-view-container .fc-view {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.fc.fc-unthemed .fc-view-container .fc-row {
- border-right: 1px solid #0b213f;
+ border-right: 1px solid var(--htwk-grau);/*#0b213f*/
}
.fc.fc-unthemed .fc-view-container .fc-event {
- background: #7fbafd;
- border: 1px solid #7fbafd;
- color: #1c2127;
+ background: var(--button-primary);
+ border: 1px solid var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-unthemed .fc-view-container .fc-divider {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.fc.fc-unthemed .fc-toolbar .fc-button {
- color: #1c2127;
- background: #93c5fd;
- border: 1px solid #93c5fd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border: 1px solid var(--htwk-yellow);/*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
@@ -3546,19 +3614,19 @@
align-items: center;
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover {
- background: #7fbafd;
- color: #1c2127;
- border-color: #7fbafd;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-tertiary);
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active {
- background: #6cb0fc;
- color: #1c2127;
- border-color: #6cb0fc;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-primary-border);
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left {
font-family: "PrimeIcons" !important;
@@ -3579,13 +3647,13 @@
.fc.fc-unthemed .fc-toolbar .fc-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
@@ -3597,15 +3665,15 @@
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
- background: #93c5fd;
- border-color: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-unthemed
.fc-toolbar
@@ -3616,16 +3684,16 @@
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
- background: #7fbafd;
- border-color: #7fbafd;
- color: #1c2127;
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus,
.fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
z-index: 1;
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button {
@@ -3640,28 +3708,28 @@
border-bottom-right-radius: 6px;
}
.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
}
.fc.fc-theme-standard .fc-view-harness th {
- background: #071426;
- border-color: #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard .fc-view-harness td {
color: rgba(255, 255, 255, 0.87);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
}
.fc.fc-theme-standard .fc-view-harness .fc-view {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.fc.fc-theme-standard .fc-view-harness .fc-popover {
background: none;
border: 0 none;
}
.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard
@@ -3710,44 +3778,44 @@
.fc-popover-close:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
padding: 1.25rem;
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event {
- color: #1c2127;
- background: #7fbafd;
- border-color: #7fbafd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
- background: #7fbafd;
- border-color: #7fbafd;
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
}
.fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard .fc-view-harness .fc-cell-shaded {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button {
- color: #1c2127;
- background: #93c5fd;
- border: 1px solid #93c5fd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border: 1px solid var(--htwk-yellow);/*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
@@ -3757,25 +3825,25 @@
border-radius: 6px;
}
.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover {
- background: #7fbafd;
- color: #1c2127;
- border-color: #7fbafd;
+ background: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-tertiary);
}
.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active {
- background: #6cb0fc;
- color: #1c2127;
- border-color: #6cb0fc;
+ background: var(--button-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-primary-border);
}
.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
opacity: 0.4;
- color: #1c2127;
- background: #93c5fd;
- border: 1px solid #93c5fd;
+ color: var(--htwk-schwarz);/*#1c2127*/
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border: 1px solid var(--htwk-yellow);/*#93c5fd*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left {
font-family: "PrimeIcons" !important;
@@ -3796,13 +3864,13 @@
.fc.fc-theme-standard .fc-toolbar .fc-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button,
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button,
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
@@ -3814,7 +3882,7 @@
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard
@@ -3826,9 +3894,9 @@
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
- background: #93c5fd;
- border-color: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
@@ -3839,9 +3907,9 @@
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
- background: #7fbafd;
- border-color: #7fbafd;
- color: #1c2127;
+ background: var(--button-primary);
+ border-color: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
@@ -3854,7 +3922,7 @@
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
z-index: 1;
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button {
@@ -3870,7 +3938,7 @@
}
.fc.fc-theme-standard .fc-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-orderlist .p-orderlist-controls {
@@ -3880,9 +3948,9 @@
margin-bottom: 0.5rem;
}
.p-orderlist .p-orderlist-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
font-weight: 700;
border-bottom: 0 none;
@@ -3890,8 +3958,8 @@
border-top-left-radius: 6px;
}
.p-orderlist .p-orderlist-list {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 0.75rem 0;
border-bottom-right-radius: 6px;
@@ -3914,14 +3982,14 @@
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-orderlist.p-orderlist-striped
.p-orderlist-list
@@ -3942,7 +4010,7 @@
color: rgba(255, 255, 255, 0.87);
}
.p-organizationchart .p-organizationchart-node-content.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-organizationchart
@@ -3952,19 +4020,19 @@
color: rgba(22, 130, 251, 0.16);
}
.p-organizationchart .p-organizationchart-line-down {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-organizationchart .p-organizationchart-line-left {
- border-right: 1px solid #0b213f;
- border-color: #0b213f;
+ border-right: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ border-color: var(--htwk-grau-140);/*#0b213f*/
}
.p-organizationchart .p-organizationchart-line-top {
- border-top: 1px solid #0b213f;
- border-color: #0b213f;
+ border-top: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ border-color: var(--htwk-grau-140);/*#0b213f*/
}
.p-organizationchart .p-organizationchart-node-content {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 1.25rem;
}
@@ -3976,13 +4044,13 @@
.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-paginator {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
- border: solid #0b213f;
+ border: solid var(--htwk-grau-140);/*#0b213f*/
border-width: 1px;
padding: 0.5rem 1rem;
border-radius: 6px;
@@ -4051,8 +4119,8 @@
border-radius: 6px;
}
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
- background: rgba(147, 197, 253, 0.16);
- border-color: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
+ border-color: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
@@ -4068,9 +4136,9 @@
margin-bottom: 0.5rem;
}
.p-picklist .p-picklist-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
font-weight: 700;
border-bottom: 0 none;
@@ -4078,8 +4146,8 @@
border-top-left-radius: 6px;
}
.p-picklist .p-picklist-list {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 0.75rem 0;
border-bottom-right-radius: 6px;
@@ -4102,14 +4170,14 @@
}
.p-picklist .p-picklist-list .p-picklist-item.p-focus {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-picklist.p-picklist-striped
.p-picklist-list
@@ -4123,14 +4191,14 @@
}
.p-timeline .p-timeline-event-marker {
- border: 2px solid #93c5fd;
+ border: 2px solid var(--htwk-yellow);/*#93c5fd*/
border-radius: 50%;
width: 1rem;
height: 1rem;
- background-color: #1c2127;
+ background-color: var(--htwk-schwarz);/*#1c2127*/
}
.p-timeline .p-timeline-event-connector {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
}
.p-timeline.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline.p-timeline-vertical .p-timeline-event-content {
@@ -4148,8 +4216,8 @@
}
.p-tree {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 1.25rem;
border-radius: 6px;
@@ -4161,7 +4229,7 @@
.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.15rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-tree .p-tree-container .p-treenode .p-treenode-content {
border-radius: 6px;
@@ -4197,7 +4265,7 @@
.p-tree-toggler:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
margin-right: 0.5rem;
@@ -4216,7 +4284,7 @@
color: rgba(255, 255, 255, 0.87);
}
.p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-tree
@@ -4281,17 +4349,17 @@
border-radius: 0;
}
.p-treetable .p-treetable-header {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
}
.p-treetable .p-treetable-footer {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
font-weight: 700;
@@ -4299,24 +4367,24 @@
.p-treetable .p-treetable-thead > tr > th {
text-align: left;
padding: 1rem 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
transition: box-shadow 0.2s;
}
.p-treetable .p-treetable-tfoot > tr > td {
text-align: left;
padding: 1rem 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
font-weight: 700;
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.p-treetable .p-sortable-column {
- outline-color: rgba(147, 197, 253, 0.5);
+ outline-color: rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-treetable .p-sortable-column .p-sortable-column-icon {
color: rgba(255, 255, 255, 0.6);
@@ -4328,7 +4396,7 @@
min-width: 1.143rem;
line-height: 1.143rem;
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
margin-left: 0.5rem;
}
.p-treetable .p-sortable-column:not(.p-highlight):hover {
@@ -4341,20 +4409,20 @@
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-sortable-column.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-treetable-tbody > tr {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
transition: box-shadow 0.2s;
}
.p-treetable .p-treetable-tbody > tr > td {
text-align: left;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 1px 0;
padding: 1rem 1rem;
}
@@ -4379,7 +4447,7 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem;
@@ -4395,11 +4463,11 @@
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-treetable-tbody > tr:focus {
- outline: 0.15rem solid rgba(147, 197, 253, 0.5);
+ outline: 0.15rem solid rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
outline-offset: -0.15rem;
}
.p-treetable .p-treetable-tbody > tr.p-highlight {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
@@ -4421,11 +4489,11 @@
color: rgba(255, 255, 255, 0.87);
}
.p-treetable .p-column-resizer-helper {
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-treetable .p-treetable-scrollable-header,
.p-treetable .p-treetable-scrollable-footer {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
}
.p-treetable .p-treetable-loading-icon {
font-size: 2rem;
@@ -4488,9 +4556,9 @@
.p-accordion .p-accordion-header .p-accordion-header-link {
padding: 1.25rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
font-weight: 700;
border-radius: 6px;
transition: box-shadow 0.2s;
@@ -4506,20 +4574,20 @@
.p-accordion-header-link:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-accordion
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover
.p-accordion-header-link {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.p-accordion
.p-accordion-header:not(.p-disabled).p-highlight
.p-accordion-header-link {
- background: #071426;
- border-color: #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
@@ -4527,14 +4595,14 @@
.p-accordion
.p-accordion-header:not(.p-disabled).p-highlight:hover
.p-accordion-header-link {
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.87);
}
.p-accordion .p-accordion-content {
padding: 1.25rem;
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-top: 0;
border-top-right-radius: 0;
@@ -4547,7 +4615,7 @@
}
.p-card {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
box-shadow:
0 2px 1px -1px rgba(0, 0, 0, 0.2),
@@ -4576,16 +4644,16 @@
}
.p-fieldset {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-radius: 6px;
}
.p-fieldset .p-fieldset-legend {
padding: 1.25rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
font-weight: 700;
border-radius: 6px;
}
@@ -4608,14 +4676,14 @@
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
color: rgba(255, 255, 255, 0.87);
}
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.p-fieldset .p-fieldset-content {
@@ -4623,14 +4691,14 @@
}
.p-divider .p-divider-content {
- background-color: #071426;
+ background-color: var(--htwk-grau);/*#071426*/
}
.p-divider.p-divider-horizontal {
margin: 1.25rem 0;
padding: 0 1.25rem;
}
.p-divider.p-divider-horizontal:before {
- border-top: 1px #0b213f;
+ border-top: 1px var(--htwk-grau);/*#0b213f*/
}
.p-divider.p-divider-horizontal .p-divider-content {
padding: 0 0.5rem;
@@ -4640,16 +4708,16 @@
padding: 1.25rem 0;
}
.p-divider.p-divider-vertical:before {
- border-left: 1px #0b213f;
+ border-left: 1px var(--htwk-grau);/*#0b213f*/
}
.p-divider.p-divider-vertical .p-divider-content {
padding: 0.5rem 0;
}
.p-panel .p-panel-header {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-top-right-radius: 6px;
border-top-left-radius: 6px;
@@ -4677,15 +4745,15 @@
.p-panel .p-panel-header .p-panel-header-icon:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-panel.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.25rem;
}
.p-panel .p-panel-content {
padding: 1.25rem;
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-top: 0 none;
}
@@ -4695,8 +4763,8 @@
}
.p-panel .p-panel-footer {
padding: 0.75rem 1.25rem;
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
@@ -4704,7 +4772,7 @@
}
.p-scrollpanel .p-scrollpanel-bar {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
border: 0 none;
transition:
background-color 0.2s,
@@ -4715,12 +4783,12 @@
.p-scrollpanel .p-scrollpanel-bar:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-splitter {
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
border-radius: 6px;
color: rgba(255, 255, 255, 0.87);
}
@@ -4732,7 +4800,7 @@
background: rgba(255, 255, 255, 0.03);
}
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
transition:
background-color 0.2s,
color 0.2s,
@@ -4742,25 +4810,25 @@
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-splitter .p-splitter-gutter-resizing {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-tabview .p-tabview-nav {
background: transparent;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 2px 0;
}
.p-tabview .p-tabview-nav li {
margin-right: 0;
}
.p-tabview .p-tabview-nav li .p-tabview-nav-link {
- border: solid #0b213f;
+ border: solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 2px 0;
border-color: transparent transparent #0b213f transparent;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
padding: 1.25rem;
font-weight: 700;
@@ -4772,24 +4840,24 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-tabview
.p-tabview-nav
li:not(.p-highlight):not(.p-disabled):hover
.p-tabview-nav-link {
- background: #071426;
- border-color: #93c5fd;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
color: rgba(255, 255, 255, 0.87);
}
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
- background: #071426;
- border-color: #93c5fd;
- color: #93c5fd;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-tabview .p-tabview-nav-btn.p-link {
- background: #071426;
- color: #93c5fd;
+ background: var(--htwk-grau);/*#071426*/
+ color: var(--htwk-yellow);/*#93c5fd*/
width: 3rem;
box-shadow:
0px 3px 1px -2px rgba(0, 0, 0, 0.2),
@@ -4800,10 +4868,10 @@
.p-tabview .p-tabview-nav-btn.p-link:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-tabview .p-tabview-panels {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
padding: 1.25rem;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
@@ -4812,8 +4880,8 @@
}
.p-toolbar {
- background: #071426;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
border-radius: 6px;
gap: 0.5rem;
@@ -4823,9 +4891,9 @@
}
.p-confirm-popup {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
@@ -4849,18 +4917,18 @@
.p-confirm-popup:after {
border: solid transparent;
border-color: rgba(7, 20, 38, 0);
- border-bottom-color: #071426;
+ border-bottom-color: var(--htwk-grau);/*#071426*/
}
.p-confirm-popup:before {
border: solid transparent;
border-color: rgba(11, 33, 63, 0);
- border-bottom-color: #0b213f;
+ border-bottom-color: var(--htwk-grau);/*#0b213f*/
}
.p-confirm-popup.p-confirm-popup-flipped:after {
- border-top-color: #071426;
+ border-top-color: var(--htwk-grau);/*#071426*/
}
.p-confirm-popup.p-confirm-popup-flipped:before {
- border-top-color: #0b213f;
+ border-top-color: var(--htwk-grau);/*#0b213f*/
}
.p-confirm-popup .p-confirm-popup-icon {
font-size: 1.5rem;
@@ -4879,11 +4947,11 @@
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
0px 9px 46px 8px rgba(0, 0, 0, 0.12);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
}
.p-dialog .p-dialog-header {
border-bottom: 0 none;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 1.5rem;
border-top-right-radius: 6px;
@@ -4914,13 +4982,13 @@
.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
margin-right: 0;
}
.p-dialog .p-dialog-content {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 0 1.5rem 2rem 1.5rem;
}
@@ -4930,7 +4998,7 @@
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
padding: 0 1.5rem 1.5rem 1.5rem;
text-align: right;
@@ -4949,9 +5017,9 @@
}
.p-overlaypanel {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
box-shadow:
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
@@ -4962,8 +5030,8 @@
padding: 1.25rem;
}
.p-overlaypanel .p-overlaypanel-close {
- background: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
width: 2rem;
height: 2rem;
transition:
@@ -4976,13 +5044,13 @@
right: -1rem;
}
.p-overlaypanel .p-overlaypanel-close:enabled:hover {
- background: #7fbafd;
- color: #1c2127;
+ background: var(--button-tertiary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-overlaypanel:after {
border: solid transparent;
border-color: rgba(7, 20, 38, 0);
- border-bottom-color: #071426;
+ border-bottom-color: var(--htwk-grau);/*#071426*/
}
.p-overlaypanel:before {
border: solid transparent;
@@ -4990,16 +5058,16 @@
border-bottom-color: #0a1f3c;
}
.p-overlaypanel.p-overlaypanel-flipped:after {
- border-top-color: #071426;
+ border-top-color: var(--htwk-grau);/*#071426*/
}
.p-overlaypanel.p-overlaypanel-flipped:before {
- border-top-color: #0b213f;
+ border-top-color: var(--htwk-grau);/*#0b213f*/
}
.p-sidebar {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0px 11px 15px -7px rgba(0, 0, 0, 0.2),
0px 24px 38px 3px rgba(0, 0, 0, 0.14),
@@ -5031,7 +5099,7 @@
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-sidebar .p-sidebar-header + .p-sidebar-content {
padding-top: 0;
@@ -5041,7 +5109,7 @@
}
.p-tooltip .p-tooltip-text {
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
padding: 0.75rem 0.75rem;
box-shadow:
@@ -5051,22 +5119,22 @@
border-radius: 6px;
}
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
- border-right-color: #0b213f;
+ border-right-color: var(--htwk-grau);/*#0b213f*/
}
.p-tooltip.p-tooltip-left .p-tooltip-arrow {
- border-left-color: #0b213f;
+ border-left-color: var(--htwk-grau);/*#0b213f*/
}
.p-tooltip.p-tooltip-top .p-tooltip-arrow {
- border-top-color: #0b213f;
+ border-top-color: var(--htwk-grau);/*#0b213f*/
}
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
- border-bottom-color: #0b213f;
+ border-bottom-color: var(--htwk-grau);/*#0b213f*/
}
.p-fileupload .p-fileupload-buttonbar {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
padding: 1.25rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-bottom: 0 none;
border-top-right-radius: 6px;
@@ -5076,23 +5144,23 @@
.p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-fileupload .p-fileupload-content {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
padding: 2rem 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-fileupload .p-fileupload-content.p-fileupload-highlight {
- border: 1px dashed #93c5fd;
- background-color: rgba(147, 197, 253, 0.16);
+ border: 1px dashed var(--htwk-yellow);/*#93c5fd*/
+ background-color: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-fileupload .p-fileupload-file {
padding: 1rem;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
gap: 0.5rem;
margin-bottom: 0.5rem;
@@ -5117,19 +5185,19 @@
}
.p-fileupload-choose:not(.p-disabled):hover {
- background: #7fbafd;
- color: #1c2127;
- border-color: #7fbafd;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-tertiary);
}
.p-fileupload-choose:not(.p-disabled):active {
- background: #6cb0fc;
- color: #1c2127;
- border-color: #6cb0fc;
+ background: var(--button-primary);
+ color: var(--htwk-schwarz);/*#1c2127*/
+ border-color: var(--button-primary-border);
}
.p-breadcrumb {
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
padding: 1rem;
}
@@ -5140,7 +5208,7 @@
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
color: rgba(255, 255, 255, 0.87);
@@ -5161,9 +5229,9 @@
.p-contextmenu {
padding: 0.25rem 0;
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5176,8 +5244,8 @@
}
.p-contextmenu .p-submenu-list {
padding: 0.25rem 0;
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5218,7 +5286,7 @@
}
.p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-contextmenu
.p-menuitem.p-highlight
@@ -5240,13 +5308,13 @@
color: rgba(255, 255, 255, 0.87);
}
.p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-contextmenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-contextmenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
@@ -5293,7 +5361,7 @@
color: rgba(255, 255, 255, 0.87);
}
.p-contextmenu .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-contextmenu .p-submenu-icon {
@@ -5320,7 +5388,7 @@
.p-dock .p-dock-item.p-focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.15rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.15rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-dock .p-dock-link {
width: 4rem;
@@ -5385,9 +5453,9 @@
}
.p-megamenu {
padding: 0.5rem;
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
}
.p-megamenu .p-megamenu-root-list {
@@ -5423,7 +5491,7 @@
}
.p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-megamenu
.p-menuitem.p-highlight
@@ -5445,13 +5513,13 @@
color: rgba(255, 255, 255, 0.87);
}
.p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-megamenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-megamenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
@@ -5498,9 +5566,9 @@
color: rgba(255, 255, 255, 0.87);
}
.p-megamenu .p-megamenu-panel {
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5510,7 +5578,7 @@
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
@@ -5520,7 +5588,7 @@
width: 12.5rem;
}
.p-megamenu .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-megamenu.p-megamenu-vertical {
@@ -5601,9 +5669,9 @@
.p-menu {
padding: 0.25rem 0;
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
width: 12.5rem;
}
@@ -5629,7 +5697,7 @@
}
.p-menu .p-menuitem.p-highlight > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-menu
.p-menuitem.p-highlight
@@ -5651,13 +5719,13 @@
color: rgba(255, 255, 255, 0.87);
}
.p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-menu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-menu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
@@ -5704,8 +5772,8 @@
color: rgba(255, 255, 255, 0.87);
}
.p-menu.p-menu-overlay {
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5715,21 +5783,21 @@
margin: 0;
padding: 0.75rem 1.25rem;
color: rgba(255, 255, 255, 0.87);
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
font-weight: 700;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.p-menu .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-menubar {
padding: 0.5rem;
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
}
.p-menubar .p-menubar-root-list {
@@ -5825,7 +5893,7 @@
}
.p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-menubar
.p-menuitem.p-highlight
@@ -5847,13 +5915,13 @@
color: rgba(255, 255, 255, 0.87);
}
.p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-menubar
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-menubar
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
@@ -5901,8 +5969,8 @@
}
.p-menubar .p-submenu-list {
padding: 0.25rem 0;
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5910,7 +5978,7 @@
width: 12.5rem;
}
.p-menubar .p-submenu-list .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-menubar .p-submenu-list .p-submenu-icon {
@@ -5939,14 +6007,14 @@
.p-menubar .p-menubar-button:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-menubar .p-menubar-root-list {
position: absolute;
display: none;
padding: 0.25rem 0;
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -5954,7 +6022,7 @@
width: 100%;
}
.p-menubar .p-menubar-root-list .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-menubar .p-menubar-root-list .p-submenu-icon {
@@ -6076,9 +6144,9 @@
outline: 0 none;
}
.p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
border-radius: 6px;
transition: box-shadow 0.2s;
}
@@ -6109,20 +6177,20 @@
.p-panelmenu-header-content {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-panelmenu
.p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover
.p-panelmenu-header-content {
background: rgba(255, 255, 255, 0.03);
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.p-panelmenu
.p-panelmenu-header:not(.p-disabled).p-highlight
.p-panelmenu-header-content {
- background: #071426;
- border-color: #0b213f;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-grau-140);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
@@ -6131,14 +6199,14 @@
.p-panelmenu
.p-panelmenu-header:not(.p-disabled).p-highlight:hover
.p-panelmenu-header-content {
- border-color: #0b213f;
+ border-color: var(--htwk-grau-140);/*#0b213f*/
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.87);
}
.p-panelmenu .p-panelmenu-content {
padding: 0.25rem 0;
- border: 1px solid #0b213f;
- background: #071426;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
border-top: 0;
border-top-right-radius: 0;
@@ -6193,7 +6261,7 @@
.p-menuitem.p-highlight
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-panelmenu
.p-panelmenu-content
@@ -6221,14 +6289,14 @@
.p-panelmenu-content
.p-menuitem.p-highlight.p-focus
> .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-panelmenu
.p-panelmenu-content
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-panelmenu
.p-panelmenu-content
@@ -6290,7 +6358,7 @@
margin-right: 0.5rem;
}
.p-panelmenu .p-panelmenu-content .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
@@ -6324,10 +6392,10 @@
.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-steps .p-steps-item.p-highlight .p-steps-number {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-steps .p-steps-item.p-highlight .p-steps-title {
@@ -6336,7 +6404,7 @@
}
.p-steps .p-steps-item:before {
content: " ";
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
width: 100%;
top: 50%;
left: 0;
@@ -6347,17 +6415,17 @@
.p-tabmenu .p-tabmenu-nav {
background: transparent;
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 2px 0;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
margin-right: 0;
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
- border: solid #0b213f;
+ border: solid var(--htwk-grau-140);/*#0b213f*/
border-width: 0 0 2px 0;
border-color: transparent transparent #0b213f transparent;
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.6);
padding: 1.25rem;
font-weight: 700;
@@ -6375,33 +6443,33 @@
.p-menuitem-link:not(.p-disabled):focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: inset 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: inset 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-tabmenu
.p-tabmenu-nav
.p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover
.p-menuitem-link {
- background: #071426;
- border-color: #93c5fd;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
color: rgba(255, 255, 255, 0.87);
}
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
- background: #071426;
- border-color: #93c5fd;
- color: #93c5fd;
+ background: var(--htwk-grau);/*#071426*/
+ border-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-yellow);/*#93c5fd*/
}
.p-tieredmenu {
padding: 0.25rem 0;
- background: #091a32;
+ background: var(--htwk-grau); /*#091a32*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
border-radius: 6px;
width: 12.5rem;
}
.p-tieredmenu.p-tieredmenu-overlay {
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -6412,8 +6480,8 @@
}
.p-tieredmenu .p-submenu-list {
padding: 0.25rem 0;
- background: #091a32;
- border: 1px solid #0b213f;
+ background: var(--htwk-grau); /*#091a32*/
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
box-shadow:
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14),
@@ -6453,7 +6521,7 @@
}
.p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-tieredmenu
.p-menuitem.p-highlight
@@ -6475,13 +6543,13 @@
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
- background: rgba(147, 197, 253, 0.24);
+ background: rgba(var(--htwk-yellow), 0.24); /*rgba(147, 197, 253, 0.24)*/
}
.p-tieredmenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
> .p-menuitem-content {
color: rgba(255, 255, 255, 0.87);
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
}
.p-tieredmenu
.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus
@@ -6528,7 +6596,7 @@
color: rgba(255, 255, 255, 0.87);
}
.p-tieredmenu .p-menuitem-separator {
- border-top: 1px solid #0b213f;
+ border-top: 1px solid var(--htwk-grau);/*#0b213f*/
margin: 0.25rem 0;
}
.p-tieredmenu .p-submenu-icon {
@@ -6555,12 +6623,12 @@
}
.p-inline-message.p-inline-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 1px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-inline-message.p-inline-message-success .p-inline-message-icon {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-inline-message.p-inline-message-warn {
background: #fff2e2;
@@ -6572,13 +6640,13 @@
color: #cc8925;
}
.p-inline-message.p-inline-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 1px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-inline-message.p-inline-message-error .p-inline-message-icon {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-inline-message .p-inline-message-icon {
font-size: 1rem;
@@ -6614,7 +6682,7 @@
.p-message .p-message-close:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-message.p-message-info {
background: #e9e9ff;
@@ -6630,15 +6698,15 @@
}
.p-message.p-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 0 0 0 6px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-success .p-message-icon {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-success .p-message-close {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-warn {
background: #fff2e2;
@@ -6653,16 +6721,16 @@
color: #cc8925;
}
.p-message.p-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 0 0 0 6px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message.p-message-error .p-message-icon {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message.p-message-error .p-message-close {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message .p-message-text {
font-size: 1rem;
@@ -6724,7 +6792,7 @@
.p-toast .p-toast-message .p-toast-icon-close:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-toast .p-toast-message.p-toast-message-info {
background: #e9e9ff;
@@ -6738,13 +6806,13 @@
}
.p-toast .p-toast-message.p-toast-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 0 0 0 6px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-toast .p-toast-message.p-toast-message-warn {
background: #fff2e2;
@@ -6757,14 +6825,14 @@
color: #cc8925;
}
.p-toast .p-toast-message.p-toast-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 0 0 0 6px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-galleria .p-galleria-close {
@@ -6823,7 +6891,7 @@
padding: 1rem;
}
.p-galleria .p-galleria-indicators .p-galleria-indicator button {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
width: 1rem;
height: 1rem;
transition:
@@ -6836,7 +6904,7 @@
background: rgba(255, 255, 255, 0.1);
}
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-galleria.p-galleria-indicators-bottom .p-galleria-indicator,
@@ -6866,7 +6934,7 @@
.p-galleria-indicators
.p-galleria-indicator.p-highlight
button {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
color: rgba(255, 255, 255, 0.87);
}
.p-galleria .p-galleria-thumbnail-container {
@@ -6896,7 +6964,7 @@
.p-galleria-thumbnail-item-content:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-galleria-mask {
@@ -6956,7 +7024,7 @@
}
.p-avatar {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
border-radius: 6px;
}
.p-avatar.p-avatar-lg {
@@ -6977,12 +7045,12 @@
}
.p-avatar-group .p-avatar {
- border: 2px solid #071426;
+ border: 2px solid var(--htwk-grau-140);/*#071426*/
}
.p-badge {
- background: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
font-size: 0.75rem;
font-weight: 700;
min-width: 1.5rem;
@@ -6991,23 +7059,23 @@
}
.p-badge.p-badge-secondary {
background-color: #cbd5e1;
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-badge.p-badge-success {
- background-color: #86efac;
- color: #1c2127;
+ background-color: var(--success-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-badge.p-badge-info {
- background-color: #93c5fd;
- color: #1c2127;
+ background-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-badge.p-badge-warning {
- background-color: #fcd34d;
- color: #1c2127;
+ background-color: var(--warning-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-badge.p-badge-danger {
- background-color: #fca5a5;
- color: #1c2127;
+ background-color: var(--error-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-badge.p-badge-lg {
font-size: 1.125rem;
@@ -7023,7 +7091,7 @@
}
.p-chip {
- background-color: #0b213f;
+ background-color: var(--htwk-grau);/*#0b213f*/
color: rgba(255, 255, 255, 0.87);
border-radius: 16px;
padding: 0 0.75rem;
@@ -7053,7 +7121,7 @@
.p-chip .p-chip-remove-icon:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-inplace .p-inplace-display {
@@ -7072,22 +7140,22 @@
.p-inplace .p-inplace-display:focus {
outline: 0 none;
outline-offset: 0;
- box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+ box-shadow: 0 0 0 0.2rem rgba(var(--htwk-yellow), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.p-progressbar {
border: 0 none;
height: 1.5rem;
- background: #0b213f;
+ background: var(--htwk-grau);/*#0b213f*/
border-radius: 6px;
}
.p-progressbar .p-progressbar-value {
border: 0 none;
margin: 0;
- background: #93c5fd;
+ background: var(--htwk-yellow);/*#93c5fd*/
}
.p-progressbar .p-progressbar-label {
- color: #1c2127;
+ color: var(--htwk-schwarz);/*#1c2127*/
line-height: 1.5rem;
}
@@ -7098,7 +7166,7 @@
.p-progress-spinner-circle {
stroke-dasharray: 89, 200;
stroke-dashoffset: 0;
- stroke: #ff5757;
+ stroke: var(--error-primary);
animation:
p-progress-spinner-dash 1.5s ease-in-out infinite,
p-progress-spinner-color 6s ease-in-out infinite;
@@ -7127,13 +7195,13 @@
@keyframes p-progress-spinner-color {
100%,
0% {
- stroke: #ff5757;
+ stroke: var(--error-primary);
}
40% {
stroke: #696cff;
}
66% {
- stroke: #1ea97c;
+ stroke: var(--success-primary);
}
80%,
90% {
@@ -7154,10 +7222,10 @@
box-shadow 0.2s;
}
.p-scrolltop.p-link {
- background: rgba(147, 197, 253, 0.16);
+ background: rgba(var(--htwk-yellow), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
.p-scrolltop.p-link:hover {
- background: rgba(147, 197, 253, 0.3616);
+ background: rgba(var(--htwk-yellow), 0.3616); /*rgba(147, 197, 253, 0.3616)*/
}
.p-scrolltop .p-scrolltop-icon {
font-size: 1.5rem;
@@ -7182,28 +7250,28 @@
}
.p-tag {
- background: #93c5fd;
- color: #1c2127;
+ background: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.4rem;
border-radius: 6px;
}
.p-tag.p-tag-success {
- background-color: #86efac;
- color: #1c2127;
+ background-color: var(--success-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-tag.p-tag-info {
- background-color: #93c5fd;
- color: #1c2127;
+ background-color: var(--htwk-yellow);/*#93c5fd*/
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-tag.p-tag-warning {
- background-color: #fcd34d;
- color: #1c2127;
+ background-color: var(--warning-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-tag.p-tag-danger {
- background-color: #fca5a5;
- color: #1c2127;
+ background-color: var(--error-secondary);
+ color: var(--htwk-schwarz);/*#1c2127*/
}
.p-tag .p-tag-icon {
margin-right: 0.25rem;
@@ -7215,19 +7283,19 @@
}
.p-terminal {
- background: #071426;
+ background: var(--htwk-grau);/*#071426*/
color: rgba(255, 255, 255, 0.87);
- border: 1px solid #0b213f;
+ border: 1px solid var(--htwk-grau-140);/*#0b213f*/
padding: 1.25rem;
}
.p-terminal .p-terminal-input {
font-size: 1rem;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.p-button-label {
- font-weight: 700;
+ font-weight: 400;
}
.p-accordion .p-accordion-header .p-accordion-header-link {
@@ -7245,11 +7313,11 @@
}
.p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
- background-color: #93c5fd;
+ background-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
- background-color: #93c5fd;
+ background-color: var(--htwk-yellow);/*#93c5fd*/
}
.p-button:focus {
@@ -7296,10 +7364,10 @@
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
- box-shadow: inset 0 2px 0 0 #93c5fd;
+ box-shadow: inset 0 2px 0 0 var(--htwk-yellow);/*#93c5fd*/
}
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
- box-shadow: inset 0 -2px 0 0 #93c5fd;
+ box-shadow: inset 0 -2px 0 0 var(--htwk-yellow);/*#93c5fd*/
}
.p-speeddial-item.p-focus > .p-speeddial-action {
diff --git a/frontend/public/themes/lara-light-blue/theme.css b/frontend/public/themes/lara-light-blue/theme.css
index 4979b23..e18e21f 100644
--- a/frontend/public/themes/lara-light-blue/theme.css
+++ b/frontend/public/themes/lara-light-blue/theme.css
@@ -53,7 +53,7 @@
}
.p-component {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
font-weight: normal;
@@ -88,7 +88,7 @@
.p-link {
font-size: 1rem;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-radius: 6px;
}
@@ -272,7 +272,7 @@
.p-autocomplete-multiple-container
.p-autocomplete-input-token
input {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: #495057;
@@ -795,7 +795,7 @@
padding: 0.375rem 0;
}
.p-chips .p-chips-multiple-container .p-chips-input-token input {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: #495057;
@@ -1217,7 +1217,7 @@
}
.p-inputtext {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
color: #495057;
@@ -6486,12 +6486,12 @@
}
.p-inline-message.p-inline-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 0px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-inline-message.p-inline-message-success .p-inline-message-icon {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-inline-message.p-inline-message-warn {
background: #fff2e2;
@@ -6503,13 +6503,13 @@
color: #cc8925;
}
.p-inline-message.p-inline-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 0px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-inline-message.p-inline-message-error .p-inline-message-icon {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-inline-message .p-inline-message-icon {
font-size: 1rem;
@@ -6561,15 +6561,15 @@
}
.p-message.p-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 0 0 0 6px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-success .p-message-icon {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-success .p-message-close {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-message.p-message-warn {
background: #fff2e2;
@@ -6584,16 +6584,16 @@
color: #cc8925;
}
.p-message.p-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 0 0 0 6px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message.p-message-error .p-message-icon {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message.p-message-error .p-message-close {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-message .p-message-text {
font-size: 1rem;
@@ -6669,13 +6669,13 @@
}
.p-toast .p-toast-message.p-toast-message-success {
background: #e4f8f0;
- border: solid #1ea97c;
+ border: solid var(--success-primary);
border-width: 0 0 0 6px;
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
- color: #1ea97c;
+ color: var(--success-primary);
}
.p-toast .p-toast-message.p-toast-message-warn {
background: #fff2e2;
@@ -6688,14 +6688,14 @@
color: #cc8925;
}
.p-toast .p-toast-message.p-toast-message-error {
- background: #ffe7e6;
- border: solid #ff5757;
+ background: var(--error-tertiary);
+ border: solid var(--error-primary);
border-width: 0 0 0 6px;
- color: #ff5757;
+ color: var(--error-primary);
}
.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
- color: #ff5757;
+ color: var(--error-primary);
}
.p-galleria .p-galleria-close {
@@ -7029,7 +7029,7 @@
.p-progress-spinner-circle {
stroke-dasharray: 89, 200;
stroke-dashoffset: 0;
- stroke: #ff5757;
+ stroke: var(--error-primary);
animation:
p-progress-spinner-dash 1.5s ease-in-out infinite,
p-progress-spinner-color 6s ease-in-out infinite;
@@ -7058,13 +7058,13 @@
@keyframes p-progress-spinner-color {
100%,
0% {
- stroke: #ff5757;
+ stroke: var(--error-primary);
}
40% {
stroke: #696cff;
}
66% {
- stroke: #1ea97c;
+ stroke: var(--success-primary);
}
80%,
90% {
@@ -7150,7 +7150,7 @@
}
.p-terminal .p-terminal-input {
font-size: 1rem;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index b37b2be..b41c663 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -19,22 +19,22 @@ const items = computed(() => [
{
label: t("roomFinder"),
icon: "pi pi-fw pi-calendar",
- route: `rooms`,
+ route: "/rooms",
},
{
label: t("faq"),
icon: "pi pi-fw pi-book",
- route: `faq`,
+ route: "/faq",
},
{
label: t("imprint"),
icon: "pi pi-fw pi-id-card",
- route: `imprint`,
+ route: "/imprint",
},
{
label: t("privacy"),
icon: "pi pi-fw pi-exclamation-triangle",
- route: `privacy-policy`,
+ route: "/privacy-policy",
},
]);
@@ -62,6 +62,7 @@ const items = computed(() => [
text
severity="secondary"
@click="navigate"
+ :class="item.route === $route.path ? 'active' : ''"
/>
@@ -79,4 +80,17 @@ const items = computed(() => [
background-color: transparent;
border: none;
}
+
+:deep(.p-button .p-button-label::after) {
+ content: "";
+ display: block;
+ width: 0;
+ height: 2px;
+ background: var(--primary-color);
+ transition: width 0.3s;
+}
+
+:deep(.p-button.active .p-button-label::after) {
+ width: 100%;
+}
diff --git a/frontend/src/components/ModuleSelection.vue b/frontend/src/components/ModuleSelection.vue
index 67ea8f5..054c945 100644
--- a/frontend/src/components/ModuleSelection.vue
+++ b/frontend/src/components/ModuleSelection.vue
@@ -103,14 +103,13 @@ function toggleModule(module: Module) {
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
>
{{ item.name }}
-
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e961b3d..1242a55 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,3 +1,5 @@
+import "source-sans-pro/source-sans-pro.css";
+
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
diff --git a/frontend/src/view/DynamicPage.vue b/frontend/src/view/DynamicPage.vue
index 41390ee..823e960 100644
--- a/frontend/src/view/DynamicPage.vue
+++ b/frontend/src/view/DynamicPage.vue
@@ -27,7 +27,7 @@ const hasContent = computed(() => {