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

Intro screen styles based on rem

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-30 17:27:00 +03:00
parent 08db8e723f
commit dbe9fa3b6e
1 changed files with 37 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/routes/Intro/styles.less
View file

@ -1,9 +1,9 @@
.intro-container { .intro-container {
height: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%;
background: background:
linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)), linear-gradient(var(--color-backgrounddark80), var(--color-backgrounddark80)),
url('/images/intro_background.jpg'); url('/images/intro_background.jpg');
@ -15,61 +15,59 @@
overflow-x: hidden; overflow-x: hidden;
.form-container { .form-container {
width: var(--form-width); width: 20rem;
margin: auto; margin: auto;
padding: 4em 0; padding: 4rem 0;
.form-button { .form-button {
width: 100%;
padding: 0 1em;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
padding: 0 1rem;
cursor: pointer; cursor: pointer;
.icon { .icon {
flex: none; flex: none;
align-self: stretch; align-self: stretch;
display: block; display: block;
width: 0.8em; width: 0.8rem;
margin-right: 1em; margin-right: 1rem;
fill: var(--color-surfacelighter); fill: var(--color-surfacelighter);
&~.label { &~.label {
max-width: calc(100% - 1.8em); max-width: calc(100% - 1.8rem);
} }
} }
.label { .label {
flex: none; flex: none;
max-width: 100%; max-width: 100%;
padding: 0.3em 0; padding: 0.3rem 0;
font-size: 1.1em; font-size: 1.1rem;
line-height: 1.2em;
font-weight: 600; font-weight: 600;
color: var(--color-surfacelighter); color: var(--color-surfacelighter);
} }
} }
.facebook-button { .facebook-button {
min-height: 4.5em; min-height: 4.5rem;
background: #4267b2; background: var(--color-facebook);
.label {
font-size: 1.2em;
}
&:hover { &:hover {
filter: brightness(1.1); filter: brightness(1.1);
} }
.label {
font-size: 1.2rem;
}
} }
.facebook-statement { .facebook-statement {
width: 100%; width: 100%;
margin-top: 0.5em; margin-top: 0.5rem;
margin-bottom: 2em; margin-bottom: 2rem;
line-height: 1.2em;
text-align: center; text-align: center;
color: var(--color-surface); color: var(--color-surface);
} }
@ -77,8 +75,8 @@
.text-input { .text-input {
display: block; display: block;
width: 100%; width: 100%;
margin: 1em 0; margin: 1rem 0;
padding: 0.5em 0.3em; padding: 0.5rem 0.3rem;
border-bottom: calc(0.5 * var(--focusable-border-size)) solid var(--color-surface); border-bottom: calc(0.5 * var(--focusable-border-size)) solid var(--color-surface);
color: var(--color-surfacelighter); color: var(--color-surfacelighter);
@ -97,14 +95,17 @@
} }
.forgot-password-link-container { .forgot-password-link-container {
margin: 1em 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
margin: 1rem 0;
text-align: right; text-align: right;
.forgot-password-link { .forgot-password-link {
padding: 0.5em 0.3em; flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
padding: 0.5rem 0.3rem;
color: var(--color-surfacelight); color: var(--color-surfacelight);
cursor: pointer; cursor: pointer;
@ -120,21 +121,20 @@
} }
.consent-checkbox { .consent-checkbox {
--icon-size: 1.2em; --icon-size: 1.2rem;
--icon-color: var(--color-surface); --icon-color: var(--color-surface);
--icon-background-color: transparent; --icon-background-color: transparent;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 1em 0; margin: 1rem 0;
padding: 0.5em 0.3em; padding: 0.5rem 0.3rem;
cursor: pointer; cursor: pointer;
.label { .label {
flex: 1; flex: 1;
margin-left: 0.5em; margin-left: 0.5rem;
line-height: 1.2em;
color: var(--color-surface); color: var(--color-surface);
.link { .link {
@ -166,18 +166,18 @@
} }
.error-message { .error-message {
margin: 1em 0; margin: 1rem 0;
text-align: center; text-align: center;
color: var(--color-signal1); color: var(--color-signal1);
} }
.submit-button { .submit-button {
min-height: 4em; min-height: 4rem;
margin: 1em 0; margin: 1rem 0;
background-color: var(--color-primarydark); background-color: var(--color-primarydark);
.label { .label {
font-size: 1.2em; font-size: 1.2rem;
} }
&:hover { &:hover {
@ -186,9 +186,9 @@
} }
.guest-login-button { .guest-login-button {
margin-top: 1em; margin-top: 1rem;
margin-bottom: 0.2em; margin-bottom: 0.2rem;
padding: 0.8em .3em; padding: 0.8rem .3rem;
&:hover, &:focus { &:hover, &:focus {
background-color: var(--color-surfacedarker60); background-color: var(--color-surfacedarker60);
@ -196,16 +196,11 @@
} }
.switch-form-button { .switch-form-button {
padding: 0.8em .3em; padding: 0.8rem .3rem;
&:hover, &:focus { &:hover, &:focus {
background-color: var(--color-surfacedarker60); background-color: var(--color-surfacedarker60);
} }
} }
} }
}
.intro-container {
--form-width: 270px;
font-size: 14px;
} }