fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

fix: missing accent color change

This commit is contained in:
Fabio Di Stasio 2024-05-02 18:00:07 +02:00
parent 9bcd874e80
commit 09c274a724
2 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/components/TheFooter.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div <div
id="footer" id="footer"
:class="[lightColors.includes(footerColor) ? 'text-dark' : 'text-light']" :class="[lightColors.includes(accentColor) ? 'text-dark' : 'text-light']"
:style="`background-color: ${footerColor};`" :style="`background-color: ${accentColor};`"
> >
<div class="footer-left-elements"> <div class="footer-left-elements">
<ul class="footer-elements"> <ul class="footer-elements">
@ -118,7 +118,7 @@ const { getWorkspace } = workspacesStore;
const { getConnectionFolder, getConnectionByUid } = connectionsStore; const { getConnectionFolder, getConnectionByUid } = connectionsStore;
const workspace = computed(() => getWorkspace(workspaceUid.value)); const workspace = computed(() => getWorkspace(workspaceUid.value));
const footerColor = computed(() => { const accentColor = computed(() => {
if (getConnectionFolder(workspaceUid.value)?.color) if (getConnectionFolder(workspaceUid.value)?.color)
return getConnectionFolder(workspaceUid.value).color; return getConnectionFolder(workspaceUid.value).color;
return '#E36929'; return '#E36929';
@ -134,12 +134,17 @@ const versionString = computed(() => {
return ''; return '';
}); });
watch(footerColor, () => { watch(accentColor, () => {
document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color', footerColor.value); changeAccentColor();
document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color-shadow', hexToRGBA(footerColor.value, 0.2));
}); });
const openOutside = (link: string) => shell.openExternal(link); const openOutside = (link: string) => shell.openExternal(link);
const changeAccentColor = () => {
document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color', accentColor.value);
document.querySelector<HTMLBodyElement>(':root').style.setProperty('--primary-color-shadow', hexToRGBA(accentColor.value, 0.2));
};
changeAccentColor();
</script> </script>
<style lang="scss"> <style lang="scss">

12
src/renderer/scss/main.scss
View File

@ -24,6 +24,10 @@ body {
a { a {
color: var(--primary-color); color: var(--primary-color);
&:hover {
color: var(--primary-color-dark)
}
} }
::selection, ::selection,
@ -199,6 +203,14 @@ option:checked {
animation: rotation 0.8s infinite linear; animation: rotation 0.8s infinite linear;
} }
.loading {
&::after {
border: 0.1rem solid var(--primary-color);
border-right-color: transparent;
border-top-color: transparent;
}
}
/* Override */ /* Override */
.modal { .modal {
.modal-container, .modal-container,