refactor(Addons): use global vars

This commit is contained in:
Timothy Z. 2024-12-21 21:55:26 +02:00
parent 3a67df5791
commit d7a4deadaa

View file

@ -21,34 +21,28 @@
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 {
width: 100%; width: 100%;
height: calc(100% + @bottom-overlay-size); height: calc(100% + var(--bottom-overlay-size));
margin-bottom: calc(@bottom-overlay-size * -1); margin-bottom: calc(var(--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(@selectable-inputs-assumed-height * -1); margin-top: calc(var(--selectable-inputs-assumed-height) * -1);
padding: 0 1.5rem; padding: 0 1.5rem;
padding-top: @selectable-inputs-assumed-height; padding-top: var(--selectable-inputs-assumed-height);
padding-bottom: @bottom-overlay-size; padding-bottom: var(--bottom-overlay-size);
mask: linear-gradient( mask: linear-gradient(
to bottom, to bottom,
transparent calc(@top-overlay-size - @overlap-size), transparent calc(var(--top-overlay-size) - var(--overlap-size)),
black calc(@top-overlay-size + @transparency-grandient-pad), black calc(var(--top-overlay-size) + var(--transparency-grandient-pad)),
black 100% black 100%
); );
z-index: 1; z-index: 1;