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

Only use the grey shades everywhere, no more "lighten($grey)"

This commit is contained in:
kolaente 2021-01-22 20:32:56 +01:00
parent faa782d297
commit 3baf53beb8
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
17 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -522,7 +522,7 @@ ul.actions {
}
&, a {
color: $grey;
color: $grey-500;
}
a:hover {

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

@ -14,7 +14,7 @@
padding: .5rem;
&:hover {
background-color: $grey-lightest;
background-color: $grey-100;
}
.filename {
@ -24,7 +24,7 @@
}
.info {
color: $grey;
color: $grey-500;
font-size: .9rem;
p {

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

@ -1,5 +1,5 @@
.card {
background-color: rgba($grey-lighter, 0.075);
background-color: rgba($grey-200, 0.075);
border-radius: $radius;
margin-bottom: 1rem;
@ -11,7 +11,7 @@
.card-header {
box-shadow: none;
border-bottom: 1px solid $grey-lighter;
border-bottom: 1px solid $grey-200;
border-radius: $radius $radius 0 0;
}
}

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

@ -12,19 +12,19 @@
background: $white !important;
&, &:focus-within {
border-bottom-color: $grey-lighter !important;
border-bottom-color: $grey-200 !important;
}
}
.input-wrapper {
padding: 0;
background: $white !important;
border-color: $grey-lighter !important;
border-color: $grey-200 !important;
flex-wrap: wrap;
height: auto;
&:hover {
border-color: $grey-light !important;
border-color: $grey-300 !important;
}
.input {
@ -105,7 +105,7 @@
}
&:focus, &:hover {
background: $grey-lightest;
background: $grey-100;
box-shadow: none !important;
.hint-text {
@ -114,7 +114,7 @@
}
&:active {
background: $grey-lighter;
background: $grey-200;
}
}
}

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

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

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

@ -1,5 +1,5 @@
$gantt-border: 1px solid $grey-lighter;
$gantt-vertical-border-color: lighten($grey, 45);
$gantt-border: 1px solid $grey-200;
$gantt-vertical-border-color: $grey-100;
.gantt-chart-container {
padding-bottom: 1em;
@ -158,8 +158,8 @@ $gantt-vertical-border-color: lighten($grey, 45);
}
&.nodate {
border: 2px dashed $grey-light;
background: lighten($grey-light, 40);
border: 2px dashed $grey-300;
background: $grey-100;
}
&:active {

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

@ -151,7 +151,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
}
.task-id {
color: $grey;
color: $grey-500;
font-size: .8rem;
}
@ -173,7 +173,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
color: $white;
.task-id {
color: $grey-lighter;
color: $grey-200;
}
.footer .icon,

6
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;
color: $grey-500;
transition: color $transition;
}
@ -33,8 +33,8 @@
span {
padding: .1rem .35rem;
border: 1px solid $grey-light;
background: lighten($grey-lightest, 2.5);
border: 1px solid $grey-300;
background: $grey-100;
border-radius: 3px;
font-size: .75rem;
}

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

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

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

@ -5,7 +5,7 @@
font-size: .8rem;
a {
color: $grey-dark;
color: $grey-800;
}
}

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

@ -157,5 +157,5 @@
}
.list-namespace-title {
color: $grey;
color: $grey-500;
}

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

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

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

@ -32,7 +32,7 @@ $lists-per-row: 5;
.is-archived {
font-size: 0.75rem;
border: 1px solid $grey;
border: 1px solid $grey-500;
color: $grey !important;
padding: 2px 4px;
border-radius: 3px;
@ -130,7 +130,7 @@ $lists-per-row: 5;
background-position: center;
.title {
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker;
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
color: $white;
}
}

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

@ -5,10 +5,10 @@
background-color: $light-background;
.subtitle {
color: $grey;
color: $grey-500;
a {
color: $grey-dark;
color: $grey-800;
}
}
@ -17,7 +17,7 @@
}
.icon.is-grey {
color: lighten($grey, 5%);
color: $grey-400;
}
.heading {
@ -36,7 +36,7 @@
}
.title.task-id {
color: lighten($grey, 25%);
color: $grey-400;
white-space: nowrap;
}
@ -98,7 +98,7 @@
.detail-title {
display: block;
color: lighten($grey, 15%);
color: $grey-400;
}
.none {
@ -194,7 +194,7 @@
.created {
font-size: .75rem;
color: $grey;
color: $grey-500;
text-align: right;
}
}

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

@ -45,7 +45,7 @@
.task-list {
width: auto;
color: lighten($grey, 25%);
color: $grey-400;
font-size: .9em;
white-space: nowrap;
}
@ -120,7 +120,7 @@
.tasktext.done {
text-decoration: line-through;
color: $grey;
color: $grey-500;
}
span.parent-tasks {
@ -147,8 +147,8 @@
left: calc(50% - 1em);
width: 2em;
height: 2em;
border-left-color: $grey-light;
border-bottom-color: $grey-light;
border-left-color: $grey-300;
border-bottom-color: $grey-300;
}
}
@ -261,7 +261,7 @@
width: 100%;
max-width: $defer-task-max-width;
border-radius: $radius;
border: 1px solid $grey-lighter;
border: 1px solid $grey-200;
padding: 1rem;
margin: 1rem;
background: $white;

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

@ -5,11 +5,11 @@
font-size: 0.85rem;
font-weight: bold;
height: $button-height;
box-shadow: .2rem 0.2rem .5rem $grey-lighter;
box-shadow: .2rem 0.2rem .5rem $grey-200;
&.is-hovered,
&:hover {
box-shadow: .1rem .1rem 1rem $grey-lighter;
box-shadow: .1rem .1rem 1rem $grey-200;
}
&.fullheight {
@ -22,7 +22,7 @@
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: .1rem .1rem .75rem $grey-lighter !important;
box-shadow: .1rem .1rem .75rem $grey-200 !important;
}
&.is-primary.is-outlined:hover {

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

@ -138,7 +138,7 @@
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $grey;
color: $grey-500;
font-weight: 500;
min-height: 2.5em;
padding-top: 0;
@ -246,7 +246,7 @@
opacity: 0;
height: 0;
text-align: center;
color: $grey;
color: $grey-500;
cursor: pointer;
font-size: 0.8em;
}
@ -448,7 +448,7 @@
.menu-bottom-link {
width: 100%;
color: $grey-light;
color: $grey-300;
text-align: center;
display: block;
margin: 1em 0;