4f9a7ebc74* feat: add readServerResource() and listServerResources() api to App class * test: add listServerResources and readServerResource integration tests
117 lines
2.5 KiB
CSS
117 lines
2.5 KiB
CSS
.main {
|
|
width: 100%;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-lg);
|
|
gap: var(--spacing-md);
|
|
color: var(--color-text-info);
|
|
}
|
|
|
|
.spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid color-mix(in srgb, var(--color-text-primary) 20%, transparent);
|
|
border-top-color: var(--color-accent);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error {
|
|
padding: var(--spacing-md);
|
|
color: #dc2626;
|
|
}
|
|
|
|
.error-title {
|
|
font-weight: var(--font-weight-bold);
|
|
margin: 0 0 var(--spacing-sm) 0;
|
|
}
|
|
|
|
.error p {
|
|
margin: 0;
|
|
}
|
|
|
|
.player video {
|
|
width: 100%;
|
|
max-height: 480px;
|
|
border-radius: var(--border-radius-md);
|
|
background-color: #000;
|
|
}
|
|
|
|
.video-info {
|
|
margin-top: var(--spacing-sm);
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-info);
|
|
}
|
|
|
|
.picker-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.picker-container h3 {
|
|
margin: 0 0 var(--spacing-md) 0;
|
|
font-size: var(--font-heading-lg-size);
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.video-picker {
|
|
width: 100%;
|
|
padding: var(--spacing-sm);
|
|
font-size: var(--font-text-md-size);
|
|
border: var(--border-width-regular) solid color-mix(in srgb, var(--color-text-primary) 20%, transparent);
|
|
border-radius: var(--border-radius-md);
|
|
margin-bottom: var(--spacing-md);
|
|
background-color: var(--color-background-primary);
|
|
color: var(--color-text-primary);
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.video-picker option {
|
|
background-color: var(--color-background-info);
|
|
color: var(--color-text-primary);
|
|
}
|
|
}
|
|
|
|
.load-btn,
|
|
.change-btn {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
font-size: var(--font-text-md-size);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-on-accent);
|
|
background-color: var(--color-accent);
|
|
border: none;
|
|
border-radius: var(--border-radius-md);
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.load-btn:hover:not(:disabled),
|
|
.change-btn:hover {
|
|
background-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-background-inverse));
|
|
}
|
|
|
|
.load-btn:focus-visible,
|
|
.change-btn:focus-visible {
|
|
outline: calc(var(--border-width-regular) * 2) solid var(--color-ring-primary);
|
|
outline-offset: var(--border-width-regular);
|
|
}
|
|
|
|
.load-btn:disabled {
|
|
background-color: color-mix(in srgb, var(--color-text-primary) 40%, transparent);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.change-btn {
|
|
margin-top: var(--spacing-md);
|
|
}
|