vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Colors from sass vars to css vars, crude prefers-color-scheme based dark mode

Browse Source
This commit is contained in:
Adrian Simmons 2021-11-04 15:21:25 +00:00
parent 1d93bafb2b
commit 48ef995ae8
55 changed files with 300 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -133,14 +133,14 @@ export default defineComponent({
position: absolute; position: absolute;
width: 100vw; width: 100vw;
bottom: 5vh; bottom: 5vh;
color: $white; color: var(--white);
padding: 0 1rem; padding: 0 1rem;
h1 { h1 {
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
color: $white; color: var(--white);
font-weight: 700 !important; font-weight: 700 !important;
font-size: 1.5rem; font-size: 1.5rem;
} }

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

@ -166,7 +166,7 @@ export default {
} }
.card { .card {
background: $white; background: var(--white);
} }
} }
} }
@ -195,7 +195,7 @@ export default {
right: 1rem; right: 1rem;
z-index: 4500; // The modal has a z-index of 4000 z-index: 4500; // The modal has a z-index of 4000
color: $grey-500; color: var(--grey-500);
transition: color $transition; transition: color $transition;
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {

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

@ -65,11 +65,11 @@ export default {
} }
.card { .card {
background: $white; background: var(--white);
} }
.title { .title {
text-shadow: 0 0 1rem $white; text-shadow: 0 0 1rem var(--white);
} }
} }
</style> </style>

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

@ -68,7 +68,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.no-auth-wrapper { .no-auth-wrapper {
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background; background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--light-background);
min-height: 100vh; min-height: 100vh;
} }

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

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

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

