mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2025-07-16 09:38:51 +02:00
feat:#47 finished theme update
This commit is contained in:
Elmar Kresse
9
frontend/public/htwk-blue.svg
Normal file
9
frontend/public/htwk-blue.svg
Normal file
@ -0,0 +1,9 @@
|
||||
<?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="#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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 810 B |
@ -56,11 +56,8 @@ $textColor: $shade000 !default;
|
||||
$textSecondaryColor: $shade100 !default;
|
||||
$borderRadius: 6px !default;
|
||||
$transitionDuration: 0.2s !default;
|
||||
$formElementTransition: background-color $transitionDuration,
|
||||
color $transitionDuration, border-color $transitionDuration,
|
||||
box-shadow $transitionDuration !default;
|
||||
$actionIconTransition: background-color $transitionDuration,
|
||||
color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
|
||||
$listItemTransition: box-shadow $transitionDuration !default;
|
||||
$primeIconFontSize: 1rem !default;
|
||||
$divider: 1px solid $shade600 !default;
|
||||
@ -68,7 +65,7 @@ $inlineSpacing: 0.5rem !default; //spacing between inline elements
|
||||
$disabledOpacity: 0.4 !default; //opacity of a disabled item
|
||||
$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
|
||||
$loadingIconFontSize: 2rem !default;
|
||||
$errorColor: #fca5a5 !default;
|
||||
$errorColor: map-get($colors, "htwk-rot") !default;
|
||||
|
||||
//scale
|
||||
$scaleSM: 0.875 !default;
|
||||
|
||||
@ -21,6 +21,7 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
|
||||
.fc {
|
||||
/* FullCalendar 4 */
|
||||
/* FullCalendar 5 */
|
||||
--fc-page-bg-color: transparent; /*#071426*/
|
||||
}
|
||||
|
||||
.fc.fc-unthemed .fc-view-container th {
|
||||
|
||||
@ -1,16 +1,41 @@
|
||||
$colors: (
|
||||
"blue": #3B82F6,
|
||||
"green": #22C55E,
|
||||
"yellow": #EAB308,
|
||||
"cyan": #06B6D4,
|
||||
"pink": #EC4899,
|
||||
"indigo": #6366F1,
|
||||
"teal": #14B8A6,
|
||||
"orange": #F97316,
|
||||
"bluegray": #64748B,
|
||||
"purple": #A855F7,
|
||||
"red": #FF3D32,
|
||||
"primary": $primaryColor
|
||||
"blue": #004699,
|
||||
"green": #00964e,
|
||||
"yellow": #ffed00,
|
||||
"cyan": #009ee3,
|
||||
"pink": #e5007d,
|
||||
"indigo": #6366f1,
|
||||
"teal": #14b8a6,
|
||||
"orange": #f97316,
|
||||
"bluegray": #64748b,
|
||||
"purple": #a855f7,
|
||||
"red": #e53009,
|
||||
"primary": $primaryColor,
|
||||
"primary-24": rgba($primaryColor, 0.24),
|
||||
"htwk-yellow": #ffed00,
|
||||
"htwk-yellow-24": rgba(255, 237, 0, 0.24),
|
||||
"htwk-yellow-16": rgba(255, 237, 0, 0.16),
|
||||
"htwk-yellow-01": rgba(255, 237, 0, 0.1),
|
||||
"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,
|
||||
);
|
||||
|
||||
//reused color variables
|
||||
@ -26,7 +51,7 @@ $shade800:#374151 !default; //unused
|
||||
$shade900:#1f2937 !default; //unused
|
||||
|
||||
//global
|
||||
$fontFamily:'Inter var', sans-serif !default;
|
||||
$fontFamily:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
|
||||
$fontSize:1rem !default;
|
||||
$fontWeight:normal !default;
|
||||
$textColor:$shade700 !default;
|
||||
@ -42,7 +67,7 @@ $inlineSpacing:.5rem !default;
|
||||
$disabledOpacity:.6 !default;
|
||||
$maskBg:rgba(0, 0, 0, 0.4) !default;
|
||||
$loadingIconFontSize:2rem !default;
|
||||
$errorColor:#e24c4c !default;
|
||||
$errorColor: map-get($colors, "htwk-rot") !default;
|
||||
|
||||
//scale
|
||||
$scaleSM:0.875 !default;
|
||||
@ -155,16 +180,16 @@ $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
|
||||
$secondaryButtonActiveBorderColor:#334155 !default;
|
||||
$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
|
||||
|
||||
$infoButtonBg:#0ea5e9 !default;
|
||||
$infoButtonBg: map-get($colors, "primary") !default;
|
||||
$infoButtonTextColor:#ffffff !default;
|
||||
$infoButtonBorder:1px solid #0ea5e9 !default;
|
||||
$infoButtonHoverBg:#0284c7 !default;
|
||||
$infoButtonBorder:1px solid map-get($colors, "primary") !default;
|
||||
$infoButtonHoverBg: #0257c7 !default;
|
||||
$infoButtonTextHoverColor:$infoButtonTextColor !default;
|
||||
$infoButtonHoverBorderColor:#0284c7 !default;
|
||||
$infoButtonActiveBg:#0369a1 !default;
|
||||
$infoButtonHoverBorderColor:#rgba(map-get($colors, "primary"), .8) !default;
|
||||
$infoButtonActiveBg:rgba(map-get($colors, "primary"), .8) !default;
|
||||
$infoButtonTextActiveColor:$infoButtonTextColor !default;
|
||||
$infoButtonActiveBorderColor:#0369a1 !default;
|
||||
$infoButtonFocusShadow:0 0 0 0.2rem #BFDBFE !default;
|
||||
$infoButtonActiveBorderColor:rgba(map-get($colors, "primary"), .9) !default;
|
||||
$infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "primary"), .7) !default;
|
||||
|
||||
$successButtonBg:#22C55E !default;
|
||||
$successButtonTextColor:#ffffff !default;
|
||||
@ -316,7 +341,7 @@ $calendarHeaderBg:$shade000 !default;
|
||||
$calendarInlineHeaderBg:$calendarBg !default;
|
||||
$calendarHeaderBorder:1px solid $shade300 !default;
|
||||
$calendarHeaderTextColor:$shade700 !default;
|
||||
$calendarHeaderFontWeight:600 !default;
|
||||
$calendarHeaderFontWeight:100 !default;
|
||||
$calendarHeaderCellPadding:.5rem !default;
|
||||
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
|
||||
|
||||
@ -358,7 +383,7 @@ $panelHeaderBorderColor:$shade300 !default;
|
||||
$panelHeaderBorder:1px solid $shade300 !default;
|
||||
$panelHeaderBg:$shade100 !default;
|
||||
$panelHeaderTextColor:$shade800 !default;
|
||||
$panelHeaderFontWeight:700 !default;
|
||||
$panelHeaderFontWeight:100 !default;
|
||||
$panelHeaderPadding:1.25rem !default;
|
||||
$panelToggleableHeaderPadding:.75rem 1.25rem !default;
|
||||
|
||||
@ -445,8 +470,8 @@ $scrollPanelTrackBg:$shade100 !default;
|
||||
//card
|
||||
$cardBodyPadding:1.25rem !default;
|
||||
$cardTitleFontSize:1.5rem !default;
|
||||
$cardTitleFontWeight:700 !default;
|
||||
$cardSubTitleFontWeight:400 !default;
|
||||
$cardTitleFontWeight: 0 !default;
|
||||
$cardSubTitleFontWeight:100 !default;
|
||||
$cardSubTitleColor:$shade600 !default;
|
||||
$cardContentPadding:1.25rem 0 !default;
|
||||
$cardFooterPadding:1.25rem 0 0 0 !default;
|
||||
@ -485,13 +510,13 @@ $tableHeaderBorder:1px solid $shade300 !default;
|
||||
$tableHeaderBorderWidth:1px 0 1px 0 !default;
|
||||
$tableHeaderBg:$shade100 !default;
|
||||
$tableHeaderTextColor:$shade800 !default;
|
||||
$tableHeaderFontWeight:700 !default;
|
||||
$tableHeaderFontWeight: 0 !default;
|
||||
$tableHeaderPadding:1rem 1rem !default;
|
||||
|
||||
$tableHeaderCellPadding:1rem 1rem !default;
|
||||
$tableHeaderCellBg:$shade100 !default;
|
||||
$tableHeaderCellTextColor:$shade800 !default;
|
||||
$tableHeaderCellFontWeight:700 !default;
|
||||
$tableHeaderCellFontWeight: 0 !default;
|
||||
$tableHeaderCellBorder:1px solid $shade300 !default;
|
||||
$tableHeaderCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableHeaderCellHoverBg:$shade200 !default;
|
||||
@ -516,7 +541,7 @@ $tableBodyCellPadding:1rem 1rem !default;
|
||||
$tableFooterCellPadding:1rem 1rem !default;
|
||||
$tableFooterCellBg:$shade100 !default;
|
||||
$tableFooterCellTextColor:$shade800 !default;
|
||||
$tableFooterCellFontWeight:700 !default;
|
||||
$tableFooterCellFontWeight: 0 !default;
|
||||
$tableFooterCellBorder:1px solid $shade300 !default;
|
||||
$tableFooterCellBorderWidth:0 0 1px 0 !default;
|
||||
$tableResizerHelperBg:$primaryColor !default;
|
||||
@ -525,7 +550,7 @@ $tableFooterBorder:1px solid $shade300 !default;
|
||||
$tableFooterBorderWidth:0 0 1px 0 !default;
|
||||
$tableFooterBg:$shade100 !default;
|
||||
$tableFooterTextColor:$shade800 !default;
|
||||
$tableFooterFontWeight:700 !default;
|
||||
$tableFooterFontWeight: 0 !default;
|
||||
$tableFooterPadding:1rem 1rem !default;
|
||||
|
||||
$tableCellContentAlignment:left !default;
|
||||
@ -566,7 +591,7 @@ $messagePadding:1.25rem 1.75rem !default;
|
||||
$messageBorderWidth:0 0 0 6px !default;
|
||||
$messageIconFontSize:1.5rem !default;
|
||||
$messageTextFontSize:1rem !default;
|
||||
$messageTextFontWeight:500 !default;
|
||||
$messageTextFontWeight: 0 !default;
|
||||
|
||||
//inline message
|
||||
$inlineMessagePadding:$inputPadding !default;
|
||||
@ -583,7 +608,7 @@ $toastPadding:1rem !default;
|
||||
$toastBorderWidth:0 0 0 6px !default;
|
||||
$toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
|
||||
$toastOpacity:1 !default;
|
||||
$toastTitleFontWeight:700 !default;
|
||||
$toastTitleFontWeight: 0 !default;
|
||||
$toastDetailMargin:$inlineSpacing 0 0 0 !default;
|
||||
|
||||
//severities
|
||||
@ -621,7 +646,7 @@ $overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
|
||||
$dialogHeaderBg:$shade000 !default;
|
||||
$dialogHeaderBorder:0 none !default;
|
||||
$dialogHeaderTextColor:$shade800 !default;
|
||||
$dialogHeaderFontWeight:700 !default;
|
||||
$dialogHeaderFontWeight: 0 !default;
|
||||
$dialogHeaderFontSize:1.25rem !default;
|
||||
$dialogHeaderPadding:1.5rem !default;
|
||||
$dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
|
||||
@ -646,7 +671,7 @@ $stepsItemNumberHeight:2rem !default;
|
||||
$stepsItemNumberFontSize:1.143rem !default;
|
||||
$stepsItemNumberColor:$shade700 !default;
|
||||
$stepsItemNumberBorderRadius:50% !default;
|
||||
$stepsItemActiveFontWeight:700 !default;
|
||||
$stepsItemActiveFontWeight: 0 !default;
|
||||
|
||||
//progressbar, progressspinner
|
||||
$progressBarHeight:1.5rem !default;
|
||||
@ -856,10 +881,10 @@ $imagePreviewActionIconFontSize:1.5rem !default;
|
||||
$imagePreviewActionIconBorderRadius:50% !default;
|
||||
|
||||
:root {
|
||||
font-family:'Inter var', sans-serif;
|
||||
font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||
font-variation-settings: normal;
|
||||
--font-family:'Inter var', sans-serif;
|
||||
--font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
||||
--font-feature-settings: "cv02","cv03","cv04","cv11";
|
||||
--surface-a:#{$shade000};
|
||||
--surface-b:#{$shade100};
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@ -1,7 +1,7 @@
|
||||
$primaryColor: #3B82F6 !default;
|
||||
$primaryLightColor: #BFDBFE !default;
|
||||
$primaryDarkColor: #2563eb !default;
|
||||
$primaryDarkerColor: #1D4ED8 !default;
|
||||
$primaryColor: #004699 !default;
|
||||
$primaryLightColor: #3276bd !default;
|
||||
$primaryDarkColor: #002d67 !default;
|
||||
$primaryDarkerColor: #022541 !default;
|
||||
$primaryTextColor: #ffffff !default;
|
||||
|
||||
$highlightBg: #EFF6FF !default;
|
||||
@ -11,4 +11,444 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
|
||||
@import '../_variables';
|
||||
@import './_fonts';
|
||||
@import '../../../../theme-base/_components';
|
||||
@import '../_extensions';
|
||||
@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)*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -632,7 +632,7 @@
|
||||
opacity: 0.4;
|
||||
}
|
||||
.p-error {
|
||||
color: #fca5a5;
|
||||
color: #e53009;
|
||||
}
|
||||
.p-text-secondary {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
@ -803,7 +803,7 @@
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
}
|
||||
.p-autocomplete.p-invalid.p-component > .p-inputtext {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-autocomplete-panel {
|
||||
background: #2e3639;
|
||||
@ -975,7 +975,7 @@
|
||||
min-width: 80vw;
|
||||
}
|
||||
.p-calendar.p-invalid.p-component > .p-inputtext {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
|
||||
outline: 0 none;
|
||||
@ -1325,7 +1325,7 @@
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.p-cascadeselect.p-invalid.p-component {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-cascadeselect-panel {
|
||||
background: #2e3639;
|
||||
@ -1439,7 +1439,7 @@
|
||||
border-color: #ffed00;
|
||||
}
|
||||
.p-checkbox.p-invalid > .p-checkbox-box {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-checkbox.p-variant-filled .p-checkbox-box {
|
||||
background-color: #1b2022;
|
||||
@ -1543,7 +1543,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
.p-chips.p-invalid.p-component > .p-inputtext {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
|
||||
@ -1698,7 +1698,7 @@
|
||||
right: 3rem;
|
||||
}
|
||||
.p-dropdown.p-invalid.p-component {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-dropdown-panel {
|
||||
background: #2e3639;
|
||||
@ -2007,7 +2007,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
.p-inputnumber.p-invalid.p-component > .p-inputtext {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-inputnumber.p-variant-filled > .p-inputnumber-input {
|
||||
background-color: #1b2022;
|
||||
@ -2090,7 +2090,7 @@
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 237, 0, 0.5);
|
||||
}
|
||||
.p-inputswitch.p-invalid > .p-inputswitch-slider {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-fluid .p-inputtext {
|
||||
width: 100%;
|
||||
@ -2118,7 +2118,7 @@
|
||||
border-color: #ffed00;
|
||||
}
|
||||
.p-inputtext.p-invalid.p-component {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-inputtext.p-variant-filled {
|
||||
background-color: #1b2022;
|
||||
@ -2143,7 +2143,7 @@
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.p-float-label > .p-invalid + label {
|
||||
color: #fca5a5;
|
||||
color: #e53009;
|
||||
}
|
||||
.p-icon-field-left > .p-inputtext {
|
||||
padding-left: 2.5rem;
|
||||
@ -2308,7 +2308,7 @@
|
||||
border-color: #ffed00;
|
||||
}
|
||||
.p-listbox.p-invalid {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-multiselect {
|
||||
display: inline-flex;
|
||||
@ -2448,7 +2448,7 @@
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.p-multiselect.p-invalid.p-component {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
|
||||
padding: 0.375rem 0.75rem;
|
||||
@ -2566,7 +2566,7 @@
|
||||
display: none;
|
||||
}
|
||||
.p-password.p-invalid.p-component > .p-inputtext {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-password-panel {
|
||||
padding: 1.25rem;
|
||||
@ -2670,7 +2670,7 @@
|
||||
border-color: #ffed00;
|
||||
}
|
||||
.p-radiobutton.p-invalid > .p-radiobutton-box {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-radiobutton.p-variant-filled .p-radiobutton-box {
|
||||
background-color: #1b2022;
|
||||
@ -2780,7 +2780,7 @@
|
||||
color: #030712;
|
||||
}
|
||||
.p-selectbutton.p-invalid > .p-button {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-slider {
|
||||
position: relative;
|
||||
@ -2949,7 +2949,7 @@
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
.p-treeselect.p-invalid.p-component {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
|
||||
padding: 0.375rem 0.75rem;
|
||||
@ -3050,7 +3050,7 @@
|
||||
border-color: #ffed00;
|
||||
}
|
||||
.p-togglebutton.p-invalid > .p-button {
|
||||
border-color: #fca5a5;
|
||||
border-color: #e53009;
|
||||
}
|
||||
.p-button {
|
||||
display: inline-flex;
|
||||
@ -10108,6 +10108,7 @@
|
||||
:root .fc {
|
||||
/* FullCalendar 4 */
|
||||
/* FullCalendar 5 */
|
||||
--fc-page-bg-color: transparent; /*#071426*/
|
||||
}
|
||||
:root .fc.fc-unthemed .fc-view-container th {
|
||||
background: #2e3639; /*#071426*/
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,9 +1,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { usePrimeVue } from "primevue/config";
|
||||
|
||||
const PrimeVue = usePrimeVue();
|
||||
|
||||
const emit = defineEmits(["dark-mode-toggled"]);
|
||||
|
||||
const isDark = ref(true);
|
||||
const darkTheme = ref("lara-dark-blue"),
|
||||
lightTheme = ref("lara-light-blue");
|
||||
@ -18,19 +20,22 @@ function setTheme(shouldBeDark: boolean) {
|
||||
const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
|
||||
oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
|
||||
PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
|
||||
emit("dark-mode-toggled", isDark.value);
|
||||
}
|
||||
|
||||
// set theme matching browser preference
|
||||
setTheme(
|
||||
window.matchMedia &&
|
||||
onMounted(() => {
|
||||
// set theme matching browser preference
|
||||
setTheme(
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches,
|
||||
);
|
||||
);
|
||||
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
setTheme(e.matches);
|
||||
});
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
setTheme(e.matches);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -40,7 +45,7 @@ window
|
||||
class="p-button-rounded w-full md:w-auto"
|
||||
style="margin-right: 1rem"
|
||||
:severity="isDark ? 'warning' : 'info'"
|
||||
@click="toggleTheme"
|
||||
@click="toggleTheme();"
|
||||
>
|
||||
<i v-if="isDark" class="pi pi-sun"></i>
|
||||
<i v-else class="pi pi-moon"></i>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import LocaleSwitcher from "./LocaleSwitcher.vue";
|
||||
import DarkModeSwitcher from "./DarkModeSwitcher.vue";
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
const isDark = ref(true);
|
||||
|
||||
const items = computed(() => [
|
||||
{
|
||||
label: t("createCalendar"),
|
||||
@ -49,6 +51,13 @@ const items = computed(() => [
|
||||
url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
|
||||
},
|
||||
]);
|
||||
|
||||
function handleDarkModeToggled(isDarkVar: boolean) {
|
||||
// Do something with isDark value
|
||||
// For example, update the root isDark value
|
||||
// Assuming the root component has an isDark ref
|
||||
isDark.value = isDarkVar;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -56,7 +65,8 @@ const items = computed(() => [
|
||||
<template #start>
|
||||
<router-link v-slot="{ navigate }" :to="`/`" custom>
|
||||
<Button severity="secondary" text class="p-0 mx-2" @click="navigate">
|
||||
<img width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
|
||||
<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" />
|
||||
</Button>
|
||||
</router-link>
|
||||
</template>
|
||||
@ -96,7 +106,7 @@ const items = computed(() => [
|
||||
</template>
|
||||
<template #end>
|
||||
<div class="flex align-items-stretch justify-content-center">
|
||||
<DarkModeSwitcher></DarkModeSwitcher>
|
||||
<DarkModeSwitcher @dark-mode-toggled="handleDarkModeToggled"></DarkModeSwitcher>
|
||||
<LocaleSwitcher></LocaleSwitcher>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -169,7 +169,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
|
||||
id: event.id.toString(),
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
|
||||
color: event.showFree ? "var(--htwk-gruen-500)" : "var(--primary-color)",
|
||||
textColor: event.showFree
|
||||
? "var(--green-50)"
|
||||
: "var(--primary-color-text)",
|
||||
|
||||
Reference in New Issue
Block a user