From d1bf562669ca8875f7cfb3438a1a8f17d0454b12 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 11:54:33 +0000 Subject: [PATCH 01/55] Swap bulma with bulma-css-variables --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index dac211098..8322bd896 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@sentry/tracing": "6.14.0", "@sentry/vue": "6.14.0", "@vue/compat": "3.2.21", - "bulma": "0.9.3", + "bulma-css-variables": "^0.9.33", "camel-case": "4.1.2", "codemirror": "5.63.3", "copy-to-clipboard": "3.3.1", diff --git a/yarn.lock b/yarn.lock index b8f923635..27fe265d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2321,10 +2321,10 @@ builtin-modules@^3.1.0: resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887" integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA== -bulma@0.9.3: - version "0.9.3" - resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243" - integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g== +bulma-css-variables@^0.9.33: + version "0.9.33" + resolved "https://registry.yarnpkg.com/bulma-css-variables/-/bulma-css-variables-0.9.33.tgz#b249c3410e9edcfa7a5ce8ca96049b6939fe92de" + integrity sha512-D85dXLyLOBBDCuSSOeASc0kN2IknJqo5hzkZ22hxDHobxko/qay0nD+zNl2CJtF8v/7iwvQXqzVSDRnFVRSg9A== bytes@3.1.0: version "3.1.0" -- 2.45.1 From ba6051fc27591ef8dd2dc4a39193259efbe7ff46 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 12:06:20 +0000 Subject: [PATCH 02/55] Import bulma-css-variables instead of bulma --- src/styles/global.scss | 14 +++++++------- src/styles/variables/_index.scss | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/styles/global.scss b/src/styles/global.scss index 1aa66c090..8c5174bc7 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -5,13 +5,13 @@ // This imports are the same as in "bulma/bulma.sass" // with the expeption of the bulma utilities. // They are imported globally in variables.scss -@import "bulma/sass/base/_all"; -@import "bulma/sass/elements/_all"; -@import "bulma/sass/form/_all"; -@import "bulma/sass/components/_all"; -@import "bulma/sass/grid/_all"; -@import "bulma/sass/helpers/_all"; -@import "bulma/sass/layout/_all"; +@import "bulma-css-variables/sass/base/_all"; +@import "bulma-css-variables/sass/elements/_all"; +@import "bulma-css-variables/sass/form/_all"; +@import "bulma-css-variables/sass/components/_all"; +@import "bulma-css-variables/sass/grid/_all"; +@import "bulma-css-variables/sass/helpers/_all"; +@import "bulma-css-variables/sass/layout/_all"; @import "theme"; @import "components"; \ No newline at end of file diff --git a/src/styles/variables/_index.scss b/src/styles/variables/_index.scss index bef2ad0cb..5646a2849 100644 --- a/src/styles/variables/_index.scss +++ b/src/styles/variables/_index.scss @@ -3,10 +3,10 @@ @import "variables"; // the default values get overwritten by the definitions above -@import "bulma/sass/utilities/_all"; +@import "bulma-css-variables/sass/utilities/_all"; // this is needed so that the shared form variables are globally defined aswell -@import "bulma/sass/form/shared"; +@import "bulma-css-variables/sass/form/shared"; // since $tablet is defined by bulma we can just define it after importing the utilities $mobile: math.div($tablet, 2); \ No newline at end of file -- 2.45.1 From 1d93bafb2b16d4bfeb6e1597d4f20dd13ceb63ea Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 13:11:03 +0000 Subject: [PATCH 03/55] Move colours to colors.css, sass color vars to css color vars --- src/styles/variables/variables.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index 6317d87a4..a699d9cf4 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -1,10 +1,3 @@ -$white: #fff; -$black: hsl(0, 0%, 4%) !default; -$orange: #ff851b; -$green: #00db60; -$red: #ff4136; -$blue: #1973ff; -$primary: $blue; $info-invert: $white; @@ -16,10 +9,10 @@ $pagination-current-border: $primary; $navbar-item-active-color: $primary; $dropdown-content-shadow: none; -$dropdown-item-hover-background-color: $grey-100; +$dropdown-item-hover-background-color: var(--grey-100); $bulmaswatch-import-font: false !default; -$light-background: $grey-100; +$light-background: var(--grey-100); $transition-duration: 150ms; $transition: $transition-duration ease; -- 2.45.1 From 48ef995ae8043474136ca28a957c8d87084b2e05 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 15:21:25 +0000 Subject: [PATCH 04/55] Colors from sass vars to css vars, crude prefers-color-scheme based dark mode --- src/App.vue | 4 +- src/components/home/contentAuth.vue | 4 +- src/components/home/contentLinkShare.vue | 4 +- src/components/home/contentNoAuth.vue | 2 +- src/components/home/navigation.vue | 22 ++-- src/components/home/topNavigation.vue | 6 +- src/components/home/update.vue | 2 +- src/components/input/button.vue | 2 +- src/components/input/colorPicker.vue | 2 +- src/components/input/datepicker.vue | 8 +- src/components/input/editor.vue | 8 +- src/components/input/fancycheckbox.vue | 4 +- src/components/input/multiselect.vue | 26 ++-- src/components/list/partials/list-card.vue | 14 +-- src/components/misc/Done.vue | 4 +- src/components/misc/api-config.vue | 2 +- src/components/misc/card.vue | 8 +- src/components/misc/legal.vue | 2 +- src/components/misc/shortcut.vue | 4 +- .../notifications/notifications.vue | 16 +-- .../quick-actions/quick-actions.vue | 8 +- src/components/tasks/edit-task.vue | 2 +- src/components/tasks/gantt-component.vue | 30 ++--- src/components/tasks/partials/attachments.vue | 10 +- .../tasks/partials/checklist-summary.vue | 6 +- src/components/tasks/partials/defer-task.vue | 6 +- .../tasks/partials/editAssignees.vue | 6 +- src/components/tasks/partials/kanban-card.vue | 16 +-- src/components/tasks/partials/listSearch.vue | 2 +- .../tasks/partials/priorityLabel.vue | 4 +- .../tasks/partials/relatedTasks.vue | 8 +- src/components/tasks/partials/reminders.vue | 4 +- .../tasks/partials/singleTaskInList.vue | 24 ++-- src/styles/components/labels.scss | 2 +- src/styles/components/task.scss | 4 +- src/styles/components/tooltip.scss | 4 +- src/styles/theme/background.scss | 2 +- src/styles/theme/content.scss | 2 +- src/styles/theme/navigation.scss | 10 +- src/styles/theme/scrollbars.scss | 6 +- src/styles/theme/theme.scss | 14 +-- src/styles/variables/colors.scss | 112 +++++++++++++++--- src/styles/variables/shadows.scss | 14 ++- src/styles/variables/variables.scss | 6 +- src/views/list/ShowList.vue | 8 +- src/views/list/settings/background.vue | 4 +- src/views/list/views/Kanban.vue | 12 +- src/views/list/views/List.vue | 4 +- src/views/migrator/MigrateService.vue | 4 +- src/views/namespaces/ListNamespaces.vue | 4 +- src/views/tasks/TaskDetailView.vue | 22 ++-- src/views/tasks/TaskDetailViewModal.vue | 4 +- src/views/teams/ListTeams.vue | 2 +- src/views/user/Settings.vue | 6 +- src/views/user/settings/Avatar.vue | 2 +- 55 files changed, 300 insertions(+), 218 deletions(-) diff --git a/src/App.vue b/src/App.vue index dec28560a..5138a8b91 100644 --- a/src/App.vue +++ b/src/App.vue @@ -133,14 +133,14 @@ export default defineComponent({ position: absolute; width: 100vw; bottom: 5vh; - color: $white; + color: var(--white); padding: 0 1rem; h1 { font-weight: bold; font-size: 1.5rem; text-align: center; - color: $white; + color: var(--white); font-weight: 700 !important; font-size: 1.5rem; } diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue index d68cdb43f..56252ffc6 100644 --- a/src/components/home/contentAuth.vue +++ b/src/components/home/contentAuth.vue @@ -166,7 +166,7 @@ export default { } .card { - background: $white; + background: var(--white); } } } @@ -195,7 +195,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) { diff --git a/src/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue index 7dff2fbb9..d0d708c91 100644 --- a/src/components/home/contentLinkShare.vue +++ b/src/components/home/contentLinkShare.vue @@ -65,11 +65,11 @@ export default { } .card { - background: $white; + background: var(--white); } .title { - text-shadow: 0 0 1rem $white; + text-shadow: 0 0 1rem var(--white); } } diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue index b95739067..30204e5eb 100644 --- a/src/components/home/contentNoAuth.vue +++ b/src/components/home/contentNoAuth.vue @@ -68,7 +68,7 @@ export default { \ No newline at end of file diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue index 8db04b3a6..bf6cc501d 100644 --- a/src/components/misc/card.vue +++ b/src/components/misc/card.vue @@ -57,22 +57,22 @@ export default { \ No newline at end of file diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue index ff74921ac..c4e7c21ee 100644 --- a/src/components/misc/legal.vue +++ b/src/components/misc/legal.vue @@ -22,7 +22,7 @@ export default { .legal-links { margin-top: 1rem; text-align: right; - color: $grey-300; + color: var(--grey-300); font-size: 1rem; } \ No newline at end of file diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue index 5d155db20..0afe177e1 100644 --- a/src/components/misc/shortcut.vue +++ b/src/components/misc/shortcut.vue @@ -27,8 +27,8 @@ export default { kbd { padding: .1rem .35rem; - border: 1px solid $grey-300; - background: $grey-100; + border: 1px solid var(--grey-300); + background: var(--grey-100); border-radius: 3px; font-size: .75rem; } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index b67d8816a..51442b517 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -145,9 +145,9 @@ export default { width: .75rem; height: .75rem; - background: $primary; + background: var(--primary); border-radius: 100%; - border: 2px solid $white; + border: 2px solid var(--white); } .notifications-list { @@ -157,7 +157,7 @@ export default { max-height: 400px; overflow-y: auto; - background: $white; + background: var(--white); width: 350px; max-width: calc(100vw - 2rem); padding: .75rem .25rem; @@ -183,14 +183,14 @@ export default { transition: background-color $transition; &:hover { - background: $grey-100; + background: var(--grey-100); border-radius: $radius; } .read-indicator { width: .35rem; height: .35rem; - background: $primary; + background: var(--primary); border-radius: 100%; margin-left: .5rem; @@ -219,7 +219,7 @@ export default { } .created { - color: $grey-400; + color: var(--grey-400); } &:last-child { @@ -227,14 +227,14 @@ export default { } a { - color: $grey-800; + color: var(--grey-800); } } .nothing { text-align: center; padding: 1rem 0; - color: $grey-500; + color: var(--grey-500); .explainer { font-size: .75rem; diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue index 93388d86b..204dd4ebe 100644 --- a/src/components/quick-actions/quick-actions.vue +++ b/src/components/quick-actions/quick-actions.vue @@ -490,11 +490,11 @@ export default { .results { text-align: left; width: 100%; - color: $grey-800; + color: var(--grey-800); .result { &-title { - background: $grey-50; + background: var(--grey-50); padding: .5rem; display: block; font-size: .75rem; @@ -516,12 +516,12 @@ export default { cursor: pointer; &:focus, &:hover { - background: $grey-50; + background: var(--grey-50); box-shadow: none !important; } &:active { - background: $grey-100; + background: var(--grey-100); } } } diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue index d032fc94c..2969f7084 100644 --- a/src/components/tasks/edit-task.vue +++ b/src/components/tasks/edit-task.vue @@ -160,7 +160,7 @@ ul.assingees { a { float: right; - color: $red; + color: var(--danger); transition: all $transition; } } diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue index 874977dc7..53e218a18 100644 --- a/src/components/tasks/gantt-component.vue +++ b/src/components/tasks/gantt-component.vue @@ -447,12 +447,12 @@ export default { \ No newline at end of file diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue index 11e4d0175..0625412b1 100644 --- a/src/components/tasks/partials/priorityLabel.vue +++ b/src/components/tasks/partials/priorityLabel.vue @@ -54,7 +54,7 @@ export default { } span.high-priority { - color: $red; + color: var(--danger); width: auto !important; // To override the width set in tasks .icon { @@ -64,7 +64,7 @@ span.high-priority { } &.not-so-high { - color: $orange; + color: var(--warning); } } \ No newline at end of file diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue index 3badac6cc..df247ceda 100644 --- a/src/components/tasks/partials/relatedTasks.vue +++ b/src/components/tasks/partials/relatedTasks.vue @@ -274,7 +274,7 @@ $remove-icon-width: 24px; } .different-list { - color: $grey-500; + color: var(--grey-500); width: auto; } @@ -312,16 +312,16 @@ $remove-icon-width: 24px; border: 2px solid transparent; a { - color: $text; + color: var(--text); transition: color ease $transition-duration; &:hover { - color: $grey-900; + color: var(--grey-900); } } .remove { - color: $red; + color: var(--danger); } } } diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue index 9d2a629ff..45a0ceabb 100644 --- a/src/components/tasks/partials/reminders.vue +++ b/src/components/tasks/partials/reminders.vue @@ -112,7 +112,7 @@ export default { align-items: center; &.overdue :deep(.datepicker a.show) { - color: $red; + color: var(--danger); } &:last-child { @@ -120,7 +120,7 @@ export default { } a.remove { - color: $red; + color: var(--danger); padding-left: .5rem; } } diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue index da679bcaa..9e955d5c8 100644 --- a/src/components/tasks/partials/singleTaskInList.vue +++ b/src/components/tasks/partials/singleTaskInList.vue @@ -227,7 +227,7 @@ export default { border: 2px solid transparent; &:hover { - background-color: $grey-100; + background-color: var(--grey-100); } .tasktext, @@ -239,13 +239,13 @@ export default { flex: 1 0 50%; .overdue { - color: $red; + color: var(--danger); } } .task-list { width: auto; - color: $grey-400; + color: var(--grey-400); font-size: .9rem; white-space: nowrap; } @@ -273,11 +273,11 @@ export default { } a { - color: $text; + color: var(--text); transition: color ease $transition-duration; &:hover { - color: $grey-900; + color: var(--grey-900); } } @@ -288,12 +288,12 @@ export default { transition: opacity $transition, color $transition; &:hover { - color: $orange; + color: var(--warning); } &.is-favorite { opacity: 1; - color: $orange; + color: var(--warning); } } @@ -324,16 +324,16 @@ export default { .tasktext.done { text-decoration: line-through; - color: $grey-500; + color: var(--grey-500); } span.parent-tasks { - color: $grey-500; + color: var(--grey-500); width: auto; } .remove { - color: $red; + color: var(--danger); } input[type="checkbox"] { @@ -351,8 +351,8 @@ export default { left: calc(50% - 1rem); width: 2rem; height: 2rem; - border-left-color: $grey-300; - border-bottom-color: $grey-300; + border-left-color: var(--grey-300); + border-bottom-color: var(--grey-300); } } \ No newline at end of file diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss index ee06d3f2e..049702652 100644 --- a/src/styles/components/labels.scss +++ b/src/styles/components/labels.scss @@ -6,7 +6,7 @@ .tag { margin: .5rem 0 .5rem .5rem; - background: $grey-200; + background: var(--grey-200); // FIXME: only used in ListLabels.vue &.disabled { diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss index 3db356444..212fd05f4 100644 --- a/src/styles/components/task.scss +++ b/src/styles/components/task.scss @@ -7,8 +7,8 @@ .modal-container .task-view { border-radius: $radius; padding: 1rem; - color: $text; - background-color: $light-background !important; + color: var(--text); + background-color: var(--light-background) !important; @media screen and (max-width: 800px) { border-radius: 0; diff --git a/src/styles/components/tooltip.scss b/src/styles/components/tooltip.scss index 20acf5792..a5b77b3d1 100644 --- a/src/styles/components/tooltip.scss +++ b/src/styles/components/tooltip.scss @@ -5,7 +5,7 @@ z-index: 10000; font-size: 0.8rem; text-align: center; - background: $dark; + background: var(--dark); color: white; border-radius: 5px; padding: 5px 10px 5px; @@ -28,7 +28,7 @@ height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 5px solid $dark; + border-top: 5px solid var(--dark); &.bottom { transform: rotate(180deg); diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss index e57ef22ca..9766811ac 100644 --- a/src/styles/theme/background.scss +++ b/src/styles/theme/background.scss @@ -8,7 +8,7 @@ // FIXME: move to pagination component .pagination-link:not(.is-current) { - background: $light-background; + background: var(--light-background); } .box, diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss index 4be780b15..08eadd1c3 100644 --- a/src/styles/theme/content.scss +++ b/src/styles/theme/content.scss @@ -6,7 +6,7 @@ } .table.has-actions { - border-top: 1px solid $grey-100; + border-top: 1px solid var(--grey-100); border-radius: 4px; overflow: hidden; diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss index 894ef2e12..ef23d5f5e 100644 --- a/src/styles/theme/navigation.scss +++ b/src/styles/theme/navigation.scss @@ -6,14 +6,14 @@ z-index: 31; font-weight: bold; font-size: 2rem; - color: $grey-400; + color: var(--grey-400); line-height: 1; transition: all $transition; &:hover, &:focus { height: 1rem; - color: $grey-600; + color: var(--grey-600); } } @@ -31,7 +31,7 @@ &::after { display: block; content: ''; - border-top: 3px solid $grey-400; + border-top: 3px solid var(--grey-400); border-radius: $radius; transition: all $transition; } @@ -68,7 +68,7 @@ &:hover, &:focus { - color: $text; + color: var(--text); } } @@ -84,7 +84,7 @@ .menu-bottom-link { width: 100%; - color: $grey-300; + color: var(--grey-300); text-align: center; display: block; margin: 1rem 0; diff --git a/src/styles/theme/scrollbars.scss b/src/styles/theme/scrollbars.scss index 29d241067..c985376ee 100644 --- a/src/styles/theme/scrollbars.scss +++ b/src/styles/theme/scrollbars.scss @@ -1,7 +1,7 @@ $scrollbar-height: 8px; -$scrollbar-track-color: $grey-200; -$scrollbar-thumb-color: $grey-300; -$scrollbar-hover-color: $grey-500; +$scrollbar-track-color: var(--grey-200); +$scrollbar-thumb-color: var(--grey-300); +$scrollbar-hover-color: var(--grey-500); // Chrome ::-webkit-scrollbar { diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss index b2549db73..0f5aeff47 100644 --- a/src/styles/theme/theme.scss +++ b/src/styles/theme/theme.scss @@ -6,7 +6,7 @@ } :focus { - box-shadow: 0 0 0 2px rgba($primary, 0.5); + box-shadow: 0 0 0 2px var(--primary-translucent); } :focus:not(:focus-visible) { @@ -15,11 +15,11 @@ :focus-visible, :-moz-focusring { - box-shadow: 0 0 0 2px rgba($primary, 0.5); + box-shadow: 0 0 0 2px var(--primary-translucent); } body { - background: $light-background; + background: var(--light-background); min-height: 100vh; } @@ -54,7 +54,7 @@ h6 { &::-moz-progress-bar, &::-webkit-progress-value { - background: $grey-500; + background: var(--grey-500); } @media screen and (max-width: $tablet) { @@ -103,11 +103,11 @@ button.table { } .icon:not(.has-text-success) { - color: $grey-300 !important; + color: var(--grey-300) !important; } &.has-text-danger .icon { - color: $danger !important; + color: var(--danger) !important; } &.is-disabled { @@ -165,6 +165,6 @@ button.table { } .box { - border: 1px solid $grey-200; + border: 1px solid var(--grey-200); box-shadow: $shadow-sm; } \ No newline at end of file diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 09d04c1dd..fd6ca96e5 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -1,18 +1,96 @@ -$grey-50: #F9FAFB; -$grey-100: #f3f4f6; -$grey-200: #E5E7EB; -$grey-300: #D1D5DB; -$grey-400: #9CA3AF; -$grey-500: #6B7280; -$grey-600: #4B5563; -$grey-700: #374151; -$grey-800: #1F2937; -$grey-900: #111827; +:root { + + /* Vikunja colors as CSS custom properties */ + --grey-50: hsl(210, 20%, 98%); + --grey-100: hsl(220, 14.3%, 95.9%); + --grey-200: hsl(220, 13%, 91%); + --grey-300: hsl(216, 12.2%, 83.9%); + --grey-400: hsl(217.9, 10.6%, 64.9%); + --grey-500-hsl: 220, 8.9%, 46.1%; + --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; diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss index 5782efd99..fdbf4b237 100644 --- a/src/styles/variables/shadows.scss +++ b/src/styles/variables/shadows.scss @@ -1,5 +1,9 @@ -$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24); -$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10); -$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08); -$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05); -$shadow-xl: 0 20px 40px rgba($grey-500, .2); +$shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12), + 0 1px 2px hsla(var(--grey-500-hsl), .24); +$shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12), + 0 2px 4px hsla(var(--grey-500-hsl), .10); +$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); diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index a699d9cf4..8d2e61cd3 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -1,12 +1,12 @@ -$info-invert: $white; +$info-invert: #fff; $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif; $vikunja-font: 'Quicksand', sans-serif; $thickness: 1px; -$pagination-current-border: $primary; -$navbar-item-active-color: $primary; +$pagination-current-border: var(--primary); +$navbar-item-active-color: var(--primary); $dropdown-content-shadow: none; $dropdown-item-hover-background-color: var(--grey-100); diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue index cca9b3d52..5834f6b26 100644 --- a/src/views/list/ShowList.vue +++ b/src/views/list/ShowList.vue @@ -158,7 +158,7 @@ export default { } .switch-view { - background: $white; + background: var(--white); display: inline-flex; border-radius: $radius; font-size: .75rem; @@ -180,17 +180,17 @@ export default { &.is-active, &:hover { - color: $white; + color: var(--white); } &.is-active { - background: $primary; + background: var(--primary); font-weight: bold; box-shadow: $shadow-xs; } &:hover { - background: $primary; + background: var(--primary); } } } diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue index bb3ead15d..197fa0013 100644 --- a/src/views/list/settings/background.vue +++ b/src/views/list/settings/background.vue @@ -167,7 +167,7 @@ export default { font-size: .8rem; a { - color: $grey-800; + color: var(--grey-800); } } @@ -224,7 +224,7 @@ export default { background: rgba(0, 0, 0, 0.5); font-size: .75rem; font-weight: bold; - color: $white; + color: var(--white); transition: opacity $transition; } diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue index 1aa1a3c89..c1271a38b 100644 --- a/src/views/list/views/Kanban.vue +++ b/src/views/list/views/Kanban.vue @@ -593,7 +593,7 @@ export default { \ No newline at end of file diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue index 2fc6f87e7..503a8b3d1 100644 --- a/src/views/teams/ListTeams.vue +++ b/src/views/teams/ListTeams.vue @@ -68,7 +68,7 @@ ul.teams { transition: background-color $transition; &:hover { - background: $grey-100; + background: var(--grey-100); } } } diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue index f2612e575..aba2931d5 100644 --- a/src/views/user/Settings.vue +++ b/src/views/user/Settings.vue @@ -88,13 +88,13 @@ export default { a { display: block; padding: .5rem; - color: $dark; + color: var(--dark); width: 100%; border-left: 3px solid transparent; &:hover, &.router-link-active { - background: $white; - border-color: $primary; + background: var(--white); + border-color: var(--primary); } } } diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue index 72e097535..2f9b74d61 100644 --- a/src/views/user/settings/Avatar.vue +++ b/src/views/user/settings/Avatar.vue @@ -149,6 +149,6 @@ export default { } .vue-advanced-cropper__background { - background: $white; + background: var(--white); } -- 2.45.1 From 5dd40195284a74c7f1993a7a1702a61a70ead5d1 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 15:30:15 +0000 Subject: [PATCH 05/55] CSS vars based editor background colour override --- src/components/input/editor.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue index 34aaa617e..f282af486 100644 --- a/src/components/input/editor.vue +++ b/src/components/input/editor.vue @@ -338,6 +338,7 @@ $editor-border-color: #ddd; .CodeMirror { padding: .5rem; border: 1px solid $editor-border-color; + background: var(--white); &-lines pre { margin: 0 !important; -- 2.45.1 From 9dda522151c14f45cf7f6eb599ab5d93746a46cd Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 15:56:52 +0000 Subject: [PATCH 06/55] Migrate $primary color variations to CSS variables --- src/styles/variables/colors.scss | 5 +++-- src/views/migrator/MigrateService.vue | 2 +- src/views/tasks/TaskDetailView.vue | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index fd6ca96e5..cab71e07b 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -66,6 +66,8 @@ --primary-a: 1 !important; --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); + // simulate sass lighten($primary, 30) by increasing lightness 30% to 73% + --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a)); --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); } @@ -92,5 +94,4 @@ --text-light: var(--grey-300) !important; --text-strong: var(--grey-900) !important; } -} - +} \ No newline at end of file diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue index 3dac7621c..5b9a1fd4a 100644 --- a/src/views/migrator/MigrateService.vue +++ b/src/views/migrator/MigrateService.vue @@ -246,7 +246,7 @@ export default { } 10% { transform: translate(0, -15px); - background-color: $primary-dark; + background-color: var(--primary-dark); } } \ No newline at end of file diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue index aa6da31ea..f450e05ce 100644 --- a/src/views/tasks/TaskDetailView.vue +++ b/src/views/tasks/TaskDetailView.vue @@ -929,7 +929,7 @@ $flash-background-duration: 750ms; @keyframes flash-background { 0% { - background: lighten($primary, 30); + background: var(--primary-light); } 100% { background: transparent; -- 2.45.1 From ce00faad96567b78be8fed50c3b9461b5748003f Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Thu, 4 Nov 2021 16:56:06 +0000 Subject: [PATCH 07/55] Shadows to css vars and change in dark mode --- src/components/input/button.vue | 6 ++-- src/components/list/partials/list-card.vue | 6 ++-- src/components/misc/card.vue | 2 +- .../notifications/notifications.vue | 2 +- src/components/tasks/partials/attachments.vue | 4 +-- src/components/tasks/partials/defer-task.vue | 2 +- src/components/tasks/partials/kanban-card.vue | 2 +- src/styles/theme/theme.scss | 4 +-- src/styles/variables/colors.scss | 8 +++-- src/styles/variables/shadows.scss | 35 ++++++++++++++----- src/views/list/ShowList.vue | 4 +-- 11 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/components/input/button.vue b/src/components/input/button.vue index 256f6350a..831ef11a7 100644 --- a/src/components/input/button.vue +++ b/src/components/input/button.vue @@ -82,11 +82,11 @@ export default { font-size: 0.85rem; font-weight: bold; height: $button-height; - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); &.is-hovered, &:hover { - box-shadow: $shadow-md; + box-shadow: var(--shadow-md); } &.fullheight { @@ -99,7 +99,7 @@ export default { &:active, &:focus, &:focus:not(:active) { - box-shadow: $shadow-xs !important; + box-shadow: var(--shadow-xs) !important; } &.is-primary.is-outlined:hover { diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue index 09a1e71e3..ed727a100 100644 --- a/src/components/list/partials/list-card.vue +++ b/src/components/list/partials/list-card.vue @@ -90,7 +90,7 @@ export default { margin: 0 $list-spacing $list-spacing 0; padding: 1rem; border-radius: $radius; - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); transition: box-shadow $transition; display: flex; @@ -98,13 +98,13 @@ export default { flex-wrap: wrap; &:hover { - box-shadow: $shadow-md; + box-shadow: var(--shadow-md); } &:active, &:focus, &:focus:not(:active) { - box-shadow: $shadow-xs !important; + box-shadow: var(--shadow-xs) !important; } @media screen and (min-width: $widescreen) { diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue index bf6cc501d..ede3f0350 100644 --- a/src/components/misc/card.vue +++ b/src/components/misc/card.vue @@ -61,7 +61,7 @@ export default { border-radius: $radius; margin-bottom: 1rem; border: 1px solid var(--grey-200); - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); } .card-header { diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 51442b517..73dedd8f6 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -162,7 +162,7 @@ export default { max-width: calc(100vw - 2rem); padding: .75rem .25rem; border-radius: $radius; - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); font-size: .85rem; @media screen and (max-width: $tablet) { diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue index bad2430a1..3def47f66 100644 --- a/src/components/tasks/partials/attachments.vue +++ b/src/components/tasks/partials/attachments.vue @@ -339,14 +339,14 @@ export default { width: 100%; font-size: 5rem; height: auto; - text-shadow: $shadow-md; + text-shadow: var(--shadow-md); animation: bounce 2s infinite; } .hint { margin: .5rem auto 2rem; border-radius: 2px; - box-shadow: $shadow-md; + box-shadow: var(--shadow-md); background: var(--primary); padding: 1rem; color: var(--white); diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue index 54d25b392..b4692f746 100644 --- a/src/components/tasks/partials/defer-task.vue +++ b/src/components/tasks/partials/defer-task.vue @@ -148,7 +148,7 @@ $defer-task-max-width: 350px + 100px; color: var(--text); cursor: default; z-index: 10; - box-shadow: $shadow-lg; + box-shadow: var(--shadow-lg); @media screen and (max-width: ($defer-task-max-width)) { left: .5rem; diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue index af00fe235..49241eb4c 100644 --- a/src/components/tasks/partials/kanban-card.vue +++ b/src/components/tasks/partials/kanban-card.vue @@ -123,7 +123,7 @@ $task-background: var(--white); -webkit-touch-callout: none; // iOS Safari user-select: none; cursor: pointer; - box-shadow: $shadow-xs; + box-shadow: var(--shadow-xs); display: block; border: 3px solid transparent; diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss index 0f5aeff47..0b2293979 100644 --- a/src/styles/theme/theme.scss +++ b/src/styles/theme/theme.scss @@ -149,7 +149,7 @@ button.table { } .dropdown-menu .dropdown-content { - box-shadow: $shadow-md; + box-shadow: var(--shadow-md); } .is-strikethrough { @@ -166,5 +166,5 @@ button.table { .box { border: 1px solid var(--grey-200); - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); } \ No newline at end of file diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index cab71e07b..85e1a96b1 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -73,7 +73,7 @@ @media (prefers-color-scheme: dark) { :root { - /* Light mode colours in reverse order for dark mode */ + /* Light mode colours reversed for dark mode */ --grey-900: hsl(210, 20%, 98%); --grey-800: hsl(220, 14.3%, 95.9%); --grey-700: hsl(220, 13%, 91%); @@ -81,9 +81,11 @@ --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-300-hsl: 215, 13.8%, 34.1%; + --grey-300: hsla(var(--grey-300-hsl), 1); --grey-200: hsl(216.9, 19.1%, 26.7%); - --grey-100: hsl(215, 27.9%, 16.9%); + --grey-100-hsl: 215, 27.9%, 16.9%; + --grey-100: hsla(var(--grey-100-hsl), 1); --grey-50: hsl(220.9, 39.3%, 11%); --white-l: 4% !important; diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss index fdbf4b237..9e4e7b456 100644 --- a/src/styles/variables/shadows.scss +++ b/src/styles/variables/shadows.scss @@ -1,9 +1,26 @@ -$shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12), - 0 1px 2px hsla(var(--grey-500-hsl), .24); -$shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12), - 0 2px 4px hsla(var(--grey-500-hsl), .10); -$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); +:root { + --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12), + 0 1px 2px hsla(var(--grey-500-hsl), .24); + --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12), + 0 2px 4px hsla(var(--grey-500-hsl), .10); + --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); +// unused --shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2); +} + +@media (prefers-color-scheme: dark) { + :root { + /* Even darker shadows for dark mode */ + --shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12), + 0 1px 2px hsla(var(--grey-100-hsl), .24); + --shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12), + 0 2px 4px hsla(var(--grey-100-hsl), .10); + --shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12), + 0 3px 6px hsla(var(--grey-100-hsl), .08); + --shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12), + 0 5px 10px hsla(var(--grey-100-hsl), .05); +// unused --shadow-xl: 0 20px 40px hsla(var(--grey-100-hsl), .2); + } +} diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue index 5834f6b26..3389c6d30 100644 --- a/src/views/list/ShowList.vue +++ b/src/views/list/ShowList.vue @@ -162,7 +162,7 @@ export default { display: inline-flex; border-radius: $radius; font-size: .75rem; - box-shadow: $shadow-sm; + box-shadow: var(--shadow-sm); height: $switch-view-height; margin-bottom: 1rem; padding: .5rem; @@ -186,7 +186,7 @@ export default { &.is-active { background: var(--primary); font-weight: bold; - box-shadow: $shadow-xs; + box-shadow: var(--shadow-xs); } &:hover { -- 2.45.1 From 2a65126a80c762f5ca00422e4f8981a21ec32e75 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 11:34:34 +0000 Subject: [PATCH 08/55] No need to use opacity of 1 --- src/styles/variables/colors.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 85e1a96b1..0e36be974 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -7,7 +7,7 @@ --grey-300: hsl(216, 12.2%, 83.9%); --grey-400: hsl(217.9, 10.6%, 64.9%); --grey-500-hsl: 220, 8.9%, 46.1%; - --grey-500: hsla(var(--grey-500-hsl), 1); + --grey-500: hsl(var(--grey-500-hsl)); --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%); @@ -79,13 +79,13 @@ --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-500: hsl(var(--grey-500-hsl)); --grey-400: hsl(220, 8.9%, 46.1%); --grey-300-hsl: 215, 13.8%, 34.1%; - --grey-300: hsla(var(--grey-300-hsl), 1); + --grey-300: hsl(var(--grey-300-hsl)); --grey-200: hsl(216.9, 19.1%, 26.7%); --grey-100-hsl: 215, 27.9%, 16.9%; - --grey-100: hsla(var(--grey-100-hsl), 1); + --grey-100: hsl(var(--grey-100-hsl)); --grey-50: hsl(220.9, 39.3%, 11%); --white-l: 4% !important; -- 2.45.1 From a258b938fabdb69b30615897b157c37a020b4059 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 12:56:37 +0000 Subject: [PATCH 09/55] Removed duplicated :root added --primary-light-l variable --- src/styles/variables/colors.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 0e36be974..6477f3d6a 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -1,6 +1,6 @@ :root { - /* Vikunja colors as CSS custom properties */ + /* Vikunja colors as CSS custom properties */ --grey-50: hsl(210, 20%, 98%); --grey-100: hsl(220, 14.3%, 95.9%); --grey-200: hsl(220, 13%, 91%); @@ -16,7 +16,7 @@ --light-background: var(--grey-100); --scheme-main: var(--white); -// Vikunja overrides of Bulma defaults + // Vikunja overrides of Bulma defaults // --black-bis: #121212; // --black-ter: #242424; --grey-darker: var(--grey-700); @@ -33,7 +33,7 @@ --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); + --white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75); --black-h: 0deg; --black-s: 0%; @@ -63,16 +63,15 @@ --primary-h: 216.5deg !important; --primary-s: 100% !important; --primary-l: 54.9% !important; + --primary-light-l: 73%; --primary-a: 1 !important; --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); // simulate sass lighten($primary, 30) by increasing lightness 30% to 73% - --primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a)); - --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); -} + --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a)); + --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); -@media (prefers-color-scheme: dark) { - :root { + @media (prefers-color-scheme: dark) { /* Light mode colours reversed for dark mode */ --grey-900: hsl(210, 20%, 98%); --grey-800: hsl(220, 14.3%, 95.9%); @@ -96,4 +95,5 @@ --text-light: var(--grey-300) !important; --text-strong: var(--grey-900) !important; } + } \ No newline at end of file -- 2.45.1 From aff7a1f2eadc75b690856ff2b2603a4897588209 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 13:03:54 +0000 Subject: [PATCH 10/55] Removed unused sass variable -invert --- src/styles/variables/variables.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index 8d2e61cd3..5368aba4b 100644 --- a/src/styles/variables/variables.scss +++ b/src/styles/variables/variables.scss @@ -1,6 +1,4 @@ -$info-invert: #fff; - $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif; $vikunja-font: 'Quicksand', sans-serif; @@ -31,4 +29,4 @@ $navbar-icon-width: 40px; $lists-per-row: 5; $list-height: 150px; -$list-spacing: 1rem; +$list-spacing: 1rem; \ No newline at end of file -- 2.45.1 From 0191f12db76bf93bee91ea0e58dd7d52c2f423e4 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 13:30:53 +0000 Subject: [PATCH 11/55] Fix broken bucket-background value s by reverting to sass variable --- src/views/list/views/Kanban.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue index c1271a38b..032cc0c71 100644 --- a/src/views/list/views/Kanban.vue +++ b/src/views/list/views/Kanban.vue @@ -636,7 +636,7 @@ $filter-container-height: '1rem - #{$switch-view-height}'; } .bucket { - background-color: var(--bucket-background); + background-color: $bucket-background; border-radius: $radius; position: relative; @@ -685,7 +685,7 @@ $filter-container-height: '1rem - #{$switch-view-height}'; padding-right: 1rem; .button { - background: var(--bucket-background); + background: $bucket-background; width: 100%; } } -- 2.45.1 From b39a699d5878eb0ee95b5be155027f49d9b58040 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 14:04:12 +0000 Subject: [PATCH 12/55] Change dark mode white to a grey looks better --- src/styles/variables/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 6477f3d6a..6fc1dc218 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -87,7 +87,7 @@ --grey-100: hsl(var(--grey-100-hsl)); --grey-50: hsl(220.9, 39.3%, 11%); - --white-l: 4% !important; + --white: var(--grey-50); --black-l: 100% !important; --text: var(--grey-800) !important; -- 2.45.1 From 1c90178e5e6747d0bcf62dd617d9c9600615c8ab Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 22:17:05 +0000 Subject: [PATCH 13/55] Fix #2 - modal close button not visible --- src/styles/variables/colors.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 6fc1dc218..26d0ae499 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -94,6 +94,10 @@ --text-invert: #000 !important; --text-light: var(--grey-300) !important; --text-strong: var(--grey-900) !important; - } + // svg uses currentColor, change the color to keep the modal close X visible + .close { + color: var(--grey-900); + } + } } \ No newline at end of file -- 2.45.1 From f5f00bf46ef7ffcde341c96ac88a1b8aa6186ebc Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Fri, 5 Nov 2021 23:34:43 +0000 Subject: [PATCH 14/55] Remove important declarations that are no longer needed --- src/styles/variables/colors.scss | 42 ++++++++++++++++---------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index 26d0ae499..ac6eff38c 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -42,29 +42,29 @@ --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-h: 27.9deg; + --warning-s: 100%; + --warning-l: 55.3%; + --warning-a: 1; --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-h: 146.3deg; + --success-s: 100%; + --success-l: 42.9%; + --success-a: 1; --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-h: 3.3deg; + --danger-s: 100%; + --danger-l: 60.6%; + --danger-a: 1; --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-h: 216.5deg; + --primary-s: 100%; + --primary-l: 54.9%; --primary-light-l: 73%; - --primary-a: 1 !important; + --primary-a: 1; --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); // simulate sass lighten($primary, 30) by increasing lightness 30% to 73% @@ -88,12 +88,12 @@ --grey-50: hsl(220.9, 39.3%, 11%); --white: var(--grey-50); - --black-l: 100% !important; + --black-l: 100%; - --text: var(--grey-800) !important; - --text-invert: #000 !important; - --text-light: var(--grey-300) !important; - --text-strong: var(--grey-900) !important; + --text: var(--grey-800); + --text-invert: #000; + --text-light: var(--grey-300); + --text-strong: var(--grey-900); // svg uses currentColor, change the color to keep the modal close X visible .close { -- 2.45.1 From 6877ca30a135278aeaaff35416f1d9c26582ff9d Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 8 Nov 2021 13:48:54 +0000 Subject: [PATCH 15/55] Move dark color for modal close icon into scoped styles --- src/styles/variables/colors.scss | 5 ----- src/views/tasks/TaskDetailViewModal.vue | 7 +++++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss index ac6eff38c..ffbc6256e 100644 --- a/src/styles/variables/colors.scss +++ b/src/styles/variables/colors.scss @@ -94,10 +94,5 @@ --text-invert: #000; --text-light: var(--grey-300); --text-strong: var(--grey-900); - - // svg uses currentColor, change the color to keep the modal close X visible - .close { - color: var(--grey-900); - } } } \ No newline at end of file diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue index 21f724625..507e1d566 100644 --- a/src/views/tasks/TaskDetailViewModal.vue +++ b/src/views/tasks/TaskDetailViewModal.vue @@ -60,4 +60,11 @@ export default { color: var(--dark); } } + +/* Close icon SVG uses currentColor, change the color to keep it visible */ +@media (prefers-color-scheme: dark) { + .close { + color: var(--grey-900); + } +} \ No newline at end of file -- 2.45.1 From 92b2010cdc7912142105a401056ec200dd6356eb Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 8 Nov 2021 15:03:14 +0000 Subject: [PATCH 16/55] Remove shadow-xl, move dark mode shadows in a single root declaration --- src/styles/variables/shadows.scss | 24 ++++++++++-------------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss index 9e4e7b456..3fedee0a3 100644 --- a/src/styles/variables/shadows.scss +++ b/src/styles/variables/shadows.scss @@ -7,20 +7,16 @@ 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); -// unused --shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2); -} @media (prefers-color-scheme: dark) { - :root { - /* Even darker shadows for dark mode */ - --shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12), - 0 1px 2px hsla(var(--grey-100-hsl), .24); - --shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12), - 0 2px 4px hsla(var(--grey-100-hsl), .10); - --shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12), - 0 3px 6px hsla(var(--grey-100-hsl), .08); - --shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12), - 0 5px 10px hsla(var(--grey-100-hsl), .05); -// unused --shadow-xl: 0 20px 40px hsla(var(--grey-100-hsl), .2); + /* Even darker shadows for dark mode */ + --shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12), + 0 1px 2px hsla(var(--grey-100-hsl), .24); + --shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12), + 0 2px 4px hsla(var(--grey-100-hsl), .10); + --shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12), + 0 3px 6px hsla(var(--grey-100-hsl), .08); + --shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12), + 0 5px 10px hsla(var(--grey-100-hsl), .05); } -} +} \ No newline at end of file -- 2.45.1 From 54f1271ab935a5b0c93168378395c4093ac4f01b Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 8 Nov 2021 15:26:07 +0000 Subject: [PATCH 17/55] Remove bucket-background sass var, define bucket background color directly --- src/views/list/views/Kanban.vue | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue index 032cc0c71..3b3dc4b6f 100644 --- a/src/views/list/views/Kanban.vue +++ b/src/views/list/views/Kanban.vue @@ -593,7 +593,6 @@ export default { diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 8cba8dbb1..848349c6e 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -79,6 +79,8 @@ // Define custom color variable to alow change in dark mode --card-border-color: var(--grey-200); + --logo-text-color: hsl(180, 1%, 15%); + &.dark { @@ -113,5 +115,6 @@ // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); + --logo-text-color: var(--grey-700); } } \ No newline at end of file -- 2.45.1 From f11eeb6dce8c23c581123f6ecf27866d8fd80e71 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Sat, 13 Nov 2021 22:53:34 +0000 Subject: [PATCH 33/55] Fix embeded logo inheriting bulma navbar hover styles --- src/components/home/topNavigation.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue index 3634f4772..20e99c49a 100644 --- a/src/components/home/topNavigation.vue +++ b/src/components/home/topNavigation.vue @@ -146,6 +146,11 @@ $vikunja-nav-logo-full-width: 164px; display: none; color: var(--logo-text-color); + &:hover, &:focus { + background-color: transparent; + color: var(--primary); + } + @media screen and (min-width: $tablet) { align-self: stretch; display: flex; -- 2.45.1 From 3bd3165032e3c95e430987faafdf2fa07a4728e9 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Sat, 13 Nov 2021 23:24:15 +0000 Subject: [PATCH 34/55] Fix tag color in dark mode --- src/styles/custom-properties/colors.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 848349c6e..f2fad4434 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -111,7 +111,8 @@ // Elements that rely on Bulma defaults in light mode but // need to be overriden in dark mode - --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6) !important; + --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6); + --tag-color: var(--grey-50); // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); -- 2.45.1 From d4b02e1dbc19efaf42966fa8d539b69e6c27c2dd Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Sun, 14 Nov 2021 00:20:44 +0000 Subject: [PATCH 35/55] Fix for quick actions results buttons text being to dark in dark mode --- src/components/quick-actions/quick-actions.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue index 93d097360..226a29c66 100644 --- a/src/components/quick-actions/quick-actions.vue +++ b/src/components/quick-actions/quick-actions.vue @@ -536,6 +536,7 @@ export default { font-size: .9rem; width: 100%; background: transparent; + color: var(--grey-800); text-align: left; box-shadow: none; border-radius: 0; -- 2.45.1 From 78e345d0b60871bdeaacaa05157c7c7ae18207bd Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Sun, 14 Nov 2021 00:35:27 +0000 Subject: [PATCH 36/55] Fix heavier border on inputs vs multiselect input wrapper --- src/styles/custom-properties/colors.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index f2fad4434..0fd4f5225 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -28,6 +28,7 @@ --grey-lightest: var(--grey-100); // --white-ter: whitesmoke; // --white-bis: #fafafa; + --input-border-color: var(--grey-200); --white-h: 0deg; --white-s: 0%; -- 2.45.1 From 2c695ef03a57dc2d2280b09463c1234044e4e874 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 13:36:40 +0000 Subject: [PATCH 37/55] Remove conflicts accidentaly committed. --- src/components/tasks/partials/listSearch.vue | 4 - yarn.lock | 92 +++----------------- 2 files changed, 13 insertions(+), 83 deletions(-) diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue index 469d1eb1f..9dabce80c 100644 --- a/src/components/tasks/partials/listSearch.vue +++ b/src/components/tasks/partials/listSearch.vue @@ -70,10 +70,6 @@ export default { \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8282a73aa..7644480b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2883,12 +2883,6 @@ "@vue/compiler-dom" "3.2.21" "@vue/shared" "3.2.21" -<<<<<<< HEAD -"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.13", "@vue/devtools-api@^6.0.0-beta.18": - version "6.0.0-beta.20.1" - resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.20.1.tgz#5b499647e929c35baf2a66a399578f9aa4601142" - integrity sha512-R2rfiRY+kZugzWh9ZyITaovx+jpU4vgivAEAiz80kvh3yviiTU3CBuGuyWpSwGz9/C7TkSWVM/FtQRGlZ16n8Q== -======= "@vue/compiler-ssr@3.2.22": version "3.2.22" resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.22.tgz#23552c31b76b45baf5f244713c81d77ab59447d2" @@ -2911,7 +2905,6 @@ version "6.0.0-beta.19" resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.19.tgz#f8e88059daa424515992426a0c7ea5cde07e99bf" integrity sha512-ObzQhgkoVeoyKv+e8+tB/jQBL2smtk/NmC9OmFK8UqdDpoOdv/Kf9pyDWL+IFyM7qLD2C75rszJujvGSPSpGlw== ->>>>>>> upstream/main "@vue/eslint-config-typescript@9.0.1": version "9.0.1" @@ -2986,7 +2979,11 @@ resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.21.tgz#4cd80c0e62cf65a7adab2449e86b6f0cb33a130b" integrity sha512-5EQmIPK6gw4UVYUbM959B0uPsJ58+xoMESCZs3N89XyvJ9e+fX4pqEPrOGV8OroIk3SbEvJcC+eYc8BH9JQrHA== -<<<<<<< HEAD +"@vue/shared@3.2.22": + version "3.2.22" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41" + integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ== + "@vueuse/core@^6.8.0": version "6.8.0" resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.8.0.tgz#dc004bc30031e053e9ef5011203c4a80f00986ed" @@ -3001,12 +2998,6 @@ integrity sha512-+YjehQ8Qe4Qgyq8iTToVOzp4sZBAZvScv3AGJSMi6HYbe54+nyjrRfS8DN4fA0eUahyftHKZ00WKgMe7TS5N0w== dependencies: vue-demi "*" -======= -"@vue/shared@3.2.22": - version "3.2.22" - resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.22.tgz#26dcbe5e530f6c1f2de5ca9aeab92ab00f523b41" - integrity sha512-qWVav014mpjEtbWbEgl0q9pEyrrIySKum8UVYjwhC6njrKzknLZPvfuYdQyVbApsqr94tf/3dP4pCuZmmjdCWQ== ->>>>>>> upstream/main abab@^2.0.3, abab@^2.0.5: version "2.0.5" @@ -3406,16 +3397,12 @@ astral-regex@^2.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== -<<<<<<< HEAD -async@^3.1.0, async@^3.2.0: -======= async@0.9.x: version "0.9.2" resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0= -async@^3.1.0: ->>>>>>> upstream/main +async@^3.1.0, async@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/async/-/async-3.2.2.tgz#2eb7671034bb2194d45d30e31e24ec7e7f9670cd" integrity sha512-H0E+qZaDEfx/FY4t7iLRv1W2fFI6+pyCeTw1uN20AQPiwqwM6ojPxHxdLv4z8hi2DtnW9BOckSspLucW7pIE5g== @@ -3753,17 +3740,10 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== -<<<<<<< HEAD -browserslist@4.17.6, browserslist@^4.17.5, browserslist@^4.17.6: - version "4.17.6" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.6.tgz#c76be33e7786b497f66cad25a73756c8b938985d" - integrity sha512-uPgz3vyRTlEiCv4ee9KlsKgo2V6qPk7Jsn0KAn2OBqbqKo3iNcPEC1Ti6J4dwnz+aIRfEEEuOzC9IBk8tXUomw== -======= browserslist@4.18.0: version "4.18.0" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.0.tgz#849944d9bbbbe5ff6f418a8b558e3effca433cae" integrity sha512-ER2M0g5iAR84fS/zjBDqEgU6iO5fS9JI2EkHr5zxDxYEFk3LjhU9Vpp/INb6RMQphxko7PDV1FH38H/qVP5yCA== ->>>>>>> upstream/main dependencies: caniuse-lite "^1.0.30001280" electron-to-chromium "^1.3.896" @@ -3771,19 +3751,6 @@ browserslist@4.18.0: node-releases "^2.0.1" picocolors "^1.0.0" -<<<<<<< HEAD -======= -browserslist@^4.16.6: - version "4.16.6" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2" - integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ== - dependencies: - caniuse-lite "^1.0.30001219" - colorette "^1.2.2" - electron-to-chromium "^1.3.723" - escalade "^3.1.1" - node-releases "^1.1.71" - browserslist@^4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.5.tgz#c827bbe172a4c22b123f5e337533ceebadfdd559" @@ -3806,7 +3773,6 @@ browserslist@^4.17.6: node-releases "^2.0.1" picocolors "^1.0.0" ->>>>>>> upstream/main bs-logger@0.x: version "0.2.6" resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8" @@ -4004,16 +3970,16 @@ camelcase@^6.0.0, camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== +caniuse-lite@^1.0.30001271, caniuse-lite@^1.0.30001280: + version "1.0.30001280" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz#066a506046ba4be34cde5f74a08db7a396718fb7" + integrity sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA== + caniuse-lite@^1.0.30001272, caniuse-lite@^1.0.30001274: version "1.0.30001279" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001279.tgz#eb06818da481ef5096a3b3760f43e5382ed6b0ce" integrity sha512-VfEHpzHEXj6/CxggTwSFoZBBYGQfQv9Cf42KPlO79sWXCD1QNKWKsKzFeWL7QpZHJQYAvocqV6Rty1yJMkqWLQ== -caniuse-lite@^1.0.30001280: - version "1.0.30001280" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz#066a506046ba4be34cde5f74a08db7a396718fb7" - integrity sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA== - cardinal@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-2.1.1.tgz#7cc1055d822d212954d07b085dea251cc7bc5505" @@ -5343,8 +5309,6 @@ ejs@^2.6.1: resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba" integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA== -<<<<<<< HEAD -======= ejs@^3.1.6: version "3.1.6" resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.6.tgz#5bfd0a0689743bb5268b3550cceeebbc1702822a" @@ -5352,17 +5316,11 @@ ejs@^3.1.6: dependencies: jake "^10.6.1" -electron-to-chromium@^1.3.723: - version "1.3.786" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.786.tgz#1fc572abc77e2f474725f8a61acf7e25ced9fbe2" - integrity sha512-AmvbLBj3hepRk8v/DHrFF8gINxOFfDbrn6Ts3PcK46/FBdQb5OMmpamSpZQXSkfi77FfBzYtQtAk+00LCLYMVw== - electron-to-chromium@^1.3.878: version "1.3.878" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.878.tgz#baa9fb5c24b9b580f08fb245cbb52a22f8fc8fa8" integrity sha512-O6yxWCN9ph2AdspAIszBnd9v8s11hQx8ub9w4UGApzmNRnoKhbulOWqbO8THEQec/aEHtvy+donHZMlh6l1rbA== ->>>>>>> upstream/main electron-to-chromium@^1.3.886: version "1.3.894" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.894.tgz#54554ecb40d40ddac7241c4a42887e86180015d8" @@ -7082,12 +7040,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4: dependencies: safer-buffer ">= 2.1.2 < 3" -idb@^6.0.0: - version "6.1.5" - resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b" - integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw== - -idb@^6.1.4: +idb@^6.0.0, idb@^6.1.4: version "6.1.5" resolved "https://registry.yarnpkg.com/idb/-/idb-6.1.5.tgz#dbc53e7adf1ac7c59f9b2bf56e00b4ea4fce8c7b" integrity sha512-IJtugpKkiVXQn5Y+LteyBCNk1N8xpGV3wWZk9EVtZWH8DYkjBn0bX1XnGP9RkyZF0sAcywa6unHqSWKe7q4LGw== @@ -10942,11 +10895,7 @@ rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2: dependencies: estree-walker "^0.6.1" -<<<<<<< HEAD -rollup@2.60.0, rollup@^2.43.1, rollup@^2.57.0, rollup@^2.58.0: -======= rollup@2.60.0, rollup@^2.60.0: ->>>>>>> upstream/main version "2.60.0" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.60.0.tgz#4ee60ab7bdd0356763f87d7099f413e5460fc193" integrity sha512-cHdv9GWd58v58rdseC8e8XIaPUo8a9cgZpnCMMDGZFDZKEODOiPPEQFXLriWr/TjXzhPPmG5bkAztPsOARIcGQ== @@ -10960,8 +10909,6 @@ rollup@^2.23.1: optionalDependencies: fsevents "~2.3.2" -<<<<<<< HEAD -======= rollup@^2.43.1: version "2.54.0" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.54.0.tgz#99ea816e8e9b1c6af3ab957a4e7a8f78dbd87773" @@ -10976,7 +10923,6 @@ rollup@^2.57.0: optionalDependencies: fsevents "~2.3.2" ->>>>>>> upstream/main run-async@^2.2.0, run-async@^2.4.0: version "2.4.1" resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455" @@ -11507,7 +11453,7 @@ string-width@^1.0.1: is-fullwidth-code-point "^2.0.0" strip-ansi "^4.0.0" -"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2: +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.2.2: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -11516,17 +11462,6 @@ string-width@^1.0.1: is-fullwidth-code-point "^3.0.0" strip-ansi "^6.0.1" -<<<<<<< HEAD -======= -string-width@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961" - integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w== - dependencies: - emoji-regex "^7.0.1" - is-fullwidth-code-point "^2.0.0" - strip-ansi "^5.1.0" - string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0: version "4.2.2" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5" @@ -11566,7 +11501,6 @@ string.prototype.trimstart@^1.0.4: call-bind "^1.0.2" define-properties "^1.1.3" ->>>>>>> upstream/main string_decoder@^1.1.1: version "1.3.0" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e" -- 2.45.1 From d7c592d6abc035cab3b3547144b4f2f855e6fb70 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 14:50:51 +0000 Subject: [PATCH 38/55] Fix for table row text not visible on hover --- src/styles/custom-properties/colors.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 0fd4f5225..16a9bc1c1 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -114,6 +114,7 @@ // need to be overriden in dark mode --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6); --tag-color: var(--grey-50); + --table-row-hover-background-color: var(--grey-100); // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); -- 2.45.1 From 7e064053f92412850403381b83dd10a8e968f8cd Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 16:14:31 +0000 Subject: [PATCH 39/55] Fix poor readability of dropdown menu items --- src/styles/custom-properties/colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 16a9bc1c1..860509c2f 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -115,6 +115,8 @@ --input-placeholder-color: hsla(var(--grey-900-hsl), 0.6); --tag-color: var(--grey-50); --table-row-hover-background-color: var(--grey-100); + --dropdown-item-hover-background-color: var(--grey-100); + --dropdown-item-hover-color: --text; // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); -- 2.45.1 From 595a5e81454f5a4799651d33499361750c44b325 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 16:27:25 +0000 Subject: [PATCH 40/55] Make dark mode shadows visible. --- src/styles/custom-properties/shadows.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/styles/custom-properties/shadows.scss b/src/styles/custom-properties/shadows.scss index bbeb34fa7..23c965a45 100644 --- a/src/styles/custom-properties/shadows.scss +++ b/src/styles/custom-properties/shadows.scss @@ -10,13 +10,13 @@ &.dark { // Even darker shadows for dark mode - --shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12), - 0 1px 2px hsla(var(--grey-100-hsl), .24); - --shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12), - 0 2px 4px hsla(var(--grey-100-hsl), .10); - --shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12), - 0 3px 6px hsla(var(--grey-100-hsl), .08); - --shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12), - 0 5px 10px hsla(var(--grey-100-hsl), .05); + --shadow-xs: 0 1px 3px var(--white), + 0 1px 2px var(--white); + --shadow-sm: 0 3px 6px var(--white), + 0 2px 4px var(--white); + --shadow-md: 0 10px 20px var(--white), + 0 3px 6px var(--white); + --shadow-lg: 0 15px 25px var(--white), + 0 5px 10px var(--white); } } \ No newline at end of file -- 2.45.1 From f1ecf6d89756e5d101b1e756dcc4ce699d600505 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 22:42:27 +0000 Subject: [PATCH 41/55] Still visible but better color shadows --- src/styles/custom-properties/colors.scss | 3 ++- src/styles/custom-properties/shadows.scss | 18 +++++++++--------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 860509c2f..638fd7cdd 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -98,7 +98,8 @@ --grey-200: hsl(216.9, 19.1%, 26.7%); --grey-100-hsl: 215, 27.9%, 16.9%; --grey-100: hsl(var(--grey-100-hsl)); - --grey-50: hsl(220.9, 39.3%, 11%); + --grey-50-hsl: 220.9, 39.3%, 11%; + --grey-50: hsl(var(--grey-50-hsl)); // Dark grey looks better than black --white: var(--grey-50); diff --git a/src/styles/custom-properties/shadows.scss b/src/styles/custom-properties/shadows.scss index 23c965a45..5f040ca11 100644 --- a/src/styles/custom-properties/shadows.scss +++ b/src/styles/custom-properties/shadows.scss @@ -1,5 +1,5 @@ :root { - --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12), + --shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12), 0 1px 2px hsla(var(--grey-500-hsl), .24); --shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12), 0 2px 4px hsla(var(--grey-500-hsl), .10); @@ -10,13 +10,13 @@ &.dark { // Even darker shadows for dark mode - --shadow-xs: 0 1px 3px var(--white), - 0 1px 2px var(--white); - --shadow-sm: 0 3px 6px var(--white), - 0 2px 4px var(--white); - --shadow-md: 0 10px 20px var(--white), - 0 3px 6px var(--white); - --shadow-lg: 0 15px 25px var(--white), - 0 5px 10px var(--white); + --shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4), + 0 1px 2px hsla(var(--grey-50-hsl), 0.8); + --shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8), + 0 2px 4px hsla(var(--grey-50-hsl), 0.6); + --shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8), + 0 3px 6px hsla(var(--grey-50-hsl), 0.6); + --shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8), + 0 5px 10px hsla(var(--grey-50-hsl), 0.4); } } \ No newline at end of file -- 2.45.1 From 05cf268dd817eb6c49aff1e13050f4e6d4f59855 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Mon, 15 Nov 2021 22:47:28 +0000 Subject: [PATCH 42/55] Typo fix. --- src/styles/custom-properties/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 638fd7cdd..55b528790 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -117,7 +117,7 @@ --tag-color: var(--grey-50); --table-row-hover-background-color: var(--grey-100); --dropdown-item-hover-background-color: var(--grey-100); - --dropdown-item-hover-color: --text; + --dropdown-item-hover-color: var(--text); // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); -- 2.45.1 From 359a6b17d99a298b3aed08e9c082221d6466482b Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Tue, 16 Nov 2021 12:09:46 +0000 Subject: [PATCH 43/55] Make tertary buttons useable --- src/styles/custom-properties/colors.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 55b528790..931f79609 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -118,6 +118,8 @@ --table-row-hover-background-color: var(--grey-100); --dropdown-item-hover-background-color: var(--grey-100); --dropdown-item-hover-color: var(--text); + --button-text-hover-background-color: var(--grey-200); + --button-hover-color: var(--grey-600); // Custom color variables we need to override --card-border-color: hsla(var(--grey-100-hsl), 0.3); -- 2.45.1 From bbf807428576552ebe363472d51de485133365c9 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Tue, 16 Nov 2021 17:48:54 +0000 Subject: [PATCH 44/55] Clean up, remove whitespace to make comment scope clearer --- src/styles/custom-properties/colors.scss | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/styles/custom-properties/colors.scss b/src/styles/custom-properties/colors.scss index 931f79609..d990cb84d 100644 --- a/src/styles/custom-properties/colors.scss +++ b/src/styles/custom-properties/colors.scss @@ -13,57 +13,46 @@ --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%); - --site-background: var(--grey-100); --scheme-main: var(--white); // 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; --input-border-color: var(--grey-200); - --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; --warning-s: 100%; --warning-l: 55.3%; --warning-a: 1; --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; --success-s: 100%; --success-l: 42.9%; --success-a: 1; --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; --danger-s: 100%; --danger-l: 60.6%; --danger-a: 1; --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; --primary-s: 100%; @@ -75,6 +64,7 @@ --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a)); + // Define custom color variable to prevent change in dark mode --switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a)); -- 2.45.1 From 347a77f11b94066f7008d2d963815a48eb3c5cac Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Tue, 16 Nov 2021 18:01:42 +0000 Subject: [PATCH 45/55] by @dpschen fix: respect .dark class instead of prefers-color-scheme --- src/views/tasks/TaskDetailViewModal.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue index 507e1d566..9b4932464 100644 --- a/src/views/tasks/TaskDetailViewModal.vue +++ b/src/views/tasks/TaskDetailViewModal.vue @@ -2,6 +2,7 @@ @@ -60,11 +61,11 @@ export default { color: var(--dark); } } + -/* Close icon SVG uses currentColor, change the color to keep it visible */ -@media (prefers-color-scheme: dark) { - .close { - color: var(--grey-900); - } + \ No newline at end of file -- 2.45.1 From f2dc5b643d07d0faa4a198ea0c855b1539d233bc Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Tue, 16 Nov 2021 18:18:43 +0000 Subject: [PATCH 46/55] Review suggestion by dpschen: pagination link color to a color --- src/styles/theme/background.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss index 4b8570c04..b03b04f46 100644 --- a/src/styles/theme/background.scss +++ b/src/styles/theme/background.scss @@ -8,7 +8,7 @@ // FIXME: move to pagination component .pagination-link:not(.is-current) { - background: var(--site-background); + background: var(--grey-100); } .box, -- 2.45.1 From 4133363fe10cd724862007e57a82339928cd4362 Mon Sep 17 00:00:00 2001 From: Adrian Simmons Date: Tue, 16 Nov 2021 21:36:25 +0000 Subject: [PATCH 47/55] By @dpschen fix: move logo color definition to logo.vue --- src/components/home/Logo.vue | 10 ++++++++-- src/components/home/topNavigation.vue | 11 +++-------- src/components/misc/no-auth-wrapper.vue | 4 ---- 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/home/Logo.vue b/src/components/home/Logo.vue index cea2d0f04..5a5612b46 100644 --- a/src/components/home/Logo.vue +++ b/src/components/home/Logo.vue @@ -7,5 +7,11 @@ const Logo = computed(() => new Date().getMonth() === 5 ? LogoFullPride : LogoFu \ No newline at end of file +