mirror of
https://github.com/dergigi/boris.git
synced 2026-02-16 20:45:01 +01:00
bf98b307e8
Add min-width: 220px to inline setting labels to create consistent 'tab stops' so buttons align vertically regardless of label length. Remove constraint on mobile where settings stack vertically.
89 lines
3.8 KiB
CSS
89 lines
3.8 KiB
CSS
/* 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; min-width: 220px; }
|
|
.setting-group label { display: block; margin-bottom: 0.5rem; color: var(--color-text); 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 var(--color-border-subtle); border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; }
|
|
.color-swatch:hover { border-color: var(--color-text-secondary); }
|
|
.color-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
|
|
.color-swatch.active::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgb(0 0 0); font-size: 0.875rem; font-weight: bold; text-shadow: 0 0 2px rgb(255 255 255); }
|
|
.font-size-btn { min-width: 33px; height: 33px; padding: 0; background: transparent; border: 1px solid var(--color-border-subtle); border-radius: 6px; color: var(--color-text); cursor: pointer; transition: all 0.2s; font-weight: bold; display: flex; align-items: center; justify-content: center; }
|
|
.font-size-btn:hover { background: var(--color-border); border-color: var(--color-text-muted); }
|
|
.font-size-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; }
|
|
.setting-preview {
|
|
margin: 1.5rem 0;
|
|
padding: 1rem;
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 8px;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.preview-label { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
|
|
.preview-content {
|
|
color: var(--color-text);
|
|
line-height: 1.7;
|
|
max-width: 100%;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
.preview-content h3 {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 1.5em;
|
|
color: var(--color-text);
|
|
word-wrap: break-word;
|
|
}
|
|
.preview-content p {
|
|
margin: 0.75rem 0;
|
|
word-wrap: break-word;
|
|
text-align: var(--paragraph-alignment, justify);
|
|
}
|
|
.setting-select { width: 100%; padding: 0.5rem; background: var(--color-bg-elevated); border: 1px solid var(--color-border-subtle); border-radius: 4px; color: var(--color-text); font-size: 1rem; }
|
|
.setting-inline .setting-select { width: auto; min-width: 200px; flex: 1; }
|
|
.setting-select:focus { outline: none; border-color: var(--color-primary); }
|
|
.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: var(--color-primary); }
|
|
.checkbox-label span { color: var(--color-text); text-align: left; font-weight: 500; }
|
|
|
|
/* Mobile responsive styles */
|
|
@media (max-width: 768px) {
|
|
.setting-group.setting-inline {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.setting-group.setting-inline label {
|
|
min-width: unset;
|
|
}
|
|
|
|
.setting-inline .setting-select {
|
|
width: 100%;
|
|
min-width: unset;
|
|
}
|
|
|
|
.setting-control {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.setting-buttons {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.color-picker {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.preview-content h3 {
|
|
font-size: 1.25em;
|
|
}
|
|
}
|
|
|