face background color

marktplatz/templates/marktplatz/product_overview.html

@@ -116,7 +116,6 @@ $(document).ready(function(){
 
 
 <style media="screen">
-
   .card-columns .mab-card {
     width: 97%;
     height: 95%;
@@ -160,13 +159,13 @@ $(document).ready(function(){
 
   .mab-product-button-text {
     color: #EA4814;
-  	font-size: initial;
-  	font-weight: bold;
-  	text-align: center;
-  	top: 20%;
-  	/* left: 50%; */
-  	/* transform: translate(-50%, -50%); */
-  	position: inherit;
+    font-size: initial;
+    font-weight: bold;
+    text-align: center;
+    top: 20%;
+    /* left: 50%; */
+    /* transform: translate(-50%, -50%); */
+    position: inherit;
   }
 
 
@@ -233,59 +232,62 @@ $(document).ready(function(){
   .flipcard {
     position: relative;
     transform-style: preserve-3d;
-/* transform-origin: center right; */
+    /* transform-origin: center right; */
     transition: transform 1s;
   }
 
   .flipcard.is-flipped {
-     /* transform: translateX(-100%) rotateY(-180deg);  */
+    /* transform: translateX(-100%) rotateY(-180deg);  */
     transform: rotateY(180deg);
   }
 
   .mab-card-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  /* overflow: auto; */
-  overflow: hidden;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    /* overflow: auto; */
+    overflow: hidden;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
   }
 
   .mab-card-face--front {
-  position: relative;
-  background-color: #FFF;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+    position: relative;
+    background-color: #FFF;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
 
   }
 
+  .card-columns .mab-card-face--front .mab-card {
+    background-color: #fafafa;
+  }
+
   .mab-card-face--front .mab-card,
   .mab-card-face--back .mab-card,
   .mab-card-face--front .mab-card div,
   .mab-card-face--back .mab-card div,
   .mab-card-face--front .mab-card a,
-  .mab-card-face--back .mab-card a
-   {
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
+  .mab-card-face--back .mab-card a {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
 
   }
 
-.toogle-overflow {
+  .toogle-overflow {
 
-  overflow: auto;
-}
+    overflow: auto;
+  }
 
-.mab-card-face--back {
-	background: #FFF;
-	transform: rotateY(180deg);
-	top: 0;
-	position: absolute;
-	left: 0;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-}
+  .mab-card-face--back {
+    background: #FFF;
+    transform: rotateY(180deg);
+    top: 0;
+    position: absolute;
+    left: 0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+  }
 
   .card {
     position: relative;
@@ -318,7 +320,7 @@ $(document).ready(function(){
 
 
   <button class="navbar-toggler border-thin mybtn rounded-0 tag navbar-expand-sm " type="button" data-toggle="collapse" data-target="#tags" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle tags" style="font-size: 15px">
-    <span class="mybtn"></span> Show All Tags ⋁
+    <span class="mybtn"></span> Alle Tags anzeigen ⋁
   </button>
 
 
@@ -326,7 +328,7 @@ $(document).ready(function(){
   <div class="row border-dark collapse navbar-collapse tag-line" id="tags">
 
     <div class="container-fluid">
-      <button  class="show-all border-thin mybtn " style="margin-bottom: 2px; ">#Show All</button>
+      <button  class="show-all border-thin mybtn " style="margin-bottom: 2px; ">#Alle anzeigen</button>
 
       {% for elem in frei_list %}
       <button id='{{elem.0}}' data-toggler='{{elem.0}}' class="border-thin mybtn btn-toggle elem.0" style="margin-bottom: 2px; ">#{{elem.1}}</button>
@@ -384,7 +386,7 @@ $(document).ready(function(){
 <div id="how" style="margin-top: 5px;text-align: center;vertical-align: middle; max-height: 40px;" class="container-fluid">
 
   <p style="color: black"> There are no Products matching your selection, as you have selected multiple tags.
-    Click <nobr><button class="show-all border-thin mybtn" style="margin-bottom: 2px; margin-top: 15px">#Show All</button></nobr> to deselect all tags.
+    Click <nobr><button class="show-all border-thin mybtn" style="margin-bottom: 2px; margin-top: 15px">#Alle anzeigen</button></nobr> to deselect all tags.
   </p>
 </div>
 
@@ -435,6 +437,7 @@ $(document).ready(function(){
             <button id='product_{{product.pk}}_{{product.status}}' data-toggler='{{product.status}}' class="border-thin mybtn btn-toggle {{product.status}}" style="">#{{product.get_status_display}}</button>
             <button id='product_{{product.pk}}_{{product.ort}}' data-toggler='{{product.ort}}' class="border-thin mybtn btn-toggle {{product.ort}}" style="">#{{product.get_ort_display}}</button>
             <button id='product_{{product.pk}}_{{product.altneu}}' data-toggler='{{product.altneu}}' class="border-thin mybtn btn-toggle {{product.altneu}}" style="">#{{product.get_altneu_display}}</button>
+            <button  class="show-all border-thin mybtn " style="margin-bottom: 2px; ">#Alle anzeigen</button>
             <!-- <span id="ShareButton" class="cursor-pointer" > Teilen</span>  -->
           </p>
         </div>