adrinux
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP at converting Bulma/SASS vars to CSS. Enabling prefers-dark mode

This commit is contained in:
Adrian Simmons 2021-09-09 16:23:51 +01:00
parent 2899258744
commit 64d9c5e455
32 changed files with 153 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/components/attachments.scss
View File

@ -14,7 +14,7 @@
padding: .5rem;
&:hover {
background-color: $grey-200;
background-color: var(--grey-200);
}
.filename {
@ -24,7 +24,7 @@
}
.info {
color: $grey-500;
color: var(--grey-500);
font-size: .9rem;
p {
@ -96,7 +96,7 @@
box-shadow: $shadow-md;
background: $primary;
padding: 1rem;
color: $white;
color: var(--white);
width: 100%;
max-width: 300px;
}

8
src/styles/components/base/card.scss
View File

@ -1,5 +1,5 @@
.card {
background-color: $white;
background-color: var(--white);
border-radius: $radius;
margin-bottom: 1rem;
@ -11,17 +11,17 @@
.card-header {
box-shadow: none;
border-bottom: 1px solid $grey-200;
border-bottom: 1px solid var(--grey-200);
border-radius: $radius $radius 0 0;
}
.modal-card-foot {
background: $grey-50;
background: var(--grey-50);
border-top: 0;
}
}
.box, .card {
border: 1px solid $grey-200;
border: 1px solid var(--grey-200);
box-shadow: $shadow-sm;
}

22
src/styles/components/base/multiselect.scss
View File

@ -9,22 +9,22 @@
&.has-search-results .input-wrapper {
border-radius: $radius $radius 0 0;
border-color: $primary !important;
background: $white !important;
background: var(--white) !important;
&, &:focus-within {
border-bottom-color: $grey-200 !important;
border-bottom-color: var(--grey-200) !important;
}
}
.input-wrapper {
padding: 0;
background: $white !important;
border-color: $grey-200 !important;
background: var(--white) !important;
border-color: var(--grey-200) !important;
flex-wrap: wrap;
height: auto;
&:hover {
border-color: $grey-300 !important;
border-color: var(--grey-300) !important;
}
.input {
@ -51,7 +51,7 @@
&:focus-within {
border-color: $primary !important;
background: $white !important;
background: var(--white) !important;
}
.loader {
@ -60,7 +60,7 @@
}
.search-results {
background: $white;
background: var(--white);
border-radius: 0 0 $radius $radius;
border: 1px solid $primary;
border-top: none;
@ -109,7 +109,7 @@
}
&:focus, &:hover {
background: $grey-100;
background: var(--grey-100);
box-shadow: none !important;
.hint-text {
@ -118,7 +118,7 @@
}
&:active {
background: $grey-200;
background: var(--grey-200);
}
}
}
@ -131,7 +131,7 @@
}
.user img {
border: 2px solid $white;
border: 2px solid var(--white);
margin-right: 0;
}
@ -140,7 +140,7 @@
top: 4px;
left: 2px;
color: $red;
background: $white;
background: var(--white);
padding: 0 4px;
display: block;
border-radius: 100%;

2
src/styles/components/color-picker.scss
View File

@ -5,7 +5,7 @@
.verte__guide {
border-radius: 100%;
border: 1px solid $grey-300;
border: 1px solid var(--grey-300);
box-shadow: $card-shadow;
}
}

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

@ -11,7 +11,7 @@
position: absolute;
z-index: 99;
width: 320px;
background: $white;
background: var(--white);
border-radius: $radius;
box-shadow: $card-shadow;

12
src/styles/components/gantt.scss
View File

