Fix pillbar buttons in light theme (#1972)

* Simplify pillbar button design and make it more consistent with toggles

* Fix pillbar buttons in light theme

Fixes #1970
main
Claire 2 years ago committed by GitHub
parent 43dbc62568
commit 6517b7b9f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -558,6 +558,7 @@ $ui-header-height: 55px;
border-radius: 4px;
margin-bottom: 10px;
align-items: stretch;
gap: 2px;
}
.pillbar-button {
@ -565,7 +566,6 @@ $ui-header-height: 55px;
color: #fafafa;
padding: 2px;
margin: 0;
margin-left: 2px;
font-size: inherit;
flex: auto;
background-color: $ui-base-color;
@ -578,43 +578,20 @@ $ui-header-height: 55px;
}
&:not([disabled]) {
&:hover {
background-color: darken($ui-base-color, 10%);
}
&:hover,
&:focus {
background-color: darken($ui-base-color, 15%);
}
&:active {
background-color: darken($ui-base-color, 20%);
background-color: darken($ui-base-color, 10%);
}
&.active {
background-color: $ui-highlight-color;
box-shadow: inset 0 5px darken($ui-highlight-color, 20%);
&:hover {
background-color: lighten($ui-highlight-color, 10%);
box-shadow: inset 0 5px darken($ui-highlight-color, 10%);
}
background-color: darken($ui-highlight-color, 2%);
&:hover,
&:focus {
background-color: lighten($ui-highlight-color, 15%);
box-shadow: inset 0 5px darken($ui-highlight-color, 5%);
}
&:active {
background-color: lighten($ui-highlight-color, 20%);
box-shadow: inset 0 5px $ui-highlight-color;
background-color: $ui-highlight-color;
}
}
}
/* TODO: check RTL? */
&:first-child {
margin-left: 0;
}
}
.limited-account-hint {

@ -712,6 +712,26 @@ html {
// Glitch-soc-specific changes
.pillbar-button {
background: $ui-secondary-color;
&:not([disabled]) {
&:hover,
&:focus {
background: darken($ui-secondary-color, 10%);
}
&.active {
background-color: darken($ui-highlight-color, 2%);
&:hover,
&:focus {
background: lighten($ui-highlight-color, 10%);
}
}
}
}
.glitch.local-settings {
background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%);

Loading…
Cancel
Save