More branding

49a6d0d8 · Janne Mareike Koschinski · 45ca91c7 · 49a6d0d8 · 49a6d0d8 · 49a6d0d8
Commit 49a6d0d8 authored 7 years ago by Janne Mareike Koschinski
--- a/res/css/login.css
+++ b/res/css/login.css
-body {
-    font-family: 'Open Sans', Helvetica Neue, Helvetica, Arial, arial, sans-serif;
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Material Icons"), local("MaterialIcons-Regular"), url(../icons/MaterialIcons-Regular.woff2) format("woff2"), url(../icons/MaterialIcons-Regular.woff) format("woff");
+}
+
+.icon {
+    font-family: "Material Icons", sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+    font-feature-settings: "liga";
 }

-body > :first-child {
-    margin-top: 8rem;
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 400;
+    src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-regular.woff2") format("woff2"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-regular.woff") format("woff");
 }

-body > :last-child {
-    margin-bottom: 2rem;
+@font-face {
+    font-family: "Roboto";
+    font-style: normal;
+    font-weight: 700;
+    src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-700.woff2") format("woff2"), url("../fonts/roboto-v15-latin-ext_cyrillic_greek-ext_cyrillic-ext_latin_greek_vietnamese-700.woff") format("woff");
 }

+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    background: #F2F2F2;
+    font-family: "Roboto", sans-serif;
+    font-size: 81.25%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    position: relative;
+    padding-right: 0.9375rem;
+    padding-left: 0.9375rem;
+}
+
+body .header, body .footer {
+    flex-grow: 1;
+}
+
+*:focus {
+    outline: none;
+}
+
+::-moz-focus-inner {
+    border: 0;
+}
+
+form {
+    background: #fff;
+    max-width: 390px;
+    padding: 20px 48px;
+    margin: 0 auto;
+    color: #212121;
+    box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
+}
+
+@media (max-width: 320px) {
    form {
-    background-color: #f7f7f7;
-    margin: 0 auto 25px;
-    border-radius: 2px;
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-    width: 16rem;
-    padding: 1.5rem 2rem;
+        padding: 8px 16px;
+        margin: initial;
+    }
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+}
+
+.header:before {
+    content: "";
+    flex-grow: 1;
 }

 h1 {
    color: #555;
-    font-size: 42px;
+    font-size: 32px;
    font-weight: 300;
-    margin: 0 0 15px;
+    margin: 5px 0 15px;
+    line-height: 1.5;
    text-align: center;
 }

@@ -32,7 +113,8 @@ h2 {
    color: #555;
    font-size: 18px;
    font-weight: 400;
-    margin-bottom: 20px;
+    margin: 5px 0 15px;
+    line-height: 1.5;
    text-align: center;
 }

@@ -57,30 +139,47 @@ input[type=text], input[type=password] {
    position: relative;
 }

