Use apply() to align with the updated CSS variable system and ensure consistent radius theming
146 lines
2.8 KiB
CSS
146 lines
2.8 KiB
CSS
#settings-window {
|
|
background-color: var(--background);
|
|
border-radius: apply(radius-md);
|
|
border: 1px solid var(--border);
|
|
min-width: 850px;
|
|
min-height: 600px;
|
|
}
|
|
|
|
#settings-main-box {
|
|
padding: 0;
|
|
}
|
|
|
|
#settings-sidebar {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
padding: 20px 10px;
|
|
min-width: 200px;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
#settings-sidebar-button {
|
|
padding: 10px 15px;
|
|
border-radius: apply(radius-sm);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#settings-sidebar-button:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
#settings-sidebar-button Label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#settings-sidebar-button.active {
|
|
background-color: var(--accent);
|
|
}
|
|
|
|
#settings-sidebar-button.active Label {
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
#settings-content-wrapper {
|
|
padding: 30px;
|
|
}
|
|
|
|
#settings-page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
#settings-row {
|
|
padding: 12px 15px;
|
|
border-radius: apply(radius-sm);
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#settings-row-label {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#settings-row-description {
|
|
font-size: 12px;
|
|
color: var(--foreground-dim);
|
|
}
|
|
|
|
#settings-switch {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
padding: 6px 12px;
|
|
border-radius: apply(radius-xl);
|
|
min-width: 50px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#settings-switch.active {
|
|
background-color: var(--accent);
|
|
color: var(--accent-foreground);
|
|
}
|
|
|
|
#settings-entry {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 8px 12px;
|
|
border-radius: apply(radius-xs);
|
|
border: 1px solid var(--border);
|
|
min-width: 200px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
#settings-entry:focus {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
#settings-combo {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
padding: 4px 8px;
|
|
border-radius: apply(radius-xs);
|
|
border: 1px solid var(--border);
|
|
min-width: 150px;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
#settings-combo:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
#settings-list-tags {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#settings-list-tag {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
border-radius: apply(radius-md);
|
|
padding: 4px 10px;
|
|
margin-right: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#settings-list-tag:hover {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
#settings-list-tag Label {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#settings-list-tag-close {
|
|
color: var(--foreground-dim);
|
|
font-size: 10px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
#settings-list-tag-close:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
#settings-list-entry {
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
border: 1px dashed var(--border);
|
|
padding: 6px 12px;
|
|
border-radius: apply(radius-xs);
|
|
font-size: 13px;
|
|
} |