paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

banners: Improve banner scaling with font size.

Browse Source 
This commit converts the pixel values to em instead to make the banner
scale better with the different font sizes.
This commit is contained in:
Sayam Samal
2025-03-22 02:21:29 +05:30
committed by Tim Abbott
parent 023e634e98
commit bf88426cd1
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/app_variables.css
View File

@@ -633,20 +633,20 @@
);
/* Banner grid layout variables */
--banner-horizontal-padding: 13px;
--banner-vertical-padding: 5px;
--banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */
--banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */
--banner-grid-template-areas-lg: ". . . . . . banner-close-button banner-close-button"
". . banner-label . banner-action-buttons . banner-close-button banner-close-button"
". . . . . . banner-close-button banner-close-button";
--banner-grid-template-columns-lg: var(--banner-horizontal-padding) 0 auto
minmax(0, 1fr) auto 0 minmax(0, auto) var(--banner-horizontal-padding);
--banner-grid-template-rows-lg: 5px auto 5px;
--banner-grid-template-rows-lg: 0.3125em auto 0.3125em; /* 5px at 16px/1em */
--banner-grid-template-areas-md: ". . . . banner-close-button banner-close-button"
". . banner-label banner-label banner-close-button banner-close-button"
". banner-action-buttons banner-action-buttons banner-action-buttons . .";
--banner-grid-template-columns-md: var(--banner-horizontal-padding) 0
minmax(auto, 1fr) 0 minmax(0, auto) var(--banner-horizontal-padding);
--banner-grid-template-rows-md: 5px auto auto 5px;
--banner-grid-template-rows-md: 0.3125em auto auto 0.3125em; /* 5px at 16px/1em */
--banner-grid-template-areas-sm: ". . . . banner-close-button banner-close-button"
". . banner-label banner-label banner-close-button banner-close-button"
". banner-action-buttons banner-action-buttons banner-action-buttons banner-action-buttons .";

6
web/styles/banners.css
View File

@@ -39,15 +39,15 @@
.banner-action-buttons {
grid-area: banner-action-buttons;
display: flex;
gap: 8px;
margin-left: 10px;
gap: 0.5em; /* 8px at 16px/1em */
margin-left: 0.625em; /* 10px at 16px/1em */
}
.banner-close-button {
display: flex;
grid-area: banner-close-button;
padding: 0.6875em;
margin-left: 5px;
margin-left: 0.3125em; /* 5px at 16px/1em */
&:focus-visible {
outline-offset: -2px;