3 files changed, 440 insertions, 322 deletions
diff --git a/static/css/darktheme.css b/static/css/darktheme.css
index e052a92..10377fc 100644
--- a/static/css/darktheme.css
+++ b/static/css/darktheme.css
@@ -1,241 +1,241 @@
-#navigation-bar {
-    border-bottom: 1px solid #252525 !important;
-    background: #111 !important;
-}
-
-body, #selector, #main-box {
-    background: #111 !important;
-    color: white !important;
-}
-
-#logo {
-    color: white !important;
-}
-
-#main-container, .navbar-brand, .nav-link {
-    color: white !important;
-}
-
-.navbar-brand:hover, .nav-link:hover {
-    opacity: .8;
-}
-
-.navbar-brand:active, .nav-link:active, .navbar-brand:focus, .nav-link:focus {
-    opacity: .7;
-}
-
-li.list-group-item {
-    background: #222;
-    color: white;
-}
-
-li.list-group-item:hover {
-    background: #333 !important;
-    color: white !important;
-}
-
-li.list-group-item:active {
-    background: #252525 !important;
-    color: white !important;
-}
-
-#loader, #loader-box {
-    background: #151515 !important;
-}
-
-#search-box, #counts {
-    color: white !important;
-}
-
-#search {
-    background: #222;
-    border: 1px solid #222;
-    color: white;
-}
-
-.card {
-    background: #222;
-    color: white;
-}
-
-.modal-content {
-    color: black;
-}
-
-.alert-warning {
-    color: #fff3cd;
-    background-color: #8564044a;
-    border-color: #8564049c;
-}
-
-.alert-secondary {
-    color: white !important;
-    background: #252525 !important;
-    border: 1px solid black !important;
-}
-
-#close-btn {
-    filter: invert(1);
-}
-
-html, body {
-    background: black !important;
-    color: white !important;
-}
-
-#statusbar, #tabs {
-    background: #222 !important;
-    color: white !important;
-}
-
-.tab:not(.tab-active) img {
-    filter: invert(1) !important;
-}
-
-.loader {
-    background: rgba(10, 10, 10, .75) !important;
-}
-
-.loader img {
-    filter: invert(1) !important;
-}
-
-#tabs .tab.tab-active {
-    border-bottom-color: white !important;
-}
-
-.list-group-item {
-    background-color: #151515 !important;
-}
-
-.btn-light {
-    background: transparent !important;
-    color: white !important;
-}
-
-.dropdown-menu {
-    filter: invert(1) !important;
-}
-
-#panes {
-    background: black !important;
-}
-
-.list-group-item-action {
-    color: white !important;
-}
-
-.modal-content {
-    background-color: #151515 !important;
-}
-
-.modal-header button.close {
-    filter: invert(1) !important;
-}
-
-.modal-header {
-    border-bottom: 1px solid #222 !important;
-}
-
-.modal-footer {
-    border-top: 1px solid #222 !important;
-}
-
-a.list-group-item:hover {
-    background-color: #222 !important;
-}
-
-a.list-group-item:active, a.list-group-item:focus {
-    background-color: #252525 !important;
-}
-
-.card, #footer-space {
-    background: #222 !important;
-}
-
-.card.bg-dark {
-    background: #333 !important;
-}
-
-.bg-warning {
-    background-color: #8e6c06 !important;
-}
-
-nav.navbar.fixed-top.navbar-expand-lg.navbar-light.bg-light {
-    background-color: rgba(34, 34, 34, 0.75) !important;
-    backdrop-filter: blur(10px);
-}
-
-::-webkit-scrollbar {
-    width: 5px;
-}
-
-::-webkit-scrollbar-track {
-    border-radius: 9999px;
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 9999px;
-    background-color: #888;
-    transition: background 200ms;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: #555;
-}
-
-::-webkit-scrollbar-thumb:active {
-    background-color: #222;
-}
-
-#project-hero {
-    height: 65vh;
-    margin-top: -84px;
-    margin-bottom: 16px;
-    background-size: cover;
-    background-position: center;
-}
-
-#apps_outer {
-    background: transparent;
-    border: none;
-}
-
-#apps_outer::after {
-    display: none;
-}
-
-#apps_path {
-    fill: #fff;
-}
-
-#apps_outer:hover #apps_path {
-    opacity: .75;
-}
-
-#apps_outer:active #apps_path, #apps_outer:focus #apps_path {
-    opacity: .5;
-}
-
-.app-icon {
-    width: 24px;
-    height: 24px;
-    vertical-align: middle;
-    margin-right: 5px;
-    filter: invert(1);
-}
-
-.app-title {
-    vertical-align: middle;
-}
-
-.code {
-    background: #222;
-    padding: 10px;
-    border-radius: 10px;
-    font-family: monospace;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    word-wrap: break-word;
+#navigation-bar {
+    border-bottom: 1px solid #252525 !important;
+    background: #111 !important;
+}
+
+body, #selector, #main-box {
+    background: #111 !important;
+    color: white !important;
+}
+
+#logo {
+    color: white !important;
+}
+
+#main-container, .navbar-brand, .nav-link {
+    color: white !important;
+}
+
+.navbar-brand:hover, .nav-link:hover {
+    opacity: .8;
+}
+
+.navbar-brand:active, .nav-link:active, .navbar-brand:focus, .nav-link:focus {
+    opacity: .7;
+}
+
+li.list-group-item {
+    background: #222;
+    color: white;
+}
+
+li.list-group-item:hover {
+    background: #333 !important;
+    color: white !important;
+}
+
+li.list-group-item:active {
+    background: #252525 !important;
+    color: white !important;
+}
+
+#loader, #loader-box {
+    background: #151515 !important;
+}
+
+#search-box, #counts {
+    color: white !important;
+}
+
+#search {
+    background: #222;
+    border: 1px solid #222;
+    color: white;
+}
+
+.card {
+    background: #222;
+    color: white;
+}
+
+.modal-content {
+    color: black;
+}
+
+.alert-warning {
+    color: #fff3cd;
+    background-color: #8564044a;
+    border-color: #8564049c;
+}
+
+.alert-secondary {
+    color: white !important;
+    background: #252525 !important;
+    border: 1px solid black !important;
+}
+
+#close-btn {
+    filter: invert(1);
+}
+
+html, body {
+    background: black !important;
+    color: white !important;
+}
+
+#statusbar, #tabs {
+    background: #222 !important;
+    color: white !important;
+}
+
+.tab:not(.tab-active) img {
+    filter: invert(1) !important;
+}
+
+.loader {
+    background: rgba(10, 10, 10, .75) !important;
+}
+
+.loader img {
+    filter: invert(1) !important;
+}
+
+#tabs .tab.tab-active {
+    border-bottom-color: white !important;
+}
+
+.list-group-item {
+    background-color: #151515 !important;
+}
+
+.btn-light {
+    background: transparent !important;
+    color: white !important;
+}
+
+.dropdown-menu {
+    filter: invert(1) !important;
+}
+
+#panes {
+    background: black !important;
+}
+
+.list-group-item-action {
+    color: white !important;
+}
+
+.modal-content {
+    background-color: #151515 !important;
+}
+
+.modal-header button.close {
+    filter: invert(1) !important;
+}
+
+.modal-header {
+    border-bottom: 1px solid #222 !important;
+}
+
+.modal-footer {
+    border-top: 1px solid #222 !important;
+}
+
+a.list-group-item:hover {
+    background-color: #222 !important;
+}
+
+a.list-group-item:active, a.list-group-item:focus {
+    background-color: #252525 !important;
+}
+
+.card, #footer-space {
+    background: #222 !important;
+}
+
+.card.bg-dark {
+    background: #333 !important;
+}
+
+.bg-warning {
+    background-color: #8e6c06 !important;
+}
+
+nav.navbar.fixed-top.navbar-expand-lg.navbar-light.bg-light {
+    background-color: rgba(34, 34, 34, 0.75) !important;
+    backdrop-filter: blur(10px);
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+::-webkit-scrollbar-track {
+    border-radius: 9999px;
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 9999px;
+    background-color: #888;
+    transition: background 200ms;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+::-webkit-scrollbar-thumb:active {
+    background-color: #222;
+}
+
+#project-hero {
+    height: 65vh;
+    margin-top: -84px;
+    margin-bottom: 16px;
+    background-size: cover;
+    background-position: center;
+}
+
+#apps_outer {
+    background: transparent;
+    border: none;
+}
+
+#apps_outer::after {
+    display: none;
+}
+
+#apps_path {
+    fill: #fff;
+}
+
+#apps_outer:hover #apps_path {
+    opacity: .75;
+}
+
+#apps_outer:active #apps_path, #apps_outer:focus #apps_path {
+    opacity: .5;
+}
+
+.app-icon {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+    margin-right: 5px;
+    filter: invert(1);
+}
+
+.app-title {
+    vertical-align: middle;
+}
+
+.code {
+    background: #222;
+    padding: 10px;
+    border-radius: 10px;
+    font-family: monospace;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    word-wrap: break-word;
 }
 \ No newline at end of file
