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

Shadows to css vars and change in dark mode

This commit is contained in:
Adrian Simmons 2021-11-04 16:56:06 +00:00
parent 9dda522151
commit ce00faad96
11 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

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

@ -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) {

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

@ -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 {

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

@ -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) {

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

@ -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);

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

@ -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;

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

@ -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;

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

@ -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);
}

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

@ -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;

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

@ -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);
}
}

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

@ -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 {