This commit is contained in:
@@ -0,0 +1,91 @@
|
||||
/**
|
||||
* styles/components/_buttons.less
|
||||
*
|
||||
* Shared SP button component — single source of truth for all dialog buttons.
|
||||
* Imported by each dialog that needs buttons; all selectors scoped under
|
||||
* the dialog's own namespace.
|
||||
*/
|
||||
|
||||
// Base button — every dialog button should extend this
|
||||
.sp-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
padding: var(--sp-btn-padding, 7px 14px);
|
||||
font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
|
||||
font-size: var(--sp-btn-font-size, 12px);
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
|
||||
line-height: 1.2;
|
||||
user-select: none;
|
||||
|
||||
i { font-size: 0.9em; pointer-events: none; }
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Primary action — green accent
|
||||
&--primary {
|
||||
background: var(--sp-btn-primary-bg, var(--sp-accent));
|
||||
color: var(--sp-btn-primary-text, #fff);
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
|
||||
color: var(--sp-btn-primary-text, #fff);
|
||||
}
|
||||
&:active:not(:disabled) {
|
||||
background: var(--sp-btn-primary-active, var(--sp-accent-active));
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary — subtle, neutral
|
||||
&--secondary {
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// Danger — red
|
||||
&--danger {
|
||||
background: var(--sp-btn-danger-bg, var(--sp-color-red));
|
||||
color: var(--sp-btn-danger-text, #fff);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&--sm {
|
||||
padding: var(--sp-btn-padding-sm, 4px 10px);
|
||||
font-size: var(--sp-btn-font-size-sm, 11px);
|
||||
}
|
||||
|
||||
&--lg {
|
||||
padding: var(--sp-btn-padding-lg, 9px 18px);
|
||||
font-size: var(--sp-btn-font-size-lg, 13px);
|
||||
}
|
||||
|
||||
// Icon-only
|
||||
&--icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -94,13 +94,13 @@
|
||||
|
||||
// Hover state
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
color: var(--sp-accent-emphasis, var(--sp-accent));
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
color: var(--sp-accent-hover);
|
||||
}
|
||||
|
||||
// Active state
|
||||
&:active {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
// Focus state
|
||||
|
||||
@@ -10,14 +10,13 @@
|
||||
// via DEFAULT_OPTIONS.classes. The content section and footer live inside PARTS.
|
||||
|
||||
.scrying-pool.directors-board {
|
||||
background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
|
||||
background: var(--sp-dialog-bg);
|
||||
color: var(--sp-text-primary);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-top: 2px solid hsl(200, 55%, 40%);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
|
||||
/* Ensure Director's Board appears above the video strip */
|
||||
z-index: 100;
|
||||
|
||||
@@ -40,13 +39,13 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
color: var(--sp-text-muted, hsl(0, 0%, 70%));
|
||||
color: var(--sp-text-muted);
|
||||
opacity: 0.35;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
user-select: none;
|
||||
border-radius: 8px 8px 0 0;
|
||||
border-radius: var(--sp-dialog-radius) var(--sp-dialog-radius) 0 0;
|
||||
|
||||
&:hover { opacity: 0.8; background: rgba(255, 255, 255, 0.03); }
|
||||
&:active { cursor: grabbing; opacity: 1; }
|
||||
@@ -67,7 +66,7 @@
|
||||
background: transparent;
|
||||
color: var(--sp-text-muted);
|
||||
border: none;
|
||||
border-radius: var(--sp-radius-sm, 3px);
|
||||
border-radius: var(--sp-radius-sm);
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s, background 0.15s, color 0.15s;
|
||||
@@ -107,7 +106,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
padding: 5px 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
@@ -117,31 +116,43 @@
|
||||
.directors-board__bulk-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
background: rgba(74, 111, 156, 0.7);
|
||||
color: #e8edf2;
|
||||
border: 1px solid rgba(74, 111, 156, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 3px 8px;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
padding: var(--sp-btn-padding-sm, 4px 10px);
|
||||
font-size: var(--sp-btn-font-size-sm, 11px);
|
||||
font-weight: 600;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
line-height: 1.2;
|
||||
border: 1px solid transparent;
|
||||
|
||||
i { font-size: 10px; }
|
||||
i { font-size: 10px; pointer-events: none; }
|
||||
|
||||
&:hover { background: rgba(74, 111, 156, 0.95); }
|
||||
// Primary (show/hide) — green
|
||||
background: rgba(74, 158, 107, 0.75);
|
||||
color: #e8f0ea;
|
||||
border-color: rgba(74, 158, 107, 0.4);
|
||||
|
||||
&:hover { background: rgba(74, 158, 107, 0.95); }
|
||||
&:active { opacity: 0.8; }
|
||||
|
||||
// Undo — neutral
|
||||
&--undo {
|
||||
background: transparent;
|
||||
color: var(--sp-text-muted);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover { color: var(--sp-text-primary, #dde2e8); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
|
||||
&:hover {
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Restore spotlight — purple (distinct semantic)
|
||||
&--restore {
|
||||
background: rgba(123, 79, 166, 0.7);
|
||||
background: rgba(123, 79, 166, 0.75);
|
||||
border-color: rgba(123, 79, 166, 0.4);
|
||||
&:hover { background: rgba(123, 79, 166, 0.95); }
|
||||
}
|
||||
@@ -150,8 +161,8 @@
|
||||
// ── Help / shortcut-panel button ───────────────────────────────────────────
|
||||
.directors-board__help-btn {
|
||||
margin-left: auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: transparent;
|
||||
@@ -164,31 +175,36 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
|
||||
&:hover { background: rgba(74, 111, 156, 0.8); color: #fff; border-color: transparent; }
|
||||
&:hover {
|
||||
background: rgba(74, 158, 107, 0.8);
|
||||
color: #fff;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Footer (preset actions) ────────────────────────────────────────────────
|
||||
.directors-board__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
padding: 5px 8px 6px;
|
||||
gap: 4px;
|
||||
padding: 6px 8px 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0 0 8px 8px;
|
||||
border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
|
||||
}
|
||||
|
||||
.directors-board__footer-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
gap: 4px;
|
||||
|
||||
&--presets { flex-wrap: wrap; }
|
||||
|
||||
&--controls {
|
||||
padding-top: 3px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
@@ -206,21 +222,26 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
font-size: 10px;
|
||||
background: rgba(74, 111, 156, 0.65);
|
||||
color: #d8e4f0;
|
||||
border: 1px solid rgba(74, 111, 156, 0.35);
|
||||
border-radius: 3px;
|
||||
padding: 4px 6px;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
padding: var(--sp-btn-padding-sm, 4px 10px);
|
||||
font-size: var(--sp-btn-font-size-sm, 11px);
|
||||
font-weight: 600;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, opacity 0.15s;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
border: 1px solid transparent;
|
||||
|
||||
i { font-size: 0.9em; }
|
||||
i { font-size: 0.9em; pointer-events: none; }
|
||||
|
||||
&:hover { background: rgba(74, 111, 156, 0.9); }
|
||||
&:active { opacity: 0.75; }
|
||||
// Default — green primary
|
||||
background: rgba(74, 158, 107, 0.7);
|
||||
color: #e8f0ea;
|
||||
border-color: rgba(74, 158, 107, 0.35);
|
||||
|
||||
&:hover { background: rgba(74, 158, 107, 0.9); color: #fff; }
|
||||
&:active { opacity: 0.8; }
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
@@ -230,39 +251,57 @@
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
// Secondary — neutral
|
||||
&--secondary {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--sp-text-secondary, #9aa4b0);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
&:hover { background: rgba(255, 255, 255, 0.1); color: #dde2e8; }
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-apply toggle — neutral (same as secondary)
|
||||
&--auto-apply {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--sp-text-secondary, #9aa4b0);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
&:hover { background: rgba(255, 255, 255, 0.1); color: #dde2e8; }
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// AV mode — neutral-muted
|
||||
&--av {
|
||||
background: rgba(30, 35, 45, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--sp-text-muted, #aaa);
|
||||
color: var(--sp-text-muted);
|
||||
font-weight: 500;
|
||||
&:hover { background: rgba(50, 55, 70, 0.9); }
|
||||
}
|
||||
|
||||
// AV mode active — red tone
|
||||
&--av-active {
|
||||
background: rgba(90, 42, 42, 0.85);
|
||||
border-color: rgba(160, 64, 64, 0.6);
|
||||
color: #f0a0a0;
|
||||
font-weight: 500;
|
||||
&:hover { background: rgba(110, 50, 50, 0.95); }
|
||||
}
|
||||
|
||||
// AV config — icon-only
|
||||
&--av-config {
|
||||
background: rgba(30, 35, 45, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--sp-text-muted, #aaa);
|
||||
color: var(--sp-text-muted);
|
||||
flex: 0 0 auto;
|
||||
font-weight: 500;
|
||||
&:hover { background: rgba(50, 55, 70, 0.9); }
|
||||
}
|
||||
}
|
||||
@@ -280,7 +319,7 @@
|
||||
|
||||
.directors-board__dock-layout-label {
|
||||
font-size: 10px;
|
||||
color: var(--sp-text-muted, hsl(0, 0%, 60%));
|
||||
color: var(--sp-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
@@ -312,9 +351,9 @@
|
||||
gap: 1px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
color: var(--sp-text-muted, hsl(0, 0%, 65%));
|
||||
color: var(--sp-text-muted);
|
||||
padding: 0;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
|
||||
@@ -322,14 +361,14 @@
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--sp-text-primary, #dde2e8);
|
||||
color: var(--sp-text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: hsl(200, 50%, 25%);
|
||||
border-color: hsl(200, 55%, 45%);
|
||||
color: hsl(200, 80%, 75%);
|
||||
background: rgba(74, 158, 107, 0.2);
|
||||
border-color: var(--sp-accent);
|
||||
color: var(--sp-accent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,4 +379,131 @@
|
||||
letter-spacing: 0.02em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ── Tile shape selector bar ──────────────────────────────────────────────
|
||||
.directors-board__tile-shape-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.directors-board__tile-shape-label {
|
||||
font-size: 10px;
|
||||
color: var(--sp-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.directors-board__tile-shape-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.directors-board__tile-border-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 8px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||||
flex-shrink: 0;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.directors-board__tile-border-label {
|
||||
font-size: 10px;
|
||||
color: var(--sp-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.directors-board__tile-border-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.directors-board__tile-border-btn {
|
||||
height: 24px;
|
||||
min-width: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
color: var(--sp-text-secondary, #7a8390);
|
||||
font-size: 10px;
|
||||
padding: 0 6px;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
|
||||
&.is-active {
|
||||
background: hsla(200, 70%, 55%, 0.2);
|
||||
border-color: hsla(200, 70%, 55%, 0.6);
|
||||
color: var(--sp-text-primary, #dde2e8);
|
||||
}
|
||||
|
||||
&:hover:not(.is-active) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--sp-text-primary, #dde2e8);
|
||||
}
|
||||
}
|
||||
|
||||
.directors-board__tile-border-color {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
flex-shrink: 0;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.directors-board__tile-shape-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
color: var(--sp-text-muted);
|
||||
padding: 0;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
|
||||
i { font-size: 11px; pointer-events: none; }
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--sp-text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: rgba(74, 158, 107, 0.2);
|
||||
border-color: var(--sp-accent);
|
||||
color: var(--sp-accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -130,6 +130,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── Shape variants (applied via .sp-shape-* on .participant-card) ─────────
|
||||
.scrying-pool .participant-card {
|
||||
&.sp-shape-rounded {
|
||||
--sp-shape-clip: inset(0 round 6px);
|
||||
}
|
||||
|
||||
&.sp-shape-circle {
|
||||
--sp-shape-clip: circle(50%);
|
||||
}
|
||||
|
||||
&.sp-shape-hexagon {
|
||||
--sp-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
&.sp-shape-octagon {
|
||||
--sp-shape-clip: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
|
||||
}
|
||||
|
||||
.participant-card__avatar img {
|
||||
clip-path: var(--sp-shape-clip, none);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Reduced motion ────────────────────────────────────────────────────────
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scrying-pool .participant-card {
|
||||
|
||||
@@ -11,9 +11,13 @@
|
||||
.scrying-pool {
|
||||
// Dialog root element
|
||||
&.player-privacy-panel {
|
||||
background: var(--sp-surface);
|
||||
background: var(--sp-dialog-bg);
|
||||
color: var(--sp-text-primary);
|
||||
font-family: var(--font-primary, inherit);
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
}
|
||||
|
||||
// Container
|
||||
@@ -43,9 +47,9 @@
|
||||
}
|
||||
|
||||
.player-privacy-panel__notice--readonly {
|
||||
background: hsla(48, 88%, 55%, 0.10);
|
||||
color: hsl(48, 88%, 60%);
|
||||
border: 1px solid hsla(48, 88%, 55%, 0.25);
|
||||
background: var(--sp-color-yellow-subtle);
|
||||
color: var(--sp-color-yellow);
|
||||
border: 1px solid var(--sp-color-yellow-subtle);
|
||||
}
|
||||
|
||||
// Section
|
||||
@@ -82,13 +86,13 @@
|
||||
// Individual effect card
|
||||
.player-privacy-panel__effect {
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(135deg, hsl(215,25%,11%) 0%, hsl(215,22%,9%) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
transition: border-color 120ms ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--sp-border-hover, rgba(255,255,255,0.15));
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,11 +177,11 @@
|
||||
|
||||
i { font-size: 9px; opacity: 0.7; }
|
||||
|
||||
// Enabled state
|
||||
// Enabled state — using accent green from SP tokens
|
||||
.player-privacy-panel__toggle-input:checked + & {
|
||||
background: rgba(46, 160, 67, 0.18);
|
||||
color: hsl(134, 61%, 60%);
|
||||
border-color: rgba(46, 160, 67, 0.4);
|
||||
background: var(--sp-color-green-subtle);
|
||||
color: var(--sp-color-green);
|
||||
border-color: color-mix(in srgb, var(--sp-accent) 40%, transparent);
|
||||
|
||||
i { opacity: 1; }
|
||||
}
|
||||
@@ -188,7 +192,7 @@
|
||||
}
|
||||
.player-privacy-panel__toggle-input:checked + &:hover,
|
||||
.player-privacy-panel__toggle-label:hover .player-privacy-panel__toggle-input:checked + & {
|
||||
background: rgba(46, 160, 67, 0.25);
|
||||
background: color-mix(in srgb, var(--sp-accent) 25%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -203,10 +207,10 @@
|
||||
flex-shrink: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px solid var(--sp-border);
|
||||
border: 2px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: hsl(215,25%,11%);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -227,19 +231,45 @@
|
||||
|
||||
.player-privacy-panel__portrait-choose,
|
||||
.player-privacy-panel__portrait-remove {
|
||||
font-size: 12px;
|
||||
padding: 5px 10px;
|
||||
font-size: var(--sp-btn-font-size, 12px);
|
||||
padding: var(--sp-btn-padding-sm, 5px 10px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.player-privacy-panel__portrait-choose {
|
||||
background: var(--sp-btn-primary-bg, var(--sp-accent));
|
||||
color: var(--sp-btn-primary-text, #fff);
|
||||
|
||||
&:hover { background: var(--sp-btn-primary-hover, var(--sp-accent-hover)); }
|
||||
}
|
||||
|
||||
.player-privacy-panel__portrait-remove {
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// GM Privacy Selector dialog
|
||||
&.gm-privacy-selector-dialog {
|
||||
background: var(--sp-surface);
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
|
||||
background: var(--sp-dialog-bg);
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
min-width: 320px;
|
||||
max-width: 480px;
|
||||
overflow: hidden;
|
||||
@@ -248,7 +278,6 @@
|
||||
.sp-gm-privacy-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--sp-surface);
|
||||
}
|
||||
|
||||
.sp-dialog-header {
|
||||
@@ -256,8 +285,8 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--sp-border);
|
||||
background: var(--sp-surface-raised);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
@@ -292,8 +321,7 @@
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--sp-text-secondary);
|
||||
background: var(--sp-surface);
|
||||
border-bottom: 1px solid var(--sp-border);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.sp-user-list {
|
||||
@@ -301,7 +329,6 @@
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
gap: 4px;
|
||||
background: var(--sp-surface);
|
||||
}
|
||||
|
||||
.sp-user-item {
|
||||
@@ -309,14 +336,14 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(135deg, hsl(215,25%,11%) 0%, hsl(215,22%,9%) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease, border-color 120ms ease;
|
||||
|
||||
&:hover {
|
||||
background: hsl(215,25%,14%);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
border-color: var(--sp-accent);
|
||||
}
|
||||
}
|
||||
@@ -332,9 +359,9 @@
|
||||
font-size: 11px;
|
||||
color: var(--sp-text-secondary);
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--sp-border);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 3px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
@@ -16,8 +16,12 @@
|
||||
|
||||
.scrying-pool.dialog.preset-export,
|
||||
.scrying-pool.dialog.preset-import {
|
||||
background: var(--sp-surface);
|
||||
background: var(--sp-dialog-bg);
|
||||
color: var(--sp-text-primary);
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
|
||||
.sp-dialog-content {
|
||||
padding: var(--sp-space-m);
|
||||
@@ -29,8 +33,9 @@
|
||||
justify-content: flex-end;
|
||||
gap: var(--sp-space-xs);
|
||||
padding: var(--sp-space-m);
|
||||
border-top: 1px solid var(--sp-border);
|
||||
background: var(--sp-surface);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
|
||||
}
|
||||
|
||||
// Description text
|
||||
@@ -89,61 +94,66 @@
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Buttons
|
||||
// Buttons — using shared SP button tokens
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.sp-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-space-xs);
|
||||
padding: var(--sp-space-xs) var(--sp-space-m);
|
||||
border: none;
|
||||
border-radius: var(--sp-radius-sm);
|
||||
font-size: var(--sp-font-size-sm);
|
||||
font-weight: 500;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
padding: var(--sp-btn-padding, 7px 14px);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
font-size: var(--sp-btn-font-size, 12px);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
|
||||
line-height: 1.2;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 0.9em;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-btn-primary {
|
||||
background: var(--sp-accent);
|
||||
color: var(--sp-accent-text);
|
||||
background: var(--sp-btn-primary-bg, var(--sp-accent));
|
||||
color: var(--sp-btn-primary-text, #fff);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-accent-hover);
|
||||
background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background: var(--sp-accent-active);
|
||||
background: var(--sp-btn-primary-active, var(--sp-accent-active));
|
||||
}
|
||||
}
|
||||
|
||||
.sp-btn-secondary {
|
||||
background: var(--sp-surface-subtle);
|
||||
color: var(--sp-text-primary);
|
||||
border: 1px solid var(--sp-border);
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-surface);
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
|
||||
.sp-btn-danger {
|
||||
background: var(--sp-color-red);
|
||||
color: white;
|
||||
background: var(--sp-btn-danger-bg, var(--sp-color-red));
|
||||
color: var(--sp-btn-danger-text, #fff);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--sp-color-red-dark);
|
||||
background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -173,17 +183,17 @@
|
||||
align-items: center;
|
||||
gap: var(--sp-space-xs);
|
||||
padding: var(--sp-space-sm) var(--sp-space-m);
|
||||
background: var(--sp-surface-subtle);
|
||||
border: 1px dashed var(--sp-border);
|
||||
border-radius: var(--sp-radius-sm);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px dashed rgba(255, 255, 255, 0.2);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
color: var(--sp-text-secondary);
|
||||
transition: all 0.15s ease;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--sp-accent);
|
||||
color: var(--sp-accent);
|
||||
background: var(--sp-surface);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
i {
|
||||
@@ -222,12 +232,12 @@
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-space-sm);
|
||||
padding: var(--sp-space-xs) var(--sp-space-sm);
|
||||
border-radius: var(--sp-radius-sm);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--sp-surface-subtle);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
@@ -273,9 +283,9 @@
|
||||
padding: 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: var(--sp-radius-sm);
|
||||
background: var(--sp-surface);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sp-preview-item {
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
.scrying-pool.preset-load-dialog {
|
||||
background: var(--sp-surface);
|
||||
background: var(--sp-dialog-bg);
|
||||
color: var(--sp-text-primary);
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
|
||||
// ── Content wrapper ────────────────────────────────────────────────────
|
||||
.preset-load-dialog__content {
|
||||
@@ -47,24 +51,26 @@
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--sp-btn-radius);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s, border-color 0.15s;
|
||||
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
line-height: 1.2;
|
||||
|
||||
i { font-size: 0.85em; opacity: 0.7; flex-shrink: 0; }
|
||||
|
||||
// Load button — styled as a row item, not a loud primary button
|
||||
// Load button — green accent on hover
|
||||
&--load {
|
||||
background: var(--sp-surface-elevated, rgba(255,255,255,0.06));
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--sp-text-primary);
|
||||
border: 1px solid var(--sp-border);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background: var(--sp-accent, #4a6f9c);
|
||||
border-color: var(--sp-accent, #4a6f9c);
|
||||
background: rgba(74, 158, 107, 0.85);
|
||||
border-color: var(--sp-accent);
|
||||
color: #fff;
|
||||
i { opacity: 1; }
|
||||
}
|
||||
@@ -75,8 +81,9 @@
|
||||
&--cancel {
|
||||
background: transparent;
|
||||
color: var(--sp-text-muted);
|
||||
border: 1px solid var(--sp-border);
|
||||
&:hover { color: var(--sp-text, inherit); border-color: currentColor; }
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
font-weight: 500;
|
||||
&:hover { color: var(--sp-text-primary); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,7 +93,9 @@
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid var(--sp-border);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
flex-shrink: 0;
|
||||
border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,13 +6,12 @@
|
||||
@import "../tokens/_base.less";
|
||||
|
||||
.scrying-pool.preset-save-dialog {
|
||||
background: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
|
||||
background: var(--sp-dialog-bg);
|
||||
color: var(--sp-text-primary);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border: var(--sp-dialog-border);
|
||||
border-top: 2px solid var(--sp-accent);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
box-shadow: var(--sp-dialog-shadow);
|
||||
|
||||
// ── Form wrapper ──────────────────────────────────────────────────────────
|
||||
.preset-save-dialog__form {
|
||||
@@ -77,7 +76,7 @@
|
||||
font-size: 14px;
|
||||
padding: 9px 12px;
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: 5px;
|
||||
border-radius: var(--sp-btn-radius);
|
||||
background: var(--sp-control-bg, #1a1d20);
|
||||
color: var(--sp-text-primary);
|
||||
outline: none;
|
||||
@@ -103,47 +102,49 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
border-top: 1px solid var(--sp-border);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
flex-shrink: 0;
|
||||
border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
|
||||
}
|
||||
|
||||
// Button styles — using shared SP tokens
|
||||
.preset-save-dialog__btn {
|
||||
font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 7px 14px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
transition: background 0.15s, border-color 0.15s, opacity 0.15s;
|
||||
gap: var(--sp-btn-gap, 6px);
|
||||
padding: var(--sp-btn-padding, 7px 14px);
|
||||
font-family: var(--font-primary, ui-sans-serif, system-ui, sans-serif);
|
||||
font-size: var(--sp-btn-font-size, 12px);
|
||||
font-weight: 600;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--sp-btn-radius, 5px);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
|
||||
line-height: 1.2;
|
||||
|
||||
i { font-size: 10px; opacity: 0.85; }
|
||||
i { font-size: 10px; pointer-events: none; }
|
||||
|
||||
&--save {
|
||||
background: var(--sp-accent);
|
||||
color: var(--sp-accent-text, #fff);
|
||||
border: 1px solid transparent;
|
||||
background: var(--sp-btn-primary-bg, var(--sp-accent));
|
||||
color: var(--sp-btn-primary-text, #fff);
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
&:hover { background: var(--sp-accent-hover); }
|
||||
&:active { background: var(--sp-accent-active); }
|
||||
&:hover { background: var(--sp-btn-primary-hover, var(--sp-accent-hover)); }
|
||||
&:active { background: var(--sp-btn-primary-active, var(--sp-accent-active)); }
|
||||
|
||||
i { opacity: 1; }
|
||||
}
|
||||
|
||||
&--cancel {
|
||||
background: transparent;
|
||||
color: var(--sp-text-secondary);
|
||||
border: 1px solid var(--sp-border);
|
||||
background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
|
||||
color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
|
||||
border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: var(--sp-text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
|
||||
color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,9 +23,17 @@
|
||||
// WARNING: do NOT add max-width or overflow here; the outer window also carries this class
|
||||
// and would clip the expanded inner content.
|
||||
.scrying-pool-strip {
|
||||
background: var(--sp-bg, hsl(220, 15%, 12%));
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
border-radius: 8px;
|
||||
|
||||
transition: background 0.25s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Override FoundryVTT v14's .application min-width: 200px — strip sizing is controlled by JS */
|
||||
min-width: unset;
|
||||
|
||||
/* Ensure strip appears below Director's Board (z-index: 100) */
|
||||
z-index: 50;
|
||||
|
||||
@@ -46,14 +54,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
max-width: 83px;
|
||||
max-width: calc(var(--sp-widget-width, 83px) + 11px);
|
||||
overflow: hidden;
|
||||
transition: max-width 200ms ease-in-out;
|
||||
|
||||
&.is-expanded {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
// Horizontal and mosaic layouts: width is controlled by JS setPosition
|
||||
&.sp-layout-horizontal-sm,
|
||||
&.sp-layout-horizontal-md,
|
||||
@@ -100,18 +104,16 @@
|
||||
.scrying-pool.scrying-pool-strip.sp-layout-horizontal-md,
|
||||
.scrying-pool.scrying-pool-strip.sp-layout-mosaic-md {
|
||||
.sp-participant-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: var(--sp-widget-width, 150px);
|
||||
height: var(--sp-widget-width, 150px);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 8px 4px 4px;
|
||||
gap: 4px;
|
||||
|
||||
.sp-avatar__img {
|
||||
width: 91px;
|
||||
height: 91px;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
.sp-avatar__shell {
|
||||
width: calc(var(--sp-widget-width, 150px) - 59px);
|
||||
height: calc(var(--sp-widget-width, 150px) - 59px);
|
||||
}
|
||||
|
||||
.sp-avatar__name {
|
||||
@@ -134,66 +136,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── Drag grip (top bar, replaces window header drag affordance) ────────────────
|
||||
.sp-strip__grip {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
color: var(--sp-text, hsl(0, 0%, 80%));
|
||||
opacity: 0.35;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.15s;
|
||||
user-select: none;
|
||||
|
||||
&:hover { opacity: 0.75; }
|
||||
&:active { cursor: grabbing; opacity: 1; }
|
||||
}
|
||||
|
||||
// ── Lightweight close button (replaces window header) ─────────────────────────
|
||||
.sp-strip__close-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
z-index: 10;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
background: transparent;
|
||||
color: var(--sp-text, hsl(0, 0%, 80%));
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
opacity: 0.45;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
&:active { opacity: 0.75; }
|
||||
}
|
||||
|
||||
// ── Toolbar row: toggle + Director's Board on the same line ───────────────────
|
||||
// ── Toolbar: grip + toggle + DB + close on one line ─────────────────────────
|
||||
// All chrome lives here; hidden at rest, revealed on strip hover.
|
||||
.sp-strip__toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.scrying-pool-strip:hover & {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Drag grip — compact icon handle
|
||||
.sp-strip__grip {
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: grab;
|
||||
color: var(--sp-text, hsl(0, 0%, 80%));
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
|
||||
&:active { cursor: grabbing; }
|
||||
|
||||
.scrying-pool-strip:hover & {
|
||||
opacity: 0.45;
|
||||
&:hover { opacity: 0.75; }
|
||||
&:active { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle (expand/collapse)
|
||||
.sp-strip__toggle {
|
||||
width: 83px;
|
||||
min-width: 83px;
|
||||
height: 28px;
|
||||
height: 24px;
|
||||
min-width: 22px;
|
||||
width: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -201,34 +189,27 @@
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--sp-text, hsl(0, 0%, 80%));
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
|
||||
// ── Director's Board CTA button (shown when sidebar injection not available) ──
|
||||
// Director's Board CTA button
|
||||
.sp-strip__directors-board-cta {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 28px;
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 8px;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
||||
cursor: pointer;
|
||||
color: var(--sp-text-secondary, #7a8390);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
flex-shrink: 0;
|
||||
|
||||
i { font-size: 12px; flex-shrink: 0; }
|
||||
span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
@@ -236,6 +217,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Spacer — pushes close button to the right
|
||||
.sp-strip__toolbar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// Close button — in-toolbar, no longer absolutely positioned
|
||||
.sp-strip__close-btn {
|
||||
width: 20px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
background: transparent;
|
||||
color: var(--sp-text, hsl(0, 0%, 80%));
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.45;
|
||||
transition: opacity 0.2s, background 0.15s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
&:active { opacity: 0.75; }
|
||||
}
|
||||
|
||||
.sp-strip__participants {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -255,6 +265,12 @@
|
||||
color: var(--sp-text-muted, hsl(0, 0%, 60%));
|
||||
padding: 4px 8px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.scrying-pool-strip:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
@@ -263,7 +279,7 @@
|
||||
.sp-participant-avatar {
|
||||
position: relative;
|
||||
width: 83px;
|
||||
height: 83px;
|
||||
height: var(--sp-widget-width, 83px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
@@ -281,52 +297,30 @@
|
||||
}
|
||||
|
||||
.is-expanded & {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 135px; // 16:9 at 240 px strip width
|
||||
padding: 0;
|
||||
align-items: flex-end;
|
||||
background: hsl(220, 15%, 14%);
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
background: transparent;
|
||||
|
||||
// Gradient scrim so name text is legible over any video
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 48px;
|
||||
background: linear-gradient(transparent, hsla(0, 0%, 0%, 0.72));
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
&:hover {
|
||||
background: hsl(220, 15%, 14%);
|
||||
}
|
||||
|
||||
.sp-avatar__img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 6px; // card view — rectangular
|
||||
}
|
||||
|
||||
.sp-avatar__name {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 3;
|
||||
color: hsl(0, 0%, 95%);
|
||||
&::after { display: none; }
|
||||
|
||||
// Shell: sized to widget width, centered in the card
|
||||
.sp-avatar__shell {
|
||||
width: calc(var(--sp-widget-width) - 59px);
|
||||
height: calc(var(--sp-widget-width) - 59px);
|
||||
}
|
||||
|
||||
// No names displayed in vertical mode
|
||||
.sp-avatar__name,
|
||||
.sp-avatar__state-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 8px;
|
||||
z-index: 3;
|
||||
color: hsla(0, 0%, 85%, 0.85);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-avatar__corner-badge {
|
||||
@@ -339,23 +333,86 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Video container for WebRTC stream (full AV replacement mode)
|
||||
.sp-participant-video {
|
||||
// Border shell — no clip-path, no background. Serves only as the positioning
|
||||
// parent for ::before (border), ::after (state ring), and .sp-avatar__shape (content).
|
||||
// Border and ring use the SAME clip-path as the shape but are scaled up via
|
||||
// negative inset, creating a genuine border/ring around the clipped shape.
|
||||
.sp-avatar__shell {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// Default sm size — overridden by layout-specific CSS
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
// Tile border — ::before with same clip-path as shape, scaled up by border-width.
|
||||
// Hidden via opacity when --sp-tile-border-active is 0 (border-width = 0)
|
||||
// so the border background doesn't bleed through transparent avatar areas.
|
||||
.sp-avatar__shell::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
inset: calc(var(--sp-tile-border-width, 0px) * -1);
|
||||
background: var(--sp-tile-border-color, transparent);
|
||||
clip-path: var(--sp-shape-clip, none);
|
||||
opacity: var(--sp-tile-border-active, 1);
|
||||
z-index: -3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// State ring — ::after with same clip-path, scaled up same as border.
|
||||
// Uses inset box-shadow so the ring appears INSIDE the clipped area,
|
||||
// overlaying either the border (via ::before behind) or the avatar content.
|
||||
// At z-index 1 it renders above .sp-avatar__shape so the ring is visible
|
||||
// on top of the avatar video/img.
|
||||
// Gated by --sp-tile-border-active alongside the border ::before so that
|
||||
// "None" border truly removes ALL colored rings.
|
||||
.sp-avatar__shell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: calc(var(--sp-tile-border-width, 0px) * -1);
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px transparent;
|
||||
clip-path: var(--sp-shape-clip, none);
|
||||
opacity: var(--sp-tile-border-active, 1);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
transition: box-shadow 200ms ease, opacity 200ms ease;
|
||||
}
|
||||
|
||||
// Shape wrapper inside the shell — carries clip-path for shapes.
|
||||
.sp-avatar__shape {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
clip-path: var(--sp-shape-clip, none);
|
||||
}
|
||||
|
||||
// Inner content (img and video) fill the shape
|
||||
.sp-avatar__shape .sp-avatar__img,
|
||||
.sp-avatar__shape .sp-participant-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// Video container for WebRTC stream (full AV replacement mode)
|
||||
// Regular flow child inside .sp-avatar__shell — contributes to shell sizing
|
||||
.sp-participant-video {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-avatar__img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -365,7 +422,6 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
background: hsl(220, 15%, 18%);
|
||||
|
||||
.is-expanded & {
|
||||
@@ -398,40 +454,50 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--sp-text, hsl(0, 0%, 85%));
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.sp-participant-avatar:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-avatar__state-label {
|
||||
font-size: 0.7rem;
|
||||
color: var(--sp-text-muted, hsl(0, 0%, 60%));
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
.sp-participant-avatar:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// StateRing variants (applied as class on .sp-participant-avatar)
|
||||
// ============================================================
|
||||
// State ring via ::after on the shell — uses inset box-shadow so the ring
|
||||
// follows the same clip-path as the shape, overlaying the border's inner edge.
|
||||
// When there's no border (width=0), the ring overlays the avatar content edge.
|
||||
.sp-participant-avatar.sp-state-active,
|
||||
.sp-participant-avatar.sp-state-self-muted {
|
||||
--sp-state-color: var(--sp-state-active);
|
||||
|
||||
.sp-avatar__img {
|
||||
box-shadow: 0 0 0 2px var(--sp-state-color);
|
||||
.sp-avatar__shell::after {
|
||||
box-shadow: inset 0 0 0 2px var(--sp-state-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sp-participant-avatar.sp-state-hidden,
|
||||
.sp-participant-avatar.sp-state-cam-lost {
|
||||
--sp-state-color: var(--sp-state-hidden);
|
||||
|
||||
.sp-avatar__img {
|
||||
outline: 2px dashed var(--sp-state-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-participant-avatar.sp-state-pending {
|
||||
--sp-state-color: var(--sp-state-pending);
|
||||
|
||||
.sp-avatar__img {
|
||||
box-shadow: 0 0 0 2px var(--sp-state-color);
|
||||
.sp-avatar__shell::after {
|
||||
box-shadow: inset 0 0 0 2px var(--sp-state-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -439,7 +505,7 @@
|
||||
// StateRing animations — gated under no-preference (AC-16)
|
||||
// ============================================================
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.sp-participant-avatar.sp-state-pending .sp-avatar__img {
|
||||
.sp-participant-avatar.sp-state-pending .sp-avatar__shell::after {
|
||||
animation: sp-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@@ -449,13 +515,13 @@
|
||||
}
|
||||
|
||||
// Revert flash (200ms amber, then restore)
|
||||
.sp-participant-avatar.sp-state-revert .sp-avatar__img {
|
||||
.sp-participant-avatar.sp-state-revert .sp-avatar__shell::after {
|
||||
animation: sp-revert-flash 200ms ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes sp-revert-flash {
|
||||
0% { box-shadow: 0 0 0 3px var(--sp-urgency-director); }
|
||||
100% { box-shadow: 0 0 0 2px var(--sp-state-color); }
|
||||
0% { box-shadow: inset 0 0 0 3px var(--sp-urgency-director); }
|
||||
100% { box-shadow: inset 0 0 0 2px var(--sp-state-color); }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -591,3 +657,30 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Tile shape variants (applied as .sp-shape-* on .sp-participant-avatar)
|
||||
// ============================================================
|
||||
// Defines --sp-shape-clip which is consumed by:
|
||||
// - .sp-avatar__shape (content clip)
|
||||
// - .sp-avatar__shell::before (border)
|
||||
// - .sp-avatar__shell::after (state ring)
|
||||
// All three use the same clip-path, but ::before and ::after are scaled up
|
||||
// via negative inset to create the border/ring around the clipped shape.
|
||||
.sp-participant-avatar {
|
||||
&.sp-shape-rounded {
|
||||
--sp-shape-clip: inset(0 round 6px);
|
||||
}
|
||||
|
||||
&.sp-shape-circle {
|
||||
--sp-shape-clip: circle(50%);
|
||||
}
|
||||
|
||||
&.sp-shape-hexagon {
|
||||
--sp-shape-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||||
}
|
||||
|
||||
&.sp-shape-octagon {
|
||||
--sp-shape-clip: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,9 +6,9 @@
|
||||
|
||||
// Panel container
|
||||
.directors-board__preset-panel {
|
||||
background: linear-gradient(160deg, hsl(215,28%,13%) 0%, hsl(215,25%,10%) 100%);
|
||||
border: 1px solid var(--sp-border);
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: var(--sp-dialog-radius);
|
||||
padding: 10px 12px 12px;
|
||||
margin-top: 8px;
|
||||
|
||||
@@ -116,8 +116,8 @@
|
||||
.directors-board__preset-panel-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--sp-surface);
|
||||
border: 1px solid var(--sp-border);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
font-family: inherit;
|
||||
|
||||
+646
-307
File diff suppressed because it is too large
Load Diff
@@ -15,6 +15,7 @@
|
||||
@import "tokens/_focus.less";
|
||||
|
||||
// ── Component styles ──────────────────────────────────────────────────────────
|
||||
@import "components/_buttons.less";
|
||||
@import "components/_participant-card.less";
|
||||
@import "components/_roster-strip.less";
|
||||
@import "components/_directors-board.less";
|
||||
|
||||
@@ -54,6 +54,39 @@
|
||||
--sp-radius-sm: 3px;
|
||||
--sp-radius-md: 4px;
|
||||
|
||||
/* Dialog surface */
|
||||
--sp-dialog-bg: linear-gradient(175deg, hsl(220, 18%, 13%) 0%, hsl(220, 15%, 10%) 100%);
|
||||
--sp-dialog-border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
--sp-dialog-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
--sp-dialog-radius: 8px;
|
||||
--sp-dialog-grip-color: rgba(255, 255, 255, 0.07);
|
||||
|
||||
/* Buttons */
|
||||
--sp-btn-font-size: 12px;
|
||||
--sp-btn-font-size-sm: 11px;
|
||||
--sp-btn-font-size-lg: 13px;
|
||||
--sp-btn-padding: 7px 14px;
|
||||
--sp-btn-padding-sm: 4px 10px;
|
||||
--sp-btn-padding-lg: 9px 18px;
|
||||
--sp-btn-radius: 5px;
|
||||
--sp-btn-gap: 6px;
|
||||
|
||||
--sp-btn-primary-bg: var(--sp-accent);
|
||||
--sp-btn-primary-text: #fff;
|
||||
--sp-btn-primary-hover: var(--sp-accent-hover);
|
||||
--sp-btn-primary-active: var(--sp-accent-active);
|
||||
|
||||
--sp-btn-secondary-bg: rgba(255, 255, 255, 0.05);
|
||||
--sp-btn-secondary-text: var(--sp-text-secondary);
|
||||
--sp-btn-secondary-border: rgba(255, 255, 255, 0.12);
|
||||
--sp-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
|
||||
--sp-btn-secondary-hover-text: var(--sp-text-primary);
|
||||
|
||||
--sp-btn-danger-bg: var(--sp-color-red);
|
||||
--sp-btn-danger-text: #fff;
|
||||
--sp-btn-danger-hover: var(--sp-color-red-dark);
|
||||
|
||||
/* Focus ring — module-wide keyboard navigation anchor */
|
||||
--sp-focus: var(--sp-theme-focus, var(--color-focus-outline, #63c287));
|
||||
--sp-focus-ring: 0 0 0 2px var(--sp-focus);
|
||||
@@ -86,4 +119,8 @@
|
||||
--sp-theme-control: #1a1d20;
|
||||
--sp-theme-focus: #63c287;
|
||||
--sp-theme-urgency: #c8982a;
|
||||
--sp-btn-primary-bg: var(--sp-theme-accent, #4a9e6b);
|
||||
--sp-btn-primary-text: #fff;
|
||||
--sp-btn-primary-hover: var(--sp-theme-accent-hover, #3d8f5e);
|
||||
--sp-btn-primary-active: var(--sp-theme-accent-active, #2d7a4f);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user