design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update styling

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 20:28:47 +00:00
parent 98a5b1b5a3
commit 88ff74bb86
1 changed files with 49 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
ts_web/elements/wcc-sidebar.ts
View File

@ -17,29 +17,28 @@ export class WccSidebar extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
<style> <style>
:host { :host {
--background: #09090b; /* CSS Variables - Always dark theme to match wcc-properties */
--foreground: #fafafa; --background: #0a0a0a;
--card: #0c0c0f; --foreground: #e5e5e5;
--card-foreground: #fafafa; --card: #0f0f0f;
--primary: #f4f4f5; --card-foreground: #f0f0f0;
--primary-foreground: #18181b; --muted: #1a1a1a;
--secondary: #27272a; --muted-foreground: #666;
--secondary-foreground: #fafafa; --accent: #222;
--muted: #27272a; --accent-foreground: #fff;
--muted-foreground: #a1a1aa; --border: rgba(255, 255, 255, 0.06);
--accent: #27272a; --input: #141414;
--accent-foreground: #fafafa; --primary: #3b82f6;
--border: rgba(255, 255, 255, 0.1); --primary-foreground: #fff;
--input: #27272a; --ring: #3b82f6;
--ring: #d4d4d8; --radius: 4px;
--radius: 0.5rem;
display: block; display: block;
border-right: 1px solid var(--border); border-right: 1px solid rgba(255, 255, 255, 0.08);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@ -49,23 +48,26 @@ export class WccSidebar extends DeesElement {
bottom: 0px; bottom: 0px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background: var(--card); background: var(--background);
color: var(--foreground); color: var(--foreground);
} }
.menu { .menu {
padding: 8px 0; padding: 0.5rem 0;
} }
h3 { h3 {
padding: 8px 16px; padding: 0.3rem 0.75rem;
font-size: 12px; font-size: 0.65rem;
font-weight: 600; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.08em;
color: var(--muted-foreground); color: #888;
margin: 0; margin: 0;
margin-top: 8px; margin-top: 0.5rem;
background: rgba(59, 130, 246, 0.03);
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
} }
h3:first-child { h3:first-child {
@ -76,7 +78,7 @@ export class WccSidebar extends DeesElement {
font-family: 'Material Symbols Outlined'; font-family: 'Material Symbols Outlined';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 18px; font-size: 16px;
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-transform: none; text-transform: none;
@ -85,37 +87,38 @@ export class WccSidebar extends DeesElement {
white-space: nowrap; white-space: nowrap;
direction: ltr; direction: ltr;
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
opacity: 0.7; opacity: 0.5;
} }
.selectOption { .selectOption {
user-select: none; user-select: none;
position: relative; position: relative;
margin: 2px 8px; margin: 0.125rem 0.5rem;
padding: 8px 12px; padding: 0.5rem 0.75rem;
transition: all 0.15s ease; transition: all 0.15s ease;
display: grid; display: grid;
grid-template-columns: 24px 1fr; grid-template-columns: 20px 1fr;
align-items: center; align-items: center;
gap: 8px; gap: 0.5rem;
border-radius: calc(var(--radius) * 0.5); border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 0.75rem;
color: var(--muted-foreground); color: #999;
background: transparent;
} }
.selectOption:hover { .selectOption:hover {
background: var(--secondary); background: rgba(59, 130, 246, 0.05);
color: var(--foreground); color: #bbb;
} }
.selectOption:hover .material-symbols-outlined { .selectOption:hover .material-symbols-outlined {
opacity: 1; opacity: 0.7;
} }
.selectOption.selected { .selectOption.selected {
background: var(--primary); background: rgba(59, 130, 246, 0.15);
color: var(--primary-foreground); color: var(--primary);
} }
.selectOption.selected .material-symbols-outlined { .selectOption.selected .material-symbols-outlined {
@ -124,8 +127,8 @@ export class WccSidebar extends DeesElement {
} }
.selectOption.selected:hover { .selectOption.selected:hover {
background: var(--primary); background: rgba(59, 130, 246, 0.2);
color: var(--primary-foreground); color: var(--primary);
} }
.selectOption .text { .selectOption .text {
@ -133,7 +136,7 @@ export class WccSidebar extends DeesElement {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-weight: 500; font-weight: 400;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -145,12 +148,12 @@ export class WccSidebar extends DeesElement {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: var(--secondary); background: rgba(255, 255, 255, 0.1);
border-radius: 4px; border-radius: 4px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: var(--muted); background: rgba(255, 255, 255, 0.2);
} }
</style> </style>
<div class="menu"> <div class="menu">