diff options
-rw-r--r-- | lib/pleroma/web/templates/layout/app.html.eex | 219 | ||||
-rw-r--r-- | priv/static/instance/static.css | 216 |
2 files changed, 217 insertions, 218 deletions
diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex index 5836ec1e0..7bc81ddaa 100644 --- a/lib/pleroma/web/templates/layout/app.html.eex +++ b/lib/pleroma/web/templates/layout/app.html.eex @@ -6,224 +6,7 @@ <title> <%= Pleroma.Config.get([:instance, :name]) %> </title> - <style> - body { - background-color: #121a24; - font-family: sans-serif; - color: #b9b9ba; - text-align: center; - } - - .container { - 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: #b9b9ba; - font-weight: normal; - font-size: 18px; - margin-bottom: 20px; - } - - a { - color: color: #d8a070; - text-decoration: none; - } - - form { - width: 100%; - } - - .input { - text-align: left; - color: #89898a; - display: flex; - flex-direction: column; - } - - input { - box-sizing: content-box; - padding: 10px; - margin-top: 5px; - margin-bottom: 10px; - background-color: #121a24; - color: #b9b9ba; - border: 0; - transition-property: border-bottom; - transition-duration: 0.35s; - border-bottom: 2px solid #2a384a; - font-size: 14px; - } - - .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; - } - - .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%; - background-color: #1c2a3a; - color: #b9b9ba; - border-radius: 4px; - border: none; - padding: 10px; - margin-top: 20px; - margin-bottom: 20px; - text-transform: uppercase; - 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%; - background-color: #931014; - border: 1px solid #a06060; - border-radius: 4px; - padding: 10px; - margin-top: 20px; - font-weight: 500; - font-size: 16px; - } - - .alert-info { - box-sizing: border-box; - width: 100%; - border-radius: 4px; - 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> + <link rel="stylesheet" href="/instance/static.css"> </head> <body> <div class="container"> diff --git a/priv/static/instance/static.css b/priv/static/instance/static.css new file mode 100644 index 000000000..8e2e071ef --- /dev/null +++ b/priv/static/instance/static.css @@ -0,0 +1,216 @@ +body { + background-color: #121a24; + font-family: sans-serif; + color: #b9b9ba; + text-align: center; +} + +.container { + 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: #b9b9ba; + font-weight: normal; + font-size: 18px; + margin-bottom: 20px; +} + +a { + color: color: #d8a070; + text-decoration: none; +} + +form { + width: 100%; +} + +.input { + text-align: left; + color: #89898a; + display: flex; + flex-direction: column; +} + +input { + box-sizing: content-box; + padding: 10px; + margin-top: 5px; + margin-bottom: 10px; + background-color: #121a24; + color: #b9b9ba; + border: 0; + transition-property: border-bottom; + transition-duration: 0.35s; + border-bottom: 2px solid #2a384a; + font-size: 14px; +} + +.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; +} + +.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%; + background-color: #1c2a3a; + color: #b9b9ba; + border-radius: 4px; + border: none; + padding: 10px; + margin-top: 20px; + margin-bottom: 20px; + text-transform: uppercase; + 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%; + background-color: #931014; + border: 1px solid #a06060; + border-radius: 4px; + padding: 10px; + margin-top: 20px; + font-weight: 500; + font-size: 16px; +} + +.alert-info { + box-sizing: border-box; + width: 100%; + border-radius: 4px; + 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; +} |