Files
ai-media-hub/frontend/style.css
T
2026-03-17 13:20:44 +09:00

126 lines
2.2 KiB
CSS

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
:root {
color-scheme: dark;
}
body {
font-family: "Space Grotesk", sans-serif;
background-image:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.1), transparent 30%),
radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.08), transparent 28%);
}
.line-clamp-2,
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
-webkit-line-clamp: 2;
}
.line-clamp-3 {
-webkit-line-clamp: 3;
}
.dual-slider__thumb {
touch-action: none;
cursor: ew-resize;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}
#debugLogList::-webkit-scrollbar {
width: 10px;
}
#debugLogList::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 9999px;
}
.result-summary-scroll::-webkit-scrollbar {
width: 10px;
}
.result-summary-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 9999px;
}
.result-panel-scroll::-webkit-scrollbar {
width: 10px;
}
.result-panel-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 9999px;
}
.result-modal-shell {
height: min(calc(100dvh - 0.5rem), 860px);
margin: auto;
}
.result-modal-shell > * {
min-height: 0;
}
.result-modal-media-frame {
max-height: min(34dvh, 22rem);
}
.result-modal-details {
flex: 1 1 auto;
overflow: hidden;
min-height: 0;
align-items: stretch;
}
#resultModalSnippet,
#resultModalReason {
white-space: pre-wrap;
word-break: break-word;
}
.debug-entry {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 10px 8px;
}
.debug-entry:last-child {
border-bottom: none;
}
.debug-entry__meta {
display: flex;
justify-content: space-between;
gap: 12px;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 6px;
}
.debug-entry__payload {
white-space: pre-wrap;
word-break: break-word;
color: rgba(255, 255, 255, 0.9);
}
@media (max-height: 900px) {
.result-modal-media-frame {
max-height: min(28dvh, 18rem);
}
}
@media (max-height: 720px) {
.result-modal-shell {
height: min(calc(100dvh - 0.25rem), 700px);
}
.result-modal-media-frame {
max-height: min(22dvh, 11rem);
}
}