css mostly
This commit is contained in:
trinkey
parent
753de8a723
commit
468e062a23
4 changed files with 105 additions and 29 deletions
|
|
@ -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.
|
||||
# ---------------------------------------
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 = """<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"/>
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in a new issue