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
pull/41/head
Claire 2022-11-25 13:54:43 +01:00 committed by GitHub
parent 43dbc62568
commit 6517b7b9f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;
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 {
&:hover,
&:focus {
background-color: darken($ui-base-color, 10%);
}
&:focus {
background-color: darken($ui-base-color, 15%);
}
&:active {
background-color: darken($ui-base-color, 20%);
}
&.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 {

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

@ -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%);