colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SASS: Updated to use modules and address deprecations 

Changes the name of our spacing variables due to the prefixing -/_
meaning private in the use of new "use" rather than include.

All now modular too, so all variables/mixins are accessed via their
package.

Also renamed variables file to vars for simpler/cleaner access/writing.

eg. '$-m' is now 'vars.$m'
This commit is contained in:
Dan Brown 2024-12-09 13:25:35 +00:00
parent 617b2edea0
commit 8ec26e8083
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
20 changed files with 649 additions and 595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
resources/sass/_blocks.scss
View File

@ -1,14 +1,17 @@
@use "mixins";
@use "vars";
/** /**
* Card-style blocks * Card-style blocks
*/ */
.card { .card {
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
box-shadow: $bs-card; box-shadow: vars.$bs-card;
border-radius: 3px; border-radius: 3px;
break-inside: avoid; break-inside: avoid;
.body, p.empty-text { .body, p.empty-text {
padding-block: $-m; padding-block: vars.$m;
} }
a, p { a, p {
word-wrap: break-word; word-wrap: break-word;
@ -17,9 +20,9 @@
} }
.card-title { .card-title {
padding: $-m $-m $-xs; padding: vars.$m vars.$m vars.$xs;
margin: 0; margin: 0;
font-size: $fs-m; font-size: vars.$fs-m;
color: #222; color: #222;
fill: #222; fill: #222;
font-weight: 400; font-weight: 400;
@ -29,21 +32,21 @@
} }
.card-footer-link, button.card-footer-link { .card-footer-link, button.card-footer-link {
display: block; display: block;
padding: $-s $-m; padding: vars.$s vars.$m;
line-height: 1; line-height: 1;
border-top: 1px solid; border-top: 1px solid;
width: 100%; width: 100%;
text-align: left; text-align: left;
@include lightDark(border-color, #DDD, #555); @include mixins.lightDark(border-color, #DDD, #555);
border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;
font-size: 0.9em; font-size: 0.9em;
margin-top: $-xs; margin-top: vars.$xs;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@include lightDark(background-color, #f2f2f2, #2d2d2d); @include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
} }
&:focus { &:focus {
@include lightDark(background-color, #eee, #222); @include mixins.lightDark(background-color, #eee, #222);
outline: 1px dotted #666; outline: 1px dotted #666;
outline-offset: -2px; outline-offset: -2px;
} }
@ -51,17 +54,17 @@
.card.border-card { .card.border-card {
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
} }
.card.drag-card { .card.drag-card {
border: 1px solid #DDD; border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
border-radius: 4px; border-radius: 4px;
display: flex; display: flex;
padding: 0 0 0 ($-s + 28px); padding: 0 0 0 (vars.$s + 28px);
margin: $-s 0; margin: vars.$s 0;
position: relative; position: relative;
.drag-card-action { .drag-card-action {
cursor: pointer; cursor: pointer;
@ -73,30 +76,30 @@
justify-content: center; justify-content: center;
width: 28px; width: 28px;
flex-grow: 0; flex-grow: 0;
padding: 0 $-xs; padding: 0 vars.$xs;
&:hover { &:hover {
@include lightDark(background-color, #eee, #2d2d2d); @include mixins.lightDark(background-color, #eee, #2d2d2d);
} }
.svg-icon { .svg-icon {
margin-inline-end: 0px; margin-inline-end: 0px;
} }
} }
.outline input { .outline input {
margin: $-s 0; margin: vars.$s 0;
width: 100%; width: 100%;
} }
.outline { .outline {
position: relative; position: relative;
} }
.handle { .handle {
@include lightDark(background-color, #eee, #2d2d2d); @include mixins.lightDark(background-color, #eee, #2d2d2d);
left: 0; left: 0;
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
> div { > div {
padding: 0 $-s; padding: 0 vars.$s;
max-width: 80%; max-width: 80%;
flex: 1; flex: 1;
} }
@ -106,17 +109,17 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #ddd; border: 1px solid #ddd;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
margin-bottom: $-l; margin-bottom: vars.$l;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
min-width: 100px; min-width: 100px;
color: $text-dark; color: vars.$text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms; transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover { &:hover {
color: $text-dark; color: vars.$text-dark;
text-decoration: none; text-decoration: none;
@include lightDark(box-shadow, $bs-card, $bs-card-dark); @include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
} }
h2 { h2 {
width: 100%; width: 100%;
@ -134,7 +137,7 @@
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.grid-card-content, .grid-card-footer { .grid-card-content, .grid-card-footer {
padding: $-l; padding: vars.$l;
} }
.grid-card-content + .grid-card-footer { .grid-card-content + .grid-card-footer {
padding-top: 0; padding-top: 0;
@ -149,10 +152,10 @@
} }
.content-wrap.card { .content-wrap.card {
padding: $-m $-xxl; padding: vars.$m vars.$xxl;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
margin-bottom: $-l; margin-bottom: vars.$l;
overflow: initial; overflow: initial;
min-height: 60vh; min-height: 60vh;
border-radius: 8px; border-radius: 8px;
@ -163,26 +166,26 @@
width: 100%; width: 100%;
} }
} }
@include smaller-than($xxl) { @include mixins.smaller-than(vars.$bp-xxl) {
.content-wrap.card { .content-wrap.card {
padding: $-m $-xl; padding: vars.$m vars.$xl;
} }
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.content-wrap.card { .content-wrap.card {
padding: $-m $-l; padding: vars.$m vars.$l;
} }
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
.content-wrap.card { .content-wrap.card {
padding: $-m $-m; padding: vars.$m vars.$m;
} }
} }
.sub-card { .sub-card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
border: 1.5px solid; border: 1.5px solid;
@include lightDark(border-color, #E2E2E2, #444); @include mixins.lightDark(border-color, #E2E2E2, #444);
border-radius: 4px; border-radius: 4px;
} }
@ -194,7 +197,7 @@
} }
.fade-in-when-active { .fade-in-when-active {
@include lightDark(opacity, 0.6, 0.7); @include mixins.lightDark(opacity, 0.6, 0.7);
transition: opacity ease-in-out 120ms; transition: opacity ease-in-out 120ms;
&:hover, &:focus-within { &:hover, &:focus-within {
opacity: 1 !important; opacity: 1 !important;
@ -209,29 +212,29 @@
*/ */
.tag-item { .tag-item {
display: inline-flex; display: inline-flex;
margin-bottom: $-xs; margin-bottom: vars.$xs;
margin-inline-end: $-xs; margin-inline-end: vars.$xs;
border-radius: 4px; border-radius: 4px;
border: 1px solid; border: 1px solid;
overflow: hidden; overflow: hidden;
font-size: 0.85em; font-size: 0.85em;
@include lightDark(border-color, #CCC, #666); @include mixins.lightDark(border-color, #CCC, #666);
a, span, a:hover, a:active { a, span, a:hover, a:active {
padding: 4px 8px; padding: 4px 8px;
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8)); @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
transition: background-color ease-in-out 80ms; transition: background-color ease-in-out 80ms;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
@include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3)); @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
} }
svg { svg {
@include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)); @include mixins.lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
} }
.tag-value { .tag-value {
border-inline-start: 1px solid; border-inline-start: 1px solid;
@include lightDark(border-color, #DDD, #666); @include mixins.lightDark(border-color, #DDD, #666);
@include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)) @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
} }
} }
@ -253,7 +256,7 @@
.api-method { .api-method {
font-size: 0.75rem; font-size: 0.75rem;
background-color: #888; background-color: #888;
padding: $-xs; padding: vars.$xs;
line-height: 1.3; line-height: 1.3;
opacity: 0.7; opacity: 0.7;
vertical-align: top; vertical-align: top;
@ -271,7 +274,7 @@
.sticky-sidebar { .sticky-sidebar {
position: sticky; position: sticky;
top: $-m; top: vars.$m;
max-height: calc(100vh - #{$-m}); max-height: calc(100vh - #{vars.$m});
overflow-y: auto; overflow-y: auto;
} }

33
resources/sass/_buttons.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
button { button {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -8,9 +11,9 @@ button {
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4em; line-height: 1.4em;
padding: $-xs*1.3 $-m; padding: vars.$xs*1.3 vars.$m;
margin-top: $-xs; margin-top: vars.$xs;
margin-bottom: $-xs; margin-bottom: vars.$xs;
display: inline-block; display: inline-block;
font-weight: 400; font-weight: 400;
outline: 0; outline: 0;
@ -30,12 +33,12 @@ button {
color: #FFFFFF; color: #FFFFFF;
} }
&:hover { &:hover {
@include lightDark(box-shadow, $bs-light, $bs-dark); @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
filter: brightness(110%); filter: brightness(110%);
} }
&:focus { &:focus {
outline: 1px dotted currentColor; outline: 1px dotted currentColor;
outline-offset: -$-xs; outline-offset: -(vars.$xs);
box-shadow: none; box-shadow: none;
filter: brightness(90%); filter: brightness(90%);
} }
@ -46,16 +49,16 @@ button {
.button.outline { .button.outline {
background-color: transparent; background-color: transparent;
@include lightDark(color, #666, #AAA); @include mixins.lightDark(color, #666, #AAA);
fill: currentColor; fill: currentColor;
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #CCC, #666); @include mixins.lightDark(border-color, #CCC, #666);
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@include lightDark(color, #444, #BBB); @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC; border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2; background-color: #F2F2F2;
@include lightDark(background-color, #f8f8f8, #444); @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none; filter: none;
} }
&:active { &:active {
@ -67,12 +70,12 @@ button {
} }
.button + .button { .button + .button {
margin-inline-start: $-s; margin-inline-start: vars.$s;
} }
.button.small { .button.small {
font-size: 0.75rem; font-size: 0.75rem;
padding: $-xs*1.2 $-s; padding: vars.$xs*1.2 vars.$s;
} }
.text-button { .text-button {
@ -119,22 +122,22 @@ button {
.icon-button:hover { .icon-button:hover {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px; border-radius: 4px;
@include lightDark(border-color, #DDD, #444); @include mixins.lightDark(border-color, #DDD, #444);
cursor: pointer; cursor: pointer;
} }
.button.svg { .button.svg {
display: flex; display: flex;
align-items: center; align-items: center;
padding: $-s $-m; padding: vars.$s vars.$m;
padding-bottom: ($-s - 2px); padding-bottom: (vars.$s - 2px);
width: 100%; width: 100%;
svg { svg {
display: inline-block; display: inline-block;
width: 24px; width: 24px;
height: 24px; height: 24px;
bottom: auto; bottom: auto;
margin-inline-end: $-m; margin-inline-end: vars.$m;
} }
} }

11
resources/sass/_codemirror.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
/** /**
* Custom CodeMirror BookStack overrides * Custom CodeMirror BookStack overrides
*/ */
@ -6,7 +9,7 @@
font-size: 12px; font-size: 12px;
border: 1px solid #ddd; border: 1px solid #ddd;
line-height: 1.4; line-height: 1.4;
margin-bottom: $-l; margin-bottom: vars.$l;
} }
.page-content .cm-editor, .page-content .cm-editor,
@ -42,9 +45,9 @@
background-color: #EEE; background-color: #EEE;
border: 1px solid #DDD; border: 1px solid #DDD;
border-start-end-radius: 4px; border-start-end-radius: 4px;
@include lightDark(background-color, #eee, #333); @include mixins.lightDark(background-color, #eee, #333);
@include lightDark(border-color, #ddd, #444); @include mixins.lightDark(border-color, #ddd, #444);
@include lightDark(color, #444, #888); @include mixins.lightDark(color, #444, #888);
line-height: 0; line-height: 0;
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;

8
resources/sass/_colors.scss
View File

@ -1,3 +1,5 @@
@use "mixins";
/** /**
* Background colors * Background colors
*/ */
@ -7,7 +9,7 @@
} }
.primary-background-light { .primary-background-light {
background-color: var(--color-primary-light); background-color: var(--color-primary-light);
@include whenDark { @include mixins.whenDark {
background: #000; background: #000;
.text-link { .text-link {
color: #AAA !important; color: #AAA !important;
@ -50,12 +52,12 @@
} }
.text-muted { .text-muted {
@include lightDark(color, #575757, #888888, true); @include mixins.lightDark(color, #575757, #888888, true);
fill: currentColor !important; fill: currentColor !important;
} }
.text-dark { .text-dark {
@include lightDark(color, #222, #ccc, true); @include mixins.lightDark(color, #222, #ccc, true);
fill: currentColor !important; fill: currentColor !important;
} }

187
resources/sass/_components.scss
View File

@ -1,16 +1,21 @@
@use "sass:math";
@use "mixins";
@use "vars";
// System wide notifications // System wide notifications
.notification { .notification {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
margin: $-xl; margin: vars.$xl;
padding: $-m $-l; padding: vars.$m vars.$l;
background-color: #FFF; background-color: #FFF;
@include lightDark(background-color, #fff, #444); @include mixins.lightDark(background-color, #fff, #444);
border-radius: 4px; border-radius: 4px;
border-inline-start: 6px solid currentColor; border-inline-start: 6px solid currentColor;
box-shadow: $bs-large; box-shadow: vars.$bs-large;
z-index: 999999; z-index: 999999;
cursor: pointer; cursor: pointer;
max-width: 360px; max-width: 360px;
@ -28,20 +33,20 @@
svg { svg {
width: 2.8rem; width: 2.8rem;
height: 2.8rem; height: 2.8rem;
padding-inline-end: $-s; padding-inline-end: vars.$s;
fill: currentColor; fill: currentColor;
} }
.dismiss { .dismiss {
margin-top: -8px; margin-top: -8px;
svg { svg {
height: 1.0rem; height: 1.0rem;
@include lightDark(color, #444, #888); @include mixins.lightDark(color, #444, #888);
} }
} }
span { span {
vertical-align: middle; vertical-align: middle;
line-height: 1.3; line-height: 1.3;
@include whenDark { @include mixins.whenDark {
color: #BBB; color: #BBB;
} }
} }
@ -78,12 +83,12 @@
transform: rotate(90deg); transform: rotate(90deg);
} }
svg[data-icon="caret-right"] + * { svg[data-icon="caret-right"] + * {
margin-inline-start: $-xxs; margin-inline-start: vars.$xxs;
} }
} }
[overlay], .popup-background { [overlay], .popup-background {
@include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
position: fixed; position: fixed;
z-index: 95536; z-index: 95536;
width: 100%; width: 100%;
@ -104,7 +109,7 @@
} }
.popup-body { .popup-body {
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
max-height: 90%; max-height: 90%;
max-width: 1200px; max-width: 1200px;
width: 90%; width: 90%;
@ -144,7 +149,7 @@
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
color: #FFF; color: #FFF;
padding: $-xs $-m; padding: vars.$xs vars.$m;
cursor: pointer; cursor: pointer;
} }
@ -161,7 +166,7 @@
background-color: var(--color-primary-light); background-color: var(--color-primary-light);
min-height: 41px; min-height: 41px;
button { button {
padding: 10px $-m; padding: 10px vars.$m;
} }
} }
@ -183,7 +188,7 @@
.popup-title { .popup-title {
color: #FFF; color: #FFF;
margin-inline-end: auto; margin-inline-end: auto;
padding: 8px $-m; padding: 8px vars.$m;
} }
&.flex-container-row { &.flex-container-row {
display: flex !important; display: flex !important;
@ -226,7 +231,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.dropzone-landing-area { .dropzone-landing-area {
background-color: var(--color-primary-light); background-color: var(--color-primary-light);
padding: $-m $-l; padding: vars.$m vars.$l;
width: 100%; width: 100%;
border: 1px dashed var(--color-primary); border: 1px dashed var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
@ -275,8 +280,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: flex; display: flex;
margin: 1rem; margin: 1rem;
flex-direction: row; flex-direction: row;
@include lightDark(background, #FFF, #444); @include mixins.lightDark(background, #FFF, #444);
box-shadow: $bs-large; box-shadow: vars.$bs-large;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
padding-bottom: 3px; padding-bottom: 3px;
@ -354,7 +359,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 5; z-index: 5;
@include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85)); @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
} }
.image-manager-filter-bar-bg { .image-manager-filter-bar-bg {
position: absolute; position: absolute;
@ -367,16 +372,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.image-manager-filters { .image-manager-filters {
box-shadow: $bs-med; box-shadow: vars.$bs-med;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border-bottom: 0 !important; border-bottom: 0 !important;
@include whenDark { @include mixins.whenDark {
border: 1px solid #000 !important; border: 1px solid #000 !important;
} }
button { button {
line-height: 0; line-height: 0;
@include lightDark(background-color, #FFF, #333); @include mixins.lightDark(background-color, #FFF, #333);
} }
svg { svg {
margin: 0; margin: 0;
@ -404,7 +409,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
aspect-ratio: 1; aspect-ratio: 1;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
transition: all linear 80ms; transition: all linear 80ms;
overflow: hidden; overflow: hidden;
&.selected { &.selected {
@ -441,7 +446,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
&:focus .image-meta { &:focus .image-meta {
opacity: 1; opacity: 1;
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.image-meta { .image-meta {
display: none; display: none;
} }
@ -450,7 +455,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.image-manager .load-more { .image-manager .load-more {
text-align: center; text-align: center;
padding: $-s $-m; padding: vars.$s vars.$m;
clear: both; clear: both;
.loading-container { .loading-container {
margin: 0; margin: 0;
@ -467,7 +472,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.image-manager-warning { .image-manager-warning {
@include lightDark(background, #FFF, #333); @include mixins.lightDark(background, #FFF, #333);
color: var(--color-warning); color: var(--color-warning);
font-weight: bold; font-weight: bold;
border-inline: 3px solid var(--color-warning); border-inline: 3px solid var(--color-warning);
@ -479,16 +484,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border-inline-start: 1px solid #DDD; border-inline-start: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
.inner { .inner {
min-height: auto; min-height: auto;
padding: $-m; padding: vars.$m;
} }
.image-manager-viewer img { .image-manager-viewer img {
max-width: 100%; max-width: 100%;
max-height: 180px; max-height: 180px;
display: block; display: block;
margin: 0 auto $-m auto; margin: 0 auto vars.$m auto;
box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3); box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
} }
.image-manager-viewer { .image-manager-viewer {
@ -501,7 +506,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
} }
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.image-manager-sidebar { .image-manager-sidebar {
border-inline-start: 0; border-inline-start: 0;
} }
@ -522,7 +527,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.tab-container.bordered [role="tablist"] button[role="tab"] { .tab-container.bordered [role="tablist"] button[role="tab"] {
border-inline-end: 1px solid #DDD; border-inline-end: 1px solid #DDD;
@include lightDark(border-inline-end-color, #DDD, #000); @include mixins.lightDark(border-inline-end-color, #DDD, #000);
&:last-child { &:last-child {
border-inline-end: none; border-inline-end: none;
} }
@ -534,14 +539,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
justify-items: start; justify-items: start;
text-align: start; text-align: start;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #444); @include mixins.lightDark(border-color, #ddd, #444);
margin-bottom: $-m; margin-bottom: vars.$m;
} }
.tab-container [role="tablist"] button[role="tab"] { .tab-container [role="tablist"] button[role="tab"] {
display: inline-block; display: inline-block;
padding: $-s; padding: vars.$s;
@include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5)); @include mixins.lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
margin-bottom: -1px; margin-bottom: -1px;
@ -551,8 +556,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
outline: 0 !important; outline: 0 !important;
} }
&:hover, &:focus { &:hover, &:focus {
@include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8)); @include mixins.lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
@include lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2)); @include mixins.lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
} }
&:focus { &:focus {
outline: 1px dotted var(--color-primary); outline: 1px dotted var(--color-primary);
@ -562,7 +567,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.tab-container [role="tablist"].controls-card { .tab-container [role="tablist"].controls-card {
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; border-bottom: 0;
padding: 0 $-xs; padding: 0 vars.$xs;
} }
.image-picker .none { .image-picker .none {
@ -583,16 +588,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.code-editor .lang-options button { .code-editor .lang-options button {
display: block; display: block;
padding: $-xs $-m; padding: vars.$xs vars.$m;
border-bottom: 1px solid; border-bottom: 1px solid;
@include lightDark(color, #333, #AAA); @include mixins.lightDark(color, #333, #AAA);
@include lightDark(border-bottom-color, #EEE, #000); @include mixins.lightDark(border-bottom-color, #EEE, #000);
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-family: var(--font-code); font-family: var(--font-code);
font-size: 0.7rem; font-size: 0.7rem;
padding-left: 24px + $-xs; padding-left: 24px + vars.$xs;
&:hover, &.active { &:hover, &.active {
background-color: var(--color-primary-light); background-color: var(--color-primary-light);
color: var(--color-primary); color: var(--color-primary);
@ -633,7 +638,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
background-color: var(--color-primary-light); background-color: var(--color-primary-light);
width: 100%; width: 100%;
color: var(--color-primary); color: var(--color-primary);
padding: $-xxs $-s; padding: vars.$xxs vars.$s;
margin-bottom: 0; margin-bottom: 0;
} }
@ -648,7 +653,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border-radius: 0; border-radius: 0;
border: 0; border: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
padding: $-xs $-s; padding: vars.$xs vars.$s;
height: auto; height: auto;
} }
@ -667,7 +672,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 80vh; height: 80vh;
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
.code-editor .lang-options { .code-editor .lang-options {
display: none; display: none;
} }
@ -680,21 +685,21 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.comments-container { .comments-container {
padding-inline: $-xl; padding-inline: vars.$xl;
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
padding-inline: $-xs; padding-inline: vars.$xs;
} }
} }
.comment-box { .comment-box {
border-radius: 4px; border-radius: 4px;
border: 1px solid #DDD; border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
.content { .content {
font-size: 0.666em; font-size: 0.666em;
padding: $-xs $-s; padding: vars.$xs vars.$s;
p, ul, ol { p, ul, ol {
font-size: $fs-m; font-size: vars.$fs-m;
margin: .5em 0; margin: .5em 0;
} }
} }
@ -708,7 +713,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.actions button:focus { .actions button:focus {
outline: 1px dotted var(--color-primary); outline: 1px dotted var(--color-primary);
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.actions { .actions {
opacity: 1; opacity: 1;
} }
@ -717,8 +722,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.comment-box .header { .comment-box .header {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
padding: $-xs $-s; padding: vars.$xs vars.$s;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
a { a {
color: inherit; color: inherit;
} }
@ -735,10 +740,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.comment-thread-indicator { .comment-thread-indicator {
border-inline-start: 3px dotted #DDD; border-inline-start: 3px dotted #DDD;
@include lightDark(border-color, #DDD, #444); @include mixins.lightDark(border-color, #DDD, #444);
margin-inline-start: $-xs; margin-inline-start: vars.$xs;
width: $-l; width: vars.$l;
height: calc(100% - $-m); height: calc(100% - vars.$m);
} }
.comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator { .comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
@ -748,7 +753,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
.comment-reply { .comment-reply {
display: none; display: none;
margin: 0 !important; margin: 0 !important;
margin-bottom: -$-xxs !important; margin-bottom: -(vars.$xxs) !important;
} }
.comment-branch .comment-branch .comment-branch .comment-branch .comment-reply { .comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
@ -760,17 +765,17 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
font-size: 0.8rem; font-size: 0.8rem;
} }
.header { .header {
padding: $-xs; padding: vars.$xs;
} }
.right-meta { .right-meta {
display: none; display: none;
} }
.content { .content {
padding: $-xs $-s; padding: vars.$xs vars.$s;
} }
} }
.comment-container-compact .comment-thread-indicator { .comment-container-compact .comment-thread-indicator {
width: $-m; width: vars.$m;
} }
#tag-manager .drag-card { #tag-manager .drag-card {
@ -792,15 +797,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-inline-start: 1px solid; border-inline-start: 1px solid;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
} }
.template-item-actions button { .template-item-actions button {
cursor: pointer; cursor: pointer;
flex: 1; flex: 1;
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
border: 0; border: 0;
border-top: 1px solid; border-top: 1px solid;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
} }
.template-item-actions button svg { .template-item-actions button svg {
margin: 0; margin: 0;
@ -818,7 +823,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
line-height: normal; line-height: normal;
padding: $-xs; padding: vars.$xs;
&:hover { &:hover {
border-color: #DDD; border-color: #DDD;
} }
@ -828,7 +833,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.dropdown-search-toggle-select { .dropdown-search-toggle-select {
display: flex; display: flex;
gap: $-s; gap: vars.$s;
line-height: normal; line-height: normal;
.svg-icon { .svg-icon {
height: 26px; height: 26px;
@ -862,7 +867,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.dropdown-search-dropdown { .dropdown-search-dropdown {
box-shadow: $bs-med; box-shadow: vars.$bs-med;
overflow: hidden; overflow: hidden;
min-height: 100px; min-height: 100px;
width: 240px; width: 240px;
@ -871,16 +876,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
z-index: 80; z-index: 80;
right: 0; right: 0;
top: 0; top: 0;
margin-top: $-m; margin-top: vars.$m;
@include rtl { @include mixins.rtl {
right: auto; right: auto;
left: -$-m; left: -(vars.$m);
} }
.dropdown-search-search .svg-icon { .dropdown-search-search .svg-icon {
position: absolute; position: absolute;
left: $-s; left: vars.$s;
@include rtl { @include mixins.rtl {
right: $-s; right: vars.$s;
left: auto; left: auto;
} }
top: 11px; top: 11px;
@ -893,14 +898,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
text-align: start; text-align: start;
} }
.dropdown-search-item { .dropdown-search-item {
padding: $-s $-m; padding: vars.$s vars.$m;
&:hover,&:focus { &:hover,&:focus {
background-color: #F2F2F2; background-color: #F2F2F2;
text-decoration: none; text-decoration: none;
} }
} }
input, input:focus { input, input:focus {
padding-inline-start: $-xl; padding-inline-start: vars.$xl;
border-radius: 0; border-radius: 0;
border: 0; border: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@ -910,9 +915,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
} }
@include smaller-than($l) { @include mixins.smaller-than(vars.$bp-l) {
.dropdown-search-dropdown { .dropdown-search-dropdown {
inset-inline: $-m auto; inset-inline: vars.$m auto;
} }
.dropdown-search-dropdown .dropdown-search-list { .dropdown-search-dropdown .dropdown-search-list {
max-height: 240px; max-height: 240px;
@ -924,13 +929,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.item-list-row { .item-list-row {
border: 1.5px solid; border: 1.5px solid;
@include lightDark(border-color, #E2E2E2, #444); @include mixins.lightDark(border-color, #E2E2E2, #444);
border-bottom-width: 0; border-bottom-width: 0;
label { label {
padding-bottom: 0; padding-bottom: 0;
} }
&:hover { &:hover {
@include lightDark(background-color, #F6F6F6, #333); @include mixins.lightDark(background-color, #F6F6F6, #333);
} }
} }
.item-list-row:first-child { .item-list-row:first-child {
@ -980,7 +985,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
} }
.shortcut-hint { .shortcut-hint {
position: fixed; position: fixed;
padding: $-xxs $-xxs; padding: vars.$xxs vars.$xxs;
font-size: .85rem; font-size: .85rem;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
@ -996,8 +1001,8 @@ $btt-size: 40px;
.back-to-top { .back-to-top {
background-color: var(--color-primary); background-color: var(--color-primary);
position: fixed; position: fixed;
bottom: $-m; bottom: vars.$m;
right: $-l; right: vars.$l;
padding: 5px 7px; padding: 5px 7px;
cursor: pointer; cursor: pointer;
color: #FFF; color: #FFF;
@ -1036,17 +1041,17 @@ $btt-size: 40px;
max-height: 280px; max-height: 280px;
overflow-y: scroll; overflow-y: scroll;
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
border-radius: 3px; border-radius: 3px;
min-height: 20px; min-height: 20px;
@include lightDark(background-color, #EEE, #000); @include mixins.lightDark(background-color, #EEE, #000);
} }
.scroll-box-item { .scroll-box-item {
border-bottom: 1px solid; border-bottom: 1px solid;
border-top: 1px solid; border-top: 1px solid;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
margin-top: -1px; margin-top: -1px;
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
padding: 1px; padding: 1px;
@ -1055,7 +1060,7 @@ $btt-size: 40px;
} }
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@include lightDark(background-color, #f8f8f8, #333); @include mixins.lightDark(background-color, #f8f8f8, #333);
} }
.handle { .handle {
color: #AAA; color: #AAA;
@ -1068,13 +1073,13 @@ $btt-size: 40px;
margin: 0; margin: 0;
} }
> * { > * {
padding: $-xs $-m; padding: vars.$xs vars.$m;
} }
.handle + * { .handle + * {
padding-left: 0; padding-left: 0;
} }
&:hover .handle { &:hover .handle {
@include lightDark(color, #444, #FFF); @include mixins.lightDark(color, #444, #FFF);
} }
&:hover button { &:hover button {
opacity: 1; opacity: 1;
@ -1087,8 +1092,8 @@ $btt-size: 40px;
input.scroll-box-search, .scroll-box-header-item { input.scroll-box-search, .scroll-box-header-item {
font-size: 0.8rem; font-size: 0.8rem;
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
margin-bottom: -1px; margin-bottom: -1px;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
width: 100%; width: 100%;

65
resources/sass/_content.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
/** /**
* Page Content * Page Content
* Styles specific to blocks used within page content. * Styles specific to blocks used within page content.
@ -13,14 +16,14 @@
} }
img.align-left, table.align-left, iframe.align-left, video.align-left { img.align-left, table.align-left, iframe.align-left, video.align-left {
float: left !important; float: left !important;
margin: $-xs $-m $-m 0; margin: vars.$xs vars.$m vars.$m 0;
} }
.align-right { .align-right {
text-align: right !important; text-align: right !important;
} }
img.align-right, table.align-right, iframe.align-right, video.align-right { img.align-right, table.align-right, iframe.align-right, video.align-right {
float: right !important; float: right !important;
margin: $-xs 0 $-xs $-s; margin: vars.$xs 0 vars.$xs vars.$s;
} }
.align-center { .align-center {
text-align: center; text-align: center;
@ -40,7 +43,7 @@
} }
hr { hr {
clear: both; clear: both;
margin: $-m 0; margin: vars.$m 0;
} }
table { table {
hyphens: auto; hyphens: auto;
@ -63,23 +66,23 @@
details { details {
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #555); @include mixins.lightDark(border-color, #DDD, #555);
margin-bottom: 1em; margin-bottom: 1em;
padding: $-s; padding: vars.$s;
} }
details > summary { details > summary {
margin-top: -$-s; margin-top: -(vars.$s);
margin-left: -$-s; margin-left: -(vars.$s);
margin-right: -$-s; margin-right: -(vars.$s);
margin-bottom: -$-s; margin-bottom: -(vars.$s);
font-weight: bold; font-weight: bold;
@include lightDark(background-color, #EEE, #333); @include mixins.lightDark(background-color, #EEE, #333);
padding: $-xs $-s; padding: vars.$xs vars.$s;
} }
details[open] > summary { details[open] > summary {
margin-bottom: $-s; margin-bottom: vars.$s;
border-bottom: 1px solid; border-bottom: 1px solid;
@include lightDark(border-color, #DDD, #555); @include mixins.lightDark(border-color, #DDD, #555);
} }
details > summary + * { details > summary + * {
margin-top: .2em; margin-top: .2em;
@ -138,10 +141,10 @@ body .page-content img,
border-inline-start: 3px solid #BBB; border-inline-start: 3px solid #BBB;
border-inline-end: none; border-inline-end: none;
background-color: #EEE; background-color: #EEE;
padding: $-s; padding: vars.$s;
padding-left: $-xl; padding-left: vars.$xl;
padding-inline-start: $-xl; padding-inline-start: vars.$xl;
padding-inline-end: $-s; padding-inline-end: vars.$s;
display: block; display: block;
position: relative; position: relative;
overflow: auto; overflow: auto;
@ -151,8 +154,8 @@ body .page-content img,
content: ''; content: '';
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
left: $-xs + 2px; left: vars.$xs + 2px;
inset-inline-start: $-xs + 2px; inset-inline-start: vars.$xs + 2px;
inset-inline-end: unset; inset-inline-end: unset;
top: 50%; top: 50%;
margin-top: -9px; margin-top: -9px;
@ -162,30 +165,30 @@ body .page-content img,
opacity: 0.8; opacity: 0.8;
} }
&.success { &.success {
@include lightDark(border-color, $positive, $positive-dark); @include mixins.lightDark(border-color, vars.$positive, vars.$positive-dark);
@include lightDark(background-color, #eafdeb, #122913); @include mixins.lightDark(background-color, #eafdeb, #122913);
@include lightDark(color, #063409, $positive-dark); @include mixins.lightDark(color, #063409, vars.$positive-dark);
} }
&.success:before { &.success:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
} }
&.danger { &.danger {
@include lightDark(border-color, $negative, $negative-dark); @include mixins.lightDark(border-color, vars.$negative, vars.$negative-dark);
@include lightDark(background-color, #fcdbdb, #250505); @include mixins.lightDark(background-color, #fcdbdb, #250505);
@include lightDark(color, #4d0706, $negative-dark); @include mixins.lightDark(color, #4d0706, vars.$negative-dark);
} }
&.danger:before { &.danger:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
} }
&.info { &.info {
@include lightDark(border-color, $info, $info-dark); @include mixins.lightDark(border-color, vars.$info, vars.$info-dark);
@include lightDark(background-color, #d3efff, #001825); @include mixins.lightDark(background-color, #d3efff, #001825);
@include lightDark(color, #01466c, $info-dark); @include mixins.lightDark(color, #01466c, vars.$info-dark);
} }
&.warning { &.warning {
@include lightDark(border-color, $warning, $warning-dark); @include mixins.lightDark(border-color, vars.$warning, vars.$warning-dark);
@include lightDark(background-color, #fee3d3, #30170a); @include mixins.lightDark(background-color, #fee3d3, #30170a);
@include lightDark(color, #6a2802, $warning-dark); @include mixins.lightDark(color, #6a2802, vars.$warning-dark);
} }
&.warning:before { &.warning:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");

27
resources/sass/_editor.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
// Common variables // Common variables
:root { :root {
--editor-color-primary: #206ea7; --editor-color-primary: #206ea7;
@ -262,11 +265,11 @@ body.editor-is-fullscreen {
color: #FFF; color: #FFF;
} }
.editor-modal-title { .editor-modal-title {
padding: 8px $-m; padding: 8px vars.$m;
} }
.editor-modal-close { .editor-modal-close {
color: #FFF; color: #FFF;
padding: 8px $-m; padding: 8px vars.$m;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
@ -281,7 +284,7 @@ body.editor-is-fullscreen {
} }
} }
.editor-modal-body { .editor-modal-body {
padding: $-m; padding: vars.$m;
} }
// Specific UI elements // Specific UI elements
@ -493,21 +496,21 @@ textarea.editor-form-field-input {
.editor-form-actions { .editor-form-actions {
display: flex; display: flex;
justify-content: end; justify-content: end;
gap: $-s; gap: vars.$s;
margin-top: $-m; margin-top: vars.$m;
} }
.editor-form-actions > button { .editor-form-actions > button {
display: block; display: block;
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.4em; line-height: 1.4em;
padding: $-xs*1.3 $-m; padding: vars.$xs*1.3 vars.$m;
font-weight: 400; font-weight: 400;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
box-shadow: none; box-shadow: none;
&:focus { &:focus {
outline: 1px dotted currentColor; outline: 1px dotted currentColor;
outline-offset: -$-xs; outline-offset: -(vars.$xs);
box-shadow: none; box-shadow: none;
filter: brightness(90%); filter: brightness(90%);
} }
@ -517,20 +520,20 @@ textarea.editor-form-field-input {
color: #FFF; color: #FFF;
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
&:hover { &:hover {
@include lightDark(box-shadow, $bs-light, $bs-dark); @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
filter: brightness(110%); filter: brightness(110%);
} }
} }
.editor-form-action-secondary { .editor-form-action-secondary {
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #CCC, #666); @include mixins.lightDark(border-color, #CCC, #666);
@include lightDark(color, #666, #AAA); @include mixins.lightDark(color, #666, #AAA);
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@include lightDark(color, #444, #BBB); @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC; border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2; background-color: #F2F2F2;
@include lightDark(background-color, #f8f8f8, #444); @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none; filter: none;
} }
&:active { &:active {

123
resources/sass/_forms.scss
View File

@ -1,13 +1,18 @@
@use "sass:math";
@use "mixins";
@use "vars";
.input-base { .input-base {
border-radius: 3px; border-radius: 3px;
border: 1px solid #D4D4D4; border: 1px solid #D4D4D4;
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
@include lightDark(border-color, #d4d4d4, #111); @include mixins.lightDark(border-color, #d4d4d4, #111);
@include lightDark(color, #666, #AAA); @include mixins.lightDark(color, #666, #AAA);
display: inline-block; display: inline-block;
font-size: $fs-m; font-size: vars.$fs-m;
padding: $-xs*1.8; padding: vars.$xs*1.8;
height: 40px; height: 40px;
width: 250px; width: 250px;
max-width: 100%; max-width: 100%;
@ -49,7 +54,7 @@
#markdown-editor-input { #markdown-editor-input {
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
padding: $-xs $-m; padding: vars.$xs vars.$m;
color: #444; color: #444;
border-radius: 0; border-radius: 0;
max-height: 100%; max-height: 100%;
@ -72,7 +77,7 @@
.markdown-editor-wrap { .markdown-editor-wrap {
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
position: relative; position: relative;
flex: 1; flex: 1;
min-width: 0; min-width: 0;
@ -92,11 +97,11 @@
.markdown-panel-divider { .markdown-panel-divider {
width: 2px; width: 2px;
@include lightDark(background-color, #ddd, #000); @include mixins.lightDark(background-color, #ddd, #000);
cursor: col-resize; cursor: col-resize;
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
#markdown-editor { #markdown-editor {
flex-direction: column; flex-direction: column;
} }
@ -109,7 +114,7 @@
} }
.editor-toolbar-label { .editor-toolbar-label {
float: none !important; float: none !important;
@include lightDark(border-color, #DDD, #555); @include mixins.lightDark(border-color, #DDD, #555);
display: block; display: block;
} }
.markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar + div,
@ -150,10 +155,10 @@ html.markdown-editor-display.dark-mode {
font-size: 11px; font-size: 11px;
line-height: 1.6; line-height: 1.6;
border-bottom: 1px solid #CCC; border-bottom: 1px solid #CCC;
@include lightDark(background-color, #FFF, #333); @include mixins.lightDark(background-color, #FFF, #333);
@include lightDark(border-color, #CCC, #000); @include mixins.lightDark(border-color, #CCC, #000);
flex: none; flex: none;
@include whenDark { @include mixins.whenDark {
button { button {
color: #AAA; color: #AAA;
} }
@ -161,12 +166,12 @@ html.markdown-editor-display.dark-mode {
} }
.editor-toolbar .buttons { .editor-toolbar .buttons {
font-size: $fs-m; font-size: vars.$fs-m;
.dropdown-menu { .dropdown-menu {
padding: 0; padding: 0;
} }
.toggle-switch { .toggle-switch {
margin: $-s 0; margin: vars.$s 0;
} }
} }
@ -175,18 +180,18 @@ html.markdown-editor-display.dark-mode {
width: 2rem; width: 2rem;
text-align: center; text-align: center;
border-left: 1px solid; border-left: 1px solid;
@include lightDark(border-color, #DDD, #555); @include mixins.lightDark(border-color, #DDD, #555);
svg { svg {
margin-inline-end: 0; margin-inline-end: 0;
} }
&:hover { &:hover {
@include lightDark(background-color, #DDD, #222); @include mixins.lightDark(background-color, #DDD, #222);
} }
} }
label { label {
@include lightDark(color, #666, #ddd); @include mixins.lightDark(color, #666, #ddd);
display: block; display: block;
line-height: 1.4em; line-height: 1.4em;
font-size: 0.94em; font-size: 0.94em;
@ -202,12 +207,12 @@ label.radio, label.checkbox {
font-weight: 400; font-weight: 400;
user-select: none; user-select: none;
input[type="radio"], input[type="checkbox"] { input[type="radio"], input[type="checkbox"] {
margin-inline-end: $-xs; margin-inline-end: vars.$xs;
} }
} }
label.inline.checkbox { label.inline.checkbox {
margin-inline-end: $-m; margin-inline-end: vars.$m;
} }
label + p.small { label + p.small {
@ -218,7 +223,7 @@ table.form-table {
max-width: 100%; max-width: 100%;
td { td {
overflow: hidden; overflow: hidden;
padding: math.div($-xxs, 2) 0; padding: math.div(vars.$xxs, 2) 0;
} }
} }
@ -236,7 +241,7 @@ select {
background-position: calc(100% - 20px) 64%; background-position: calc(100% - 20px) 64%;
background-repeat: no-repeat; background-repeat: no-repeat;
@include rtl { @include mixins.rtl {
background-position: 20px 70%; background-position: 20px 70%;
} }
} }
@ -257,9 +262,9 @@ input[type=color] {
.toggle-switch { .toggle-switch {
user-select: none; user-select: none;
display: inline-grid; display: inline-grid;
grid-template-columns: (16px + $-s) 1fr; grid-template-columns: (16px + vars.$s) 1fr;
align-items: center; align-items: center;
margin: $-m 0; margin: vars.$m 0;
.custom-checkbox { .custom-checkbox {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -302,7 +307,7 @@ input[type=color] {
} }
.toggle-switch-list { .toggle-switch-list {
.toggle-switch { .toggle-switch {
margin: $-xs 0; margin: vars.$xs 0;
} }
&.compact .toggle-switch { &.compact .toggle-switch {
margin: 1px 0; margin: 1px 0;
@ -310,18 +315,18 @@ input[type=color] {
} }
.form-group { .form-group {
margin-bottom: $-s; margin-bottom: vars.$s;
} }
.setting-list > div { .setting-list > div {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
padding: $-xl 0; padding: vars.$xl 0;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
} }
.setting-list-label { .setting-list-label {
@include lightDark(color, #222, #DDD); @include mixins.lightDark(color, #222, #DDD);
color: #222; color: #222;
font-size: 1rem; font-size: 1rem;
} }
@ -329,7 +334,7 @@ input[type=color] {
margin-bottom: 0; margin-bottom: 0;
} }
.setting-list-label + .grid { .setting-list-label + .grid {
margin-top: $-m; margin-top: vars.$m;
} }
.setting-list .grid, .stretch-inputs { .setting-list .grid, .stretch-inputs {
@ -349,19 +354,19 @@ input[type=color] {
.form-group { .form-group {
div.text-pos, div.text-neg, p.text-post, p.text-neg { div.text-pos, div.text-neg, p.text-post, p.text-neg {
padding: $-xs 0; padding: vars.$xs 0;
} }
} }
.form-group.collapsible { .form-group.collapsible {
padding: 0 $-m; padding: 0 vars.$m;
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #000); @include mixins.lightDark(border-color, #DDD, #000);
border-radius: 4px; border-radius: 4px;
.collapse-title { .collapse-title {
margin-inline-start: -$-m; margin-inline-start: -(vars.$m);
margin-inline-end: -$-m; margin-inline-end: -(vars.$m);
padding: $-s $-m; padding: vars.$s vars.$m;
display: block; display: block;
width: calc(100% + 32px); width: calc(100% + 32px);
text-align: start; text-align: start;
@ -377,13 +382,13 @@ input[type=color] {
.collapse-title label:before { .collapse-title label:before {
display: inline-block; display: inline-block;
content: '▸'; content: '▸';
margin-inline-end: $-m; margin-inline-end: vars.$m;
transition: all ease-in-out 400ms; transition: all ease-in-out 400ms;
transform: rotate(0); transform: rotate(0);
} }
.collapse-content { .collapse-content {
display: none; display: none;
padding-bottom: $-m; padding-bottom: vars.$m;
} }
&.open .collapse-title label:before { &.open .collapse-title label:before {
transform: rotate(90deg); transform: rotate(90deg);
@ -407,7 +412,7 @@ input[type=color] {
.title-input input[type="text"] { .title-input input[type="text"] {
display: block; display: block;
width: 100%; width: 100%;
padding: $-s; padding: vars.$s;
margin-top: 0; margin-top: 0;
font-size: 2em; font-size: 2em;
height: auto; height: auto;
@ -416,15 +421,15 @@ input[type=color] {
.description-input textarea { .description-input textarea {
display: block; display: block;
width: 100%; width: 100%;
padding: $-s; padding: vars.$s;
font-size: $fs-m; font-size: vars.$fs-m;
color: #666; color: #666;
height: auto; height: auto;
} }
.description-input > .tox-tinymce { .description-input > .tox-tinymce {
border: 1px solid #DDD !important; border: 1px solid #DDD !important;
@include lightDark(border-color, #DDD !important, #000 !important); @include mixins.lightDark(border-color, #DDD !important, #000 !important);
border-radius: 3px; border-radius: 3px;
.tox-toolbar__primary { .tox-toolbar__primary {
justify-content: end; justify-content: end;
@ -437,7 +442,7 @@ input[type=color] {
button[tabindex="-1"] { button[tabindex="-1"] {
background-color: transparent; background-color: transparent;
border: none; border: none;
@include lightDark(color, #666, #AAA); @include mixins.lightDark(color, #666, #AAA);
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -446,8 +451,8 @@ input[type=color] {
} }
input { input {
display: block; display: block;
padding: $-xs * 1.5; padding: vars.$xs * 1.5;
padding-inline-start: $-l + 4px; padding-inline-start: vars.$l + 4px;
width: 300px; width: 300px;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
@ -466,10 +471,10 @@ input[type=color] {
height: 38px; height: 38px;
z-index: -1; z-index: -1;
&.floating { &.floating {
box-shadow: $bs-med; box-shadow: vars.$bs-med;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@include whenDark { @include mixins.whenDark {
border: 1px solid #000; border: 1px solid #000;
} }
} }
@ -477,7 +482,7 @@ input[type=color] {
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
border: 1px solid #ddd; border: 1px solid #ddd;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
margin-inline-start: -1px; margin-inline-start: -1px;
&:last-child { &:last-child {
border-inline-end: 0; border-inline-end: 0;
@ -486,7 +491,7 @@ input[type=color] {
input { input {
border: 0; border: 0;
flex: 5; flex: 5;
padding: $-xs $-s; padding: vars.$xs vars.$s;
&:focus, &:active { &:focus, &:active {
outline: 1px dotted var(--color-primary); outline: 1px dotted var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
@ -498,8 +503,8 @@ input[type=color] {
width: 48px; width: 48px;
border-inline-start: 1px solid #DDD; border-inline-start: 1px solid #DDD;
background-color: #FFF; background-color: #FFF;
@include lightDark(background-color, #FFF, #333); @include mixins.lightDark(background-color, #FFF, #333);
@include lightDark(color, #444, #AAA); @include mixins.lightDark(color, #444, #AAA);
} }
button:focus { button:focus {
outline: 1px dotted var(--color-primary); outline: 1px dotted var(--color-primary);
@ -508,7 +513,7 @@ input[type=color] {
svg { svg {
margin: 0; margin: 0;
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
width: 180px; width: 180px;
} }
} }
@ -548,30 +553,30 @@ input[type=color] {
.custom-simple-file-input { .custom-simple-file-input {
max-width: 100%; max-width: 100%;
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #666); @include mixins.lightDark(border-color, #DDD, #666);
border-radius: 4px; border-radius: 4px;
padding: $-s $-m; padding: vars.$s vars.$m;
} }
.custom-simple-file-input::file-selector-button { .custom-simple-file-input::file-selector-button {
background-color: transparent; background-color: transparent;
text-decoration: none; text-decoration: none;
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.4em; line-height: 1.4em;
padding: $-xs $-s; padding: vars.$xs vars.$s;
border: 1px solid; border: 1px solid;
font-weight: 400; font-weight: 400;
outline: 0; outline: 0;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
margin-right: $-m; margin-right: vars.$m;
@include lightDark(color, #666, #AAA); @include mixins.lightDark(color, #666, #AAA);
@include lightDark(border-color, #CCC, #666); @include mixins.lightDark(border-color, #CCC, #666);
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
@include lightDark(color, #444, #BBB); @include mixins.lightDark(color, #444, #BBB);
border: 1px solid #CCC; border: 1px solid #CCC;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #F2F2F2; background-color: #F2F2F2;
@include lightDark(background-color, #f8f8f8, #444); @include mixins.lightDark(background-color, #f8f8f8, #444);
filter: none; filter: none;
} }
&:active { &:active {

97
resources/sass/_header.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
/** /**
* Includes the main navigation header and the faded toolbar. * Includes the main navigation header and the faded toolbar.
*/ */
@ -6,7 +9,7 @@ header.grid {
grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr); grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
} }
@include smaller-than($l) { @include mixins.smaller-than(vars.$bp-l) {
header.grid { header.grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-row-gap: 0; grid-row-gap: 0;
@ -20,8 +23,8 @@ header {
top: 0; top: 0;
color: rgb(250, 250, 250); color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
box-shadow: $bs-card; box-shadow: vars.$bs-card;
@include lightDark(border-bottom-color, #DDD, #000); @include mixins.lightDark(border-bottom-color, #DDD, #000);
.header-links { .header-links {
display: flex; display: flex;
align-items: center; align-items: center;
@ -33,7 +36,7 @@ header {
} }
.links a { .links a {
display: inline-block; display: inline-block;
padding: 10px $-m; padding: 10px vars.$m;
color: #FFF; color: #FFF;
border-radius: 3px; border-radius: 3px;
} }
@ -42,7 +45,7 @@ header {
background-color: rgba(255, 255, 255, .15); background-color: rgba(255, 255, 255, .15);
} }
.dropdown-container { .dropdown-container {
padding-inline-start: $-m; padding-inline-start: vars.$m;
padding-inline-end: 0; padding-inline-end: 0;
} }
.avatar, .user-name { .avatar, .user-name {
@ -58,12 +61,12 @@ header {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
padding: $-s; padding: vars.$s;
margin: 0 (-$-s); margin: 0 (-(vars.$s));
border-radius: 3px; border-radius: 3px;
gap: $-xs; gap: vars.$xs;
> span { > span {
padding-inline-start: $-xs; padding-inline-start: vars.$xs;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
} }
@ -75,8 +78,8 @@ header {
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
} }
@include between($l, $xl) { @include mixins.between(vars.$bp-l, vars.$bp-xl) {
padding-inline-start: $-xs; padding-inline-start: vars.$xs;
.name { .name {
display: none; display: none;
} }
@ -98,7 +101,7 @@ header .search-box {
color: #EEE; color: #EEE;
z-index: 2; z-index: 2;
height: auto; height: auto;
padding: $-xs*1.5; padding: vars.$xs*1.5;
padding-inline-start: 40px; padding-inline-start: 40px;
&:focus { &:focus {
outline: none; outline: none;
@ -109,7 +112,7 @@ header .search-box {
color: #FFF; color: #FFF;
opacity: 0.6; opacity: 0.6;
} }
@include between($l, $xl) { @include mixins.between(vars.$bp-l, vars.$bp-xl) {
max-width: 200px; max-width: 200px;
} }
&:focus-within #header-search-box-button { &:focus-within #header-search-box-button {
@ -122,7 +125,7 @@ header .search-box {
top: 10px; top: 10px;
color: #FFF; color: #FFF;
opacity: 0.6; opacity: 0.6;
@include lightDark(color, rgba(255, 255, 255, 0.8), #AAA); @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
svg { svg {
margin-inline-end: 0; margin-inline-end: 0;
} }
@ -131,15 +134,15 @@ header .search-box {
.global-search-suggestions { .global-search-suggestions {
display: none; display: none;
position: absolute; position: absolute;
top: -$-s; top: -(vars.$s);
left: 0; left: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
margin-left: -$-xxl; margin-left: -(vars.$xxl);
margin-right: -$-xxl; margin-right: -(vars.$xxl);
padding-top: 56px; padding-top: 56px;
border-radius: 3px; border-radius: 3px;
box-shadow: $bs-hover; box-shadow: vars.$bs-hover;
transform-origin: top center; transform-origin: top center;
opacity: .5; opacity: .5;
transform: scale(0.9); transform: scale(0.9);
@ -166,19 +169,19 @@ header .search-box.search-active:focus-within {
display: block; display: block;
} }
input { input {
@include lightDark(background-color, #EEE, #333); @include mixins.lightDark(background-color, #EEE, #333);
@include lightDark(border-color, #DDD, #111); @include mixins.lightDark(border-color, #DDD, #111);
} }
#header-search-box-button, input { #header-search-box-button, input {
@include lightDark(color, #444, #AAA); @include mixins.lightDark(color, #444, #AAA);
} }
} }
.logo { .logo {
display: inline-flex; display: inline-flex;
padding: ($-s - 6px) $-s; padding: (vars.$s - 6px) vars.$s;
margin: 6px (-$-s); margin: 6px (-(vars.$s));
gap: $-s; gap: vars.$s;
align-items: center; align-items: center;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
@ -204,7 +207,7 @@ header .search-box.search-active:focus-within {
font-size: 2em; font-size: 2em;
border: 2px solid rgba(255, 255, 255, 0.8); border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 4px; border-radius: 4px;
padding: 0 $-xs; padding: 0 vars.$xs;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -215,18 +218,18 @@ header .search-box.search-active:focus-within {
} }
@include smaller-than($l) { @include mixins.smaller-than(vars.$bp-l) {
header .header-links { header .header-links {
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
display: none; display: none;
z-index: 10; z-index: 10;
inset-inline-end: $-m; inset-inline-end: vars.$m;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
box-shadow: $bs-hover; box-shadow: vars.$bs-hover;
margin-top: $-m; margin-top: vars.$m;
padding: $-xs 0; padding: vars.$xs 0;
&.show { &.show {
display: block; display: block;
} }
@ -235,14 +238,14 @@ header .search-box.search-active:focus-within {
text-align: start; text-align: start;
display: grid; display: grid;
align-items: center; align-items: center;
padding: 8px $-m; padding: 8px vars.$m;
gap: $-m; gap: vars.$m;
color: $text-dark; color: vars.$text-dark;
grid-template-columns: 16px auto; grid-template-columns: 16px auto;
line-height: 1.4; line-height: 1.4;
@include lightDark(color, $text-dark, #eee); @include mixins.lightDark(color, vars.$text-dark, #eee);
svg { svg {
margin-inline-end: $-s; margin-inline-end: vars.$s;
width: 16px; width: 16px;
} }
&:hover { &:hover {
@ -251,7 +254,7 @@ header .search-box.search-active:focus-within {
text-decoration: none; text-decoration: none;
} }
&:focus { &:focus {
@include lightDark(background-color, #eee, #333); @include mixins.lightDark(background-color, #eee, #333);
outline-color: var(--color-primary); outline-color: var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
} }
@ -280,19 +283,19 @@ header .search-box.search-active:focus-within {
z-index: 5; z-index: 5;
background-color: #FFF; background-color: #FFF;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
@include lightDark(border-bottom-color, #DDD, #333); @include mixins.lightDark(border-bottom-color, #DDD, #333);
box-shadow: $bs-card; box-shadow: vars.$bs-card;
} }
.tri-layout-mobile-tab { .tri-layout-mobile-tab {
text-align: center; text-align: center;
border-bottom: 3px solid #BBB; border-bottom: 3px solid #BBB;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
@include lightDark(border-bottom-color, #BBB, #333); @include mixins.lightDark(border-bottom-color, #BBB, #333);
&:first-child { &:first-child {
border-inline-end: 1px solid #DDD; border-inline-end: 1px solid #DDD;
@include lightDark(border-inline-end-color, #DDD, #000); @include mixins.lightDark(border-inline-end-color, #DDD, #000);
} }
&[aria-selected="true"] { &[aria-selected="true"] {
border-bottom-color: currentColor !important; border-bottom-color: currentColor !important;
@ -308,8 +311,8 @@ header .search-box.search-active:focus-within {
opacity: 0.7; opacity: 0.7;
.icon-list-item { .icon-list-item {
width: auto; width: auto;
padding-top: $-xs; padding-top: vars.$xs;
padding-bottom: $-xs; padding-bottom: vars.$xs;
} }
.separator { .separator {
display: inline-block; display: inline-block;
@ -326,9 +329,9 @@ header .search-box.search-active:focus-within {
} }
} }
@include smaller-than($l) { @include mixins.smaller-than(vars.$bp-l) {
.breadcrumbs .icon-list-item { .breadcrumbs .icon-list-item {
padding: $-xs; padding: vars.$xs;
> span + span { > span + span {
display: none; display: none;
} }
@ -355,5 +358,5 @@ header .search-box.search-active:focus-within {
.faded span.faded-text { .faded span.faded-text {
display: inline-block; display: inline-block;
padding: $-s; padding: vars.$s;
} }

7
resources/sass/_html.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
* { * {
box-sizing: border-box; box-sizing: border-box;
outline-color: var(--color-primary); outline-color: var(--color-primary);
@ -21,9 +24,9 @@ html {
} }
body { body {
font-size: $fs-m; font-size: vars.$fs-m;
line-height: 1.6; line-height: 1.6;
@include lightDark(color, #444, #AAA); @include mixins.lightDark(color, #444, #AAA);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
height: 100%; height: 100%;
display: flex; display: flex;

87
resources/sass/_layout.scss
View File

@ -1,13 +1,16 @@
@use "mixins";
@use "vars";
/** /**
* Generic content container * Generic content container
*/ */
.container { .container {
max-width: $xxl; max-width: vars.$bp-xxl;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
padding-inline-start: $-m; padding-inline-start: vars.$m;
padding-inline-end: $-m; padding-inline-end: vars.$m;
&.medium { &.medium {
max-width: 1100px; max-width: 1100px;
} }
@ -24,8 +27,8 @@
*/ */
.grid { .grid {
display: grid; display: grid;
grid-column-gap: $-l; grid-column-gap: vars.$l;
grid-row-gap: $-l; grid-row-gap: vars.$l;
> * { > * {
min-width: 0; min-width: 0;
} }
@ -42,15 +45,15 @@
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
} }
&.gap-y-xs { &.gap-y-xs {
grid-row-gap: $-xs; grid-row-gap: vars.$xs;
} }
&.gap-xl { &.gap-xl {
grid-column-gap: $-xl; grid-column-gap: vars.$xl;
grid-row-gap: $-xl; grid-row-gap: vars.$xl;
} }
&.gap-xxl { &.gap-xxl {
grid-column-gap: $-xxl; grid-column-gap: vars.$xxl;
grid-row-gap: $-xxl; grid-row-gap: vars.$xxl;
} }
&.v-center { &.v-center {
align-items: center; align-items: center;
@ -67,7 +70,7 @@
} }
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.grid.third:not(.no-break) { .grid.third:not(.no-break) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -78,8 +81,8 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.grid.gap-xl { .grid.gap-xl {
grid-column-gap: $-m; grid-column-gap: vars.$m;
grid-row-gap: $-m; grid-row-gap: vars.$m;
} }
.grid.right-focus.reverse-collapse > *:nth-child(2) { .grid.right-focus.reverse-collapse > *:nth-child(2) {
order: 0; order: 0;
@ -89,13 +92,13 @@
} }
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
.grid.third:not(.no-break) { .grid.third:not(.no-break) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@include smaller-than($xs) { @include mixins.smaller-than(vars.$bp-xs) {
.grid.half.collapse-xs { .grid.half.collapse-xs {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -287,19 +290,19 @@ body.flexbox {
.sticky-top-m { .sticky-top-m {
position: sticky; position: sticky;
top: $-m; top: vars.$m;
} }
/** /**
* Visibility * Visibility
*/ */
@each $sizeLetter, $size in $screen-sizes { @each $sizeLetter, $size in vars.$screen-sizes {
@include smaller-than($size) { @include mixins.smaller-than($size) {
.hide-under-#{$sizeLetter} { .hide-under-#{$sizeLetter} {
display: none !important; display: none !important;
} }
} }
@include larger-than($size) { @include mixins.larger-than($size) {
.hide-over-#{$sizeLetter} { .hide-over-#{$sizeLetter} {
display: none !important; display: none !important;
} }
@ -333,7 +336,7 @@ body.flexbox {
columns: 2; columns: 2;
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.dual-column-content { .dual-column-content {
columns: 1; columns: 1;
} }
@ -357,11 +360,11 @@ body.flexbox {
*/ */
.tri-layout-container { .tri-layout-container {
display: grid; display: grid;
margin-inline-start: $-xl; margin-inline-start: vars.$xl;
margin-inline-end: $-xl; margin-inline-end: vars.$xl;
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: "a b c"; grid-template-areas: "a b c";
grid-column-gap: $-xl; grid-column-gap: vars.$xl;
position: relative; position: relative;
} }
.tri-layout-sides { .tri-layout-sides {
@ -379,7 +382,7 @@ body.flexbox {
} }
.tri-layout-middle { .tri-layout-middle {
grid-area: b; grid-area: b;
padding-top: $-m; padding-top: vars.$m;
min-width: 0; min-width: 0;
z-index: 5; z-index: 5;
} }
@ -392,9 +395,9 @@ body.flexbox {
min-width: 0; min-width: 0;
} }
@include larger-than($xxl) { @include mixins.larger-than(vars.$bp-xxl) {
.tri-layout-left-contents, .tri-layout-right-contents { .tri-layout-left-contents, .tri-layout-right-contents {
padding: $-xl $-m; padding: vars.$xl vars.$m;
position: sticky; position: sticky;
top: 0; top: 0;
max-height: 100vh; max-height: 100vh;
@ -413,22 +416,22 @@ body.flexbox {
margin: 0 auto; margin: 0 auto;
} }
} }
@include between($xxl, $xxxl) { @include mixins.between(vars.$bp-xxl, vars.$bp-xxxl) {
.tri-layout-sides-content, .tri-layout-container { .tri-layout-sides-content, .tri-layout-container {
grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr; grid-template-columns: 1fr calc(940px + (2 * vars.$m)) 1fr;
} }
.tri-layout-container { .tri-layout-container {
grid-column-gap: $-s; grid-column-gap: vars.$s;
margin-inline-start: $-m; margin-inline-start: vars.$m;
margin-inline-end: $-m; margin-inline-end: vars.$m;
} }
} }
@include smaller-than($xxl) { @include mixins.smaller-than(vars.$bp-xxl) {
.tri-layout-container { .tri-layout-container {
grid-template-areas: "a b b"; grid-template-areas: "a b b";
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-rows: min-content min-content 1fr; grid-template-rows: min-content min-content 1fr;
padding-inline-end: $-l; padding-inline-end: vars.$l;
} }
.tri-layout-sides { .tri-layout-sides {
grid-column-start: a; grid-column-start: a;
@ -438,7 +441,7 @@ body.flexbox {
display: block; display: block;
} }
} }
@include between($l, $xxl) { @include mixins.between(vars.$bp-l, vars.$bp-xxl) {
.tri-layout-sides-content { .tri-layout-sides-content {
position: sticky; position: sticky;
top: 0; top: 0;
@ -454,12 +457,12 @@ body.flexbox {
} }
} }
} }
@include larger-than($l) { @include mixins.larger-than(vars.$bp-l) {
.tri-layout-mobile-tabs { .tri-layout-mobile-tabs {
display: none; display: none;
} }
.tri-layout-left-contents > *, .tri-layout-right-contents > * { .tri-layout-left-contents > *, .tri-layout-right-contents > * {
@include lightDark(opacity, 0.6, 0.75); @include mixins.lightDark(opacity, 0.6, 0.75);
transition: opacity ease-in-out 120ms; transition: opacity ease-in-out 120ms;
&:hover, &:focus-within { &:hover, &:focus-within {
opacity: 1 !important; opacity: 1 !important;
@ -469,16 +472,16 @@ body.flexbox {
} }
} }
} }
@include smaller-than($l) { @include mixins.smaller-than(vars.$bp-l) {
.tri-layout-container { .tri-layout-container {
grid-template-areas: none; grid-template-areas: none;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-column-gap: 0; grid-column-gap: 0;
padding-inline-end: $-xs; padding-inline-end: vars.$xs;
padding-inline-start: $-xs; padding-inline-start: vars.$xs;
.tri-layout-sides { .tri-layout-sides {
padding-inline-start: $-m; padding-inline-start: vars.$m;
padding-inline-end: $-m; padding-inline-end: vars.$m;
grid-column: 1/1; grid-column: 1/1;
} }
.tri-layout-left > *, .tri-layout-right > * { .tri-layout-left > *, .tri-layout-right > * {
@ -512,7 +515,7 @@ body.flexbox {
} }
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.tri-layout-container { .tri-layout-container {
margin-inline-start: 0; margin-inline-start: 0;
margin-inline-end: 0; margin-inline-end: 0;

173
resources/sass/_lists.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
.book-contents .entity-list-item { .book-contents .entity-list-item {
.icon { .icon {
@ -6,7 +9,7 @@
justify-self: stretch; justify-self: stretch;
align-self: stretch; align-self: stretch;
height: auto; height: auto;
margin-inline-end: $-xs; margin-inline-end: vars.$xs;
} }
.icon:after { .icon:after {
opacity: 0.5; opacity: 0.5;
@ -25,7 +28,7 @@
.entity-list-item + .chapter-expansion { .entity-list-item + .chapter-expansion {
display: flex; display: flex;
padding: 0 $-m $-m $-m; padding: 0 vars.$m vars.$m vars.$m;
align-items: center; align-items: center;
border: 0; border: 0;
width: 100%; width: 100%;
@ -58,7 +61,7 @@
} }
.chapter-contents-toggle { .chapter-contents-toggle {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: $-xs ($-m + $-xxs); padding: vars.$xs (vars.$m + vars.$xxs);
width: 100%; width: 100%;
text-align: start; text-align: start;
} }
@ -86,20 +89,20 @@
} }
.sidebar-page-nav { .sidebar-page-nav {
$nav-indent: $-m; $nav-indent: vars.$m;
list-style: none; list-style: none;
@include margin($-s, 0, $-m, $-xs); @include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);
position: relative; position: relative;
&:after { &:after {
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
@include rtl { @include mixins.rtl {
left: auto; left: auto;
right: 0; right: 0;
} }
@include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
width: 2px; width: 2px;
top: 5px; top: 5px;
bottom: 5px; bottom: 5px;
@ -132,7 +135,7 @@
font-weight: bold; font-weight: bold;
} }
li:not(.current-heading) .sidebar-page-nav-bullet { li:not(.current-heading) .sidebar-page-nav-bullet {
@include lightDark(background-color, #BBB, #666, true); @include mixins.lightDark(background-color, #BBB, #666, true);
} }
.sidebar-page-nav-bullet { .sidebar-page-nav-bullet {
width: 6px; width: 6px;
@ -142,9 +145,9 @@
top: 30%; top: 30%;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 0 0 6px #F2F2F2; box-shadow: 0 0 0 6px #F2F2F2;
@include lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111); @include mixins.lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
z-index: 1; z-index: 1;
@include rtl { @include mixins.rtl {
left: auto; left: auto;
right: -2px; right: -2px;
} }
@ -154,7 +157,7 @@
// Sidebar list // Sidebar list
.book-tree .sidebar-page-list { .book-tree .sidebar-page-list {
list-style: none; list-style: none;
@include margin($-xs, -$-s, 0, -$-s); @include mixins.margin(vars.$xs, -(vars.$s), 0, -(vars.$s));
padding-inline-start: 0; padding-inline-start: 0;
padding-inline-end: 0; padding-inline-end: 0;
@ -172,22 +175,22 @@
padding-inline-end: 0; padding-inline-end: 0;
.content { .content {
width: 100%; width: 100%;
padding-top: $-xs; padding-top: vars.$xs;
padding-bottom: $-xs; padding-bottom: vars.$xs;
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
} }
} }
.entity-list-item.selected { .entity-list-item.selected {
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
} }
.entity-list-item.no-hover { .entity-list-item.no-hover {
margin-top: -$-xs; margin-top: -(vars.$xs);
padding-inline-end: 0; padding-inline-end: 0;
} }
.entity-list-item-name { .entity-list-item-name {
font-size: 1em; font-size: 1em;
margin: 0; margin: 0;
margin-inline-end: $-m; margin-inline-end: vars.$m;
} }
.chapter-child-menu { .chapter-child-menu {
font-size: .8rem; font-size: .8rem;
@ -198,13 +201,13 @@
display: block; display: block;
width: 100%; width: 100%;
text-align: start; text-align: start;
padding: $-xxs $-s ($-xxs * 2) $-s; padding: vars.$xxs vars.$s (vars.$xxs * 2) vars.$s;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
line-height: 1; line-height: 1;
margin-top: -$-xxs; margin-top: -(vars.$xxs);
margin-bottom: -$-xxs; margin-bottom: -(vars.$xxs);
&:hover { &:hover {
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
} }
} }
.entity-list-item .icon { .entity-list-item .icon {
@ -236,8 +239,8 @@
list-style: none; list-style: none;
} }
.sort-box { .sort-box {
margin-bottom: $-m; margin-bottom: vars.$m;
padding: $-m $-xl; padding: vars.$m vars.$xl;
position: relative; position: relative;
&::before { &::before {
pointer-events: none; pointer-events: none;
@ -279,14 +282,14 @@
margin-inline-start: 0; margin-inline-start: 0;
} }
.sortable-page-sublist { .sortable-page-sublist {
margin-bottom: $-m; margin-bottom: vars.$m;
margin-top: 0; margin-top: 0;
padding-inline-start: $-m; padding-inline-start: vars.$m;
} }
li { li {
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
border: 1px solid; border: 1px solid;
@include lightDark(border-color, #DDD, #666); @include mixins.lightDark(border-color, #DDD, #666);
margin-top: -1px; margin-top: -1px;
min-height: 38px; min-height: 38px;
} }
@ -294,7 +297,7 @@
border-inline-start: 2px solid currentColor; border-inline-start: 2px solid currentColor;
} }
li:first-child { li:first-child {
margin-top: $-xs; margin-top: vars.$xs;
} }
} }
.sortable-page-list li.placeholder { .sortable-page-list li.placeholder {
@ -335,21 +338,21 @@ details.sort-box[open] summary .caret-container svg {
} }
.activity-list-item { .activity-list-item {
padding: $-s 0; padding: vars.$s 0;
display: grid; display: grid;
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-column-gap: $-m; grid-column-gap: vars.$m;
font-size: 0.9em; font-size: 0.9em;
} }
.card .activity-list-item { .card .activity-list-item {
padding-block: $-s; padding-block: vars.$s;
} }
.user-list-item { .user-list-item {
display: inline-grid; display: inline-grid;
padding: $-s; padding: vars.$s;
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
grid-column-gap: $-m; grid-column-gap: vars.$m;
font-size: 0.9em; font-size: 0.9em;
align-items: center; align-items: center;
> div:first-child { > div:first-child {
@ -360,7 +363,7 @@ details.sort-box[open] summary .caret-container svg {
ul.pagination { ul.pagination {
display: inline-flex; display: inline-flex;
list-style: none; list-style: none;
margin: $-m 0; margin: vars.$m 0;
padding-inline-start: 1px; padding-inline-start: 1px;
li:first-child { li:first-child {
a, span { a, span {
@ -374,19 +377,19 @@ ul.pagination {
} }
a, span { a, span {
display: block; display: block;
padding: $-xxs $-s; padding: vars.$xxs vars.$s;
border: 1px solid #CCC; border: 1px solid #CCC;
margin-inline-start: -1px; margin-inline-start: -1px;
user-select: none; user-select: none;
@include lightDark(color, #555, #eee); @include mixins.lightDark(color, #555, #eee);
@include lightDark(border-color, #ccc, #666); @include mixins.lightDark(border-color, #ccc, #666);
} }
li.disabled { li.disabled {
cursor: not-allowed; cursor: not-allowed;
} }
li.active span { li.active span {
@include lightDark(color, #111, #eee); @include mixins.lightDark(color, #111, #eee);
@include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
} }
} }
@ -395,7 +398,7 @@ ul.pagination {
} }
.entity-list, .icon-list { .entity-list, .icon-list {
margin: 0 (-$-m); margin: 0 (-(vars.$m));
h4 { h4 {
margin: 0; margin: 0;
} }
@ -405,7 +408,7 @@ ul.pagination {
.text-small.text-muted { .text-small.text-muted {
color: #AAA; color: #AAA;
font-size: 0.75em; font-size: 0.75em;
margin-top: $-xs; margin-top: vars.$xs;
} }
.text-muted p.text-muted { .text-muted p.text-muted {
margin-top: 0; margin-top: 0;
@ -420,7 +423,7 @@ ul.pagination {
} }
.icon-list hr { .icon-list hr {
margin: $-s $-m; margin: vars.$s vars.$m;
max-width: 140px; max-width: 140px;
opacity: 0.25; opacity: 0.25;
height: 1.1px; height: 1.1px;
@ -431,10 +434,10 @@ ul.pagination {
} }
.entity-list-item, .icon-list-item { .entity-list-item, .icon-list-item {
padding: $-s $-m; padding: vars.$s vars.$m;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $-m; gap: vars.$m;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
width: 100%; width: 100%;
@ -458,7 +461,7 @@ ul.pagination {
cursor: pointer; cursor: pointer;
} }
&:not(.no-hover):hover { &:not(.no-hover):hover {
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: 4px;
} }
@ -466,7 +469,7 @@ ul.pagination {
background-color: transparent; background-color: transparent;
} }
&:focus { &:focus {
@include lightDark(background-color, #eee, #222); @include mixins.lightDark(background-color, #eee, #222);
outline: 1px dotted #666; outline: 1px dotted #666;
outline-offset: -2px; outline-offset: -2px;
} }
@ -493,7 +496,7 @@ ul.pagination {
.split-icon-list-item { .split-icon-list-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $-m; gap: vars.$m;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
width: 100%; width: 100%;
@ -501,10 +504,10 @@ ul.pagination {
word-break: break-word; word-break: break-word;
border-radius: 4px; border-radius: 4px;
> a { > a {
padding: $-s $-m; padding: vars.$s vars.$m;
display: flex; display: flex;
align-items: center; align-items: center;
gap: $-m; gap: vars.$m;
flex: 1; flex: 1;
} }
> a:hover { > a:hover {
@ -515,7 +518,7 @@ ul.pagination {
flex: none; flex: none;
} }
&:hover { &:hover {
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
} }
} }
@ -532,21 +535,21 @@ ul.pagination {
visibility: visible; visibility: visible;
} }
.icon-list-item-dropdown-toggle { .icon-list-item-dropdown-toggle {
padding: $-xs; padding: vars.$xs;
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@include lightDark(color, #888, #999); @include mixins.lightDark(color, #888, #999);
svg { svg {
margin: 0; margin: 0;
} }
&:hover { &:hover {
@include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
} }
} }
.card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover { .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
@include lightDark(background-color, #F2F2F2, #2d2d2d); @include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);
border-radius: 0; border-radius: 0;
} }
.card .entity-list-item .entity-list-item:hover { .card .entity-list-item .entity-list-item:hover {
@ -554,10 +557,10 @@ ul.pagination {
} }
.entity-list-item-children { .entity-list-item-children {
padding: $-m $-l; padding: vars.$m vars.$l;
> div { > div {
overflow: hidden; overflow: hidden;
padding: 0 0 $-xs 0; padding: 0 0 vars.$xs 0;
} }
.entity-chip { .entity-chip {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -568,7 +571,7 @@ ul.pagination {
white-space: nowrap; white-space: nowrap;
} }
> .entity-list > .entity-list-item:last-child { > .entity-list > .entity-list-item:last-child {
margin-bottom: -$-xs; margin-bottom: -(vars.$xs);
} }
} }
@ -580,22 +583,22 @@ ul.pagination {
background-position: 50% 50%; background-position: 50% 50%;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
margin-inline-end: $-l; margin-inline-end: vars.$l;
&.entity-list-item-image-wide { &.entity-list-item-image-wide {
width: 220px; width: 220px;
} }
.svg-icon { .svg-icon {
@include lightDark(color, #fff, rgba(255, 255, 255, 0.6)); @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
font-size: 1.66rem; font-size: 1.66rem;
margin-inline-end: 0; margin-inline-end: 0;
position: absolute; position: absolute;
bottom: $-xs; bottom: vars.$xs;
left: $-xs; left: vars.$xs;
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
width: 80px; width: 80px;
} }
} }
@ -605,7 +608,7 @@ ul.pagination {
} }
.entity-list.compact { .entity-list.compact {
font-size: 0.6 * $fs-m; font-size: 0.6 * vars.$fs-m;
h4, a { h4, a {
line-height: 1.2; line-height: 1.2;
} }
@ -613,8 +616,8 @@ ul.pagination {
display: none; display: none;
} }
.entity-list-item p { .entity-list-item p {
font-size: $fs-m * 0.8; font-size: vars.$fs-m * 0.8;
padding-top: $-xs; padding-top: vars.$xs;
} }
.entity-list-item p:empty { .entity-list-item p:empty {
padding-top: 0; padding-top: 0;
@ -624,12 +627,12 @@ ul.pagination {
} }
> p.empty-text { > p.empty-text {
display: block; display: block;
font-size: $fs-m; font-size: vars.$fs-m;
} }
hr { hr {
margin: 0; margin: 0;
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
h4 { h4 {
font-size: 1.666em; font-size: 1.666em;
} }
@ -660,13 +663,13 @@ ul.pagination {
top: 0; top: 0;
list-style: none; list-style: none;
inset-inline-end: 0; inset-inline-end: 0;
margin: $-m 0; margin: vars.$m 0;
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
border-radius: 3px; border-radius: 3px;
min-width: 180px; min-width: 180px;
padding: $-xs 0; padding: vars.$xs 0;
@include lightDark(color, #555, #eee); @include mixins.lightDark(color, #555, #eee);
fill: currentColor; fill: currentColor;
text-align: start !important; text-align: start !important;
max-height: 500px; max-height: 500px;
@ -697,11 +700,11 @@ ul.pagination {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
li hr { li hr {
margin: $-xs 0; margin: vars.$xs 0;
} }
.icon-item, .text-item, .label-item { .icon-item, .text-item, .label-item {
padding: 8px $-m; padding: 8px vars.$m;
@include lightDark(color, #555, #eee); @include mixins.lightDark(color, #555, #eee);
fill: currentColor; fill: currentColor;
white-space: nowrap; white-space: nowrap;
line-height: 1.4; line-height: 1.4;
@ -721,7 +724,7 @@ ul.pagination {
outline-offset: -2px; outline-offset: -2px;
} }
svg { svg {
margin-inline-end: $-s; margin-inline-end: vars.$s;
display: inline-block; display: inline-block;
width: 16px; width: 16px;
} }
@ -733,7 +736,7 @@ ul.pagination {
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: auto min-content; grid-template-columns: auto min-content;
gap: $-m; gap: vars.$m;
} }
.label-item > *:nth-child(2) { .label-item > *:nth-child(2) {
opacity: 0.7; opacity: 0.7;
@ -745,7 +748,7 @@ ul.pagination {
display: grid; display: grid;
align-items: start; align-items: start;
grid-template-columns: 16px auto; grid-template-columns: 16px auto;
gap: $-m; gap: vars.$m;
svg { svg {
margin-inline-end: 0; margin-inline-end: 0;
margin-block-start: 1px; margin-block-start: 1px;
@ -757,7 +760,7 @@ ul.pagination {
// being cut by scrollable container. // being cut by scrollable container.
.tri-layout-right .dropdown-menu, .tri-layout-right .dropdown-menu,
.tri-layout-left .dropdown-menu { .tri-layout-left .dropdown-menu {
inset-inline-end: $-xs; inset-inline-end: vars.$xs;
} }
// Books grid view // Books grid view
@ -781,7 +784,7 @@ ul.pagination {
.featured-image-container-wrap { .featured-image-container-wrap {
position: relative; position: relative;
.svg-icon { .svg-icon {
@include lightDark(color, #fff, rgba(255, 255, 255, 0.6)); @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
font-size: 2rem; font-size: 2rem;
margin-inline-end: 0; margin-inline-end: 0;
position: absolute; position: absolute;
@ -800,30 +803,30 @@ ul.pagination {
background: transparent; background: transparent;
border: none; border: none;
color: currentColor; color: currentColor;
padding: $-m 0; padding: vars.$m 0;
} }
.active-link-list { .active-link-list {
a { a {
display: inline-block; display: inline-block;
padding: $-s; padding: vars.$s;
} }
a:not(.active) { a:not(.active) {
@include lightDark(color, #444, #888); @include mixins.lightDark(color, #444, #888);
} }
a:hover { a:hover {
@include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
} }
&.in-sidebar { &.in-sidebar {
a { a {
display: block; display: block;
margin-bottom: $-xs; margin-bottom: vars.$xs;
} }
a.active { a.active {
border-radius: 4px; border-radius: 4px;
@include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
} }
} }
} }
@ -833,7 +836,7 @@ ul.pagination {
line-height: 1.2; line-height: 1.2;
margin: 0.6em 0; margin: 0.6em 0;
align-content: start; align-content: start;
gap: $-s; gap: vars.$s;
a { a {
line-height: 1.2; line-height: 1.2;
} }

65
resources/sass/_pages.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
.page-editor { .page-editor {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -22,8 +25,8 @@
.page-editor-page-area { .page-editor-page-area {
width: 100%; width: 100%;
border-radius: 8px; border-radius: 8px;
box-shadow: $bs-card; box-shadow: vars.$bs-card;
@include lightDark(background-color, #FFF, #333) @include mixins.lightDark(background-color, #FFF, #333)
} }
.page-edit-toolbar { .page-edit-toolbar {
@ -34,7 +37,7 @@
align-items: center; align-items: center;
} }
@include larger-than($xxl) { @include mixins.larger-than(vars.$bp-xxl) {
.page-editor-wysiwyg2024 .page-edit-toolbar, .page-editor-wysiwyg2024 .page-edit-toolbar,
.page-editor-wysiwyg2024 .page-editor-page-area, .page-editor-wysiwyg2024 .page-editor-page-area,
.page-editor-wysiwyg .page-edit-toolbar, .page-editor-wysiwyg .page-edit-toolbar,
@ -48,7 +51,7 @@
} }
} }
@include smaller-than($m) { @include mixins.smaller-than(vars.$bp-m) {
.page-edit-toolbar { .page-edit-toolbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -76,7 +79,7 @@
position: relative; position: relative;
outline-offset: -1px; outline-offset: -1px;
outline: 1px dashed var(--color-primary); outline: 1px dashed var(--color-primary);
box-shadow: $bs-card; box-shadow: vars.$bs-card;
z-index: 50; z-index: 50;
} }
} }
@ -96,7 +99,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
.page-edit-toolbar { .page-edit-toolbar {
overflow-x: scroll; overflow-x: scroll;
overflow-y: visible; overflow-y: visible;
@ -116,9 +119,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
width: 52px; width: 52px;
height: 52px; height: 52px;
font-size: 26px; font-size: 26px;
inset-inline-end: $-xs; inset-inline-end: vars.$xs;
bottom: $-s; bottom: vars.$s;
box-shadow: $bs-hover; box-shadow: vars.$bs-hover;
background-color: currentColor; background-color: currentColor;
text-align: center; text-align: center;
svg { svg {
@ -150,10 +153,10 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
.pointer { .pointer {
border: 1px solid #CCC; border: 1px solid #CCC;
@include lightDark(border-color, #ccc, #000); @include mixins.lightDark(border-color, #ccc, #000);
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
width: 275px; width: 275px;
&.is-page-editable { &.is-page-editable {
@ -174,8 +177,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
border-right: 1px solid #CCC; border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC; border-bottom: 1px solid #CCC;
z-index: 56; z-index: 56;
@include lightDark(background-color, #fff, #333); @include mixins.lightDark(background-color, #fff, #333);
@include lightDark(border-color, #ccc, #000); @include mixins.lightDark(border-color, #ccc, #000);
} }
input, button, a { input, button, a {
position: relative; position: relative;
@ -188,14 +191,14 @@ body.tox-fullscreen, body.markdown-fullscreen {
input { input {
background-color: #FFF; background-color: #FFF;
border: 1px solid #DDD; border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
color: #666; color: #666;
width: 160px; width: 160px;
z-index: 40; z-index: 40;
padding: 5px 10px; padding: 5px 10px;
} }
.text-button { .text-button {
@include lightDark(color, #444, #AAA); @include mixins.lightDark(color, #444, #AAA);
} }
.input-group .button { .input-group .button {
line-height: 1; line-height: 1;
@ -210,22 +213,22 @@ body.tox-fullscreen, body.markdown-fullscreen {
height: 1.2em; height: 1.2em;
} }
.button { .button {
@include lightDark(border-color, #ddd, #000); @include mixins.lightDark(border-color, #ddd, #000);
} }
} }
// Page editor sidebar toolbox // Page editor sidebar toolbox
.floating-toolbox { .floating-toolbox {
@include lightDark(background-color, #FFF, #222); @include mixins.lightDark(background-color, #FFF, #222);
overflow: hidden; overflow: hidden;
align-items: stretch; align-items: stretch;
flex-direction: row; flex-direction: row;
display: flex; display: flex;
max-height: 100%; max-height: 100%;
border-radius: 8px; border-radius: 8px;
box-shadow: $bs-card; box-shadow: vars.$bs-card;
margin-bottom: auto; margin-bottom: auto;
margin-inline-start: $-l; margin-inline-start: vars.$l;
position: relative; position: relative;
&.open { &.open {
position: relative; position: relative;
@ -254,23 +257,23 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
.tabs { .tabs {
border-inline-end: 1px solid #DDD; border-inline-end: 1px solid #DDD;
@include lightDark(border-inline-end-color, #DDD, #000); @include mixins.lightDark(border-inline-end-color, #DDD, #000);
width: 40px; width: 40px;
flex: 0 1 auto; flex: 0 1 auto;
margin-inline-end: -1px; margin-inline-end: -1px;
} }
.tabs-inner { .tabs-inner {
@include lightDark(background-color, #FFFFFF, #222); @include mixins.lightDark(background-color, #FFFFFF, #222);
} }
.tabs svg { .tabs svg {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.tabs-inner > button { .tabs-inner > button {
@include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5)); @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
display: block; display: block;
cursor: pointer; cursor: pointer;
padding: 10px $-xs; padding: 10px vars.$xs;
font-size: 18px; font-size: 18px;
line-height: 1.6; line-height: 1.6;
} }
@ -295,8 +298,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
h4 { h4 {
font-size: 24px; font-size: 24px;
margin: $-m 0 0 0; margin: vars.$m 0 0 0;
padding: 0 $-l $-s $-l; padding: 0 vars.$l vars.$s vars.$l;
} }
.tags input { .tags input {
max-width: 100%; max-width: 100%;
@ -304,8 +307,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
min-width: 50px; min-width: 50px;
} }
.tags td, .inline-start-table > div > div > div { .tags td, .inline-start-table > div > div > div {
padding-inline-end: $-s; padding-inline-end: vars.$s;
padding-top: $-s; padding-top: vars.$s;
position: relative; position: relative;
} }
.handle { .handle {
@ -324,13 +327,13 @@ body.tox-fullscreen, body.markdown-fullscreen {
} }
} }
@include smaller-than($xxl) { @include mixins.smaller-than(vars.$bp-xxl) {
.floating-toolbox { .floating-toolbox {
margin-inline-start: $-s; margin-inline-start: vars.$s;
} }
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
.page-editor-page-area-wrap { .page-editor-page-area-wrap {
margin: 4px !important; margin: 4px !important;
} }
@ -429,7 +432,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: $-xs $-s; padding: vars.$xs vars.$s;
fill: currentColor; fill: currentColor;
opacity: 0.85; opacity: 0.85;
transition: opacity ease-in-out 120ms; transition: opacity ease-in-out 120ms;

6
resources/sass/_spacing.scss
View File

@ -1,8 +1,10 @@
@use "vars";
// Here we generate spacing utility classes for our sizes for all box sides and axis. // Here we generate spacing utility classes for our sizes for all box sides and axis.
// These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size) // These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
@mixin spacing($prop, $propLetter) { @mixin spacing($prop, $propLetter) {
@each $sizeLetter, $size in $spacing { @each $sizeLetter, $size in vars.$spacing {
.#{$propLetter}-#{$sizeLetter} { .#{$propLetter}-#{$sizeLetter} {
#{$prop}: $size !important; #{$prop}: $size !important;
} }
@ -31,7 +33,7 @@
@include spacing('margin', 'm'); @include spacing('margin', 'm');
@include spacing('padding', 'p'); @include spacing('padding', 'p');
@each $sizeLetter, $size in $spacing { @each $sizeLetter, $size in vars.$spacing {
.gap-#{$sizeLetter} { .gap-#{$sizeLetter} {
gap: $size !important; gap: $size !important;
} }

21
resources/sass/_tables.scss
View File

@ -1,8 +1,11 @@
@use "mixins";
@use "vars";
table { table {
min-width: 100px; min-width: 100px;
max-width: 100%; max-width: 100%;
thead { thead {
@include lightDark(background-color, #f8f8f8, #333); @include mixins.lightDark(background-color, #f8f8f8, #333);
font-weight: 500; font-weight: 500;
} }
td, th { td, th {
@ -27,7 +30,7 @@ table.table {
th, td { th, td {
text-align: start; text-align: start;
border: none; border: none;
padding: $-s $-s; padding: vars.$s vars.$s;
vertical-align: middle; vertical-align: middle;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
@ -36,7 +39,7 @@ table.table {
font-weight: bold; font-weight: bold;
} }
tr:hover { tr:hover {
@include lightDark(background-color, #F2F2F2, #333); @include mixins.lightDark(background-color, #F2F2F2, #333);
} }
.text-right { .text-right {
text-align: end; text-align: end;
@ -51,10 +54,10 @@ table.table {
display: inline-block; display: inline-block;
} }
&.expand-to-padding { &.expand-to-padding {
margin-left: -$-s; margin-left: -(vars.$s);
margin-right: -$-s; margin-right: -(vars.$s);
width: calc(100% + (2*#{$-s})); width: calc(100% + (2*#{vars.$s}));
max-width: calc(100% + (2*#{$-s})); max-width: calc(100% + (2*#{vars.$s}));
} }
} }
@ -66,10 +69,10 @@ table.no-style {
} }
table.list-table { table.list-table {
margin: 0 (-$-xs); margin: 0 (-(vars.$xs));
td { td {
border: 0; border: 0;
vertical-align: middle; vertical-align: middle;
padding: $-xs; padding: vars.$xs;
} }
} }

67
resources/sass/_text.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
/** /**
* Fonts * Fonts
*/ */
@ -43,7 +46,7 @@ h1, h2, h3, h4, h5, h6 {
position: relative; position: relative;
display: block; display: block;
font-family: var(--font-heading, var(--font-body)); font-family: var(--font-heading, var(--font-body));
@include lightDark(color, #222, #BBB); @include mixins.lightDark(color, #222, #BBB);
} }
h5 { h5 {
@ -56,7 +59,7 @@ h5, h6 {
margin-bottom: 0.66em; margin-bottom: 0.66em;
} }
@include smaller-than($s) { @include mixins.smaller-than(vars.$bp-s) {
h1 { h1 {
font-size: 2.8275em; font-size: 2.8275em;
} }
@ -133,16 +136,16 @@ p, ul, ol, pre, table, blockquote {
hr { hr {
border: 0; border: 0;
height: 1px; height: 1px;
@include lightDark(background, #eaeaea, #555); @include mixins.lightDark(background, #eaeaea, #555);
margin-bottom: $-l; margin-bottom: vars.$l;
&.faded { &.faded {
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF); background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
} }
&.darker { &.darker {
@include lightDark(background, #DDD, #666); @include mixins.lightDark(background, #DDD, #666);
} }
&.margin-top, &.even { &.margin-top, &.even {
margin-top: $-l; margin-top: vars.$l;
} }
} }
@ -174,8 +177,8 @@ sub, .subscript {
pre { pre {
font-size: 12px; font-size: 12px;
border: 1px solid #DDD; border: 1px solid #DDD;
@include lightDark(background-color, #FFF, #2B2B2B); @include mixins.lightDark(background-color, #FFF, #2B2B2B);
@include lightDark(border-color, #DDD, #111); @include mixins.lightDark(border-color, #DDD, #111);
border-radius: 4px; border-radius: 4px;
padding-inline-start: 26px; padding-inline-start: 26px;
position: relative; position: relative;
@ -189,8 +192,8 @@ pre {
width: 22.4px; width: 22.4px;
inset-inline-start: 0; inset-inline-start: 0;
height: 100%; height: 100%;
@include lightDark(background-color, #f5f5f5, #313335); @include mixins.lightDark(background-color, #f5f5f5, #313335);
@include lightDark(border-inline-end, 1px solid #DDD, none); @include mixins.lightDark(border-inline-end, 1px solid #DDD, none);
} }
} }
@ -208,16 +211,16 @@ blockquote {
position: relative; position: relative;
border-left: 4px solid transparent; border-left: 4px solid transparent;
border-left-color: var(--color-primary); border-left-color: var(--color-primary);
@include lightDark(background-color, #f8f8f8, #333); @include mixins.lightDark(background-color, #f8f8f8, #333);
padding: $-s $-m $-s $-xl; padding: vars.$s vars.$m vars.$s vars.$xl;
overflow: auto; overflow: auto;
&:before { &:before {
content: "\201C"; content: "\201C";
font-size: 2em; font-size: 2em;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
top: $-s; top: vars.$s;
left: $-s; left: vars.$s;
color: #777; color: #777;
} }
} }
@ -238,8 +241,8 @@ blockquote {
font-size: 0.84em; font-size: 0.84em;
border: 1px solid #DDD; border: 1px solid #DDD;
border-radius: 3px; border-radius: 3px;
@include lightDark(background-color, #f8f8f8, #2b2b2b); @include mixins.lightDark(background-color, #f8f8f8, #2b2b2b);
@include lightDark(border-color, #DDD, #444); @include mixins.lightDark(border-color, #DDD, #444);
} }
code { code {
@ -252,7 +255,7 @@ code {
span.code { span.code {
@extend .code-base; @extend .code-base;
padding: 1px $-xs; padding: 1px vars.$xs;
} }
pre code { pre code {
@ -272,8 +275,8 @@ span.highlight {
* Lists * Lists
*/ */
ul, ol { ul, ol {
padding-left: $-m * 2.0; padding-left: vars.$m * 2.0;
padding-right: $-m * 2.0; padding-right: vars.$m * 2.0;
display: flow-root; display: flow-root;
p { p {
margin: 0; margin: 0;
@ -300,8 +303,8 @@ li > ol, li > ul {
margin-block-start: 0; margin-block-start: 0;
padding-block-end: 0; padding-block-end: 0;
padding-block-start: 0; padding-block-start: 0;
padding-left: $-m * 1.2; padding-left: vars.$m * 1.2;
padding-right: $-m * 1.2; padding-right: vars.$m * 1.2;
} }
/** /**
@ -312,17 +315,17 @@ li > ol, li > ul {
li.checkbox-item, li.task-list-item { li.checkbox-item, li.task-list-item {
display: list-item; display: list-item;
list-style: none; list-style: none;
margin-left: -($-m * 1.2); margin-left: -(vars.$m * 1.2);
margin-inline-start: -($-m * 1.2); margin-inline-start: -(vars.$m * 1.2);
margin-inline-end: 0; margin-inline-end: 0;
input[type="checkbox"] { input[type="checkbox"] {
margin-right: $-xs; margin-right: vars.$xs;
margin-inline-end: $-xs; margin-inline-end: vars.$xs;
margin-inline-start: 0; margin-inline-start: 0;
} }
li.checkbox-item, li.task-list-item { li.checkbox-item, li.task-list-item {
margin-left: $-xs; margin-left: vars.$xs;
margin-inline-start: $-xs; margin-inline-start: vars.$xs;
margin-inline-end: 0; margin-inline-end: 0;
} }
} }
@ -344,8 +347,8 @@ li.checkbox-item, li.task-list-item {
text-align: end; text-align: end;
} }
@each $sizeLetter, $size in $screen-sizes { @each $sizeLetter, $size in vars.$screen-sizes {
@include larger-than($size) { @include mixins.larger-than($size) {
.text-#{$sizeLetter}-center { .text-#{$sizeLetter}-center {
text-align: center; text-align: center;
} }
@ -395,7 +398,7 @@ li.checkbox-item, li.task-list-item {
* Grouping * Grouping
*/ */
.header-group { .header-group {
margin: $-m 0; margin: vars.$m 0;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 0; margin: 0;
} }
@ -403,7 +406,7 @@ li.checkbox-item, li.task-list-item {
span.sep { span.sep {
color: #BBB; color: #BBB;
padding: 0 $-xs; padding: 0 vars.$xs;
} }
.list > * { .list > * {
@ -419,7 +422,7 @@ span.sep {
display: inline-block; display: inline-block;
position: relative; position: relative;
bottom: -0.105em; bottom: -0.105em;
margin-inline-end: $-xs; margin-inline-end: vars.$xs;
pointer-events: none; pointer-events: none;
fill: currentColor; fill: currentColor;
} }

19
resources/sass/_tinymce.scss
View File

@ -1,3 +1,6 @@
@use "mixins";
@use "vars";
// Custom full screen mode // Custom full screen mode
.tox.tox-fullscreen { .tox.tox-fullscreen {
@ -35,7 +38,7 @@
padding: 1rem; padding: 1rem;
top: 4px; top: 4px;
font-style: italic; font-style: italic;
@include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5)) @include mixins.lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
} }
// Default styles for our custom root nodes // Default styles for our custom root nodes
@ -74,23 +77,23 @@ body.page-content.mce-content-body {
pointer-events: none; pointer-events: none;
} }
.page-content.mce-content-body details doc-root { .page-content.mce-content-body details doc-root {
padding: $-s; padding: vars.$s;
margin-left: (2px - $-s); margin-left: (2px - vars.$s);
margin-right: (2px - $-s); margin-right: (2px - vars.$s);
margin-bottom: (2px - $-s); margin-bottom: (2px - vars.$s);
margin-top: (2px - $-s); margin-top: (2px - vars.$s);
overflow: hidden; overflow: hidden;
} }
// Allow alignment to be reflected in media embed wrappers // Allow alignment to be reflected in media embed wrappers
.page-content.mce-content-body .mce-preview-object.align-right { .page-content.mce-content-body .mce-preview-object.align-right {
float: right !important; float: right !important;
margin: $-xs 0 $-xs $-s; margin: vars.$xs 0 vars.$xs vars.$s;
} }
.page-content.mce-content-body .mce-preview-object.align-left { .page-content.mce-content-body .mce-preview-object.align-left {
float: left !important; float: left !important;
margin: $-xs $-m $-m 0; margin: vars.$xs vars.$m vars.$m 0;
} }
.page-content.mce-content-body .mce-preview-object.align-center { .page-content.mce-content-body .mce-preview-object.align-center {

36
resources/sass/_variables.scss → resources/sass/_vars.scss
View File

@ -2,30 +2,30 @@
/////////////// ///////////////
// Screen breakpoints // Screen breakpoints
$xxxl: 1700px; $bp-xxxl: 1700px;
$xxl: 1400px; $bp-xxl: 1400px;
$xl: 1100px; $bp-xl: 1100px;
$l: 1000px; $bp-l: 1000px;
$m: 880px; $bp-m: 880px;
$s: 600px; $bp-s: 600px;
$xs: 400px; $bp-xs: 400px;
$xxs: 360px; $bp-xxs: 360px;
// List of screen sizes // List of screen sizes
$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl)); $screen-sizes: (('xxs', $bp-xxs), ('xs', $bp-xs), ('s', $bp-s), ('m', $bp-m), ('l', $bp-l), ('xl', $bp-xl));
// Spacing (Margins+Padding) // Spacing (Margins+Padding)
$-xxxl: 64px; $xxxl: 64px;
$-xxl: 48px; $xxl: 48px;
$-xl: 32px; $xl: 32px;
$-l: 24px; $l: 24px;
$-m: 16px; $m: 16px;
$-s: 12px; $s: 12px;
$-xs: 6px; $xs: 6px;
$-xxs: 3px; $xxs: 3px;
// List of our spacing sizes // List of our spacing sizes
$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto)); $spacing: (('none', 0), ('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl), ('xxl', $xxl), ('auto', auto));
// Fonts // Fonts
$font-body: -apple-system, BlinkMacSystemFont, $font-body: -apple-system, BlinkMacSystemFont,

13
resources/sass/export-styles.scss
View File

@ -1,10 +1,11 @@
@use "sass:math"; @use "sass:math";
@import "variables";
@import "mixins"; @use "vars";
@import "html"; @use "mixins";
@import "text"; @use "html";
@import "tables"; @use "text";
@import "content"; @use "tables";
@use "content";
html, body { html, body {
background-color: #FFF; background-color: #FFF;

102
resources/sass/styles.scss
View File

@ -1,31 +1,31 @@
@use "sass:math"; @use "sass:meta";
@import "reset"; @use "reset";
@import "variables"; @use "vars";
@import "mixins"; @use "mixins";
@import "spacing"; @use "spacing";
@import "opacity"; @use "opacity";
@import "html"; @use "html";
@import "text"; @use "text";
@import "colors"; @use "colors";
@import "layout"; @use "layout";
@import "blocks"; @use "blocks";
@import "buttons"; @use "buttons";
@import "tables"; @use "tables";
@import "forms"; @use "forms";
@import "animations"; @use "animations";
@import "tinymce"; @use "tinymce";
@import "editor"; @use "editor";
@import "codemirror"; @use "codemirror";
@import "components"; @use "components";
@import "header"; @use "header";
@import "footer"; @use "footer";
@import "lists"; @use "lists";
@import "pages"; @use "pages";
@import "content"; @use "content";
@media print { @media print {
@import "print"; @include meta.load-css("print");
} }
// Jquery Sortable Styles // Jquery Sortable Styles
@ -41,7 +41,7 @@ body.dragging, body.dragging * {
// User Avatar Images // User Avatar Images
.avatar { .avatar {
border-radius: 100%; border-radius: 100%;
@include lightDark(background-color, #eee, #000); @include mixins.lightDark(background-color, #eee, #000);
width: 30px; width: 30px;
height: 30px; height: 30px;
&.med { &.med {
@ -60,7 +60,7 @@ body.dragging, body.dragging * {
border-radius: 3px; border-radius: 3px;
} }
&[src$="user_avatar.png"] { &[src$="user_avatar.png"] {
@include whenDark { @include mixins.whenDark {
filter: invert(1); filter: invert(1);
} }
} }
@ -71,7 +71,7 @@ $loadingSize: 10px;
.loading-container { .loading-container {
position: relative; position: relative;
display: block; display: block;
margin: $-xl auto; margin: vars.$xl auto;
> div { > div {
width: $loadingSize; width: $loadingSize;
height: $loadingSize; height: $loadingSize;
@ -79,7 +79,7 @@ $loadingSize: 10px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);
margin-top: $-xs; margin-top: vars.$xs;
animation-name: loadingBob; animation-name: loadingBob;
animation-duration: 1.4s; animation-duration: 1.4s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
@ -89,17 +89,17 @@ $loadingSize: 10px;
animation-delay: -300ms; animation-delay: -300ms;
} }
> div:first-child { > div:first-child {
left: -($loadingSize+$-xs); left: -($loadingSize+vars.$xs);
background-color: var(--color-book); background-color: var(--color-book);
animation-delay: -600ms; animation-delay: -600ms;
} }
> div:last-of-type { > div:last-of-type {
left: $loadingSize+$-xs; left: $loadingSize+vars.$xs;
background-color: var(--color-chapter); background-color: var(--color-chapter);
animation-delay: 0ms; animation-delay: 0ms;
} }
> span { > span {
margin-inline-start: $-s; margin-inline-start: vars.$s;
font-style: italic; font-style: italic;
color: #888; color: #888;
vertical-align: top; vertical-align: top;
@ -107,7 +107,7 @@ $loadingSize: 10px;
} }
.inline.block .loading-container { .inline.block .loading-container {
margin: $-xs $-s; margin: vars.$xs vars.$s;
} }
.skip-to-content-link { .skip-to-content-link {
@ -118,10 +118,10 @@ $loadingSize: 10px;
z-index: 15; z-index: 15;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
display: block; display: block;
box-shadow: $bs-dark; box-shadow: vars.$bs-dark;
font-weight: bold; font-weight: bold;
&:focus { &:focus {
top: $-xl; top: vars.$xl;
outline-offset: -10px; outline-offset: -10px;
outline: 2px dotted var(--color-link); outline: 2px dotted var(--color-link);
} }
@ -129,7 +129,7 @@ $loadingSize: 10px;
.entity-selector { .entity-selector {
border: 1px solid #DDD; border: 1px solid #DDD;
@include lightDark(border-color, #ddd, #111); @include mixins.lightDark(border-color, #ddd, #111);
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
font-size: 0.8em; font-size: 0.8em;
@ -140,7 +140,7 @@ $loadingSize: 10px;
border: 0; border: 0;
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
font-size: 16px; font-size: 16px;
padding: $-s $-m; padding: vars.$s vars.$m;
} }
input[type="text"]:focus { input[type="text"]:focus {
outline: 1px solid var(--color-primary); outline: 1px solid var(--color-primary);
@ -150,12 +150,12 @@ $loadingSize: 10px;
.entity-list { .entity-list {
overflow-y: scroll; overflow-y: scroll;
height: 400px; height: 400px;
@include lightDark(background-color, #eee, #222); @include mixins.lightDark(background-color, #eee, #222);
margin-inline-end: 0; margin-inline-end: 0;
margin-inline-start: 0; margin-inline-start: 0;
} }
.entity-list-item { .entity-list-item {
@include lightDark(background-color, #fff, #222); @include mixins.lightDark(background-color, #fff, #222);
} }
.entity-list-item p { .entity-list-item p {
margin-bottom: 0; margin-bottom: 0;
@ -165,11 +165,11 @@ $loadingSize: 10px;
outline-offset: -4px; outline-offset: -4px;
} }
.entity-list-item.selected { .entity-list-item.selected {
@include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
} }
.loading { .loading {
height: 400px; height: 400px;
padding-top: $-l; padding-top: vars.$l;
} }
&.compact { &.compact {
font-size: 10px; font-size: 10px;
@ -182,14 +182,14 @@ $loadingSize: 10px;
} }
&.small { &.small {
.entity-list-item { .entity-list-item {
padding: $-xs $-m; padding: vars.$xs vars.$m;
} }
.entity-list, .loading { .entity-list, .loading {
height: 300px; height: 300px;
} }
input[type="text"] { input[type="text"] {
font-size: 13px; font-size: 13px;
padding: $-xs $-m; padding: vars.$xs vars.$m;
height: auto; height: auto;
} }
} }
@ -207,11 +207,11 @@ $loadingSize: 10px;
z-index: 150; z-index: 150;
} }
@include between($s, $m) { @include mixins.between(vars.$bp-s, vars.$bp-m) {
#home-default > .grid.third { #home-default > .grid.third {
display: block; display: block;
columns: 2; columns: 2;
column-gap: $-l !important; column-gap: vars.$l !important;
} }
} }
@ -222,29 +222,29 @@ $loadingSize: 10px;
} }
.list-sort { .list-sort {
display: inline-grid; display: inline-grid;
margin-inline-start: $-s; margin-inline-start: vars.$s;
grid-template-columns: minmax(120px, max-content) 40px; grid-template-columns: minmax(120px, max-content) 40px;
font-size: 0.9rem; font-size: 0.9rem;
border: 2px solid #DDD; border: 2px solid #DDD;
@include lightDark(border-color, #ddd, #444); @include mixins.lightDark(border-color, #ddd, #444);
border-radius: 4px; border-radius: 4px;
} }
.list-sort-label { .list-sort-label {
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
@include lightDark(color, #555, #888); @include mixins.lightDark(color, #555, #888);
} }
.list-sort-type { .list-sort-type {
text-align: start; text-align: start;
} }
.list-sort-type, .list-sort-dir { .list-sort-type, .list-sort-dir {
padding: $-xs $-s; padding: vars.$xs vars.$s;
cursor: pointer; cursor: pointer;
} }
.list-sort-dir { .list-sort-dir {
border-inline-start: 2px solid #DDD; border-inline-start: 2px solid #DDD;
color: #888; color: #888;
@include lightDark(border-color, #ddd, #444); @include mixins.lightDark(border-color, #ddd, #444);
.svg-icon { .svg-icon {
transition: transform ease-in-out 120ms; transition: transform ease-in-out 120ms;
} }
@ -256,5 +256,5 @@ $loadingSize: 10px;
.import-item { .import-item {
border-inline-start: 2px solid currentColor; border-inline-start: 2px solid currentColor;
padding-inline-start: $-xs; padding-inline-start: vars.$xs;
} }