From dae63e210b27940358dd2dde0cc243498a15f28d Mon Sep 17 00:00:00 2001 From: Gigi Date: Mon, 13 Oct 2025 23:11:42 +0200 Subject: [PATCH] refactor: migrate forms.css to Tailwind color palette --- src/styles/components/forms.css | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/styles/components/forms.css b/src/styles/components/forms.css index c023cb5f..2b7057ca 100644 --- a/src/styles/components/forms.css +++ b/src/styles/components/forms.css @@ -4,27 +4,27 @@ .setting-label { text-align: left; flex: 1; } .setting-control { display: flex; justify-content: flex-end; align-items: center; } .setting-group.setting-inline label { margin-bottom: 0; } -.setting-group label { display: block; margin-bottom: 0.5rem; color: #ccc; font-weight: 500; text-align: left; } +.setting-group label { display: block; margin-bottom: 0.5rem; color: rgb(212 212 216); /* zinc-300 */ font-weight: 500; text-align: left; } .setting-buttons { display: flex; align-items: center; gap: 0.5rem; } .color-picker { display: flex; align-items: center; gap: 0.5rem; } -.color-swatch { width: 33px; height: 33px; border: 1px solid #444; border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; } -.color-swatch:hover { border-color: #888; } -.color-swatch.active { border-color: #646cff; box-shadow: 0 0 0 2px #646cff; } -.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px #fff; } -.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid #444; border-radius: 6px; color: #ccc; cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; } -.font-size-btn:hover { background: #333; border-color: #666; } -.font-size-btn.active { background: #646cff; border-color: #646cff; color: white; } -.setting-preview { margin: 1.5rem 0; padding: 1rem; background: #1a1a1a; border: 1px solid #333; border-radius: 8px; } -.preview-label { font-size: 0.875rem; color: #999; margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } -.preview-content { color: #ddd; line-height: 1.7; } -.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: #fff; } +.color-swatch { width: 33px; height: 33px; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; } +.color-swatch:hover { border-color: rgb(161 161 170); /* zinc-400 */ } +.color-swatch.active { border-color: rgb(99 102 241); /* indigo-500 */ box-shadow: 0 0 0 2px rgb(99 102 241); /* indigo-500 */ } +.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(0 0 0); /* black */ font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px rgb(255 255 255); /* white */ } +.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 6px; color: rgb(212 212 216); /* zinc-300 */ cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; } +.font-size-btn:hover { background: rgb(63 63 70); /* zinc-700 */ border-color: rgb(113 113 122); /* zinc-500 */ } +.font-size-btn.active { background: rgb(99 102 241); /* indigo-500 */ border-color: rgb(99 102 241); /* indigo-500 */ color: white; } +.setting-preview { margin: 1.5rem 0; padding: 1rem; background: rgb(24 24 27); /* zinc-900 */ border: 1px solid rgb(63 63 70); /* zinc-700 */ border-radius: 8px; } +.preview-label { font-size: 0.875rem; color: rgb(161 161 170); /* zinc-400 */ margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } +.preview-content { color: rgb(228 228 231); /* zinc-200 */ line-height: 1.7; } +.preview-content h3 { margin: 0 0 1rem 0; font-size: 1.5em; color: rgb(255 255 255); /* white */ } .preview-content p { margin: 0.75rem 0; } -.setting-select { width: 100%; padding: 0.5rem; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; color: #fff; font-size: 1rem; } +.setting-select { width: 100%; padding: 0.5rem; background: rgb(39 39 42); /* zinc-800 */ border: 1px solid rgb(82 82 91); /* zinc-600 */ border-radius: 4px; color: rgb(255 255 255); /* white */ font-size: 1rem; } .setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; } -.setting-select:focus { outline: none; border-color: #646cff; } +.setting-select:focus { outline: none; border-color: rgb(99 102 241); /* indigo-500 */ } .font-select option { padding: 0.5rem; font-size: 1rem; } .checkbox-label { display: flex !important; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; text-align: left; justify-content: flex-start; margin-bottom: 0 !important; font-weight: normal !important; } -.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: #646cff; } -.checkbox-label span { color: #ddd; text-align: left; font-weight: 500; } +.setting-checkbox { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; margin: 0; accent-color: rgb(99 102 241); /* indigo-500 */ } +.checkbox-label span { color: rgb(228 228 231); /* zinc-200 */ text-align: left; font-weight: 500; }