Spaces:
Sleeping
Sleeping
| @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --radius: 6px; | |
| --radius-sm: 4px; | |
| --background: #ffffff; | |
| --foreground: #0a0a0a; | |
| --card: #ffffff; | |
| --card-foreground: #0a0a0a; | |
| --primary: #00377b; | |
| --primary-foreground: #ffffff; | |
| --secondary: #f4f4f5; | |
| --secondary-foreground: #18181b; | |
| --muted: #f4f4f5; | |
| --muted-foreground: #71717a; | |
| --accent: #f4f4f5; | |
| --accent-foreground: #18181b; | |
| --destructive: #dc2626; | |
| --destructive-foreground: #ffffff; | |
| --success: #16a34a; | |
| --success-foreground: #ffffff; | |
| --border: #e4e4e7; | |
| --input: #e4e4e7; | |
| --ring: #00377b; | |
| --page-bg: #f4f4f5; | |
| --surface: #ffffff; | |
| --text: #0a0a0a; | |
| --muted-text: #71717a; | |
| --border-strong: #d4d4d8; | |
| --pesu-blue: #00377b; | |
| --pesu-orange: #ff6c00; | |
| --error: #dc2626; | |
| --error-bg: #fef2f2; | |
| --success-bg: #f0fdf4; | |
| --shadow-sm: 0 1px 3px rgba(18, 32, 67, 0.10), 0 1px 2px rgba(18, 32, 67, 0.08); | |
| --shadow-md: 0 4px 16px -2px rgba(18, 32, 67, 0.18), 0 2px 6px rgba(18, 32, 67, 0.10); | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100dvh; | |
| background: var(--page-bg); | |
| color: var(--text); | |
| font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| select, | |
| input, | |
| textarea, | |
| button, | |
| a.button-link { | |
| min-width: 0; | |
| border-radius: var(--radius); | |
| font: inherit; | |
| font-family: inherit; | |
| } | |
| select, | |
| input, | |
| textarea { | |
| border: 1px solid var(--input); | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| select, | |
| input, | |
| button, | |
| a.button-link { | |
| min-height: 36px; | |
| } | |
| select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| min-width: 160px; | |
| padding: 0 36px 0 12px; | |
| background-color: var(--background); | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 12px center; | |
| background-size: 12px; | |
| cursor: pointer; | |
| border-radius: 10px; | |
| font-weight: 500; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| select:hover { | |
| border-color: var(--border-strong); | |
| } | |
| input, | |
| textarea { | |
| padding: 8px 12px; | |
| } | |
| button, | |
| a.button-link { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| border: 1px solid var(--border); | |
| background: var(--background); | |
| color: var(--foreground); | |
| padding: 0 16px; | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-weight: 500; | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| button:hover, | |
| a.button-link:hover { | |
| border-color: var(--pesu-orange); | |
| } | |
| button.primary, | |
| a.button-link.primary { | |
| border-color: var(--primary); | |
| background: var(--primary); | |
| color: var(--primary-foreground); | |
| } | |
| button.primary:hover, | |
| a.button-link.primary:hover { | |
| border-color: color-mix(in srgb, var(--primary) 70%, white); | |
| } | |
| button.danger { | |
| border-color: var(--destructive); | |
| background: var(--destructive); | |
| color: var(--destructive-foreground); | |
| } | |
| button.danger:hover { | |
| border-color: color-mix(in srgb, var(--destructive) 70%, white); | |
| } | |
| button:disabled, | |
| a.button-link.disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| select:focus, | |
| input:focus, | |
| textarea:focus, | |
| button:focus-visible, | |
| a.button-link:focus-visible { | |
| outline: 2px solid var(--ring); | |
| outline-offset: 2px; | |
| } | |
| .status-line { | |
| min-height: 28px; | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 10px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--muted); | |
| color: var(--muted-foreground); | |
| font-size: 13px; | |
| } | |
| .status-line.ready { | |
| border-color: var(--success); | |
| background: var(--success-bg); | |
| color: var(--success); | |
| } | |
| .status-line.error { | |
| border-color: var(--destructive); | |
| background: var(--error-bg); | |
| color: var(--destructive); | |
| } | |
| @media (max-width: 768px) { | |
| body { font-size: 13px; } | |
| select, input, button, a.button-link { min-height: 34px; } | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| height: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--muted); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border-strong); | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--muted-foreground); | |
| } | |
| * { | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--border-strong) var(--muted); | |
| } | |
| .rule { | |
| width: 64px; | |
| height: 4px; | |
| margin-top: 0.5rem; | |
| border-radius: 999px; | |
| background: var(--pesu-orange); | |
| } | |
| .home-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 38px; | |
| height: 38px; | |
| border: 1px solid var(--border); | |
| background: var(--background); | |
| color: var(--muted-foreground); | |
| text-decoration: none; | |
| border-radius: 10px; | |
| flex-shrink: 0; | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| .home-btn svg { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .home-btn:hover { | |
| background: var(--accent); | |
| color: var(--foreground); | |
| border-color: var(--pesu-orange); | |
| } | |