Improve card design

semantic/dist/components/label.css

@@ -417,7 +417,7 @@ a.ui.label {
 }
 .ui[class*="right ribbon"].label:after {
   left: auto;
-  right: 0;
+  right: -1px;
   border-style: solid;
   border-width: 1.2em 1.2em 0 0;
   border-color: transparent;

semantic/dist/semantic.css

@@ -26796,7 +26796,7 @@ a.ui.label {
 
 .ui[class*="right ribbon"].label:after {
   left: auto;
-  right: 0;
+  right: -1px;
   border-style: solid;
   border-width: 1.2em 1.2em 0 0;
   border-color: transparent;

semantic/src/definitions/elements/label.less

@@ -455,7 +455,7 @@ a.ui.label {
   }
   .ui[class*="right ribbon"].label:after {
     left: auto;
-    right: 0;
+    right: -1px;
 
     border-style: solid;
     border-width: @ribbonTriangleSize @ribbonTriangleSize 0 0;

src/assets/css/default.css

@@ -40,84 +40,116 @@ img {
 /**
  * Card
  */
-.ui.fluid.card.stretch {
-    height: 100%;
+.ui.card {
+    --padding: 0.91666667em;
 }
 
-/** Overlay */
-@media (hover: hover) {
-    .ui.card:hover {
-        z-index: 102;
-    }
+.ui.fluid.card.stretch {
+    height: 100%;
 }
 
 /** Image */
 .ui.card > .image > img.preview {
     height: var(--wishPreviewHeight);
+
     object-fit: cover;
     object-position: 50%;
     background-color: #fff;
 }
+@media (hover: hover) {
+    .ui.card > .image > img.preview {
+        transition: height 0.2s linear;
+    }
+
+    .ui.card:hover > .image > img.preview {
+        height: calc(1em + 3 * var(--padding));
+    }
+}
+
+/** Provider */
+.ui.card > .image,
+.ui.card > .image > span.provider {
+    border-radius: .33333333rem .33333333rem 0 0;
+}
+
+.ui.card > .image > img.favicon,
+.ui.card > .image > span.provider {
+    position: absolute;
+    top: 0;
+}
 
 /** Favicon */
 .ui.card > .image > img.favicon {
-    position: absolute;
-    top: calc(0.91666667em * 1.25);
-    left: 1em;
+    padding: calc(var(--padding) * 1.5) var(--padding);
+
     height: 1.25em;
     width: auto;
 
-    z-index: 2;
+    box-sizing: content-box;
+    z-index: 1;
 }
 
 .ui.card > .image > img.favicon + span.provider {
     padding-left: 3em;
 }
-@media (hover: hover) {
-    .ui.card > .image > img.favicon + span.provider {
-        z-index: 2;
-    }
-}
 
 /** Provider name */
 .ui.card > .image > span.provider {
-    transition: 0.4s ease opacity;
-
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    padding: calc(0.91666667em * 1.5) 0.91666667em;
+    display: block;
+    width: 100%;
+    padding: calc(var(--padding) * 1.5) var(--padding);
 
     line-height: 1;
     user-select: none;
-    opacity: 0;
+
+    background-color: rgba(255, 255, 255, 0.6);
+    box-shadow: 0 0 4px rgba(200, 200, 200, 0.4);
+    backdrop-filter: blur(4px);
 }
-.ui.card:hover > .image > span.provider {
-    opacity: 1;
+@supports (backdrop-filter: blur(4px)) {
+    .ui.card > .image > span.provider {
+        background-color: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(4px);
+    }
+}
+@media (hover: hover) {
+    .ui.card > .image > span.provider {
+        transition: background-color 0.2s ease;
+
+        position: absolute;
+    }
+
+    .ui.card:hover > .image > span.provider {
+        animation: positionDelay 0.8s linear;
+        display: block;
+    }
 }
 
 /** Content */
-.ui.card > .content > .header {
-    max-height: calc(2 * 1.28571429em);
-    overflow: hidden;
-}
-.ui.card > .content > .description {
-    max-height: calc(6em * var(--lineHeight));
-    overflow: hidden;
+.ui.card > .content:not(.extra) {
+    height: calc(0.75 * var(--wishPreviewHeight));
+
+    overflow: auto;
 }
 @media (hover: hover) {
     .ui.card > .content:not(.extra) {
-        margin-bottom: calc(3em * var(--lineHeight));
+        transition: height 0.2s linear;
+
+        overflow: hidden;
     }
 
-    .ui.card > .content > .description {
-        position: absolute;
-        left: 1em;
-        right: 1em;
+    .ui.card:hover > .content:not(.extra) {
+        height: calc(1.5 * var(--wishPreviewHeight));
+
+        overflow: auto;
     }
 }
 
+.ui.card > .content > .header {
+    max-height: calc(2 * 1.28571429em);
+    overflow: hidden;
+}
+
 .ui.card > .content > .description-fade {
     position: absolute;
     right: 0;
@@ -131,8 +163,7 @@ img {
 }
 
 /** Buttons */
-.ui.card > .extra.buttons,
-.ui.cards > .card > .extra.buttons {
+.ui.card > .extra.buttons {
     transition: 0.4s ease opacity;
 
     display: flex;
@@ -141,24 +172,20 @@ img {
     z-index: 2;
 }
 @media (hover: hover) {
-    .ui.card > .extra.buttons,
-    .ui.cards > .card > .extra.buttons {
+    .ui.card > .extra.buttons {
         opacity: 0;
         margin-bottom: 0;
     }
 
-    .ui.card:hover > .extra.buttons,
-    .ui.cards > .card:hover > .extra.buttons {
+    .ui.card:hover > .extra.buttons {
         opacity: 1;
     }
 }
 
-.ui.card > .extra.buttons > .button,
-.ui.cards > .card > .extra.buttons > .button {
+.ui.card > .extra.buttons > .button {
     flex: 1 1 auto;
 }
-.ui.card > .extra.buttons > :last-child,
-.ui.cards > .card > .extra.buttons > :last-child {
+.ui.card > .extra.buttons > :last-child {
     margin-right: 0;
 }
 

src/assets/js/wishlist.js

@@ -71,7 +71,7 @@ $(function() {
             },
             on        : 'now',
             onSuccess : function(response, element, xhr) {
-                card.fadeOut();
+                card.closest('.column').fadeOut();
             },
         });
     });