From bea7a079a6bd4d238f3a586abf269d69f797083a Mon Sep 17 00:00:00 2001 From: ashley Date: Tue, 19 Aug 2025 13:11:51 +0200 Subject: [PATCH] Update html/custom-css.ejs --- html/custom-css.ejs | 544 ++++++++++++++------------------------------ 1 file changed, 169 insertions(+), 375 deletions(-) diff --git a/html/custom-css.ejs b/html/custom-css.ejs index b81dc707..29968c1c 100644 --- a/html/custom-css.ejs +++ b/html/custom-css.ejs @@ -1,20 +1,12 @@ - PokeTube | Customize - @@ -32,26 +24,13 @@ @import url("https://p.poketube.fun/https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css"); :root{ - --bg: #0c0c0f; - --panel: #121218; - --panel-2: #0f0f15; - --text: #e9ecf1; - --muted: #aab2c0; - --accent: #7cc7ff; - --accent-2:#f97794; - --ok:#20c997; - --warn:#ffb400; - --err:#ef476f; - --border: #212230; - --chip: #161824; - --chipb: #0f111a; - --ring: 0 0 0 2px rgba(124,199,255,.25); - --radius: 16px; - --radius-lg: 22px; - --shadow: 0 10px 30px rgba(0,0,0,.35); + --bg:#0c0c0f; --panel:#121218; --panel-2:#0f0f15; --text:#e9ecf1; --muted:#aab2c0; + --accent:#7cc7ff; --accent-2:#f97794; --ok:#20c997; --warn:#ffb400; --err:#ef476f; + --border:#212230; --chip:#161824; --chipb:#0f111a; --ring:0 0 0 2px rgba(124,199,255,.25); + --radius:16px; --radius-lg:22px; --shadow:0 10px 30px rgba(0,0,0,.35); --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Ubuntu Mono", Consolas, "Liberation Mono", monospace; --sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif; - --code-size: 13.5px; + --code-size:13.5px; } html.gradient-bg{ @@ -64,232 +43,116 @@ background-attachment: fixed; } - * { box-sizing:border-box } - body{ - margin:0; - color:var(--text); - font-family:var(--sans); - background: transparent; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - overflow-x:hidden; - } + *{box-sizing:border-box} + body{margin:0;color:var(--text);font-family:var(--sans);background:transparent;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} - /* Top nav — centered search, icons aligned, forced translateY(0) */ - nav{ - display:flex; - align-items:center; - gap:16px; - padding:12px 20px; - position:sticky; - top:0; - backdrop-filter: blur(12px) saturate(120%); + /* -------- NAVBAR (isolated) -------- */ + .customize-navbar{ + display:flex; align-items:center; gap:16px; padding:12px 20px; + position:sticky; top:0; z-index:2000; min-height:62px; + backdrop-filter:blur(12px) saturate(120%); background:linear-gradient(180deg, rgba(14,14,24,.78), rgba(14,14,24,.45)); border-bottom:1px solid rgba(255,255,255,.06); - z-index:2000; - min-height:62px; } - nav .left{ display:flex; align-items:center } - nav .left img{ width:124px; display:block } - nav .middle{ + .customize-navbar__left{display:flex;align-items:center} + .customize-navbar__logo{width:124px;display:block} + .customize-navbar__middle{ flex:1; display:flex; justify-content:center; align-items:center; - transform: translateY(0) !important; /* requested */ + transform:translateY(0) !important; } - nav .middle .search{ - position:relative; width:100%; max-width:640px; - transform: translateY(0) !important; /* requested */ + .customize-navbar__search{ + position:relative; width:100%; max-width:640px; transform:translateY(0) !important; } - nav .middle input[type="search"]{ - width:100%; height:40px; - padding:0 44px 0 16px; /* leave space for button */ - border-radius:14px; - border:1px solid rgba(255,255,255,.12); - outline:none; - background: - radial-gradient(400px 80px at 50% 0%, rgba(124,199,255,.06), transparent 60%), - #151720; - color:var(--text); + .customize-navbar__input{ + width:100%; height:40px; padding:0 44px 0 16px; + border-radius:14px; border:1px solid rgba(255,255,255,.12); outline:none; + background: radial-gradient(400px 80px at 50% 0%, rgba(124,199,255,.06), transparent 60%), #151720; + color:var(--text); box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); transition:.18s border-color, .18s box-shadow, .18s background-color; - box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); } - nav .middle input[type="search"]::placeholder{ color:#8b93a6 } - nav .middle input[type="search"]:focus{ - border-color: rgba(124,199,255,.5); - box-shadow: 0 0 0 4px rgba(124,199,255,.15); - background:#141826; + .customize-navbar__input::placeholder{color:#8b93a6} + .customize-navbar__input:focus{ + border-color:rgba(124,199,255,.5); box-shadow:0 0 0 4px rgba(124,199,255,.15); background:#141826; } - /* Search button INSIDE the field */ - nav .middle button{ - position:absolute; right:6px; top:50%; transform:translateY(0) translateY(-50%) !important; + .customize-navbar__btn{ + position:absolute; right:6px; top:50%; + transform:translateY(0) translateY(-50%) !important; border:0; border-radius:10px; width:36px; height:36px; cursor:pointer; - background:linear-gradient(180deg,#1b2231,#151b27); - color:var(--text); display:grid; place-items:center; - outline:none; + background:linear-gradient(180deg,#1b2231,#151b27); color:var(--text); + display:grid; place-items:center; outline:none; } - nav .middle button:focus{ box-shadow:0 0 0 3px rgba(124,199,255,.25) } - - nav .right{ - display:flex; align-items:center; gap:10px; padding-left:8px; height:40px; - } - nav .right a{ - display:grid; place-items:center; - width:34px; height:34px; border-radius:10px; + .customize-navbar__btn:focus{ box-shadow:0 0 0 3px rgba(124,199,255,.25) } + .customize-navbar__right{display:flex;align-items:center;gap:10px;padding-left:8px;height:40px} + .customize-navbar__icon{ + display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#cfd6e6; border:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,#161925,#121521); transition:.15s transform,.15s border-color,.15s background-color,.15s color; } - nav .right a:hover{ color:#e8f0ff; transform:translateY(-1px); border-color:rgba(124,199,255,.35) } + .customize-navbar__icon:hover{ color:#e8f0ff; transform:translateY(-1px); border-color:rgba(124,199,255,.35) } - /* Page container */ - .container{ - max-width:1200px; - margin:22px auto 64px; - padding:0 16px; - } - - /* Header card */ + /* -------- PAGE LAYOUT -------- */ + .container{max-width:1200px;margin:22px auto 64px;padding:0 16px} .hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; background:linear-gradient(180deg, rgba(124,199,255,.08), rgba(249,119,148,.07)), var(--panel); - border:1px solid var(--border); - border-radius:var(--radius-lg); - padding:18px; - box-shadow:var(--shadow); + border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); } - @media (max-width:900px){ .hero{ grid-template-columns:1fr } } - - .hero .title{ font-weight:900; font-size:clamp(22px, 3vw, 34px); letter-spacing:.2px; line-height:1.1; } - .hero .subtitle{ color:var(--muted); margin-top:6px; font-size:clamp(13px,1.6vw,15px) } - - .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px } - .chip{ - background:linear-gradient(180deg, var(--chip), var(--chipb)); - border:1px solid var(--border); - padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); - } - - /* Tabs */ - .tabs{ - display:flex; gap:8px; padding:14px; margin-top:14px; - background:var(--panel-2); border:1px solid var(--border); - border-radius:var(--radius); - } - .tab{ - position:relative; - padding:10px 14px; border-radius:10px; cursor:pointer; - text-transform:uppercase; letter-spacing:.75px; font-size:12px; - color:var(--muted); user-select:none; text-decoration:none; - } - .tab.active{ color:var(--text); background:rgba(124,199,255,.06) } - .tab.active::after{ - content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; - background:linear-gradient(90deg, var(--accent), var(--accent-2)); - border-radius:2px; - } - - /* Editor layout */ - .work{ - display:grid; grid-template-columns:1.1fr .9fr; gap:16px; margin-top:14px; - } - @media (max-width:1000px){ .work{ grid-template-columns:1fr } } - - .panel{ - background:var(--panel); - border:1px solid var(--border); - border-radius:var(--radius); - box-shadow:var(--shadow); - overflow:hidden; - } - .panel .head{ - display:flex; align-items:center; justify-content:space-between; gap:10px; - padding:10px 12px; border-bottom:1px solid var(--border); - background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); - } - .panel .head .title{ font-weight:700; font-size:14px } - .panel .head .hint{ color:var(--muted); font-size:12px } - .btns{ display:flex; gap:8px; flex-wrap:wrap } - .btn{ - border:1px solid var(--border); - background:var(--chip); color:var(--text); - padding:8px 10px; border-radius:10px; font-size:12px; cursor:pointer; - } - .btn:hover{ border-color:var(--accent); box-shadow:var(--ring) } - .btn.ok{ background:rgba(32,201,151,.12); border-color:rgba(32,201,151,.4) } - .btn.warn{ background:rgba(255,180,0,.12); border-color:rgba(255,180,0,.4) } - .btn.err{ background:rgba(239,71,111,.12); border-color:rgba(239,71,111,.4) } - - /* Editor (textarea + overlayed highlighted pre) */ - .editor-wrap{ position:relative; height:min(70vh, 680px); overflow:auto; background:#0a0b12; } - .editor{ - position:absolute; inset:0; resize:none; width:100%; height:100%; - padding:18px 18px 18px 54px; - border:0; outline:0; background:transparent; color:transparent; /* let overlay show */ - caret-color:var(--text); - font: 500 var(--code-size)/1.6 var(--mono); - white-space:pre; overflow:auto; tab-size:2; -moz-tab-size:2; - } - .hl{ - pointer-events:none; user-select:none; - padding:18px 18px 18px 54px; min-height:100%; - font: 500 var(--code-size)/1.6 var(--mono); - white-space:pre; color:var(--text); - } - .ln{ - position:absolute; left:0; top:0; bottom:0; width:40px; - background:#08090f; color:#6272a4; border-right:1px solid #0d0f1a; - text-align:right; padding:18px 6px; font: 500 var(--code-size)/1.6 var(--mono); - user-select:none; - } - - /* Syntax highlighting (no library) */ - .tok.comment { color:#6c7891; font-style:italic } - .tok.str { color:#a1eafb } - .tok.num { color:#ffd580 } - .tok.kw { color:#8ef0a5; font-weight:600 } - .tok.fn { color:#9bb7ff } - .tok.prop { color:#c2d1ff } - .tok.op { color:#ffadb5 } - .tok.selector{ color:#ffb8e2 } - .tok.at { color:#9cf1dd } - .tok.bool { color:#ffcf99 } - .tok.reg { color:#a5ffce } - - /* Preview */ - .preview{ padding:14px; background:var(--panel-2); } - .preview .box{ - border:1px dashed var(--border); - border-radius:12px; padding:14px; background:#0b0d14; - min-height:180px; - } - - footer{ max-width:1200px; margin:40px auto 50px; padding:0 16px; color:var(--muted); font-size:12px; } - .btn:focus, .tab:focus { outline: none; box-shadow: var(--ring) } + @media (max-width:900px){.hero{grid-template-columns:1fr}} + .title{font-weight:900;font-size:clamp(22px,3vw,34px);letter-spacing:.2px;line-height:1.1} + .subtitle{color:var(--muted);margin-top:6px;font-size:clamp(13px,1.6vw,15px)} + .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} + .chip{background:linear-gradient(180deg,var(--chip),var(--chipb));border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)} + .tabs{display:flex;gap:8px;padding:14px;margin-top:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius)} + .tab{position:relative;padding:10px 14px;border-radius:10px;cursor:pointer;text-transform:uppercase;letter-spacing:.75px;font-size:12px;color:var(--muted);user-select:none;text-decoration:none} + .tab.active{color:var(--text);background:rgba(124,199,255,.06)} + .tab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg, var(--accent), var(--accent-2));border-radius:2px} + .work{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:14px} + @media (max-width:1000px){.work{grid-template-columns:1fr}} + .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} + .panel .head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.03), transparent)} + .panel .head .title{font-weight:700;font-size:14px} + .panel .head .hint{color:var(--muted);font-size:12px} + .btns{display:flex;gap:8px;flex-wrap:wrap} + .btn{border:1px solid var(--border);background:var(--chip);color:var(--text);padding:8px 10px;border-radius:10px;font-size:12px;cursor:pointer} + .btn:hover{border-color:var(--accent);box-shadow:var(--ring)} + .btn.ok{background:rgba(32,201,151,.12);border-color:rgba(32,201,151,.4)} + .btn.warn{background:rgba(255,180,0,.12);border-color:rgba(255,180,0,.4)} + .btn.err{background:rgba(239,71,111,.12);border-color:rgba(239,71,111,.4)} + .editor-wrap{position:relative;height:min(70vh,680px);overflow:auto;background:#0a0b12} + .editor{position:absolute;inset:0;resize:none;width:100%;height:100%;padding:18px 18px 18px 54px;border:0;outline:0;background:transparent;color:transparent;caret-color:var(--text);font:500 var(--code-size)/1.6 var(--mono);white-space:pre;overflow:auto;tab-size:2;-moz-tab-size:2} + .hl{pointer-events:none;user-select:none;padding:18px 18px 18px 54px;min-height:100%;font:500 var(--code-size)/1.6 var(--mono);white-space:pre;color:var(--text)} + .ln{position:absolute;left:0;top:0;bottom:0;width:40px;background:#08090f;color:#6272a4;border-right:1px solid #0d0f1a;text-align:right;padding:18px 6px;font:500 var(--code-size)/1.6 var(--mono);user-select:none} + .tok.comment{color:#6c7891;font-style:italic}.tok.str{color:#a1eafb}.tok.num{color:#ffd580}.tok.kw{color:#8ef0a5;font-weight:600}.tok.fn{color:#9bb7ff}.tok.prop{color:#c2d1ff}.tok.op{color:#ffadb5}.tok.selector{color:#ffb8e2}.tok.at{color:#9cf1dd}.tok.bool{color:#ffcf99}.tok.reg{color:#a5ffce} + .preview{padding:14px;background:var(--panel-2)} + .preview .box{border:1px dashed var(--border);border-radius:12px;padding:14px;background:#0b0d14;min-height:180px} + footer{max-width:1200px;margin:40px auto 50px;padding:0 16px;color:var(--muted);font-size:12px} + .btn:focus,.tab:focus{outline:none;box-shadow:var(--ring)}
-