forked from vikunja/frontend
Revert "WIP at converting Bulma/SASS vars to CSS. Enabling prefers-dark mode"
This reverts commit 64d9c5e455
.
This commit is contained in:
parent
1fb1b01389
commit
68e3251ba6
|
@ -14,7 +14,7 @@
|
|||
padding: .5rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-200);
|
||||
background-color: $grey-200;
|
||||
}
|
||||
|
||||
.filename {
|
||||
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
font-size: .9rem;
|
||||
|
||||
p {
|
||||
|
@ -96,7 +96,7 @@
|
|||
box-shadow: $shadow-md;
|
||||
background: $primary;
|
||||
padding: 1rem;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.card {
|
||||
background-color: var(--white);
|
||||
background-color: $white;
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
|
@ -11,17 +11,17 @@
|
|||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--grey-200);
|
||||
border-bottom: 1px solid $grey-200;
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
.modal-card-foot {
|
||||
background: var(--grey-50);
|
||||
background: $grey-50;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box, .card {
|
||||
border: 1px solid var(--grey-200);
|
||||
border: 1px solid $grey-200;
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
|
|
@ -9,22 +9,22 @@
|
|||
&.has-search-results .input-wrapper {
|
||||
border-radius: $radius $radius 0 0;
|
||||
border-color: $primary !important;
|
||||
background: var(--white) !important;
|
||||
background: $white !important;
|
||||
|
||||
&, &:focus-within {
|
||||
border-bottom-color: var(--grey-200) !important;
|
||||
border-bottom-color: $grey-200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
padding: 0;
|
||||
background: var(--white) !important;
|
||||
border-color: var(--grey-200) !important;
|
||||
background: $white !important;
|
||||
border-color: $grey-200 !important;
|
||||
flex-wrap: wrap;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--grey-300) !important;
|
||||
border-color: $grey-300 !important;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
@ -51,7 +51,7 @@
|
|||
|
||||
&:focus-within {
|
||||
border-color: $primary !important;
|
||||
background: var(--white) !important;
|
||||
background: $white !important;
|
||||
}
|
||||
|
||||
.loader {
|
||||
|
@ -60,7 +60,7 @@
|
|||
}
|
||||
|
||||
.search-results {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
border-radius: 0 0 $radius $radius;
|
||||
border: 1px solid $primary;
|
||||
border-top: none;
|
||||
|
@ -109,7 +109,7 @@
|
|||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
background: var(--grey-100);
|
||||
background: $grey-100;
|
||||
box-shadow: none !important;
|
||||
|
||||
.hint-text {
|
||||
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
|
||||
&:active {
|
||||
background: var(--grey-200);
|
||||
background: $grey-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -131,7 +131,7 @@
|
|||
}
|
||||
|
||||
.user img {
|
||||
border: 2px solid var(--white);
|
||||
border: 2px solid $white;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
@ -140,7 +140,7 @@
|
|||
top: 4px;
|
||||
left: 2px;
|
||||
color: $red;
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
padding: 0 4px;
|
||||
display: block;
|
||||
border-radius: 100%;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.verte__guide {
|
||||
border-radius: 100%;
|
||||
border: 1px solid var(--grey-300);
|
||||
border: 1px solid $grey-300;
|
||||
box-shadow: $card-shadow;
|
||||
}
|
||||
}
|
|
@ -11,7 +11,7 @@
|
|||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
border-radius: $radius;
|
||||
box-shadow: $card-shadow;
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
$gantt-border: 1px solid var(--grey-200);
|
||||
$gantt-vertical-border-color: var(--grey-100);
|
||||
$gantt-border: 1px solid $grey-200;
|
||||
$gantt-vertical-border-color: $grey-100;
|
||||
|
||||
.gantt-chart-container {
|
||||
padding-bottom: 1rem;
|
||||
|
@ -7,7 +7,7 @@ $gantt-vertical-border-color: var(--grey-100);
|
|||
|
||||
.gantt-chart {
|
||||
overflow-x: auto;
|
||||
border-top: 1px solid var(--grey-200);
|
||||
border-top: 1px solid $grey-200;
|
||||
|
||||
.dates {
|
||||
display: flex;
|
||||
|
@ -35,7 +35,7 @@ $gantt-vertical-border-color: var(--grey-100);
|
|||
|
||||
&.today {
|
||||
background: $primary;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
border-radius: 5px 5px 0 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -158,8 +158,8 @@ $gantt-vertical-border-color: var(--grey-100);
|
|||
}
|
||||
|
||||
&.nodate {
|
||||
border: 2px dashed var(--grey-300);
|
||||
background: var(--grey-100);
|
||||
border: 2px dashed $grey-300;
|
||||
background: $grey-100;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
|
@ -23,8 +23,8 @@
|
|||
|
||||
span {
|
||||
padding: .1rem .35rem;
|
||||
border: 1px solid var(--grey-300);
|
||||
background: var(--grey-100);
|
||||
border: 1px solid $grey-300;
|
||||
background: $grey-100;
|
||||
border-radius: 3px;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@use 'sass:math';
|
||||
|
||||
$bucket-background: var(--grey-100);
|
||||
$task-background: var(--white);
|
||||
$bucket-background: $grey-100;
|
||||
$task-background: $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 var(--grey-300) !important;
|
||||
border: 3px dashed $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: var(--grey-100);
|
||||
background: $grey-100;
|
||||
border-radius: $radius;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
@ -172,7 +172,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
}
|
||||
|
||||
.task-id {
|
||||
color: var(--grey-500);
|
||||
color: $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: var(--white);
|
||||
color: $white;
|
||||
|
||||
.task-id {
|
||||
color: var(--grey-200);
|
||||
color: $grey-200;
|
||||
}
|
||||
|
||||
.footer .icon,
|
||||
.due-date,
|
||||
.priority-label {
|
||||
background: var(--grey-800);
|
||||
background: $grey-800;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.icon svg {
|
||||
fill: var(--white);
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -307,7 +307,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
right: 1rem;
|
||||
z-index: 4500; // The modal has a z-index of 4000
|
||||
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
transition: color $transition;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.tag {
|
||||
margin: .5rem 0 .5rem .5rem;
|
||||
background: var(--grey-200);
|
||||
background: $grey-200;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.legal-links {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
color: var(--grey-300);
|
||||
color: $grey-300;
|
||||
font-size: 1rem;
|
||||
}
|
|
@ -5,7 +5,7 @@
|
|||
font-size: .8rem;
|
||||
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -66,7 +66,7 @@
|
|||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
transition: opacity $transition;
|
||||
}
|
||||
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
margin-left: 1rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
|
@ -137,7 +137,7 @@ $filter-container-top-link-share-list: -47px;
|
|||
}
|
||||
|
||||
.list-namespace-title {
|
||||
color: var(--grey-500);
|
||||
color: $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: var(--white);
|
||||
background: $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 var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
|
||||
color: var(--white);
|
||||
text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
span {
|
||||
transition: all 500ms ease;
|
||||
background: var(--grey-500);
|
||||
background: $grey-500;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
|
|
|
@ -59,7 +59,7 @@
|
|||
position: fixed;
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
.is-archived {
|
||||
font-size: 0.75rem;
|
||||
border: 1px solid var(--grey-500);
|
||||
border: 1px solid $grey-500;
|
||||
color: $grey !important;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
background: $primary;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
border: 2px solid $white;
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
|
@ -20,7 +20,7 @@
|
|||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
width: 350px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
padding: .75rem .25rem;
|
||||
|
@ -46,7 +46,7 @@
|
|||
transition: background-color $transition;
|
||||
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
background: $grey-100;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
|
@ -82,7 +82,7 @@
|
|||
}
|
||||
|
||||
.created {
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
@ -90,14 +90,14 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
.nothing {
|
||||
text-align: center;
|
||||
padding: 1rem 0;
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
|
||||
.explainer {
|
||||
font-size: .75rem;
|
||||
|
|
|
@ -27,11 +27,11 @@
|
|||
.results {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
color: var(--grey-800);
|
||||
color: $grey-800;
|
||||
|
||||
.result {
|
||||
&-title {
|
||||
background: var(--grey-50);
|
||||
background: $grey-50;
|
||||
padding: .5rem;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
|
@ -53,12 +53,12 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:focus, &:hover {
|
||||
background: var(--grey-50);
|
||||
background: $grey-50;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--grey-100);
|
||||
background: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.switch-view {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
display: inline-flex;
|
||||
border-radius: $radius;
|
||||
font-size: .75rem;
|
||||
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
&.is-active, &:hover {
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
|
|
|
@ -9,10 +9,10 @@
|
|||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
|
||||
a {
|
||||
color: var(--grey-800);
|
||||
color: $grey-800;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
|
||||
.icon.is-grey {
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
}
|
||||
|
||||
.heading {
|
||||
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.title.task-id {
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
@ -78,7 +78,7 @@
|
|||
margin: .1rem 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -94,7 +94,7 @@
|
|||
|
||||
.detail-title {
|
||||
display: block;
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
}
|
||||
|
||||
.none {
|
||||
|
@ -175,7 +175,7 @@
|
|||
|
||||
.created {
|
||||
font-size: .75rem;
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
@ -211,7 +211,7 @@
|
|||
|
||||
.is-done {
|
||||
background: $green;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
padding: .5rem;
|
||||
font-size: 1rem;
|
||||
margin-left: .5rem;
|
||||
|
|
|
@ -10,7 +10,7 @@ $remove-icon-width: 24px;
|
|||
}
|
||||
|
||||
.different-list {
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
.ghost {
|
||||
border-radius: $radius;
|
||||
background: var(--grey-100);
|
||||
border: 2px dashed var(--grey-300);
|
||||
background: $grey-100;
|
||||
border: 2px dashed $grey-300;
|
||||
|
||||
* {
|
||||
opacity: 0;
|
||||
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-100);
|
||||
background-color: $grey-100;
|
||||
}
|
||||
|
||||
.tasktext,
|
||||
|
@ -77,7 +77,7 @@
|
|||
|
||||
.task-list {
|
||||
width: auto;
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
font-size: .9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@ -117,7 +117,7 @@
|
|||
transition: color ease $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: var(--grey-900);
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -164,11 +164,11 @@
|
|||
|
||||
.tasktext.done {
|
||||
text-decoration: line-through;
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
}
|
||||
|
||||
span.parent-tasks {
|
||||
color: var(--grey-500);
|
||||
color: $grey-500;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
@ -191,8 +191,8 @@
|
|||
left: calc(50% - 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-left-color: var(--grey-300);
|
||||
border-bottom-color: var(--grey-300);
|
||||
border-left-color: $grey-300;
|
||||
border-bottom-color: $grey-300;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -296,10 +296,10 @@
|
|||
width: 100%;
|
||||
max-width: $defer-task-max-width;
|
||||
border-radius: $radius;
|
||||
border: 1px solid var(--grey-200);
|
||||
border: 1px solid $grey-200;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
color: $text;
|
||||
cursor: default;
|
||||
z-index: 10;
|
||||
|
|
|
@ -15,7 +15,7 @@ ul.teams {
|
|||
transition: background-color $transition;
|
||||
|
||||
&:hover {
|
||||
background: var(--grey-100);
|
||||
background: $grey-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
&.task\.detail {
|
||||
|
@ -71,7 +71,7 @@
|
|||
}
|
||||
|
||||
.table.has-actions {
|
||||
border-top: 1px solid var(--grey-100);
|
||||
border-top: 1px solid $grey-100;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
}
|
||||
|
||||
&.is-primary.is-outlined:hover {
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
|
|
|
@ -10,11 +10,11 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-shadow: 0 0 1rem var(--white);
|
||||
text-shadow: 0 0 1rem $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -232,7 +232,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
background: $white;
|
||||
|
||||
.dropdown-trigger {
|
||||
opacity: 1;
|
||||
|
@ -253,7 +253,7 @@
|
|||
}
|
||||
|
||||
.ghost {
|
||||
background: var(--grey-200);
|
||||
background: $grey-200;
|
||||
|
||||
* {
|
||||
opacity: 0;
|
||||
|
@ -331,7 +331,7 @@
|
|||
}
|
||||
|
||||
.icon {
|
||||
color: var(--grey-400) !important;
|
||||
color: $grey-400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -361,7 +361,7 @@
|
|||
.navbar {
|
||||
.trigger-button {
|
||||
cursor: pointer;
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
padding: .5rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
|
@ -388,7 +388,7 @@
|
|||
}
|
||||
|
||||
.logout-icon {
|
||||
color: var(--grey-900);
|
||||
color: $grey-900;
|
||||
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
|
@ -413,13 +413,13 @@
|
|||
z-index: 31;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
color: var(--grey-400);
|
||||
color: $grey-400;
|
||||
line-height: 1;
|
||||
transition: all $transition;
|
||||
|
||||
&:hover, &:focus {
|
||||
height: 1rem;
|
||||
color: var(--grey-600);
|
||||
color: $grey-600;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -430,7 +430,7 @@
|
|||
&:before, &:after {
|
||||
display: block;
|
||||
content: '';
|
||||
border-top: 3px solid var(--grey-400);
|
||||
border-top: 3px solid $grey-400;
|
||||
border-radius: $radius;
|
||||
transition: all $transition;
|
||||
}
|
||||
|
@ -444,7 +444,7 @@
|
|||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--grey-600);
|
||||
color: $grey-600;
|
||||
|
||||
&:before {
|
||||
margin-bottom: .75rem;
|
||||
|
@ -509,7 +509,7 @@
|
|||
|
||||
.menu-bottom-link {
|
||||
width: 100%;
|
||||
color: var(--grey-300);
|
||||
color: $grey-300;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
|
|
|
@ -9,14 +9,14 @@
|
|||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 5vh;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
padding: 0 1rem;
|
||||
|
||||
h1 {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
color: $white;
|
||||
font-weight: 700 !important;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
|
@ -52,7 +52,7 @@ h6 {
|
|||
border-radius: $radius-large;
|
||||
|
||||
&::-moz-progress-bar, &::-webkit-progress-value {
|
||||
background: var(--grey-500);
|
||||
background: $grey-500;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -91,7 +91,7 @@ button.table {
|
|||
}
|
||||
|
||||
.icon:not(.has-text-success) {
|
||||
color: var(--grey-300) !important;
|
||||
color: $grey-300 !important;
|
||||
}
|
||||
|
||||
&.has-text-danger .icon {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
padding: 0 0 0 .5rem;
|
||||
border-radius: $radius;
|
||||
font-size: .9rem;
|
||||
color: var(--grey-900);
|
||||
color: $grey-900;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
|
|
|
@ -1,21 +1,3 @@
|
|||
: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;
|
||||
|
@ -27,13 +9,18 @@ $grey-700: #374151;
|
|||
$grey-800: #1F2937;
|
||||
$grey-900: #111827;
|
||||
|
||||
$white: #fff;
|
||||
$black: hsl(0, 0%, 4%) !default;
|
||||
$orange: #ff851b;
|
||||
$green: #00db60;
|
||||
$red: #ff4136;
|
||||
$blue: #1973ff;
|
||||
$primary: $blue;
|
||||
@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;
|
||||
}
|
||||
|
||||
// Bulma defaults
|
||||
$grey-dark: $grey-800;
|
||||
|
@ -43,21 +30,3 @@ $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%);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,13 @@
|
|||
@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;
|
||||
|
@ -8,7 +16,7 @@ $navbar-item-active-color: $primary;
|
|||
$dropdown-content-shadow: none;
|
||||
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
|
||||
$bulmaswatch-import-font: false !default;
|
||||
$light-background: var(--grey-100);
|
||||
$light-background: $grey-100;
|
||||
$transition-duration: 100ms;
|
||||
$flash-background-duration: 750ms;
|
||||
|
||||
|
@ -16,7 +24,7 @@ $vikunja-font: 'Quicksand', sans-serif;
|
|||
|
||||
$navbar-padding: 2rem;
|
||||
$vikunja-nav-background: $light-background;
|
||||
$vikunja-nav-color: var(--grey-700);
|
||||
$vikunja-nav-color: $grey-700;
|
||||
$vikunja-nav-selected-width: 0.4rem;
|
||||
$vikunja-nav-logo-full-width: 164px;
|
||||
|
||||
|
@ -24,9 +32,9 @@ $transition-duration: 150ms;
|
|||
$transition: $transition-duration ease;
|
||||
|
||||
$scrollbar-height: 8px;
|
||||
$scrollbar-track-color: var(--grey-200);
|
||||
$scrollbar-thumb-color: var(--grey-300);
|
||||
$scrollbar-hover-color: var(--grey-500);
|
||||
$scrollbar-track-color: $grey-200;
|
||||
$scrollbar-thumb-color: $grey-300;
|
||||
$scrollbar-hover-color: $grey-500;
|
||||
|
||||
$button-height: 34px;
|
||||
|
||||
|
@ -41,4 +49,4 @@ $navbar-icon-width: 40px;
|
|||
|
||||
$editor-border-color: #ddd;
|
||||
|
||||
$dropdown-item-hover-background-color: var(--grey-100);
|
||||
$dropdown-item-hover-background-color: $grey-100;
|
||||
|
|
Loading…
Reference in New Issue
Block a user