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

refactor: reduce duplicated CSS using less variables

Browse source
This commit is contained in:
Victor Sales 2025-10-17 17:45:53 +03:00
parent 0433da66c1
commit 18617b32c9
1 changed files with 30 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/routes/Calendar/Table/Cell/Cell.less
View file

@ -2,6 +2,25 @@
@import (reference) '~stremio/common/screen-sizes.less'; @import (reference) '~stremio/common/screen-sizes.less';
.disable-cell-items() {
.cell {
.items {
.item {
pointer-events: none;
}
}
}
}
.compact-items() {
.cell {
.items {
padding: 1px;
gap: 0.15rem;
}
}
}
.cell { .cell {
position: relative; position: relative;
display: flex; display: flex;
@ -138,47 +157,26 @@
} }
@media only screen and (max-width: @minimum) { @media only screen and (max-width: @minimum) {
.cell { .disable-cell-items();
.items {
.item {
pointer-events: none;
}
}
}
} }
@media @phone-portrait { @media @phone-portrait {
.cell { .cell {
flex-direction: column; flex-direction: column;
display: grid; display: grid;
.items {
padding: 1px;
gap: 0.15rem;
.item {
pointer-events: none;
}
}
} }
.compact-items();
.disable-cell-items();
} }
@media @phone-landscape { @media @phone-landscape {
.cell { .cell {
flex-direction: row; flex-direction: row;
.items {
padding: 1px;
gap: 0.15rem;
.item {
pointer-events: none;
}
}
} }
.compact-items();
.disable-cell-items();
} }
@media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) { @media only screen and (max-height: @medium) and (max-width: @medium) and (orientation: landscape) {
.cell { .cell {
gap: 0; gap: 0;
@ -207,12 +205,10 @@
} }
} }
@media screen and (min-width: @small-phone-portrait-size) and (max-width: @small) and (orientation: portrait) { @media screen and (max-width: @small) and (orientation: portrait) {
.cell { .disable-cell-items();
.items { }
.item {
pointer-events: none; @media screen and (min-width: @small-phone-portrait-size) and (max-width: @small) and (orientation: portrait) {
} .disable-cell-items();
}
}
} }