From 95112b1eb06a4be531ded59563d53a63a8d614e8 Mon Sep 17 00:00:00 2001 From: Minteck Date: Sun, 8 Aug 2021 12:04:30 +0200 Subject: Opening! --- static/css/darktheme.css | 480 ++++++++++++++++++++++----------------------- static/css/editor.css | 118 +++++++++++ static/css/fonts/index.php | 164 ++++++++-------- 3 files changed, 440 insertions(+), 322 deletions(-) create mode 100644 static/css/editor.css (limited to 'static/css') 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 @@ - - -/* Generated on */ - - - - -: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; + + +/* Generated on */ + + + + +: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 -- cgit