@ -1,5 +1,5 @@
$gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: $grey-100;
$gantt-border: 1px solid var(--grey-200);
$gantt-vertical-border-color: var(--grey-100);
.gantt-chart-container {
padding-bottom: 1rem;
@ -7,7 +7,7 @@ $gantt-vertical-border-color: $grey-100;
.gantt-chart {
overflow-x: auto;
border-top: 1px solid $grey-200;
border-top: 1px solid var(--grey-200);
.dates {
display: flex;
@ -35,7 +35,7 @@ $gantt-vertical-border-color: $grey-100;
&.today {
background: $primary;
color: $white;
color: var(--white);
border-radius: 5px 5px 0 0;
font-weight: bold;
}
@ -158,8 +158,8 @@ $gantt-vertical-border-color: $grey-100;
}
&.nodate {
border: 2px dashed $grey-300;
background: $grey-100;
border: 2px dashed var(--grey-300);
background: var(--grey-100);
}
&:active {

4
src/styles/components/hint-modal.scss
View File

@ -23,8 +23,8 @@
span {
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;
}

20
src/styles/components/kanban.scss
View File

@ -1,7 +1,7 @@
@use 'sass:math';
$bucket-background: $grey-100;
$task-background: $white;
$bucket-background: var(--grey-100);
$task-background: var(--white);
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
$bucket-width: 300px;
$bucket-header-height: 60px;
@ -34,7 +34,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.ghost {
background: transparent !important;
border: 3px dashed $grey-300 !important;
border: 3px dashed var(--grey-300) !important;
box-shadow: none !important;
* {
@ -162,7 +162,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
.footer .icon,
.due-date,
.priority-label {
background: $grey-100;
background: var(--grey-100);
border-radius: $radius;
padding: 0 .5rem;
}
@ -172,7 +172,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
.task-id {
color: $grey-500;
color: var(--grey-500);
font-size: .8rem;
margin-bottom: .25rem;
display: flex;
@ -193,21 +193,21 @@ $filter-container-height: '1rem - #{$switch-view-height}';
}
&.has-light-text {
color: $white;
color: var(--white);
.task-id {
color: $grey-200;
color: var(--grey-200);
}
.footer .icon,
.due-date,
.priority-label {
background: $grey-800;
background: var(--grey-800);
}
.footer {
.icon svg {
fill: $white;
fill: var(--white);
}
}
}
@ -307,7 +307,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
background-color: transparent;
&:hover {
background-color: $white;
background-color: var(--white);
}
}
}

2
src/styles/components/keyboard-shortcuts.scss
View File

@ -4,7 +4,7 @@
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) {

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

@ -5,7 +5,7 @@
.tag {
margin: .5rem 0 .5rem .5rem;
background: $grey-200;
background: var(--grey-200);
&.disabled {
opacity: 0.7;

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

@ -1,6 +1,6 @@
.legal-links {
margin-top: 1rem;
text-align: right;
color: $grey-300;
color: var(--grey-300);
font-size: 1rem;
}

4
src/styles/components/list-backgrounds.scss
View File

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

10
src/styles/components/list.scss
View File

@ -37,7 +37,7 @@
}
.dropdown-trigger {
color: $grey-400;
color: var(--grey-400);
margin-left: 1rem;
height: 1rem;
width: 1rem;
@ -137,7 +137,7 @@ $filter-container-top-link-share-list: -47px;
}
.list-namespace-title {
color: $grey-500;
color: var(--grey-500);
}
.link-share-container .gantt-chart-container .filter-container,
@ -167,7 +167,7 @@ $list-spacing: 1rem;
cursor: pointer;
width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
height: $list-height;
background: $white;
background: var(--white);
margin: 0 $list-spacing $list-spacing 0;
padding: 1rem;
border-radius: $radius;
@ -261,8 +261,8 @@ $list-spacing: 1rem;
background-position: center;
.title {
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
color: $white;
text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
color: var(--white);
}
}

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

@ -39,7 +39,7 @@
span {
transition: all 500ms ease;
background: $grey-500;
background: var(--grey-500);
height: 10px;
width: 10px;
display: inline-block;

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

@ -59,7 +59,7 @@
position: fixed;
top: 5px;
right: 26px;
color: $white;
color: var(--white);
font-size: 2rem;
}

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

@ -30,7 +30,7 @@
.is-archived {
font-size: 0.75rem;
border: 1px solid $grey-500;
border: 1px solid var(--grey-500);
color: $grey !important;
padding: 2px 4px;
border-radius: 3px;

12
src/styles/components/notifications.scss
View File

@ -10,7 +10,7 @@
background: $primary;
border-radius: 100%;
border: 2px solid $white;
border: 2px solid var(--white);
}
.notifications-list {
@ -20,7 +20,7 @@
max-height: 400px;
overflow-y: auto;
background: $white;
background: var(--white);
width: 350px;
max-width: calc(100vw - 2rem);
padding: .75rem .25rem;
@ -46,7 +46,7 @@
transition: background-color $transition;
&:hover {
background: $grey-100;
background: var(--grey-100);
border-radius: $radius;
}
@ -82,7 +82,7 @@
}
.created {
color: $grey-400;
color: var(--grey-400);
}
&:last-child {
@ -90,14 +90,14 @@
}
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;

8
src/styles/components/quick-actions.scss
View File

@ -27,11 +27,11 @@
.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;
@ -53,12 +53,12 @@
cursor: pointer;
&:focus, &:hover {
background: $grey-50;
background: var(--grey-50);
box-shadow: none !important;
}
&:active {
background: $grey-100;
background: var(--grey-100);
}
}
}

4
src/styles/components/switch-view.scss
View File

@ -1,5 +1,5 @@
.switch-view {
background: $white;
background: var(--white);
display: inline-flex;
border-radius: $radius;
font-size: .75rem;
@ -24,7 +24,7 @@
}
&.is-active, &:hover {
color: $white;
color: var(--white);
}
&.is-active {

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

@ -9,10 +9,10 @@
}
.subtitle {
color: $grey-500;
color: var(--grey-500);
a {
color: $grey-800;
color: var(--grey-800);
}
}
@ -21,7 +21,7 @@
}
.icon.is-grey {
color: $grey-400;
color: var(--grey-400);
}
.heading {
@ -40,7 +40,7 @@
}
.title.task-id {
color: $grey-400;
color: var(--grey-400);
white-space: nowrap;
}
@ -78,7 +78,7 @@
margin: .1rem 0;
&:hover {
background: $white;
background: var(--white);
}
}
@ -94,7 +94,7 @@
.detail-title {
display: block;
color: $grey-400;
color: var(--grey-400);
}
.none {
@ -175,7 +175,7 @@
.created {
font-size: .75rem;
color: $grey-500;
color: var(--grey-500);
text-align: right;
}
}
@ -211,7 +211,7 @@
.is-done {
background: $green;
color: $white;
color: var(--white);
padding: .5rem;
font-size: 1rem;
margin-left: .5rem;

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

@ -10,7 +10,7 @@ $remove-icon-width: 24px;
}
.different-list {
color: $grey-500;
color: var(--grey-500);
width: auto;
}

