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

refactor of app styles for rem based ui

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-30 16:46:18 +03:00
parent e5439880bb
commit 0784ab19fe
1 changed files with 32 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/App/styles.less
View file

@ -42,24 +42,18 @@
font-style: normal;
}
:root {
--scroll-bar-width: 8px;
--landscape-shape-ratio: 0.5625;
--poster-shape-ratio: 1.464;
--window-min-width: 800px;
--window-min-height: 600px;
--focusable-border-size: 2px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 1rem;
line-height: 1.2em;
font-family: inherit;
border: none;
outline: none;
list-style: none;
user-select: none;
text-decoration: none;
outline: none;
appearance: none;
background: none;
box-shadow: none;
@ -67,37 +61,48 @@
word-break: break-word;
}
html, body, :global(#app) {
position: relative;
z-index: 0;
width: 100vw;
height: 100vh;
min-width: var(--window-min-width);
min-height: var(--window-min-height);
font-family: 'Roboto', 'sans-serif';
line-height: 1;
overflow: auto;
html {
--landscape-shape-ratio: 0.5625;
--poster-shape-ratio: 1.464;
--color-facebook: #4267b2;
&, body, :global(#app) {
position: relative;
z-index: 0;
width: 100vw;
height: 100vh;
min-width: 800px;
min-height: 600px;
font-family: 'Roboto', 'sans-serif';
overflow: auto;
}
.router {
width: 100%;
height: 100%;
}
}
:global {
:global(.focusable-with-border) {
&:focus, &:focus-within {
outline-offset: calc(-1 * var(--focusable-border-size));
outline: var(--focusable-border-size) solid var(--color-surfacelighter);
}
}
}
input {
&::-moz-focus-inner {
border: none;
}
&[type="email"], &[type="password"], &[type="text"] {
&[type="text"], &[type="email"], &[type="password"] {
user-select: text;
font-size: inherit;
line-height: inherit;
font-family: inherit;
}
}
svg {
overflow: visible;
}
::-webkit-scrollbar {
width: var(--scroll-bar-width);
}
@ -109,11 +114,4 @@ html, body, :global(#app) {
::-webkit-scrollbar-track {
background-color: var(--color-backgroundlight);
}
.focusable-with-border {
&:focus, &:focus-within {
outline-offset: calc(-1 * var(--focusable-border-size));
outline: var(--focusable-border-size) solid var(--color-surfacelighter);
}
}
}