-input[type=submit] {
-    min-width: 46px;
+input[type="submit"] {
+    display: inline-block;
+    position: relative;
+    border: 0 none;
+    white-space: nowrap;
    text-align: center;
-    font-size: 14px;
-    font-weight: 700;
-    height: 36px;
-    padding: 0 8px;
-    line-height: 36px;
+    font: inherit;
+    text-transform: uppercase;
+    text-decoration: none;
+    outline: 0 none;
    border-radius: 3px;
-    transition: all 0.218s;
+    cursor: pointer;
+    padding: 8px 16px;
+    font-weight: 500;
+    line-height: 20px;
+    font-size: 14px;
+    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
-    user-select: none;
-    cursor: default;
-    border: 1px solid #3079ed;
+    -blink-user-select: none;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 0;
+    min-width: 88px;
+    transition: background-size 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), background-color 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), color 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), box-shadow 300ms;
+    background-color: #0a70c0;
+    background-image: radial-gradient(circle, #105a94 10%, transparent 10.001%, transparent);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
-    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
-    background-color: #4d90fe;
-    background-image: linear-gradient(top, #4d90fe, #4787ed);
    width: 100%;
-    display: block;
-    z-index: 1;
-    position: relative;
-    box-sizing: border-box;
+    margin: 20px 0 15px;
+}
+
+input[type="submit"]:hover, input[type="submit"]:focus {
+    background-color: #0a70c0;
+    background-size: 1200%;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.21), 0 3px 1px -2px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.3);
+}
+
+input[type="submit"]:active {
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
 }

 form .message {
@@ -92,12 +191,4 @@ form .message.error {
    color: #b71c1c;
 }

-@media (max-width: 800px) {
-    body > :first-child {
-        margin-top: 1rem;
-    }
-
-    body > :last-child {
-        margin-bottom: 1rem;
-    }
-}
\ No newline at end of file
+/*# sourceMappingURL=login.css.map */
--- a/res/css/login.css.map
+++ b/res/css/login.css.map
+{
+  "version": 3,
+  "mappings": "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",
+  "sources": [
+    "_icons.sass",
+    "_font.sass",
+    "login.sass"
+  ],
+  "names": [],
+  "file": "login.css"
+}
\ No newline at end of file
--- a/res/css/login.sass
+++ b/res/css/login.sass
+@import "util"
+@import "icons"
+@import "font"
+
+*
+  padding: 0
+  margin: 0
+  box-sizing: border-box
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+body
+  background: #F2F2F2
+  font-family: 'Roboto', sans-serif
+  font-size: 81.25%
+  display: flex
+  flex-direction: column
+  min-height: 100vh
+  position: relative
+  padding-right: .9375rem
+  padding-left: .9375rem
+
+  .header, .footer
+    flex-grow: 1
+
+*:focus
+  outline: none
+
+::-moz-focus-inner
+  border: 0
+
+form
+  background: #fff
+  max-width: 390px
+  padding: 20px 48px
+  margin: 0 auto
+  color: #212121
+  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
+
+  @media(max-width: 320px)
+    padding: 8px 16px
+    margin: initial
+
+.header
+  display: flex
+  flex-direction: column
+
+  &:before
+    content: ""
+    flex-grow: 1
+
+h1
+  color: #555
+  font-size: 32px
+  font-weight: 300
+  margin: 5px 0 15px
+  line-height: 1.5
+  text-align: center
+
+h2
+  color: #555
+  font-size: 18px
+  font-weight: 400
+  margin: 5px 0 15px
+  line-height: 1.5
+  text-align: center
+
+input[type=text], input[type=password]
+  -moz-appearance: none
+  -webkit-appearance: none
+  appearance: none
+  height: 36px
+  padding: 0 8px
+  margin: 0
+  background: #fff
+  border: 1px solid #d9d9d9
+  border-top: 1px solid #c0c0c0
+  box-sizing: border-box
+  border-radius: 1px
+  font-size: 15px
+  color: #404040
+  width: 100%
+  display: block
+  margin-bottom: 10px
+  z-index: 1
+  position: relative
+
+input[type="submit"]
+  display: inline-block
+  position: relative
+  border: 0 none
+  white-space: nowrap
+  text-align: center
+  font: inherit
+  text-transform: uppercase
+  text-decoration: none
+  outline: 0 none
+  border-radius: 3px
+  cursor: pointer
+  padding: 8px 16px
+  font-weight: 500
+  line-height: 20px
+  font-size: 14px
+  user-select: none
+  -moz-user-select: none
+  -webkit-user-select: none
+  -blink-user-select: none
+  background-repeat: no-repeat
+  background-position: center center
+  background-size: 0
+  min-width: 88px
+  transition: background-size 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), background-color 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), color 500ms cubic-bezier(0.98, 0.005, 0.79, 1.005), box-shadow 300ms
+  background-color: #0a70c0
+  background-image: radial-gradient(circle, #105a94 10%, rgba(0, 0, 0, 0) 10.001%, rgba(0, 0, 0, 0))
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)
+  color: #fff
+  width: 100%
+  margin: 20px 0 15px
+
+  &:hover, &:focus
+    background-color: #0a70c0
+    background-size: 1200%
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.21), 0 3px 1px -2px rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.3)
+
+  &:active
+    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2)
+
+form .message
+  margin: 0 0 1rem 0
+  font-size: 14px
+
+form .message.error
+  color: #b71c1c
\ No newline at end of file
--- a/templates/login.phtml
+++ b/templates/login.phtml
@@ -6,9 +6,9 @@

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="theme-color" content="#fff"/>
-    <meta name="msapplication-navbutton-color" content="#fff">
-    <meta name="apple-mobile-web-app-status-bar-style" content="#fff">
+    <meta name="theme-color" content="#0a70c0"/>
+    <meta name="msapplication-navbutton-color" content="#0a70c0">
+    <meta name="apple-mobile-web-app-status-bar-style" content="#0a70c0">

    <link rel="icon" type="image/png" href="favicon.png">

@@ -16,11 +16,12 @@
    <link rel="stylesheet" href="res/css/icons.css">
 </head>
 <body>
-
+<div class="header">
    <h1><?php $t('title'); ?></h1>
-<h2><?php $t('login.description'); ?></h2>
+</div>

 <form method="post" action="login.php?action=login">
+    <h2><?php $t('login.description'); ?></h2>
    <?php if ($vars['message']): ?>
        <p class="message <?php echo $vars['type']; ?>"><?php echo $t($vars['message']); ?></p>
    <?php endif; ?>
@@ -29,5 +30,6 @@
    <input type="submit" value="<?php $t('login.submit'); ?>">
 </form>

+<div class="footer"></div>
 </body>
 </html>
--- a/templates/search.phtml
+++ b/templates/search.phtml
@@ -6,9 +6,9 @@

    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="theme-color" content="#0271B3"/>
-    <meta name="msapplication-navbutton-color" content="#0271B3">
-    <meta name="apple-mobile-web-app-status-bar-style" content="#0271B3">
+    <meta name="theme-color" content="#0a70c0"/>
+    <meta name="msapplication-navbutton-color" content="#0a70c0">
+    <meta name="apple-mobile-web-app-status-bar-style" content="#0a70c0">

    <link rel="icon" type="image/png" href="favicon.png">


--- a/translations/de.json
+++ b/translations/de.json
@@ -15,7 +15,6 @@
    "error_unavailable": "Keine vorherigen Suchbegriffe vorhanden"
  },
  "login": {
-    "description": "Sie müssen sich einloggen, um diese Seite zu nutzen",
    "username": "Benutzername",
    "password": "Passwort",
    "submit": "Anmelden",

--- a/translations/en.json
+++ b/translations/en.json
@@ -15,10 +15,9 @@
    "error_unavailable": "No search history available"
  },
  "login": {
-    "description": "You have to login to access this page",
    "username": "Username",
    "password": "Password",
-    "submit": "Login",
+    "submit": "Log In",
    "message": {
      "success_logout": "You have successfully logged out.",
      "error_invalid": "Invalid username/password combination.",