me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix pillbar buttons in light theme (#1972)

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

* Fix pillbar buttons in light theme

Fixes #1970
This commit is contained in:
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;
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%);