22
src/styles/components/tasks.scss
View File

@ -6,8 +6,8 @@
.ghost {
border-radius: $radius;
background: $grey-100;
border: 2px dashed $grey-300;
background: var(--grey-100);
border: 2px dashed var(--grey-300);
* {
opacity: 0;
@ -59,7 +59,7 @@
}
&:hover {
background-color: $grey-100;
background-color: var(--grey-100);
}
.tasktext,
@ -77,7 +77,7 @@
.task-list {
width: auto;
color: $grey-400;
color: var(--grey-400);
font-size: .9rem;
white-space: nowrap;
}
@ -117,7 +117,7 @@
transition: color ease $transition-duration;
&:hover {
color: $grey-900;
color: var(--grey-900);
}
}
@ -164,11 +164,11 @@
.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;
}
@ -191,8 +191,8 @@
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);
}
}
@ -296,10 +296,10 @@
width: 100%;
max-width: $defer-task-max-width;
border-radius: $radius;
border: 1px solid $grey-200;
border: 1px solid var(--grey-200);
padding: 1rem;
margin: 1rem;
background: $white;
background: var(--white);
color: $text;
cursor: default;
z-index: 10;

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

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

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

@ -24,7 +24,7 @@
}
.card {
background: $white;
background: var(--white);
}
&.task\.detail {
@ -71,7 +71,7 @@
}
.table.has-actions {
border-top: 1px solid $grey-100;
border-top: 1px solid var(--grey-100);
border-radius: 4px;
overflow: hidden;

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

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

4
src/styles/theme/link-share.scss
View File

@ -10,11 +10,11 @@
}
.card {
background: $white;
background: var(--white);
}
.title {
text-shadow: 0 0 1rem $white;
text-shadow: 0 0 1rem var(--white);
}
}

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

