Layouts and css for /login and /login/mastodon
parent
1cb570bbb3
commit
415becc496
|
|
@ -15,6 +15,84 @@
|
|||
/* Larger than Desktop HD */
|
||||
@media (min-width: 1200px) {}
|
||||
|
||||
.center { display: flex }
|
||||
.center > * { margin: auto }
|
||||
.right { text-align: right }
|
||||
|
||||
.bg-mastodon { background: #3088d4 !important }
|
||||
|
||||
/* Public
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
padding: .6em .8em;
|
||||
max-width: 60em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
header div.icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
header div.nav {
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
header div.nav > span.brand {
|
||||
position: relative;
|
||||
top: .25em;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
background: linear-gradient(#d2d2d2, #eee);
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
main > div.content {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Login
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
.login-buttons > ._ {
|
||||
min-width: 80%;
|
||||
}
|
||||
.login-buttons a.button {
|
||||
display: flex;
|
||||
border: none;
|
||||
box-shadow: 0px 0px .5em #0000003d;
|
||||
text-align: left;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.login-buttons a.button > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.login-buttons a.button > div > img {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: auto;
|
||||
margin-right: 2em;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
padding: .2em;
|
||||
border: 2px solid #5b5b5b;
|
||||
}
|
||||
|
||||
.login-buttons sub {
|
||||
position: relative;
|
||||
bottom: -.5em;
|
||||
left: 1em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#login h4 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Shared
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@ p {
|
|||
/* Links
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
a {
|
||||
color: #1EAEDB; }
|
||||
color: #0058CA; }
|
||||
a:hover {
|
||||
color: #0FA0CE; }
|
||||
|
||||
|
|
@ -198,7 +198,6 @@ input[type="submit"]:focus,
|
|||
input[type="reset"]:focus,
|
||||
input[type="button"]:focus {
|
||||
color: #333;
|
||||
border-color: #888;
|
||||
outline: 0; }
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
|
|
@ -206,8 +205,7 @@ input[type="submit"].button-primary,
|
|||
input[type="reset"].button-primary,
|
||||
input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0; }
|
||||
background-color: #33C3F0; }
|
||||
.button.button-primary:hover,
|
||||
button.button-primary:hover,
|
||||
input[type="submit"].button-primary:hover,
|
||||
|
|
@ -219,9 +217,8 @@ input[type="submit"].button-primary:focus,
|
|||
input[type="reset"].button-primary:focus,
|
||||
input[type="button"].button-primary:focus {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB; }
|
||||
|
||||
filter: brightness(110%) }
|
||||
.button-primary { border: none !important }
|
||||
|
||||
/* Forms
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
|
|
@ -54,10 +54,42 @@ if ($function === 'oauth') {
|
|||
<?php require '/src/views/head.php' ?>
|
||||
<?php require '/src/views/public/head.php' ?>
|
||||
|
||||
<main>
|
||||
LOGIN: <?php echo $login_method ?>
|
||||
<br>
|
||||
FUNCTION: <?php echo $function ?>
|
||||
<main id="login">
|
||||
<div class="content">
|
||||
<br>
|
||||
<?php if ($function === 'view'): ?>
|
||||
<?php if ($login_method === null): ?>
|
||||
|
||||
<h4><?php l('login.login_with_fediverse', 'Log In using your Fediverse account') ?></h4>
|
||||
<div class="center login-buttons">
|
||||
<div class="_">
|
||||
<a href="/login/mastodon" class="button button-primary bg-mastodon">
|
||||
<div><img src="https://masto.nobigtech.es/favicon.ico"/>
|
||||
<?php l('login.login_mastodon', 'I use Mastodon') ?>
|
||||
</div>
|
||||
</a>
|
||||
<sub><?php l('login.dont_have_mastodon', 'Don\'t have Mastodon?') ?>
|
||||
<a href="https://joinmastodon.org/communities/general"><?php l('login.choose_community', 'choose a community') ?></a></sub>
|
||||
<br><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php elseif ($login_method === 'mastodon'): ?>
|
||||
|
||||
<h4><?php l('login.login_with_mastodon', 'Log In using Mastodon') ?></h4>
|
||||
<div class="columns">
|
||||
<label for="instanceURL"><?php l('login.select_instance', 'Select your instance') ?></label>
|
||||
<input class="u-full-width" type="text" placeholder="example.org" id="instanceURL" />
|
||||
<div class="right">
|
||||
<input onclick="API.mastodon.registerInstance(null)" class="button-primary u-full-width bg-mastodon"
|
||||
type="submit" value="<?php l('all.continue', 'Continue') ?> >>" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endif ?>
|
||||
<?php endif ?>
|
||||
<br>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php require '/src/js/api.php' ?>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,10 @@
|
|||
<?php
|
||||
|
||||
<header>
|
||||
<div class="icon">
|
||||
<a href="/">
|
||||
<img width="30" height="30" src="/img/favicon_tmp.png"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<span class="brand"><?php l('all.app_name') ?></span>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in New Issue