diff --git a/html/custom-css.ejs b/html/custom-css.ejs index 96fa2dad..ebb7bcd7 100644 --- a/html/custom-css.ejs +++ b/html/custom-css.ejs @@ -1,4 +1,3 @@ - @@ -12,6 +11,7 @@ + @@ -53,13 +53,8 @@ } .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; - } - .customize-navbar__search{ - position:relative; width:100%; max-width:640px; transform:translateY(0) !important; - } + .customize-navbar__middle{flex:1; display:flex; justify-content:center; align-items:center; transform:translateY(0)!important} + .customize-navbar__search{position:relative; width:100%; max-width:640px; transform:translateY(0)!important} .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; @@ -73,7 +68,7 @@ } .customize-navbar__btn{ position:absolute; right:6px; top:50%; - transform:translateY(0) translateY(-50%) !important; + transform: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; @@ -116,31 +111,53 @@ .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 by Prism) -------- */ .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} + .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; + -webkit-text-size-adjust:100%; + spellcheck:false; + } + .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; + } + .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)} - - - - - + + + + + +
@@ -149,17 +166,12 @@
-
- - + +
-
@@ -173,9 +185,7 @@
Customize Poke
Personalize everything about poke!!!
-
-
@@ -193,7 +203,10 @@
-
Custom CSS Editor
Saved to localStorage['poke-custom-css']
+
+
Custom CSS Editor
+
Saved to localStorage['poke-custom-css']
+
@@ -214,8 +227,19 @@
-
Live Preview
Applies your CSS below (isolated box)
-

Preview area — try:

+
+
+
Live Preview
+
Applies your CSS below (isolated box)
+
+
+
+
+
+

Preview area — try:

+ +
+
<% } %> @@ -225,7 +249,10 @@
-
Custom JS Editor
Saved to localStorage['poke-custom-script']
+
+
Custom JS Editor
+
Saved to localStorage['poke-custom-script']
+
@@ -270,167 +297,248 @@ document.addEventListener('DOMContentLoaded', () => {
© 2021–2025 PokeTube • Free software under the GNU GPL. Customizations are stored locally on your device.
- - + -