t/common
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css mostly

Browse source
This commit is contained in:
trinkey 2024-12-23 13:22:20 -05:00
parent 753de8a723
commit 468e062a23
4 changed files with 105 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config.py
View file

@ -2,6 +2,8 @@ from typing import Literal
DEBUG = True DEBUG = True
ALLOW_NEW_USERS = True
# DON'T PUT A TRAILING SLASH ON URLS! # DON'T PUT A TRAILING SLASH ON URLS!
# Use a local url for faster communication for INTERNAL urls. # Use a local url for faster communication for INTERNAL urls.
# --------------------------------------- # ---------------------------------------

124
tcommon/static/css/base.css
View file

@ -1,6 +1,6 @@
/* Colors */ /* 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 { --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: #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[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 */
@font-face { font-family: 'DejaVu Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/font/DejaVuSans.ttf") format("truetype"); } @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; width: 100vw;
min-height: 100vh; min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
background-color: var(--base); background-color: rgb(var(--base));
color: var(--text); color: rgb(var(--text));
font-family: "DejaVu Sans"; font-family: "DejaVu Sans";
font-size: 18px; font-size: 18px;
} }
::selection { ::selection {
background-color: var(--accent); background-color: rgb(var(--accent));
color: var(--base); color: rgb(var(--base));
} }
code, pre { code, pre {
font-family: "Ubuntu Mono" font-family: "Ubuntu Mono";
background-color: rgb(var(--mantle));
padding: 2px 5px;
border-radius: 3px;
} }
small, i { small, i {
color: var(--subtext0); color: rgb(var(--subtext0));
font-size: 12px; font-size: 12px;
} }
small a {
opacity: 80%;
}
h1 { h1 {
color: var(--accent); color: rgb(var(--accent));
} }
a:link, a:link,
a:visited { a:visited {
color: var(--accent); color: rgb(var(--accent));
font-weight: 700; font-weight: 700;
} }
input:not( input:not(
[type="submit"] [type="submit"],
) { [type="checkbox"]
background-color: var(--mantle); ),
color: var(--text); textarea {
background-color: rgb(var(--mantle));
color: rgb(var(--text));
font-family: "DejaVu Sans"; font-family: "DejaVu Sans";
outline: 1px solid var(--surface0); outline: 1px solid rgb(var(--surface0));
padding: 4px 6px; padding: 4px 6px;
border: none; border: none;
margin: 2px 0; margin: 2px 0;
@ -62,21 +71,30 @@ input:not(
transition: outline-color 0.25s, background-color 0.25s; transition: outline-color 0.25s, background-color 0.25s;
} }
textarea {
resize: vertical;
max-width: 400px;
width: 90vw;
height: 100px;
}
input:not( input:not(
[type="submit"] [type="submit"],
):focus { [type="checkbox"]
outline-color: var(--accent); ):focus,
background-color: var(--crust); textarea:focus {
outline-color: rgb(var(--accent));
background-color: rgb(var(--crust));
transition: outline-color 0.1s, background-color 0.1s; transition: outline-color 0.1s, background-color 0.1s;
} }
input[type="submit"], input[type="submit"],
button { button {
background-color: var(--mantle); background-color: rgb(var(--mantle));
color: var(--text); color: rgb(var(--text));
font-family: "DejaVu Sans"; font-family: "DejaVu Sans";
outline: 1px solid var(--surface0); outline: 1px solid rgb(var(--surface0));
padding: 4px 6px; padding: 4px 8px;
min-width: 75px; min-width: 75px;
border: none; border: none;
margin: 2px 0; margin: 2px 0;
@ -85,6 +103,37 @@ button {
transition: outline-color 0.25s, background-color 0.25s; 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, ul,
ol { ol {
padding-left: 15px; padding-left: 15px;
@ -92,21 +141,27 @@ ol {
hr { hr {
background: none; background: none;
border: 1px solid var(--accent); border: 1px solid rgb(var(--accent));
outline: none; outline: none;
width: 90vw; width: 90vw;
max-width: 500px; max-width: 500px;
} }
hr.sub {
max-width: 300px;
border: 0.75px solid rgb(var(--surface0));
margin-bottom: 3px;
}
input[type="submit"]:focus, input[type="submit"]:focus,
button:focus { button:focus {
outline-color: var(--accent); outline-color: rgb(var(--accent));
transition: outline-color 0.1s; transition: outline-color 0.1s;
} }
input[type="submit"]:active, input[type="submit"]:active,
button:active { button:active {
background-color: var(--crust); background-color: rgb(var(--crust));
transition: background-color 0.1s; transition: background-color 0.1s;
} }
@ -122,6 +177,23 @@ button:active {
.no-border { border: none; } .no-border { border: none; }
.no-outline { outline: 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 { #container {
text-align: center; text-align: center;
padding: 10px; padding: 10px;

5
tcommon/views/api.py
View file

@ -3,8 +3,8 @@ import json
from django.core.handlers.wsgi import WSGIRequest from django.core.handlers.wsgi import WSGIRequest
from django.http import HttpResponse from django.http import HttpResponse
from config import (DEBUG, ENABLED_APPLICATIONS, tCOMMON_TOKEN, from config import (ALLOW_NEW_USERS, DEBUG, ENABLED_APPLICATIONS,
tCOMMON_URL_INTERNAL, tCOMMON_URL_PUBLIC) tCOMMON_TOKEN, tCOMMON_URL_INTERNAL, tCOMMON_URL_PUBLIC)
from tcommon.settings import VERSION from tcommon.settings import VERSION
@ -22,6 +22,7 @@ def initialize(request: WSGIRequest) -> HttpResponse:
"debug": DEBUG, "debug": DEBUG,
"version": list(VERSION), "version": list(VERSION),
"version_str": ".".join([str(i) for i in VERSION]), "version_str": ".".join([str(i) for i in VERSION]),
"new_users": ALLOW_NEW_USERS,
"success": True, "success": True,
"services": { "services": {
"common": { "common": {

3
tcommon/views/favicon.py
View file

@ -1,6 +1,6 @@
from cairosvg import svg2png from cairosvg import svg2png
from django.http import HttpResponse, HttpResponseServerError 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 = """<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"> favicon = """<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
<rect width="64" height="64" x=".253" y=".167" fill="{{ BASE }}" rx="16"/> <rect width="64" height="64" x=".253" y=".167" fill="{{ BASE }}" rx="16"/>
@ -48,6 +48,7 @@ colors = {
} }
} }
@cache_control(**{"max-age": 60 * 60 * 24 * 30})
@cache_page(60 * 60 * 2) @cache_page(60 * 60 * 2)
def generate_favicon(request, theme, accent) -> HttpResponse | HttpResponseServerError: def generate_favicon(request, theme, accent) -> HttpResponse | HttpResponseServerError:
png_data: bytes | None = svg2png( png_data: bytes | None = svg2png(