diff --git a/html/custom-css.ejs b/html/custom-css.ejs index 90cc649b..b81dc707 100644 --- a/html/custom-css.ejs +++ b/html/custom-css.ejs @@ -4,16 +4,9 @@ Copyright (C) 2021-2025 POKETUBE (https://codeberg.org/Ashley/poketube) This program is free software: you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License - along with this program. If not, see https://www.gnu.org/licenses/. + it under the terms of the GNU General Public License, version 3 or later. + This program is distributed WITHOUT ANY WARRANTY. + See https://www.gnu.org/licenses/. --> @@ -82,7 +75,7 @@ overflow-x:hidden; } - /* Top nav — fixed spacing + centered search */ + /* Top nav — centered search, icons aligned, forced translateY(0) */ nav{ display:flex; align-items:center; @@ -99,16 +92,16 @@ nav .left{ display:flex; align-items:center } nav .left img{ width:124px; display:block } nav .middle{ - flex:1; - display:flex; - justify-content:center; - align-items:center; + flex:1; display:flex; justify-content:center; align-items:center; + transform: translateY(0) !important; /* requested */ + } + nav .middle .search{ + position:relative; width:100%; max-width:640px; + transform: translateY(0) !important; /* requested */ } - nav .middle .search{ position:relative; width:100%; max-width:640px } nav .middle input[type="search"]{ - width:100%; - height:40px; - padding:0 44px 0 16px; + 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; @@ -125,18 +118,23 @@ 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(-50%); + 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; } nav .middle button:focus{ box-shadow:0 0 0 3px rgba(124,199,255,.25) } - nav .right{ display:flex; align-items:center; gap:14px; padding-left:8px } + + nav .right{ + display:flex; align-items:center; gap:10px; padding-left:8px; height:40px; + } nav .right a{ - color:#cfd6e6; opacity:.9; display:grid; place-items:center; - width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,255,255,.07); + 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; } @@ -160,13 +158,8 @@ } @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) - } + .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{ @@ -175,16 +168,6 @@ padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted); } - /* Theme selector row */ - .theme-row{ - display:flex; gap:10px; align-items:center; margin-top:10px; - flex-wrap:wrap; - } - .theme-row select{ - background:var(--panel-2); color:var(--text); - border:1px solid var(--border); border-radius:10px; padding:8px 10px; - } - /* Tabs */ .tabs{ display:flex; gap:8px; padding:14px; margin-top:14px; @@ -236,17 +219,14 @@ .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-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; + 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; + white-space:pre; overflow:auto; tab-size:2; -moz-tab-size:2; } .hl{ pointer-events:none; user-select:none; @@ -275,38 +255,16 @@ .tok.reg { color:#a5ffce } /* Preview */ - .preview{ - padding:14px; background:var(--panel-2); - } + .preview{ padding:14px; background:var(--panel-2); } .preview .box{ border:1px dashed var(--border); border-radius:12px; padding:14px; background:#0b0d14; min-height:180px; } - /* Alerts */ - .alert{ - display:flex; align-items:flex-start; gap:10px; - padding:10px 12px; border-radius:12px; border:1px solid var(--border); - background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); - font-size:13px; color:var(--muted); - } - .alert i{ margin-top:2px } - .alert.ok{ border-color:rgba(32,201,151,.35) } - .alert.warn{ border-color:rgba(255,180,0,.35) } - .alert.err{ border-color:rgba(239,71,111,.35) } - - /* Footer */ - footer{ - max-width:1200px; margin:40px auto 50px; padding:0 16px; - color:var(--muted); font-size:12px; - } - + 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) } - - -
@@ -340,21 +298,6 @@
Customize Poke
Personalize styles and behavior. Your edits are stored locally in your browser. Nothing is uploaded.
- -
- - - - -
-
  Local-only storage   Auto-save @@ -364,9 +307,7 @@
-
- Heads-up: Your CSS/JS never leaves the browser. If you clear site data, your customizations are removed. Export a backup first. -
+
Heads-up: Your CSS/JS never leaves the browser. If you clear site data, your customizations are removed. Export a backup first.
@@ -412,13 +353,8 @@
-
-
Live Preview
-
Applies your CSS below (isolated box)
-
-
- -
+
Live Preview
Applies your CSS below (isolated box)
+
@@ -461,16 +397,11 @@
-
-
Security Notice
-
Run only code you wrote or fully trust.
-
+
Security Notice
Run only code you wrote or fully trust.
-
- Your script executes on Poke pages via the site’s loader. If something breaks, use a private window or clear site storage to recover. -
+
Your script executes on Poke pages via the site’s loader. If something breaks, use a private window or clear site storage to recover.
@@ -498,8 +429,8 @@ document.addEventListener('DOMContentLoaded', () => { -