84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
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;
|
|
}
|