From a418a16b1afcb3e80071a0238074daf6be6835b6 Mon Sep 17 00:00:00 2001 From: Daniel Dolezal Date: Fri, 24 Oct 2025 19:57:38 +0200 Subject: [PATCH] let chatgpt combine styles into one css file and use it --- templates/files/css/style.css | 559 ++++++++++++++++++++ templates/side/base.htm | 1 - templates/side/views/webpage/files_list.htm | 193 ------- templates/side/views/webpage/index.htm | 45 -- templates/side/views/webpage/upload.htm | 189 ------- 5 files changed, 559 insertions(+), 428 deletions(-) create mode 100644 templates/files/css/style.css diff --git a/templates/files/css/style.css b/templates/files/css/style.css new file mode 100644 index 0000000..63e4749 --- /dev/null +++ b/templates/files/css/style.css @@ -0,0 +1,559 @@ +/* ========================================================================== + Style.css — Combined from multiple provided snippets + Notes: + - Design tokens unified with full set of variables (incl. --danger, --success). + - Base layout/styles deduped. + - Potential selector collisions resolved by scoping where it was safe: + • .actions styles scoped to their contexts (.table and .file-upload). + • .btn keeps a unified base; upload-specific tweaks via .file-upload .btn. + - Otherwise, original class names are preserved. + ========================================================================= */ + +/* ====== Design Tokens ====== */ +:root{ + --bg:#0f1221; + --panel:#161a2f; + --panel-2:#1b2140; + --text:#e7eaf6; + --muted:#a7b0d1; + --accent:#7c9eff; + --accent-2:#8ef6ff; + --border:rgba(255,255,255,.08); + --shadow:0 10px 30px rgba(0,0,0,.25); + --radius:14px; + --danger:#ff7a7a; + --success:#63e6b0; +} +@media (prefers-color-scheme: light){ + :root{ + --bg:#f6f7fb; + --panel:#ffffff; + --panel-2:#f3f6ff; + --text:#111321; + --muted:#495273; + --accent:#385cff; + --accent-2:#00bcd4; + --border:rgba(17,19,33,.08); + --shadow:0 12px 24px rgba(17,19,33,.08); + --danger:#e74c3c; + --success:#0aa06e; + } +} + +/* ====== Base ====== */ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +/* Globale Stile */ +html, body { + height: -webkit-fill-available; + height: 100%; + display: flex; + flex-direction: column; +} + +body { + font-family: Arial, sans-serif; + background-color: var(--primary-color); + color: var(--text-color); +} + +/* Stile für die Navigationsleiste */ +nav { + background-color: var(--nav-background-color); + border-bottom: 1px solid #333; + color: var(--text-color); +} + +nav ul { + list-style: none; + padding: 0; + display: flex; + flex-wrap: nowrap; + flex-direction: row; + align-items: center; +} + +nav ul li { + display: inline-block; + padding: 10px 15px; +} + +nav ul li:first-child { + padding-left: 15px; +} + +nav ul li:last-child { + padding-right: 15px; +} + +nav ul li a:last-child { + margin-right: 0; +} + +nav ul li a { + text-decoration: none; + color: #fff; + font-weight: bold; + font-size: 16px; +} + +nav i { + padding-right: 5px; +} + +#menu-toggle { + display: none; +} + +.menu-icon { + display: none; + font-size: 24px; + color: #fff; + padding: 5px 15px; + cursor: pointer; + margin-bottom: 0; +} + +.has-submenu .submenu-label .fa-caret-right { + transition: transform 0.3s ease; +} + +@media (max-width: 768px) { + .menu-icon { + display: block; + } + + nav ul { + display: none; + flex-direction: column; + width: 100%; + } + + #menu-toggle:checked + .menu-icon + ul { + display: flex; + } + + nav ul li { + text-align: center; + padding: 10px 0; + width: 100%; + } + + nav ul li:first-child { + padding-left: unset; + } + + nav .left-side { + margin-left: unset; + } + + nav ul li:last-child { + padding-right: unset; + } + + .submenu { + max-height: 0; + opacity: 0; + overflow: hidden; + transition: max-height 0.4s ease, opacity 0.4s ease; + } + + .submenu li { + padding: unset; + padding-top: 10px; + } + .submenu li a { + padding: unset; + } + + /* Show submenu when checkbox is checked */ + .has-submenu input[type="checkbox"]:checked + .submenu-label + .submenu { + display: block; + opacity: 1; + max-height: fit-content; + } + .has-submenu input[type="checkbox"]:checked + .submenu-label .fa-caret-right { + transform: rotate(90deg); + } +} + +@media (min-width: 769px) { + nav ul li:hover { + background-color: green; + } + + .submenu { + opacity: 0; + visibility: hidden; + transform: translateY(-5px); + transition: opacity 0.3s ease, transform 0.3s ease; + position: absolute; /* if dropdown */ + z-index: 10; + } + .has-submenu:hover .submenu { + display: block; + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + opacity: 1; + visibility: visible; + transform: translateY(0); + } + .has-submenu:hover .submenu-label .fa-caret-right { + transform: rotate(90deg); + } +} + +.has-submenu { + position: relative; +} + +/* Hide checkbox */ +.has-submenu input[type="checkbox"] { + display: none; +} + +/* Style the label that acts like a button */ +.submenu-label { + display: block; + cursor: pointer; + color: #fff; + user-select: none; + margin-bottom: unset; + font-weight: bold; +} + +/* Hide submenu by default */ +.has-submenu .submenu { + display: none; + list-style: none; + margin: 0; + padding: 0; + background-color: var(--nav-background-color); +} +.has-submenu .fa-caret-down { + padding-left: 5px; +} + +.submenu li { + width: 100%; +} +.submenu li a { + display: block; + padding: 5px 15px; + text-decoration: none; + color: #fff; + white-space: nowrap; +} + +/* Global used */ +.left-side { + margin-left: auto; +} +#header .left-side i { + margin: 0 5px; +} + +.hidden { + display: none; +} + +.middle { + margin: 0 auto; + text-align: center; +} + +.active { + background-color: lightgreen !important; +} +.active:hover { + background-color: #76d376 !important; + transform: scale(1.05); +} + +.container { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 10px; +} +.container img { + max-width: 100%; + height: auto; + display: block; +} + +/* Table Style */ +td a { + color: var(--furry-decoration-color); + text-decoration: none; +} + +main { + flex: 1; +} + +body{ + margin:0; + color:var(--text); + background: + radial-gradient(1200px 600px at 10% -10%, rgba(124,158,255,.18), transparent 60%), + radial-gradient(900px 500px at 110% 10%, rgba(142,246,255,.18), transparent 60%), + var(--bg); + font:500 14px/1.5 system-ui,-apple-system,Segoe UI,Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; +} + +/* ====== Generic Layout ====== */ +.wrap{max-width:980px;margin:clamp(10px,2.2vw,20px) auto;padding:clamp(12px,2.4vw,20px)} + +/* Card */ +.card{ + background:linear-gradient(180deg,var(--panel),var(--panel-2)); + border:1px solid var(--border); + border-radius:var(--radius); + box-shadow:var(--shadow); + padding:clamp(14px,2.6vw,22px); + backdrop-filter:saturate(120%) blur(6px); + -webkit-backdrop-filter:saturate(120%) blur(6px); +} + +/* ====== Hero ====== */ +.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center} +@media (max-width:900px){.hero{grid-template-columns:1fr}} +.title{ + margin:0 0 6px;font-weight:900;letter-spacing:.2px; + font-size:clamp(22px,2.6vw,30px); + background:linear-gradient(90deg,var(--accent),var(--accent-2)); + -webkit-background-clip:text;background-clip:text;color:transparent +} +.subtitle{color:var(--muted);margin:0 0 12px;font-size:.98rem} +.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} + +/* ====== Buttons ====== */ +.btn{ + --btn-br:color-mix(in srgb,var(--accent) 40%,var(--border)); + display:inline-flex;align-items:center;justify-content:center;gap:.55ch; + padding:.6rem .9rem;border-radius:12px;border:1px solid var(--btn-br); + background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent); + color:var(--text);font-weight:760;font-size:.95rem;text-decoration:none;cursor:pointer; + transition:transform .06s,background .15s,border-color .15s,box-shadow .15s; + box-shadow:0 2px 0 rgba(0,0,0,.08);user-select:none +} +.btn:hover{ + background:color-mix(in srgb,var(--accent) 28%,var(--panel-2)); + border-color:color-mix(in srgb,var(--accent) 60%,var(--border)); + box-shadow:0 6px 18px rgba(0,0,0,.18) +} +.btn:active{transform:translateY(1px) scale(.985)} +.btn-ghost{background:transparent;border-color:var(--border)} +/* Upload page prefers slightly larger padding */ +.file-upload .btn{padding:.8rem 1.1rem;font-weight:700} + +/* ====== Glass / Badges ====== */ +.glass{ + min-height:180px;border-radius:calc(var(--radius) - 4px); + border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--border)); + background: + radial-gradient(120% 120% at 100% 0%, color-mix(in srgb,var(--accent) 14%, transparent), transparent 40%), + radial-gradient(120% 120% at 0% 100%, color-mix(in srgb,var(--accent-2) 14%, transparent), transparent 40%), + color-mix(in srgb,var(--panel-2) 70%, transparent); + display:flex;align-items:center;justify-content:center;text-align:center;padding:16px +} +.hero-badge{ + display:inline-flex;align-items:center;gap:.6ch;padding:.4rem .7rem;border-radius:999px; + background:color-mix(in srgb,var(--accent) 16%,transparent); + border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border));color:var(--accent); + font-weight:700;font-size:.9rem +} +.badge{ + display:inline-block;padding:.3rem .55rem;border-radius:999px;font-size:.79rem;line-height:1; + background:color-mix(in srgb,var(--accent) 16%,transparent); + color:var(--accent); + border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border)); +} + +/* ====== Feature Grid ====== */ +.grid{margin-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} +@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}} +@media (max-width:520px){.grid{grid-template-columns:1fr}} +.feature{ + background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--panel-2) 85%,transparent)); + border:1px solid var(--border);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:flex-start; + transition:transform .08s,background .2s,border-color .2s,box-shadow .2s +} +.feature:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));box-shadow:0 10px 24px rgba(0,0,0,.14)} +.ic{font-size:18px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))} +.fx-title{margin:0 0 2px;font-weight:800;font-size:.98rem} +.fx-sub{margin:0;color:var(--muted);font-size:.9rem} + +/* ====== Footer ====== */ +.foot{margin-top:16px;color:var(--muted);font-size:.92rem;text-align:center} +.foot a{color:var(--accent);text-decoration:none} +.foot a:hover{text-decoration:underline} + +/* ====== Auth Providers ====== */ +.providers{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} +.prov{ + display:inline-flex;align-items:center;gap:.6ch;padding:.55rem .85rem;border-radius:12px; + border:1px solid color-mix(in srgb,var(--accent) 40%,var(--border)); + background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent); + text-decoration:none;color:var(--text);font-weight:760 +} +.prov:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--border))} + +/* ====== Files / Table View ====== */ +.file-list{padding:clamp(16px,3vw,28px)} +.page-title{ + margin:0 0 18px;font-weight:800;letter-spacing:.2px;font-size:clamp(22px,2.4vw,32px); + background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent +} +.subtle{color:var(--muted);font-size:.95rem;margin:0 0 22px} + +.table-wrap{overflow:auto;border-radius:calc(var(--radius) - 2px);border:1px solid var(--border)} +.table{width:100%;border-collapse:separate;border-spacing:0;background:transparent} +.table thead th{ + position:sticky;top:0;z-index:1;text-align:left;font-size:.85rem;font-weight:700;letter-spacing:.3px; + padding:12px 14px;color:var(--muted); + background:color-mix(in srgb,var(--panel) 86%, black 0%); + border-bottom:1px solid var(--border);backdrop-filter:blur(4px) +} +.table tbody td{ + padding:14px;border-bottom:1px dashed var(--border);vertical-align:middle;white-space:nowrap +} +.table tbody tr{transition:background .25s ease, transform .06s ease} +.table tbody tr:hover{background:color-mix(in srgb,var(--panel-2) 88%, transparent)} +.table .cell--name a{color:var(--text);text-decoration:none;font-weight:700} +.table .cell--name a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px} +.table .cell--right{text-align:right} +.table tbody tr:nth-child(2n){background:color-mix(in srgb,var(--panel) 92%, transparent)} +.table tbody tr:hover:nth-child(2n){background:color-mix(in srgb,var(--panel-2) 86%, transparent)} + +/* Icon Buttons (used near tables) */ +.actions{ display:flex; gap:8px } +.table .actions{ justify-content:flex-end } +.icon-btn{ + --btn-bg: color-mix(in srgb, var(--panel-2) 70%, transparent); + --btn-br: color-mix(in srgb, var(--accent) 22%, var(--border)); + display:inline-flex;align-items:center;justify-content:center;gap:.4ch; + padding:.45rem .6rem;border-radius:10px;border:1px solid var(--btn-br); + background:var(--btn-bg);color:var(--text);font-size:.9rem;cursor:pointer; + transition:transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; + box-shadow:0 2px 0 rgba(0,0,0,.08);user-select:none +} +.icon-btn:hover{ + background:color-mix(in srgb,var(--accent) 12%,var(--panel-2)); + border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); + box-shadow:0 6px 18px rgba(0,0,0,.18); +} +.icon-btn:active{transform:translateY(1px) scale(.98)} +.icon-btn[data-variant="ghost"]{background:transparent;border-color:var(--border)} +.icon-btn[data-variant="primary"]{ + background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%, transparent), transparent); + border-color:color-mix(in srgb,var(--accent) 50%, var(--border)); +} + +/* Small screens for dense lists */ +@media (max-width:720px){ + .table tbody td{white-space:normal} + .actions{flex-wrap:wrap} + .badge{margin-top:4px} +} + +/* ====== Upload UI ====== */ +.file-upload{margin:clamp(16px,3vw,32px) auto} +.dropzone{ + position:relative;border:2px dashed color-mix(in srgb,var(--accent) 40%,var(--border)); + border-radius:calc(var(--radius) - 4px); + background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 60%, transparent), transparent); + padding:clamp(22px,4vw,40px);text-align:center;cursor:pointer; + transition:border-color .25s ease, background .25s ease, transform .06s ease;outline:none +} +.dropzone:hover{ + border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); + background:color-mix(in srgb,var(--panel-2) 75%, transparent); +} +.dropzone:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%, transparent)} +.dropzone.drag{ + border-color:var(--accent-2); + background:color-mix(in srgb,var(--accent) 12%, var(--panel-2)); +} +.dz-icon{font-size:42px;line-height:1;margin-bottom:10px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))} +.dz-title{font-weight:800;margin:6px 0 2px} +.dz-hint{color:var(--muted);font-size:.95rem;margin:6px 0 0} +input[type="file"]{display:none} + +/* Fields */ +.field{margin-top:18px} +.label{display:block;margin:14px 0 8px;font-size:.92rem;color:var(--muted)} +.input,.select,.textarea,.datetime{ + width:100%;border-radius:12px;border:1px solid var(--border); + background:color-mix(in srgb,var(--panel) 88%, transparent); + color:var(--text);padding:12px 14px; + transition:border-color .2s ease, box-shadow .2s ease, background .2s ease +} +.textarea{min-height:120px;resize:vertical} +.input:focus,.select:focus,.textarea:focus,.datetime:focus{ + outline:none;border-color:color-mix(in srgb,var(--accent) 50%, var(--border)); + box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%, transparent); + background:color-mix(in srgb,var(--panel-2) 92%, transparent); +} +.input[disabled],.textarea[disabled]{opacity:.7;cursor:not-allowed} + +.row{display:grid;grid-template-columns:1fr 1fr;gap:14px} +@media (max-width:720px){.row{grid-template-columns:1fr}} + +.preview{margin-top:10px;color:var(--muted)} + +/* Upload actions use centered alignment */ +.file-upload .actions{align-items:center;gap:10px;margin-top:18px} + +/* Progress */ +.progress{ + height:10px;border-radius:999px;background:color-mix(in srgb,var(--panel-2) 70%, transparent); + border:1px solid var(--border);overflow:hidden;margin-top:12px +} +.bar{ + height:100%;width:0%; + background:linear-gradient(90deg,var(--accent),var(--accent-2)); + transition:width .2s ease +} + +/* Toast */ +.toast{ + position:fixed;right:16px;bottom:16px;z-index:1000; + background:linear-gradient(180deg,var(--panel),var(--panel-2)); + border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow); + color:var(--text);padding:10px 14px;display:none;align-items:center;gap:.6ch +} +.toast.show{display:flex;animation:pop .18s ease-out} +@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}} + +/* ====== Utilities ====== */ +.sr-only{ + position:absolute !important;width:1px;height:1px;padding:0;margin:-1px; + overflow:hidden;clip:rect(0,0,0,0);border:0; +} + +/* Footer */ +footer { + padding-top: 1rem; + padding-bottom: 1rem; + text-align: center; + font-size: 0.9rem; + color: #888; + border-top: 1px solid #333; +} +footer a { + color: #80d4ff; + margin: 0 0.5rem; + text-decoration: none; +} +footer a:hover { + text-decoration: underline; +} diff --git a/templates/side/base.htm b/templates/side/base.htm index 2125542..535bb68 100644 --- a/templates/side/base.htm +++ b/templates/side/base.htm @@ -6,7 +6,6 @@ - diff --git a/templates/side/views/webpage/files_list.htm b/templates/side/views/webpage/files_list.htm index accdd0f..0fc01a4 100644 --- a/templates/side/views/webpage/files_list.htm +++ b/templates/side/views/webpage/files_list.htm @@ -8,199 +8,6 @@ {% endblock %} -{% block head %} - -{% endblock %} - {% block content %}
diff --git a/templates/side/views/webpage/index.htm b/templates/side/views/webpage/index.htm index 33f27ac..30ad284 100644 --- a/templates/side/views/webpage/index.htm +++ b/templates/side/views/webpage/index.htm @@ -8,51 +8,6 @@ {% endblock %} -{% block head %} - -{% endblock %} - {% block content %}
diff --git a/templates/side/views/webpage/upload.htm b/templates/side/views/webpage/upload.htm index a42099e..7b51e2c 100644 --- a/templates/side/views/webpage/upload.htm +++ b/templates/side/views/webpage/upload.htm @@ -8,195 +8,6 @@ {% endblock %} -{% block head %} - -{% endblock %} - {% block content %}