common screen sizes used in app styles to define media queries

This commit is contained in:
NikolaBorislavovHristov 2019-08-02 14:25:36 +03:00
parent c04b0d467e
commit 4bbc916f7b

View file

@ -1,4 +1,5 @@
@import (inline, once, css) 'stremio-colors/css/stremio-colors.css'; @import (inline, once, css) 'stremio-colors/css/stremio-colors.css';
@import (reference) 'common/screen-sizes.less';
@font-face { @font-face {
font-family: 'Roboto'; font-family: 'Roboto';
@ -116,7 +117,7 @@ html {
} }
} }
@media only screen and (max-width: 1600px) { @media only screen and (max-width: @medium) {
html { html {
--scroll-bar-width: 8px; --scroll-bar-width: 8px;
--focusable-border-size: 2px; --focusable-border-size: 2px;
@ -124,7 +125,7 @@ html {
} }
} }
@media only screen and (min-width: 1600px) and (max-width: 2000px) { @media only screen and (min-width: @medium) and (max-width: @large) {
html { html {
--scroll-bar-width: 8px; --scroll-bar-width: 8px;
--focusable-border-size: 2px; --focusable-border-size: 2px;
@ -132,7 +133,7 @@ html {
} }
} }
@media only screen and (min-width: 2000px) and (max-width: 3000px) { @media only screen and (min-width: @large) and (max-width: @xxlarge) {
html { html {
--scroll-bar-width: 8px; --scroll-bar-width: 8px;
--focusable-border-size: 2px; --focusable-border-size: 2px;
@ -140,7 +141,7 @@ html {
} }
} }
@media only screen and (min-width: 3000px) { @media only screen and (min-width: @xxlarge) {
html { html {
--scroll-bar-width: 10px; --scroll-bar-width: 10px;
--focusable-border-size: 3px; --focusable-border-size: 3px;