diff --git a/static/css/editor.css b/static/css/editor.css
new file mode 100644
index 0000000..de03848
--- /dev/null
+++ b/static/css/editor.css
@@ -0,0 +1,118 @@
+:root {
+    /* Overrides the border radius setting in the theme. */
+    --ck-border-radius: 4px;
+
+    /* Overrides the default font size in the theme. */
+    --ck-font-size-base: 14px;
+
+    /* Helper variables to avoid duplication in the colors. */
+    --ck-custom-background: #111;
+    --ck-custom-foreground: #222;
+    --ck-custom-border: #333;
+    --ck-custom-white: hsl(0, 0%, 100%);
+
+    /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+    --ck-color-base-border: var(--ck-custom-foreground);
+    --ck-color-base-background: var(--ck-custom-background);
+    --ck-color-base-foreground: var(--ck-custom-background);
+    --ck-color-focus-border: hsl(208, 90%, 62%);
+    --ck-color-text: hsl(0, 0%, 98%);
+    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.2);
+    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.1);
+
+    /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+    --ck-color-button-default-background: var(--ck-custom-background);
+    --ck-color-button-default-hover-background: hsl(270, 1%, 22%);
+    --ck-color-button-default-active-background: hsl(270, 2%, 20%);
+    --ck-color-button-default-active-shadow: hsl(270, 2%, 23%);
+    --ck-color-button-default-disabled-background: var(--ck-custom-background);
+
+    --ck-color-button-on-background: var(--ck-custom-foreground);
+    --ck-color-button-on-hover-background: hsl(255, 4%, 16%);
+    --ck-color-button-on-active-background: hsl(255, 4%, 14%);
+    --ck-color-button-on-active-shadow: hsl(240, 3%, 19%);
+    --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+
+    --ck-color-button-action-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-hover-background: hsl(168, 76%, 38%);
+    --ck-color-button-action-active-background: hsl(168, 76%, 36%);
+    --ck-color-button-action-active-shadow: hsl(168, 75%, 34%);
+    --ck-color-button-action-disabled-background: hsl(168, 76%, 42%);
+    --ck-color-button-action-text: var(--ck-custom-white);
+
+    --ck-color-button-save: hsl(120, 100%, 46%);
+    --ck-color-button-cancel: hsl(15, 100%, 56%);
+
+    /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+    --ck-color-dropdown-panel-background: var(--ck-custom-background);
+    --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+    --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+    --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+    /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+    --ck-color-input-background: var(--ck-custom-background);
+    --ck-color-input-border: hsl(257, 3%, 43%);
+    --ck-color-input-text: hsl(0, 0%, 98%);
+    --ck-color-input-disabled-background: hsl(255, 4%, 21%);
+    --ck-color-input-disabled-border: hsl(250, 3%, 38%);
+    --ck-color-input-disabled-text: hsl(0, 0%, 78%);
+
+    /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+    --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+    /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+    --ck-color-list-background: var(--ck-custom-background);
+    --ck-color-list-button-hover-background: var(--ck-color-base-foreground);
+    --ck-color-list-button-on-background: var(--ck-color-base-active);
+    --ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
+    --ck-color-list-button-on-text: var(--ck-color-base-background);
+
+    /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+    --ck-color-panel-background: var(--ck-custom-background);
+    --ck-color-panel-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+    --ck-color-toolbar-background: var(--ck-custom-background);
+    --ck-color-toolbar-border: var(--ck-custom-border);
+
+    /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+    --ck-color-tooltip-background: hsl(252, 7%, 14%);
+    --ck-color-tooltip-text: hsl(0, 0%, 93%);
+
+    /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+    --ck-color-image-caption-background: hsl(0, 0%, 97%);
+    --ck-color-image-caption-text: hsl(0, 0%, 20%);
+
+    /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+    --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
+    --ck-color-widget-hover-border: hsl(43, 100%, 68%);
+    --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+    /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+    --ck-color-link-default: hsl(190, 100%, 75%);
+
+}
+
+/* FONT */
+.ck-editor {
+    font-family: "MavenPro","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
+}
+
+.ck-toolbar, .ck-toolbar * {
+    font-family: "Overpass","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
+}
+\ No newline at end of file
diff --git a/static/css/fonts/index.php b/static/css/fonts/index.php
index f855ee5..4e3f36f 100644
--- a/static/css/fonts/index.php
+++ b/static/css/fonts/index.php
@@ -1,83 +1,83 @@
-<?php
-
-header("Content-Type: text/css");
-
-/*
- * @font-face {
-    src: url("/static/fonts/Jost-Black.ttf");
-    font-family: "Jost";
-    font-style: normal;
-    font-weight: 900;
-}
- */
-
-function css($name, $weight, $weightId, $style) {
-    if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/static/fonts/{$name}-{$weight}.ttf")) {
-        return "\n@font-face {\n    src: url(\"/static/fonts/{$name}-{$weight}.ttf\");\n    font-family: \"{$name}\";\n    font-style: {$style};\n    font-weight: {$weightId};\n}\n";
-    }
-}
-
-function font(string $name) {
-    $txt = "";
-
-    // 100 - Thin
-    $txt .= css($name, "Thin", 100, "normal");
-    $txt .= css($name, "ThinItalic", 100, "italic");
-
-    // 200 - Extra Light
-    $txt .= css($name, "ExtraLight", 200, "normal");
-    $txt .= css($name, "ExtraLightItalic", 200, "italic");
-
-    // 300 - Light
-    $txt .= css($name, "Light", 300, "normal");
-    $txt .= css($name, "LightItalic", 300, "italic");
-
-    // 400 - Regular
-    $txt .= css($name, "Italic", 400, "italic");
-    $txt .= css($name, "Regular", 400, "normal");
-
-    // 500 - Medium
-    $txt .= css($name, "Medium", 500, "normal");
-    $txt .= css($name, "MediumItalic", 500, "italic");
-
-    // 600 - Semi-bold
-    $txt .= css($name, "SemiBold", 600, "normal");
-    $txt .= css($name, "SemiBoldItalic", 600, "italic");
-
-    // 700 - Bold
-    $txt .= css($name, "Bold", 700, "normal");
-    $txt .= css($name, "BoldItalic", 700, "italic");
-
-    // 800 - Extra Bold
-    $txt .= css($name, "ExtraBold", 800, "normal");
-    $txt .= css($name, "ExtraBoldItalic", 800, "italic");
-
-    // 900 - Black
-    $txt .= css($name, "Black", 900, "normal");
-    $txt .= css($name, "BlackItalic", 900, "normal");
-
-    return $txt;
-}
-
-?>
-
-/* Generated on <?= date('r') ?> */
-<?= font("Jost") ?>
-<?= font("MavenPro") ?>
-<?= font("Overpass") ?>
-
-:root {
-    --bs-font-sans-serif: "MavenPro","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
-}
-
-html, body {
-    font-family: "MavenPro","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
-}
-
-body.admin {
-    font-family: "Overpass","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
-}
-
-h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
-    font-family: "Jost","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system;
+<?php
+
+header("Content-Type: text/css");
+
+/*
+ * @font-face {
+    src: url("/static/fonts/Jost-Black.ttf");
+    font-family: "Jost";
+    font-style: normal;
+    font-weight: 900;
+}
+ */
+
+function css($name, $weight, $weightId, $style) {
+    if (file_exists($_SERVER['DOCUMENT_ROOT'] . "/static/fonts/{$name}-{$weight}.ttf")) {
+        return "\n@font-face {\n    src: url(\"/static/fonts/{$name}-{$weight}.ttf\");\n    font-family: \"{$name}\";\n    font-style: {$style};\n    font-weight: {$weightId};\n}\n";
+    }
+}
+
+function font(string $name) {
+    $txt = "";
+
+    // 100 - Thin
+    $txt .= css($name, "Thin", 100, "normal");
+    $txt .= css($name, "ThinItalic", 100, "italic");
+
+    // 200 - Extra Light
+    $txt .= css($name, "ExtraLight", 200, "normal");
+    $txt .= css($name, "ExtraLightItalic", 200, "italic");
+
+    // 300 - Light
+    $txt .= css($name, "Light", 300, "normal");
+    $txt .= css($name, "LightItalic", 300, "italic");
+
+    // 400 - Regular
+    $txt .= css($name, "Italic", 400, "italic");
+    $txt .= css($name, "Regular", 400, "normal");
+
+    // 500 - Medium
+    $txt .= css($name, "Medium", 500, "normal");
+    $txt .= css($name, "MediumItalic", 500, "italic");
+
+    // 600 - Semi-bold
+    $txt .= css($name, "SemiBold", 600, "normal");
+    $txt .= css($name, "SemiBoldItalic", 600, "italic");
+
+    // 700 - Bold
+    $txt .= css($name, "Bold", 700, "normal");
+    $txt .= css($name, "BoldItalic", 700, "italic");
+
+    // 800 - Extra Bold
+    $txt .= css($name, "ExtraBold", 800, "normal");
+    $txt .= css($name, "ExtraBoldItalic", 800, "italic");
+
+    // 900 - Black
+    $txt .= css($name, "Black", 900, "normal");
+    $txt .= css($name, "BlackItalic", 900, "normal");
+
+    return $txt;
+}
+
+?>
+
+/* Generated on <?= date('r') ?> */
+<?= font("Jost") ?>
+<?= font("MavenPro") ?>
+<?= font("Overpass") ?>
+
+:root {
+    --bs-font-sans-serif: "MavenPro","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
+}
+
+html, body {
+    font-family: "MavenPro","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
+}
+
+body.admin {
+    font-family: "Overpass","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system !important;
+}
+
+h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
+    font-family: "Jost","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",system-ui,-apple-system;
 }
 \ No newline at end of file