rewrite
This commit is contained in:
@@ -1,8 +1,3 @@
|
||||
@import "variables.scss";
|
||||
@import "utils.scss";
|
||||
@import "tinymce.scss";
|
||||
@import "prism.css";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
@@ -16,14 +11,16 @@ html {
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: var(--default-font-family);
|
||||
font-size: var(--default-font-size);
|
||||
background-color: var(--base-color);
|
||||
color: var(--base-color-text);
|
||||
font-family: Poppins, Roboto, "Open Sans", ui-sans-serif, system-ui,
|
||||
sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-width: 100%;
|
||||
overflow-x: hidden;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#app {
|
||||
@@ -31,88 +28,3 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
box-shadow: var(--base-shadow);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--header-font-family);
|
||||
font-weight: var(--header-font-weight);
|
||||
color: var(--header-color-text);
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
h#{$i} {
|
||||
font-size: var(--header-font-size-#{$i});
|
||||
margin-bottom: #{calc(var(--header-font-size-#{$i}) / 2)};
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--link-color);
|
||||
text-decoration-thickness: 0.1em;
|
||||
text-decoration-color: var(--primary-color-light);
|
||||
|
||||
&:hover {
|
||||
filter: brightness(115%);
|
||||
}
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
.html {
|
||||
text-rendering: optimizeLegibility;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: #{map-get($spacing, 5)} 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: #{map-get($spacing, 1)};
|
||||
|
||||
& + ul {
|
||||
margin-top: -#{map-get($spacing, 1)};
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
background-color: var(--base-color);
|
||||
padding: #{map-get($spacing, 3)};
|
||||
border: 1px solid var(--base-color-border);
|
||||
white-space: pre-wrap;
|
||||
overflow-x: auto;
|
||||
max-height: #{calc(map-get($spacing, 7) * 12)};
|
||||
margin-bottom: #{map-get($spacing, 3)};
|
||||
}
|
||||
|
||||
/* SM Dialog */
|
||||
.dialog-outer {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: #{map-get($spacing, 2)};
|
||||
}
|
||||
|
||||
.dialog-outer:last-of-type {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+clike+javascript+bash+c+javadoclike+js-extras+json+json5+log+markup-templating+objectivec+perl+php+phpdoc+php-extras+python+regex+sql+swift+typoscript+yaml */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
||||
@@ -1,50 +0,0 @@
|
||||
// @import "../../public/skins/ui/oxide/skin.min.css";
|
||||
// @import "../../public/skins/ui/oxide/content.min.css";
|
||||
// @import "../../public/skins/content/default/content.min.css";
|
||||
|
||||
.tox {
|
||||
.smeditor-select-group.tox-listboxfield {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
font-size: 80%;
|
||||
margin: 0 6px 0 12px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tox-listbox--select {
|
||||
font-size: 80%;
|
||||
padding-right: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.smeditor-checkbox-group.tox-checkbox {
|
||||
font-size: 80%;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.tox-dialog.tox-dialog--width-lg {
|
||||
height: 650px;
|
||||
max-height: 650px;
|
||||
|
||||
.tox-dialog__body-content {
|
||||
height: auto !important;
|
||||
flex-basis: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,276 +0,0 @@
|
||||
/* Display */
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:d-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.light\:d-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Width */
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.w-25 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.max-w-sm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.max-w-md {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.max-w-lg {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.max-w-xl {
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
/* Float */
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Flex */
|
||||
.flex-fill {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-0 {
|
||||
flex: 0 !important;
|
||||
}
|
||||
|
||||
/* Flex Align */
|
||||
.align-items-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.align-items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
/* Flex Justify */
|
||||
.justify-content-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-content-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.justify-content-space-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
/* Flex Direction */
|
||||
.flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-basis-45 {
|
||||
flex-basis: 45%;
|
||||
}
|
||||
|
||||
.flex-basis-55 {
|
||||
flex-basis: 55%;
|
||||
}
|
||||
|
||||
/* Gap */
|
||||
@each $index, $size in $spacing {
|
||||
.gap-#{$index} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
@each $index, $size in $spacing {
|
||||
.p-#{$index} {
|
||||
padding: #{$size} !important;
|
||||
}
|
||||
|
||||
.pt-#{$index} {
|
||||
padding-top: #{$size} !important;
|
||||
}
|
||||
|
||||
.pb-#{$index} {
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.pl-#{$index} {
|
||||
padding-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.pr-#{$index} {
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
|
||||
.px-#{$index} {
|
||||
padding-left: #{$size} !important;
|
||||
padding-right: #{$size} !important;
|
||||
}
|
||||
|
||||
.py-#{$index} {
|
||||
padding-top: #{$size} !important;
|
||||
padding-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Margin */
|
||||
@each $index, $size in $spacing {
|
||||
.m-#{$index} {
|
||||
margin: #{$size} !important;
|
||||
}
|
||||
|
||||
.mt-#{$index} {
|
||||
margin-top: #{$size} !important;
|
||||
}
|
||||
|
||||
.mb-#{$index} {
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
|
||||
.ml-#{$index} {
|
||||
margin-left: #{$size} !important;
|
||||
}
|
||||
|
||||
.mr-#{$index} {
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
|
||||
.mx-#{$index} {
|
||||
margin-left: #{$size} !important;
|
||||
margin-right: #{$size} !important;
|
||||
}
|
||||
|
||||
.my-#{$index} {
|
||||
margin-top: #{$size} !important;
|
||||
margin-bottom: #{$size} !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto !important;
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto !important;
|
||||
}
|
||||
|
||||
.mb-auto {
|
||||
margin-bottom: auto !important;
|
||||
}
|
||||
|
||||
/* Text Align */
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Text Size */
|
||||
.font-size-100 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.font-size-90 {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.font-size-80 {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
.prevent-select {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Nunito:wght@400;700;800;1000&display=swap");
|
||||
|
||||
:root {
|
||||
--default-size: 1rem;
|
||||
--default-font-size: var(--default-size);
|
||||
--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* 0: 0 0px
|
||||
* 1: 0.25 4px
|
||||
* 2: 0.5 8px
|
||||
* 3: 1 16px
|
||||
* 4: 1.25 20px
|
||||
* 5: 1.5 24px
|
||||
* 6: 2 32px
|
||||
* 7: 2.5 40px
|
||||
*/
|
||||
$spacing: (
|
||||
0: 0,
|
||||
1: #{calc(var(--default-size) / 4)},
|
||||
2: #{calc(var(--default-size) / 2)},
|
||||
3: var(--default-size),
|
||||
4: #{calc(var(--default-size) * 1.2)},
|
||||
5: #{calc(var(--default-size) * 1.5)},
|
||||
6: #{calc(var(--default-size) * 2)},
|
||||
7: #{calc(var(--default-size) * 2.5)},
|
||||
);
|
||||
|
||||
:root {
|
||||
// Base
|
||||
--base-color: #eee;
|
||||
--base-color-text: #456;
|
||||
--base-color-background: #fff;
|
||||
--base-color-border: #999;
|
||||
--base-color-light: #fff;
|
||||
--base-color-lighter: #fff;
|
||||
--base-color-dark: #ddd;
|
||||
--base-color-darker: #999;
|
||||
|
||||
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--link-color: var(--primary-color);
|
||||
|
||||
// Primary
|
||||
--primary-color: #35a5f1;
|
||||
--primary-color-light: #67bbf4;
|
||||
--primary-color-lighter: #cce8fb;
|
||||
--primary-color-dark: #0e80ce;
|
||||
--primary-color-darker: #095589;
|
||||
|
||||
// Danger
|
||||
--danger-color: #c82e2b;
|
||||
--danger-color-light: #db5c5a;
|
||||
--danger-color-lighter: #ffe8e8;
|
||||
--danger-color-dark: #952220;
|
||||
--danger-color-darker: #641715;
|
||||
|
||||
// Success
|
||||
--success-color: #198754;
|
||||
--success-color-light: #26d081;
|
||||
--success-color-lighter: #b5f1d5;
|
||||
--success-color-dark: #12653e;
|
||||
--success-color-darker: #0c4329;
|
||||
|
||||
// Warning
|
||||
--warning-color: #ffecb5;
|
||||
--warning-color-light: #fff3cd;
|
||||
--warning-color-lighter: #fff8e2;
|
||||
--warning-color-dark: #856404;
|
||||
--warning-color-darker: #664d03;
|
||||
|
||||
// Header
|
||||
--header-font-family: "Montserrat", "Montserrat override", "Arial",
|
||||
"Helvetica", sans-serif;
|
||||
--header-font-weight: 800;
|
||||
--header-font-size-1: #{map-get($spacing, 7)};
|
||||
--header-font-size-2: #{map-get($spacing, 6)};
|
||||
--header-font-size-3: #{map-get($spacing, 5)};
|
||||
--header-font-size-4: #{map-get($spacing, 4)};
|
||||
--header-font-size-5: #{map-get($spacing, 3)};
|
||||
--header-color-text: var(--base-color-text);
|
||||
|
||||
// Buttons
|
||||
--button-font-family: var(--header-font-family);
|
||||
--button-font-weight: 600;
|
||||
--button-color: var(--base-color-light);
|
||||
--button-color-text: var(--base-color-text);
|
||||
--button-disabled-color: var(--base-color-dark);
|
||||
--button-disabled-color-text: var(--base-color-light);
|
||||
--button-dropdown-color-border: var(--base-color-border);
|
||||
--button-dropdown-color: var(--base-color-light);
|
||||
--button-dropdown-color-hover: var(--primary-color-lighter);
|
||||
--button-primary-color: var(--primary-color);
|
||||
--button-primary-color-text: var(--base-color-light);
|
||||
--button-secondary-color: var(--base-color-darker);
|
||||
--button-secondary-color-text: var(--base-color-light);
|
||||
--button-danger-color: var(--danger-color);
|
||||
--button-danger-color-text: var(--base-color-light);
|
||||
|
||||
// Card
|
||||
--card-color: var(--base-color);
|
||||
--card-color-text: var(--base-color-text);
|
||||
|
||||
// Hero
|
||||
--hero-color-text: #fff;
|
||||
--hero-caption-color: rgba(0, 0, 0, 0.5);
|
||||
--hero-caption-color-text: #ddd;
|
||||
--hero-caption-color-link: #eee;
|
||||
--hero-shadow: 0 0 8px #000;
|
||||
|
||||
// Input
|
||||
--input-clear-icon-color: var(--base-color-dark);
|
||||
--input-clear-icon-color-hover: var(--base-color-light);
|
||||
--input-color: var(--base-color-light);
|
||||
--input-color-border: var(--base-color-darker);
|
||||
|
||||
// Pagination
|
||||
--pagination-color: var(--base-color-light);
|
||||
--pagination-color-active: var(--primary-color);
|
||||
--pagination-color-hover: var(--primary-color);
|
||||
--pagination-color-disabled: var(--base-color);
|
||||
--pagination-color-disabled-text: var(--base-color-darker);
|
||||
|
||||
// Tab
|
||||
--tab-color: var(--base-color-light);
|
||||
--tab-color-text: var(--base-color-text);
|
||||
--tab-color-border: var(--base-color-border);
|
||||
--tab-color-hover: var(--base-color-dark);
|
||||
|
||||
// Table
|
||||
--table-color: var(--base-color-light);
|
||||
--table-color-even: #f8f8f8;
|
||||
--table-color-border: var(--base-color-border);
|
||||
--table-color-hover: var(--table-color);
|
||||
|
||||
// Accents
|
||||
--accent-1-color: #3d4e5d;
|
||||
--accent-1-color-text: #e6f5eb;
|
||||
--accent-2-color: #cce8fb;
|
||||
--accent-2-color-text: #063954;
|
||||
--accent-3-color: #b5d5b5;
|
||||
--accent-3-color-text: #3d4e5d;
|
||||
|
||||
// SKIP BELOW
|
||||
--navbar-color: var(--base-color-light);
|
||||
--navbar-color-dropdown: var(--base-color-light);
|
||||
--navbar-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--card-color: var(--base-color-light);
|
||||
|
||||
--footer-color: var(--base-color);
|
||||
--footer-color-text: #888;
|
||||
--footer-color-border: rgba(0, 0, 0, 0.1);
|
||||
|
||||
// yes
|
||||
--banner-yellow-color: #ffd75a;
|
||||
--banner-yellow-color-text: #333;
|
||||
--banner-green-color: #198754;
|
||||
--banner-green-color-text: #fff;
|
||||
--banner-red-color: #952220;
|
||||
--banner-red-color-text: #fff;
|
||||
--banner-purple-color: #707;
|
||||
--banner-purple-color-text: #fff;
|
||||
|
||||
// Editor
|
||||
--editor-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
|
||||
--editor-backdrop: rgba(255, 255, 255, 0.75);
|
||||
|
||||
// Loading
|
||||
--loading-color: var(--base-color-lighter);
|
||||
--loading-overlay-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
// --primary-color-hover: #f1fdff;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
// Base
|
||||
--base-color: #222;
|
||||
--base-color-text: #ccc;
|
||||
--base-color-background: #eee;
|
||||
--base-color-border: #999;
|
||||
--base-color-light: #333;
|
||||
--base-color-lighter: #444;
|
||||
--base-color-dark: #666;
|
||||
--base-color-darker: #999;
|
||||
|
||||
// Primary
|
||||
--primary-color: #35a5f1;
|
||||
--primary-color-dark: #67bbf4;
|
||||
--primary-color-darker: #cce8fb;
|
||||
--primary-color-light: #0e80ce;
|
||||
--primary-color-lighter: #095589;
|
||||
|
||||
--button-color: var(--base-color-lighter);
|
||||
--button-color-text: var(--base-color-background);
|
||||
--button-primary-color-text: var(--base-color-background);
|
||||
--button-secondary-color-text: var(--base-color-background);
|
||||
--button-danger-color-text: var(--base-color-background);
|
||||
|
||||
--footer-color-border: rgba(255, 255, 255, 0.1);
|
||||
|
||||
// Accents
|
||||
--accent-2-color: #063954;
|
||||
--accent-2-color-text: #cce8fb;
|
||||
|
||||
// Editor
|
||||
--editor-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
|
||||
--editor-backdrop: rgba(0, 0, 0, 0.75);
|
||||
|
||||
// Loading
|
||||
--loading-color: var(--base-color-lighter);
|
||||
--loading-overlay-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user