Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose: Make compose close cross button smaller and add active state. 

The background color's opacity is reduced for the button's active state.
This commit is contained in:
N-Shar-ma 2024-06-25 00:08:37 +05:30 committed by Tim Abbott
parent 29be4236d0
commit b85e41df47
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/styles/app_variables.css
View File

@ -416,6 +416,9 @@
--color-compose-embedded-button-background-hover: hsl(
231deg 100% 90% / 50%
);
--color-compose-embedded-button-background-interactive: hsl(
231deg 100% 90% / 90%
);
--color-compose-chevron-arrow: hsl(0deg 0% 58%);
--color-limit-indicator: hsl(38deg 100% 36%);
--color-limit-indicator-over-limit: hsl(3deg 80% 40%);
@ -791,6 +794,9 @@
--color-compose-embedded-button-background-hover: hsl(
235deg 100% 70% / 11%
);
--color-compose-embedded-button-background-interactive: hsl(
235deg 100% 70% / 20%
);
--color-background-popover: hsl(212deg 32% 14%);
--color-limit-indicator: hsl(38deg 100% 70%);
--color-limit-indicator-over-limit: hsl(3deg 80% 60%);

10
web/styles/compose.css
View File

@ -469,12 +469,12 @@
right: 0;
color: var(--color-compose-send-control-button);
background: transparent;
font-size: 15px;
font-size: 12.5px;
font-weight: normal;
line-height: 20px;
opacity: 0.7;
border: 0;
padding: 5px 7px;
padding: 3px 7px;
border-radius: 8px;
vertical-align: unset;
text-shadow: none;
@ -485,6 +485,12 @@
color: var(--color-compose-send-control-button-interactive);
}
&:active {
background-color: var(
--color-compose-embedded-button-background-interactive
);
}
&:focus:not(:focus-visible) {
outline: none;
}