mirror of
https://github.com/Boof2015/prism.git
synced 2026-08-18 19:44:16 +02:00
astra integration module
This commit is contained in:
Boof2015
@@ -571,6 +571,264 @@ select {
|
||||
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.12), transparent);
|
||||
}
|
||||
|
||||
.astra-scope {
|
||||
--astra-cover-size: clamp(56px, min(34cqi, 72cqb), 220px);
|
||||
--astra-card-gap: clamp(8px, min(3cqi, 3cqb), 14px);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
background: var(--astra-bg);
|
||||
color: var(--astra-text);
|
||||
container-type: size;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.astra-scope::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.astra-scope--empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.astra-scope__card {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--astra-cover-size) minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: var(--astra-card-gap);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: clamp(10px, 3cqi, 12px);
|
||||
}
|
||||
|
||||
.astra-scope__card--no-cover {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.astra-scope__cover-shell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
width: var(--astra-cover-size);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.astra-scope__cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--astra-border);
|
||||
object-fit: cover;
|
||||
background: var(--astra-surface);
|
||||
}
|
||||
|
||||
.astra-scope__cover--fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--astra-accent);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: clamp(20px, 4vw, 38px);
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
background: var(--astra-surface);
|
||||
}
|
||||
|
||||
.astra-scope__body {
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: clamp(8px, min(2.4cqi, 2.4cqb), 10px);
|
||||
}
|
||||
|
||||
.astra-scope__meta {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.astra-scope__title {
|
||||
min-width: 0;
|
||||
color: var(--astra-text);
|
||||
font-size: clamp(14px, 2vw, 20px);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.astra-scope__artist {
|
||||
min-width: 0;
|
||||
color: var(--astra-subtext);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.astra-scope__transport {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.astra-scope__progress {
|
||||
width: 100%;
|
||||
height: 7px;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: var(--astra-progress-track);
|
||||
}
|
||||
|
||||
.astra-scope__progress-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: var(--astra-progress-fill);
|
||||
}
|
||||
|
||||
.astra-scope__time {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--astra-subtext);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.astra-scope__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.astra-scope__control {
|
||||
flex: 0 0 auto;
|
||||
min-width: 36px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--control-border);
|
||||
background: var(--control-bg);
|
||||
color: var(--text-secondary);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
|
||||
}
|
||||
|
||||
.astra-scope__control--primary {
|
||||
flex: 1 1 72px;
|
||||
min-width: 72px;
|
||||
}
|
||||
|
||||
.astra-scope__control:hover:not(:disabled),
|
||||
.astra-scope__control:focus-visible {
|
||||
background: var(--control-bg-hover);
|
||||
border-color: var(--control-border-active);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.astra-scope__control:active:not(:disabled) {
|
||||
background: var(--control-bg-active);
|
||||
}
|
||||
|
||||
.astra-scope__control:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.astra-scope__status,
|
||||
.astra-scope__placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--astra-border);
|
||||
color: var(--astra-subtext);
|
||||
background: var(--astra-surface);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.astra-scope__status.is-ok {
|
||||
color: var(--astra-status-ok);
|
||||
}
|
||||
|
||||
.astra-scope__status.is-error {
|
||||
color: var(--astra-status-error);
|
||||
border-color: var(--astra-status-error);
|
||||
}
|
||||
|
||||
@container (max-width: 420px) {
|
||||
.astra-scope {
|
||||
--astra-cover-size: clamp(44px, min(28cqi, 60cqb), 132px);
|
||||
--astra-card-gap: 8px;
|
||||
}
|
||||
|
||||
.astra-scope__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.astra-scope__artist,
|
||||
.astra-scope__time,
|
||||
.astra-scope__control {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.astra-scope__control {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 260px) {
|
||||
.astra-scope {
|
||||
--astra-cover-size: 40px;
|
||||
--astra-card-gap: 8px;
|
||||
}
|
||||
|
||||
.astra-scope__controls {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-height: 180px) {
|
||||
.astra-scope {
|
||||
--astra-cover-size: clamp(40px, min(22cqi, 46cqb), 88px);
|
||||
--astra-card-gap: 8px;
|
||||
}
|
||||
|
||||
.astra-scope__card {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.astra-scope__control {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
background: linear-gradient(180deg, rgba(7, 10, 15, 0.95), rgba(4, 6, 10, 0.98));
|
||||
display: flex;
|
||||
@@ -954,6 +1212,16 @@ select {
|
||||
background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(7, 10, 15, 0.96));
|
||||
}
|
||||
|
||||
.settings-status-pill.is-connected .settings-status-pill__dot {
|
||||
background: var(--success);
|
||||
box-shadow: 0 0 8px rgba(34, 197, 94, 0.34);
|
||||
}
|
||||
|
||||
.settings-status-pill.is-connected {
|
||||
border-color: rgba(34, 197, 94, 0.28);
|
||||
background: linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(7, 10, 15, 0.96));
|
||||
}
|
||||
|
||||
.settings-status-pill.is-error .settings-status-pill__dot {
|
||||
background: var(--danger);
|
||||
box-shadow: 0 0 8px rgba(248, 113, 113, 0.36);
|
||||
@@ -1089,6 +1357,10 @@ select {
|
||||
min-width: 228px;
|
||||
}
|
||||
|
||||
.bottom-bar__section--astra {
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
.bottom-bar__section--source {
|
||||
min-width: 360px;
|
||||
}
|
||||
@@ -1175,6 +1447,34 @@ select {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.bottom-bar__text-input {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--input-border);
|
||||
background: var(--input-bg);
|
||||
color: var(--text-primary);
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bottom-bar__text-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.bottom-bar__text-input:focus {
|
||||
border-color: var(--input-border-focus);
|
||||
background: var(--input-bg-focus);
|
||||
}
|
||||
|
||||
.bottom-bar__text-input--url {
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.bottom-bar__text-input--token {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.bottom-bar__fps-pill {
|
||||
min-width: 84px;
|
||||
justify-content: center;
|
||||
|
||||
Reference in New Issue
Block a user