luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated fonts to be defined via CSS variables

Browse source 
Exports system remains separate due to lacking css variable support.
This commit is contained in:
Dan Brown 2023-06-14 12:53:48 +01:00
parent 56a40f1b23
commit 610ad0d613
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
5 changed files with 32 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/sass/_codemirror.scss
View file

@ -14,6 +14,10 @@
border-radius: 4px;
}
.cm-editor .cm-line, .cm-editor .cm-gutter {
font-family: var(--font-code);
}
// Manual dark-mode definition so that it applies to code blocks within the shadow
// dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
// <html> node are not applies so instead we have the class on the parent element.

2
resources/sass/_components.scss
View file

@ -574,7 +574,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
cursor: pointer;
width: 100%;
text-align: left;
font-family: $mono;
font-family: var(--font-code);
font-size: 0.7rem;
padding-left: 24px + $-xs;
&:hover, &.active {

9
resources/sass/_text.scss
View file

@ -3,10 +3,10 @@
*/
body, button, input, select, label, textarea {
font-family: $text;
font-family: var(--font-body);
}
.Codemirror, pre, #markdown-editor-input, .text-mono, .code-base {
font-family: $mono;
pre, #markdown-editor-input, .text-mono, .code-base {
font-family: var(--font-code);
}
/*
@ -42,6 +42,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 400;
position: relative;
display: block;
font-family: var(--font-heading);
@include lightDark(color, #222, #BBB);
.subheader {
font-size: 0.5em;
@ -226,7 +227,7 @@ blockquote {
}
.text-mono {
font-family: $mono;
font-family: var(--font-code);
}
.text-uppercase {

2
resources/sass/_tinymce.scss
View file

@ -110,7 +110,7 @@ body.page-content.mce-content-body {
border-left: 3px solid currentColor !important;
}
.tox-menu .tox-collection__item[title^="<"] > div > div {
font-family: $mono !important;
font-family: var(--font-code) !important;
border: 1px solid #DDD !important;
background-color: #EEE !important;
padding: 4px 6px !important;

36
resources/sass/_variables.scss
View file

@ -27,11 +27,11 @@ $-xxs: 3px;
$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
// Fonts
$text: -apple-system, BlinkMacSystemFont,
$font-body: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell",
"Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
$mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
$font-mono: "Lucida Console", "DejaVu Sans Mono", "Ubuntu Mono", Monaco, monospace;
$fs-m: 14px;
$fs-s: 12px;
@ -45,7 +45,25 @@ $negative-dark: #e85c5b;
$info-dark: #0288D1;
$warning-dark: #de8a5a;
// Text colours
$text-dark: #444;
// Shadows
$bs-light: 0 0 4px 1px #CCC;
$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
$bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
// CSS root variables
:root {
--font-body: #{$font-body};
--font-heading: #{$font-body};
--font-code: #{$font-mono};
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
--color-link: #206ea7;
@ -74,16 +92,4 @@ $warning-dark: #de8a5a;
}
:root:not(.dark-mode) {
color-scheme: only light;
}
// Text colours
$text-dark: #444;
// Shadows
$bs-light: 0 0 4px 1px #CCC;
$bs-dark: 0 0 4px 1px rgba(0, 0, 0, 0.5);
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
$bs-card-dark: 0 1px 6px -1px rgba(0, 0, 0, 0.5);
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
}