This commit is contained in:
2025-10-15 16:52:39 +02:00
parent 1015e9e18f
commit 1b35c4ccc1
26 changed files with 1078 additions and 433 deletions

View File

@ -237,6 +237,13 @@
}
}
$effect(() => {
const theme = $editorSettings.theme;
if (typeof document !== 'undefined') {
document.documentElement.dataset.theme = theme;
}
});
$effect(() => {
if (uiState.scopePopupVisible || uiState.spectrogramPopupVisible) {
analyserNode = csound.getAnalyserNode();
@ -343,16 +350,16 @@
</button>
{/snippet}
<button
onclick={() => uiState.openScope()}
onclick={() => uiState.toggleScope()}
class="icon-button"
title="Open audio scope"
title="Toggle audio scope"
>
<Activity size={18} />
</button>
<button
onclick={() => uiState.openSpectrogram()}
onclick={() => uiState.toggleSpectrogram()}
class="icon-button"
title="Open spectrogram"
title="Toggle spectrogram"
>
<svg
width="18"
@ -546,20 +553,20 @@
}
.icon-button {
padding: 0.5rem;
background-color: #333;
color: rgba(255, 255, 255, 0.87);
padding: var(--space-sm);
background-color: var(--color-border-default);
color: var(--color-text-primary);
border: 1px solid #555;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
transition: background-color var(--transition-base);
}
.icon-button:hover:not(:disabled) {
background-color: #444;
border-color: #646cff;
border-color: var(--color-accent-primary);
}
.icon-button:disabled {
@ -568,7 +575,7 @@
}
.icon-button.has-changes {
color: #646cff;
color: var(--color-accent-primary);
}
.icon-button.stop-button:not(:disabled) {
@ -582,18 +589,18 @@
h3 {
margin-top: 0;
color: rgba(255, 255, 255, 0.87);
color: var(--color-text-primary);
}
p {
color: rgba(255, 255, 255, 0.7);
color: var(--color-text-secondary);
line-height: 1.6;
}
.share-content {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--space-lg);
}
.share-url-container {
@ -602,33 +609,33 @@
.share-url-input {
width: 100%;
padding: 0.75rem;
background-color: #2a2a2a;
border: 1px solid #3a3a3a;
color: rgba(255, 255, 255, 0.87);
font-size: 0.875rem;
padding: var(--space-md);
background-color: var(--color-surface-3);
border: 1px solid var(--color-border-default);
color: var(--color-text-primary);
font-size: var(--font-base);
font-family: monospace;
outline: none;
box-sizing: border-box;
}
.share-url-input:focus {
border-color: #646cff;
border-color: var(--color-accent-primary);
}
.share-instructions {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.5);
font-size: var(--font-base);
color: var(--color-text-tertiary);
margin: 0;
}
.audio-permission-content {
display: flex;
flex-direction: column;
gap: 1rem;
gap: var(--space-lg);
align-items: center;
text-align: center;
padding: 1rem;
padding: var(--space-lg);
}
.audio-permission-content h3 {
@ -642,15 +649,15 @@
}
.enable-audio-button {
margin-top: 1rem;
padding: 0.75rem 2rem;
background-color: #646cff;
margin-top: var(--space-lg);
padding: var(--space-md) var(--space-2xl);
background-color: var(--color-accent-primary);
color: white;
border: none;
font-size: 1rem;
font-size: var(--font-lg);
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
transition: background-color var(--transition-base);
}
.enable-audio-button:hover {
@ -658,6 +665,6 @@
}
.enable-audio-button:active {
background-color: #424ab8;
background-color: var(--color-accent-primary-active);
}
</style>