[UI] Fixing problem due to Firefox's autofill filter

public/assets/css/left/left.css

@@ -14,6 +14,7 @@
       left: 0;
       top: 0;
       transition: 0.3s ease;
+      z-index: 1;
 }
 
 .navbar a {

public/assets/css/left/left_mid.css

@@ -14,6 +14,7 @@
       left: -100%;
       top:0;
       transition: 0.3s ease;
+      z-index: 2147483647;
 }
 
 .navbar a {
@@ -35,7 +36,7 @@
 
 .icon-menu label {
       display: block;
-      cursor: pointer
+      cursor: pointer;
 }
 
 #toggle {
@@ -71,7 +72,6 @@
 .icon-avatar {
       order: 1;
       height: calc(5 * var(--unit-size));
-      weight: auto;
       width: 25%;
       margin-right: var(--small-size);
 }

public/assets/css/left/left_small.css

@@ -107,3 +107,7 @@ label {
 .stats span:last-child {
       margin-left: var(--small-size);
 }
+
+input {
+      filter: none;
+}

public/assets/css/login/login.css

@@ -58,5 +58,9 @@ input[type=password]
     font-weight: normal;
 }
 
+.active {
+    color: #F6F6F6 !important;
+    font-weight: 700;
+}
 
 

public/assets/css/login/login_mid.css

@@ -8,7 +8,7 @@
     margin-right: 0;
 }
 
-form {
+.content form {
     font-size: var(--medium-size);
     background-color: #00000050;
     padding: calc(2 * var(--unit-size)) calc(3 * var(--unit-size)) calc(3 * var(--unit-size));
@@ -18,21 +18,21 @@ form {
     margin-left: var(--side-margin);
     box-shadow: 0 0 60px -20px rgba(0, 0, 0, 0.75);
 }
-h1 {
+.content h1 {
     font-family: 'Montserrat', sans-serif;
     font-weight: 800;
     font-size: var(--main-size);
     margin-bottom: var(--medium-size);
 }
 
-label {
+.content label {
     font-family: 'Montserrat', sans-serif;
     font-weight: 700;
     width: 100%;
 }
 
-input[type=text],
-input[type=password]
+.pair input[type=text],
+.pair input[type=password]
 {
     margin-top: calc(var(--unit-size) * 0.5);
     background-color: rgba(0, 0, 0, 0.30);
@@ -58,5 +58,10 @@ input[type=password]
     font-weight: normal;
 }
 
-
-
+.active {
+    color: #F6F6F6 !important;
+    font-weight: 700;
+}
+input {
+    filter: none;
+}

public/assets/css/login/login_small.css

@@ -58,5 +58,8 @@ input[type=password]
     font-weight: normal;
 }
 
-
+.active {
+    color: #F6F6F6 !important;
+    font-weight: 700;
+}
 

public/assets/css/reset.css

@@ -15,6 +15,10 @@ time, mark, audio, video {
 	padding: 0;
 	border: 0;
 }
+html, body {
+	width: 100%;
+	height: auto;
+}
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;

templates/base.html.twig

@@ -50,7 +50,7 @@
                         </defs>
                   </svg>
             {% endblock %}
-
+      <div class="container">
             {% block header %}
                   <div id='header'>
                         <div id='top'>
@@ -73,5 +73,6 @@
             {% block nav %}{% endblock %}
             {% block body %}{% endblock %}
             {% block javascripts %}{% endblock %}
+      </div>
       </body>
 </html>

templates/left/left.html.twig

@@ -52,7 +52,7 @@
                 <label for="toggle" id='menu'></label>
             </div>
             <div class='navbar'>
-                <a href="{{ path('login') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'login' %}active{% endif %}'>Login</a>
+                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
                 <a href='#'>Register</a>
             </div>
         </div>

templates/security/login.html.twig

@@ -12,6 +12,7 @@
 {% block body %}
   <div class='content'>
     <form method="post">
+      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
       {% if error %}
         <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
       {% endif %}
@@ -21,9 +22,6 @@
           You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
         </div>
       {% endif %}
-
-
-        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
       <div class='pair'>
         <label for="inputNickname">Nickname</label>
         <input type="text" value="{{ last_username }}" name="nickname" id="inputNickname" class="form-control" required autofocus>