[SETTINGS][TWIG][CSS] Settings WIP. Form polished, dropdowns need styling.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/base.css

@@ -115,6 +115,31 @@ a:hover {
     transition: var(--cubic-transition);
 }
 
+button,
+input[type=file]::file-selector-button {
+    font-family: var(--display-font);
+    font-size: var(--medium-size);
+    padding: .2em .4em;
+
+    border-radius: var(--unit-size);
+    border: 2px solid var(--bg3);
+
+    background-color: var(--translucent);
+    color: var(--white);
+    transition: var(--cubic-transition);
+}
+
+input[type=file]::file-selector-button:hover,
+button:hover {
+    border: 2px solid var(--white) !important;
+    background-color: var(--white) !important;
+    color: var(--bg1) !important;
+}
+
+button {
+    align-self: flex-end;
+}
+
 #instance:focus svg,
 #instance:hover svg {
     fill: var(--bg1);

public/assets/css/right/right.css

@@ -137,32 +137,6 @@
     flex: 1;
 }
 
-input[type=file]::file-selector-button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    padding: .2em .4em;
-
-    border-radius: var(--unit-size);
-    border: 2px solid var(--bg3);
-
-    background-color: var(--translucent);
-    color: var(--white);
-    transition: 0.4s;
-}
-
-#post_post:hover {
-    border: 2px solid var(--white);
-    background-color: var(--white);
-    color: var(--bg1);
-}
-
-input[type=file]::file-selector-button:hover,
-input[type=button]:hover {
-    border: 2px solid var(--white);
-    background-color: var(--white);
-    color: var(--bg1);
-}
-
 .create-notice details {
     font-family: var(--display-font);
     padding: var(--unit-size);

public/assets/css/security/security.css

@@ -54,13 +54,6 @@ input[type="email"] {
     width: 100%;
 }
 
-button {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    align-self: flex-end;
-    padding: var(--unit-size) var(--small-size);
-}
-
 fieldset div:last-child {
     text-align: end;
 }

public/assets/css/settings/settings.css

@@ -40,6 +40,8 @@
 .form #save {
     margin-top: var(--main-size);
 
+    display: flex;
+    flex-direction: column;
     font-size: var(--medium-size);
     border-radius: var(--unit-size);
     padding: var(--unit-size);
@@ -47,6 +49,40 @@
     background-color: var(--translucent);
 }
 
+.form #save div {
+    display: contents;
+}
+
+.form #save div label {
+    display: inline-block;
+    font-family: var(--display-font);
+}
+
+.form #save div input,
+.form #save div textarea {
+    display: inline-block;
+    position: relative;
+
+    color: var(--white);
+    font-size: var(--medium-size);
+    border-radius: var(--unit-size);
+    padding: var(--unit-size);
+    box-sizing: border-box;
+    background-color: var(--translucent);
+}
+
+.form #save div textarea {
+    resize: vertical;
+}
+
+.form #save div p {
+    font-style: italic;
+}
+
+.form #save div:last-of-type {
+    text-align: end;
+}
+
 .icon-details-open {
     fill: var(--white);
 }

templates/settings/account.html.twig

@@ -5,8 +5,8 @@
 {% block page_name %}Account{% endblock %}
 
 {% block form %}
-    <div class='form-single'>
+    <div class='form'>
-        <h1>Settings / Profile</h1>
+        <h1>Settings / Account</h1>
         {{ form(acc) }}
     </div>
 {% endblock form %}

templates/settings/notifications.html.twig

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block form %}
-    <div id='form-tabs'>
+    <div class='form'>
         <h1>Settings / Notifications </h1>
 
         <ul>