ami/tl-vikunja
1
0
Fork 0
Code Activity

Migrate to bulma-css-variables and introduce dark mode (#954)

Browse Source 
Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>
This commit is contained in:
adrinux
2021-11-22 21:12:54 +00:00
committed by konrad
parent 4ef54f1bc2
commit 46fa43d67f
73 changed files with 605 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -267,17 +267,17 @@ export default {
padding: .5rem;
&:hover {
background-color: $grey-200;
background-color: var(--grey-200);
}
.filename {
font-weight: bold;
margin-bottom: .25rem;
color: $text;
color: var(--text);
}
.info {
color: $grey-500;
color: var(--grey-500);
font-size: .9rem;
p {
@ -339,17 +339,17 @@ 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;
background: $primary;
box-shadow: var(--shadow-md);
background: var(--primary);
padding: 1rem;
color: $white;
color: var(--white);
width: 100%;
max-width: 300px;
}

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

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

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

@ -141,14 +141,14 @@ $defer-task-max-width: 350px + 100px;
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;
color: $text;
background: var(--white);
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;

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

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

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

@ -117,13 +117,13 @@ export default {
</script>
<style lang="scss" scoped>
$task-background: $white;
$task-background: var(--white);
.task {
-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;
@ -163,7 +163,7 @@ $task-background: $white;
}
&.overdue {
color: $red;
color: var(--danger);
}
}
@ -219,7 +219,7 @@ $task-background: $white;
.footer .icon,
.due-date,
.priority-label {
background: $grey-100;
background: var(--grey-100);
border-radius: $radius;
padding: 0 .5rem;
}
@ -229,7 +229,7 @@ $task-background: $white;
}
.task-id {
color: $grey-500;
color: var(--grey-500);
font-size: .8rem;
margin-bottom: .25rem;
display: flex;
@ -244,21 +244,21 @@ $task-background: $white;
}
&.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);
}
}
}

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

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

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

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

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

@ -310,7 +310,7 @@ export default {
}
.different-list {
color: $grey-500;
color: var(--grey-500);
width: auto;
}
@ -332,21 +332,21 @@ export default {
border-radius: $radius;
&:hover {
background-color: $grey-200;
background-color: var(--grey-200);
}
a {
color: $text;
color: var(--text);
transition: color ease $transition-duration;
&:hover {
color: $grey-900;
color: var(--grey-900);
}
}
.remove {
text-align: center;
color: $red;
color: var(--danger);
opacity: 0;
transition: opacity $transition;
}

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

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

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

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