Spaces:
Sleeping
Sleeping
| @import "../shared.css"; | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| display: grid; | |
| grid-template-rows: auto 1fr auto; | |
| height: 100dvh; | |
| padding: 1.5rem; | |
| gap: 1rem; | |
| background: var(--page-bg); | |
| overflow: hidden; | |
| } | |
| .toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 1rem 1.5rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .toolbar-title { | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| color: var(--pesu-blue); | |
| } | |
| .toolbar-sep { | |
| width: 1px; | |
| height: 20px; | |
| background: var(--border); | |
| flex-shrink: 0; | |
| } | |
| .subtitle { | |
| color: var(--muted-foreground); | |
| font-size: 13px; | |
| } | |
| .form-grid { | |
| display: grid; | |
| grid-template-columns: 280px 1fr 1fr; | |
| gap: 1rem; | |
| min-height: 0; | |
| overflow: auto; | |
| } | |
| .form-card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| padding: 1.25rem 1.5rem; | |
| box-shadow: var(--shadow-md); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| h2 { | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: var(--pesu-blue); | |
| margin-bottom: 4px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| label { | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| color: var(--foreground); | |
| margin-top: 4px; | |
| } | |
| input, textarea { | |
| width: 100%; | |
| padding: 8px 10px; | |
| font-family: inherit; | |
| font-size: 0.875rem; | |
| border: 1px solid var(--input); | |
| border-radius: var(--radius); | |
| background: var(--background); | |
| color: var(--foreground); | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| input:focus, textarea:focus { | |
| outline: 2px solid var(--ring); | |
| outline-offset: 2px; | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 0; | |
| } | |
| .hint { | |
| display: block; | |
| font-size: 0.6875rem; | |
| color: var(--muted-foreground); | |
| margin-top: 2px; | |
| } | |
| .optional { | |
| color: var(--muted-foreground); | |
| font-weight: 400; | |
| font-size: 0.6875rem; | |
| } | |
| .form-footer { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 1rem 1.5rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| button.primary { | |
| height: 38px; | |
| padding: 0 24px; | |
| font-size: 0.875rem; | |
| } | |
| .form-links { | |
| display: flex; | |
| gap: 16px; | |
| margin-left: auto; | |
| } | |
| .form-link { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 38px; | |
| padding: 0 16px; | |
| font-size: 0.8125rem; | |
| color: var(--foreground); | |
| text-decoration: none; | |
| font-weight: 500; | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| background: var(--background); | |
| transition: background 0.15s, color 0.15s, border-color 0.15s; | |
| } | |
| .form-link:hover { | |
| border-color: var(--pesu-orange); | |
| color: var(--pesu-orange); | |
| } | |
| .code-preview { | |
| padding: 8px 10px; | |
| background: var(--muted); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| font-size: 0.75rem; | |
| color: var(--foreground); | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| align-items: center; | |
| } | |
| .code-preview.hidden { | |
| display: none; | |
| } | |
| .code-preview strong { | |
| color: var(--pesu-orange); | |
| font-size: 0.6875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| font-size: 0.625rem; | |
| font-weight: 600; | |
| border-radius: 4px; | |
| background: var(--pesu-blue); | |
| color: white; | |
| } | |
| .badge.lateral { | |
| background: var(--pesu-orange); | |
| } | |
| #result { | |
| position: fixed; | |
| bottom: 5.5rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 8px 16px; | |
| border-radius: var(--radius); | |
| font-size: 0.8125rem; | |
| font-weight: 500; | |
| box-shadow: var(--shadow-md); | |
| white-space: nowrap; | |
| z-index: 100; | |
| transition: opacity 0.3s; | |
| } | |
| #result.success { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| border: 1px solid var(--success); | |
| } | |
| #result.error { | |
| background: var(--error-bg); | |
| color: var(--error); | |
| border: 1px solid var(--error); | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| @media (max-width: 900px) { | |
| .form-grid { | |
| grid-template-columns: 1fr; | |
| overflow: auto; | |
| } | |
| body { | |
| height: auto; | |
| min-height: 100dvh; | |
| overflow: auto; | |
| } | |
| } | |