feat: Filter popup styled.

refactor: Default Popup styling declarated (earlier it was only for login / logout popup).
feat: Extra css class for login popup (JS).

bin/css/products.css

@@ -59,7 +59,6 @@
 }
 
 .quiqqer-products-category-freetextSearch input {
-    background: #fafafa;
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
 }
@@ -82,6 +81,44 @@
     padding: 0 10px;
 }
 
+/*****************/
+/* Filter mobile */
+.qui-window-popup .quiqqer-products-productList-filterMobile-content header {
+    border-bottom: none;
+    clear: both;
+    display: block;
+    font-size: 1.5rem;
+    font-weight: inherit;
+    line-height: inherit;
+    margin: 20px 0 10px;
+    padding-bottom: 0;
+}
+
+.qui-window-popup .quiqqer-products-productList-filterMobile-content header:first-child {
+    margin-top: 0;
+}
+
+.qui-window-popup .quiqqer-products-productList-filterMobile-content header h2 {
+    text-align: left;
+    font-size: inherit;
+    margin-bottom: 0;
+}
+
+.qui-window-popup .quiqqer-products-productList-filterMobile-content header h2:after {
+    display: none;
+}
+
+.qui-window-popup .qui-window-popup-buttons.box button[name="cancel"]{
+    color: #6c757d;
+    background: none;
+    border-color: #6c757d;
+}
+
+.qui-window-popup .qui-window-popup-buttons.box button[name="cancel"]:hover {
+    color: #fff;
+    background: #6c757d;
+}
+
 /******************/
 /* Header & title */
 /******************/
@@ -554,21 +591,21 @@
     }
 
     .quiqqer-productList-product-list-text {
-        grid-row: 1 / 2;
         grid-column: 1 / 2;
+        grid-row: 1 / 2;
     }
 
     .quiqqer-productList-product-list .quiqqer-productList-product-list-artno {
-        grid-row: 2 / 3;
         grid-column: 1 / 2;
+        grid-row: 2 / 3;
         padding: 5px 0;
     }
 
     .quiqqer-productList-product-list .quiqqer-productList-product-list-price {
         grid-column: 1 / 2;
         grid-row: 3 / 4;
-        text-align: left;
         padding: 0;
+        text-align: left;
     }
 
     .quiqqer-productList-product-list .quiqqer-productList-product-list-buttons {

bin/css/style.css

@@ -662,17 +662,55 @@ small {
     width: 30px;
 }
 
+
+/*********/
+/* Popup */
+/*********/
+.qui-window-popup-title-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    color: inherit;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.qui-window-popup-buttons.box {
+    background: none;
+    height: auto !important;
+    padding: 20px 0;
+}
+
+.qui-window-popup-buttons.box button {
+    margin: 0 15px;
+}
+
+.qui-window-popup-buttons:after {
+    display: none;
+}
+
+@media screen and (max-width: 767px) {
+    .qui-window-popup-buttons.box button {
+        margin: 10px 20px;
+        display: block !important;
+        width: calc(100% - 40px);
+    }
+}
+
 /** Login / logout popup
  ===================================== */
 /* login */
 /* show close button */
-.qui-window-popup-title {
+.cologne-logout-dialog .qui-window-popup-title,
+.cologne-login-dialog .qui-window-popup-title {
     background: none !important;
     display: block !important;
     padding: 0 !important;
 }
 
-.qui-window-popup-title-close {
+.cologne-logout-dialog .qui-window-popup-title-close,
+.cologne-login-dialog  .qui-window-popup-title-close {
     align-items: center;
     border-radius: 0;
     color: inherit;
@@ -767,20 +805,6 @@ input[type="password"]:focus {
     margin: 0 auto 30px !important;
 }
 
-.cologne-logout-dialog .qui-window-popup-buttons {
-    background: none !important;
-    height: auto !important;
-    padding: 20px 0 !important;
-}
-
-.cologne-logout-dialog .qui-window-popup-buttons button {
-    margin: 0 15px !important;
-}
-
-.cologne-logout-dialog .qui-window-popup-buttons:after {
-    display: none;
-}
-
 /** Product Children Slider (horizontal)
  ===================================== */
 ul.quiqqer-bricks-children-slider-container-slide {

bin/javascript/init.js

@@ -317,6 +317,7 @@ function createLoginWindow (Logo, QUILocale) {
         'controls/users/LoginWindow'
     ], function (LoginWindow) {
         new LoginWindow({
+            class       : 'cologne-login-dialog',
             title       : false,
             maxHeight   : 500,
             maxWidth    : 400,

template/topBar.html

@@ -10,7 +10,7 @@
         {locale group="quiqqer/template-cologne" var="template.topbar.content.left"}
     </div>
 
-    <div class="topbar-right hide-on-mobile">
+    <div class="topbar-right">
         <span class="cologne-header-control-user">
             {if $User->getId()}
                 {$Avatar->create()}