HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-07-30 16:29:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

dark theme color scheme

Browse Source
This commit is contained in:
survellow
2024-01-18 21:55:22 +01:00
parent 45685d99be
commit 5dd8ecd5a1
8 changed files with 921 additions and 830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/package-lock.json generated
View File

@@ -18,6 +18,7 @@
"primeflex": "^3.3.1", "primeflex": "^3.3.1",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primevue": "^3.46.0", "primevue": "^3.46.0",
"source-sans-pro": "^3.6.0",
"vue": "^3.4.11", "vue": "^3.4.11",
"vue-i18n": "^9.9.0", "vue-i18n": "^9.9.0",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"
@@ -4033,6 +4034,12 @@
"source-map": "^0.6.0" "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": { "node_modules/stackback": {
"version": "0.0.2", "version": "0.0.2",
"resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",

1
frontend/package.json
View File

@@ -23,6 +23,7 @@
"primeflex": "^3.3.1", "primeflex": "^3.3.1",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primevue": "^3.46.0", "primevue": "^3.46.0",
"source-sans-pro": "^3.6.0",
"vue": "^3.4.11", "vue": "^3.4.11",
"vue-i18n": "^9.9.0", "vue-i18n": "^9.9.0",
"vue-router": "^4.2.5" "vue-router": "^4.2.5"

1640
frontend/public/themes/lara-dark-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

64
frontend/public/themes/lara-light-blue/theme.css
View File

@@ -53,7 +53,7 @@
} }
.p-component { .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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
font-weight: normal; font-weight: normal;
@@ -88,7 +88,7 @@
.p-link { .p-link {
font-size: 1rem; 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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border-radius: 6px; border-radius: 6px;
} }
@@ -272,7 +272,7 @@
.p-autocomplete-multiple-container .p-autocomplete-multiple-container
.p-autocomplete-input-token .p-autocomplete-input-token
input { 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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
color: #495057; color: #495057;
@@ -795,7 +795,7 @@
padding: 0.375rem 0; padding: 0.375rem 0;
} }
.p-chips .p-chips-multiple-container .p-chips-input-token input { .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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
color: #495057; color: #495057;
@@ -1217,7 +1217,7 @@
} }
.p-inputtext { .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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem; font-size: 1rem;
color: #495057; color: #495057;
@@ -6486,12 +6486,12 @@
} }
.p-inline-message.p-inline-message-success { .p-inline-message.p-inline-message-success {
background: #e4f8f0; background: #e4f8f0;
border: solid #1ea97c; border: solid var(--success-primary);
border-width: 0px; border-width: 0px;
color: #1ea97c; color: var(--success-primary);
} }
.p-inline-message.p-inline-message-success .p-inline-message-icon { .p-inline-message.p-inline-message-success .p-inline-message-icon {
color: #1ea97c; color: var(--success-primary);
} }
.p-inline-message.p-inline-message-warn { .p-inline-message.p-inline-message-warn {
background: #fff2e2; background: #fff2e2;
@@ -6503,13 +6503,13 @@
color: #cc8925; color: #cc8925;
} }
.p-inline-message.p-inline-message-error { .p-inline-message.p-inline-message-error {
background: #ffe7e6; background: var(--error-tertiary);
border: solid #ff5757; border: solid var(--error-primary);
border-width: 0px; border-width: 0px;
color: #ff5757; color: var(--error-primary);
} }
.p-inline-message.p-inline-message-error .p-inline-message-icon { .p-inline-message.p-inline-message-error .p-inline-message-icon {
color: #ff5757; color: var(--error-primary);
} }
.p-inline-message .p-inline-message-icon { .p-inline-message .p-inline-message-icon {
font-size: 1rem; font-size: 1rem;
@@ -6561,15 +6561,15 @@
} }
.p-message.p-message-success { .p-message.p-message-success {
background: #e4f8f0; background: #e4f8f0;
border: solid #1ea97c; border: solid var(--success-primary);
border-width: 0 0 0 6px; border-width: 0 0 0 6px;
color: #1ea97c; color: var(--success-primary);
} }
.p-message.p-message-success .p-message-icon { .p-message.p-message-success .p-message-icon {
color: #1ea97c; color: var(--success-primary);
} }
.p-message.p-message-success .p-message-close { .p-message.p-message-success .p-message-close {
color: #1ea97c; color: var(--success-primary);
} }
.p-message.p-message-warn { .p-message.p-message-warn {
background: #fff2e2; background: #fff2e2;
@@ -6584,16 +6584,16 @@
color: #cc8925; color: #cc8925;
} }
.p-message.p-message-error { .p-message.p-message-error {
background: #ffe7e6; background: var(--error-tertiary);
border: solid #ff5757; border: solid var(--error-primary);
border-width: 0 0 0 6px; border-width: 0 0 0 6px;
color: #ff5757; color: var(--error-primary);
} }
.p-message.p-message-error .p-message-icon { .p-message.p-message-error .p-message-icon {
color: #ff5757; color: var(--error-primary);
} }
.p-message.p-message-error .p-message-close { .p-message.p-message-error .p-message-close {
color: #ff5757; color: var(--error-primary);
} }
.p-message .p-message-text { .p-message .p-message-text {
font-size: 1rem; font-size: 1rem;
@@ -6669,13 +6669,13 @@
} }
.p-toast .p-toast-message.p-toast-message-success { .p-toast .p-toast-message.p-toast-message-success {
background: #e4f8f0; background: #e4f8f0;
border: solid #1ea97c; border: solid var(--success-primary);
border-width: 0 0 0 6px; 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-message-icon,
.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { .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 { .p-toast .p-toast-message.p-toast-message-warn {
background: #fff2e2; background: #fff2e2;
@@ -6688,14 +6688,14 @@
color: #cc8925; color: #cc8925;
} }
.p-toast .p-toast-message.p-toast-message-error { .p-toast .p-toast-message.p-toast-message-error {
background: #ffe7e6; background: var(--error-tertiary);
border: solid #ff5757; border: solid var(--error-primary);
border-width: 0 0 0 6px; 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-message-icon,
.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
color: #ff5757; color: var(--error-primary);
} }
.p-galleria .p-galleria-close { .p-galleria .p-galleria-close {
@@ -7029,7 +7029,7 @@
.p-progress-spinner-circle { .p-progress-spinner-circle {
stroke-dasharray: 89, 200; stroke-dasharray: 89, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke: #ff5757; stroke: var(--error-primary);
animation: animation:
p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-dash 1.5s ease-in-out infinite,
p-progress-spinner-color 6s ease-in-out infinite; p-progress-spinner-color 6s ease-in-out infinite;
@@ -7058,13 +7058,13 @@
@keyframes p-progress-spinner-color { @keyframes p-progress-spinner-color {
100%, 100%,
0% { 0% {
stroke: #ff5757; stroke: var(--error-primary);
} }
40% { 40% {
stroke: #696cff; stroke: #696cff;
} }
66% { 66% {
stroke: #1ea97c; stroke: var(--success-primary);
} }
80%, 80%,
90% { 90% {
@@ -7150,7 +7150,7 @@
} }
.p-terminal .p-terminal-input { .p-terminal .p-terminal-input {
font-size: 1rem; 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"; Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
} }

22
frontend/src/components/MenuBar.vue
View File

@@ -19,22 +19,22 @@ const items = computed(() => [
{ {
label: t("roomFinder"), label: t("roomFinder"),
icon: "pi pi-fw pi-calendar", icon: "pi pi-fw pi-calendar",
route: `rooms`, route: "/rooms",
}, },
{ {
label: t("faq"), label: t("faq"),
icon: "pi pi-fw pi-book", icon: "pi pi-fw pi-book",
route: `faq`, route: "/faq",
}, },
{ {
label: t("imprint"), label: t("imprint"),
icon: "pi pi-fw pi-id-card", icon: "pi pi-fw pi-id-card",
route: `imprint`, route: "/imprint",
}, },
{ {
label: t("privacy"), label: t("privacy"),
icon: "pi pi-fw pi-exclamation-triangle", icon: "pi pi-fw pi-exclamation-triangle",
route: `privacy-policy`, route: "/privacy-policy",
}, },
]); ]);
</script> </script>
@@ -62,6 +62,7 @@ const items = computed(() => [
text text
severity="secondary" severity="secondary"
@click="navigate" @click="navigate"
:class="item.route === $route.path ? 'active' : ''"
/> />
</router-link> </router-link>
</template> </template>
@@ -79,4 +80,17 @@ const items = computed(() => [
background-color: transparent; background-color: transparent;
border: none; 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%;
}
</style> </style>

13
frontend/src/components/ModuleSelection.vue
View File

@@ -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" class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
> >
<p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p> <p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p>
<ToggleButton <Button
class="w-9rem align-self-end my-2" class="w-9rem align-self-end my-2"
off-icon="pi pi-times" :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
:off-label="$t('moduleSelection.unselected')" :label="store.hasModule(item) ? $t('moduleSelection.selected') : $t('moduleSelection.unselected')"
on-icon="pi pi-check" @click="toggleModule(item)"
:on-label="$t('moduleSelection.selected')" outlined
:model-value="store.hasModule(item)" :severity="store.hasModule(item) ? '' : 'secondary'"
@update:model-value="toggleModule(item)"
/> />
</div> </div>
</div> </div>

2
frontend/src/main.ts
View File

@@ -1,3 +1,5 @@
import "source-sans-pro/source-sans-pro.css";
import { createApp } from "vue"; import { createApp } from "vue";
import "./style.css"; import "./style.css";
import App from "./App.vue"; import App from "./App.vue";

2
frontend/src/view/DynamicPage.vue
View File

@@ -27,7 +27,7 @@ const hasContent = computed(() => {
<div <div
class="flex flex-column align-items-center mt-0" class="flex flex-column align-items-center mt-0"
> >
<div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown" <div class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown"
:class="{'md:mt-8': hideContent}" :class="{'md:mt-8': hideContent}"
> >
<h3 class="text-4xl"> <h3 class="text-4xl">