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

#47 info button/night mode button colors

Browse Source
This commit is contained in:
survellow
2024-04-04 21:46:20 +02:00
parent da09fbbc31
commit 849c6af4dc
4 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -4,7 +4,7 @@
<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="mask-icon" href="/htwk-mask.svg" color="#00494c" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link
id="theme-link"

4
frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss
View File

@ -180,12 +180,12 @@ $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor:#334155 !default;
$secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
$infoButtonBg: map-get($colors, "primary") !default;
$infoButtonBg: map-get($colors, "htwk-blau") !default;
$infoButtonTextColor:#ffffff !default;
$infoButtonBorder:1px solid map-get($colors, "primary") !default;
$infoButtonHoverBg: #0257c7 !default;
$infoButtonTextHoverColor:$infoButtonTextColor !default;
$infoButtonHoverBorderColor:#rgba(map-get($colors, "primary"), .8) !default;
$infoButtonHoverBorderColor:#rgba(map-get($colors, "htwk-blau"), .8) !default;
$infoButtonActiveBg:rgba(map-get($colors, "primary"), .8) !default;
$infoButtonTextActiveColor:$infoButtonTextColor !default;
$infoButtonActiveBorderColor:rgba(map-get($colors, "primary"), .9) !default;

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

@ -3316,13 +3316,13 @@
}
.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
color: #ffffff;
background: #00944c;
background: #004699;
border: 1px solid #00944c;
}
.p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover {
background: #0257c7;
color: #ffffff;
border-color: #rgba #00944c, 0.8;
border-color: #rgba #004699, 0.8;
}
.p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus {
box-shadow: 0 0 0 0.2rem rgba(0, 148, 76, 0.7);
@ -3334,33 +3334,33 @@
}
.p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined {
background-color: transparent;
color: #00944c;
color: #004699;
border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover {
background: rgba(0, 148, 76, 0.04);
color: #00944c;
background: rgba(0, 70, 153, 0.04);
color: #004699;
border: 1px solid;
}
.p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active {
background: rgba(0, 148, 76, 0.16);
color: #00944c;
background: rgba(0, 70, 153, 0.16);
color: #004699;
border: 1px solid;
}
.p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text {
background-color: transparent;
color: #00944c;
color: #004699;
border-color: transparent;
}
.p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover {
background: rgba(0, 148, 76, 0.04);
background: rgba(0, 70, 153, 0.04);
border-color: transparent;
color: #00944c;
color: #004699;
}
.p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active {
background: rgba(0, 148, 76, 0.16);
background: rgba(0, 70, 153, 0.16);
border-color: transparent;
color: #00944c;
color: #004699;
}
.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
color: #ffffff;
@ -9444,7 +9444,7 @@
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #00944c;
background-color: #004699;
color: #ffffff;
}
.p-badge.p-badge-warning {
@ -9969,7 +9969,7 @@
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #00944c;
background-color: #004699;
color: #ffffff;
}
.p-tag.p-tag-warning {
@ -10062,7 +10062,7 @@
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-info:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4affa7, 0 1px 2px 0 rgb(0, 0, 0);
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #4d9eff, 0 1px 2px 0 rgb(0, 0, 0);
}
.p-button.p-button-warning:enabled:focus {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);

2
frontend/src/components/DarkModeSwitcher.vue
View File

@ -44,7 +44,7 @@ onMounted(() => {
size="small"
class="p-button-rounded w-full md:w-auto"
style="margin-right: 1rem"
:severity="isDark ? 'warning' : 'info'"
:severity="isDark ? 'warning' : 'success'"
@click="toggleTheme();"
>
<i v-if="isDark" class="pi pi-sun"></i>