feat: UI Overhaul

2025-12-09 23:49:52 +00:00
parent 68271579bf
commit 07ae21973e
21 changed files with 4546 additions and 86 deletions
--- a/extension/modules/ui/ui_styles.js
+++ b/extension/modules/ui/ui_styles.js
@@ -0,0 +1,83 @@
+export const Styles = {
+    // Colors
+    colors: {
+        bg: 'rgba(20, 20, 25, 0.95)',
+        bgPanel: 'rgba(255, 255, 255, 0.05)',
+        text: '#eee',
+        textMuted: '#aaa',
+        primary: '#448aff',
+        success: '#66bb6a',
+        danger: '#ff5252',
+        warning: '#ffa726',
+        accent: '#bada55',
+        border: '#444'
+    },
+    // Common CSS strings
+    sidebar: `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        width: 300px;
+        background: rgba(20, 20, 25, 0.95);
+        color: #eee;
+        padding: 0;
+        border-radius: 12px;
+        z-index: 9999999;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
+        border: 1px solid #444;
+        backdrop-filter: blur(5px);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transition: opacity 0.2s, transform 0.2s;
+    `,
+    panel: `
+        background: rgba(255,255,255,0.05);
+        padding: 10px;
+        border-radius: 8px;
+        margin-bottom: 15px;
+    `,
+    input: `
+        width: 100%;
+        padding: 6px;
+        background: #333;
+        border: 1px solid #555;
+        color: white;
+        border-radius: 4px;
+        box-sizing: border-box;
+    `,
+    button: `
+        cursor: pointer;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-weight: bold;
+        transition: background 0.2s;
+        color: white;
+    `,
+    flexBetween: `
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    `,
+    label: `
+        font-size: 12px; 
+        color: #aaa; 
+        margin-bottom: 4px; 
+        display: block;
+    `
+};
+
+export function createElement(tag, style = '', props = {}) {
+    const el = document.createElement(tag);
+    el.style.cssText = style;
+    for (const [k, v] of Object.entries(props)) {
+        if (k === 'dataset') {
+            for (const [dk, dv] of Object.entries(v)) el.dataset[dk] = dv;
+        } else {
+            el[k] = v;
+        }
+    }
+    return el;
+}