From 468e062a23d25ff82477239ad015b4d543c7cdd5 Mon Sep 17 00:00:00 2001 From: trinkey Date: Mon, 23 Dec 2024 13:22:20 -0500 Subject: [PATCH] css mostly --- config.py | 2 + tcommon/static/css/base.css | 124 ++++++++++++++++++++++++++++-------- tcommon/views/api.py | 5 +- tcommon/views/favicon.py | 3 +- 4 files changed, 105 insertions(+), 29 deletions(-) diff --git a/config.py b/config.py index 24633b2..9a26961 100644 --- a/config.py +++ b/config.py @@ -2,6 +2,8 @@ from typing import Literal DEBUG = True +ALLOW_NEW_USERS = True + # DON'T PUT A TRAILING SLASH ON URLS! # Use a local url for faster communication for INTERNAL urls. # --------------------------------------- diff --git a/tcommon/static/css/base.css b/tcommon/static/css/base.css index 51b6e52..0059bd4 100644 --- a/tcommon/static/css/base.css +++ b/tcommon/static/css/base.css @@ -1,6 +1,6 @@ /* Colors */ -html { --rosewater: #f5e0dc; --flamingo: #f2cdcd; --pink: #f5c2e7; --mauve: #cba6f7; --red: #f38ba8; --maroon: #eba0ac; --peach: #fab387; --yellow: #f9e2af; --green: #a6e3a1; --teal: #94e2d5; --sky: #89dceb; --sapphire: #74c7ec; --blue: #89b4fa; --lavender: #b4befe; --text: #cdd6f4; --subtext1: #bac2de; --subtext0: #a6adc8; --overlay2: #9399b2; --overlay1: #7f849c; --overlay0: #6c7086; --surface2: #585b70; --surface1: #45475a; --surface0: #313244; --base: #1e1e2e; --mantle: #181825; --crust: #11111b; --base-low-op: #1e1e2ed0 } -html[data-light] { --rosewater: #dc8a78; --flamingo: #dd7878; --pink: #ea76cb; --mauve: #8839ef; --red: #d20f39; --maroon: #e64553; --peach: #fe640b; --yellow: #df8e1d; --green: #40a02b; --teal: #179299; --sky: #04a5e5; --sapphire: #209fb5; --blue: #1e66f5; --lavender: #7287fd; --text: #4c4f69; --subtext1: #5c5f77; --subtext0: #6c6f85; --overlay2: #7c7f93; --overlay1: #8c8fa1; --overlay0: #9ca0b0; --surface2: #acb0be; --surface1: #bcc0cc; --surface0: #ccd0da; --base: #eff1f5; --mantle: #e6e9ef; --crust: #dce0e8; --base-low-op: #eff1f5b0} +html { --rosewater: 245, 224, 220; --flamingo: 242, 205, 205; --pink: 245, 194, 231; --mauve: 203, 166, 247; --red: 243, 139, 168; --maroon: 235, 160, 172; --peach: 250, 179, 135; --yellow: 249, 226, 175; --green: 166, 227, 161; --teal: 148, 226, 213; --sky: 137, 220, 235; --sapphire: 116, 199, 236; --blue: 137, 180, 250; --lavender: 180, 190, 254; --text: 205, 214, 244; --subtext1: 186, 194, 222; --subtext0: 166, 173, 200; --overlay2: 147, 153, 178; --overlay1: 127, 132, 156; --overlay0: 108, 112, 134; --surface2: 88, 91, 112; --surface1: 69, 71, 90; --surface0: 49, 50, 68; --base: 30, 30, 46; --mantle: 24, 24, 37; --crust: 17, 17, 27; } +html[data-light] { --rosewater: 220, 138, 120; --flamingo: 221, 120, 120; --pink: 234, 118, 203; --mauve: 136, 57, 239; --red: 210, 15, 57; --maroon: 230, 69, 83; --peach: 254, 100, 11; --yellow: 223, 142, 29; --green: 64, 160, 43; --teal: 23, 146, 153; --sky: 4, 165, 229; --sapphire: 32, 159, 181; --blue: 30, 102, 245; --lavender: 114, 135, 253; --text: 76, 79, 105; --subtext1: 92, 95, 119; --subtext0: 108, 111, 133; --overlay2: 124, 127, 147; --overlay1: 140, 143, 161; --overlay0: 156, 160, 176; --surface2: 172, 176, 190; --surface1: 188, 192, 204; --surface0: 204, 208, 218; --base: 239, 241, 245; --mantle: 230, 233, 239; --crust: 220, 224, 232; } /* Font */ @font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans.ttf") format("truetype"); } @@ -18,43 +18,52 @@ body { width: 100vw; min-height: 100vh; overflow-x: hidden; - background-color: var(--base); - color: var(--text); + background-color: rgb(var(--base)); + color: rgb(var(--text)); font-family: "DejaVu Sans"; font-size: 18px; } ::selection { - background-color: var(--accent); - color: var(--base); + background-color: rgb(var(--accent)); + color: rgb(var(--base)); } code, pre { - font-family: "Ubuntu Mono" + font-family: "Ubuntu Mono"; + background-color: rgb(var(--mantle)); + padding: 2px 5px; + border-radius: 3px; } small, i { - color: var(--subtext0); + color: rgb(var(--subtext0)); font-size: 12px; } +small a { + opacity: 80%; +} + h1 { - color: var(--accent); + color: rgb(var(--accent)); } a:link, a:visited { - color: var(--accent); + color: rgb(var(--accent)); font-weight: 700; } input:not( - [type="submit"] -) { - background-color: var(--mantle); - color: var(--text); + [type="submit"], + [type="checkbox"] +), +textarea { + background-color: rgb(var(--mantle)); + color: rgb(var(--text)); font-family: "DejaVu Sans"; - outline: 1px solid var(--surface0); + outline: 1px solid rgb(var(--surface0)); padding: 4px 6px; border: none; margin: 2px 0; @@ -62,21 +71,30 @@ input:not( transition: outline-color 0.25s, background-color 0.25s; } +textarea { + resize: vertical; + max-width: 400px; + width: 90vw; + height: 100px; +} + input:not( - [type="submit"] -):focus { - outline-color: var(--accent); - background-color: var(--crust); + [type="submit"], + [type="checkbox"] +):focus, +textarea:focus { + outline-color: rgb(var(--accent)); + background-color: rgb(var(--crust)); transition: outline-color 0.1s, background-color 0.1s; } input[type="submit"], button { - background-color: var(--mantle); - color: var(--text); + background-color: rgb(var(--mantle)); + color: rgb(var(--text)); font-family: "DejaVu Sans"; - outline: 1px solid var(--surface0); - padding: 4px 6px; + outline: 1px solid rgb(var(--surface0)); + padding: 4px 8px; min-width: 75px; border: none; margin: 2px 0; @@ -85,6 +103,37 @@ button { transition: outline-color 0.25s, background-color 0.25s; } +input[type="checkbox"] { + display: none; +} + +input[type="checkbox"]:not(:has(+ label[data-fake-checkbox])) { + display: inline-block; +} + +label[data-fake-checkbox]::before { + content: ""; + transition: background-color 0.25s, outline-color 0.25s; + background-color: rgb(var(--crust)); + display: inline-block; + position: relative; + top: 3px; + width: 18px; + height: 18px; + border-radius: 4px; + outline: 1px solid rgb(var(--surface2)); + margin-right: 5px; +} + +label[data-fake-checkbox]:hover::before { + outline-color: rgb(var(--overlay1)); + background-color: rgb(var(--mantle)); +} + +input[type="checkbox"]:checked + label[data-fake-checkbox]::before { + background-color: rgb(var(--accent)); +} + ul, ol { padding-left: 15px; @@ -92,21 +141,27 @@ ol { hr { background: none; - border: 1px solid var(--accent); + border: 1px solid rgb(var(--accent)); outline: none; width: 90vw; max-width: 500px; } +hr.sub { + max-width: 300px; + border: 0.75px solid rgb(var(--surface0)); + margin-bottom: 3px; +} + input[type="submit"]:focus, button:focus { - outline-color: var(--accent); + outline-color: rgb(var(--accent)); transition: outline-color 0.1s; } input[type="submit"]:active, button:active { - background-color: var(--crust); + background-color: rgb(var(--crust)); transition: background-color 0.1s; } @@ -122,6 +177,23 @@ button:active { .no-border { border: none; } .no-outline { outline: none; } +.cursor-pointer { cursor: pointer; } + +.success-anim { + animation: kf-success-anim 0.5s forwards ease-in; + outline: 1px solid; +} + +@keyframes kf-success-anim { + 0% { + outline-color: rgba(var(--green), 255); + } + + 100% { + outline-color: rgba(var(--green), 0); + } +} + #container { text-align: center; padding: 10px; diff --git a/tcommon/views/api.py b/tcommon/views/api.py index d4150f3..cf781f1 100644 --- a/tcommon/views/api.py +++ b/tcommon/views/api.py @@ -3,8 +3,8 @@ import json from django.core.handlers.wsgi import WSGIRequest from django.http import HttpResponse -from config import (DEBUG, ENABLED_APPLICATIONS, tCOMMON_TOKEN, - tCOMMON_URL_INTERNAL, tCOMMON_URL_PUBLIC) +from config import (ALLOW_NEW_USERS, DEBUG, ENABLED_APPLICATIONS, + tCOMMON_TOKEN, tCOMMON_URL_INTERNAL, tCOMMON_URL_PUBLIC) from tcommon.settings import VERSION @@ -22,6 +22,7 @@ def initialize(request: WSGIRequest) -> HttpResponse: "debug": DEBUG, "version": list(VERSION), "version_str": ".".join([str(i) for i in VERSION]), + "new_users": ALLOW_NEW_USERS, "success": True, "services": { "common": { diff --git a/tcommon/views/favicon.py b/tcommon/views/favicon.py index 331e7cb..62a1334 100644 --- a/tcommon/views/favicon.py +++ b/tcommon/views/favicon.py @@ -1,6 +1,6 @@ from cairosvg import svg2png from django.http import HttpResponse, HttpResponseServerError -from django.views.decorators.cache import cache_page +from django.views.decorators.cache import cache_control, cache_page favicon = """ @@ -48,6 +48,7 @@ colors = { } } +@cache_control(**{"max-age": 60 * 60 * 24 * 30}) @cache_page(60 * 60 * 2) def generate_favicon(request, theme, accent) -> HttpResponse | HttpResponseServerError: png_data: bytes | None = svg2png(