@arsedizioni/ars-utils 18.4.72 → 18.4.74

package/clipper.ui/ui/clipper.scss

@@ -324,6 +324,138 @@
   }
 
 
+}
+
+
+.stripe:hover {
+  background-color: var(--ars-item-hover-background-color, #eaecef);
+  border-radius: 12px;
+}
+
+.stripe {
+  cursor: pointer !important;
+  padding: 5px 10px 5px 10px !important;
+  margin-bottom: 5px !important;
+
+  .body {
+    padding: 0px 15px !important;
+  }
+
+  .image-mark {
+    border-left: 6px solid transparent;
+    margin: 8px 0;
+
+  }
+
+  .image-mark-unread {
+    border-left-color: var(--ars-color-error, #ff5449);
+    margin: 8px 0;
+  }
+
+  .image {
+    width: 150px !important;
+    height: 70px !important;
+    position: relative;
+    background-color: transparent;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+
+
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+    }
+
+
+
+    .info-1 {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
+      color: var(--ars-color-text, #191c1b);
+      font-size: small !important;
+      font-weight: 700 !important;
+      text-transform: uppercase !important;
+    }
+
+    .info-2 {
+      position: absolute;
+      right: 0;
+      top: 0;
+      padding: 4px 8px;
+      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
+      color: var(--ars-color-accent, #7894ae);
+      font-size: x-small !important;
+      font-weight: 700 !important;
+      text-transform: uppercase !important;
+    }
+
+    .buttons {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 42px;
+
+      .check,
+      .read {
+        background-color: var(--ars-color-primary, #00a293);
+        color: var(--ars-color-text-low, #e0e2e5);
+      }
+
+      .check-selected {
+        background-color: var(--ars-color-primary-hi, #12c0ae);
+      }
+    }
+  }
+
+  .date {
+    padding: 0 !important;
+    font-weight: 700 !important;
+    text-transform: uppercase !important;
+
+    .date-day {
+      color: var(--ars-accent, #7894ae);
+    }
+
+    .date-divider {
+      width: 1px;
+      margin: 0 8px;
+      border-left: 1px solid var(--ars-color-color-divider, #757d87);
+    }
+  }
+
+  .time {
+    font-size: small !important;
+    font-weight: 700 !important;
+  }
+
+  .title {
+    text-decoration: none !important;
+    font-size: 16px !important;
+    font-weight: 600;
+    min-height: 50px !important; // 2 lines;
+    max-height: 70px !important; // 3 lines;
+    min-width: 100%;
+    white-space: initial !important;
+    overflow: hidden !important;
+
+    @supports (-webkit-line-clamp: 3) {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: initial;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+
 }
 
 .badge,

package/clipper.ui/ui/search-result-item/search-result-item.component.d.ts

@@ -6,7 +6,8 @@ import { ClipperSearchResultManager } from '../search-result-manager/search-resu
 import * as i0 from "@angular/core";
 export declare enum ClipperSearchResultItemDisplayMode {
     List = 1,
-    Tile = 2
+    Tile = 2,
+    Stripe = 3
 }
 export declare class ClipperSearchResultItemComponent implements OnInit {
     contextMenuTrigger: MatMenuTrigger;