[Security][Right] login

and register padding fix. Select boxes styling done.

public/assets/css/base.css

@@ -55,7 +55,7 @@ hr {
     all: unset;
     display: block;
     height: 2px;
-    background: var(--translucent);
+    background: var(--bg2);
 }
 
 summary:focus {
@@ -338,6 +338,10 @@ summary:focus {
     font-size: var(--small-size);
 }
 
+.section-form-scope {
+    margin-left: 5px;
+}
+
 .section-form-options {
     display: block !important;
     margin-bottom: var(--unit-size);
@@ -360,6 +364,11 @@ summary:focus {
 }
 
 /* BUTTONS AND INPUT SHENANIGANS */
+label {
+    font-family: var(--display-font);
+    font-weight: bold;
+}
+
 button {
     font-size: var(--small-size) !important;
     font-family: var(--display-font) !important;
@@ -407,6 +416,7 @@ input[type=radio]:checked {
 input[type=checkbox] {
     background-color: var(--bg2) !important;
     background-size: cover;
+    margin-left: 5px;
 
     -webkit-mask-image: url("../icons/check-off.svg") !important;
     -o-mask-image: url("../icons/check-off.svg") !important;
@@ -463,6 +473,20 @@ input[type=file]:hover {
     color: var(--white) !important;
 }
 
+select {
+    font-family: var(--display-font) !important;
+    font-size: var(--small-size);
+    font-weight: normal !important;
+    background: linear-gradient(180deg, var(--bg2), transparent) !important;
+    color: var(--white);
+    border: 2px solid var(--bg2);
+    border-radius: var(--unit-size);
+}
+select:hover,
+select:focus {
+    border-color: var(--bg3);
+}
+
 /* MEDIA QUERIES */
 /* sidepanels need to be shown by default on desktop, hidden on mobile */
 .panel .panel-content {
@@ -482,10 +506,6 @@ input[type=file]:hover {
 
     padding: var(--unit-size);
 }
-.panel label {
-    font-family: var(--display-font);
-    font-weight: bold;
-}
 
 @media (min-width: 1200px) {
     #panel-left-icon,

public/assets/css/reset.css

@@ -187,10 +187,7 @@ input[type=radio] {
 /* file selector */
 input[type=file] {
     all: unset;
-
     display: block !important;
-    width: 100%;
-
     border-radius: var(--unit-size);
 }
 

templates/security/login.html.twig

@@ -10,7 +10,7 @@
 {% block body %}
     <div class='content'>
         <section class="section-widget">
-            <form class="section-widget-form" method="post">
+            <form class="section-form" method="post">
                 <fieldset>
                     <legend class="section-form-legend"><h1>{{ "Login" | trans }}</h1></legend>
 

templates/security/register.html.twig

@@ -9,9 +9,10 @@
 
 {% block body %}
     <div class='content'>
-        <section class="section-widget">
+        <div class="section-container">
-            {{ form_start(registration_form) }}
+            <section class="section-widget">
-                <fieldset class="section-widget-form">
+                {{ form_start(registration_form) }}
+                <fieldset class="section-form">
                     <legend class="section-form-legend">
                         <h1>{{ "Register a new account" | trans }}</h1>
                     </legend>
@@ -25,8 +26,10 @@
                     {{ form_row(registration_form.password) }}
                     {{ form_row(registration_form.register) }}
                 </fieldset>
-            {{ form_end(registration_form) }}
+                {{ form_end(registration_form) }}
-        </section>
+            </section>
+        </div>
+
     </div>
 {% endblock body %}
 

templates/sidepanel/right/right.html.twig

@@ -20,9 +20,7 @@
                 <div class="section-form">
                     {{ form_start(post_form) }}
 
-                    <span class="section-form-target">
+                    {{ form_row(post_form.to, {'attr': {'class': 'section-form-scope'}}) }}
-                    {{ form_label(post_form.to) }}{{ form_widget(post_form.to) }}
-                </span>
 
                     {{ form_row(post_form.visibility, {'attr': {'class': 'section-form-scope'}}) }}