git.squeep.com Git - akkoma/blob - lib/pleroma/web/templates/layout/app.html.eex

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8" />
   5     <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui" />
   6     <title>
   7     <%= Application.get_env(:pleroma, :instance)[:name] %>
   8     </title>
   9     <style>
  10       body {
  11         background-color: #121a24;
  12         font-family: sans-serif;
  13         color: #b9b9ba;
  14         text-align: center;
  15       }
  16
  17       .container {
  18         max-width: 420px;
  19         padding: 20px;
  20         background-color: #182230;
  21         border-radius: 4px;
  22         margin: auto;
  23         margin-top: 10vh;
  24         box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.5);
  25       }
  26
  27       h1 {
  28         margin: 0;
  29         font-size: 24px;
  30       }
  31
  32       h2 {
  33         color: #b9b9ba;
  34         font-weight: normal;
  35         font-size: 18px;
  36         margin-bottom: 20px;
  37       }
  38
  39       form {
  40         width: 100%;
  41       }
  42
  43       .input {
  44         text-align: left;
  45         color: #89898a;
  46         display: flex;
  47         flex-direction: column;
  48       }
  49
  50       input {
  51         box-sizing: content-box;
  52         padding: 10px;
  53         margin-top: 5px;
  54         margin-bottom: 10px;
  55         background-color: #121a24;
  56         color: #b9b9ba;
  57         border: 0;
  58         transition-property: border-bottom;
  59         transition-duration: 0.35s;
  60         border-bottom: 2px solid #2a384a;
  61         font-size: 14px;
  62       }
  63
  64       .scopes-input {
  65         display: flex;
  66         margin-top: 1em;
  67         text-align: left;
  68         color: #89898a;
  69       }
  70
  71       .scopes-input label:first-child {
  72         flex-basis: 40%;
  73       }
  74
  75       .scopes {
  76         display: flex;
  77         flex-wrap: wrap;
  78         text-align: left;
  79         color: #b9b9ba;
  80       }
  81
  82       .scope {
  83         flex-basis: 100%;
  84         display: flex;
  85         height: 2em;
  86         align-items: center;
  87       }
  88
  89       [type="checkbox"] + label {
  90         margin: 0.5em;
  91       }
  92
  93       [type="checkbox"] {
  94         display: none;
  95       }
  96
  97       [type="checkbox"] + label:before {
  98         display: inline-block;
  99         color: white;
 100         background-color: #121a24;
 101         border: 4px solid #121a24;
 102         box-sizing: border-box;
 103         width: 1.2em;
 104         height: 1.2em;
 105         margin-right: 1.0em;
 106         content: "";
 107         transition-property: background-color;
 108         transition-duration: 0.35s;
 109         color: #121a24;
 110         margin-bottom: -0.2em;
 111         border-radius: 2px;
 112       }
 113
 114       [type="checkbox"]:checked + label:before {
 115         background-color: #d8a070;
 116       }
 117
 118       input:focus {
 119         outline: none;
 120         border-bottom: 2px solid #d8a070;
 121       }
 122
 123       button {
 124         box-sizing: border-box;
 125         width: 100%;
 126         background-color: #1c2a3a;
 127         color: #b9b9ba;
 128         border-radius: 4px;
 129         border: none;
 130         padding: 10px;
 131         margin-top: 30px;
 132         text-transform: uppercase;
 133         font-size: 16px;
 134         box-shadow: 0px 0px 2px 0px black,
 135           0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 136           0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 137       }
 138
 139       button:hover {
 140         cursor: pointer;
 141         box-shadow: 0px 0px 0px 1px #d8a070,
 142           0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 143           0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 144       }
 145
 146       .alert-danger {
 147         box-sizing: border-box;
 148         width: 100%;
 149         background-color: #931014;
 150         border-radius: 4px;
 151         border: none;
 152         padding: 10px;
 153         margin-top: 20px;
 154         font-weight: 500;
 155         font-size: 16px;
 156       }
 157
 158       .alert-info {
 159         box-sizing: border-box;
 160         width: 100%;
 161         border-radius: 4px;
 162         border: 1px solid #7d796a;
 163         padding: 10px;
 164         margin-top: 20px;
 165         font-weight: 500;
 166         font-size: 16px;
 167       }
 168
 169       @media all and (max-width: 440px) {
 170         .container {
 171           margin-top: 0
 172         }
 173
 174         .scopes-input {
 175           flex-direction: column;
 176         }
 177
 178         .scope {
 179           flex-basis: 50%;
 180         }
 181       }
 182       .form-row {
 183         display: flex;
 184       }
 185       .form-row > label {
 186         text-align: left;
 187         line-height: 47px;
 188         flex: 1;
 189       }
 190       .form-row > input {
 191         flex: 2;
 192       }
 193     </style>
 194   </head>
 195   <body>
 196     <div class="container">
 197       <h1><%= Application.get_env(:pleroma, :instance)[:name] %></h1>
 198       <%= render @view_module, @view_template, assigns %>
 199     </div>
 200   </body>
 201 </html>