fix(design): use dark compose button halo on dark themes (#714)
Also only show the halo when we're actually scrolled down, because the point is to make it more visible against arbitrary content.
This commit is contained in:
parent
36d90d34e5
commit
26b84c435a
|
@ -1,4 +1,4 @@
|
|||
<div class="compose-box-button-halo">
|
||||
<div class="compose-box-button-halo {sticky ? 'compose-box-button-halo-sticky' : ''}">
|
||||
<button class="primary compose-box-button"
|
||||
{disabled}
|
||||
aria-label={sticky ? 'Compose' : 'Toot!'}
|
||||
|
@ -25,9 +25,11 @@
|
|||
.compose-box-button-halo {
|
||||
border-radius: 2px;
|
||||
margin: 5px 15px 15px 5px;
|
||||
background: var(--compose-button-halo);
|
||||
pointer-events: auto;
|
||||
}
|
||||
.compose-box-button-halo-sticky {
|
||||
background-color: var(--compose-button-halo);
|
||||
}
|
||||
.compose-box-button {
|
||||
grid-area: button;
|
||||
justify-self: right;
|
||||
|
@ -71,4 +73,4 @@
|
|||
disabled: ({ $postingStatus, overLimit }) => $postingStatus || overLimit
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
@ -24,9 +24,9 @@
|
|||
--muted-modal-focus: #{#999};
|
||||
--muted-modal-hover: #{rgba(255, 255, 255, 0.2)};
|
||||
|
||||
--compose-button-halo: #{rgba(255, 255, 255, 0.1)};
|
||||
--compose-button-halo: #{rgba(0, 0, 0, 0.1)};
|
||||
|
||||
--compose-autosuggest-item-hover: #{lighten($main-bg-color, 10%)};
|
||||
--compose-autosuggest-item-active: #{lighten($main-bg-color, 15%)};
|
||||
--compose-autosuggest-outline: #{lighten($border-color, 20%)};
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue