ami/tl-vikunja
1
0
Fork 0
Code Activity

feat: add print styles

Browse Source
This commit is contained in:
kolaente
2022-06-02 23:00:21 +02:00
parent 1deb0a58bd
commit 6fc87e1515
10 changed files with 101 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/styles/custom-properties/colors.scss
View File

@ -170,7 +170,7 @@
//--grey-lighter: #dbdbdb;
--white-ter: whitesmoke;
--white-bis: #fafafa;
// END core Bulma color variables
// END core Bulma color variables
// Vikunja specific variables
@ -191,10 +191,10 @@
// 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-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);
@ -218,21 +218,21 @@
--warning-a: 1;
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
// $success / $green is #00db60
// $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 / $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
// var(--primary) / $blue is #1973ff
--primary-h: 217deg;
--primary-s: 98%;
--primary-l: 53%;
@ -255,56 +255,58 @@
--card-border-color: var(--grey-200);
--logo-text-color: hsl(180, 1%, 15%);
&.dark {
// 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));
@media screen {
&.dark {
// 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%;
// 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);
// 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-800);
--table-row-hover-background-color: var(--grey-100);
--dropdown-item-hover-background-color: var(--grey-100);
--dropdown-item-hover-color: var(--text);
--button-text-hover-background-color: var(--grey-200);
--button-hover-color: var(--grey-600);
// 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-800);
--table-row-hover-background-color: var(--grey-100);
--dropdown-item-hover-background-color: var(--grey-100);
--dropdown-item-hover-color: var(--text);
--button-text-hover-background-color: var(--grey-200);
--button-hover-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);
// 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);
}
}
}

3
src/styles/theme/_index.scss
View File

@ -7,4 +7,5 @@
@import "form";
@import "link-share";
@import "loading";
@import "flatpickr";
@import "flatpickr";
@import 'helpers';

5
src/styles/theme/helpers.scss Normal file
View File

@ -0,0 +1,5 @@
.d-print-none {
@media print {
display: none !important;
}
}

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

@ -26,6 +26,10 @@
body {
background: var(--site-background);
min-height: 100vh;
@media print {
background: #fff;
}
}
h1,