@ -232,7 +232,7 @@
}
&:hover {
background: $white;
background: var(--white);
.dropdown-trigger {
opacity: 1;
@ -253,7 +253,7 @@
}
.ghost {
background: $grey-200;
background: var(--grey-200);
* {
opacity: 0;
@ -331,7 +331,7 @@
}
.icon {
color: $grey-400 !important;
color: var(--grey-400) !important;
}
}
@ -361,7 +361,7 @@
.navbar {
.trigger-button {
cursor: pointer;
color: $grey-400;
color: var(--grey-400);
padding: .5rem;
font-size: 1.25rem;
position: relative;
@ -388,7 +388,7 @@
}
.logout-icon {
color: $grey-900;
color: var(--grey-900);
.icon {
vertical-align: middle;
@ -413,13 +413,13 @@
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);
}
}
@ -430,7 +430,7 @@
&:before, &:after {
display: block;
content: '';
border-top: 3px solid $grey-400;
border-top: 3px solid var(--grey-400);
border-radius: $radius;
transition: all $transition;
}
@ -444,7 +444,7 @@
}
&:hover, &:focus {
color: $grey-600;
color: var(--grey-600);
&:before {
margin-bottom: .75rem;
@ -509,7 +509,7 @@
.menu-bottom-link {
width: 100%;
color: $grey-300;
color: var(--grey-300);
text-align: center;
display: block;
margin: 1rem 0;

4
src/styles/theme/offline.scss
View File

@ -9,14 +9,14 @@
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;
}

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

@ -52,7 +52,7 @@ h6 {
border-radius: $radius-large;
&::-moz-progress-bar, &::-webkit-progress-value {
background: $grey-500;
background: var(--grey-500);
}
}
@ -91,7 +91,7 @@ button.table {
}
.icon:not(.has-text-success) {
color: $grey-300 !important;
color: var(--grey-300) !important;
}
&.has-text-danger .icon {

2
src/styles/theme/update-notification.scss
View File

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

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

@ -1,3 +1,21 @@
:root {
/* Original colors as CSS custom properties & converted to HSL */
--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-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%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 4%);
}
$grey-50: #F9FAFB;
$grey-100: #f3f4f6;
$grey-200: #E5E7EB;
@ -9,18 +27,13 @@ $grey-700: #374151;
$grey-800: #1F2937;
$grey-900: #111827;
@media (prefers-color-scheme: dark) {
$grey-900: #F9FAFB;
$grey-800: #f3f4f6;
$grey-700: #E5E7EB;
$grey-600: #D1D5DB;
$grey-500: #9CA3AF;
$grey-400: #6B7280;
$grey-300: #4B5563;
$grey-200: #374151;
$grey-100: #1F2937;
$grey-50: #111827;
}
$white: #fff;
$black: hsl(0, 0%, 4%) !default;
$orange: #ff851b;
$green: #00db60;
$red: #ff4136;
$blue: #1973ff;
$primary: $blue;
// Bulma defaults
$grey-dark: $grey-800;
@ -30,3 +43,21 @@ $grey-light: $grey-300;
$grey-lighter: $grey-200;
$grey-lightest: $grey-100;
@media (prefers-color-scheme: dark) {
:root {
/* Light mode colours in revers 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-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: hsl(0, 0%, 4%);
--black: hsl(0, 0%, 100%);
}
}

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

@ -1,13 +1,5 @@
@import 'colors';
$white: #fff;
$black: hsl(0, 0%, 4%) !default;
$orange: #ff851b;
$green: #00db60;
$red: #ff4136;
$blue: #1973ff;
$primary: $blue;
$info-invert: #fff;
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
$thickness: 1px;
@ -16,7 +8,7 @@ $navbar-item-active-color: $primary;
$dropdown-content-shadow: none;
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
$bulmaswatch-import-font: false !default;
$light-background: $grey-100;
$light-background: var(--grey-100);
$transition-duration: 100ms;
$flash-background-duration: 750ms;
@ -24,7 +16,7 @@ $vikunja-font: 'Quicksand', sans-serif;
$navbar-padding: 2rem;
$vikunja-nav-background: $light-background;
$vikunja-nav-color: $grey-700;
$vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem;
$vikunja-nav-logo-full-width: 164px;
@ -32,9 +24,9 @@ $transition-duration: 150ms;
$transition: $transition-duration ease;
$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);
$button-height: 34px;
@ -49,4 +41,4 @@ $navbar-icon-width: 40px;
$editor-border-color: #ddd;
$dropdown-item-hover-background-color: $grey-100;
$dropdown-item-hover-background-color: var(--grey-100);