diff --git a/html/custom-css.ejs b/html/custom-css.ejs index 1fc99477..715ed99a 100644 --- a/html/custom-css.ejs +++ b/html/custom-css.ejs @@ -57,121 +57,58 @@ .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; + background:#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; } .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; - } .customize-navbar__btn{ position:absolute; right:6px; top:50%; transform:translateY(-50%); 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; + display:grid; place-items:center; } - .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; } - .customize-navbar__icon:hover{ color:#e8f0ff; transform:translateY(-1px); border-color:rgba(124,199,255,.35) } /* -------- PAGE LAYOUT -------- */ - .container{max-width:1100px;margin:22px auto 64px;padding:0 16px} - - /* Center hero content */ - .hero{ - display:grid; grid-template-columns:1fr; gap:16px; - justify-items:center; text-align:center; - 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:20px; box-shadow:var(--shadow); - } - .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)} - - /* Center the tabs row */ - .tabs{display:flex;gap:8px;padding:14px;margin:18px auto 0;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius);justify-content:center;max-width:fit-content} - .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} + .container{max-width:1200px;margin:22px auto 64px;padding:0 16px} + .hero{display:grid;grid-template-columns:1fr;gap:16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)} + .title{text-align:center;font-weight:900;font-size:clamp(22px,3vw,34px)} + .subtitle{text-align:center;color:var(--muted);margin-top:6px} + .tabs{display:flex;justify-content:center;gap:8px;padding:14px;margin-top:14px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius)} + .tab{padding:10px 14px;border-radius:10px;cursor:pointer;text-transform:uppercase;font-size:12px;color:var(--muted);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.05fr .95fr;gap:16px;margin-top:14px} + .work{display:grid;grid-template-columns:1fr 1fr;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{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} + .panel .head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)} .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)} - /* -------- Preview / tips styling (restored) -------- */ - .preview{padding:12px} - .preview .box{ - padding:14px;border-radius:14px; - background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); - border:1px solid rgba(255,255,255,.08); - } - .preview .box pre{color:#cbd3e3;} - - /* -------- Prism-Live editors -------- */ - .editor-wrap{ - position:relative;height:min(70vh,680px);overflow:auto;background:#0a0b12 - } - /* Line numbers rail */ + /* -------- Editors (no syntax highlighting) -------- */ + .editor-wrap{position:relative;height:min(70vh,680px);overflow:auto;background:#0a0b12} .ln{ - position:absolute; left:0; top:0; bottom:0; width:48px; - background:#08090f; color:#6c7aa5; border-right:1px solid #0d0f1a; - text-align:right; padding:18px 8px; font:500 var(--code-size)/1.6 var(--mono); - user-select:none; z-index:2; + 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); } - /* Editable code surface */ .live-editor{ - box-sizing:border-box; margin:0; outline:0; border:0; background:transparent; - font:500 var(--code-size)/1.6 var(--mono); color:#e6eaff; caret-color:#a7d0ff; + margin:0; outline:0; border:0; background:transparent; + font:500 var(--code-size)/1.6 var(--mono); + color:var(--text); white-space:pre; tab-size:2; -moz-tab-size:2; - padding:18px 18px 18px 64px; min-height:100%; position:relative; z-index:1; - } - /* Ensure Prism token colors pop over the dark bg (theme-safe tweaks) */ - .token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6c7aa5} - .token.punctuation{color:#aab2c0} - .token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#ff8b8b} - .token.boolean,.token.number{color:#ffd27f} - .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#9df7c9} - .token.operator,.token.entity,.token.url{color:#7cc7ff} - .token.atrule,.token.attr-value,.token.keyword{color:#bba7ff} - .token.function,.token.class-name{color:#84d0ff} - .token.regex,.token.important,.token.variable{color:#f6a2d8} - - /* Footer (restored) */ - footer{ - margin:40px auto 24px; max-width:1100px; padding:12px 16px; color:var(--muted); - text-align:center; opacity:.9 + padding:18px 18px 18px 54px; + min-height:100%; } - - - - - - - - -
@@ -182,15 +119,15 @@
- - + +
- - - - + + + +
@@ -202,121 +139,66 @@ -
+
<% if (!tab) { %> - Custom CSS - Custom JS + Custom CSS + Custom JS <% } else { %> - Custom CSS - Custom JS + Custom CSS + Custom JS <% } %>
<% if (!tab) { %> - -
+
-
-
Custom CSS Editor
-
Saved to localStorage['poke-custom-css']
-
+
Custom CSS Editor
Saved to localStorage['poke-custom-css']
- + - +
- -
- 
1
- 

-          

+          
1

         

-
         

-          

-            

-              
Live Preview

-              
CSS below applies to this page (isolated box)

-            

-            

-          

-          

-            

-              
Preview area — try:

-              
-            

-          

+          
Live Preview

+          
Preview area

         

       

       <% } %>
 
       <% if (tab) { %>
-      
-      

+      

         

-          

-            

-              
Custom JS Editor

-              
Saved to localStorage['poke-custom-script']

-            

-            

-              
-              
-              
-              
-              
-              
-              
-            

-          

-
-          

-            
1

-            

-          

-        

-
-        

-          
Note
Code runs on Poke pages via the site loader.

-          

-            

-              
Snippet idea:

-
// Add a badge to the navbar
-document.addEventListener('DOMContentLoaded', () => {
-  const nav = document.querySelector('.customize-navbar__right');
-  if (!nav) return;
-  const b = document.createElement('span');
-  b.textContent = 'Custom JS Active';
-  b.style.cssText = 'margin-left:8px;padding:4px 8px;border-radius:999px;background:#1a2a40;color:#a8dcff;font:600 11px/1 var(--sans)';
-  nav.appendChild(b);
-});

-            

+          
Custom JS Editor
Saved to localStorage['poke-custom-script']

+          

+            
+            
+            
+            
+            
+            
+            
           

+          
1

         

       

       <% } %>
     

 
     
   
 
   
   
-
-