ami/tl-vikunja
1
0
Fork 0
Code Activity

Migrate to bulma-css-variables and introduce dark mode (#954)

Browse Source 
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
This commit is contained in:
adrinux
2021-11-22 21:12:54 +00:00
committed by konrad
parent 4ef54f1bc2
commit 46fa43d67f
73 changed files with 605 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/home/Logo.vue
View File

@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu
</script>
<template>
<Logo alt="Vikunja" />
</template>
<Logo alt="Vikunja" class="logo" />
</template>
<style lang="scss" scoped>
.logo {
color: var(--logo-text-color);
}
</style>

4
src/components/home/MenuButton.vue
View File

@ -43,7 +43,7 @@ $size: $lineWidth + 1rem;
width: $lineWidth;
left: 50%;
transform: $transformX;
background-color: $grey-400;
background-color: var(--grey-400);
border-radius: 2px;
transition: all $transition;
}
@ -62,7 +62,7 @@ $size: $lineWidth + 1rem;
&:focus {
&::before,
&::after {
background-color: $grey-600;
background-color: var(--grey-600);
}
&::before {

2
src/components/home/PoweredByLink.vue
View File

@ -10,7 +10,7 @@ import {POWERED_BY as poweredByUrl} from '@/urls'
<style lang="scss">
.menu-bottom-link {
color: $grey-300;
color: var(--grey-300);
text-align: center;
display: block;
padding-top: 1rem;

8
src/components/home/contentAuth.vue
View File

@ -144,7 +144,7 @@ export default {
justify-content: center;
align-items: center;
font-size: 2rem;
color: $grey-400;
color: var(--grey-400);
line-height: 1;
transition: all $transition;
@ -155,7 +155,7 @@ export default {
&:hover,
&:focus {
height: 1rem;
color: $grey-600;
color: var(--grey-600);
}
}
@ -191,7 +191,7 @@ export default {
}
.card {
background: $white;
background: var(--white);
}
}
}
@ -220,7 +220,7 @@ export default {
right: 1rem;
z-index: 4500; // The modal has a z-index of 4000
color: $grey-500;
color: var(--grey-500);
transition: color $transition;
@media screen and (max-width: $tablet) {

4
src/components/home/contentLinkShare.vue
View File

@ -57,11 +57,11 @@ export default {
}
.title {
text-shadow: 0 0 1rem $white;
text-shadow: 0 0 1rem var(--white);
}
// FIXME: this should be defined somewhere deep
.link-share-view .card {
background-color: $white;
background-color: var(--white);
}
</style>

22
src/components/home/navigation.vue
View File

@ -280,8 +280,8 @@ export default {
<style lang="scss" scoped>
$navbar-padding: 2rem;
$vikunja-nav-background: $light-background;
$vikunja-nav-color: $grey-700;
$vikunja-nav-background: var(--site-background);
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
.namespace-container {
@ -349,12 +349,12 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 0;
&:hover {
color: $orange;
color: var(--warning);
}
&.is-favorite {
opacity: 1;
color: $orange;
color: var(--warning);
}
}
@ -436,7 +436,7 @@ $vikunja-nav-selected-width: 0.4rem;
align-items: center;
&:hover {
background: $white;
background: var(--white);
}
:deep(.dropdown-trigger) {
@ -456,7 +456,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.ghost {
background: $grey-200;
background: var(--grey-200);
* {
opacity: 0;
@ -496,16 +496,16 @@ $vikunja-nav-selected-width: 0.4rem;
}
&.router-link-exact-active {
color: $primary;
border-left: $vikunja-nav-selected-width solid $primary;
color: var(--primary);
border-left: $vikunja-nav-selected-width solid var(--primary);
.icon {
color: $primary;
color: var(--primary);
}
}
&:hover {
border-left: $vikunja-nav-selected-width solid $primary;
border-left: $vikunja-nav-selected-width solid var(--primary);
}
}
}
@ -526,7 +526,7 @@ $vikunja-nav-selected-width: 0.4rem;
}
.icon {
color: $grey-400 !important;
color: var(--grey-400) !important;
}
}

15
src/components/home/topNavigation.vue
View File

@ -5,7 +5,7 @@
class="navbar main-theme is-fixed-top"
role="navigation"
>
<router-link :to="{name: 'home'}" class="navbar-item logo">
<router-link :to="{name: 'home'}" class="logo-link">
<Logo width="164" height="48"/>
</router-link>
<MenuButton class="menu-button"/>
@ -137,13 +137,18 @@ export default {
<style lang="scss" scoped>
$vikunja-nav-logo-full-width: 164px;
$user-dropdown-width-mobile: 5rem;
$hamburger-menu-icon-spacing: 1rem;
$hamburger-menu-icon-width: 28px;
.navbar {
z-index: 4 !important;
}
.logo {
.logo-link {
display: none;
padding: 0.5rem 0.75rem;
@media screen and (min-width: $tablet) {
align-self: stretch;
@ -164,7 +169,7 @@ $vikunja-nav-logo-full-width: 164px;
}
.navbar.main-theme {
background: $light-background;
background: var(--site-background);
z-index: 5 !important;
justify-content: space-between;
align-items: center;
@ -219,7 +224,7 @@ $vikunja-nav-logo-full-width: 164px;
:deep() {
.trigger-button {
cursor: pointer;
color: $grey-400;
color: var(--grey-400);
padding: .5rem;
font-size: 1.25rem;
position: relative;
@ -278,7 +283,7 @@ $vikunja-nav-logo-full-width: 164px;
}
:deep(.dropdown-trigger) {
color: $grey-400;
color: var(--grey-400);
margin-left: 1rem;
height: 1rem;
width: 1rem;

2
src/components/home/update.vue
View File

@ -57,7 +57,7 @@ export default {
padding: 0 0 0 .5rem;
border-radius: $radius;
font-size: .9rem;
color: $grey-900;
color: var(--grey-900);
justify-content: space-between;
@media screen and (max-width: $desktop) {