mirror of
https://github.com/dergigi/boris.git
synced 2025-12-17 06:34:24 +01:00
96 lines
4.0 KiB
CSS
96 lines
4.0 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);
|
|
}
|
|
.preview-content a {
|
|
color: var(--link-color, #38bdf8);
|
|
text-decoration: none;
|
|
}
|
|
.preview-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.setting-select { width: 100%; padding: 0.5rem 1.75rem 0.5rem 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;
|
|
}
|
|
}
|
|
|