Merge branch 'dev'
This commit is contained in:
commit
21236ccd15
|
|
@ -60,13 +60,13 @@ const styles = css`
|
|||
.provider {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -85,18 +85,18 @@ const styles = css`
|
|||
}
|
||||
|
||||
.meta-label {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.confirmation {
|
||||
margin-top: 8px;
|
||||
padding: 6px 8px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
display: flex;
|
||||
|
|
@ -104,19 +104,19 @@ const styles = css`
|
|||
}
|
||||
|
||||
.confirmation .label {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.confirmation .code {
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -130,8 +130,8 @@ const styles = css`
|
|||
}
|
||||
|
||||
.status-badge.PLANNED {
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.status-badge.BOOKED {
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.budget-row .label {
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.budget-row .value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.budget-row .remaining {
|
||||
|
|
@ -79,7 +79,7 @@ const styles = css`
|
|||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 8px 0 12px;
|
||||
|
|
@ -116,21 +116,21 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 3px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.expense-item:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.expense-desc {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.expense-cat {
|
||||
font-size: 9px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.expense-amount {
|
||||
|
|
|
|||
|
|
@ -61,22 +61,23 @@ const styles = css`
|
|||
}
|
||||
|
||||
.calendar-nav button {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.calendar-nav button:hover {
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.month-year {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.weekdays {
|
||||
|
|
@ -90,7 +91,7 @@ const styles = css`
|
|||
text-align: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -108,15 +109,15 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.day:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.day.other-month {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.day.today {
|
||||
|
|
@ -152,7 +153,7 @@ const styles = css`
|
|||
.events-list {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -165,7 +166,7 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.event-dot {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@ import type { ShapeData, SpaceRef, NestPermissions } from "./community-sync";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.08));
|
||||
min-width: 300px;
|
||||
min-height: 200px;
|
||||
overflow: hidden;
|
||||
|
|
@ -17,8 +18,8 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 12px;
|
||||
background: #334155;
|
||||
color: white;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
|
|
@ -99,23 +100,23 @@ const styles = css`
|
|||
|
||||
.nested-shape {
|
||||
position: absolute;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: var(--rs-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
|
||||
}
|
||||
|
||||
.nested-shape .shape-type {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.nested-shape .shape-content {
|
||||
color: #334155;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
|
|
@ -124,10 +125,10 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px;
|
||||
background: #f1f5f9;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
|
|
@ -160,19 +161,19 @@ const styles = css`
|
|||
|
||||
.collapsed-label {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.collapsed-meta {
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.enter-btn {
|
||||
margin-top: 8px;
|
||||
background: #334155;
|
||||
color: white;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 6px 16px;
|
||||
|
|
@ -181,7 +182,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.enter-btn:hover {
|
||||
background: #1e293b;
|
||||
background: var(--rs-bg-surface-sunken, #1e293b);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -483,7 +484,7 @@ export class FolkCanvas extends FolkShape {
|
|||
|
||||
if (this.#nestedShapes.size === 0) {
|
||||
this.#nestedCanvasEl.innerHTML = `
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:12px;">
|
||||
<div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--rs-text-secondary,#94a3b8);font-size:12px;">
|
||||
${this.#connectionStatus === "connected" ? "Empty space" : "Connecting..."}
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@ const styles = css`
|
|||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 6px;
|
||||
background: #fffbeb;
|
||||
border: 1px solid #fde68a;
|
||||
background: rgba(217, 119, 6, 0.08);
|
||||
border: 1px solid rgba(217, 119, 6, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -99,7 +99,7 @@ const styles = css`
|
|||
.option-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +115,7 @@ const styles = css`
|
|||
height: 22px;
|
||||
border: 1px solid #fbbf24;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const styles = css`
|
|||
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.tab {
|
||||
|
|
@ -74,14 +74,14 @@ const styles = css`
|
|||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: #4f46e5;
|
||||
border-bottom: 2px solid #4f46e5;
|
||||
background: #eef2ff;
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -100,8 +100,8 @@ const styles = css`
|
|||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 4px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
|
|
@ -111,7 +111,7 @@ const styles = css`
|
|||
|
||||
.rank-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: #eef2ff;
|
||||
background: rgba(79, 70, 229, 0.1);
|
||||
}
|
||||
|
||||
.rank-item.drag-over {
|
||||
|
|
@ -121,7 +121,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.grip {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -138,7 +138,7 @@ const styles = css`
|
|||
.rank-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
/* Results */
|
||||
|
|
@ -149,7 +149,7 @@ const styles = css`
|
|||
.results-heading {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 6px;
|
||||
|
|
@ -165,13 +165,13 @@ const styles = css`
|
|||
.borda-label {
|
||||
font-size: 12px;
|
||||
min-width: 80px;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.borda-bar-bg {
|
||||
flex: 1;
|
||||
height: 14px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -195,8 +195,8 @@ const styles = css`
|
|||
.irv-round {
|
||||
font-size: 11px;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
color: #475569;
|
||||
border-bottom: 1px solid var(--rs-border-subtle, rgba(255, 255, 255, 0.06));
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.irv-round .round-num {
|
||||
|
|
@ -217,7 +217,7 @@ const styles = css`
|
|||
.voters-count {
|
||||
padding: 4px 0;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const styles = css`
|
|||
|
||||
.option-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ const styles = css`
|
|||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -83,7 +83,7 @@ const styles = css`
|
|||
.option-tab.active {
|
||||
color: #059669;
|
||||
border-bottom: 2px solid #059669;
|
||||
background: #ecfdf5;
|
||||
background: rgba(5, 150, 105, 0.1);
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
|
|
@ -113,7 +113,7 @@ const styles = css`
|
|||
|
||||
.slider-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -123,7 +123,7 @@ const styles = css`
|
|||
height: 4px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -165,7 +165,7 @@ const styles = css`
|
|||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const styles = css`
|
|||
|
||||
.mode-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.mode-tab {
|
||||
|
|
@ -74,14 +74,14 @@ const styles = css`
|
|||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.mode-tab.active {
|
||||
color: #0d9488;
|
||||
border-bottom: 2px solid #0d9488;
|
||||
background: #f0fdfa;
|
||||
background: rgba(13, 148, 136, 0.1);
|
||||
}
|
||||
|
||||
.options-list {
|
||||
|
|
@ -104,11 +104,11 @@ const styles = css`
|
|||
}
|
||||
|
||||
.option-row:hover {
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.option-row.voted {
|
||||
background: #f0fdfa;
|
||||
background: rgba(13, 148, 136, 0.1);
|
||||
}
|
||||
|
||||
.bar-bg {
|
||||
|
|
@ -133,12 +133,12 @@ const styles = css`
|
|||
flex: 1;
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.option-count {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-variant-numeric: tabular-nums;
|
||||
z-index: 1;
|
||||
min-width: 20px;
|
||||
|
|
@ -164,18 +164,18 @@ const styles = css`
|
|||
.qv-btn {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.qv-btn:hover { background: #f1f5f9; }
|
||||
.qv-btn:hover { background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); }
|
||||
.qv-btn:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
.qv-count {
|
||||
|
|
@ -183,14 +183,14 @@ const styles = css`
|
|||
font-variant-numeric: tabular-nums;
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.budget-bar {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -202,7 +202,7 @@ const styles = css`
|
|||
.voters-count {
|
||||
padding: 4px 12px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -210,7 +210,7 @@ const styles = css`
|
|||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.add-input {
|
||||
|
|
|
|||
|
|
@ -51,13 +51,13 @@ const styles = css`
|
|||
.dest-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.dest-country {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -65,10 +65,10 @@ const styles = css`
|
|||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
margin-bottom: 10px;
|
||||
padding: 6px 8px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -85,12 +85,12 @@ const styles = css`
|
|||
|
||||
.dest-notes {
|
||||
font-size: 12px;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
line-height: 1.5;
|
||||
padding: 8px;
|
||||
background: #fafaf9;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
min-height: 40px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -71,9 +71,9 @@ const styles = css`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #e2e8f0;
|
||||
border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.15s;
|
||||
|
|
@ -85,14 +85,14 @@ const styles = css`
|
|||
|
||||
.tool-btn.active {
|
||||
border-color: #f97316;
|
||||
background: #fff7ed;
|
||||
background: rgba(249, 115, 22, 0.15);
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #e2e8f0;
|
||||
border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
|
@ -102,7 +102,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.color-swatch.active {
|
||||
border-color: #0f172a;
|
||||
border-color: var(--rs-text-primary, #e2e8f0);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
|
|
@ -113,7 +113,7 @@ const styles = css`
|
|||
|
||||
.size-label {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -208,9 +208,9 @@ export class FolkDrawfast extends FolkShape {
|
|||
<div class="toolbar-row">
|
||||
<button class="tool-btn active" data-tool="pen" title="Pen">✏️</button>
|
||||
<button class="tool-btn" data-tool="eraser" title="Eraser">🧹</button>
|
||||
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span>
|
||||
<span style="width:1px;height:20px;background:var(--rs-border,rgba(255,255,255,0.1));margin:0 2px"></span>
|
||||
${COLORS.map((c) => `<span class="color-swatch${c === "#0f172a" ? " active" : ""}" data-color="${c}" style="background:${c}"></span>`).join("")}
|
||||
<span style="width:1px;height:20px;background:#e2e8f0;margin:0 2px"></span>
|
||||
<span style="width:1px;height:20px;background:var(--rs-border,rgba(255,255,255,0.1));margin:0 2px"></span>
|
||||
<input type="range" class="size-slider" min="1" max="24" value="4" />
|
||||
<span class="size-label">4</span>
|
||||
<span style="flex:1"></span>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const styles = css`
|
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -75,7 +75,7 @@ const styles = css`
|
|||
.preview {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -87,7 +87,7 @@ const styles = css`
|
|||
.date {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -98,19 +98,6 @@ const styles = css`
|
|||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:host {
|
||||
background: #1e293b;
|
||||
}
|
||||
.title {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
.preview {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
declare global {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const styles = css`
|
|||
.search-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
|
|
@ -114,7 +114,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.result-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
|
@ -122,7 +122,7 @@ const styles = css`
|
|||
.result-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -135,12 +135,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.result-label {
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
|
|
@ -157,20 +157,20 @@ const styles = css`
|
|||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.lens-badge.empty {
|
||||
background: #f3f4f6;
|
||||
color: #9ca3af;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.open-btn {
|
||||
|
|
@ -188,25 +188,25 @@ const styles = css`
|
|||
|
||||
.reset-btn {
|
||||
padding: 8px 16px;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.reset-btn:hover { background: #e5e7eb; }
|
||||
.reset-btn:hover { background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05)); }
|
||||
|
||||
.loading {
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-size: 13px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -110,12 +110,12 @@ const styles = css`
|
|||
.connect-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.connect-hint {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ const styles = css`
|
|||
.connect-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-family: monospace;
|
||||
|
|
@ -179,12 +179,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.info-label {
|
||||
color: #6b7280;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
|
|
@ -196,7 +196,7 @@ const styles = css`
|
|||
gap: 4px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.lens-btn {
|
||||
|
|
@ -205,13 +205,13 @@ const styles = css`
|
|||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
background: #f3f4f6;
|
||||
color: #374151;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.lens-btn:hover {
|
||||
background: #e5e7eb;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.lens-btn.active {
|
||||
|
|
@ -220,7 +220,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.lens-data {
|
||||
background: #f9fafb;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
|
|
@ -234,11 +234,11 @@ const styles = css`
|
|||
word-break: break-word;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
color: #374151;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.lens-empty {
|
||||
color: #9ca3af;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
padding: 8px;
|
||||
|
|
@ -253,7 +253,7 @@ const styles = css`
|
|||
.lens-add-row input {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d1d5db;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const styles = css`
|
|||
font-weight: 600;
|
||||
color: #0d9488;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -76,11 +76,11 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
|
|
@ -96,12 +96,12 @@ const styles = css`
|
|||
|
||||
.item-title {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
|
|
@ -115,14 +115,14 @@ const styles = css`
|
|||
font-size: 9px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
background: #e2e8f0;
|
||||
color: #475569;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.add-form {
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.add-form input {
|
||||
|
|
|
|||
|
|
@ -122,8 +122,8 @@ const styles = css`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +171,7 @@ const styles = css`
|
|||
z-index: 10;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -180,7 +180,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.locate-btn:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
}
|
||||
|
||||
/* Override MapLibre default styles */
|
||||
|
|
@ -194,8 +194,8 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #f8fafc;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 0 0 8px 8px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
|
|
@ -206,8 +206,8 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 4px 8px;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
|
@ -215,7 +215,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.collab-btn:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
}
|
||||
|
||||
.collab-btn.sharing {
|
||||
|
|
@ -238,8 +238,8 @@ const styles = css`
|
|||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 8px;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
|
|
@ -272,8 +272,8 @@ const styles = css`
|
|||
}
|
||||
|
||||
.emoji-opt:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #e2e8f0;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
border-color: var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.emoji-opt.selected {
|
||||
|
|
@ -288,8 +288,8 @@ const styles = css`
|
|||
right: 0;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-left: 1px solid #e2e8f0;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border-left: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
z-index: 15;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
|
|
@ -305,10 +305,10 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #475569;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.participant-panel-close {
|
||||
|
|
@ -316,7 +316,7 @@ const styles = css`
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
|
|
@ -325,7 +325,7 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
border-bottom: 1px solid var(--rs-border-subtle, rgba(255, 255, 255, 0.06));
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -341,14 +341,14 @@ const styles = css`
|
|||
|
||||
.participant-name {
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.participant-meta {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -362,7 +362,7 @@ const styles = css`
|
|||
.participant-status-dot.online { background: #22c55e; }
|
||||
.participant-status-dot.away { background: #fbbf24; }
|
||||
.participant-status-dot.ghost { background: #94a3b8; }
|
||||
.participant-status-dot.offline { background: #e2e8f0; }
|
||||
.participant-status-dot.offline { background: var(--rs-text-muted, #64748b); }
|
||||
|
||||
/* ── Waypoint input ── */
|
||||
.waypoint-input-wrap {
|
||||
|
|
@ -371,7 +371,7 @@ const styles = css`
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 20;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -385,7 +385,7 @@ const styles = css`
|
|||
|
||||
.waypoint-input {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
|
|
@ -408,8 +408,8 @@ const styles = css`
|
|||
|
||||
.waypoint-cancel {
|
||||
padding: 6px 10px;
|
||||
background: #f1f5f9;
|
||||
color: #64748b;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@ import { css, html } from "./tags";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
background: var(--rs-bg-surface, #0f172a);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.3));
|
||||
min-width: 360px;
|
||||
min-height: 320px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const styles = css`
|
|||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -82,14 +82,14 @@ const styles = css`
|
|||
padding: 4px 8px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.toolbar-btn.active {
|
||||
|
|
@ -100,7 +100,7 @@ const styles = css`
|
|||
.toolbar-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ const styles = css`
|
|||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
|
@ -121,13 +121,13 @@ const styles = css`
|
|||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: white;
|
||||
color: #1e293b;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -146,7 +146,7 @@ const styles = css`
|
|||
font-family: "Monaco", "Consolas", "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
background: #fafafa;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.preview {
|
||||
|
|
@ -165,7 +165,7 @@ const styles = css`
|
|||
.preview h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.5em;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +184,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.preview code {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: "Monaco", "Consolas", monospace;
|
||||
|
|
@ -208,8 +208,8 @@ const styles = css`
|
|||
border-left: 4px solid #7c3aed;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
background: #faf5ff;
|
||||
color: #6b21a8;
|
||||
background: rgba(124, 58, 237, 0.1);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.preview ul, .preview ol {
|
||||
|
|
|
|||
|
|
@ -47,17 +47,17 @@ const styles = css`
|
|||
.progress-info {
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 80px;
|
||||
height: 6px;
|
||||
background: #e2e8f0;
|
||||
background: var(--rs-bg-surface-raised, #334155);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -94,7 +94,7 @@ const styles = css`
|
|||
}
|
||||
|
||||
.item:hover {
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
margin: 0 -6px;
|
||||
|
|
@ -103,7 +103,7 @@ const styles = css`
|
|||
.checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #cbd5e1;
|
||||
border: 2px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2));
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -125,12 +125,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.item-name {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.item-name.packed {
|
||||
text-decoration: line-through;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.item-qty {
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ const PIANO_URL = "https://musiclab.chromeexperiments.com/Shared-Piano/";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #1e1e2e;
|
||||
background: var(--rs-bg-surface, #1e1e2e);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: var(--rs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.2));
|
||||
min-width: 400px;
|
||||
min-height: 300px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ const styles = css`
|
|||
cursor: move;
|
||||
transform-origin: 0 0;
|
||||
box-sizing: border-box;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
:host::before {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,10 @@ import type { FlowKind } from "./layer-types";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #0f172a;
|
||||
background: var(--rs-bg-surface, #0f172a);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--rs-shadow-md, 0 2px 12px rgba(0, 0, 0, 0.3));
|
||||
min-width: 400px;
|
||||
min-height: 420px;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@ import { css, html } from "./tags";
|
|||
|
||||
const styles = css`
|
||||
:host {
|
||||
background: #0f172a;
|
||||
background: var(--rs-bg-surface, #0f172a);
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: var(--rs-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.3));
|
||||
min-width: 360px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,12 +62,12 @@ const styles = css`
|
|||
}
|
||||
|
||||
.summary-row .label {
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.summary-row .value {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.holder-list {
|
||||
|
|
@ -84,11 +84,11 @@ const styles = css`
|
|||
font-size: 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 3px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
}
|
||||
|
||||
.holder-item:hover {
|
||||
background: #f1f5f9;
|
||||
background: var(--rs-bg-hover, rgba(255, 255, 255, 0.05));
|
||||
}
|
||||
|
||||
.holder-info {
|
||||
|
|
@ -110,13 +110,13 @@ const styles = css`
|
|||
}
|
||||
|
||||
.holder-name {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.holder-memo {
|
||||
font-size: 9px;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
}
|
||||
|
||||
.holder-amount {
|
||||
|
|
|
|||
|
|
@ -63,15 +63,15 @@ const styles = css`
|
|||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
border-bottom: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.record-btn {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #e2e8f0;
|
||||
background: white;
|
||||
border: 4px solid var(--rs-border-strong, rgba(255, 255, 255, 0.2));
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -110,7 +110,7 @@ const styles = css`
|
|||
|
||||
.status {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
}
|
||||
|
||||
.status.recording {
|
||||
|
|
@ -121,7 +121,7 @@ const styles = css`
|
|||
.duration {
|
||||
font-family: "Monaco", "Consolas", monospace;
|
||||
font-size: 14px;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.transcript-area {
|
||||
|
|
@ -136,7 +136,7 @@ const styles = css`
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
text-align: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
|
@ -149,30 +149,30 @@ const styles = css`
|
|||
.transcript {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.transcript-segment {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #f8fafc;
|
||||
background: var(--rs-bg-surface-sunken, #0f172a);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid #14b8a6;
|
||||
}
|
||||
|
||||
.segment-time {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
margin-bottom: 4px;
|
||||
font-family: "Monaco", "Consolas", monospace;
|
||||
}
|
||||
|
||||
.segment-text {
|
||||
color: #1e293b;
|
||||
color: var(--rs-text-primary, #e2e8f0);
|
||||
}
|
||||
|
||||
.segment-text.interim {
|
||||
color: #94a3b8;
|
||||
color: var(--rs-text-secondary, #94a3b8);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -180,19 +180,19 @@ const styles = css`
|
|||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
border-top: 1px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 2px solid #e2e8f0;
|
||||
border: 2px solid var(--rs-border, rgba(255, 255, 255, 0.1));
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
background: var(--rs-bg-surface, #1e293b);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
color: var(--rs-text-muted, #64748b);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -204,7 +204,7 @@ const styles = css`
|
|||
.error {
|
||||
color: #ef4444;
|
||||
padding: 12px;
|
||||
background: #fef2f2;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
margin: 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue