X-Git-Url: http://git.squeep.com/?a=blobdiff_plain;f=lib%2Fpleroma%2Fweb%2Ftemplates%2Flayout%2Fapp.html.eex;h=b3cf9ed1151a57cac52ee8d30ae76d39b31eedcb;hb=4f2e359687b8866a26130314315415a787678881;hp=db97ccac21445183448f066ea2f2e6229d361921;hpb=bc4f77b10bb4360ac00d1999b1d08fa55e1fa547;p=akkoma

diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex
index db97ccac2..b3cf9ed11 100644
--- a/lib/pleroma/web/templates/layout/app.html.eex
+++ b/lib/pleroma/web/templates/layout/app.html.eex
@@ -4,81 +4,164 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui" />
     <title>
-    <%= Application.get_env(:pleroma, :instance)[:name] %>
+    <%= Pleroma.Config.get([:instance, :name]) %>
     </title>
     <style>
       body {
-        background-color: #282c37;
+        background-color: #121a24;
         font-family: sans-serif;
-        color:white;
+        color: #b9b9ba;
         text-align: center;
       }
 
       .container {
-        margin: 50px auto;
-        max-width: 320px;
-        padding: 0;
-        padding: 40px 40px 40px 40px;
-        background-color: #313543;
+        max-width: 420px;
+        padding: 20px;
+        background-color: #182230;
         border-radius: 4px;
+        margin: auto;
+        margin-top: 10vh;
+        box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
       }
 
       h1 {
         margin: 0;
+        font-size: 24px;
       }
 
       h2 {
-        color: #9baec8;
+        color: #b9b9ba;
         font-weight: normal;
-        font-size: 20px;
-        margin-bottom: 40px;
+        font-size: 18px;
+        margin-bottom: 20px;
       }
 
       form {
         width: 100%;
       }
 
+      .input {
+        text-align: left;
+        color: #89898a;
+        display: flex;
+        flex-direction: column;
+      }
+
       input {
-        box-sizing: border-box;
-        width: 100%;
+        box-sizing: content-box;
         padding: 10px;
-        margin-top: 20px;
-        background-color: rgba(0,0,0,.1);
-        color: white;
+        margin-top: 5px;
+        margin-bottom: 10px;
+        background-color: #121a24;
+        color: #b9b9ba;
         border: 0;
-        border-bottom: 2px solid #9baec8;
+        transition-property: border-bottom;
+        transition-duration: 0.35s;
+        border-bottom: 2px solid #2a384a;
         font-size: 14px;
       }
 
-      input:focus {
-        border-bottom: 2px solid #4b8ed8;
+      .scopes-input {
+        display: flex;
+        flex-direction: column;
+        margin-top: 1em;
+        text-align: left;
+        color: #89898a;
+      }
+
+      .scopes-input label:first-child {
+        height: 2em;
+      }
+
+      .scopes {
+        display: flex;
+        flex-wrap: wrap;
+        text-align: left;
+        color: #b9b9ba;
       }
 
-      input[type="checkbox"] {
-        width: auto;
+      .scope {
+        display: flex;
+        flex-basis: 100%;
+        height: 2em;
+        align-items: center;
+      }
+
+      .scope:before {
+        color: #b9b9ba;
+        content: "✔\fe0e";
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+
+      [type="checkbox"] + label {
+        display: none;
+        cursor: pointer;
+        margin: 0.5em;
+      }
+
+      [type="checkbox"] {
+        display: none;
+      }
+
+      [type="checkbox"] + label:before {
+        cursor: pointer;
+        display: inline-block;
+        color: white;
+        background-color: #121a24;
+        border: 4px solid #121a24;
+        box-shadow: 0px 0px 1px 0 #d8a070;
+        box-sizing: border-box;
+        width: 1.2em;
+        height: 1.2em;
+        margin-right: 1.0em;
+        content: "";
+        transition-property: background-color;
+        transition-duration: 0.35s;
+        color: #121a24;
+        margin-bottom: -0.2em;
+        border-radius: 2px;
+      }
+
+      [type="checkbox"]:checked + label:before {
+        background-color: #d8a070;
+      }
+
+      input:focus {
+        outline: none;
+        border-bottom: 2px solid #d8a070;
       }
 
       button {
         box-sizing: border-box;
         width: 100%;
-        color: white;
-        background-color: #419bdd;
+        background-color: #1c2a3a;
+        color: #b9b9ba;
         border-radius: 4px;
         border: none;
         padding: 10px;
-        margin-top: 30px;
+        margin-top: 20px;
+        margin-bottom: 20px;
         text-transform: uppercase;
-        font-weight: 500;
         font-size: 16px;
+        box-shadow: 0px 0px 2px 0px black,
+          0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
+          0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+      }
+
+      button:hover {
+        cursor: pointer;
+        box-shadow: 0px 0px 0px 1px #d8a070,
+          0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
+          0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
       }
 
       .alert-danger {
         box-sizing: border-box;
         width: 100%;
-        color: #D8000C;
-        background-color: #FFD2D2;
+        background-color: #931014;
+        border: 1px solid #a06060;
         border-radius: 4px;
-        border: none;
         padding: 10px;
         margin-top: 20px;
         font-weight: 500;
@@ -88,20 +171,58 @@
       .alert-info {
         box-sizing: border-box;
         width: 100%;
-        color: #00529B;
-        background-color: #BDE5F8;
         border-radius: 4px;
-        border: none;
+        border: 1px solid #7d796a;
         padding: 10px;
         margin-top: 20px;
         font-weight: 500;
         font-size: 16px;
       }
+
+      @media all and (max-width: 440px) {
+        .container {
+          margin-top: 0
+        }
+
+        .scope {
+          flex-basis: 0%;
+        }
+
+        .scope:before {
+          content: "";
+          margin-left: 0em;
+          margin-right: 1em;
+        }
+
+        .scope:first-child:before {
+          margin-left: 1em;
+          content: "✔\fe0e";
+        }
+
+        .scope:after {
+          content: ",";
+        }
+
+        .scope:last-child:after {
+          content: "";
+        }
+      }
+      .form-row {
+        display: flex;
+      }
+      .form-row > label {
+        text-align: left;
+        line-height: 47px;
+        flex: 1;
+      }
+      .form-row > input {
+        flex: 2;
+      }
     </style>
   </head>
   <body>
     <div class="container">
-      <h1>Pleroma</h1>
+      <h1><%= Pleroma.Config.get([:instance, :name]) %></h1>
       <%= render @view_module, @view_template, assigns %>
     </div>
   </body>