treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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
lolsob-rspec
Claire 2022-11-25 13:54:43 +01:00 committed by GitHub
parent cc21d9137f
commit 2ca4c2a143
2 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/javascript/flavours/glitch/styles/components/columns.scss
View File

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

20
app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
View File

@ -712,6 +712,26 @@ html {
// Glitch-soc-specific changes // 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 { .glitch.local-settings {
background: $ui-base-color; background: $ui-base-color;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);