47 green color scheme

This commit is contained in:
survellow
2024-04-02 15:08:42 +02:00
parent ee60fd2f4d
commit b674cf5fe7
12 changed files with 872 additions and 376 deletions

View File

@ -2,7 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link rel="mask-icon" href="/htwk-mask.svg" color="#ffed00" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link
id="theme-link"
rel="stylesheet"

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
frontend/public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="#000000"
fill-opacity="1"
fill-rule="evenodd"
d="M 11.2578 1.16601 L 7.77734 2.55471 L 12.5195 14.4453 L 16 13.0566 Z M 3.45703 1.56445 L 5.78393e-06 2.94337 L 4.74219 14.834 L 8.20117 13.4551 Z" />
</svg>

After

Width:  |  Height:  |  Size: 450 B

View File

@ -3,7 +3,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(1 0 0 1 0 -71)">
<rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#004699" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#004699" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#ffed00" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#ffed00" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 810 B

View File

@ -1,9 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(1 0 0 1 0 -71)">
<rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
</g>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<path
fill="#ffed00"
id="tapes"
d="M 11.2578 1.16601 L 7.77734 2.55471 L 12.5195 14.4453 L 16 13.0566 Z M 3.45703 1.56445 L 5.78393e-06 2.94337 L 4.74219 14.834 L 8.20117 13.4551 Z" />
<style>
#tapes {
fill: #00964e;
}
@media (prefers-color-scheme: dark) {
#tapes {
fill: #ffed00;
}
}
</style>
</svg>

Before

Width:  |  Height:  |  Size: 810 B

After

Width:  |  Height:  |  Size: 575 B

View File

