aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-29 11:44:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(styles): extract base, layout, components, utils CSS and use aggregator imports in src/index.css

Browse Source
This commit is contained in:
Gigi
2025-10-13 09:47:09 +02:00
parent 8ff32e9363
commit 82e508fca6
16 changed files with 990 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/components/forms.css
View File

@@ -0,0 +1,30 @@
/* Forms and controls for settings */
.setting-group { margin-bottom: 1.5rem; text-align: left; }
.setting-group.setting-inline { display: flex; align-items: center; gap: 1rem; }
.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-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; }
.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-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
.setting-select:focus { outline: none; border-color: #646cff; }
.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; }