Dome/Masto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[refactor] compose form button bar CSS

Browse Source 
Complete rewrite of the CSS for the compose form button bar. This makes the buttons and icons sit nicely in the available space.
This commit is contained in:
Zoë Bijl
2025-10-04 01:25:42 +02:00
parent 18fd2ef39a
commit efaeb5d969
1 changed files with 28 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/flavours/glitch/styles/components/compose_form.scss
+28 -29
View File
@@ -479,48 +479,43 @@
} }
.compose-form__buttons-wrapper { .compose-form__buttons-wrapper {
padding: 10px;
background: darken($simple-background-color, 8%);
border-radius: 0 0 4px 4px;
height: 27px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
flex: 0 0 auto; padding: 10px;
border-radius: 0 0 4px 4px;
color: $action-button-color;
background: darken($simple-background-color, 8%);
} }
.compose-form__buttons { .compose-form__buttons {
display: flex; display: flex;
flex: 0 0 auto; gap: 1px;
align-items: center;
justify-content: center;
& .icon-button, .icon-button,
& .text-icon-button { .text-icon-button {
display: inline-block; display: flex;
box-sizing: content-box; align-items: center;
padding: 0 3px; justify-content: center;
height: 27px; width: 32px;
line-height: 27px; height: 32px;
vertical-align: bottom; }
svg.gts-icon {
--size: 20px;
scale: 1.2;
} }
& > hr { & > hr {
display: inline-block; margin: 0 1px;
margin: 0 3px; height: 24px;
border-width: 0 0 0 1px; border: 0;
border-style: none none none solid; border-right: 1px solid $action-button-color;
border-color: transparent transparent transparent
darken($simple-background-color, 24%);
padding: 0;
width: 0;
height: 27px;
background: transparent;
} }
} }
.character-counter__wrapper {
align-self: center;
margin-inline-end: 4px;
}
.privacy-dropdown.active { .privacy-dropdown.active {
.privacy-dropdown__value { .privacy-dropdown__value {
background: $simple-background-color; background: $simple-background-color;
@@ -565,6 +560,10 @@
color: $inverted-text-color; color: $inverted-text-color;
cursor: pointer; cursor: pointer;
svg.gts-icon {
--size: 24px;
}
.privacy-dropdown__option__content { .privacy-dropdown__option__content {
flex: 1 1 auto; flex: 1 1 auto;
color: $lighter-text-color; color: $lighter-text-color;