mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-12-12 13:33:46 +08:00
SASS: Updated to use modules and address deprecations
Some checks failed
analyse-php / build (push) Has been cancelled
lint-js / build (push) Has been cancelled
lint-php / build (push) Has been cancelled
test-js / build (push) Has been cancelled
test-migrations / build (8.1) (push) Has been cancelled
test-migrations / build (8.2) (push) Has been cancelled
test-migrations / build (8.3) (push) Has been cancelled
test-php / build (8.1) (push) Has been cancelled
test-php / build (8.2) (push) Has been cancelled
test-php / build (8.3) (push) Has been cancelled
Some checks failed
analyse-php / build (push) Has been cancelled
lint-js / build (push) Has been cancelled
lint-php / build (push) Has been cancelled
test-js / build (push) Has been cancelled
test-migrations / build (8.1) (push) Has been cancelled
test-migrations / build (8.2) (push) Has been cancelled
test-migrations / build (8.3) (push) Has been cancelled
test-php / build (8.1) (push) Has been cancelled
test-php / build (8.2) (push) Has been cancelled
test-php / build (8.3) (push) Has been cancelled
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
parent
617b2edea0
commit
8ec26e8083
|
|
@ -1,14 +1,17 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
/**
|
||||
* Card-style blocks
|
||||
*/
|
||||
|
||||
.card {
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
box-shadow: $bs-card;
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
box-shadow: vars.$bs-card;
|
||||
border-radius: 3px;
|
||||
break-inside: avoid;
|
||||
.body, p.empty-text {
|
||||
padding-block: $-m;
|
||||
padding-block: vars.$m;
|
||||
}
|
||||
a, p {
|
||||
word-wrap: break-word;
|
||||
|
|
@ -17,9 +20,9 @@
|
|||
}
|
||||
|
||||
.card-title {
|
||||
padding: $-m $-m $-xs;
|
||||
padding: vars.$m vars.$m vars.$xs;
|
||||
margin: 0;
|
||||
font-size: $fs-m;
|
||||
font-size: vars.$fs-m;
|
||||
color: #222;
|
||||
fill: #222;
|
||||
font-weight: 400;
|
||||
|
|
@ -29,21 +32,21 @@
|
|||
}
|
||||
.card-footer-link, button.card-footer-link {
|
||||
display: block;
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
line-height: 1;
|
||||
border-top: 1px solid;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
@include lightDark(border-color, #DDD, #555);
|
||||
@include mixins.lightDark(border-color, #DDD, #555);
|
||||
border-radius: 0 0 3px 3px;
|
||||
font-size: 0.9em;
|
||||
margin-top: $-xs;
|
||||
margin-top: vars.$xs;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@include lightDark(background-color, #f2f2f2, #2d2d2d);
|
||||
@include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
|
||||
}
|
||||
&:focus {
|
||||
@include lightDark(background-color, #eee, #222);
|
||||
@include mixins.lightDark(background-color, #eee, #222);
|
||||
outline: 1px dotted #666;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -51,17 +54,17 @@
|
|||
|
||||
.card.border-card {
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
|
||||
.card.drag-card {
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
padding: 0 0 0 ($-s + 28px);
|
||||
margin: $-s 0;
|
||||
padding: 0 0 0 (vars.$s + 28px);
|
||||
margin: vars.$s 0;
|
||||
position: relative;
|
||||
.drag-card-action {
|
||||
cursor: pointer;
|
||||
|
|
@ -73,30 +76,30 @@
|
|||
justify-content: center;
|
||||
width: 28px;
|
||||
flex-grow: 0;
|
||||
padding: 0 $-xs;
|
||||
padding: 0 vars.$xs;
|
||||
&:hover {
|
||||
@include lightDark(background-color, #eee, #2d2d2d);
|
||||
@include mixins.lightDark(background-color, #eee, #2d2d2d);
|
||||
}
|
||||
.svg-icon {
|
||||
margin-inline-end: 0px;
|
||||
}
|
||||
}
|
||||
.outline input {
|
||||
margin: $-s 0;
|
||||
margin: vars.$s 0;
|
||||
width: 100%;
|
||||
}
|
||||
.outline {
|
||||
position: relative;
|
||||
}
|
||||
.handle {
|
||||
@include lightDark(background-color, #eee, #2d2d2d);
|
||||
@include mixins.lightDark(background-color, #eee, #2d2d2d);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
> div {
|
||||
padding: 0 $-s;
|
||||
padding: 0 vars.$s;
|
||||
max-width: 80%;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -106,17 +109,17 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
margin-bottom: $-l;
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
margin-bottom: vars.$l;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
min-width: 100px;
|
||||
color: $text-dark;
|
||||
color: vars.$text-dark;
|
||||
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
|
||||
&:hover {
|
||||
color: $text-dark;
|
||||
color: vars.$text-dark;
|
||||
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 {
|
||||
width: 100%;
|
||||
|
|
@ -134,7 +137,7 @@
|
|||
border-bottom-width: 2px;
|
||||
}
|
||||
.grid-card-content, .grid-card-footer {
|
||||
padding: $-l;
|
||||
padding: vars.$l;
|
||||
}
|
||||
.grid-card-content + .grid-card-footer {
|
||||
padding-top: 0;
|
||||
|
|
@ -149,10 +152,10 @@
|
|||
}
|
||||
|
||||
.content-wrap.card {
|
||||
padding: $-m $-xxl;
|
||||
padding: vars.$m vars.$xxl;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
margin-bottom: $-l;
|
||||
margin-bottom: vars.$l;
|
||||
overflow: initial;
|
||||
min-height: 60vh;
|
||||
border-radius: 8px;
|
||||
|
|
@ -163,26 +166,26 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include smaller-than($xxl) {
|
||||
@include mixins.smaller-than(vars.$bp-xxl) {
|
||||
.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 {
|
||||
padding: $-m $-l;
|
||||
padding: vars.$m vars.$l;
|
||||
}
|
||||
}
|
||||
@include smaller-than($s) {
|
||||
@include mixins.smaller-than(vars.$bp-s) {
|
||||
.content-wrap.card {
|
||||
padding: $-m $-m;
|
||||
padding: vars.$m vars.$m;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
border: 1.5px solid;
|
||||
@include lightDark(border-color, #E2E2E2, #444);
|
||||
@include mixins.lightDark(border-color, #E2E2E2, #444);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -194,7 +197,7 @@
|
|||
}
|
||||
|
||||
.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;
|
||||
&:hover, &:focus-within {
|
||||
opacity: 1 !important;
|
||||
|
|
@ -209,29 +212,29 @@
|
|||
*/
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
margin-bottom: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
margin-bottom: vars.$xs;
|
||||
margin-inline-end: vars.$xs;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
overflow: hidden;
|
||||
font-size: 0.85em;
|
||||
@include lightDark(border-color, #CCC, #666);
|
||||
@include mixins.lightDark(border-color, #CCC, #666);
|
||||
a, span, a:hover, a:active {
|
||||
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;
|
||||
text-decoration: none;
|
||||
}
|
||||
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 {
|
||||
@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 {
|
||||
border-inline-start: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #666);
|
||||
@include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
|
||||
@include mixins.lightDark(border-color, #DDD, #666);
|
||||
@include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -253,7 +256,7 @@
|
|||
.api-method {
|
||||
font-size: 0.75rem;
|
||||
background-color: #888;
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
line-height: 1.3;
|
||||
opacity: 0.7;
|
||||
vertical-align: top;
|
||||
|
|
@ -271,7 +274,7 @@
|
|||
|
||||
.sticky-sidebar {
|
||||
position: sticky;
|
||||
top: $-m;
|
||||
max-height: calc(100vh - #{$-m});
|
||||
top: vars.$m;
|
||||
max-height: calc(100vh - #{vars.$m});
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
|
@ -8,9 +11,9 @@ button {
|
|||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4em;
|
||||
padding: $-xs*1.3 $-m;
|
||||
margin-top: $-xs;
|
||||
margin-bottom: $-xs;
|
||||
padding: vars.$xs*1.3 vars.$m;
|
||||
margin-top: vars.$xs;
|
||||
margin-bottom: vars.$xs;
|
||||
display: inline-block;
|
||||
font-weight: 400;
|
||||
outline: 0;
|
||||
|
|
@ -30,12 +33,12 @@ button {
|
|||
color: #FFFFFF;
|
||||
}
|
||||
&:hover {
|
||||
@include lightDark(box-shadow, $bs-light, $bs-dark);
|
||||
@include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
|
||||
filter: brightness(110%);
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted currentColor;
|
||||
outline-offset: -$-xs;
|
||||
outline-offset: -(vars.$xs);
|
||||
box-shadow: none;
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
|
@ -46,16 +49,16 @@ button {
|
|||
|
||||
.button.outline {
|
||||
background-color: transparent;
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include mixins.lightDark(color, #666, #AAA);
|
||||
fill: currentColor;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #CCC, #666);
|
||||
@include mixins.lightDark(border-color, #CCC, #666);
|
||||
&:hover, &:focus, &:active {
|
||||
@include lightDark(color, #444, #BBB);
|
||||
@include mixins.lightDark(color, #444, #BBB);
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #F2F2F2;
|
||||
@include lightDark(background-color, #f8f8f8, #444);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #444);
|
||||
filter: none;
|
||||
}
|
||||
&:active {
|
||||
|
|
@ -67,12 +70,12 @@ button {
|
|||
}
|
||||
|
||||
.button + .button {
|
||||
margin-inline-start: $-s;
|
||||
margin-inline-start: vars.$s;
|
||||
}
|
||||
|
||||
.button.small {
|
||||
font-size: 0.75rem;
|
||||
padding: $-xs*1.2 $-s;
|
||||
padding: vars.$xs*1.2 vars.$s;
|
||||
}
|
||||
|
||||
.text-button {
|
||||
|
|
@ -119,22 +122,22 @@ button {
|
|||
.icon-button:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 4px;
|
||||
@include lightDark(border-color, #DDD, #444);
|
||||
@include mixins.lightDark(border-color, #DDD, #444);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button.svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $-s $-m;
|
||||
padding-bottom: ($-s - 2px);
|
||||
padding: vars.$s vars.$m;
|
||||
padding-bottom: (vars.$s - 2px);
|
||||
width: 100%;
|
||||
svg {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
bottom: auto;
|
||||
margin-inline-end: $-m;
|
||||
margin-inline-end: vars.$m;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
/**
|
||||
* Custom CodeMirror BookStack overrides
|
||||
*/
|
||||
|
|
@ -6,7 +9,7 @@
|
|||
font-size: 12px;
|
||||
border: 1px solid #ddd;
|
||||
line-height: 1.4;
|
||||
margin-bottom: $-l;
|
||||
margin-bottom: vars.$l;
|
||||
}
|
||||
|
||||
.page-content .cm-editor,
|
||||
|
|
@ -42,9 +45,9 @@
|
|||
background-color: #EEE;
|
||||
border: 1px solid #DDD;
|
||||
border-start-end-radius: 4px;
|
||||
@include lightDark(background-color, #eee, #333);
|
||||
@include lightDark(border-color, #ddd, #444);
|
||||
@include lightDark(color, #444, #888);
|
||||
@include mixins.lightDark(background-color, #eee, #333);
|
||||
@include mixins.lightDark(border-color, #ddd, #444);
|
||||
@include mixins.lightDark(color, #444, #888);
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "mixins";
|
||||
|
||||
/**
|
||||
* Background colors
|
||||
*/
|
||||
|
|
@ -7,7 +9,7 @@
|
|||
}
|
||||
.primary-background-light {
|
||||
background-color: var(--color-primary-light);
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
background: #000;
|
||||
.text-link {
|
||||
color: #AAA !important;
|
||||
|
|
@ -50,12 +52,12 @@
|
|||
}
|
||||
|
||||
.text-muted {
|
||||
@include lightDark(color, #575757, #888888, true);
|
||||
@include mixins.lightDark(color, #575757, #888888, true);
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
@include lightDark(color, #222, #ccc, true);
|
||||
@include mixins.lightDark(color, #222, #ccc, true);
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
@use "sass:math";
|
||||
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
|
||||
// System wide notifications
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: $-xl;
|
||||
padding: $-m $-l;
|
||||
margin: vars.$xl;
|
||||
padding: vars.$m vars.$l;
|
||||
background-color: #FFF;
|
||||
@include lightDark(background-color, #fff, #444);
|
||||
@include mixins.lightDark(background-color, #fff, #444);
|
||||
border-radius: 4px;
|
||||
border-inline-start: 6px solid currentColor;
|
||||
box-shadow: $bs-large;
|
||||
box-shadow: vars.$bs-large;
|
||||
z-index: 999999;
|
||||
cursor: pointer;
|
||||
max-width: 360px;
|
||||
|
|
@ -28,20 +33,20 @@
|
|||
svg {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
padding-inline-end: $-s;
|
||||
padding-inline-end: vars.$s;
|
||||
fill: currentColor;
|
||||
}
|
||||
.dismiss {
|
||||
margin-top: -8px;
|
||||
svg {
|
||||
height: 1.0rem;
|
||||
@include lightDark(color, #444, #888);
|
||||
@include mixins.lightDark(color, #444, #888);
|
||||
}
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
line-height: 1.3;
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
color: #BBB;
|
||||
}
|
||||
}
|
||||
|
|
@ -78,12 +83,12 @@
|
|||
transform: rotate(90deg);
|
||||
}
|
||||
svg[data-icon="caret-right"] + * {
|
||||
margin-inline-start: $-xxs;
|
||||
margin-inline-start: vars.$xxs;
|
||||
}
|
||||
}
|
||||
|
||||
[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;
|
||||
z-index: 95536;
|
||||
width: 100%;
|
||||
|
|
@ -104,7 +109,7 @@
|
|||
}
|
||||
|
||||
.popup-body {
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
max-height: 90%;
|
||||
max-width: 1200px;
|
||||
width: 90%;
|
||||
|
|
@ -144,7 +149,7 @@
|
|||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
color: #FFF;
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -161,7 +166,7 @@
|
|||
background-color: var(--color-primary-light);
|
||||
min-height: 41px;
|
||||
button {
|
||||
padding: 10px $-m;
|
||||
padding: 10px vars.$m;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -183,7 +188,7 @@
|
|||
.popup-title {
|
||||
color: #FFF;
|
||||
margin-inline-end: auto;
|
||||
padding: 8px $-m;
|
||||
padding: 8px vars.$m;
|
||||
}
|
||||
&.flex-container-row {
|
||||
display: flex !important;
|
||||
|
|
@ -226,7 +231,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
.dropzone-landing-area {
|
||||
background-color: var(--color-primary-light);
|
||||
padding: $-m $-l;
|
||||
padding: vars.$m vars.$l;
|
||||
width: 100%;
|
||||
border: 1px dashed var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
|
|
@ -275,8 +280,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
display: flex;
|
||||
margin: 1rem;
|
||||
flex-direction: row;
|
||||
@include lightDark(background, #FFF, #444);
|
||||
box-shadow: $bs-large;
|
||||
@include mixins.lightDark(background, #FFF, #444);
|
||||
box-shadow: vars.$bs-large;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
padding-bottom: 3px;
|
||||
|
|
@ -354,7 +359,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
position: sticky;
|
||||
top: 0;
|
||||
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 {
|
||||
position: absolute;
|
||||
|
|
@ -367,16 +372,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
|
||||
.image-manager-filters {
|
||||
box-shadow: $bs-med;
|
||||
box-shadow: vars.$bs-med;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
border-bottom: 0 !important;
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
border: 1px solid #000 !important;
|
||||
}
|
||||
button {
|
||||
line-height: 0;
|
||||
@include lightDark(background-color, #FFF, #333);
|
||||
@include mixins.lightDark(background-color, #FFF, #333);
|
||||
}
|
||||
svg {
|
||||
margin: 0;
|
||||
|
|
@ -404,7 +409,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 1;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
transition: all linear 80ms;
|
||||
overflow: hidden;
|
||||
&.selected {
|
||||
|
|
@ -441,7 +446,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
&:focus .image-meta {
|
||||
opacity: 1;
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
.image-meta {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -450,7 +455,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
.image-manager .load-more {
|
||||
text-align: center;
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
clear: both;
|
||||
.loading-container {
|
||||
margin: 0;
|
||||
|
|
@ -467,7 +472,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
|
||||
.image-manager-warning {
|
||||
@include lightDark(background, #FFF, #333);
|
||||
@include mixins.lightDark(background, #FFF, #333);
|
||||
color: var(--color-warning);
|
||||
font-weight: bold;
|
||||
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-x: hidden;
|
||||
border-inline-start: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
.inner {
|
||||
min-height: auto;
|
||||
padding: $-m;
|
||||
padding: vars.$m;
|
||||
}
|
||||
.image-manager-viewer img {
|
||||
max-width: 100%;
|
||||
max-height: 180px;
|
||||
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);
|
||||
}
|
||||
.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 {
|
||||
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"] {
|
||||
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 {
|
||||
border-inline-end: none;
|
||||
}
|
||||
|
|
@ -534,14 +539,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
justify-items: start;
|
||||
text-align: start;
|
||||
border-bottom: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #444);
|
||||
margin-bottom: $-m;
|
||||
@include mixins.lightDark(border-color, #ddd, #444);
|
||||
margin-bottom: vars.$m;
|
||||
}
|
||||
|
||||
.tab-container [role="tablist"] button[role="tab"] {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
@include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
|
||||
padding: vars.$s;
|
||||
@include mixins.lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
margin-bottom: -1px;
|
||||
|
|
@ -551,8 +556,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
outline: 0 !important;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
@include 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(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
|
||||
@include mixins.lightDark(border-bottom-color, rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
|
||||
}
|
||||
&:focus {
|
||||
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 {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 0;
|
||||
padding: 0 $-xs;
|
||||
padding: 0 vars.$xs;
|
||||
}
|
||||
|
||||
.image-picker .none {
|
||||
|
|
@ -583,16 +588,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
.code-editor .lang-options button {
|
||||
display: block;
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
border-bottom: 1px solid;
|
||||
@include lightDark(color, #333, #AAA);
|
||||
@include lightDark(border-bottom-color, #EEE, #000);
|
||||
@include mixins.lightDark(color, #333, #AAA);
|
||||
@include mixins.lightDark(border-bottom-color, #EEE, #000);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: var(--font-code);
|
||||
font-size: 0.7rem;
|
||||
padding-left: 24px + $-xs;
|
||||
padding-left: 24px + vars.$xs;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
|
|
@ -633,7 +638,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
background-color: var(--color-primary-light);
|
||||
width: 100%;
|
||||
color: var(--color-primary);
|
||||
padding: $-xxs $-s;
|
||||
padding: vars.$xxs vars.$s;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -648,7 +653,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
|
@ -667,7 +672,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
height: 80vh;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
@include mixins.smaller-than(vars.$bp-s) {
|
||||
.code-editor .lang-options {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -680,21 +685,21 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
|
||||
.comments-container {
|
||||
padding-inline: $-xl;
|
||||
@include smaller-than($m) {
|
||||
padding-inline: $-xs;
|
||||
padding-inline: vars.$xl;
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
padding-inline: vars.$xs;
|
||||
}
|
||||
}
|
||||
.comment-box {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
.content {
|
||||
font-size: 0.666em;
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
p, ul, ol {
|
||||
font-size: $fs-m;
|
||||
font-size: vars.$fs-m;
|
||||
margin: .5em 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -708,7 +713,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
.actions button:focus {
|
||||
outline: 1px dotted var(--color-primary);
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
.actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -717,8 +722,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
.comment-box .header {
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xs $-s;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
padding: vars.$xs vars.$s;
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
|
@ -735,10 +740,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
|
||||
.comment-thread-indicator {
|
||||
border-inline-start: 3px dotted #DDD;
|
||||
@include lightDark(border-color, #DDD, #444);
|
||||
margin-inline-start: $-xs;
|
||||
width: $-l;
|
||||
height: calc(100% - $-m);
|
||||
@include mixins.lightDark(border-color, #DDD, #444);
|
||||
margin-inline-start: vars.$xs;
|
||||
width: vars.$l;
|
||||
height: calc(100% - vars.$m);
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
margin-bottom: -$-xxs !important;
|
||||
margin-bottom: -(vars.$xxs) !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.header {
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
}
|
||||
.right-meta {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
}
|
||||
}
|
||||
.comment-container-compact .comment-thread-indicator {
|
||||
width: $-m;
|
||||
width: vars.$m;
|
||||
}
|
||||
|
||||
#tag-manager .drag-card {
|
||||
|
|
@ -792,15 +797,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
border-inline-start: 1px solid;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
.template-item-actions button {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
}
|
||||
.template-item-actions button svg {
|
||||
margin: 0;
|
||||
|
|
@ -818,7 +823,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
line-height: normal;
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
&:hover {
|
||||
border-color: #DDD;
|
||||
}
|
||||
|
|
@ -828,7 +833,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
.dropdown-search-toggle-select {
|
||||
display: flex;
|
||||
gap: $-s;
|
||||
gap: vars.$s;
|
||||
line-height: normal;
|
||||
.svg-icon {
|
||||
height: 26px;
|
||||
|
|
@ -862,7 +867,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
|
||||
.dropdown-search-dropdown {
|
||||
box-shadow: $bs-med;
|
||||
box-shadow: vars.$bs-med;
|
||||
overflow: hidden;
|
||||
min-height: 100px;
|
||||
width: 240px;
|
||||
|
|
@ -871,16 +876,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
z-index: 80;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-top: $-m;
|
||||
@include rtl {
|
||||
margin-top: vars.$m;
|
||||
@include mixins.rtl {
|
||||
right: auto;
|
||||
left: -$-m;
|
||||
left: -(vars.$m);
|
||||
}
|
||||
.dropdown-search-search .svg-icon {
|
||||
position: absolute;
|
||||
left: $-s;
|
||||
@include rtl {
|
||||
right: $-s;
|
||||
left: vars.$s;
|
||||
@include mixins.rtl {
|
||||
right: vars.$s;
|
||||
left: auto;
|
||||
}
|
||||
top: 11px;
|
||||
|
|
@ -893,14 +898,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
text-align: start;
|
||||
}
|
||||
.dropdown-search-item {
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
&:hover,&:focus {
|
||||
background-color: #F2F2F2;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
input, input:focus {
|
||||
padding-inline-start: $-xl;
|
||||
padding-inline-start: vars.$xl;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
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 {
|
||||
inset-inline: $-m auto;
|
||||
inset-inline: vars.$m auto;
|
||||
}
|
||||
.dropdown-search-dropdown .dropdown-search-list {
|
||||
max-height: 240px;
|
||||
|
|
@ -924,13 +929,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
.item-list-row {
|
||||
border: 1.5px solid;
|
||||
@include lightDark(border-color, #E2E2E2, #444);
|
||||
@include mixins.lightDark(border-color, #E2E2E2, #444);
|
||||
border-bottom-width: 0;
|
||||
label {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
@include lightDark(background-color, #F6F6F6, #333);
|
||||
@include mixins.lightDark(background-color, #F6F6F6, #333);
|
||||
}
|
||||
}
|
||||
.item-list-row:first-child {
|
||||
|
|
@ -980,7 +985,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
.shortcut-hint {
|
||||
position: fixed;
|
||||
padding: $-xxs $-xxs;
|
||||
padding: vars.$xxs vars.$xxs;
|
||||
font-size: .85rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
|
|
@ -996,8 +1001,8 @@ $btt-size: 40px;
|
|||
.back-to-top {
|
||||
background-color: var(--color-primary);
|
||||
position: fixed;
|
||||
bottom: $-m;
|
||||
right: $-l;
|
||||
bottom: vars.$m;
|
||||
right: vars.$l;
|
||||
padding: 5px 7px;
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
|
|
@ -1036,17 +1041,17 @@ $btt-size: 40px;
|
|||
max-height: 280px;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
border-radius: 3px;
|
||||
min-height: 20px;
|
||||
@include lightDark(background-color, #EEE, #000);
|
||||
@include mixins.lightDark(background-color, #EEE, #000);
|
||||
}
|
||||
.scroll-box-item {
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
margin-top: -1px;
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 1px;
|
||||
|
|
@ -1055,7 +1060,7 @@ $btt-size: 40px;
|
|||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
@include lightDark(background-color, #f8f8f8, #333);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #333);
|
||||
}
|
||||
.handle {
|
||||
color: #AAA;
|
||||
|
|
@ -1068,13 +1073,13 @@ $btt-size: 40px;
|
|||
margin: 0;
|
||||
}
|
||||
> * {
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
}
|
||||
.handle + * {
|
||||
padding-left: 0;
|
||||
}
|
||||
&:hover .handle {
|
||||
@include lightDark(color, #444, #FFF);
|
||||
@include mixins.lightDark(color, #444, #FFF);
|
||||
}
|
||||
&:hover button {
|
||||
opacity: 1;
|
||||
|
|
@ -1087,8 +1092,8 @@ $btt-size: 40px;
|
|||
input.scroll-box-search, .scroll-box-header-item {
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
margin-bottom: -1px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
float: left !important;
|
||||
margin: $-xs $-m $-m 0;
|
||||
margin: vars.$xs vars.$m vars.$m 0;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
img.align-right, table.align-right, iframe.align-right, video.align-right {
|
||||
float: right !important;
|
||||
margin: $-xs 0 $-xs $-s;
|
||||
margin: vars.$xs 0 vars.$xs vars.$s;
|
||||
}
|
||||
.align-center {
|
||||
text-align: center;
|
||||
|
|
@ -40,7 +43,7 @@
|
|||
}
|
||||
hr {
|
||||
clear: both;
|
||||
margin: $-m 0;
|
||||
margin: vars.$m 0;
|
||||
}
|
||||
table {
|
||||
hyphens: auto;
|
||||
|
|
@ -63,23 +66,23 @@
|
|||
|
||||
details {
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #555);
|
||||
@include mixins.lightDark(border-color, #DDD, #555);
|
||||
margin-bottom: 1em;
|
||||
padding: $-s;
|
||||
padding: vars.$s;
|
||||
}
|
||||
details > summary {
|
||||
margin-top: -$-s;
|
||||
margin-left: -$-s;
|
||||
margin-right: -$-s;
|
||||
margin-bottom: -$-s;
|
||||
margin-top: -(vars.$s);
|
||||
margin-left: -(vars.$s);
|
||||
margin-right: -(vars.$s);
|
||||
margin-bottom: -(vars.$s);
|
||||
font-weight: bold;
|
||||
@include lightDark(background-color, #EEE, #333);
|
||||
padding: $-xs $-s;
|
||||
@include mixins.lightDark(background-color, #EEE, #333);
|
||||
padding: vars.$xs vars.$s;
|
||||
}
|
||||
details[open] > summary {
|
||||
margin-bottom: $-s;
|
||||
margin-bottom: vars.$s;
|
||||
border-bottom: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #555);
|
||||
@include mixins.lightDark(border-color, #DDD, #555);
|
||||
}
|
||||
details > summary + * {
|
||||
margin-top: .2em;
|
||||
|
|
@ -138,10 +141,10 @@ body .page-content img,
|
|||
border-inline-start: 3px solid #BBB;
|
||||
border-inline-end: none;
|
||||
background-color: #EEE;
|
||||
padding: $-s;
|
||||
padding-left: $-xl;
|
||||
padding-inline-start: $-xl;
|
||||
padding-inline-end: $-s;
|
||||
padding: vars.$s;
|
||||
padding-left: vars.$xl;
|
||||
padding-inline-start: vars.$xl;
|
||||
padding-inline-end: vars.$s;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
|
@ -151,8 +154,8 @@ body .page-content img,
|
|||
content: '';
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
left: $-xs + 2px;
|
||||
inset-inline-start: $-xs + 2px;
|
||||
left: vars.$xs + 2px;
|
||||
inset-inline-start: vars.$xs + 2px;
|
||||
inset-inline-end: unset;
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
|
|
@ -162,30 +165,30 @@ body .page-content img,
|
|||
opacity: 0.8;
|
||||
}
|
||||
&.success {
|
||||
@include lightDark(border-color, $positive, $positive-dark);
|
||||
@include lightDark(background-color, #eafdeb, #122913);
|
||||
@include lightDark(color, #063409, $positive-dark);
|
||||
@include mixins.lightDark(border-color, vars.$positive, vars.$positive-dark);
|
||||
@include mixins.lightDark(background-color, #eafdeb, #122913);
|
||||
@include mixins.lightDark(color, #063409, vars.$positive-dark);
|
||||
}
|
||||
&.success:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
|
||||
}
|
||||
&.danger {
|
||||
@include lightDark(border-color, $negative, $negative-dark);
|
||||
@include lightDark(background-color, #fcdbdb, #250505);
|
||||
@include lightDark(color, #4d0706, $negative-dark);
|
||||
@include mixins.lightDark(border-color, vars.$negative, vars.$negative-dark);
|
||||
@include mixins.lightDark(background-color, #fcdbdb, #250505);
|
||||
@include mixins.lightDark(color, #4d0706, vars.$negative-dark);
|
||||
}
|
||||
&.danger:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
|
||||
}
|
||||
&.info {
|
||||
@include lightDark(border-color, $info, $info-dark);
|
||||
@include lightDark(background-color, #d3efff, #001825);
|
||||
@include lightDark(color, #01466c, $info-dark);
|
||||
@include mixins.lightDark(border-color, vars.$info, vars.$info-dark);
|
||||
@include mixins.lightDark(background-color, #d3efff, #001825);
|
||||
@include mixins.lightDark(color, #01466c, vars.$info-dark);
|
||||
}
|
||||
&.warning {
|
||||
@include lightDark(border-color, $warning, $warning-dark);
|
||||
@include lightDark(background-color, #fee3d3, #30170a);
|
||||
@include lightDark(color, #6a2802, $warning-dark);
|
||||
@include mixins.lightDark(border-color, vars.$warning, vars.$warning-dark);
|
||||
@include mixins.lightDark(background-color, #fee3d3, #30170a);
|
||||
@include mixins.lightDark(color, #6a2802, vars.$warning-dark);
|
||||
}
|
||||
&.warning:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
// Common variables
|
||||
:root {
|
||||
--editor-color-primary: #206ea7;
|
||||
|
|
@ -262,11 +265,11 @@ body.editor-is-fullscreen {
|
|||
color: #FFF;
|
||||
}
|
||||
.editor-modal-title {
|
||||
padding: 8px $-m;
|
||||
padding: 8px vars.$m;
|
||||
}
|
||||
.editor-modal-close {
|
||||
color: #FFF;
|
||||
padding: 8px $-m;
|
||||
padding: 8px vars.$m;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
|
@ -281,7 +284,7 @@ body.editor-is-fullscreen {
|
|||
}
|
||||
}
|
||||
.editor-modal-body {
|
||||
padding: $-m;
|
||||
padding: vars.$m;
|
||||
}
|
||||
|
||||
// Specific UI elements
|
||||
|
|
@ -493,21 +496,21 @@ textarea.editor-form-field-input {
|
|||
.editor-form-actions {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: $-s;
|
||||
margin-top: $-m;
|
||||
gap: vars.$s;
|
||||
margin-top: vars.$m;
|
||||
}
|
||||
.editor-form-actions > button {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4em;
|
||||
padding: $-xs*1.3 $-m;
|
||||
padding: vars.$xs*1.3 vars.$m;
|
||||
font-weight: 400;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
box-shadow: none;
|
||||
&:focus {
|
||||
outline: 1px dotted currentColor;
|
||||
outline-offset: -$-xs;
|
||||
outline-offset: -(vars.$xs);
|
||||
box-shadow: none;
|
||||
filter: brightness(90%);
|
||||
}
|
||||
|
|
@ -517,20 +520,20 @@ textarea.editor-form-field-input {
|
|||
color: #FFF;
|
||||
border: 1px solid var(--color-primary);
|
||||
&:hover {
|
||||
@include lightDark(box-shadow, $bs-light, $bs-dark);
|
||||
@include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
|
||||
filter: brightness(110%);
|
||||
}
|
||||
}
|
||||
.editor-form-action-secondary {
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #CCC, #666);
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include mixins.lightDark(border-color, #CCC, #666);
|
||||
@include mixins.lightDark(color, #666, #AAA);
|
||||
&:hover, &:focus, &:active {
|
||||
@include lightDark(color, #444, #BBB);
|
||||
@include mixins.lightDark(color, #444, #BBB);
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #F2F2F2;
|
||||
@include lightDark(background-color, #f8f8f8, #444);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #444);
|
||||
filter: none;
|
||||
}
|
||||
&:active {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
@use "sass:math";
|
||||
|
||||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
|
||||
.input-base {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #D4D4D4;
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
@include lightDark(border-color, #d4d4d4, #111);
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
@include mixins.lightDark(border-color, #d4d4d4, #111);
|
||||
@include mixins.lightDark(color, #666, #AAA);
|
||||
display: inline-block;
|
||||
font-size: $fs-m;
|
||||
padding: $-xs*1.8;
|
||||
font-size: vars.$fs-m;
|
||||
padding: vars.$xs*1.8;
|
||||
height: 40px;
|
||||
width: 250px;
|
||||
max-width: 100%;
|
||||
|
|
@ -49,7 +54,7 @@
|
|||
#markdown-editor-input {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
color: #444;
|
||||
border-radius: 0;
|
||||
max-height: 100%;
|
||||
|
|
@ -72,7 +77,7 @@
|
|||
.markdown-editor-wrap {
|
||||
border-top: 1px solid #DDD;
|
||||
border-bottom: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
|
@ -92,11 +97,11 @@
|
|||
|
||||
.markdown-panel-divider {
|
||||
width: 2px;
|
||||
@include lightDark(background-color, #ddd, #000);
|
||||
@include mixins.lightDark(background-color, #ddd, #000);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
#markdown-editor {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -109,7 +114,7 @@
|
|||
}
|
||||
.editor-toolbar-label {
|
||||
float: none !important;
|
||||
@include lightDark(border-color, #DDD, #555);
|
||||
@include mixins.lightDark(border-color, #DDD, #555);
|
||||
display: block;
|
||||
}
|
||||
.markdown-editor-wrap:not(.active) .editor-toolbar + div,
|
||||
|
|
@ -150,10 +155,10 @@ html.markdown-editor-display.dark-mode {
|
|||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
border-bottom: 1px solid #CCC;
|
||||
@include lightDark(background-color, #FFF, #333);
|
||||
@include lightDark(border-color, #CCC, #000);
|
||||
@include mixins.lightDark(background-color, #FFF, #333);
|
||||
@include mixins.lightDark(border-color, #CCC, #000);
|
||||
flex: none;
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
button {
|
||||
color: #AAA;
|
||||
}
|
||||
|
|
@ -161,12 +166,12 @@ html.markdown-editor-display.dark-mode {
|
|||
}
|
||||
|
||||
.editor-toolbar .buttons {
|
||||
font-size: $fs-m;
|
||||
font-size: vars.$fs-m;
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
}
|
||||
.toggle-switch {
|
||||
margin: $-s 0;
|
||||
margin: vars.$s 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -175,18 +180,18 @@ html.markdown-editor-display.dark-mode {
|
|||
width: 2rem;
|
||||
text-align: center;
|
||||
border-left: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #555);
|
||||
@include mixins.lightDark(border-color, #DDD, #555);
|
||||
svg {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
&:hover {
|
||||
@include lightDark(background-color, #DDD, #222);
|
||||
@include mixins.lightDark(background-color, #DDD, #222);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
label {
|
||||
@include lightDark(color, #666, #ddd);
|
||||
@include mixins.lightDark(color, #666, #ddd);
|
||||
display: block;
|
||||
line-height: 1.4em;
|
||||
font-size: 0.94em;
|
||||
|
|
@ -202,12 +207,12 @@ label.radio, label.checkbox {
|
|||
font-weight: 400;
|
||||
user-select: none;
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
margin-inline-end: $-xs;
|
||||
margin-inline-end: vars.$xs;
|
||||
}
|
||||
}
|
||||
|
||||
label.inline.checkbox {
|
||||
margin-inline-end: $-m;
|
||||
margin-inline-end: vars.$m;
|
||||
}
|
||||
|
||||
label + p.small {
|
||||
|
|
@ -218,7 +223,7 @@ table.form-table {
|
|||
max-width: 100%;
|
||||
td {
|
||||
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-repeat: no-repeat;
|
||||
|
||||
@include rtl {
|
||||
@include mixins.rtl {
|
||||
background-position: 20px 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -257,9 +262,9 @@ input[type=color] {
|
|||
.toggle-switch {
|
||||
user-select: none;
|
||||
display: inline-grid;
|
||||
grid-template-columns: (16px + $-s) 1fr;
|
||||
grid-template-columns: (16px + vars.$s) 1fr;
|
||||
align-items: center;
|
||||
margin: $-m 0;
|
||||
margin: vars.$m 0;
|
||||
.custom-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -302,7 +307,7 @@ input[type=color] {
|
|||
}
|
||||
.toggle-switch-list {
|
||||
.toggle-switch {
|
||||
margin: $-xs 0;
|
||||
margin: vars.$xs 0;
|
||||
}
|
||||
&.compact .toggle-switch {
|
||||
margin: 1px 0;
|
||||
|
|
@ -310,18 +315,18 @@ input[type=color] {
|
|||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $-s;
|
||||
margin-bottom: vars.$s;
|
||||
}
|
||||
|
||||
.setting-list > div {
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xl 0;
|
||||
padding: vars.$xl 0;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.setting-list-label {
|
||||
@include lightDark(color, #222, #DDD);
|
||||
@include mixins.lightDark(color, #222, #DDD);
|
||||
color: #222;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -329,7 +334,7 @@ input[type=color] {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
.setting-list-label + .grid {
|
||||
margin-top: $-m;
|
||||
margin-top: vars.$m;
|
||||
}
|
||||
|
||||
.setting-list .grid, .stretch-inputs {
|
||||
|
|
@ -349,19 +354,19 @@ input[type=color] {
|
|||
|
||||
.form-group {
|
||||
div.text-pos, div.text-neg, p.text-post, p.text-neg {
|
||||
padding: $-xs 0;
|
||||
padding: vars.$xs 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.collapsible {
|
||||
padding: 0 $-m;
|
||||
padding: 0 vars.$m;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #000);
|
||||
@include mixins.lightDark(border-color, #DDD, #000);
|
||||
border-radius: 4px;
|
||||
.collapse-title {
|
||||
margin-inline-start: -$-m;
|
||||
margin-inline-end: -$-m;
|
||||
padding: $-s $-m;
|
||||
margin-inline-start: -(vars.$m);
|
||||
margin-inline-end: -(vars.$m);
|
||||
padding: vars.$s vars.$m;
|
||||
display: block;
|
||||
width: calc(100% + 32px);
|
||||
text-align: start;
|
||||
|
|
@ -377,13 +382,13 @@ input[type=color] {
|
|||
.collapse-title label:before {
|
||||
display: inline-block;
|
||||
content: '▸';
|
||||
margin-inline-end: $-m;
|
||||
margin-inline-end: vars.$m;
|
||||
transition: all ease-in-out 400ms;
|
||||
transform: rotate(0);
|
||||
}
|
||||
.collapse-content {
|
||||
display: none;
|
||||
padding-bottom: $-m;
|
||||
padding-bottom: vars.$m;
|
||||
}
|
||||
&.open .collapse-title label:before {
|
||||
transform: rotate(90deg);
|
||||
|
|
@ -407,7 +412,7 @@ input[type=color] {
|
|||
.title-input input[type="text"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $-s;
|
||||
padding: vars.$s;
|
||||
margin-top: 0;
|
||||
font-size: 2em;
|
||||
height: auto;
|
||||
|
|
@ -416,15 +421,15 @@ input[type=color] {
|
|||
.description-input textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $-s;
|
||||
font-size: $fs-m;
|
||||
padding: vars.$s;
|
||||
font-size: vars.$fs-m;
|
||||
color: #666;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.description-input > .tox-tinymce {
|
||||
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;
|
||||
.tox-toolbar__primary {
|
||||
justify-content: end;
|
||||
|
|
@ -437,7 +442,7 @@ input[type=color] {
|
|||
button[tabindex="-1"] {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include mixins.lightDark(color, #666, #AAA);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
|
|
@ -446,8 +451,8 @@ input[type=color] {
|
|||
}
|
||||
input {
|
||||
display: block;
|
||||
padding: $-xs * 1.5;
|
||||
padding-inline-start: $-l + 4px;
|
||||
padding: vars.$xs * 1.5;
|
||||
padding-inline-start: vars.$l + 4px;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -466,10 +471,10 @@ input[type=color] {
|
|||
height: 38px;
|
||||
z-index: -1;
|
||||
&.floating {
|
||||
box-shadow: $bs-med;
|
||||
box-shadow: vars.$bs-med;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
|
@ -477,7 +482,7 @@ input[type=color] {
|
|||
height: 100%;
|
||||
border-radius: 0;
|
||||
border: 1px solid #ddd;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
margin-inline-start: -1px;
|
||||
&:last-child {
|
||||
border-inline-end: 0;
|
||||
|
|
@ -486,7 +491,7 @@ input[type=color] {
|
|||
input {
|
||||
border: 0;
|
||||
flex: 5;
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
&:focus, &:active {
|
||||
outline: 1px dotted var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
|
|
@ -498,8 +503,8 @@ input[type=color] {
|
|||
width: 48px;
|
||||
border-inline-start: 1px solid #DDD;
|
||||
background-color: #FFF;
|
||||
@include lightDark(background-color, #FFF, #333);
|
||||
@include lightDark(color, #444, #AAA);
|
||||
@include mixins.lightDark(background-color, #FFF, #333);
|
||||
@include mixins.lightDark(color, #444, #AAA);
|
||||
}
|
||||
button:focus {
|
||||
outline: 1px dotted var(--color-primary);
|
||||
|
|
@ -508,7 +513,7 @@ input[type=color] {
|
|||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
@include smaller-than($s) {
|
||||
@include mixins.smaller-than(vars.$bp-s) {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
|
@ -548,30 +553,30 @@ input[type=color] {
|
|||
.custom-simple-file-input {
|
||||
max-width: 100%;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #666);
|
||||
@include mixins.lightDark(border-color, #DDD, #666);
|
||||
border-radius: 4px;
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
}
|
||||
.custom-simple-file-input::file-selector-button {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4em;
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
border: 1px solid;
|
||||
font-weight: 400;
|
||||
outline: 0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: $-m;
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include lightDark(border-color, #CCC, #666);
|
||||
margin-right: vars.$m;
|
||||
@include mixins.lightDark(color, #666, #AAA);
|
||||
@include mixins.lightDark(border-color, #CCC, #666);
|
||||
&:hover, &:focus, &:active {
|
||||
@include lightDark(color, #444, #BBB);
|
||||
@include mixins.lightDark(color, #444, #BBB);
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #F2F2F2;
|
||||
@include lightDark(background-color, #f8f8f8, #444);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #444);
|
||||
filter: none;
|
||||
}
|
||||
&:active {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
|
||||
@include smaller-than($l) {
|
||||
@include mixins.smaller-than(vars.$bp-l) {
|
||||
header.grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-row-gap: 0;
|
||||
|
|
@ -20,8 +23,8 @@ header {
|
|||
top: 0;
|
||||
color: rgb(250, 250, 250);
|
||||
border-bottom: 1px solid #DDD;
|
||||
box-shadow: $bs-card;
|
||||
@include lightDark(border-bottom-color, #DDD, #000);
|
||||
box-shadow: vars.$bs-card;
|
||||
@include mixins.lightDark(border-bottom-color, #DDD, #000);
|
||||
.header-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -33,7 +36,7 @@ header {
|
|||
}
|
||||
.links a {
|
||||
display: inline-block;
|
||||
padding: 10px $-m;
|
||||
padding: 10px vars.$m;
|
||||
color: #FFF;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -42,7 +45,7 @@ header {
|
|||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
.dropdown-container {
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-start: vars.$m;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
.avatar, .user-name {
|
||||
|
|
@ -58,12 +61,12 @@ header {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: $-s;
|
||||
margin: 0 (-$-s);
|
||||
padding: vars.$s;
|
||||
margin: 0 (-(vars.$s));
|
||||
border-radius: 3px;
|
||||
gap: $-xs;
|
||||
gap: vars.$xs;
|
||||
> span {
|
||||
padding-inline-start: $-xs;
|
||||
padding-inline-start: vars.$xs;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
@ -75,8 +78,8 @@ header {
|
|||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
@include between($l, $xl) {
|
||||
padding-inline-start: $-xs;
|
||||
@include mixins.between(vars.$bp-l, vars.$bp-xl) {
|
||||
padding-inline-start: vars.$xs;
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -98,7 +101,7 @@ header .search-box {
|
|||
color: #EEE;
|
||||
z-index: 2;
|
||||
height: auto;
|
||||
padding: $-xs*1.5;
|
||||
padding: vars.$xs*1.5;
|
||||
padding-inline-start: 40px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
@ -109,7 +112,7 @@ header .search-box {
|
|||
color: #FFF;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@include between($l, $xl) {
|
||||
@include mixins.between(vars.$bp-l, vars.$bp-xl) {
|
||||
max-width: 200px;
|
||||
}
|
||||
&:focus-within #header-search-box-button {
|
||||
|
|
@ -122,7 +125,7 @@ header .search-box {
|
|||
top: 10px;
|
||||
color: #FFF;
|
||||
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 {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
|
|
@ -131,15 +134,15 @@ header .search-box {
|
|||
.global-search-suggestions {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -$-s;
|
||||
top: -(vars.$s);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
margin-left: -$-xxl;
|
||||
margin-right: -$-xxl;
|
||||
margin-left: -(vars.$xxl);
|
||||
margin-right: -(vars.$xxl);
|
||||
padding-top: 56px;
|
||||
border-radius: 3px;
|
||||
box-shadow: $bs-hover;
|
||||
box-shadow: vars.$bs-hover;
|
||||
transform-origin: top center;
|
||||
opacity: .5;
|
||||
transform: scale(0.9);
|
||||
|
|
@ -166,19 +169,19 @@ header .search-box.search-active:focus-within {
|
|||
display: block;
|
||||
}
|
||||
input {
|
||||
@include lightDark(background-color, #EEE, #333);
|
||||
@include lightDark(border-color, #DDD, #111);
|
||||
@include mixins.lightDark(background-color, #EEE, #333);
|
||||
@include mixins.lightDark(border-color, #DDD, #111);
|
||||
}
|
||||
#header-search-box-button, input {
|
||||
@include lightDark(color, #444, #AAA);
|
||||
@include mixins.lightDark(color, #444, #AAA);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
padding: ($-s - 6px) $-s;
|
||||
margin: 6px (-$-s);
|
||||
gap: $-s;
|
||||
padding: (vars.$s - 6px) vars.$s;
|
||||
margin: 6px (-(vars.$s));
|
||||
gap: vars.$s;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
|
|
@ -204,7 +207,7 @@ header .search-box.search-active:focus-within {
|
|||
font-size: 2em;
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
border-radius: 4px;
|
||||
padding: 0 $-xs;
|
||||
padding: 0 vars.$xs;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
display: none;
|
||||
z-index: 10;
|
||||
inset-inline-end: $-m;
|
||||
inset-inline-end: vars.$m;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
box-shadow: $bs-hover;
|
||||
margin-top: $-m;
|
||||
padding: $-xs 0;
|
||||
box-shadow: vars.$bs-hover;
|
||||
margin-top: vars.$m;
|
||||
padding: vars.$xs 0;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -235,14 +238,14 @@ header .search-box.search-active:focus-within {
|
|||
text-align: start;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: 8px $-m;
|
||||
gap: $-m;
|
||||
color: $text-dark;
|
||||
padding: 8px vars.$m;
|
||||
gap: vars.$m;
|
||||
color: vars.$text-dark;
|
||||
grid-template-columns: 16px auto;
|
||||
line-height: 1.4;
|
||||
@include lightDark(color, $text-dark, #eee);
|
||||
@include mixins.lightDark(color, vars.$text-dark, #eee);
|
||||
svg {
|
||||
margin-inline-end: $-s;
|
||||
margin-inline-end: vars.$s;
|
||||
width: 16px;
|
||||
}
|
||||
&:hover {
|
||||
|
|
@ -251,7 +254,7 @@ header .search-box.search-active:focus-within {
|
|||
text-decoration: none;
|
||||
}
|
||||
&:focus {
|
||||
@include lightDark(background-color, #eee, #333);
|
||||
@include mixins.lightDark(background-color, #eee, #333);
|
||||
outline-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
|
@ -280,19 +283,19 @@ header .search-box.search-active:focus-within {
|
|||
z-index: 5;
|
||||
background-color: #FFF;
|
||||
border-bottom: 1px solid #DDD;
|
||||
@include lightDark(border-bottom-color, #DDD, #333);
|
||||
box-shadow: $bs-card;
|
||||
@include mixins.lightDark(border-bottom-color, #DDD, #333);
|
||||
box-shadow: vars.$bs-card;
|
||||
}
|
||||
.tri-layout-mobile-tab {
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #BBB;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include lightDark(border-bottom-color, #BBB, #333);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(border-bottom-color, #BBB, #333);
|
||||
&:first-child {
|
||||
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"] {
|
||||
border-bottom-color: currentColor !important;
|
||||
|
|
@ -308,8 +311,8 @@ header .search-box.search-active:focus-within {
|
|||
opacity: 0.7;
|
||||
.icon-list-item {
|
||||
width: auto;
|
||||
padding-top: $-xs;
|
||||
padding-bottom: $-xs;
|
||||
padding-top: vars.$xs;
|
||||
padding-bottom: vars.$xs;
|
||||
}
|
||||
.separator {
|
||||
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 {
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
> span + span {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -355,5 +358,5 @@ header .search-box.search-active:focus-within {
|
|||
|
||||
.faded span.faded-text {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
padding: vars.$s;
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline-color: var(--color-primary);
|
||||
|
|
@ -21,9 +24,9 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-size: $fs-m;
|
||||
font-size: vars.$fs-m;
|
||||
line-height: 1.6;
|
||||
@include lightDark(color, #444, #AAA);
|
||||
@include mixins.lightDark(color, #444, #AAA);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,16 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
|
||||
/**
|
||||
* Generic content container
|
||||
*/
|
||||
.container {
|
||||
max-width: $xxl;
|
||||
max-width: vars.$bp-xxl;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-end: $-m;
|
||||
padding-inline-start: vars.$m;
|
||||
padding-inline-end: vars.$m;
|
||||
&.medium {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
|
@ -24,8 +27,8 @@
|
|||
*/
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: $-l;
|
||||
grid-row-gap: $-l;
|
||||
grid-column-gap: vars.$l;
|
||||
grid-row-gap: vars.$l;
|
||||
> * {
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
@ -42,15 +45,15 @@
|
|||
grid-template-columns: 1fr 3fr;
|
||||
}
|
||||
&.gap-y-xs {
|
||||
grid-row-gap: $-xs;
|
||||
grid-row-gap: vars.$xs;
|
||||
}
|
||||
&.gap-xl {
|
||||
grid-column-gap: $-xl;
|
||||
grid-row-gap: $-xl;
|
||||
grid-column-gap: vars.$xl;
|
||||
grid-row-gap: vars.$xl;
|
||||
}
|
||||
&.gap-xxl {
|
||||
grid-column-gap: $-xxl;
|
||||
grid-row-gap: $-xxl;
|
||||
grid-column-gap: vars.$xxl;
|
||||
grid-row-gap: vars.$xxl;
|
||||
}
|
||||
&.v-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-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
|
@ -78,8 +81,8 @@
|
|||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.grid.gap-xl {
|
||||
grid-column-gap: $-m;
|
||||
grid-row-gap: $-m;
|
||||
grid-column-gap: vars.$m;
|
||||
grid-row-gap: vars.$m;
|
||||
}
|
||||
.grid.right-focus.reverse-collapse > *:nth-child(2) {
|
||||
order: 0;
|
||||
|
|
@ -89,13 +92,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
@include mixins.smaller-than(vars.$bp-s) {
|
||||
.grid.third:not(.no-break) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($xs) {
|
||||
@include mixins.smaller-than(vars.$bp-xs) {
|
||||
.grid.half.collapse-xs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -287,19 +290,19 @@ body.flexbox {
|
|||
|
||||
.sticky-top-m {
|
||||
position: sticky;
|
||||
top: $-m;
|
||||
top: vars.$m;
|
||||
}
|
||||
|
||||
/**
|
||||
* Visibility
|
||||
*/
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include smaller-than($size) {
|
||||
@each $sizeLetter, $size in vars.$screen-sizes {
|
||||
@include mixins.smaller-than($size) {
|
||||
.hide-under-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@include larger-than($size) {
|
||||
@include mixins.larger-than($size) {
|
||||
.hide-over-#{$sizeLetter} {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -333,7 +336,7 @@ body.flexbox {
|
|||
columns: 2;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
.dual-column-content {
|
||||
columns: 1;
|
||||
}
|
||||
|
|
@ -357,11 +360,11 @@ body.flexbox {
|
|||
*/
|
||||
.tri-layout-container {
|
||||
display: grid;
|
||||
margin-inline-start: $-xl;
|
||||
margin-inline-end: $-xl;
|
||||
margin-inline-start: vars.$xl;
|
||||
margin-inline-end: vars.$xl;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-template-areas: "a b c";
|
||||
grid-column-gap: $-xl;
|
||||
grid-column-gap: vars.$xl;
|
||||
position: relative;
|
||||
}
|
||||
.tri-layout-sides {
|
||||
|
|
@ -379,7 +382,7 @@ body.flexbox {
|
|||
}
|
||||
.tri-layout-middle {
|
||||
grid-area: b;
|
||||
padding-top: $-m;
|
||||
padding-top: vars.$m;
|
||||
min-width: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
|
@ -392,9 +395,9 @@ body.flexbox {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
@include larger-than($xxl) {
|
||||
@include mixins.larger-than(vars.$bp-xxl) {
|
||||
.tri-layout-left-contents, .tri-layout-right-contents {
|
||||
padding: $-xl $-m;
|
||||
padding: vars.$xl vars.$m;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: 100vh;
|
||||
|
|
@ -413,22 +416,22 @@ body.flexbox {
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@include between($xxl, $xxxl) {
|
||||
@include mixins.between(vars.$bp-xxl, vars.$bp-xxxl) {
|
||||
.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 {
|
||||
grid-column-gap: $-s;
|
||||
margin-inline-start: $-m;
|
||||
margin-inline-end: $-m;
|
||||
grid-column-gap: vars.$s;
|
||||
margin-inline-start: vars.$m;
|
||||
margin-inline-end: vars.$m;
|
||||
}
|
||||
}
|
||||
@include smaller-than($xxl) {
|
||||
@include mixins.smaller-than(vars.$bp-xxl) {
|
||||
.tri-layout-container {
|
||||
grid-template-areas: "a b b";
|
||||
grid-template-columns: 1fr 3fr;
|
||||
grid-template-rows: min-content min-content 1fr;
|
||||
padding-inline-end: $-l;
|
||||
padding-inline-end: vars.$l;
|
||||
}
|
||||
.tri-layout-sides {
|
||||
grid-column-start: a;
|
||||
|
|
@ -438,7 +441,7 @@ body.flexbox {
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
@include between($l, $xxl) {
|
||||
@include mixins.between(vars.$bp-l, vars.$bp-xxl) {
|
||||
.tri-layout-sides-content {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -454,12 +457,12 @@ body.flexbox {
|
|||
}
|
||||
}
|
||||
}
|
||||
@include larger-than($l) {
|
||||
@include mixins.larger-than(vars.$bp-l) {
|
||||
.tri-layout-mobile-tabs {
|
||||
display: none;
|
||||
}
|
||||
.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;
|
||||
&:hover, &:focus-within {
|
||||
opacity: 1 !important;
|
||||
|
|
@ -469,16 +472,16 @@ body.flexbox {
|
|||
}
|
||||
}
|
||||
}
|
||||
@include smaller-than($l) {
|
||||
@include mixins.smaller-than(vars.$bp-l) {
|
||||
.tri-layout-container {
|
||||
grid-template-areas: none;
|
||||
grid-template-columns: 1fr;
|
||||
grid-column-gap: 0;
|
||||
padding-inline-end: $-xs;
|
||||
padding-inline-start: $-xs;
|
||||
padding-inline-end: vars.$xs;
|
||||
padding-inline-start: vars.$xs;
|
||||
.tri-layout-sides {
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-end: $-m;
|
||||
padding-inline-start: vars.$m;
|
||||
padding-inline-end: vars.$m;
|
||||
grid-column: 1/1;
|
||||
}
|
||||
.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 {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
|
||||
.book-contents .entity-list-item {
|
||||
.icon {
|
||||
|
|
@ -6,7 +9,7 @@
|
|||
justify-self: stretch;
|
||||
align-self: stretch;
|
||||
height: auto;
|
||||
margin-inline-end: $-xs;
|
||||
margin-inline-end: vars.$xs;
|
||||
}
|
||||
.icon:after {
|
||||
opacity: 0.5;
|
||||
|
|
@ -25,7 +28,7 @@
|
|||
|
||||
.entity-list-item + .chapter-expansion {
|
||||
display: flex;
|
||||
padding: 0 $-m $-m $-m;
|
||||
padding: 0 vars.$m vars.$m vars.$m;
|
||||
align-items: center;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
@ -58,7 +61,7 @@
|
|||
}
|
||||
.chapter-contents-toggle {
|
||||
border-radius: 0 4px 4px 0;
|
||||
padding: $-xs ($-m + $-xxs);
|
||||
padding: vars.$xs (vars.$m + vars.$xxs);
|
||||
width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
|
@ -86,20 +89,20 @@
|
|||
}
|
||||
|
||||
.sidebar-page-nav {
|
||||
$nav-indent: $-m;
|
||||
$nav-indent: vars.$m;
|
||||
list-style: none;
|
||||
@include margin($-s, 0, $-m, $-xs);
|
||||
@include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@include rtl {
|
||||
@include mixins.rtl {
|
||||
left: auto;
|
||||
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;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
|
|
@ -132,7 +135,7 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
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 {
|
||||
width: 6px;
|
||||
|
|
@ -142,9 +145,9 @@
|
|||
top: 30%;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
@include rtl {
|
||||
@include mixins.rtl {
|
||||
left: auto;
|
||||
right: -2px;
|
||||
}
|
||||
|
|
@ -154,7 +157,7 @@
|
|||
// Sidebar list
|
||||
.book-tree .sidebar-page-list {
|
||||
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-end: 0;
|
||||
|
||||
|
|
@ -172,22 +175,22 @@
|
|||
padding-inline-end: 0;
|
||||
.content {
|
||||
width: 100%;
|
||||
padding-top: $-xs;
|
||||
padding-bottom: $-xs;
|
||||
padding-top: vars.$xs;
|
||||
padding-bottom: vars.$xs;
|
||||
max-width: calc(100% - 20px);
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
margin-top: -$-xs;
|
||||
margin-top: -(vars.$xs);
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
.entity-list-item-name {
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
margin-inline-end: $-m;
|
||||
margin-inline-end: vars.$m;
|
||||
}
|
||||
.chapter-child-menu {
|
||||
font-size: .8rem;
|
||||
|
|
@ -198,13 +201,13 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
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;
|
||||
line-height: 1;
|
||||
margin-top: -$-xxs;
|
||||
margin-bottom: -$-xxs;
|
||||
margin-top: -(vars.$xxs);
|
||||
margin-bottom: -(vars.$xxs);
|
||||
&: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 {
|
||||
|
|
@ -236,8 +239,8 @@
|
|||
list-style: none;
|
||||
}
|
||||
.sort-box {
|
||||
margin-bottom: $-m;
|
||||
padding: $-m $-xl;
|
||||
margin-bottom: vars.$m;
|
||||
padding: vars.$m vars.$xl;
|
||||
position: relative;
|
||||
&::before {
|
||||
pointer-events: none;
|
||||
|
|
@ -279,14 +282,14 @@
|
|||
margin-inline-start: 0;
|
||||
}
|
||||
.sortable-page-sublist {
|
||||
margin-bottom: $-m;
|
||||
margin-bottom: vars.$m;
|
||||
margin-top: 0;
|
||||
padding-inline-start: $-m;
|
||||
padding-inline-start: vars.$m;
|
||||
}
|
||||
li {
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #666);
|
||||
@include mixins.lightDark(border-color, #DDD, #666);
|
||||
margin-top: -1px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
|
@ -294,7 +297,7 @@
|
|||
border-inline-start: 2px solid currentColor;
|
||||
}
|
||||
li:first-child {
|
||||
margin-top: $-xs;
|
||||
margin-top: vars.$xs;
|
||||
}
|
||||
}
|
||||
.sortable-page-list li.placeholder {
|
||||
|
|
@ -335,21 +338,21 @@ details.sort-box[open] summary .caret-container svg {
|
|||
}
|
||||
|
||||
.activity-list-item {
|
||||
padding: $-s 0;
|
||||
padding: vars.$s 0;
|
||||
display: grid;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
grid-column-gap: vars.$m;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.card .activity-list-item {
|
||||
padding-block: $-s;
|
||||
padding-block: vars.$s;
|
||||
}
|
||||
|
||||
.user-list-item {
|
||||
display: inline-grid;
|
||||
padding: $-s;
|
||||
padding: vars.$s;
|
||||
grid-template-columns: min-content 1fr;
|
||||
grid-column-gap: $-m;
|
||||
grid-column-gap: vars.$m;
|
||||
font-size: 0.9em;
|
||||
align-items: center;
|
||||
> div:first-child {
|
||||
|
|
@ -360,7 +363,7 @@ details.sort-box[open] summary .caret-container svg {
|
|||
ul.pagination {
|
||||
display: inline-flex;
|
||||
list-style: none;
|
||||
margin: $-m 0;
|
||||
margin: vars.$m 0;
|
||||
padding-inline-start: 1px;
|
||||
li:first-child {
|
||||
a, span {
|
||||
|
|
@ -374,19 +377,19 @@ ul.pagination {
|
|||
}
|
||||
a, span {
|
||||
display: block;
|
||||
padding: $-xxs $-s;
|
||||
padding: vars.$xxs vars.$s;
|
||||
border: 1px solid #CCC;
|
||||
margin-inline-start: -1px;
|
||||
user-select: none;
|
||||
@include lightDark(color, #555, #eee);
|
||||
@include lightDark(border-color, #ccc, #666);
|
||||
@include mixins.lightDark(color, #555, #eee);
|
||||
@include mixins.lightDark(border-color, #ccc, #666);
|
||||
}
|
||||
li.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
li.active span {
|
||||
@include lightDark(color, #111, #eee);
|
||||
@include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
|
||||
@include mixins.lightDark(color, #111, #eee);
|
||||
@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 {
|
||||
margin: 0 (-$-m);
|
||||
margin: 0 (-(vars.$m));
|
||||
h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -405,7 +408,7 @@ ul.pagination {
|
|||
.text-small.text-muted {
|
||||
color: #AAA;
|
||||
font-size: 0.75em;
|
||||
margin-top: $-xs;
|
||||
margin-top: vars.$xs;
|
||||
}
|
||||
.text-muted p.text-muted {
|
||||
margin-top: 0;
|
||||
|
|
@ -420,7 +423,7 @@ ul.pagination {
|
|||
}
|
||||
|
||||
.icon-list hr {
|
||||
margin: $-s $-m;
|
||||
margin: vars.$s vars.$m;
|
||||
max-width: 140px;
|
||||
opacity: 0.25;
|
||||
height: 1.1px;
|
||||
|
|
@ -431,10 +434,10 @@ ul.pagination {
|
|||
}
|
||||
|
||||
.entity-list-item, .icon-list-item {
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $-m;
|
||||
gap: vars.$m;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
@ -458,7 +461,7 @@ ul.pagination {
|
|||
cursor: pointer;
|
||||
}
|
||||
&: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;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -466,7 +469,7 @@ ul.pagination {
|
|||
background-color: transparent;
|
||||
}
|
||||
&:focus {
|
||||
@include lightDark(background-color, #eee, #222);
|
||||
@include mixins.lightDark(background-color, #eee, #222);
|
||||
outline: 1px dotted #666;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -493,7 +496,7 @@ ul.pagination {
|
|||
.split-icon-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $-m;
|
||||
gap: vars.$m;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
|
|
@ -501,10 +504,10 @@ ul.pagination {
|
|||
word-break: break-word;
|
||||
border-radius: 4px;
|
||||
> a {
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $-m;
|
||||
gap: vars.$m;
|
||||
flex: 1;
|
||||
}
|
||||
> a:hover {
|
||||
|
|
@ -515,7 +518,7 @@ ul.pagination {
|
|||
flex: none;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
.icon-list-item-dropdown-toggle {
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
@include lightDark(color, #888, #999);
|
||||
@include mixins.lightDark(color, #888, #999);
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
&: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 {
|
||||
@include lightDark(background-color, #F2F2F2, #2d2d2d);
|
||||
@include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);
|
||||
border-radius: 0;
|
||||
}
|
||||
.card .entity-list-item .entity-list-item:hover {
|
||||
|
|
@ -554,10 +557,10 @@ ul.pagination {
|
|||
}
|
||||
|
||||
.entity-list-item-children {
|
||||
padding: $-m $-l;
|
||||
padding: vars.$m vars.$l;
|
||||
> div {
|
||||
overflow: hidden;
|
||||
padding: 0 0 $-xs 0;
|
||||
padding: 0 0 vars.$xs 0;
|
||||
}
|
||||
.entity-chip {
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -568,7 +571,7 @@ ul.pagination {
|
|||
white-space: nowrap;
|
||||
}
|
||||
> .entity-list > .entity-list-item:last-child {
|
||||
margin-bottom: -$-xs;
|
||||
margin-bottom: -(vars.$xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -580,22 +583,22 @@ ul.pagination {
|
|||
background-position: 50% 50%;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
margin-inline-end: $-l;
|
||||
margin-inline-end: vars.$l;
|
||||
|
||||
&.entity-list-item-image-wide {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-inline-end: 0;
|
||||
position: absolute;
|
||||
bottom: $-xs;
|
||||
left: $-xs;
|
||||
bottom: vars.$xs;
|
||||
left: vars.$xs;
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
|
@ -605,7 +608,7 @@ ul.pagination {
|
|||
}
|
||||
|
||||
.entity-list.compact {
|
||||
font-size: 0.6 * $fs-m;
|
||||
font-size: 0.6 * vars.$fs-m;
|
||||
h4, a {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -613,8 +616,8 @@ ul.pagination {
|
|||
display: none;
|
||||
}
|
||||
.entity-list-item p {
|
||||
font-size: $fs-m * 0.8;
|
||||
padding-top: $-xs;
|
||||
font-size: vars.$fs-m * 0.8;
|
||||
padding-top: vars.$xs;
|
||||
}
|
||||
.entity-list-item p:empty {
|
||||
padding-top: 0;
|
||||
|
|
@ -624,12 +627,12 @@ ul.pagination {
|
|||
}
|
||||
> p.empty-text {
|
||||
display: block;
|
||||
font-size: $fs-m;
|
||||
font-size: vars.$fs-m;
|
||||
}
|
||||
hr {
|
||||
margin: 0;
|
||||
}
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
h4 {
|
||||
font-size: 1.666em;
|
||||
}
|
||||
|
|
@ -660,13 +663,13 @@ ul.pagination {
|
|||
top: 0;
|
||||
list-style: none;
|
||||
inset-inline-end: 0;
|
||||
margin: $-m 0;
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
margin: vars.$m 0;
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
|
||||
border-radius: 3px;
|
||||
min-width: 180px;
|
||||
padding: $-xs 0;
|
||||
@include lightDark(color, #555, #eee);
|
||||
padding: vars.$xs 0;
|
||||
@include mixins.lightDark(color, #555, #eee);
|
||||
fill: currentColor;
|
||||
text-align: start !important;
|
||||
max-height: 500px;
|
||||
|
|
@ -697,11 +700,11 @@ ul.pagination {
|
|||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
li hr {
|
||||
margin: $-xs 0;
|
||||
margin: vars.$xs 0;
|
||||
}
|
||||
.icon-item, .text-item, .label-item {
|
||||
padding: 8px $-m;
|
||||
@include lightDark(color, #555, #eee);
|
||||
padding: 8px vars.$m;
|
||||
@include mixins.lightDark(color, #555, #eee);
|
||||
fill: currentColor;
|
||||
white-space: nowrap;
|
||||
line-height: 1.4;
|
||||
|
|
@ -721,7 +724,7 @@ ul.pagination {
|
|||
outline-offset: -2px;
|
||||
}
|
||||
svg {
|
||||
margin-inline-end: $-s;
|
||||
margin-inline-end: vars.$s;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
}
|
||||
|
|
@ -733,7 +736,7 @@ ul.pagination {
|
|||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: auto min-content;
|
||||
gap: $-m;
|
||||
gap: vars.$m;
|
||||
}
|
||||
.label-item > *:nth-child(2) {
|
||||
opacity: 0.7;
|
||||
|
|
@ -745,7 +748,7 @@ ul.pagination {
|
|||
display: grid;
|
||||
align-items: start;
|
||||
grid-template-columns: 16px auto;
|
||||
gap: $-m;
|
||||
gap: vars.$m;
|
||||
svg {
|
||||
margin-inline-end: 0;
|
||||
margin-block-start: 1px;
|
||||
|
|
@ -757,7 +760,7 @@ ul.pagination {
|
|||
// being cut by scrollable container.
|
||||
.tri-layout-right .dropdown-menu,
|
||||
.tri-layout-left .dropdown-menu {
|
||||
inset-inline-end: $-xs;
|
||||
inset-inline-end: vars.$xs;
|
||||
}
|
||||
|
||||
// Books grid view
|
||||
|
|
@ -781,7 +784,7 @@ ul.pagination {
|
|||
.featured-image-container-wrap {
|
||||
position: relative;
|
||||
.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;
|
||||
margin-inline-end: 0;
|
||||
position: absolute;
|
||||
|
|
@ -800,30 +803,30 @@ ul.pagination {
|
|||
background: transparent;
|
||||
border: none;
|
||||
color: currentColor;
|
||||
padding: $-m 0;
|
||||
padding: vars.$m 0;
|
||||
}
|
||||
|
||||
.active-link-list {
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: $-s;
|
||||
padding: vars.$s;
|
||||
}
|
||||
a:not(.active) {
|
||||
@include lightDark(color, #444, #888);
|
||||
@include mixins.lightDark(color, #444, #888);
|
||||
}
|
||||
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;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.in-sidebar {
|
||||
a {
|
||||
display: block;
|
||||
margin-bottom: $-xs;
|
||||
margin-bottom: vars.$xs;
|
||||
}
|
||||
a.active {
|
||||
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;
|
||||
margin: 0.6em 0;
|
||||
align-content: start;
|
||||
gap: $-s;
|
||||
gap: vars.$s;
|
||||
a {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
.page-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -22,8 +25,8 @@
|
|||
.page-editor-page-area {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
@include lightDark(background-color, #FFF, #333)
|
||||
box-shadow: vars.$bs-card;
|
||||
@include mixins.lightDark(background-color, #FFF, #333)
|
||||
}
|
||||
|
||||
.page-edit-toolbar {
|
||||
|
|
@ -34,7 +37,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
@include larger-than($xxl) {
|
||||
@include mixins.larger-than(vars.$bp-xxl) {
|
||||
.page-editor-wysiwyg2024 .page-edit-toolbar,
|
||||
.page-editor-wysiwyg2024 .page-editor-page-area,
|
||||
.page-editor-wysiwyg .page-edit-toolbar,
|
||||
|
|
@ -48,7 +51,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
@include mixins.smaller-than(vars.$bp-m) {
|
||||
.page-edit-toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -76,7 +79,7 @@
|
|||
position: relative;
|
||||
outline-offset: -1px;
|
||||
outline: 1px dashed var(--color-primary);
|
||||
box-shadow: $bs-card;
|
||||
box-shadow: vars.$bs-card;
|
||||
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 {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
|
|
@ -116,9 +119,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 26px;
|
||||
inset-inline-end: $-xs;
|
||||
bottom: $-s;
|
||||
box-shadow: $bs-hover;
|
||||
inset-inline-end: vars.$xs;
|
||||
bottom: vars.$s;
|
||||
box-shadow: vars.$bs-hover;
|
||||
background-color: currentColor;
|
||||
text-align: center;
|
||||
svg {
|
||||
|
|
@ -150,10 +153,10 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
}
|
||||
.pointer {
|
||||
border: 1px solid #CCC;
|
||||
@include lightDark(border-color, #ccc, #000);
|
||||
@include mixins.lightDark(border-color, #ccc, #000);
|
||||
border-radius: 4px;
|
||||
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;
|
||||
|
||||
&.is-page-editable {
|
||||
|
|
@ -174,8 +177,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
border-right: 1px solid #CCC;
|
||||
border-bottom: 1px solid #CCC;
|
||||
z-index: 56;
|
||||
@include lightDark(background-color, #fff, #333);
|
||||
@include lightDark(border-color, #ccc, #000);
|
||||
@include mixins.lightDark(background-color, #fff, #333);
|
||||
@include mixins.lightDark(border-color, #ccc, #000);
|
||||
}
|
||||
input, button, a {
|
||||
position: relative;
|
||||
|
|
@ -188,14 +191,14 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
input {
|
||||
background-color: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
color: #666;
|
||||
width: 160px;
|
||||
z-index: 40;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.text-button {
|
||||
@include lightDark(color, #444, #AAA);
|
||||
@include mixins.lightDark(color, #444, #AAA);
|
||||
}
|
||||
.input-group .button {
|
||||
line-height: 1;
|
||||
|
|
@ -210,22 +213,22 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
height: 1.2em;
|
||||
}
|
||||
.button {
|
||||
@include lightDark(border-color, #ddd, #000);
|
||||
@include mixins.lightDark(border-color, #ddd, #000);
|
||||
}
|
||||
}
|
||||
|
||||
// Page editor sidebar toolbox
|
||||
.floating-toolbox {
|
||||
@include lightDark(background-color, #FFF, #222);
|
||||
@include mixins.lightDark(background-color, #FFF, #222);
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
max-height: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: $bs-card;
|
||||
box-shadow: vars.$bs-card;
|
||||
margin-bottom: auto;
|
||||
margin-inline-start: $-l;
|
||||
margin-inline-start: vars.$l;
|
||||
position: relative;
|
||||
&.open {
|
||||
position: relative;
|
||||
|
|
@ -254,23 +257,23 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
}
|
||||
.tabs {
|
||||
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;
|
||||
flex: 0 1 auto;
|
||||
margin-inline-end: -1px;
|
||||
}
|
||||
.tabs-inner {
|
||||
@include lightDark(background-color, #FFFFFF, #222);
|
||||
@include mixins.lightDark(background-color, #FFFFFF, #222);
|
||||
}
|
||||
.tabs svg {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.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;
|
||||
cursor: pointer;
|
||||
padding: 10px $-xs;
|
||||
padding: 10px vars.$xs;
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
@ -295,8 +298,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
margin: $-m 0 0 0;
|
||||
padding: 0 $-l $-s $-l;
|
||||
margin: vars.$m 0 0 0;
|
||||
padding: 0 vars.$l vars.$s vars.$l;
|
||||
}
|
||||
.tags input {
|
||||
max-width: 100%;
|
||||
|
|
@ -304,8 +307,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
min-width: 50px;
|
||||
}
|
||||
.tags td, .inline-start-table > div > div > div {
|
||||
padding-inline-end: $-s;
|
||||
padding-top: $-s;
|
||||
padding-inline-end: vars.$s;
|
||||
padding-top: vars.$s;
|
||||
position: relative;
|
||||
}
|
||||
.handle {
|
||||
|
|
@ -324,13 +327,13 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
}
|
||||
}
|
||||
|
||||
@include smaller-than($xxl) {
|
||||
@include mixins.smaller-than(vars.$bp-xxl) {
|
||||
.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 {
|
||||
margin: 4px !important;
|
||||
}
|
||||
|
|
@ -429,7 +432,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
|||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
fill: currentColor;
|
||||
opacity: 0.85;
|
||||
transition: opacity ease-in-out 120ms;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@use "vars";
|
||||
|
||||
// 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)
|
||||
|
||||
@mixin spacing($prop, $propLetter) {
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
@each $sizeLetter, $size in vars.$spacing {
|
||||
.#{$propLetter}-#{$sizeLetter} {
|
||||
#{$prop}: $size !important;
|
||||
}
|
||||
|
|
@ -31,7 +33,7 @@
|
|||
@include spacing('margin', 'm');
|
||||
@include spacing('padding', 'p');
|
||||
|
||||
@each $sizeLetter, $size in $spacing {
|
||||
@each $sizeLetter, $size in vars.$spacing {
|
||||
.gap-#{$sizeLetter} {
|
||||
gap: $size !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
table {
|
||||
min-width: 100px;
|
||||
max-width: 100%;
|
||||
thead {
|
||||
@include lightDark(background-color, #f8f8f8, #333);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #333);
|
||||
font-weight: 500;
|
||||
}
|
||||
td, th {
|
||||
|
|
@ -27,7 +30,7 @@ table.table {
|
|||
th, td {
|
||||
text-align: start;
|
||||
border: none;
|
||||
padding: $-s $-s;
|
||||
padding: vars.$s vars.$s;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
|
|
@ -36,7 +39,7 @@ table.table {
|
|||
font-weight: bold;
|
||||
}
|
||||
tr:hover {
|
||||
@include lightDark(background-color, #F2F2F2, #333);
|
||||
@include mixins.lightDark(background-color, #F2F2F2, #333);
|
||||
}
|
||||
.text-right {
|
||||
text-align: end;
|
||||
|
|
@ -51,10 +54,10 @@ table.table {
|
|||
display: inline-block;
|
||||
}
|
||||
&.expand-to-padding {
|
||||
margin-left: -$-s;
|
||||
margin-right: -$-s;
|
||||
width: calc(100% + (2*#{$-s}));
|
||||
max-width: calc(100% + (2*#{$-s}));
|
||||
margin-left: -(vars.$s);
|
||||
margin-right: -(vars.$s);
|
||||
width: calc(100% + (2*#{vars.$s}));
|
||||
max-width: calc(100% + (2*#{vars.$s}));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,10 +69,10 @@ table.no-style {
|
|||
}
|
||||
|
||||
table.list-table {
|
||||
margin: 0 (-$-xs);
|
||||
margin: 0 (-(vars.$xs));
|
||||
td {
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
padding: $-xs;
|
||||
padding: vars.$xs;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
/**
|
||||
* Fonts
|
||||
*/
|
||||
|
|
@ -43,7 +46,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
position: relative;
|
||||
display: block;
|
||||
font-family: var(--font-heading, var(--font-body));
|
||||
@include lightDark(color, #222, #BBB);
|
||||
@include mixins.lightDark(color, #222, #BBB);
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
|
@ -56,7 +59,7 @@ h5, h6 {
|
|||
margin-bottom: 0.66em;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
@include mixins.smaller-than(vars.$bp-s) {
|
||||
h1 {
|
||||
font-size: 2.8275em;
|
||||
}
|
||||
|
|
@ -133,16 +136,16 @@ p, ul, ol, pre, table, blockquote {
|
|||
hr {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
@include lightDark(background, #eaeaea, #555);
|
||||
margin-bottom: $-l;
|
||||
@include mixins.lightDark(background, #eaeaea, #555);
|
||||
margin-bottom: vars.$l;
|
||||
&.faded {
|
||||
background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
|
||||
}
|
||||
&.darker {
|
||||
@include lightDark(background, #DDD, #666);
|
||||
@include mixins.lightDark(background, #DDD, #666);
|
||||
}
|
||||
&.margin-top, &.even {
|
||||
margin-top: $-l;
|
||||
margin-top: vars.$l;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,8 +177,8 @@ sub, .subscript {
|
|||
pre {
|
||||
font-size: 12px;
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(background-color, #FFF, #2B2B2B);
|
||||
@include lightDark(border-color, #DDD, #111);
|
||||
@include mixins.lightDark(background-color, #FFF, #2B2B2B);
|
||||
@include mixins.lightDark(border-color, #DDD, #111);
|
||||
border-radius: 4px;
|
||||
padding-inline-start: 26px;
|
||||
position: relative;
|
||||
|
|
@ -189,8 +192,8 @@ pre {
|
|||
width: 22.4px;
|
||||
inset-inline-start: 0;
|
||||
height: 100%;
|
||||
@include lightDark(background-color, #f5f5f5, #313335);
|
||||
@include lightDark(border-inline-end, 1px solid #DDD, none);
|
||||
@include mixins.lightDark(background-color, #f5f5f5, #313335);
|
||||
@include mixins.lightDark(border-inline-end, 1px solid #DDD, none);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,16 +211,16 @@ blockquote {
|
|||
position: relative;
|
||||
border-left: 4px solid transparent;
|
||||
border-left-color: var(--color-primary);
|
||||
@include lightDark(background-color, #f8f8f8, #333);
|
||||
padding: $-s $-m $-s $-xl;
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #333);
|
||||
padding: vars.$s vars.$m vars.$s vars.$xl;
|
||||
overflow: auto;
|
||||
&:before {
|
||||
content: "\201C";
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: $-s;
|
||||
left: $-s;
|
||||
top: vars.$s;
|
||||
left: vars.$s;
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
|
@ -238,8 +241,8 @@ blockquote {
|
|||
font-size: 0.84em;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 3px;
|
||||
@include lightDark(background-color, #f8f8f8, #2b2b2b);
|
||||
@include lightDark(border-color, #DDD, #444);
|
||||
@include mixins.lightDark(background-color, #f8f8f8, #2b2b2b);
|
||||
@include mixins.lightDark(border-color, #DDD, #444);
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -252,7 +255,7 @@ code {
|
|||
|
||||
span.code {
|
||||
@extend .code-base;
|
||||
padding: 1px $-xs;
|
||||
padding: 1px vars.$xs;
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
|
@ -272,8 +275,8 @@ span.highlight {
|
|||
* Lists
|
||||
*/
|
||||
ul, ol {
|
||||
padding-left: $-m * 2.0;
|
||||
padding-right: $-m * 2.0;
|
||||
padding-left: vars.$m * 2.0;
|
||||
padding-right: vars.$m * 2.0;
|
||||
display: flow-root;
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -300,8 +303,8 @@ li > ol, li > ul {
|
|||
margin-block-start: 0;
|
||||
padding-block-end: 0;
|
||||
padding-block-start: 0;
|
||||
padding-left: $-m * 1.2;
|
||||
padding-right: $-m * 1.2;
|
||||
padding-left: vars.$m * 1.2;
|
||||
padding-right: vars.$m * 1.2;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -312,17 +315,17 @@ li > ol, li > ul {
|
|||
li.checkbox-item, li.task-list-item {
|
||||
display: list-item;
|
||||
list-style: none;
|
||||
margin-left: -($-m * 1.2);
|
||||
margin-inline-start: -($-m * 1.2);
|
||||
margin-left: -(vars.$m * 1.2);
|
||||
margin-inline-start: -(vars.$m * 1.2);
|
||||
margin-inline-end: 0;
|
||||
input[type="checkbox"] {
|
||||
margin-right: $-xs;
|
||||
margin-inline-end: $-xs;
|
||||
margin-right: vars.$xs;
|
||||
margin-inline-end: vars.$xs;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
li.checkbox-item, li.task-list-item {
|
||||
margin-left: $-xs;
|
||||
margin-inline-start: $-xs;
|
||||
margin-left: vars.$xs;
|
||||
margin-inline-start: vars.$xs;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -344,8 +347,8 @@ li.checkbox-item, li.task-list-item {
|
|||
text-align: end;
|
||||
}
|
||||
|
||||
@each $sizeLetter, $size in $screen-sizes {
|
||||
@include larger-than($size) {
|
||||
@each $sizeLetter, $size in vars.$screen-sizes {
|
||||
@include mixins.larger-than($size) {
|
||||
.text-#{$sizeLetter}-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -395,7 +398,7 @@ li.checkbox-item, li.task-list-item {
|
|||
* Grouping
|
||||
*/
|
||||
.header-group {
|
||||
margin: $-m 0;
|
||||
margin: vars.$m 0;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -403,7 +406,7 @@ li.checkbox-item, li.task-list-item {
|
|||
|
||||
span.sep {
|
||||
color: #BBB;
|
||||
padding: 0 $-xs;
|
||||
padding: 0 vars.$xs;
|
||||
}
|
||||
|
||||
.list > * {
|
||||
|
|
@ -419,7 +422,7 @@ span.sep {
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: -0.105em;
|
||||
margin-inline-end: $-xs;
|
||||
margin-inline-end: vars.$xs;
|
||||
pointer-events: none;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "mixins";
|
||||
@use "vars";
|
||||
|
||||
|
||||
// Custom full screen mode
|
||||
.tox.tox-fullscreen {
|
||||
|
|
@ -35,7 +38,7 @@
|
|||
padding: 1rem;
|
||||
top: 4px;
|
||||
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
|
||||
|
|
@ -74,23 +77,23 @@ body.page-content.mce-content-body {
|
|||
pointer-events: none;
|
||||
}
|
||||
.page-content.mce-content-body details doc-root {
|
||||
padding: $-s;
|
||||
margin-left: (2px - $-s);
|
||||
margin-right: (2px - $-s);
|
||||
margin-bottom: (2px - $-s);
|
||||
margin-top: (2px - $-s);
|
||||
padding: vars.$s;
|
||||
margin-left: (2px - vars.$s);
|
||||
margin-right: (2px - vars.$s);
|
||||
margin-bottom: (2px - vars.$s);
|
||||
margin-top: (2px - vars.$s);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Allow alignment to be reflected in media embed wrappers
|
||||
.page-content.mce-content-body .mce-preview-object.align-right {
|
||||
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 {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -2,30 +2,30 @@
|
|||
///////////////
|
||||
|
||||
// Screen breakpoints
|
||||
$xxxl: 1700px;
|
||||
$xxl: 1400px;
|
||||
$xl: 1100px;
|
||||
$l: 1000px;
|
||||
$m: 880px;
|
||||
$s: 600px;
|
||||
$xs: 400px;
|
||||
$xxs: 360px;
|
||||
$bp-xxxl: 1700px;
|
||||
$bp-xxl: 1400px;
|
||||
$bp-xl: 1100px;
|
||||
$bp-l: 1000px;
|
||||
$bp-m: 880px;
|
||||
$bp-s: 600px;
|
||||
$bp-xs: 400px;
|
||||
$bp-xxs: 360px;
|
||||
|
||||
// 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)
|
||||
$-xxxl: 64px;
|
||||
$-xxl: 48px;
|
||||
$-xl: 32px;
|
||||
$-l: 24px;
|
||||
$-m: 16px;
|
||||
$-s: 12px;
|
||||
$-xs: 6px;
|
||||
$-xxs: 3px;
|
||||
$xxxl: 64px;
|
||||
$xxl: 48px;
|
||||
$xl: 32px;
|
||||
$l: 24px;
|
||||
$m: 16px;
|
||||
$s: 12px;
|
||||
$xs: 6px;
|
||||
$xxs: 3px;
|
||||
|
||||
// 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
|
||||
$font-body: -apple-system, BlinkMacSystemFont,
|
||||
|
|
@ -1,10 +1,11 @@
|
|||
@use "sass:math";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "tables";
|
||||
@import "content";
|
||||
|
||||
@use "vars";
|
||||
@use "mixins";
|
||||
@use "html";
|
||||
@use "text";
|
||||
@use "tables";
|
||||
@use "content";
|
||||
|
||||
html, body {
|
||||
background-color: #FFF;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
@use "sass:math";
|
||||
@use "sass:meta";
|
||||
|
||||
@import "reset";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "spacing";
|
||||
@import "opacity";
|
||||
@import "html";
|
||||
@import "text";
|
||||
@import "colors";
|
||||
@import "layout";
|
||||
@import "blocks";
|
||||
@import "buttons";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "animations";
|
||||
@import "tinymce";
|
||||
@import "editor";
|
||||
@import "codemirror";
|
||||
@import "components";
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "lists";
|
||||
@import "pages";
|
||||
@import "content";
|
||||
@use "reset";
|
||||
@use "vars";
|
||||
@use "mixins";
|
||||
@use "spacing";
|
||||
@use "opacity";
|
||||
@use "html";
|
||||
@use "text";
|
||||
@use "colors";
|
||||
@use "layout";
|
||||
@use "blocks";
|
||||
@use "buttons";
|
||||
@use "tables";
|
||||
@use "forms";
|
||||
@use "animations";
|
||||
@use "tinymce";
|
||||
@use "editor";
|
||||
@use "codemirror";
|
||||
@use "components";
|
||||
@use "header";
|
||||
@use "footer";
|
||||
@use "lists";
|
||||
@use "pages";
|
||||
@use "content";
|
||||
|
||||
@media print {
|
||||
@import "print";
|
||||
@include meta.load-css("print");
|
||||
}
|
||||
|
||||
// Jquery Sortable Styles
|
||||
|
|
@ -41,7 +41,7 @@ body.dragging, body.dragging * {
|
|||
// User Avatar Images
|
||||
.avatar {
|
||||
border-radius: 100%;
|
||||
@include lightDark(background-color, #eee, #000);
|
||||
@include mixins.lightDark(background-color, #eee, #000);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
&.med {
|
||||
|
|
@ -60,7 +60,7 @@ body.dragging, body.dragging * {
|
|||
border-radius: 3px;
|
||||
}
|
||||
&[src$="user_avatar.png"] {
|
||||
@include whenDark {
|
||||
@include mixins.whenDark {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
|
@ -71,7 +71,7 @@ $loadingSize: 10px;
|
|||
.loading-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: $-xl auto;
|
||||
margin: vars.$xl auto;
|
||||
> div {
|
||||
width: $loadingSize;
|
||||
height: $loadingSize;
|
||||
|
|
@ -79,7 +79,7 @@ $loadingSize: 10px;
|
|||
display: inline-block;
|
||||
vertical-align: top;
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
margin-top: $-xs;
|
||||
margin-top: vars.$xs;
|
||||
animation-name: loadingBob;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
|
|
@ -89,17 +89,17 @@ $loadingSize: 10px;
|
|||
animation-delay: -300ms;
|
||||
}
|
||||
> div:first-child {
|
||||
left: -($loadingSize+$-xs);
|
||||
left: -($loadingSize+vars.$xs);
|
||||
background-color: var(--color-book);
|
||||
animation-delay: -600ms;
|
||||
}
|
||||
> div:last-of-type {
|
||||
left: $loadingSize+$-xs;
|
||||
left: $loadingSize+vars.$xs;
|
||||
background-color: var(--color-chapter);
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
> span {
|
||||
margin-inline-start: $-s;
|
||||
margin-inline-start: vars.$s;
|
||||
font-style: italic;
|
||||
color: #888;
|
||||
vertical-align: top;
|
||||
|
|
@ -107,7 +107,7 @@ $loadingSize: 10px;
|
|||
}
|
||||
|
||||
.inline.block .loading-container {
|
||||
margin: $-xs $-s;
|
||||
margin: vars.$xs vars.$s;
|
||||
}
|
||||
|
||||
.skip-to-content-link {
|
||||
|
|
@ -118,10 +118,10 @@ $loadingSize: 10px;
|
|||
z-index: 15;
|
||||
border-radius: 0 4px 4px 0;
|
||||
display: block;
|
||||
box-shadow: $bs-dark;
|
||||
box-shadow: vars.$bs-dark;
|
||||
font-weight: bold;
|
||||
&:focus {
|
||||
top: $-xl;
|
||||
top: vars.$xl;
|
||||
outline-offset: -10px;
|
||||
outline: 2px dotted var(--color-link);
|
||||
}
|
||||
|
|
@ -129,7 +129,7 @@ $loadingSize: 10px;
|
|||
|
||||
.entity-selector {
|
||||
border: 1px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #111);
|
||||
@include mixins.lightDark(border-color, #ddd, #111);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -140,7 +140,7 @@ $loadingSize: 10px;
|
|||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
font-size: 16px;
|
||||
padding: $-s $-m;
|
||||
padding: vars.$s vars.$m;
|
||||
}
|
||||
input[type="text"]:focus {
|
||||
outline: 1px solid var(--color-primary);
|
||||
|
|
@ -150,12 +150,12 @@ $loadingSize: 10px;
|
|||
.entity-list {
|
||||
overflow-y: scroll;
|
||||
height: 400px;
|
||||
@include lightDark(background-color, #eee, #222);
|
||||
@include mixins.lightDark(background-color, #eee, #222);
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
.entity-list-item {
|
||||
@include lightDark(background-color, #fff, #222);
|
||||
@include mixins.lightDark(background-color, #fff, #222);
|
||||
}
|
||||
.entity-list-item p {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -165,11 +165,11 @@ $loadingSize: 10px;
|
|||
outline-offset: -4px;
|
||||
}
|
||||
.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 {
|
||||
height: 400px;
|
||||
padding-top: $-l;
|
||||
padding-top: vars.$l;
|
||||
}
|
||||
&.compact {
|
||||
font-size: 10px;
|
||||
|
|
@ -182,14 +182,14 @@ $loadingSize: 10px;
|
|||
}
|
||||
&.small {
|
||||
.entity-list-item {
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
}
|
||||
.entity-list, .loading {
|
||||
height: 300px;
|
||||
}
|
||||
input[type="text"] {
|
||||
font-size: 13px;
|
||||
padding: $-xs $-m;
|
||||
padding: vars.$xs vars.$m;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -207,11 +207,11 @@ $loadingSize: 10px;
|
|||
z-index: 150;
|
||||
}
|
||||
|
||||
@include between($s, $m) {
|
||||
@include mixins.between(vars.$bp-s, vars.$bp-m) {
|
||||
#home-default > .grid.third {
|
||||
display: block;
|
||||
columns: 2;
|
||||
column-gap: $-l !important;
|
||||
column-gap: vars.$l !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -222,29 +222,29 @@ $loadingSize: 10px;
|
|||
}
|
||||
.list-sort {
|
||||
display: inline-grid;
|
||||
margin-inline-start: $-s;
|
||||
margin-inline-start: vars.$s;
|
||||
grid-template-columns: minmax(120px, max-content) 40px;
|
||||
font-size: 0.9rem;
|
||||
border: 2px solid #DDD;
|
||||
@include lightDark(border-color, #ddd, #444);
|
||||
@include mixins.lightDark(border-color, #ddd, #444);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.list-sort-label {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
@include lightDark(color, #555, #888);
|
||||
@include mixins.lightDark(color, #555, #888);
|
||||
}
|
||||
.list-sort-type {
|
||||
text-align: start;
|
||||
}
|
||||
.list-sort-type, .list-sort-dir {
|
||||
padding: $-xs $-s;
|
||||
padding: vars.$xs vars.$s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-sort-dir {
|
||||
border-inline-start: 2px solid #DDD;
|
||||
color: #888;
|
||||
@include lightDark(border-color, #ddd, #444);
|
||||
@include mixins.lightDark(border-color, #ddd, #444);
|
||||
.svg-icon {
|
||||
transition: transform ease-in-out 120ms;
|
||||
}
|
||||
|
|
@ -256,5 +256,5 @@ $loadingSize: 10px;
|
|||
|
||||
.import-item {
|
||||
border-inline-start: 2px solid currentColor;
|
||||
padding-inline-start: $-xs;
|
||||
padding-inline-start: vars.$xs;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user