diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 1f8f32b4a5..148dfd965a 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -19,6 +19,7 @@ --bg1: #383E51; --bg2: #434A60; --bg3: #5C6684; + --translucent: #00000033; --white: #EEDFD4; --accent-blue: #8E8DBE; @@ -251,7 +252,7 @@ html { .note-attachments > div { margin: var(--small-size) 0 0 0; border-radius: var(--unit-size); - background-color: #00000033; + background-color: var(--translucent); } .note-attachments > div figure { diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 9ad691c60e..6e105e0681 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -30,6 +30,7 @@ } .profile-nav nav { + margin-bottom: var(--main-size); display: flex; flex-direction: column; } @@ -60,7 +61,6 @@ /* TIMELINE NAVIGATION / PLUGINS */ .timeline-nav, .timeline-nav h1 { - margin-top: var(--main-size); display: flex; flex-direction: column; } diff --git a/public/assets/css/security/security.css b/public/assets/css/security/security.css index 35937d4bac..64ac724c0e 100644 --- a/public/assets/css/security/security.css +++ b/public/assets/css/security/security.css @@ -1,81 +1,66 @@ -.content { - display: flex; - flex-wrap: wrap; - margin-top: calc(4 * var(--main-size)); - justify-content: center; - align-items: center; - margin-left: 1%; - margin-right: 1%; - margin-bottom: 1%; +form { + width: 50%; + margin-left: auto; + margin-right: auto; + + padding: var(--main-size); + background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==); + background-blend-mode: multiply; + border-radius: var(--unit-size); } -form { - font-size: var(--medium-size); - background-color: var(--bg2); - padding: calc(2 * var(--unit-size)); - border-radius: var(--unit-size); - border: solid 2px var(--accent-low); +fieldset { + display: flex; + flex-direction: column; + + font-family: var(--display-font); + font-size: var(--main-size); +} + +fieldset legend { + margin-bottom: var(--main-size); +} + +br { + margin-bottom: var(--unit-size); } label { - font-family: 'Montserrat', sans-serif; - font-weight: 700; + font-family: var(--display-font); + font-size: var(--medium-size); +} + +input[type="text"]:hover, +input[type="password"]:hover, +input[type="email"]:hover, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="email"]:focus { + background: var(--white) !important; + color: var(--bg1) !important; + transition: all 0.4s ease; +} + +input[type="text"], +input[type="password"], +input[type="email"] { + all: unset; + background: var(--translucent); + padding: var(--unit-size) var(--small-size); + box-sizing: border-box; + border-radius: var(--unit-size); + font-size: var(--medium-size); width: 100%; } button { - margin-top: var(--unit-size); + font-family: var(--display-font); + font-size: var(--medium-size); + align-self: flex-end; + padding: var(--unit-size) var(--small-size); } -input[type=text], -input[type=password], -input[type=email] { - margin-top: calc(var(--unit-size) * 0.5); - background-color: var(--bg1); - color: var(--fg); - border-style: none; - padding: calc(var(--unit-size) * 0.5); - border-radius: calc(var(--unit-size) * 0.5); - font-size: var(--unit-size); - margin-bottom: var(--unit-size); - width: calc(100% - var(--unit-size)); -} - -.active { - color: var(--fg) !important; - font-weight: 700; -} - -input { - filter: none; -} - -form input[type="checkbox"] { - position: unset !important; -} - -form button[type=submit] { - background: var(--bg1); - padding: 0.3em 1em; - color: var(--fg); - border-style: solid; - border-color: var(--accent); - border-radius: var(--unit-size); - border-width: 2px; - font-family: 'Montserrat', sans-serif; - font-weight: 700; -} - -form button[type=submit]:focus, -form button[type=submit]:hover { - border-radius: var(--unit-size); - box-shadow: 0 0 8px var(--accent); -} - -#login-notes { - margin: 0; -} - -#login-main { - border: 0; -} +fieldset div:last-child { + text-align: end; +} \ No newline at end of file diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig index 4fed48006b..6c095e34ef 100644 --- a/templates/security/login.html.twig +++ b/templates/security/login.html.twig @@ -10,35 +10,47 @@ {% block body %}
- {% if error %} -
{{ error.messageKey|trans(error.messageData, 'security') }}
- {% endif %} +
+ Login - {% if app.user %} -
- You are logged in as {{ app.user.username }}, Logout -
- {% endif %} -
+ {% if error %} +
{{ error.messageKey|trans(error.messageData, 'security') }}
+ {% endif %} + +

+ {% if app.user %} +

+ You are logged in as {{ app.user.username }}. +
+ +

+ {% else %} +
- - -
+ {% endif %} +

- +

+ +
+ +

-
- -
+ - +

+ + +

+ + +
{% endblock body %} diff --git a/templates/security/register.html.twig b/templates/security/register.html.twig index 4ad69735d6..0a396afae3 100644 --- a/templates/security/register.html.twig +++ b/templates/security/register.html.twig @@ -13,9 +13,15 @@ {% endfor %} -
- {{ form(registration_form) }} -
+ {{ form_start(registration_form) }} +
+ Register a new account + {{ form_row(registration_form.nickname) }}

+ {{ form_row(registration_form.email) }}

+ {{ form_row(registration_form.password) }}

+ {{ form_row(registration_form.register) }} +
+ {{ form_end(registration_form) }} {% endblock body %} diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index f10e38cdd3..86d7107435 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -42,40 +42,39 @@ {% else %} -
- -
+ {% endif %}
-

+

-
+
- +