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