Migrate to bulma-css-variables and introduce dark mode #954
|
|
@ -133,14 +133,14 @@ export default defineComponent({
|
|||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ export default {
|
|||
}
|
||||
|
||||
.card {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -195,7 +195,7 @@ export default {
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -65,11 +65,11 @@ export default {
|
|||
}
|
||||
|
||||
.card {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.title {
|
||||
text-shadow: 0 0 1rem $white;
|
||||
text-shadow: 0 0 1rem var(--white);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.no-auth-wrapper {
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
|
||||
background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--light-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -278,8 +278,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
$navbar-padding: 2rem;
|
||||
$vikunja-nav-background: $light-background;
|
||||
$vikunja-nav-color: $grey-700;
|
||||
$vikunja-nav-background: var(--light-background);
|
||||
$vikunja-nav-color: var(--grey-700);
|
||||
$vikunja-nav-selected-width: 0.4rem;
|
||||
|
||||
.namespace-container {
|
||||
|
|
@ -347,12 +347,12 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: $orange;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-favorite {
|
||||
opacity: 1;
|
||||
color: $orange;
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -434,7 +434,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
:deep(.dropdown-trigger) {
|
||||
|
|
@ -462,7 +462,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
|
||||
.ghost {
|
||||
background: $grey-200;
|
||||
background: var(--grey-200);
|
||||
|
||||
* {
|
||||
opacity: 0;
|
||||
|
|
@ -502,16 +502,16 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: $primary;
|
||||
border-left: $vikunja-nav-selected-width solid $primary;
|
||||
color: var(--primary);
|
||||
border-left: $vikunja-nav-selected-width solid var(--primary);
|
||||
|
||||
.icon {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-left: $vikunja-nav-selected-width solid $primary;
|
||||
border-left: $vikunja-nav-selected-width solid var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -537,7 +537,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
}
|
||||
|
||||
.icon {
|
||||
color: $grey-400 !important;
|
||||
color: var(--grey-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -172,7 +172,7 @@ $vikunja-nav-logo-full-width: 164px;
|
|||
}
|
||||
|
||||
.navbar.main-theme {
|
||||
background: $light-background;
|
||||
background: var(--light-background);
|
||||
z-index: 5 !important;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
|
@ -231,7 +231,7 @@ $vikunja-nav-logo-full-width: 164px;
|
|||
:deep() {
|
||||
.trigger-button {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
padding: .5rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
|
|
@ -290,7 +290,7 @@ $vikunja-nav-logo-full-width: 164px;
|
|||
}
|
||||
|
||||
:deep(.dropdown-trigger) {
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
margin-left: 1rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export default {
|
|||
}
|
||||
|
||||
&.is-primary.is-outlined:hover {
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ export default {
|
|||
height: $PICKER_SIZE;
|
||||
overflow: hidden;
|
||||
border-radius: 100%;
|
||||
border: $BORDER_WIDTH solid $grey-300;
|
||||
border: $BORDER_WIDTH solid var(--grey-300);
|
||||
box-shadow: $shadow;
|
||||
|
||||
& > * {
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ export default {
|
|||
position: absolute;
|
||||
z-index: 99;
|
||||
width: 320px;
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
border-radius: $radius;
|
||||
box-shadow: $shadow;
|
||||
|
||||
|
|
@ -272,7 +272,7 @@ export default {
|
|||
padding: 0 .5rem;
|
||||
width: 100%;
|
||||
height: 2.25rem;
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
transition: all $transition;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -280,7 +280,7 @@ export default {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: $light;
|
||||
background: var(--light);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
|
@ -291,7 +291,7 @@ export default {
|
|||
padding-right: .25rem;
|
||||
|
||||
.weekday {
|
||||
color: $text-light;
|
||||
color: var(--text-light);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -344,7 +344,7 @@ $editor-border-color: #ddd;
|
|||
}
|
||||
|
||||
&-placeholder {
|
||||
color: $grey-400 !important;
|
||||
color: var(--grey-400) !important;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
|
@ -383,7 +383,7 @@ $editor-border-color: #ddd;
|
|||
|
||||
pre.CodeMirror-line {
|
||||
margin-bottom: 0 !important;
|
||||
color: $grey-700 !important;
|
||||
color: var(--grey-700) !important;
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
|
|
@ -409,10 +409,10 @@ ul.actions {
|
|||
}
|
||||
|
||||
&, a {
|
||||
color: $grey-500;
|
||||
color: var(--grey-500);
|
||||
|
||||
&.done-edit {
|
||||
color: $primary;
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ svg {
|
|||
}
|
||||
|
||||
.check:hover svg {
|
||||
stroke: $primary;
|
||||
stroke: var(--primary);
|
||||
}
|
||||
|
||||
.is-disabled .check:hover svg {
|
||||
|
|
@ -125,7 +125,7 @@ polyline {
|
|||
|
||||
input[type=checkbox]:checked + .check {
|
||||
svg {
|
||||
stroke: $primary;
|
||||
stroke: var(--primary);
|
||||
}
|
||||
|
||||
path {
|
||||
|
|
|
|||
|
|
@ -377,23 +377,23 @@ export default {
|
|||
|
||||
&.has-search-results .input-wrapper {
|
||||
border-radius: $radius $radius 0 0;
|
||||
border-color: $primary !important;
|
||||
background: $white !important;
|
||||
border-color: var(--primary) !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 {
|
||||
|
|
@ -419,8 +419,8 @@ export default {
|
|||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $primary !important;
|
||||
background: $white !important;
|
||||
border-color: var(--primary) !important;
|
||||
background: var(--white) !important;
|
||||
}
|
||||
|
||||
.loader {
|
||||
|
|
@ -429,9 +429,9 @@ export default {
|
|||
}
|
||||
|
||||
.search-results {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
border-radius: 0 0 $radius $radius;
|
||||
border: 1px solid $primary;
|
||||
border: 1px solid var(--primary);
|
||||
border-top: none;
|
||||
|
||||
max-height: 50vh;
|
||||
|
|
@ -478,16 +478,16 @@ export default {
|
|||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
background: $grey-100;
|
||||
background: var(--grey-100);
|
||||
box-shadow: none !important;
|
||||
|
||||
.hint-text {
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $grey-200;
|
||||
background: var(--grey-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
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;
|
||||
|
|
@ -158,7 +158,7 @@ export default {
|
|||
font-family: $vikunja-font;
|
||||
font-weight: 400;
|
||||
font-size: 1.5rem;
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
|
||||
|
|
@ -171,7 +171,7 @@ export default {
|
|||
}
|
||||
|
||||
&.has-light-text .title {
|
||||
color: $light;
|
||||
color: var(--light);
|
||||
}
|
||||
|
||||
&.has-background {
|
||||
|
|
@ -180,8 +180,8 @@ export default {
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +190,7 @@ export default {
|
|||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: $orange;
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
&.is-archived {
|
||||
|
|
@ -200,7 +200,7 @@ export default {
|
|||
&.is-favorite {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
color: $orange;
|
||||
color: var(--warning);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.is-done {
|
||||
background: $green;
|
||||
color: $white;
|
||||
background: var(--success);
|
||||
color: var(--white);
|
||||
padding: .5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ export default {
|
|||
text-align: right;
|
||||
|
||||
span.url {
|
||||
border-bottom: 1px dashed $primary;
|
||||
border-bottom: 1px dashed var(--primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -57,22 +57,22 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
background-color: $white;
|
||||
background-color: var(--white);
|
||||
border-radius: $radius;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid $grey-200;
|
||||
border: 1px solid var(--grey-200);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-200;
|
||||
border-bottom: 1px solid var(--grey-200);
|
||||
border-radius: $radius $radius 0 0;
|
||||
}
|
||||
|
||||
// FIXME: should maybe be merged somehow with modal
|
||||
:deep(.modal-card-foot) {
|
||||
background-color: $grey-50;
|
||||
background-color: var(--grey-50);
|
||||
border-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,7 +22,7 @@ export default {
|
|||
.legal-links {
|
||||
margin-top: 1rem;
|
||||
text-align: right;
|
||||
color: $grey-300;
|
||||
color: var(--grey-300);
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,8 +27,8 @@ export default {
|
|||
|
||||
kbd {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -145,9 +145,9 @@ export default {
|
|||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
||||
background: $primary;
|
||||
background: var(--primary);
|
||||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
border: 2px solid var(--white);
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
|
|
@ -157,7 +157,7 @@ export default {
|
|||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
width: 350px;
|
||||
max-width: calc(100vw - 2rem);
|
||||
padding: .75rem .25rem;
|
||||
|
|
@ -183,14 +183,14 @@ export default {
|
|||
transition: background-color $transition;
|
||||
|
||||
&:hover {
|
||||
background: $grey-100;
|
||||
background: var(--grey-100);
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.read-indicator {
|
||||
width: .35rem;
|
||||
height: .35rem;
|
||||
background: $primary;
|
||||
background: var(--primary);
|
||||
border-radius: 100%;
|
||||
margin-left: .5rem;
|
||||
|
||||
|
|
@ -219,7 +219,7 @@ export default {
|
|||
}
|
||||
|
||||
.created {
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -227,14 +227,14 @@ export default {
|
|||
}
|
||||
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -490,11 +490,11 @@ export default {
|
|||
.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;
|
||||
|
|
@ -516,12 +516,12 @@ export default {
|
|||
cursor: pointer;
|
||||
|
||||
&:focus, &:hover {
|
||||
background: $grey-50;
|
||||
background: var(--grey-50);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $grey-100;
|
||||
background: var(--grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ ul.assingees {
|
|||
|
||||
a {
|
||||
float: right;
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
transition: all $transition;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -447,12 +447,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;
|
||||
|
|
@ -479,8 +479,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;
|
||||
}
|
||||
|
|
@ -510,7 +510,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;
|
||||
|
|
@ -523,30 +523,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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -599,8 +599,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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -347,9 +347,9 @@ export default {
|
|||
margin: .5rem auto 2rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: $shadow-md;
|
||||
background: $primary;
|
||||
background: var(--primary);
|
||||
padding: 1rem;
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,11 +141,11 @@ $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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$task-background: $white;
|
||||
$task-background: var(--white);
|
||||
|
||||
.task {
|
||||
-webkit-touch-callout: none; // iOS Safari
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,6 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.list-namespace-title {
|
||||
color: $grey-500;
|
||||
color: var(--grey-500);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
@ -274,7 +274,7 @@ $remove-icon-width: 24px;
|
|||
}
|
||||
|
||||
.different-list {
|
||||
color: $grey-500;
|
||||
color: var(--grey-500);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
|
@ -312,16 +312,16 @@ $remove-icon-width: 24px;
|
|||
border: 2px solid transparent;
|
||||
|
||||
a {
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
transition: color ease $transition-duration;
|
||||
|
||||
&:hover {
|
||||
color: $grey-900;
|
||||
color: var(--grey-900);
|
||||
}
|
||||
}
|
||||
|
||||
.remove {
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
.tag {
|
||||
margin: .5rem 0 .5rem .5rem;
|
||||
background: $grey-200;
|
||||
background: var(--grey-200);
|
||||
|
||||
// FIXME: only used in ListLabels.vue
|
||||
&.disabled {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
.modal-container .task-view {
|
||||
border-radius: $radius;
|
||||
padding: 1rem;
|
||||
color: $text;
|
||||
background-color: $light-background !important;
|
||||
color: var(--text);
|
||||
background-color: var(--light-background) !important;
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
border-radius: 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
z-index: 10000;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
background: $dark;
|
||||
background: var(--dark);
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
padding: 5px 10px 5px;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid $dark;
|
||||
border-top: 5px solid var(--dark);
|
||||
|
||||
&.bottom {
|
||||
transform: rotate(180deg);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
// FIXME: move to pagination component
|
||||
.pagination-link:not(.is-current) {
|
||||
background: $light-background;
|
||||
background: var(--light-background);
|
||||
|
adrinux marked this conversation as resolved
Outdated
|
||||
}
|
||||
|
||||
.box,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.table.has-actions {
|
||||
border-top: 1px solid $grey-100;
|
||||
border-top: 1px solid var(--grey-100);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
border-top: 3px solid $grey-400;
|
||||
border-top: 3px solid var(--grey-400);
|
||||
border-radius: $radius;
|
||||
transition: all $transition;
|
||||
}
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
.menu-bottom-link {
|
||||
width: 100%;
|
||||
color: $grey-300;
|
||||
color: var(--grey-300);
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$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);
|
||||
|
||||
// Chrome
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: 0 0 0 2px rgba($primary, 0.5);
|
||||
box-shadow: 0 0 0 2px var(--primary-translucent);
|
||||
|
adrinux marked this conversation as resolved
Outdated
konrad
commented
Doesn't Doesn't `rgba(var(--primary), 0.5)` work?
dpschen
commented
No, since the var already includes See: https://kolaente.dev/vikunja/frontend/pulls/954/files#issuecomment-18553
No, since the var already includes `hsla()` so resolved by the browser it would be double wrapped:
```css
rgba(hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)), 0.5)
```
See: https://kolaente.dev/vikunja/frontend/pulls/954/files#issuecomment-18553
`rgba()` also just accepts r, g, b, a values. SASS would render this as as the css [rgba()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgba()) and not the SCSS [`rgba()` helper](https://sass-lang.com/documentation/modules#rgb) since it includes a custom-property which can not be resolved by SASS at build time.
adrinux
commented
Given that --primary-translucent is only used twice (both in theme.scss, lines 8 & 18), it might make more sense to use the existing primary-* vars to build those 2 instances. or do what I've done with some of the greys and define a 'naked' --primary-hsl that we can drop in: I think the latter is most readable, and doesn't make the alpha value hard to see. Thoughts @konrad @dpschen ? Given that --primary-translucent is only used twice (both in theme.scss, lines 8 & 18), it might make more sense to use the existing primary-* vars to build those 2 instances.
```
box-shadow: 0 0 0 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5;
```
or do what I've done with some of the greys and define a 'naked' --primary-hsl that we can drop in:
```
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5;
```
I think the latter is most readable, and doesn't make the alpha value hard to see.
Thoughts @konrad @dpschen ?
konrad
commented
I think the second one makes most sense. I think the second one makes most sense.
dpschen
commented
I just realize that we have to define that Because of that I would prefer the first solution. 🤷♂️ I just realize that we have to define that `--primary-hsl` just for that usecase. Then we could also just keep with the `--primary-translucent`.
Because of that I would prefer the first solution. 🤷♂️
adrinux
commented
I created --primary-hsl as described above I created --primary-hsl as described above https://kolaente.dev/adrinux/frontend/commit/6c59567ebf1bd1e706554ec33326c886706fb45a
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
|
||||
:focus-visible,
|
||||
:-moz-focusring {
|
||||
box-shadow: 0 0 0 2px rgba($primary, 0.5);
|
||||
box-shadow: 0 0 0 2px var(--primary-translucent);
|
||||
}
|
||||
|
||||
body {
|
||||
background: $light-background;
|
||||
background: var(--light-background);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +54,7 @@ h6 {
|
|||
|
||||
&::-moz-progress-bar,
|
||||
&::-webkit-progress-value {
|
||||
background: $grey-500;
|
||||
background: var(--grey-500);
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
|
|
@ -103,11 +103,11 @@ button.table {
|
|||
}
|
||||
|
||||
.icon:not(.has-text-success) {
|
||||
color: $grey-300 !important;
|
||||
color: var(--grey-300) !important;
|
||||
}
|
||||
|
||||
&.has-text-danger .icon {
|
||||
color: $danger !important;
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
|
|
@ -165,6 +165,6 @@ button.table {
|
|||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid $grey-200;
|
||||
border: 1px solid var(--grey-200);
|
||||
box-shadow: $shadow-sm;
|
||||
}
|
||||
|
|
@ -1,18 +1,96 @@
|
|||
$grey-50: #F9FAFB;
|
||||
$grey-100: #f3f4f6;
|
||||
$grey-200: #E5E7EB;
|
||||
$grey-300: #D1D5DB;
|
||||
$grey-400: #9CA3AF;
|
||||
$grey-500: #6B7280;
|
||||
$grey-600: #4B5563;
|
||||
$grey-700: #374151;
|
||||
$grey-800: #1F2937;
|
||||
$grey-900: #111827;
|
||||
:root {
|
||||
|
||||
/* Vikunja colors as CSS custom properties */
|
||||
--grey-50: hsl(210, 20%, 98%);
|
||||
|
dpschen marked this conversation as resolved
Outdated
dpschen
commented
Any specific reason why for the switch to hsl? Any specific reason why for the switch to hsl?
adrinux
commented
Well:
Well:
- It's the way bulma-css-variables is built. See the [source](https://github.com/dino4udo/bulma-css-variables/blob/a4c5c4b3730746ae9b0bfb8af754ebfc8ebb88dc/css/bulma.css#L12643) from that line on.
- hsl is not compatible with the sass colour manipulation mixins but does allow for easy and more understandable specification of variants in itself.
- It's a superior colour declaration format to hex - though I look forward to lch() being widely supported by browsers ;)
dpschen
commented
That makes sense =)
LCH is awesome! I always have to force myself to read it corectly because it looks like the German 'me' which is the word 'ich' (at the beginning of a sentence 'Ich' which looks really similar). > It's the way bulma-css-variables is built. See the source from that line on.
That makes sense =)
> It's a superior colour declaration format to hex - though I look forward to lch() being widely supported by browsers ;)
LCH is awesome! I always have to force myself to read it corectly because it looks like the German 'me' which is the word 'ich' (at the beginning of a sentence 'Ich' which looks really similar).
|
||||
--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%;
|
||||
|
adrinux marked this conversation as resolved
Outdated
konrad
commented
Why is there Why is there `grey-500` and `grey-500-hsl`? If they are the same, why are there two of them?
dpschen
commented
As far as I understand While As far as I understand `grey-500` is directly usable inside a css color property.
E.g:
```css
background-color: var(--grey-500);
```
While `grey-500-hsl` are just the pure hsl values with the intend to use them in different contexts. E.g.:
```css
background-color: hsla(var(--grey-500-hsl, 0.4);
```
konrad
commented
Makes sense. Then maybe there should be variables like these for all color variants? To make it consistent? Makes sense. Then maybe there should be variables like these for all color variants? To make it consistent?
dpschen
commented
Yes, that's true. Especially since bulma-scss-variables does the same for all predefined ones. Yes, that's true. Especially since bulma-scss-variables does the same for all predefined ones.
adrinux
commented
Yes, @dpschen is right, I picked up that approach from bulma-css-variables and it's for adding the alpha where needed. @konrad the reason I only added them for a couple of greys is because those are the only greys where an alpha variant is actually used. I get the desire for uniformity and consistency, but is it worth declaring unused variables? (Technically I should remove the dark mode --grey-300-hsl because that's not currently used in the PR either, was the result of some experimenting.) Yes, @dpschen is right, I picked up that approach from bulma-css-variables and it's for adding the alpha where needed.
@konrad the reason I only added them for a couple of greys is because those are the only greys where an alpha variant is actually used. I get the desire for uniformity and consistency, but is it worth declaring unused variables?
(Technically I should remove the dark mode --grey-300-hsl because that's not currently used in the PR either, was the result of some experimenting.)
konrad
commented
It probably is not. Let's say as long as there's only a few variants where a > I get the desire for uniformity and consistency, but is it worth declaring unused variables?
It probably is not. Let's say as long as there's only a few variants where a `-hsl` variant makes sense there's no need to add one for each color. As long as maybe more than half of the variants are used as-is (without a `-hsl` variant) I'm fine with adding them on a case-by-case basis when they are needed.
|
||||
--grey-500: hsla(var(--grey-500-hsl), 1);
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
Is hsla needed here? With an opacity of Is hsla needed here? With an opacity of `1` it seems unnecessary
adrinux
commented
- The --grey-500-hsl is used elsewhere to create opacity variants.
- You're right we can just reuse --grey-500-hsl here, have changed it 2a65126a80c762f5ca00422e4f8981a21ec32e75
|
||||
--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%);
|
||||
|
||||
--light-background: var(--grey-100);
|
||||
|
konrad marked this conversation as resolved
Outdated
konrad
commented
We should call this just We should call this just `--background-color` or `--site-background-color`.
adrinux
commented
I've renamed the --light-background variable to --site-background in I've renamed the --light-background variable to --site-background in https://kolaente.dev/adrinux/frontend/commit/a45c6cdf6bb001b1a2ff18547f7c3d72eb6f9d8f
|
||||
--scheme-main: var(--white);
|
||||
|
||||
// Vikunja overrides of Bulma defaults
|
||||
// --black-bis: #121212;
|
||||
// --black-ter: #242424;
|
||||
--grey-darker: var(--grey-700);
|
||||
--grey-dark: var(--grey-800);
|
||||
--grey: var(--grey-500);
|
||||
--grey-light: var(--grey-300);
|
||||
--grey-lighter: var(--grey-200);
|
||||
--grey-lightest: var(--grey-100);
|
||||
//--white-ter: whitesmoke;
|
||||
//--white-bis: #fafafa;
|
||||
|
||||
--white-h: 0deg;
|
||||
--white-s: 0%;
|
||||
--white-l: 100%;
|
||||
--white-a: 1;
|
||||
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
||||
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
🔥 🔥
adrinux
commented
Not clear whether it's the use of variables (we're overriding the ones bulma-css-variables has set) or the fact that vscode seems to have formatted to tabs on paste :( Fixed it in sublime text but that now formats to tabs on save too :( I think we need a specific entry for scss files in editorconfig Works for me...but do I include it in this PR? Not clear whether it's the use of variables (we're overriding the ones bulma-css-variables has set) or the fact that vscode seems to have formatted to tabs on paste :(
Fixed it in sublime text but that now formats to tabs on save too :(
I think we need a specific entry for scss files in editorconfig
```
[*.{scss,css}]
indent_style = space
indent_size = 2
```
Works for me...but do I include it in this PR?
dpschen
commented
Nahh all good! The 🔥 was in regard to the nice splitting mechanism of the individual color components / channels (not sure what it's called in hsl ?). Regarding the formatting: we are looking into using prettier either way so I'm ignoring minor formatting stuff right now =) Nahh all good! The 🔥 was in regard to the nice splitting mechanism of the individual color components / channels (not sure what it's called in hsl ?).
That's hot!
Regarding the formatting: we are [looking into using prettier](https://kolaente.dev/vikunja/frontend/pulls/930#issue-5468) either way so I'm ignoring minor formatting stuff right now =)
dpschen
commented
Regarding Regarding `.editorconfig`: maybe create a new separate issue =)
adrinux
commented
Work work work ;) > Regarding `.editorconfig`: maybe create a new separate issue =)
Work work work ;)
konrad
commented
Then the other thing is that a variable name like The same applies to the greys but I don't really have a good idea for those. I noticed that you did this already for red/green/orange, I think that's the way to go. `--white-translucent` has a different opacity than `--primary-translucent`. I think it should either be the same kind of translucent or there should be variants of it like `--white-opacity-75` or similar. On the other hand, since we already defined the hsl parts for it we could probably just use those in combination with a different opacity value directly where it's required.
Then the other thing is that a variable name like `white` implies that it contains some kind of white. In a dark color scheme that would probably contain something else entirely so `white` wouldn't actually contain white. Maybe it's a better idea to use a variable name that reflects what this is used for?
The same applies to the greys but I don't really have a good idea for those. I noticed that you did this already for red/green/orange, I think that's the way to go.
adrinux
commented
That makes most sense to me. There are very few instances of translucent colours at present.
Unfortunely we inherit those from bulma/bulma-css-variables, so I think we're stuck with them for now. I know it seems odd, but you get used to it.
I think you already have the solution just think of --grey-100 as 10% dark in light mode and 10% light in dark mode.
An easy change because bulma/bulma-css-variables already defines those danger/success/warning variables. Bulma Colors docs. > On the other hand, since we already defined the hsl parts for it we could probably just use those in combination with a different opacity value directly where it's required.
That makes most sense to me. There are very few instances of translucent colours at present.
> Then the other thing is that a variable name like `white` implies that it contains some kind of white. In a dark color scheme that would probably contain something else entirely so `white` wouldn't actually contain white. Maybe it's a better idea to use a variable name that reflects what this is used for?
Unfortunely we inherit those from bulma/bulma-css-variables, so I think we're stuck with them for now. I know it seems odd, but you get used to it.
> The same applies to the greys but I don't really have a good idea for those.
I think you already have the solution just think of --grey-100 as 10% dark in light mode and 10% light in dark mode.
> I noticed that you did this already for red/green/orange, I think that's the way to go.
An easy change because bulma/bulma-css-variables already defines those danger/success/warning variables. [Bulma Colors docs](https://bulma.io/documentation/overview/colors/).
|
||||
|
||||
--black-h: 0deg;
|
||||
--black-s: 0%;
|
||||
--black-l: 4%;
|
||||
--black-a: 1;
|
||||
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
||||
|
||||
//$warning/$orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
||||
--warning-h: 27.9deg !important;
|
||||
|
dpschen marked this conversation as resolved
Outdated
dpschen
commented
Can you add a comment why the Can you add a comment why the `!important` is needed?
adrinux
commented
"Because it wont't work without it" doesn't seem very informative :/ As per your earlier comment regarding @import location and order - I think it might be possible to resolve the need for those !important properties and I'd rather try that before commenting. "Because it wont't work without it" doesn't seem very informative :/
As per your earlier comment regarding @import location and order - I think it might be possible to resolve the need for those !important properties and I'd rather try that before commenting.
dpschen
commented
Yes I found out about that later =) The Yes I found out about that later =) The `calc` in the comment below might even be possible without that `!important`
|
||||
--warning-s: 100% !important;
|
||||
--warning-l: 55.3% !important;
|
||||
--warning-a: 1 !important;
|
||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
//$success/$green is #00db60 or hsl(146.3, 100%, 42.9%)
|
||||
--success-h: 146.3deg !important;
|
||||
--success-s: 100% !important;
|
||||
--success-l: 42.9% !important;
|
||||
--success-a: 1 !important;
|
||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
//$danger/$red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
||||
--danger-h: 3.3deg !important;
|
||||
--danger-s: 100% !important;
|
||||
--danger-l: 60.6% !important;
|
||||
--danger-a: 1 !important;
|
||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
//var(--primary)/$blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
||||
--primary-h: 216.5deg !important;
|
||||
--primary-s: 100% !important;
|
||||
--primary-l: 54.9% !important;
|
||||
--primary-a: 1 !important;
|
||||
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||
|
||||
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
|
||||
}
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
Is it possible to use Is it possible to use `calc()` here?
dpschen
commented
Ahh I saw the Ahh I saw the `!important` now
adrinux
commented
I did initially but really I think it just obfuscates the actual value, though I don't much like the this either. Works to give a 30% increase? --primary-light is only used in src/views/tasks/TaskDetailView.vue and I've no idea what end result it has. Can't see what different values do. Any idea? If we stick with hard coding a value I wonder if using the pattern bulma-css-variables uses would be clearer: Thoughts? EDIT: have actually just changed it to the latter. > Is it possible to use `calc()` here?
I did initially but really I think it just obfuscates the actual value, though I don't much like the this either.
So:
```
calc(var(--primary-l) * 1.3)
```
Works to give a 30% increase?
--primary-light is only used in src/views/tasks/TaskDetailView.vue and I've no idea what end result it has. Can't see what different values do. Any idea?
If we stick with hard coding a value I wonder if using the pattern bulma-css-variables uses would be clearer:
```
--primary-h: 216.5deg !important;
--primary-s: 100% !important;
--primary-l: 54.9% !important;
--primary-light-l: 73%;
--primary-a: 1 !important;
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
```
Thoughts? EDIT: have actually just changed it to the latter.
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
/* Light mode colours in reverse order for dark mode */
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
Nest the Nest the `@media` so we don't need to repeat `:root`.
adrinux
commented
Good catch. Done Good catch. Done https://kolaente.dev/adrinux/frontend/commit/a258b938fabdb69b30615897b157c37a020b4059
konrad
commented
Maybe it would make sense to group all dark scheme adjustments (and the base light versio) in separate stylesheets instead of seperating by color or shadows? Maybe it would make sense to group all dark scheme adjustments (and the base light versio) in separate stylesheets instead of seperating by color or shadows?
dpschen
commented
I think this is fine. Because we might need adjustments deep in components for dark mode either way. I think this is fine. Because we might need adjustments deep in components for dark mode either way.
I think it would be wrong to separate those styles from the components.
konrad
commented
That's something I didn't think about. Makes sense. That's something I didn't think about. Makes sense.
|
||||
--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-500: hsla(var(--grey-500-hsl), 1);
|
||||
--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-l: 4% !important;
|
||||
--black-l: 100% !important;
|
||||
|
||||
--text: var(--grey-800) !important;
|
||||
--text-invert: #000 !important;
|
||||
--text-light: var(--grey-300) !important;
|
||||
--text-strong: var(--grey-900) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bulma defaults
|
||||
$grey-dark: $grey-800;
|
||||
$grey-darker: $grey-700;
|
||||
$grey: $grey-500;
|
||||
$grey-light: $grey-300;
|
||||
$grey-lighter: $grey-200;
|
||||
$grey-lightest: $grey-100;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
|
||||
$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
|
||||
$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
|
||||
$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
|
||||
$shadow-xl: 0 20px 40px rgba($grey-500, .2);
|
||||
$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);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
|
||||
$info-invert: $white;
|
||||
$info-invert: #fff;
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
Might make sense to add a comment here why this is still defined as hex Might make sense to add a comment here _why_ this is still defined as hex
adrinux
commented
Doesn't appear to be used in vikunja code and is a duplicate of the var declared by bulma-css-variables so I removed it instead Doesn't appear to be used in vikunja code and is a duplicate of the var declared by bulma-css-variables so I removed it instead https://kolaente.dev/adrinux/frontend/commit/aff7a1f2eadc75b690856ff2b2603a4897588209
|
||||
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
$thickness: 1px;
|
||||
$pagination-current-border: $primary;
|
||||
$navbar-item-active-color: $primary;
|
||||
$pagination-current-border: var(--primary);
|
||||
$navbar-item-active-color: var(--primary);
|
||||
|
||||
$dropdown-content-shadow: none;
|
||||
$dropdown-item-hover-background-color: var(--grey-100);
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ export default {
|
|||
}
|
||||
|
||||
.switch-view {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
display: inline-flex;
|
||||
border-radius: $radius;
|
||||
font-size: .75rem;
|
||||
|
|
@ -180,17 +180,17 @@ export default {
|
|||
|
||||
&.is-active,
|
||||
&:hover {
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: $primary;
|
||||
background: var(--primary);
|
||||
font-weight: bold;
|
||||
box-shadow: $shadow-xs;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ export default {
|
|||
font-size: .8rem;
|
||||
|
||||
a {
|
||||
color: $grey-800;
|
||||
color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +224,7 @@ export default {
|
|||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: .75rem;
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
transition: opacity $transition;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -593,7 +593,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$bucket-background: $grey-100;
|
||||
$bucket-background: var(--grey-100);
|
||||
$ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
$bucket-width: 300px;
|
||||
$bucket-header-height: 60px;
|
||||
|
|
@ -627,7 +627,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;
|
||||
|
||||
* {
|
||||
|
|
@ -636,7 +636,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
}
|
||||
|
||||
.bucket {
|
||||
background-color: $bucket-background;
|
||||
background-color: var(--bucket-background);
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
This seems like a mistake: This seems like a mistake: `$bucket-background` is still defined as SASS variable.
I think it makes sense to keep it that way: Compiled it will resolve in `var(--grey-100)` which seems fine
adrinux
commented
Yep, reverted Though declaring it to be the same color as what's behind it seems pointless - hangover from previous kanban design? Yep, reverted https://kolaente.dev/adrinux/frontend/commit/0191f12db76bf93bee91ea0e58dd7d52c2f423e4
Though declaring it to be the same color as what's behind it seems pointless - hangover from previous kanban design?
dpschen
commented
@konrad: any idea? @konrad: any idea?
konrad
commented
It kind of comes from the kanban redesign, but is still required: When the list has a background, the buckets need to have a colored background. It kind of comes from the kanban redesign, but is still required: When the list has a background, the buckets need to have a colored background.
konrad
commented
I think we could remove the variable and swap its uses to use the same variable that's used for the overall site background. I think we could remove the variable and swap its uses to use the same variable that's used for the overall site background.
dpschen
commented
You mean the variable that was set for You mean the variable that was set for `$bucket-background` aka `var(--grey-100)`?
adrinux
commented
Removed $bucket-background Removed $bucket-background https://kolaente.dev/adrinux/frontend/commit/54f1271ab935a5b0c93168378395c4093ac4f01b
|
||||
border-radius: $radius;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -685,7 +685,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
padding-right: 1rem;
|
||||
|
||||
.button {
|
||||
background: $bucket-background;
|
||||
background: var(--bucket-background);
|
||||
|
adrinux marked this conversation as resolved
Outdated
dpschen
commented
Same here Same here
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -719,7 +719,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
font-weight: bold;
|
||||
|
||||
&.is-max {
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -743,7 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
background-color: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -331,8 +331,8 @@ export default {
|
|||
|
||||
.ghost {
|
||||
border-radius: $radius;
|
||||
background: $grey-100;
|
||||
border: 2px dashed $grey-300;
|
||||
background: var(--grey-100);
|
||||
border: 2px dashed var(--grey-300);
|
||||
|
||||
* {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -197,7 +197,7 @@ export default {
|
|||
|
||||
span {
|
||||
transition: all 500ms ease;
|
||||
background: $grey-500;
|
||||
background: var(--grey-500);
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
|
|
@ -242,7 +242,7 @@ export default {
|
|||
@keyframes wave {
|
||||
0%, 40%, 100% {
|
||||
transform: translate(0, 0);
|
||||
background-color: $primary;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
10% {
|
||||
transform: translate(0, -15px);
|
||||
|
|
|
|||
|
|
@ -131,12 +131,12 @@ export default {
|
|||
|
||||
.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;
|
||||
font-family: $vikunja-font;
|
||||
background: rgba($white, 0.75);
|
||||
background: var(--white-translucent);
|
||||
margin-left: .5rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -711,18 +711,18 @@ $flash-background-duration: 750ms;
|
|||
// This is a workaround to hide the llama background from the top on the task detail page
|
||||
margin-top: -1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: $light-background;
|
||||
background-color: var(--light-background);
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: $grey-500;
|
||||
color: var(--grey-500);
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
color: $grey-800;
|
||||
color: var(--grey-800);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -731,7 +731,7 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
.icon.is-grey {
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
:deep(.heading) {
|
||||
|
|
@ -759,7 +759,7 @@ $flash-background-duration: 750ms;
|
|||
}
|
||||
|
||||
.title.task-id {
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -770,7 +770,7 @@ $flash-background-duration: 750ms;
|
|||
align-items: center;
|
||||
|
||||
a.remove {
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
vertical-align: middle;
|
||||
padding-left: .5rem;
|
||||
line-height: 1;
|
||||
|
|
@ -781,7 +781,7 @@ $flash-background-duration: 750ms;
|
|||
width: 100%;
|
||||
|
||||
a.show {
|
||||
color: $text;
|
||||
color: var(--text);
|
||||
padding: .25rem .5rem;
|
||||
transition: background-color $transition;
|
||||
border-radius: $radius;
|
||||
|
|
@ -789,7 +789,7 @@ $flash-background-duration: 750ms;
|
|||
margin: .1rem 0;
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -805,7 +805,7 @@ $flash-background-duration: 750ms;
|
|||
|
||||
.detail-title {
|
||||
display: block;
|
||||
color: $grey-400;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
.none {
|
||||
|
|
@ -842,7 +842,7 @@ $flash-background-duration: 750ms;
|
|||
transition: all $transition-duration;
|
||||
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
color: var(--text-light);
|
||||
opacity: 1;
|
||||
|
dpschen marked this conversation as resolved
Outdated
dpschen
commented
Remove hack and replace colors with vars directly Remove hack and replace colors with vars directly
dpschen
commented
Done! Done!
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -888,7 +888,7 @@ $flash-background-duration: 750ms;
|
|||
|
||||
.created {
|
||||
font-size: .75rem;
|
||||
color: $grey-500;
|
||||
color: var(--grey-500);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,11 +53,11 @@ export default {
|
|||
position: fixed;
|
||||
top: 5px;
|
||||
right: 26px;
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
font-size: 2rem;
|
||||
|
||||
@media screen and (max-width: $desktop) {
|
||||
color: $dark;
|
||||
color: var(--dark);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,7 +68,7 @@ ul.teams {
|
|||
transition: background-color $transition;
|
||||
|
||||
&:hover {
|
||||
background: $grey-100;
|
||||
background: var(--grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,13 +88,13 @@ export default {
|
|||
a {
|
||||
display: block;
|
||||
padding: .5rem;
|
||||
color: $dark;
|
||||
color: var(--dark);
|
||||
width: 100%;
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover, &.router-link-active {
|
||||
background: $white;
|
||||
border-color: $primary;
|
||||
background: var(--white);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,6 +149,6 @@ export default {
|
|||
}
|
||||
|
||||
.vue-advanced-cropper__background {
|
||||
background: $white;
|
||||
background: var(--white);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Reference in New Issue
Block a user
It seems wrong to use here the
site-backgroundsince this is a link – better justvar(--grey-100)?That seems perfectly sensible. Done.