Layouts and css for /login and /login/mastodon

master
Bofh 1 year ago
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') ?> &gt;&gt;" />
</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…
Cancel
Save