Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 13:52:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(MainNavbars): use less variables

Browse source 
this ensures we utilize built in less style variables at the top of the file to avoid inline variable declarations
This commit is contained in:
Timothy Z. 2024-12-21 20:53:36 +02:00
parent 055ac1d873
commit 4f4b46c9f1
1 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/common/MainNavBars/styles.less
View file

@ -2,6 +2,11 @@
@import (reference) '~stremio/common/screen-sizes.less';
@top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
@bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
@overlap-size: 3rem;
@transparency-grandient-pad: 6rem;
.main-nav-bars-container {
position: relative;
z-index: 0;
@ -37,15 +42,10 @@
z-index: 0;
overflow: scroll;
--top-overlay-size: calc(var(--horizontal-nav-bar-size) + env(safe-area-inset-top, 0px));
--bottom-overlay-size: calc(var(--vertical-nav-bar-size) + var(--calculated-bottom-safe-inset, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
transparent calc(@top-overlay-size - @overlap-size),
black calc(@top-overlay-size + @transparency-grandient-pad),
black 100%
);
}
@ -59,10 +59,10 @@
mask: linear-gradient(
to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black calc(100% - var(--bottom-overlay-size) - var(--transparency-grandient-pad)),
transparent calc(100% - var(--bottom-overlay-size) + var(--overlap-size))
transparent calc(@top-overlay-size - @overlap-size),
black calc(@top-overlay-size + @transparency-grandient-pad),
black calc(100% - @bottom-overlay-size - @transparency-grandient-pad),
transparent calc(100% - @bottom-overlay-size + @overlap-size)
);
}