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