mirror of
https://github.com/shadoll/sLogos.git
synced 2026-02-04 11:03:24 +00:00
feat: refactor theme and view mode switchers to use button group styles
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user