@ -172,7 +172,7 @@ $vikunja-nav-logo-full-width: 164px;
} }
.navbar.main-theme { .navbar.main-theme {
background: $light-background; background: var(--light-background);
z-index: 5 !important; z-index: 5 !important;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -231,7 +231,7 @@ $vikunja-nav-logo-full-width: 164px;
:deep() { :deep() {
.trigger-button { .trigger-button {
cursor: pointer; cursor: pointer;
color: $grey-400; color: var(--grey-400);
padding: .5rem; padding: .5rem;
font-size: 1.25rem; font-size: 1.25rem;
position: relative; position: relative;
@ -290,7 +290,7 @@ $vikunja-nav-logo-full-width: 164px;
} }
:deep(.dropdown-trigger) { :deep(.dropdown-trigger) {
color: $grey-400; color: var(--grey-400);
margin-left: 1rem; margin-left: 1rem;
height: 1rem; height: 1rem;
width: 1rem; width: 1rem;

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

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

2
src/components/input/button.vue
View File

@ -103,7 +103,7 @@ export default {
} }
&.is-primary.is-outlined:hover { &.is-primary.is-outlined:hover {
color: $white; color: var(--white);
} }
&.is-small { &.is-small {

2
src/components/input/colorPicker.vue
View File

@ -127,7 +127,7 @@ export default {
height: $PICKER_SIZE; height: $PICKER_SIZE;
overflow: hidden; overflow: hidden;
border-radius: 100%; border-radius: 100%;
border: $BORDER_WIDTH solid $grey-300; border: $BORDER_WIDTH solid var(--grey-300);
box-shadow: $shadow; box-shadow: $shadow;
& > * { & > * {

8
src/components/input/datepicker.vue
View File

@ -258,7 +258,7 @@ export default {
position: absolute; position: absolute;
z-index: 99; z-index: 99;
width: 320px; width: 320px;
background: $white; background: var(--white);
border-radius: $radius; border-radius: $radius;
box-shadow: $shadow; box-shadow: $shadow;
@ -272,7 +272,7 @@ export default {
padding: 0 .5rem; padding: 0 .5rem;
width: 100%; width: 100%;
height: 2.25rem; height: 2.25rem;
color: $text; color: var(--text);
transition: all $transition; transition: all $transition;
&:first-child { &:first-child {
@ -280,7 +280,7 @@ export default {
} }
&:hover { &:hover {
background: $light; background: var(--light);
} }
.text { .text {
@ -291,7 +291,7 @@ export default {
padding-right: .25rem; padding-right: .25rem;
.weekday { .weekday {
color: $text-light; color: var(--text-light);
text-transform: capitalize; text-transform: capitalize;
} }
} }

8
src/components/input/editor.vue
View File

@ -344,7 +344,7 @@ $editor-border-color: #ddd;
} }
&-placeholder { &-placeholder {
color: $grey-400 !important; color: var(--grey-400) !important;
font-style: italic; font-style: italic;
} }
} }
@ -383,7 +383,7 @@ $editor-border-color: #ddd;
pre.CodeMirror-line { pre.CodeMirror-line {
margin-bottom: 0 !important; margin-bottom: 0 !important;
color: $grey-700 !important; color: var(--grey-700) !important;
} }
.cm-header { .cm-header {
@ -409,10 +409,10 @@ ul.actions {
} }
&, a { &, a {
color: $grey-500; color: var(--grey-500);
&.done-edit { &.done-edit {
color: $primary; color: var(--primary);
} }
} }

4
src/components/input/fancycheckbox.vue
View File

@ -106,7 +106,7 @@ svg {
} }
.check:hover svg { .check:hover svg {
stroke: $primary; stroke: var(--primary);
} }
.is-disabled .check:hover svg { .is-disabled .check:hover svg {
@ -125,7 +125,7 @@ polyline {
input[type=checkbox]:checked + .check { input[type=checkbox]:checked + .check {
svg { svg {
stroke: $primary; stroke: var(--primary);
} }
path { path {

26
src/components/input/multiselect.vue
View File

@ -377,23 +377,23 @@ export default {
&.has-search-results .input-wrapper { &.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
border-color: $primary !important; border-color: var(--primary) !important;
background: $white !important; background: var(--white) !important;
&, &:focus-within { &, &:focus-within {
border-bottom-color: $grey-200 !important; border-bottom-color: var(--grey-200) !important;
} }
} }
.input-wrapper { .input-wrapper {
padding: 0; padding: 0;
background: $white !important; background: var(--white) !important;
border-color: $grey-200 !important; border-color: var(--grey-200) !important;
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
&:hover { &:hover {
border-color: $grey-300 !important; border-color: var(--grey-300) !important;
} }
.input { .input {
@ -419,8 +419,8 @@ export default {
} }
&:focus-within { &:focus-within {
border-color: $primary !important; border-color: var(--primary) !important;
background: $white !important; background: var(--white) !important;
} }
.loader { .loader {
@ -429,9 +429,9 @@ export default {
} }
.search-results { .search-results {
background: $white; background: var(--white);
border-radius: 0 0 $radius $radius; border-radius: 0 0 $radius $radius;
border: 1px solid $primary; border: 1px solid var(--primary);
border-top: none; border-top: none;
max-height: 50vh; max-height: 50vh;
@ -478,16 +478,16 @@ export default {
} }
&:focus, &:hover { &:focus, &:hover {
background: $grey-100; background: var(--grey-100);
box-shadow: none !important; box-shadow: none !important;
.hint-text { .hint-text {
color: $text; color: var(--text);
} }
} }
&:active { &:active {
background: $grey-200; background: var(--grey-200);
} }
} }
} }

14
src/components/list/partials/list-card.vue
View File

@ -86,7 +86,7 @@ export default {
cursor: pointer; cursor: pointer;
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row}); width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
height: $list-height; height: $list-height;
background: $white; background: var(--white);
margin: 0 $list-spacing $list-spacing 0; margin: 0 $list-spacing $list-spacing 0;
padding: 1rem; padding: 1rem;
border-radius: $radius; border-radius: $radius;
@ -158,7 +158,7 @@ export default {
font-family: $vikunja-font; font-family: $vikunja-font;
font-weight: 400; font-weight: 400;
font-size: 1.5rem; font-size: 1.5rem;
color: $text; color: var(--text);
width: 100%; width: 100%;
margin-bottom: 0; margin-bottom: 0;
max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
@ -171,7 +171,7 @@ export default {
} }
&.has-light-text .title { &.has-light-text .title {
color: $light; color: var(--light);
} }
&.has-background { &.has-background {
@ -180,8 +180,8 @@ export default {
background-position: center; background-position: center;
.title { .title {
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700; text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
color: $white; color: var(--white);
} }
} }
@ -190,7 +190,7 @@ export default {
opacity: 0; opacity: 0;
&:hover { &:hover {
color: $orange; color: var(--warning);
} }
&.is-archived { &.is-archived {
@ -200,7 +200,7 @@ export default {
&.is-favorite { &.is-favorite {
display: inline-block; display: inline-block;
opacity: 1; opacity: 1;
color: $orange; color: var(--warning);
} }
} }

4
src/components/misc/Done.vue
View File

@ -40,8 +40,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.is-done { .is-done {
background: $green; background: var(--success);
color: $white; color: var(--white);
padding: .5rem; padding: .5rem;
font-weight: bold; font-weight: bold;
line-height: 1; line-height: 1;

2
src/components/misc/api-config.vue
View File

@ -208,7 +208,7 @@ export default {
text-align: right; text-align: right;
span.url { span.url {
border-bottom: 1px dashed $primary; border-bottom: 1px dashed var(--primary);
} }
} }
</style> </style>

8
src/components/misc/card.vue
View File

@ -57,22 +57,22 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.card { .card {
background-color: $white; background-color: var(--white);
border-radius: $radius; border-radius: $radius;
margin-bottom: 1rem; margin-bottom: 1rem;
border: 1px solid $grey-200; border: 1px solid var(--grey-200);
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
} }
.card-header { .card-header {
box-shadow: none; box-shadow: none;
border-bottom: 1px solid $grey-200; border-bottom: 1px solid var(--grey-200);
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
} }
// FIXME: should maybe be merged somehow with modal // FIXME: should maybe be merged somehow with modal
:deep(.modal-card-foot) { :deep(.modal-card-foot) {
background-color: $grey-50; background-color: var(--grey-50);
border-top: 0; border-top: 0;
} }
</style> </style>

2
src/components/misc/legal.vue
View File

@ -22,7 +22,7 @@ export default {
.legal-links { .legal-links {
margin-top: 1rem; margin-top: 1rem;
text-align: right; text-align: right;
color: $grey-300; color: var(--grey-300);
font-size: 1rem; font-size: 1rem;
} }
</style> </style>

4
src/components/misc/shortcut.vue
View File

@ -27,8 +27,8 @@ export default {
kbd { kbd {
padding: .1rem .35rem; padding: .1rem .35rem;
border: 1px solid $grey-300; border: 1px solid var(--grey-300);
background: $grey-100; background: var(--grey-100);
border-radius: 3px; border-radius: 3px;
font-size: .75rem; font-size: .75rem;
} }

16
src/components/notifications/notifications.vue
View File

@ -145,9 +145,9 @@ export default {
width: .75rem; width: .75rem;
height: .75rem; height: .75rem;
background: $primary; background: var(--primary);
border-radius: 100%; border-radius: 100%;
border: 2px solid $white; border: 2px solid var(--white);
} }
.notifications-list { .notifications-list {
@ -157,7 +157,7 @@ export default {
max-height: 400px; max-height: 400px;
overflow-y: auto; overflow-y: auto;
background: $white; background: var(--white);
width: 350px; width: 350px;
max-width: calc(100vw - 2rem); max-width: calc(100vw - 2rem);
padding: .75rem .25rem; padding: .75rem .25rem;
@ -183,14 +183,14 @@ export default {
transition: background-color $transition; transition: background-color $transition;
&:hover { &:hover {
background: $grey-100; background: var(--grey-100);
border-radius: $radius; border-radius: $radius;
} }
.read-indicator { .read-indicator {
width: .35rem; width: .35rem;
height: .35rem; height: .35rem;
background: $primary; background: var(--primary);
border-radius: 100%; border-radius: 100%;
margin-left: .5rem; margin-left: .5rem;
@ -219,7 +219,7 @@ export default {
} }
.created { .created {
color: $grey-400; color: var(--grey-400);
} }
&:last-child { &:last-child {
@ -227,14 +227,14 @@ export default {
} }
a { a {
color: $grey-800; color: var(--grey-800);
} }
} }
.nothing { .nothing {
text-align: center; text-align: center;
padding: 1rem 0; padding: 1rem 0;
color: $grey-500; color: var(--grey-500);
.explainer { .explainer {
font-size: .75rem; font-size: .75rem;

8
src/components/quick-actions/quick-actions.vue
View File

@ -490,11 +490,11 @@ export default {
.results { .results {
text-align: left; text-align: left;
width: 100%; width: 100%;
color: $grey-800; color: var(--grey-800);
.result { .result {
&-title { &-title {
background: $grey-50; background: var(--grey-50);
padding: .5rem; padding: .5rem;
display: block; display: block;
font-size: .75rem; font-size: .75rem;
@ -516,12 +516,12 @@ export default {
cursor: pointer; cursor: pointer;
&:focus, &:hover { &:focus, &:hover {
background: $grey-50; background: var(--grey-50);
box-shadow: none !important; box-shadow: none !important;
} }
&:active { &:active {
background: $grey-100; background: var(--grey-100);
} }
} }
} }

2
src/components/tasks/edit-task.vue
View File

@ -160,7 +160,7 @@ ul.assingees {
a { a {
float: right; float: right;
color: $red; color: var(--danger);
transition: all $transition; transition: all $transition;
} }
} }

30
src/components/tasks/gantt-component.vue
View File

@ -447,12 +447,12 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$gantt-border: 1px solid $grey-200; $gantt-border: 1px solid var(--grey-200);
$gantt-vertical-border-color: $grey-100; $gantt-vertical-border-color: var(--grey-100);
.gantt-chart { .gantt-chart {
overflow-x: auto; overflow-x: auto;
border-top: 1px solid $grey-200; border-top: 1px solid var(--grey-200);
.dates { .dates {
display: flex; display: flex;
@ -479,8 +479,8 @@ $gantt-vertical-border-color: $grey-100;
font-weight: normal; font-weight: normal;
&.today { &.today {
background: $primary; background: var(--primary);
color: $white; color: var(--white);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
font-weight: bold; font-weight: bold;
} }
@ -510,7 +510,7 @@ $gantt-vertical-border-color: $grey-100;
.task { .task {
display: inline-block; display: inline-block;
border: 2px solid $primary; border: 2px solid var(--primary);
font-size: 0.85rem; font-size: 0.85rem;
margin: 0.5rem; margin: 0.5rem;
border-radius: 6px; border-radius: 6px;
@ -523,30 +523,30 @@ $gantt-vertical-border-color: $grey-100;
user-select: none; // Non-prefixed version user-select: none; // Non-prefixed version
&.is-current-edit { &.is-current-edit {
border-color: $orange !important; border-color: var(--warning) !important;
} }
&.has-light-text { &.has-light-text {
color: $light; color: var(--light);
&.done span:after { &.done span:after {
border-top: 1px solid $light; border-top: 1px solid var(--light);
} }
.edit-toggle { .edit-toggle {
color: $light; color: var(--light);
} }
} }
&.has-dark-text { &.has-dark-text {
color: $text; color: var(--text);
&.done span:after { &.done span:after {
border-top: 1px solid $dark; border-top: 1px solid var(--dark);
} }
.edit-toggle { .edit-toggle {
color: $text; color: var(--text);
} }
} }
@ -599,8 +599,8 @@ $gantt-vertical-border-color: $grey-100;
} }
&.nodate { &.nodate {
border: 2px dashed $grey-300; border: 2px dashed var(--grey-300);
background: $grey-100; background: var(--grey-100);
} }
&:active { &:active {

10
src/components/tasks/partials/attachments.vue
View File

@ -267,17 +267,17 @@ export default {
padding: .5rem; padding: .5rem;
&:hover { &:hover {
background-color: $grey-200; background-color: var(--grey-200);
} }
.filename { .filename {
font-weight: bold; font-weight: bold;
margin-bottom: .25rem; margin-bottom: .25rem;
color: $text; color: var(--text);
} }
.info { .info {
color: $grey-500; color: var(--grey-500);
font-size: .9rem; font-size: .9rem;
p { p {
@ -347,9 +347,9 @@ export default {
margin: .5rem auto 2rem; margin: .5rem auto 2rem;
border-radius: 2px; border-radius: 2px;
box-shadow: $shadow-md; box-shadow: $shadow-md;
background: $primary; background: var(--primary);
padding: 1rem; padding: 1rem;
color: $white; color: var(--white);
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
} }

6
src/components/tasks/partials/checklist-summary.vue
View File

@ -39,7 +39,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.checklist-summary { .checklist-summary {
color: $grey-500; color: var(--grey-500);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -49,10 +49,10 @@ export default {
margin-right: .25rem; margin-right: .25rem;
circle { circle {
stroke: $grey-400; stroke: var(--grey-400);
&:last-child { &:last-child {
stroke: $primary; stroke: var(--primary);
} }
} }
} }

6
src/components/tasks/partials/defer-task.vue
View File

@ -141,11 +141,11 @@ $defer-task-max-width: 350px + 100px;
width: 100%; width: 100%;
max-width: $defer-task-max-width; max-width: $defer-task-max-width;
border-radius: $radius; border-radius: $radius;
border: 1px solid $grey-200; border: 1px solid var(--grey-200);
padding: 1rem; padding: 1rem;
margin: 1rem; margin: 1rem;
background: $white; background: var(--white);
color: $text; color: var(--text);
cursor: default; cursor: default;
z-index: 10; z-index: 10;
box-shadow: $shadow-lg; box-shadow: $shadow-lg;

6
src/components/tasks/partials/editAssignees.vue
View File

@ -127,7 +127,7 @@ export default {
} }
:deep(.user img) { :deep(.user img) {
border: 2px solid $white; border: 2px solid var(--white);
margin-right: 0; margin-right: 0;
} }
@ -135,8 +135,8 @@ export default {
position: absolute; position: absolute;
top: 4px; top: 4px;
left: 2px; left: 2px;
color: $red; color: var(--danger);
background: $white; background: var(--white);
padding: 0 4px; padding: 0 4px;
display: block; display: block;
border-radius: 100%; border-radius: 100%;

16
src/components/tasks/partials/kanban-card.vue
View File

@ -117,7 +117,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$task-background: $white; $task-background: var(--white);
.task { .task {
-webkit-touch-callout: none; // iOS Safari -webkit-touch-callout: none; // iOS Safari
@ -163,7 +163,7 @@ $task-background: $white;
} }
&.overdue { &.overdue {
color: $red; color: var(--danger);
} }
} }
@ -219,7 +219,7 @@ $task-background: $white;
.footer .icon, .footer .icon,
.due-date, .due-date,
.priority-label { .priority-label {
background: $grey-100; background: var(--grey-100);
border-radius: $radius; border-radius: $radius;
padding: 0 .5rem; padding: 0 .5rem;
} }
@ -229,7 +229,7 @@ $task-background: $white;
} }
.task-id { .task-id {
color: $grey-500; color: var(--grey-500);
font-size: .8rem; font-size: .8rem;
margin-bottom: .25rem; margin-bottom: .25rem;
display: flex; display: flex;
@ -244,21 +244,21 @@ $task-background: $white;
} }
&.has-light-text { &.has-light-text {
color: $white; color: var(--white);
.task-id { .task-id {
color: $grey-200; color: var(--grey-200);
} }
.footer .icon, .footer .icon,
.due-date, .due-date,
.priority-label { .priority-label {
background: $grey-800; background: var(--grey-800);
} }
.footer { .footer {
.icon svg { .icon svg {
fill: $white; fill: var(--white);
} }
} }
} }

2
src/components/tasks/partials/listSearch.vue
View File

@ -82,6 +82,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.list-namespace-title { .list-namespace-title {
color: $grey-500; color: var(--grey-500);
} }
</style> </style>

4
src/components/tasks/partials/priorityLabel.vue
View File

@ -54,7 +54,7 @@ export default {
} }
span.high-priority { span.high-priority {
color: $red; color: var(--danger);
width: auto !important; // To override the width set in tasks width: auto !important; // To override the width set in tasks
.icon { .icon {
@ -64,7 +64,7 @@ span.high-priority {
} }
&.not-so-high { &.not-so-high {
color: $orange; color: var(--warning);
} }
} }
</style> </style>

8
src/components/tasks/partials/relatedTasks.vue
View File

@ -274,7 +274,7 @@ $remove-icon-width: 24px;
} }
.different-list { .different-list {
color: $grey-500; color: var(--grey-500);
width: auto; width: auto;
} }
@ -312,16 +312,16 @@ $remove-icon-width: 24px;
border: 2px solid transparent; border: 2px solid transparent;
a { a {
color: $text; color: var(--text);
transition: color ease $transition-duration; transition: color ease $transition-duration;
&:hover { &:hover {
color: $grey-900; color: var(--grey-900);
} }
} }
.remove { .remove {
color: $red; color: var(--danger);
} }
} }
} }

4
src/components/tasks/partials/reminders.vue
View File

@ -112,7 +112,7 @@ export default {
align-items: center; align-items: center;
&.overdue :deep(.datepicker a.show) { &.overdue :deep(.datepicker a.show) {
color: $red; color: var(--danger);
} }
&:last-child { &:last-child {
@ -120,7 +120,7 @@ export default {
} }
a.remove { a.remove {
color: $red; color: var(--danger);
padding-left: .5rem; padding-left: .5rem;
} }
} }

24
src/components/tasks/partials/singleTaskInList.vue
View File

@ -227,7 +227,7 @@ export default {
border: 2px solid transparent; border: 2px solid transparent;
&:hover { &:hover {
background-color: $grey-100; background-color: var(--grey-100);
} }
.tasktext, .tasktext,
@ -239,13 +239,13 @@ export default {
flex: 1 0 50%; flex: 1 0 50%;
.overdue { .overdue {
color: $red; color: var(--danger);
} }
} }
.task-list { .task-list {
width: auto; width: auto;
color: $grey-400; color: var(--grey-400);
font-size: .9rem; font-size: .9rem;
white-space: nowrap; white-space: nowrap;
} }
@ -273,11 +273,11 @@ export default {
} }
a { a {
color: $text; color: var(--text);
transition: color ease $transition-duration; transition: color ease $transition-duration;
&:hover { &:hover {
color: $grey-900; color: var(--grey-900);
} }
} }
@ -288,12 +288,12 @@ export default {
transition: opacity $transition, color $transition; transition: opacity $transition, color $transition;
&:hover { &:hover {
color: $orange; color: var(--warning);
} }
&.is-favorite { &.is-favorite {
opacity: 1; opacity: 1;
color: $orange; color: var(--warning);
} }
} }
@ -324,16 +324,16 @@ export default {
.tasktext.done { .tasktext.done {
text-decoration: line-through; text-decoration: line-through;
color: $grey-500; color: var(--grey-500);
} }
span.parent-tasks { span.parent-tasks {
color: $grey-500; color: var(--grey-500);
width: auto; width: auto;
} }
.remove { .remove {
color: $red; color: var(--danger);
} }
input[type="checkbox"] { input[type="checkbox"] {
@ -351,8 +351,8 @@ export default {
left: calc(50% - 1rem); left: calc(50% - 1rem);
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
border-left-color: $grey-300; border-left-color: var(--grey-300);
border-bottom-color: $grey-300; border-bottom-color: var(--grey-300);
} }
} }
</style> </style>

2
src/styles/components/labels.scss
View File

@ -6,7 +6,7 @@
.tag { .tag {
margin: .5rem 0 .5rem .5rem; margin: .5rem 0 .5rem .5rem;
background: $grey-200; background: var(--grey-200);
// FIXME: only used in ListLabels.vue // FIXME: only used in ListLabels.vue
&.disabled { &.disabled {

4
src/styles/components/task.scss
View File

@ -7,8 +7,8 @@
.modal-container .task-view { .modal-container .task-view {
border-radius: $radius; border-radius: $radius;
padding: 1rem; padding: 1rem;
color: $text; color: var(--text);
background-color: $light-background !important; background-color: var(--light-background) !important;
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
border-radius: 0; border-radius: 0;

4
src/styles/components/tooltip.scss
View File

@ -5,7 +5,7 @@
z-index: 10000; z-index: 10000;
font-size: 0.8rem; font-size: 0.8rem;
text-align: center; text-align: center;
background: $dark; background: var(--dark);
color: white; color: white;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px 5px; padding: 5px 10px 5px;
@ -28,7 +28,7 @@
height: 0; height: 0;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid $dark; border-top: 5px solid var(--dark);
&.bottom { &.bottom {
transform: rotate(180deg); transform: rotate(180deg);

2
src/styles/theme/background.scss
View File

@ -8,7 +8,7 @@
// FIXME: move to pagination component // FIXME: move to pagination component
.pagination-link:not(.is-current) { .pagination-link:not(.is-current) {
background: $light-background; background: var(--light-background);
} }
.box, .box,

2
src/styles/theme/content.scss
View File

@ -6,7 +6,7 @@
} }
.table.has-actions { .table.has-actions {
border-top: 1px solid $grey-100; border-top: 1px solid var(--grey-100);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;

10
src/styles/theme/navigation.scss
View File

@ -6,14 +6,14 @@
z-index: 31; z-index: 31;
font-weight: bold; font-weight: bold;
font-size: 2rem; font-size: 2rem;
color: $grey-400; color: var(--grey-400);
line-height: 1; line-height: 1;
transition: all $transition; transition: all $transition;
&:hover, &:hover,
&:focus { &:focus {
height: 1rem; height: 1rem;
color: $grey-600; color: var(--grey-600);
} }
} }
@ -31,7 +31,7 @@
&::after { &::after {
display: block; display: block;
content: ''; content: '';
border-top: 3px solid $grey-400; border-top: 3px solid var(--grey-400);
border-radius: $radius; border-radius: $radius;
transition: all $transition; transition: all $transition;
} }
@ -68,7 +68,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: $text; color: var(--text);
} }
} }
@ -84,7 +84,7 @@
.menu-bottom-link { .menu-bottom-link {
width: 100%; width: 100%;
color: $grey-300; color: var(--grey-300);
text-align: center; text-align: center;
display: block; display: block;
margin: 1rem 0; margin: 1rem 0;

6
src/styles/theme/scrollbars.scss
View File

@ -1,7 +1,7 @@
$scrollbar-height: 8px; $scrollbar-height: 8px;
$scrollbar-track-color: $grey-200; $scrollbar-track-color: var(--grey-200);
$scrollbar-thumb-color: $grey-300; $scrollbar-thumb-color: var(--grey-300);
$scrollbar-hover-color: $grey-500; $scrollbar-hover-color: var(--grey-500);
// Chrome // Chrome
::-webkit-scrollbar { ::-webkit-scrollbar {

14
src/styles/theme/theme.scss
View File

@ -6,7 +6,7 @@
} }
:focus { :focus {
box-shadow: 0 0 0 2px rgba($primary, 0.5); box-shadow: 0 0 0 2px var(--primary-translucent);
} }
:focus:not(:focus-visible) { :focus:not(:focus-visible) {
@ -15,11 +15,11 @@
:focus-visible, :focus-visible,
:-moz-focusring { :-moz-focusring {
box-shadow: 0 0 0 2px rgba($primary, 0.5); box-shadow: 0 0 0 2px var(--primary-translucent);
} }
body { body {
background: $light-background; background: var(--light-background);
min-height: 100vh; min-height: 100vh;
} }
@ -54,7 +54,7 @@ h6 {
&::-moz-progress-bar, &::-moz-progress-bar,
&::-webkit-progress-value { &::-webkit-progress-value {
background: $grey-500; background: var(--grey-500);
} }
@media screen and (max-width: $tablet) { @media screen and (max-width: $tablet) {
@ -103,11 +103,11 @@ button.table {
} }
.icon:not(.has-text-success) { .icon:not(.has-text-success) {
color: $grey-300 !important; color: var(--grey-300) !important;
} }
&.has-text-danger .icon { &.has-text-danger .icon {
color: $danger !important; color: var(--danger) !important;
} }
&.is-disabled { &.is-disabled {
@ -165,6 +165,6 @@ button.table {
} }
.box { .box {
border: 1px solid $grey-200; border: 1px solid var(--grey-200);
box-shadow: $shadow-sm; box-shadow: $shadow-sm;
} }

112
src/styles/variables/colors.scss
View File

@ -1,18 +1,96 @@
$grey-50: #F9FAFB; :root {
$grey-100: #f3f4f6;
$grey-200: #E5E7EB; /* Vikunja colors as CSS custom properties */
$grey-300: #D1D5DB; --grey-50: hsl(210, 20%, 98%);
$grey-400: #9CA3AF; --grey-100: hsl(220, 14.3%, 95.9%);
$grey-500: #6B7280; --grey-200: hsl(220, 13%, 91%);
$grey-600: #4B5563; --grey-300: hsl(216, 12.2%, 83.9%);
$grey-700: #374151; --grey-400: hsl(217.9, 10.6%, 64.9%);
$grey-800: #1F2937; --grey-500-hsl: 220, 8.9%, 46.1%;
$grey-900: #111827; --grey-500: hsla(var(--grey-500-hsl), 1);
--grey-600: hsl(215, 13.8%, 34.1%);
--grey-700: hsl(216.9, 19.1%, 26.7%);
--grey-800: hsl(215, 27.9%, 16.9%);
--grey-900: hsl(220.9, 39.3%, 11%);
--light-background: var(--grey-100);
--scheme-main: var(--white);
// Vikunja overrides of Bulma defaults
// --black-bis: #121212;
// --black-ter: #242424;
--grey-darker: var(--grey-700);
--grey-dark: var(--grey-800);
--grey: var(--grey-500);
--grey-light: var(--grey-300);
--grey-lighter: var(--grey-200);
--grey-lightest: var(--grey-100);
//--white-ter: whitesmoke;
//--white-bis: #fafafa;
--white-h: 0deg;
--white-s: 0%;
--white-l: 100%;
--white-a: 1;
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
--black-h: 0deg;
--black-s: 0%;
--black-l: 4%;
--black-a: 1;
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
//$warning/$orange: #ff851b or hsl(27.9, 100%, 55.3%)
--warning-h: 27.9deg !important;
--warning-s: 100% !important;
--warning-l: 55.3% !important;
--warning-a: 1 !important;
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
//$success/$green is #00db60 or hsl(146.3, 100%, 42.9%)
--success-h: 146.3deg !important;
--success-s: 100% !important;
--success-l: 42.9% !important;
--success-a: 1 !important;
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
//$danger/$red is #ff4136 or hsl(3.3, 100%, 60.6%)
--danger-h: 3.3deg !important;
--danger-s: 100% !important;
--danger-l: 60.6% !important;
--danger-a: 1 !important;
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
//var(--primary)/$blue is #1973ff or hsl(216.5, 100%, 54.9%)
--primary-h: 216.5deg !important;
--primary-s: 100% !important;
--primary-l: 54.9% !important;
--primary-a: 1 !important;
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
}
@media (prefers-color-scheme: dark) {
:root {
/* Light mode colours in reverse order for dark mode */
--grey-900: hsl(210, 20%, 98%);
--grey-800: hsl(220, 14.3%, 95.9%);
--grey-700: hsl(220, 13%, 91%);
--grey-600: hsl(216, 12.2%, 83.9%);
--grey-500-hsl: 217.9, 10.6%, 64.9%;
--grey-500: hsla(var(--grey-500-hsl), 1);
--grey-400: hsl(220, 8.9%, 46.1%);
--grey-300: hsl(215, 13.8%, 34.1%);
--grey-200: hsl(216.9, 19.1%, 26.7%);
--grey-100: hsl(215, 27.9%, 16.9%);
--grey-50: hsl(220.9, 39.3%, 11%);
--white-l: 4% !important;
--black-l: 100% !important;
--text: var(--grey-800) !important;
--text-invert: #000 !important;
--text-light: var(--grey-300) !important;
--text-strong: var(--grey-900) !important;
}
}
// Bulma defaults
$grey-dark: $grey-800;
$grey-darker: $grey-700;
$grey: $grey-500;
$grey-light: $grey-300;
$grey-lighter: $grey-200;
$grey-lightest: $grey-100;

14
src/styles/variables/shadows.scss
View File

@ -1,5 +1,9 @@
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24); $shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10); 0 1px 2px hsla(var(--grey-500-hsl), .24);
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08); $shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05); 0 2px 4px hsla(var(--grey-500-hsl), .10);
$shadow-xl: 0 20px 40px rgba($grey-500, .2); $shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
$shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
$shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);

6
src/styles/variables/variables.scss
View File

@ -1,12 +1,12 @@
$info-invert: $white; $info-invert: #fff;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif; $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$vikunja-font: 'Quicksand', sans-serif; $vikunja-font: 'Quicksand', sans-serif;
$thickness: 1px; $thickness: 1px;
$pagination-current-border: $primary; $pagination-current-border: var(--primary);
$navbar-item-active-color: $primary; $navbar-item-active-color: var(--primary);
$dropdown-content-shadow: none; $dropdown-content-shadow: none;
$dropdown-item-hover-background-color: var(--grey-100); $dropdown-item-hover-background-color: var(--grey-100);

8
src/views/list/ShowList.vue
View File

@ -158,7 +158,7 @@ export default {
} }
.switch-view { .switch-view {
background: $white; background: var(--white);
display: inline-flex; display: inline-flex;
border-radius: $radius; border-radius: $radius;
font-size: .75rem; font-size: .75rem;
@ -180,17 +180,17 @@ export default {
&.is-active, &.is-active,
&:hover { &:hover {
color: $white; color: var(--white);
} }
&.is-active { &.is-active {
background: $primary; background: var(--primary);
font-weight: bold; font-weight: bold;
box-shadow: $shadow-xs; box-shadow: $shadow-xs;
} }
&:hover { &:hover {
background: $primary; background: var(--primary);
} }
} }
} }

4
src/views/list/settings/background.vue
View File

@ -167,7 +167,7 @@ export default {
font-size: .8rem; font-size: .8rem;
a { a {
color: $grey-800; color: var(--grey-800);
} }
} }
@ -224,7 +224,7 @@ export default {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
font-size: .75rem; font-size: .75rem;
font-weight: bold; font-weight: bold;
color: $white; color: var(--white);
transition: opacity $transition; transition: opacity $transition;
} }

12
src/views/list/views/Kanban.vue
View File

@ -593,7 +593,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
$bucket-background: $grey-100; $bucket-background: var(--grey-100);
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px; $bucket-width: 300px;
$bucket-header-height: 60px; $bucket-header-height: 60px;
@ -627,7 +627,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.ghost { .ghost {
background: transparent !important; background: transparent !important;
border: 3px dashed $grey-300 !important; border: 3px dashed var(--grey-300) !important;
box-shadow: none !important; box-shadow: none !important;
* { * {
@ -636,7 +636,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
} }
.bucket { .bucket {
background-color: $bucket-background; background-color: var(--bucket-background);
border-radius: $radius; border-radius: $radius;
position: relative; position: relative;
@ -685,7 +685,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
padding-right: 1rem; padding-right: 1rem;
.button { .button {
background: $bucket-background; background: var(--bucket-background);
width: 100%; width: 100%;
} }
} }
@ -719,7 +719,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
font-weight: bold; font-weight: bold;
&.is-max { &.is-max {
color: $red; color: var(--danger);
} }
} }
@ -743,7 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
background-color: transparent; background-color: transparent;
&:hover { &:hover {
background-color: $white; background-color: var(--white);
} }
} }
} }

4
src/views/list/views/List.vue
View File

@ -331,8 +331,8 @@ export default {
.ghost { .ghost {
border-radius: $radius; border-radius: $radius;
background: $grey-100; background: var(--grey-100);
border: 2px dashed $grey-300; border: 2px dashed var(--grey-300);
* { * {
opacity: 0; opacity: 0;

4
src/views/migrator/MigrateService.vue
View File

@ -197,7 +197,7 @@ export default {
span { span {
transition: all 500ms ease; transition: all 500ms ease;
background: $grey-500; background: var(--grey-500);
height: 10px; height: 10px;
width: 10px; width: 10px;
display: inline-block; display: inline-block;
@ -242,7 +242,7 @@ export default {
@keyframes wave { @keyframes wave {
0%, 40%, 100% { 0%, 40%, 100% {
transform: translate(0, 0); transform: translate(0, 0);
background-color: $primary; background-color: var(--primary);
} }
10% { 10% {
transform: translate(0, -15px); transform: translate(0, -15px);

4
src/views/namespaces/ListNamespaces.vue
View File

@ -131,12 +131,12 @@ export default {
.is-archived { .is-archived {
font-size: 0.75rem; font-size: 0.75rem;
border: 1px solid $grey-500; border: 1px solid var(--grey-500);
color: $grey !important; color: $grey !important;
padding: 2px 4px; padding: 2px 4px;
border-radius: 3px; border-radius: 3px;
font-family: $vikunja-font; font-family: $vikunja-font;
background: rgba($white, 0.75); background: var(--white-translucent);
margin-left: .5rem; margin-left: .5rem;
} }

22
src/views/tasks/TaskDetailView.vue
View File

@ -711,18 +711,18 @@ $flash-background-duration: 750ms;
// This is a workaround to hide the llama background from the top on the task detail page // This is a workaround to hide the llama background from the top on the task detail page
margin-top: -1.5rem; margin-top: -1.5rem;
padding: 1rem; padding: 1rem;
background-color: $light-background; background-color: var(--light-background);
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop) {
padding-bottom: 0; padding-bottom: 0;
} }
.subtitle { .subtitle {
color: $grey-500; color: var(--grey-500);
margin-bottom: 1rem; margin-bottom: 1rem;
a { a {
color: $grey-800; color: var(--grey-800);
} }
} }
@ -731,7 +731,7 @@ $flash-background-duration: 750ms;
} }
.icon.is-grey { .icon.is-grey {
color: $grey-400; color: var(--grey-400);
} }
:deep(.heading) { :deep(.heading) {
@ -759,7 +759,7 @@ $flash-background-duration: 750ms;
} }
.title.task-id { .title.task-id {
color: $grey-400; color: var(--grey-400);
white-space: nowrap; white-space: nowrap;
} }
@ -770,7 +770,7 @@ $flash-background-duration: 750ms;
align-items: center; align-items: center;
a.remove { a.remove {
color: $red; color: var(--danger);
vertical-align: middle; vertical-align: middle;
padding-left: .5rem; padding-left: .5rem;
line-height: 1; line-height: 1;
@ -781,7 +781,7 @@ $flash-background-duration: 750ms;
width: 100%; width: 100%;
a.show { a.show {
color: $text; color: var(--text);
padding: .25rem .5rem; padding: .25rem .5rem;
transition: background-color $transition; transition: background-color $transition;
border-radius: $radius; border-radius: $radius;
@ -789,7 +789,7 @@ $flash-background-duration: 750ms;
margin: .1rem 0; margin: .1rem 0;
&:hover { &:hover {
background: $white; background: var(--white);
} }
} }
@ -805,7 +805,7 @@ $flash-background-duration: 750ms;
.detail-title { .detail-title {
display: block; display: block;
color: $grey-400; color: var(--grey-400);
} }
.none { .none {
@ -842,7 +842,7 @@ $flash-background-duration: 750ms;
transition: all $transition-duration; transition: all $transition-duration;
&::placeholder { &::placeholder {
color: $text-light; color: var(--text-light);
opacity: 1; opacity: 1;
font-style: italic; font-style: italic;
} }
@ -888,7 +888,7 @@ $flash-background-duration: 750ms;
.created { .created {
font-size: .75rem; font-size: .75rem;
color: $grey-500; color: var(--grey-500);
text-align: right; text-align: right;
} }

4
src/views/tasks/TaskDetailViewModal.vue
View File

@ -53,11 +53,11 @@ export default {
position: fixed; position: fixed;
top: 5px; top: 5px;
right: 26px; right: 26px;
color: $white; color: var(--white);
font-size: 2rem; font-size: 2rem;
@media screen and (max-width: $desktop) { @media screen and (max-width: $desktop) {
color: $dark; color: var(--dark);
} }
} }
</style> </style>

2
src/views/teams/ListTeams.vue
View File

@ -68,7 +68,7 @@ ul.teams {
transition: background-color $transition; transition: background-color $transition;
&:hover { &:hover {
background: $grey-100; background: var(--grey-100);
} }
} }
} }

6
src/views/user/Settings.vue
View File

@ -88,13 +88,13 @@ export default {
a { a {
display: block; display: block;
padding: .5rem; padding: .5rem;
color: $dark; color: var(--dark);
width: 100%; width: 100%;
border-left: 3px solid transparent; border-left: 3px solid transparent;
&:hover, &.router-link-active { &:hover, &.router-link-active {
background: $white; background: var(--white);
border-color: $primary; border-color: var(--primary);
} }
} }
} }

2
src/views/user/settings/Avatar.vue
View File

@ -149,6 +149,6 @@ export default {
} }
.vue-advanced-cropper__background { .vue-advanced-cropper__background {
background: $white; background: var(--white);
} }
</style> </style>