[CSS] Input file elements polish. It should resize properly and provide feedback when selected (not a thing in Firefox ESR yet).

public/assets/css/base.css

@@ -46,6 +46,8 @@
 }
 
 #header {
+    z-index: 1;
+
     font-size: var(--main-size);
     display: flex;
     justify-content: space-between;
@@ -205,7 +207,6 @@
 
     .panel aside {
         display: none;
-        cursor: default;
     }
 
     .panel[open] {

public/assets/css/reset.css

@@ -114,7 +114,8 @@ button,
 [type=reset],
 [type=submit] {
     -webkit-appearance: button;
-    padding: 1px 6px;
+    padding: 0.1em 0.5em;
+    float: right;
 }
 
 input {
@@ -127,7 +128,7 @@ textarea {
 }
 
 fieldset {
-    border: 1px solid currentColor;
+    border: unset;
     margin: 0 2px;
 }
 
@@ -151,6 +152,10 @@ textarea {
     overflow: auto;
     vertical-align: top;
 }
+textarea:hover,
+textarea:focus {
+    border: solid 2px var(--bg3) !important;
+}
 
 [type=search] {
     -webkit-appearance: textfield;
@@ -269,6 +274,7 @@ dialog:not([open]) {
 }
 
 summary {
+    cursor: default !important;
     display: list-item;
 }
 
@@ -377,6 +383,10 @@ figcaption a:link {
     color: var(--white);
 }
 
+input[type=file] {
+    max-width: 100%;
+}
+
 button,
 input[type=file]::file-selector-button {
     font-family: var(--display-font) ;
@@ -405,23 +415,30 @@ input[type=file]::-webkit-file-upload-button {
     transition: var(--cubic-transition);
 }
 button:hover,
-input[type=file]::file-selector-button:hover
+button:focus,
-{
+input[type=file]:hover,
-    border: 2px solid var(--white) !important;
+input[type=file]:focus,
-    background-color: var(--white) !important;
+input[type=file]:hover::file-selector-button,
-    color: var(--bg2) !important;
+input[type=file]:focus::file-selector-button {
+    border-radius: var(--unit-size);
+    border: 2px solid var(--white);
+    background-color: var(--white);
+    color: var(--bg2);
 }
 input[type=file]::-webkit-file-upload-button:hover,
-input[type=file]::-ms-browse:hover {
+input[type=file]::-ms-browse:hover,
+input[type=file]::-webkit-file-upload-button:focus,
+input[type=file]::-ms-browse:focus {
     border: 2px solid var(--white);
     background-color: var(--white);
     color: var(--bg2);
 }
 
 button {
-    align-self: flex-end;
+    align-self: end;
 }
 
+input[type=file],
 input[type="checkbox"],
 input[type="radio"] {
     cursor: pointer;

public/assets/css/right/right.css

@@ -21,7 +21,6 @@
     flex-direction: column;
     border-radius: var(--unit-size);
     padding: var(--unit-size);
-    box-sizing: border-box;
 
     background-color: var(--translucent);
     font-family: var(--display-font);
@@ -70,7 +69,7 @@
 }
 
 #post_visibility input[type="radio"] {
-    margin-right: 0.1em;
+    margin-right: 2px;
 }
 
 #post_visibility label {
@@ -85,9 +84,7 @@
 
 .notice-options {
     margin-top: var(--unit-size);
-    display: flex;
+    display: inline-block;
-    flex-wrap: wrap;
-    box-sizing: border-box;
 
     font-family: var(--display-font);
     width: 100%;
@@ -112,33 +109,11 @@
     font-family: var(--main-font);
     font-size: var(--medium-size);
     color: var(--white);
-    box-sizing: border-box;
-}
-
-
-#post_attachments,
-#post_post {
-    cursor: pointer;
-}
-
-#post_attachments {
-    margin-bottom: var(--unit-size);
-}
-
-#post_post {
-    font-family: var(--display-font);
-    font-size: var(--medium-size);
-    padding: .2em .4em;
-
-    border-radius: var(--unit-size);
-    border: 2px solid var(--bg2);
-
-    background-color: var(--translucent);
-    color: var(--white);
-    transition: 0.4s;
-
 }
 
 .attachments {
-    flex: 1;
+    margin-bottom: var(--unit-size);
+}
+.attachments > * {
+    cursor: pointer !important;
 }

public/assets/css/settings/settings.css

@@ -107,6 +107,7 @@
 
 .section-title-settings summary:focus,
 .section-title-settings summary:hover {
+    cursor: pointer !important;
     border-radius: var(--unit-size);
     background: var(--white);
     color: var(--bg1);

templates/sidepanel/right/right.html.twig

@@ -53,7 +53,6 @@
                                 </label>
                             </div>
 
-                            <br>
                             {{ form_row(post_form.post) }}
                         </div>
                     </span>