Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Addons): styles

Browse source 
- removed use of px
- creates less native variables
-removed unnecessary vars
This commit is contained in:
Timothy Z. 2024-12-21 21:44:00 +02:00
parent dd8791d589
commit d7776f6d98
1 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/routes/Addons/styles.less
View file

@ -21,35 +21,34 @@
filters-modal-content: modal-dialog-content; filters-modal-content: modal-dialog-content;
} }
@selectable-inputs-assumed-height: 5.25rem;
@top-overlay-size: @selectable-inputs-assumed-height;
@bottom-overlay-size: calc(1.5rem + env(safe-area-inset-bottom, 0rem));
@overlap-size: 3rem;
@transparency-grandient-pad: 6rem;
.addons-container { .addons-container {
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
.addons-content { .addons-content {
--selectable-inputs-assumed-height: 84px;
--top-overlay-size: var(--selectable-inputs-assumed-height);
--bottom-vertical-nav-bar-size: 0px;
--bottom-overlay-size: calc(var(--bottom-vertical-nav-bar-size) + env(safe-area-inset-bottom, 0px));
--overlap-size: 3rem;
--transparency-grandient-pad: 6rem;
width: 100%; width: 100%;
height: calc(100% + var(--bottom-overlay-size)); height: calc(100% + @bottom-overlay-size);
margin-bottom: calc(var(--bottom-overlay-size) * -1); margin-bottom: calc(@bottom-overlay-size * -1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-self: stretch; align-self: stretch;
.addons-list-container { .addons-list-container {
margin-top: calc(var(--selectable-inputs-assumed-height) * -1); margin-top: calc(@selectable-inputs-assumed-height * -1);
padding: 0 1.5rem; padding: 0 1.5rem;
padding-top: var(--selectable-inputs-assumed-height); padding-top: @selectable-inputs-assumed-height;
padding-bottom: var(--bottom-overlay-size, 0px); padding-bottom: @bottom-overlay-size;
mask: linear-gradient( mask: linear-gradient(
to bottom, to bottom,
transparent calc(var(--top-overlay-size) - var(--overlap-size)), transparent calc(@top-overlay-size - @overlap-size),
black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)), black calc(@top-overlay-size + @transparency-grandient-pad),
black 100% black 100%
); );
z-index: 1; z-index: 1;
@ -301,8 +300,6 @@
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.addons-container { .addons-container {
.addons-content { .addons-content {
--bottom-vertical-nav-bar-size: var(--vertical-nav-bar-size);
.selectable-inputs-container { .selectable-inputs-container {
.add-button-container { .add-button-container {
z-index: 1; z-index: 1;