mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 17:15:48 +00:00
refactor: reduce duplicated CSS using less variables
This commit is contained in:
parent
0433da66c1
commit
18617b32c9
1 changed files with 30 additions and 34 deletions
|
|
@ -2,6 +2,25 @@
|
|||
|
||||
@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 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -138,47 +157,26 @@
|
|||
}
|
||||
|
||||
@media only screen and (max-width: @minimum) {
|
||||
.cell {
|
||||
.items {
|
||||
.item {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.disable-cell-items();
|
||||
}
|
||||
|
||||
@media @phone-portrait {
|
||||
.cell {
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
|
||||
.items {
|
||||
padding: 1px;
|
||||
gap: 0.15rem;
|
||||
|
||||
.item {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.compact-items();
|
||||
.disable-cell-items();
|
||||
}
|
||||
|
||||
@media @phone-landscape {
|
||||
.cell {
|
||||
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) {
|
||||
.cell {
|
||||
gap: 0;
|
||||
|
|
@ -207,12 +205,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: @small-phone-portrait-size) and (max-width: @small) and (orientation: portrait) {
|
||||
.cell {
|
||||
.items {
|
||||
.item {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: @small) and (orientation: portrait) {
|
||||
.disable-cell-items();
|
||||
}
|
||||
|
||||
@media screen and (min-width: @small-phone-portrait-size) and (max-width: @small) and (orientation: portrait) {
|
||||
.disable-cell-items();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue