feat: refactor theme and view mode switchers to use button group styles

This commit is contained in:
sHa
2025-05-29 01:53:37 +03:00
parent 5a5202eb80
commit fe67375590
2 changed files with 50 additions and 81 deletions

View File

@@ -115,7 +115,6 @@ button:hover {
outline: 2px solid var(--color-border);
}
.copy-btn,
.copy-group .png-btn {
background-color: var(--secondary-color);
@@ -184,6 +183,54 @@ button:hover {
margin-right: 0.5em;
}
/* Universal Button Group Styles */
.button-group {
display: inline-flex;
border: 1px solid var(--color-border);
border-radius: 6px;
overflow: hidden;
background: var(--color-card);
}
.button-group button {
background: none;
border: none;
color: var(--color-text);
cursor: pointer;
padding: 0.5em 0.7em;
transition: background 0.2s, color 0.2s, border-color 0.2s;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--color-border);
border-radius: 0;
position: relative;
}
.button-group button:last-child {
border-right: none;
}
.button-group button:hover:not(.active) {
background: var(--color-border);
color: var(--color-text);
}
.button-group button.active {
background: var(--color-accent);
color: #fff;
border-right-color: var(--color-accent);
}
.button-group button.active:hover {
background: var(--color-accent-hover, #2980b9);
border-right-color: var(--color-accent-hover, #2980b9);
}
.button-group button.active:last-child {
border-right: none;
}
/* Shared color switcher and color circle styles */
.format-row {
display: flex;