chore: move frontend files
This commit is contained in:
kolaente
41
frontend/src/styles/common-imports.scss
Normal file
41
frontend/src/styles/common-imports.scss
Normal file
@ -0,0 +1,41 @@
|
||||
//
|
||||
// IMPORTANT NOTE:
|
||||
//
|
||||
// The styles in this file and all imported styles should not
|
||||
// create CSS output when compiled!
|
||||
// Instead they should only define SCSS that gets compiled to nothing.
|
||||
//
|
||||
// The reason is that this file is prefixed in _every_ component style so that
|
||||
// the component has access to the variables, mixins, etc. that
|
||||
// are defined here.
|
||||
//
|
||||
|
||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||
|
||||
// the default values get overwritten by the definitions above
|
||||
@import "bulma-css-variables/sass/utilities/_all";
|
||||
|
||||
// since $tablet is defined by bulma we can just define it after importing the utilities
|
||||
$mobile: math.div($tablet, 2);
|
||||
|
||||
$vikunja-font: 'Quicksand', sans-serif;
|
||||
|
||||
$pagination-current-border: var(--primary);
|
||||
$navbar-item-active-color: var(--primary);
|
||||
|
||||
$site-background: var(--grey-100);
|
||||
|
||||
$transition-duration: 150ms;
|
||||
$transition: $transition-duration ease;
|
||||
|
||||
$button-height: 34px;
|
||||
$switch-view-height: 2.69rem;
|
||||
|
||||
$navbar-height: 4rem;
|
||||
$navbar-width: 300px;
|
||||
$navbar-padding: 2rem;
|
||||
|
||||
$vikunja-nav-color: var(--grey-700);
|
||||
$vikunja-nav-selected-width: 0.4rem;
|
||||
|
||||
$close-button-min-space: 84px;
|
||||
5
frontend/src/styles/components/_index.scss
Normal file
5
frontend/src/styles/components/_index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "tooltip";
|
||||
@import "labels";
|
||||
@import "project";
|
||||
@import "task";
|
||||
@import "tasks";
|
||||
29
frontend/src/styles/components/labels.scss
Normal file
29
frontend/src/styles/components/labels.scss
Normal file
@ -0,0 +1,29 @@
|
||||
// FIXME: adapt lables.vue so that it can be used for this aswell
|
||||
.labels-list {
|
||||
a, a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tag {
|
||||
margin: .5rem 0 .5rem .5rem;
|
||||
background: var(--grey-200);
|
||||
|
||||
// FIXME: only used in ListLabels.vue
|
||||
&.disabled {
|
||||
opacity: 0.7;
|
||||
|
||||
&, a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect .tag {
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks .task span.tag span {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
110
frontend/src/styles/components/project.scss
Normal file
110
frontend/src/styles/components/project.scss
Normal file
@ -0,0 +1,110 @@
|
||||
// FIXME: should be a component <FilterContainer>
|
||||
// used in
|
||||
// - Kanban.vue
|
||||
// - Project.vue
|
||||
// - Table.vue
|
||||
|
||||
$filter-container-top-default: -59px;
|
||||
$filter-container-top-link-share-gantt: -133px;
|
||||
$filter-container-top-link-share-list: -47px;
|
||||
|
||||
.filter-container {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
min-width: 400px;
|
||||
max-width: 180px;
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
margin-top: $filter-container-top-default;
|
||||
z-index: 4;
|
||||
|
||||
.items {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.button:not(:last-of-type) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: $switch-view-height;
|
||||
}
|
||||
|
||||
.card {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.fancycheckbox {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-right: .5rem;
|
||||
|
||||
.field {
|
||||
transition: width $transition;
|
||||
width: 100%;
|
||||
|
||||
&.hidden {
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filters input {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
position: static;
|
||||
margin: 0 0 1rem 0 !important;
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
|
||||
.items {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
|
||||
.control:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.link-share-container .gantt-chart-container .filter-container,
|
||||
.gantt-chart-container .filter-container {
|
||||
right: 0;
|
||||
margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
|
||||
}
|
||||
|
||||
.link-share-container .gantt-chart-container .filter-container {
|
||||
margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
|
||||
}
|
||||
|
||||
.link-share-container .list-view .filter-container {
|
||||
margin-top: $filter-container-top-link-share-list - 10px;
|
||||
}
|
||||
|
||||
.link-share-container.project\.table-view,
|
||||
.link-share-container.project\.list-view {
|
||||
.filter-container {
|
||||
right: 9rem;
|
||||
margin-top: $filter-container-top-default;
|
||||
}
|
||||
}
|
||||
4
frontend/src/styles/components/task.scss
Normal file
4
frontend/src/styles/components/task.scss
Normal file
@ -0,0 +1,4 @@
|
||||
// FIXME: should be in TaskDetailView.vue
|
||||
.link-share-container:not(.has-background) .task-view {
|
||||
background: transparent;
|
||||
}
|
||||
48
frontend/src/styles/components/tasks.scss
Normal file
48
frontend/src/styles/components/tasks.scss
Normal file
@ -0,0 +1,48 @@
|
||||
// FIXME: These classes are used all over.
|
||||
// very hard to untangle
|
||||
// they have many overwrites at different positions
|
||||
.tasks {
|
||||
text-align: left;
|
||||
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&.short {
|
||||
@media screen and (min-width: $tablet) {
|
||||
max-width: 53vw;
|
||||
}
|
||||
}
|
||||
|
||||
&.noborder {
|
||||
margin: 1rem -0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: seems only necessary for
|
||||
// - relatedTasks.vue
|
||||
// - singleTaskInProject.vue
|
||||
.is-menu-enabled .tasks .task {
|
||||
span:not(.tag), a {
|
||||
.tasktext,
|
||||
&.tasktext {
|
||||
@media screen and (max-width: $desktop) {
|
||||
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
|
||||
}
|
||||
|
||||
// Duplicated rule to have it work properly in at least some browsers
|
||||
// This should be fine as the ui doesn't work in rare edge cases to begin with
|
||||
@media screen and (max-width: calc(#{$desktop} + #{$navbar-width})) {
|
||||
max-width: calc(100vw - 27px - 2rem - 1.5rem - 3rem - #{$navbar-width}); // 1.5rem is the padding of the tasks container, 3rem is the padding of .app-container
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: is only used where <edit-task> is used aswell:
|
||||
// - Project.vue
|
||||
// -> Move the <card> wrapper including this class definition inside <edit-task>
|
||||
.is-max-width-desktop .tasks .task {
|
||||
max-width: $desktop;
|
||||
}
|
||||
12
frontend/src/styles/components/tooltip.scss
Normal file
12
frontend/src/styles/components/tooltip.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.v-popper--theme-tooltip .v-popper__inner {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8rem;
|
||||
background: var(--grey-900);
|
||||
color: var(--white);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dark .v-popper--theme-tooltip .v-popper__inner {
|
||||
background: var(--white);
|
||||
color: var(--grey-900);
|
||||
}
|
||||
2
frontend/src/styles/custom-properties/_index.scss
Normal file
2
frontend/src/styles/custom-properties/_index.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "colors";
|
||||
@import "shadows";
|
||||
330
frontend/src/styles/custom-properties/colors.scss
Normal file
330
frontend/src/styles/custom-properties/colors.scss
Normal file
@ -0,0 +1,330 @@
|
||||
// Vikunja colors as CSS custom properties
|
||||
|
||||
:root {
|
||||
// Core Bulma color variables
|
||||
// Added (from bulma-css-variables/css/bulma.css) to fix issues with undefined variables
|
||||
// This section should be removed once bulma/sass scoping issues are fixed
|
||||
// see https://kolaente.dev/vikunja/frontend/issues/1064
|
||||
// Variables overriden in Vikunja specific rules below are commented out
|
||||
//--scheme-main: white;
|
||||
--scheme-main-bis: #fafafa;
|
||||
--scheme-main-ter: whitesmoke;
|
||||
--scheme-invert: #0a0a0a;
|
||||
--scheme-invert-rgb: 10.2, 10.2, 10.2;
|
||||
--scheme-invert-bis: #121212;
|
||||
--scheme-invert-ter: #242424;
|
||||
--background: whitesmoke;
|
||||
//--border: #dbdbdb;
|
||||
--border-rgb: 219.3, 219.3, 219.3;
|
||||
--border-hover: #b5b5b5;
|
||||
--border-light: #ededed;
|
||||
--border-light-hover: #b5b5b5;
|
||||
--text: #4a4a4a;
|
||||
--text-invert: #fff;
|
||||
--text-light: #7a7a7a;
|
||||
--text-strong: #363636;
|
||||
--code: #da1039;
|
||||
--code-background: var(--background, whitesmoke);
|
||||
--pre: var(--text, #4a4a4a);
|
||||
--pre-background: var(--background, whitesmoke);
|
||||
--link-visited: #b86bff;
|
||||
//--link-hover: #363636;
|
||||
--link-hover-border: #b5b5b5;
|
||||
--link-focus: #363636;
|
||||
--link-focus-border: var(--link, #485fc7);
|
||||
--link-active: #363636;
|
||||
--link-active-border: #4a4a4a;
|
||||
//--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-invert-l: 4%;
|
||||
--white-invert: #0a0a0a;
|
||||
--white-light-l: 100%;
|
||||
--white-light: hsla(var(--white-h), var(--white-s), var(--white-light-l), var(--white-a));
|
||||
--white-dark-l: 29%;
|
||||
--white-dark: hsla(var(--white-h), var(--white-s), var(--white-dark-l), var(--white-a));
|
||||
//--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));
|
||||
--black-invert-l: 100%;
|
||||
--black-invert: white;
|
||||
--black-light-l: 96%;
|
||||
--black-light: hsla(var(--black-h), var(--black-s), var(--black-light-l), var(--black-a));
|
||||
--black-dark-l: 57%;
|
||||
--black-dark: hsla(var(--black-h), var(--black-s), var(--black-dark-l), var(--black-a));
|
||||
--light-h: 0deg;
|
||||
--light-s: 0%;
|
||||
--light-l: 96%;
|
||||
--light-a: 1;
|
||||
--light: hsla(var(--light-h), var(--light-s), var(--light-l), var(--light-a));
|
||||
--light-invert-l: 0%;
|
||||
--light-invert: rgba(0, 0, 0, 0.7);
|
||||
--light-light-l: 96%;
|
||||
--light-light: hsla(var(--light-h), var(--light-s), var(--light-light-l), var(--light-a));
|
||||
--light-dark-l: 29%;
|
||||
--light-dark: hsla(var(--light-h), var(--light-s), var(--light-dark-l), var(--light-a));
|
||||
--dark-h: 0deg;
|
||||
--dark-s: 0%;
|
||||
--dark-l: 21%;
|
||||
--dark-a: 1;
|
||||
--dark: hsla(var(--dark-h), var(--dark-s), var(--dark-l), var(--dark-a));
|
||||
--dark-invert-l: 100%;
|
||||
--dark-invert: #fff;
|
||||
--dark-light-l: 96%;
|
||||
--dark-light: hsla(var(--dark-h), var(--dark-s), var(--dark-light-l), var(--dark-a));
|
||||
--dark-dark-l: 54%;
|
||||
--dark-dark: hsla(var(--dark-h), var(--dark-s), var(--dark-dark-l), var(--dark-a));
|
||||
//--primary-h: 171deg;
|
||||
//--primary-s: 100%;
|
||||
//--primary-l: 41%;
|
||||
//--primary-a: 1;
|
||||
//--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||
--primary-invert-l: 100%;
|
||||
--primary-invert: #fff;
|
||||
--primary-light-l: 96%;
|
||||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||
--primary-dark-l: 29%;
|
||||
--primary-dark: hsla(var(--primary-h), var(--primary-s), var(--primary-dark-l), var(--primary-a));
|
||||
--link-h: 229deg;
|
||||
--link-s: 53%;
|
||||
--link-l: 53%;
|
||||
--link-a: 1;
|
||||
//--link: hsla(var(--link-h), var(--link-s), var(--link-l), var(--link-a));
|
||||
--link-invert-l: 100%;
|
||||
--link-invert: #fff;
|
||||
--link-light-l: 96%;
|
||||
--link-light: hsla(var(--link-h), var(--link-s), var(--link-light-l), var(--link-a));
|
||||
--link-dark-l: 47%;
|
||||
--link-dark: hsla(var(--link-h), var(--link-s), var(--link-dark-l), var(--link-a));
|
||||
--info-h: 207deg;
|
||||
--info-s: 61%;
|
||||
--info-l: 53%;
|
||||
--info-a: 1;
|
||||
--info: hsla(var(--info-h), var(--info-s), var(--info-l), var(--info-a));
|
||||
--info-invert-l: 100%;
|
||||
--info-invert: #fff;
|
||||
--info-light-l: 96%;
|
||||
--info-light: hsla(var(--info-h), var(--info-s), var(--info-light-l), var(--info-a));
|
||||
--info-dark-l: 41%;
|
||||
--info-dark: hsla(var(--info-h), var(--info-s), var(--info-dark-l), var(--info-a));
|
||||
//--success-h: 153deg;
|
||||
//--success-s: 53%;
|
||||
//--success-l: 53%;
|
||||
//--success-a: 1;
|
||||
//--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
--success-invert-l: 100%;
|
||||
--success-invert: #fff;
|
||||
--success-light-l: 96%;
|
||||
--success-light: hsla(var(--success-h), var(--success-s), var(--success-light-l), var(--success-a));
|
||||
--success-dark-l: 31%;
|
||||
--success-dark: hsla(var(--success-h), var(--success-s), var(--success-dark-l), var(--success-a));
|
||||
//--warning-h: 44deg;
|
||||
//--warning-s: 100%;
|
||||
//--warning-l: 77%;
|
||||
//--warning-a: 1;
|
||||
//--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
--warning-invert-l: 0%;
|
||||
--warning-invert: rgba(0, 0, 0, 0.7);
|
||||
--warning-light-l: 96%;
|
||||
--warning-light: hsla(var(--warning-h), var(--warning-s), var(--warning-light-l), var(--warning-a));
|
||||
--warning-dark-l: 29%;
|
||||
--warning-dark: hsla(var(--warning-h), var(--warning-s), var(--warning-dark-l), var(--warning-a));
|
||||
//--danger-h: 348deg;
|
||||
//--danger-s: 86%;
|
||||
//--danger-l: 61%;
|
||||
//--danger-a: 1;
|
||||
//--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
--danger-invert-l: 100%;
|
||||
--danger-invert: #fff;
|
||||
--danger-light-l: 96%;
|
||||
--danger-light: hsla(var(--danger-h), var(--danger-s), var(--danger-light-l), var(--danger-a));
|
||||
--danger-dark-l: 43%;
|
||||
--danger-dark: hsla(var(--danger-h), var(--danger-s), var(--danger-dark-l), var(--danger-a));
|
||||
--input-color: var(--text-strong, #363636);
|
||||
--input-background-color: var(--scheme-main, white);
|
||||
//--input-border-color: var(--border, #dbdbdb);
|
||||
--input-shadow: inset 0 0.0625em 0.125em rgba(var(--scheme-invert-rgb, 10.2, 10.2, 10.2), 0.05);
|
||||
--input-placeholder-color: rgba(54, 54, 54, 0.3);
|
||||
--input-hover-color: var(--text-strong, #363636);
|
||||
--input-hover-border-color: var(--border-hover, #b5b5b5);
|
||||
--input-focus-color: var(--text-strong, #363636);
|
||||
--input-focus-border-color: var(--link, #485fc7);
|
||||
--input-focus-box-shadow-color: var(--input-focus-box-shadow-color-hsla, rgba(72, 95, 199, 0.25));
|
||||
--input-disabled-color: var(--text-light, #7a7a7a);
|
||||
//--input-disabled-background-color: var(--background, whitesmoke);
|
||||
//--input-disabled-border-color: var(--background, whitesmoke);
|
||||
--input-disabled-placeholder-color: rgba(122, 122, 122, 0.3);
|
||||
--input-arrow: var(--link, #485fc7);
|
||||
--input-icon-color: var(--border, #dbdbdb);
|
||||
--input-icon-active-color: var(--text, #4a4a4a);
|
||||
--black-bis: #121212;
|
||||
--black-ter: #242424;
|
||||
//--grey-darker: #363636;
|
||||
//--grey-dark: #4a4a4a;
|
||||
//--grey: #7a7a7a;
|
||||
//--grey-light: #b5b5b5;
|
||||
//--grey-lighter: #dbdbdb;
|
||||
--white-ter: whitesmoke;
|
||||
--white-bis: #fafafa;
|
||||
// END core Bulma color variables
|
||||
|
||||
|
||||
// Vikunja specific variables
|
||||
--grey-50: hsl(210, 20%, 98%);
|
||||
--grey-100-hsl: 220, 14.3%, 95.9%;
|
||||
--grey-100: hsl(var(--grey-100-hsl));
|
||||
--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-500: hsl(var(--grey-500-hsl));
|
||||
--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%);
|
||||
--site-background: var(--grey-100);
|
||||
|
||||
// Overrides of Bulma defaults
|
||||
--scheme-main: var(--white);
|
||||
--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);
|
||||
--input-border-color: var(--grey-200);
|
||||
|
||||
--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);
|
||||
|
||||
--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
|
||||
--warning-h: 27.9deg;
|
||||
--warning-s: 100%;
|
||||
--warning-l: 55.3%;
|
||||
--warning-a: 1;
|
||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||
|
||||
// $success / $green is #00db60
|
||||
--success-h: 146.3deg;
|
||||
--success-s: 100%;
|
||||
--success-l: 42.9%;
|
||||
--success-a: 1;
|
||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||
|
||||
// $danger / $red is #ff4136
|
||||
--danger-h: 3.3deg;
|
||||
--danger-s: 100%;
|
||||
--danger-l: 60.6%;
|
||||
--danger-a: 1;
|
||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||
|
||||
// var(--primary) / $blue is #1973ff
|
||||
--primary-h: 217deg;
|
||||
--primary-s: 98%;
|
||||
--primary-l: 53%;
|
||||
--primary-a: 1;
|
||||
--primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
|
||||
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
|
||||
|
||||
--link: var(--primary);
|
||||
--link-hover: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .75);
|
||||
--border: var(--grey-200);
|
||||
--input-disabled-background-color: var(--grey-100);
|
||||
--input-disabled-border-color: var(--grey-300);
|
||||
--progress-value-background-color: var(--grey-500);
|
||||
// END Overrides of Bulma defaults
|
||||
|
||||
|
||||
// Define custom color variable to prevent change in dark mode
|
||||
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
|
||||
|
||||
// Define custom color variable to alow change in dark mode
|
||||
--card-border-color: var(--grey-200);
|
||||
--logo-text-color: hsl(180, 1%, 15%);
|
||||
|
||||
// Code colors
|
||||
--code-variable: #da2222;
|
||||
--code-literal: #fd8a09;
|
||||
--code-symbol: #0ead69;
|
||||
--code-section: #3a86ff;
|
||||
--code-keyword: #8338ec;
|
||||
|
||||
&.dark {
|
||||
@media screen {
|
||||
// Light mode colours reversed for dark mode
|
||||
--grey-900-hsl: 210, 20%, 98%;
|
||||
--grey-900: hsl(var(--grey-900-hsl));
|
||||
--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: hsl(var(--grey-500-hsl));
|
||||
--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-100: hsl(var(--grey-100-hsl));
|
||||
--grey-50-hsl: 220.9, 39.3%, 11%;
|
||||
--grey-50: hsl(var(--grey-50-hsl));
|
||||
|
||||
// Dark grey looks better than black
|
||||
--white: var(--grey-50);
|
||||
--black-l: 100%;
|
||||
|
||||
// Text renders better in grey than black
|
||||
--text: var(--grey-800);
|
||||
--text-invert: #000;
|
||||
--text-light: var(--grey-300);
|
||||
--text-strong: var(--grey-900);
|
||||
|
||||
// Elements that rely on Bulma defaults in light mode but
|
||||
// need to be overriden in dark mode
|
||||
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6);
|
||||
--tag-color: var(--grey-300);
|
||||
--table-row-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-background-color: var(--grey-100);
|
||||
--dropdown-item-hover-color: var(--text);
|
||||
--pre-background: var(--grey-200);
|
||||
--button-text-hover-background-color: var(--grey-200);
|
||||
--button-hover-color: var(--grey-600);
|
||||
--button-active-color: var(--grey-600);
|
||||
--button-focus-color: var(--grey-600);
|
||||
|
||||
// Custom color variables we need to override
|
||||
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
|
||||
--logo-text-color: var(--grey-700);
|
||||
|
||||
// Slightly different primary color to make sure it has a sufficent contrast ratio
|
||||
--primary-h: 217deg;
|
||||
--primary-s: 98%;
|
||||
--primary-l: 58%;
|
||||
|
||||
--scheme-main-bis: var(--grey-100);
|
||||
--scheme-main-ter: var(--grey-100);
|
||||
--scheme-invert: var(--grey-900);
|
||||
--scheme-invert-bis: var(--grey-900);
|
||||
--scheme-invert-ter: var(--grey-800);
|
||||
|
||||
// Code colors
|
||||
--code-variable: #f98181;
|
||||
--code-literal: #fbbc88;
|
||||
--code-symbol: #b9f18d;
|
||||
--code-section: #faf594;
|
||||
--code-keyword: #70cff8;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
frontend/src/styles/custom-properties/shadows.scss
Normal file
22
frontend/src/styles/custom-properties/shadows.scss
Normal file
@ -0,0 +1,22 @@
|
||||
: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);
|
||||
|
||||
&.dark {
|
||||
// Even darker shadows for dark mode
|
||||
--shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
|
||||
0 1px 2px hsla(var(--grey-50-hsl), 0.8);
|
||||
--shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
|
||||
0 2px 4px hsla(var(--grey-50-hsl), 0.6);
|
||||
--shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
|
||||
0 3px 6px hsla(var(--grey-50-hsl), 0.6);
|
||||
--shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
|
||||
0 5px 10px hsla(var(--grey-50-hsl), 0.4);
|
||||
}
|
||||
}
|
||||
105
frontend/src/styles/fonts.scss
Normal file
105
frontend/src/styles/fonts.scss
Normal file
@ -0,0 +1,105 @@
|
||||
$font-files-path: '@/assets/fonts/';
|
||||
|
||||
// this is the same as the latin range that google uses.
|
||||
// see for examle the unicode-range definition here:
|
||||
// https://fonts.googleapis.com/css2?family=Open+Sans
|
||||
$unicode-range: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
|
||||
U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,\
|
||||
U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD";
|
||||
|
||||
@supports (font-variation-settings: normal) {
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
src: url($font-files-path + 'Quicksand[wght]_87bdcc7f.woff2') format('woff2-variations');
|
||||
src: url($font-files-path + 'Quicksand[wght]_87bdcc7f.woff2') format('woff2') tech('variations');
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans[wght]_54a65da5.woff2') format('woff2-variations');
|
||||
src: url($font-files-path + 'OpenSans[wght]_54a65da5.woff2') format('woff2') tech('variations');
|
||||
font-weight: 400 700;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans-Italic[wght]_c9a8fe68.woff2') format('woff2-variations');
|
||||
src: url($font-files-path + 'OpenSans-Italic[wght]_c9a8fe68.woff2') format('woff2') tech('variations');
|
||||
font-weight: 400 700;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
}
|
||||
|
||||
/* Set up for old browsers */
|
||||
@supports not (font-variation-settings: normal) {
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
src: url($font-files-path + 'Quicksand-Regular_3e913e7e.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
src: url($font-files-path + 'Quicksand-SemiBold_be48a442.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
src: url($font-files-path + 'Quicksand-Bold_20b26f76.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans-Regular_d0acb717.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans-RegularItalic_48244a7a.woff2') format('woff2');
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans-Bold_eb52363b.woff2') format('woff2');
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url($font-files-path + 'OpenSans-BoldItalic_3ff98862.woff2') format('woff2');
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
}
|
||||
88
frontend/src/styles/global.scss
Normal file
88
frontend/src/styles/global.scss
Normal file
@ -0,0 +1,88 @@
|
||||
@import "fonts";
|
||||
|
||||
@import "transitions";
|
||||
|
||||
// ###################
|
||||
// START BULMA IMPORTS
|
||||
// ###################
|
||||
//
|
||||
// The following imports are the same as in "bulma/bulma.sass"
|
||||
// with the expeption of the bulma utilities – They are
|
||||
// imported globally in common-imports.scss
|
||||
|
||||
// imports from "bulma-css-variables/sass/base/_all";
|
||||
@import "bulma-css-variables/sass/base/minireset";
|
||||
@import "bulma-css-variables/sass/base/generic";
|
||||
@import "bulma-css-variables/sass/base/animations";
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/elements/_all";
|
||||
@import "bulma-css-variables/sass/elements/box";
|
||||
@import "bulma-css-variables/sass/elements/button";
|
||||
@import "bulma-css-variables/sass/elements/container";
|
||||
@import "bulma-css-variables/sass/elements/content";
|
||||
@import "bulma-css-variables/sass/elements/icon";
|
||||
@import "bulma-css-variables/sass/elements/image";
|
||||
//@import "bulma-css-variables/sass/elements/notification"; // not used
|
||||
// @import "bulma-css-variables/sass/elements/progress"; // not used
|
||||
@import "bulma-css-variables/sass/elements/table";
|
||||
@import "bulma-css-variables/sass/elements/tag";
|
||||
@import "bulma-css-variables/sass/elements/title";
|
||||
|
||||
@import "bulma-css-variables/sass/elements/other";
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/form/_all";
|
||||
@import "bulma-css-variables/sass/form/shared";
|
||||
@import "bulma-css-variables/sass/form/input-textarea";
|
||||
@import "bulma-css-variables/sass/form/checkbox-radio";
|
||||
@import "bulma-css-variables/sass/form/select";
|
||||
@import "bulma-css-variables/sass/form/file";
|
||||
@import "bulma-css-variables/sass/form/tools";
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/components/_all";
|
||||
// @import "bulma-css-variables/sass/components/breadcrumb"; // not used
|
||||
@import "bulma-css-variables/sass/components/card";
|
||||
// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
|
||||
// @import "bulma-css-variables/sass/components/level"; // not used
|
||||
@import "bulma-css-variables/sass/components/media";
|
||||
@import "bulma-css-variables/sass/components/menu";
|
||||
//@import "bulma-css-variables/sass/components/message"; // not used
|
||||
@import "bulma-css-variables/sass/components/modal";
|
||||
@import "bulma-css-variables/sass/components/navbar";
|
||||
@import "bulma-css-variables/sass/components/pagination";
|
||||
// @import "bulma-css-variables/sass/components/panel"; // not used
|
||||
// @import "bulma-css-variables/sass/components/tabs"; // not used
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/grid/_all";
|
||||
@import "bulma-css-variables/sass/grid/columns";
|
||||
// @import "bulma-css-variables/sass/grid/tiles"; // not used
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/helpers/_all";
|
||||
@import "bulma-css-variables/sass/helpers/color";
|
||||
@import "bulma-css-variables/sass/helpers/flexbox";
|
||||
@import "bulma-css-variables/sass/helpers/float";
|
||||
// @import "bulma-css-variables/sass/helpers/other"; // not used
|
||||
// @import "bulma-css-variables/sass/helpers/overflow";
|
||||
// @import "bulma-css-variables/sass/helpers/position";
|
||||
@import "bulma-css-variables/sass/helpers/spacing";
|
||||
@import "bulma-css-variables/sass/helpers/typography";
|
||||
@import "bulma-css-variables/sass/helpers/visibility";
|
||||
|
||||
|
||||
// imports from "bulma-css-variables/sass/layout/_all";
|
||||
// @import "bulma-css-variables/sass/layout/hero"; // not used
|
||||
// @import "bulma-css-variables/sass/layout/section"; // not used
|
||||
// @import "bulma-css-variables/sass/layout/footer"; // not used
|
||||
|
||||
// #################
|
||||
// END BULMA IMPORTS
|
||||
// #################
|
||||
|
||||
@import "theme";
|
||||
@import "components";
|
||||
|
||||
@import "custom-properties";
|
||||
12
frontend/src/styles/theme/_index.scss
Normal file
12
frontend/src/styles/theme/_index.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@import "scrollbars";
|
||||
|
||||
@import "theme";
|
||||
|
||||
@import "background";
|
||||
@import "content";
|
||||
@import "form";
|
||||
@import "link-share";
|
||||
@import "loading";
|
||||
@import "flatpickr";
|
||||
@import 'helpers';
|
||||
@import 'navigation';
|
||||
59
frontend/src/styles/theme/background.scss
Normal file
59
frontend/src/styles/theme/background.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.app-container.has-background,
|
||||
.link-share-container.has-background {
|
||||
position: relative;
|
||||
|
||||
&, .app-container-background {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
// FIXME: move to pagination component
|
||||
.pagination-link:not(.is-current) {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
.box,
|
||||
.card,
|
||||
.switch-view,
|
||||
.project-table .button,
|
||||
.filter-container .button,
|
||||
.search .button {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.task-view {
|
||||
border-radius: $radius;
|
||||
|
||||
@media screen and (min-width: $tablet) {
|
||||
margin-inline: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban .tasks {
|
||||
background: transparent;
|
||||
|
||||
.task {
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-container-background {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.background-fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity $transition;
|
||||
transition-delay: $transition-duration * 2; // To fake an appearing background
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
30
frontend/src/styles/theme/content.scss
Normal file
30
frontend/src/styles/theme/content.scss
Normal file
@ -0,0 +1,30 @@
|
||||
.content h3 {
|
||||
.icon,
|
||||
.is-small {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table.has-actions {
|
||||
border-top: 1px solid var(--grey-100);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td.actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.content-widescreen {
|
||||
margin: 0 auto;
|
||||
max-width: $widescreen;
|
||||
}
|
||||
|
||||
.content blockquote {
|
||||
background-color: var(--grey-200);
|
||||
border-left: .25rem solid var(--grey-300);
|
||||
}
|
||||
221
frontend/src/styles/theme/flatpickr.scss
Normal file
221
frontend/src/styles/theme/flatpickr.scss
Normal file
@ -0,0 +1,221 @@
|
||||
// Flatpickr overrides to use css custom properties and enable styling it
|
||||
|
||||
.flatpickr-calendar {
|
||||
background: var(--white);
|
||||
box-shadow: 1px 0 0 var(--grey-200), -1px 0 0 var(--grey-200), 0 1px 0 var(--grey-200), 0 -1px 0 var(--grey-200), 0 3px 13px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
|
||||
box-shadow: -2px 0 0 var(--grey-200), 5px 0 0 var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.hasTime .flatpickr-time {
|
||||
border-top: 1px solid var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.arrowTop:before {
|
||||
border-bottom-color: var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.arrowTop:after {
|
||||
border-bottom-color: var(--white);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.arrowBottom:before {
|
||||
border-top-color: var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-calendar.arrowBottom:after {
|
||||
border-top-color: var(--white);
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month,
|
||||
.flatpickr-months .flatpickr-prev-month,
|
||||
.flatpickr-months .flatpickr-next-month {
|
||||
color: var(--text);
|
||||
fill: var(--grey-900);
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month:hover,
|
||||
.flatpickr-months .flatpickr-next-month:hover {
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month:hover svg,
|
||||
.flatpickr-months .flatpickr-next-month:hover svg {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
.numInputWrapper span {
|
||||
border: 1px solid var(--grey-200);
|
||||
}
|
||||
|
||||
.numInputWrapper span:hover {
|
||||
background: var(--grey-800);
|
||||
}
|
||||
|
||||
.numInputWrapper span:active {
|
||||
background: var(--grey-800);
|
||||
}
|
||||
|
||||
.numInputWrapper span.arrowUp:after {
|
||||
border-bottom: 4px solid var(--grey-200);
|
||||
}
|
||||
|
||||
.numInputWrapper span.arrowDown:after {
|
||||
border-top: 4px solid var(--grey-200);
|
||||
top: 40%;
|
||||
}
|
||||
|
||||
.numInputWrapper span svg path {
|
||||
fill: var(--grey-800);
|
||||
}
|
||||
|
||||
.numInputWrapper:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
.flatpickr-current-month span.cur-month:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
|
||||
border-bottom-color: var(--grey-900);
|
||||
}
|
||||
|
||||
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
|
||||
border-top-color: var(--grey-900);
|
||||
}
|
||||
|
||||
.flatpickr-current-month input.cur-year[disabled],
|
||||
.flatpickr-current-month input.cur-year[disabled]:hover {
|
||||
color: var(--grey-800);
|
||||
}
|
||||
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
|
||||
span.flatpickr-weekday {
|
||||
color: var(--grey-600);
|
||||
}
|
||||
|
||||
.dayContainer + .dayContainer {
|
||||
box-shadow: -1px 0 0 var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-day {
|
||||
color: var(--grey-500);
|
||||
}
|
||||
|
||||
.flatpickr-day.inRange,
|
||||
.flatpickr-day.prevMonthDay.inRange,
|
||||
.flatpickr-day.nextMonthDay.inRange,
|
||||
.flatpickr-day.today.inRange,
|
||||
.flatpickr-day.prevMonthDay.today.inRange,
|
||||
.flatpickr-day.nextMonthDay.today.inRange,
|
||||
.flatpickr-day:hover,
|
||||
.flatpickr-day.prevMonthDay:hover,
|
||||
.flatpickr-day.nextMonthDay:hover,
|
||||
.flatpickr-day:focus,
|
||||
.flatpickr-day.prevMonthDay:focus,
|
||||
.flatpickr-day.nextMonthDay:focus {
|
||||
background: var(--grey-200);
|
||||
border-color: var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-day.today {
|
||||
border-color: var(--grey-400);
|
||||
}
|
||||
|
||||
.flatpickr-day.today:hover,
|
||||
.flatpickr-day.today:focus {
|
||||
border-color: var(--grey-400);
|
||||
background: var(--grey-400);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.endRange.inRange,
|
||||
.flatpickr-day.selected:focus,
|
||||
.flatpickr-day.startRange:focus,
|
||||
.flatpickr-day.endRange:focus,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover,
|
||||
.flatpickr-day.selected.prevMonthDay,
|
||||
.flatpickr-day.startRange.prevMonthDay,
|
||||
.flatpickr-day.endRange.prevMonthDay,
|
||||
.flatpickr-day.selected.nextMonthDay,
|
||||
.flatpickr-day.startRange.nextMonthDay,
|
||||
.flatpickr-day.endRange.nextMonthDay {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
|
||||
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
|
||||
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
|
||||
box-shadow: -10px 0 0 var(--primary);
|
||||
}
|
||||
|
||||
.flatpickr-day.inRange {
|
||||
box-shadow: -5px 0 0 var(--grey-200), 5px 0 0 var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-day.flatpickr-disabled,
|
||||
.flatpickr-day.flatpickr-disabled:hover,
|
||||
.flatpickr-day.prevMonthDay,
|
||||
.flatpickr-day.nextMonthDay,
|
||||
.flatpickr-day.notAllowed,
|
||||
.flatpickr-day.notAllowed.prevMonthDay,
|
||||
.flatpickr-day.notAllowed.nextMonthDay {
|
||||
color: var(--grey-300);
|
||||
}
|
||||
|
||||
.flatpickr-day.flatpickr-disabled,
|
||||
.flatpickr-day.flatpickr-disabled:hover {
|
||||
color: var(--grey-800);
|
||||
}
|
||||
|
||||
.flatpickr-day.week.selected {
|
||||
box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary);
|
||||
}
|
||||
|
||||
.flatpickr-weekwrapper .flatpickr-weeks {
|
||||
box-shadow: 1px 0 0 var(--grey-200);
|
||||
}
|
||||
|
||||
.flatpickr-weekwrapper span.flatpickr-day,
|
||||
.flatpickr-weekwrapper span.flatpickr-day:hover {
|
||||
color: var(--grey-300);
|
||||
}
|
||||
|
||||
.flatpickr-time .numInputWrapper span.arrowUp:after {
|
||||
border-bottom-color: var(--grey-500);
|
||||
}
|
||||
|
||||
.flatpickr-time .numInputWrapper span.arrowDown:after {
|
||||
border-top-color: var(--grey-500);
|
||||
}
|
||||
|
||||
.flatpickr-time input {
|
||||
color: var(--grey-500);
|
||||
}
|
||||
|
||||
.flatpickr-time .flatpickr-time-separator,
|
||||
.flatpickr-time .flatpickr-am-pm {
|
||||
color: var(--grey-500);
|
||||
}
|
||||
|
||||
.flatpickr-time input:hover,
|
||||
.flatpickr-time .flatpickr-am-pm:hover,
|
||||
.flatpickr-time input:focus,
|
||||
.flatpickr-time .flatpickr-am-pm:focus {
|
||||
background: var(--grey-100);
|
||||
}
|
||||
105
frontend/src/styles/theme/form.scss
Normal file
105
frontend/src/styles/theme/form.scss
Normal file
@ -0,0 +1,105 @@
|
||||
.field.has-addons .button {
|
||||
height: 2.5rem;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.field.has-addons .select select {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.input,
|
||||
.textarea {
|
||||
transition: all $transition;
|
||||
box-shadow: none;
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@each $name, $pair in $colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
|
||||
&.is-#{$name} {
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select:after {
|
||||
margin-top: -0.575rem;
|
||||
}
|
||||
|
||||
.select select {
|
||||
$thickness: 1px;
|
||||
border-width: $thickness;
|
||||
|
||||
&:not([multiple]) {
|
||||
height: calc(2.25rem + #{$thickness});
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field.has-addons .control .select select {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.control.has-icons-left .icon,
|
||||
.control.has-icons-right .icon {
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
// Buttons icons
|
||||
.button .icon.is-small {
|
||||
margin-right: 0.05rem !important;
|
||||
}
|
||||
|
||||
// FIXME: used for
|
||||
// - the <h1> in heading.vue
|
||||
// - the <h2> in Kanban.vue
|
||||
// Contenteditable form
|
||||
.input.title {
|
||||
font-size: 1.8rem;
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400 !important;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
margin: 0 .3rem;
|
||||
height: auto;
|
||||
padding: .3rem;
|
||||
|
||||
&:focus {
|
||||
background: $input-background-color;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
&:focus, &:hover {
|
||||
background: transparent !important;
|
||||
border-color: transparent !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
.input.title {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
5
frontend/src/styles/theme/helpers.scss
Normal file
5
frontend/src/styles/theme/helpers.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.d-print-none {
|
||||
@media print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
46
frontend/src/styles/theme/link-share.scss
Normal file
46
frontend/src/styles/theme/link-share.scss
Normal file
@ -0,0 +1,46 @@
|
||||
.field.has-addons.no-input-mobile {
|
||||
.control:first-child {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 40px;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-share-container {
|
||||
&.project\.gantt-view,
|
||||
&.project\.kanban-view {
|
||||
.container {
|
||||
max-width: 100vw;
|
||||
|
||||
.column {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-share-container:not(.has-background) {
|
||||
.list-view {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.loader-container, .gantt-chart-container > .card {
|
||||
box-shadow: none !important;
|
||||
border: none;
|
||||
|
||||
.task-add {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
40
frontend/src/styles/theme/loading.scss
Normal file
40
frontend/src/styles/theme/loading.scss
Normal file
@ -0,0 +1,40 @@
|
||||
// FIXME: move to loading.vue
|
||||
.loader-container.is-loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
|
||||
&::after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
|
||||
&.is-loading-small {
|
||||
&::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
left: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// FIXME: move to ShowTasks.vue
|
||||
.spinner.is-loading {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
@include loader;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-left: calc(50% - 1rem);
|
||||
margin-top: 1rem;
|
||||
border-width: 0.25rem;
|
||||
}
|
||||
}
|
||||
140
frontend/src/styles/theme/navigation.scss
Normal file
140
frontend/src/styles/theme/navigation.scss
Normal file
@ -0,0 +1,140 @@
|
||||
// these are general menu styles
|
||||
// should be in own components
|
||||
.menu {
|
||||
.menu-list .list-menu-link,
|
||||
.menu-list a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.color-bubble {
|
||||
height: 12px;
|
||||
flex: 0 0 12px;
|
||||
opacity: 1;
|
||||
margin: 0 .5rem 0 .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&.other-menu-items li,
|
||||
li > div {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
|
||||
li > div {
|
||||
.menu-list-dropdown {
|
||||
opacity: 1;
|
||||
transition: $transition;
|
||||
}
|
||||
|
||||
@media(hover: hover) and (pointer: fine) {
|
||||
.menu-list-dropdown {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover .menu-list-dropdown {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li > menu {
|
||||
margin: 0 0 0 var(--menu-nested-list-margin);
|
||||
}
|
||||
|
||||
.menu-item-icon {
|
||||
color: var(--grey-400);
|
||||
}
|
||||
|
||||
.menu-list-dropdown-trigger {
|
||||
display: flex;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.flip-list-move {
|
||||
transition: transform $transition-duration;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background: var(--grey-200);
|
||||
|
||||
* {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.list-menu-link,
|
||||
li, li > div {
|
||||
.collapse-project-button {
|
||||
padding: .5rem .25rem .5rem .5rem;
|
||||
|
||||
svg {
|
||||
transition: all $transition;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-project-button-placeholder {
|
||||
width: 1.625rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $vikunja-nav-color;
|
||||
padding: .75rem .5rem .75rem .25rem;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
border-radius: 0;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.router-link-exact-active .icon:not(.handle) {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.handle {
|
||||
opacity: 0;
|
||||
transition: opacity $transition;
|
||||
}
|
||||
|
||||
&:hover .handle {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.dragging-disabled) .handle {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
menu {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
31
frontend/src/styles/theme/scrollbars.scss
Normal file
31
frontend/src/styles/theme/scrollbars.scss
Normal file
@ -0,0 +1,31 @@
|
||||
$scrollbar-height: 8px;
|
||||
$scrollbar-track-color: var(--grey-200);
|
||||
$scrollbar-thumb-color: var(--grey-300);
|
||||
$scrollbar-hover-color: var(--grey-500);
|
||||
|
||||
// Chrome
|
||||
::-webkit-scrollbar {
|
||||
width: $scrollbar-height;
|
||||
height: $scrollbar-height;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $scrollbar-track-color;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: .5rem;
|
||||
background: $scrollbar-thumb-color;
|
||||
transition: all $transition;
|
||||
|
||||
&:hover {
|
||||
background: $scrollbar-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Firefox
|
||||
* {
|
||||
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
110
frontend/src/styles/theme/theme.scss
Normal file
110
frontend/src/styles/theme/theme.scss
Normal file
@ -0,0 +1,110 @@
|
||||
*,
|
||||
*:hover,
|
||||
*:active,
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:focus {
|
||||
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
:focus-visible,
|
||||
:-moz-focusring {
|
||||
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
|
||||
}
|
||||
|
||||
:root {
|
||||
// Bulma sets this to "scroll" which gives us a scrollbar even if there's no content to scroll
|
||||
--body-overflow-y: auto;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--site-background);
|
||||
min-height: 100vh;
|
||||
|
||||
@media print {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: $vikunja-font;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
// FIXME: these helpers should be mixins
|
||||
.has-no-border {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.has-rounded-corners {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
.has-overflow {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.has-horizontal-overflow {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
button.table {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.is-max-width-desktop {
|
||||
width: 100%;
|
||||
max-width: $desktop;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.has-no-shadow {
|
||||
&,
|
||||
&.is-hovered,
|
||||
&:hover,
|
||||
&.is-active,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-fullwidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-bubble {
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.is-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.is-touch .handle {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.dragging-disabled .handle {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 1px solid var(--grey-200);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
19
frontend/src/styles/transitions.scss
Normal file
19
frontend/src/styles/transitions.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity $transition-duration;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.width-enter-active,
|
||||
.width-leave-active {
|
||||
transition: width $transition-duration;
|
||||
}
|
||||
|
||||
.width-enter-from,
|
||||
.width-leave-to {
|
||||
width: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user