Merge branch 'fix/frontend-cli-docs' into 'develop'
[akkoma] / 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>