@ -0,0 +1,456 @@
@use 'sass:color';
$primaryColor: #00944c !default;
$primaryLightColor: color.scale($primaryColor, $lightness: 10%, $saturation: -10%) !default;
$primaryDarkColor: color.scale($primaryColor, $lightness: -40%) !default;
$primaryDarkerColor: color.scale($primaryColor, $lightness: -80%) !default;
$primaryTextColor: #ffffff !default;
$highlightBg: color.scale($primaryColor, $lightness: 90%, $saturation: -80%) !default;
$highlightTextColor: $primaryDarkerColor !default;
$highlightFocusBg: rgba($primaryColor, .24) !default;
@import '../_variables';
@import './_fonts';
@import '../../../../theme-base/_components';
@import '../_extensions';
:root {
h1, h2, h3, h4, h5, h6 {
font-weight: 100;
}
.fc {
/* FullCalendar 4 */
/* FullCalendar 5 */
// set the background color of the calendar transparent
--fc-page-bg-color: transparent;
}
.fc.fc-unthemed .fc-view-container th {
background: $primaryTextColor; /*#071426*/
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-view-container td.fc-widget-content {
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-unthemed .fc-view-container td.fc-head-container {
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
}
.fc.fc-unthemed .fc-view-container .fc-view {
background: $primaryTextColor; /*#071426*/
}
.fc.fc-unthemed .fc-view-container .fc-row {
border-right: 1px solid $primaryTextColor; /*#0b213f*/
}
.fc.fc-unthemed .fc-view-container .fc-event {
background: map-get($colors, "primary");
border: 1px solid map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-unthemed .fc-view-container .fc-divider {
background: $primaryTextColor; /*#071426*/
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
}
.fc.fc-unthemed .fc-toolbar .fc-button {
color: $primaryTextColor; /*#1c2127*/
background: map-get($colors, "primary"); /*#93c5fd*/
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
display: flex;
align-items: center;
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover {
background: map-get($colors, "primary");
color: $primaryTextColor; /*#1c2127*/
border-color: map-get($colors, "primary-24");
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active {
background: map-get($colors, "primary");
color: $primaryTextColor; /*#1c2127*/
border-color: map-get($colors, "primary-24");
}
.fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left {
font-family: "PrimeIcons" !important;
text-indent: 0;
font-size: 1rem;
}
.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before {
content: "\e900";
}
.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right {
font-family: "PrimeIcons" !important;
text-indent: 0;
font-size: 1rem;
}
.fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before {
content: "\e901";
}
.fc.fc-unthemed .fc-toolbar .fc-button:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 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: $primaryTextColor; /*#071426*/
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
.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: map-get($colors, "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: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-unthemed
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#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(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
z-index: 1;
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button {
border-radius: 0;
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
}
.fc.fc-theme-standard .fc-view-harness th {
background: $primaryTextColor; /*#071426*/
border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(map-get($colors, "htwk-schwarz"), 0.87);
}
.fc.fc-theme-standard .fc-view-harness td {
color: rgba(map-get($colors, "htwk-schwarz"), 0.87);
border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
}
.fc.fc-theme-standard .fc-view-harness .fc-view {
background: $primaryTextColor; /*#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 map-get($colors, "htwk-grau-140"); /*#0b213f*/
padding: 1.25rem;
background: $primaryTextColor; /*#071426*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close {
opacity: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: "PrimeIcons" !important;
font-size: 1rem;
width: 2rem;
height: 2rem;
color: rgba(255, 255, 255, 0.6);
border: 0 none;
background: transparent;
border-radius: 50%;
transition:
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:before {
content: "\e90b";
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:hover {
color: rgba(255, 255, 255, 0.87);
border-color: transparent;
background: rgba(255, 255, 255, 0.03);
}
.fc.fc-theme-standard
.fc-view-harness
.fc-popover
.fc-popover-header
.fc-popover-close:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 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 map-get($colors, "htwk-grau-140"); /*#0b213f*/
background: $primaryTextColor; /*#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: $primaryTextColor; /*#1c2127*/
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-block-event
.fc-event-main {
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-view-harness
.fc-event.fc-daygrid-dot-event
.fc-daygrid-event-dot {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
}
.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: $primaryTextColor; /*#071426*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button {
color: $primaryTextColor; /*#1c2127*/
background: map-get($colors, "primary"); /*#93c5fd*/
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
font-size: 1rem;
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
border-radius: 6px;
}
.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover {
background: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
border-color: map-get($colors, "primary-24");
}
.fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active {
background: map-get($colors, "htwk-grau-60");
color: $primaryTextColor; /*#1c2127*/
border-color: map-get($colors, "primary-24");
}
.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(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
opacity: 0.4;
color: $primaryTextColor; /*#1c2127*/
background: map-get($colors, "primary"); /*#93c5fd*/
border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left {
font-family: "PrimeIcons" !important;
text-indent: 0;
font-size: 1rem;
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before {
content: "\e900";
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right {
font-family: "PrimeIcons" !important;
text-indent: 0;
font-size: 1rem;
}
.fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before {
content: "\e901";
}
.fc.fc-theme-standard .fc-toolbar .fc-button:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 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: $primaryTextColor; /*#071426*/
border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
transition:
background-color 0.2s,
color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
}
.fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
.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: map-get($colors, "htwk-grau-140"); /*#0b213f*/
color: rgba(255, 255, 255, 0.87);
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active {
background: map-get($colors, "primary"); /*#93c5fd*/
border-color: map-get($colors, "primary"); /*#93c5fd*/
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button.fc-button-active:hover,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button.fc-button-active:hover {
background: map-get($colors, "primary");
border-color: map-get($colors, "primary-24");
color: $primaryTextColor; /*#1c2127*/
}
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-dayGridMonth-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridWeek-button:not(:disabled):focus,
.fc.fc-theme-standard
.fc-toolbar
.fc-button.fc-timeGridDay-button:not(:disabled):focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
z-index: 1;
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button {
border-radius: 0;
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.fc.fc-theme-standard .fc-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -65,8 +65,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
<template #start>
<router-link v-slot="{ navigate }" :to="`/`" custom>
<Button severity="secondary" text class="p-0 mx-2" @click="navigate">
<img v-if="isDark" width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
<img v-else width="50" height="50" src="../../public/htwk-blue.svg" alt="Logo" />
<div alt="Logo" class="logo" />
</Button>
</router-link>
</template>
@ -119,6 +118,15 @@ function handleDarkModeToggled(isDarkVar: boolean) {
border: none;
}
.logo {
background-color: var(--primary-color);
-webkit-mask: url(../../htwk-mask.svg) no-repeat center/contain;
mask: url(../../htwk-mask.svg) no-repeat center/contain;
width: 50px;
height: 50px;
border-radius: 6px;
}
:deep(.p-submenu-list) {
border-radius: 6px;
}