diff --git a/src/styles.gleam b/src/styles.gleam index ed0b3b0..a06eeec 100644 --- a/src/styles.gleam +++ b/src/styles.gleam @@ -72,6 +72,7 @@ textarea::placeholder { color: var(--text-secondary); } justify-content: flex-end; gap: 12px; } +.actions.center { justify-content: center; } button, .btn-primary { background: var(--success); color: white; @@ -87,56 +88,6 @@ button, .btn-primary { } button:hover:not(:disabled), .btn-primary:hover { background: var(--success-hover); } button:disabled { opacity: 0.5; cursor: not-allowed; } -.btn-secondary { - background: transparent; - color: var(--text-primary); - border: 1px solid var(--border); - padding: 12px 24px; - border-radius: var(--radius-sm); - font-size: 14px; - font-weight: 500; - cursor: pointer; - text-decoration: none; - display: inline-block; - transition: background 0.2s, border-color 0.2s; -} -.btn-secondary:hover { background: var(--bg-tertiary); border-color: var(--accent); } -.btn-copy { - background: var(--accent); - color: var(--bg-primary); - border: none; - padding: 10px 20px; - border-radius: var(--radius-sm); - font-size: 13px; - font-weight: 600; - cursor: pointer; - transition: background 0.2s; - white-space: nowrap; -} -.btn-copy:hover { background: var(--accent-hover); } -.url-section { margin-bottom: 24px; } -.url-section label { - display: block; - margin-bottom: 8px; - color: var(--text-secondary); - font-size: 14px; - font-weight: 500; -} -.url-box { - display: flex; - gap: 12px; - align-items: center; -} -.url-input { - flex: 1; - background: var(--bg-tertiary); - border: 1px solid var(--border); - border-radius: var(--radius-sm); - padding: 12px 16px; - font-family: 'JetBrains Mono', monospace; - font-size: 13px; - color: var(--text-primary); -} .notice { background: rgba(210, 153, 34, 0.15); border: 1px solid var(--warning); @@ -145,14 +96,18 @@ button:disabled { opacity: 0.5; cursor: not-allowed; } margin-bottom: 24px; } .notice strong { color: var(--warning); } -.paste-content, .paste-preview { +.notice.warning { + background: rgba(248, 81, 73, 0.15); + border-color: #f85149; +} +.notice.warning strong { color: #f85149; } +.paste-content { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; } -.paste-preview { margin-bottom: 24px; } -.paste-content pre, .paste-preview pre { +.paste-content pre { font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.6; @@ -171,8 +126,6 @@ footer { .centered { text-align: center; padding: 40px; } .centered .logo { margin-bottom: 40px; } .centered .card { max-width: 500px; margin: 0 auto; } -h2 { font-size: 1.5rem; margin-bottom: 16px; } -.centered p { color: var(--text-secondary); margin-bottom: 24px; } .centered .btn-primary { background: transparent; color: var(--text-primary); @@ -187,7 +140,8 @@ h2 { font-size: 1.5rem; margin-bottom: 16px; } transition: background 0.2s, border-color 0.2s; } .centered .btn-primary:hover { background: var(--bg-tertiary); border-color: var(--accent); } -header { margin-bottom: 30px; } +h2 { font-size: 1.5rem; margin-bottom: 16px; } +.centered p { color: var(--text-secondary); margin-bottom: 24px; } input[readonly] { background: var(--bg-tertiary); border: 1px solid var(--border); @@ -199,11 +153,6 @@ input[readonly] { flex: 1; } .hidden { display: none; } -.warning { - background: rgba(248, 81, 73, 0.15); - border-color: #f85149; -} -.warning strong { color: #f85149; } .error { background: rgba(248, 81, 73, 0.15); border: 1px solid #f85149; @@ -233,10 +182,7 @@ input[readonly] { color: var(--text-primary); cursor: text; } -.share-url input:focus { - outline: none; - border-color: var(--accent); -} +.share-url input:focus { outline: none; border-color: var(--accent); } #loading { text-align: center; padding: 40px;