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     <%= Pleroma.Config.get([: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       a {
  40         color: #d8a070;
  41         text-decoration: none;
  42       }
  43
  44       form {
  45         width: 100%;
  46       }
  47
  48       .input {
  49         text-align: left;
  50         color: #89898a;
  51         display: flex;
  52         flex-direction: column;
  53       }
  54
  55       input {
  56         box-sizing: content-box;
  57         padding: 10px;
  58         margin-top: 5px;
  59         margin-bottom: 10px;
  60         background-color: #121a24;
  61         color: #b9b9ba;
  62         border: 0;
  63         transition-property: border-bottom;
  64         transition-duration: 0.35s;
  65         border-bottom: 2px solid #2a384a;
  66         font-size: 14px;
  67       }
  68
  69       .scopes-input {
  70         display: flex;
  71         flex-direction: column;
  72         margin-top: 1em;
  73         text-align: left;
  74         color: #89898a;
  75       }
  76
  77       .scopes-input label:first-child {
  78         height: 2em;
  79       }
  80
  81       .scopes {
  82         display: flex;
  83         flex-wrap: wrap;
  84         text-align: left;
  85         color: #b9b9ba;
  86       }
  87
  88       .scope {
  89         display: flex;
  90         flex-basis: 100%;
  91         height: 2em;
  92         align-items: center;
  93       }
  94
  95       .scope:before {
  96         color: #b9b9ba;
  97         content: "✔\fe0e";
  98         margin-left: 1em;
  99         margin-right: 1em;
 100       }
 101
 102       [type="checkbox"] + label {
 103         display: none;
 104         cursor: pointer;
 105         margin: 0.5em;
 106       }
 107
 108       [type="checkbox"] {
 109         display: none;
 110       }
 111
 112       [type="checkbox"] + label:before {
 113         cursor: pointer;
 114         display: inline-block;
 115         color: white;
 116         background-color: #121a24;
 117         border: 4px solid #121a24;
 118         box-shadow: 0px 0px 1px 0 #d8a070;
 119         box-sizing: border-box;
 120         width: 1.2em;
 121         height: 1.2em;
 122         margin-right: 1.0em;
 123         content: "";
 124         transition-property: background-color;
 125         transition-duration: 0.35s;
 126         color: #121a24;
 127         margin-bottom: -0.2em;
 128         border-radius: 2px;
 129       }
 130
 131       [type="checkbox"]:checked + label:before {
 132         background-color: #d8a070;
 133       }
 134
 135       input:focus {
 136         outline: none;
 137         border-bottom: 2px solid #d8a070;
 138       }
 139
 140       button {
 141         box-sizing: border-box;
 142         width: 100%;
 143         background-color: #1c2a3a;
 144         color: #b9b9ba;
 145         border-radius: 4px;
 146         border: none;
 147         padding: 10px;
 148         margin-top: 20px;
 149         margin-bottom: 20px;
 150         text-transform: uppercase;
 151         font-size: 16px;
 152         box-shadow: 0px 0px 2px 0px black,
 153           0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 154           0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 155       }
 156
 157       button:hover {
 158         cursor: pointer;
 159         box-shadow: 0px 0px 0px 1px #d8a070,
 160           0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
 161           0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
 162       }
 163
 164       .alert-danger {
 165         box-sizing: border-box;
 166         width: 100%;
 167         background-color: #931014;
 168         border: 1px solid #a06060;
 169         border-radius: 4px;
 170         padding: 10px;
 171         margin-top: 20px;
 172         font-weight: 500;
 173         font-size: 16px;
 174       }
 175
 176       .alert-info {
 177         box-sizing: border-box;
 178         width: 100%;
 179         border-radius: 4px;
 180         border: 1px solid #7d796a;
 181         padding: 10px;
 182         margin-top: 20px;
 183         font-weight: 500;
 184         font-size: 16px;
 185       }
 186
 187       @media all and (max-width: 440px) {
 188         .container {
 189           margin-top: 0
 190         }
 191
 192         .scope {
 193           flex-basis: 0%;
 194         }
 195
 196         .scope:before {
 197           content: "";
 198           margin-left: 0em;
 199           margin-right: 1em;
 200         }
 201
 202         .scope:first-child:before {
 203           margin-left: 1em;
 204           content: "✔\fe0e";
 205         }
 206
 207         .scope:after {
 208           content: ",";
 209         }
 210
 211         .scope:last-child:after {
 212           content: "";
 213         }
 214       }
 215       .form-row {
 216         display: flex;
 217       }
 218       .form-row > label {
 219         text-align: left;
 220         line-height: 47px;
 221         flex: 1;
 222       }
 223       .form-row > input {
 224         flex: 2;
 225       }
 226     </style>
 227   </head>
 228   <body>
 229     <div class="container">
 230       <h1><%= Pleroma.Config.get([:instance, :name]) %></h1>
 231       <%= @inner_content %>
 232     </div>
 233   </body>
 234 </html>