--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/Applications/StoneWebViewer/Resources/Styles/_serieslist.scss	Tue Aug 11 13:24:38 2020 +0200
@@ -0,0 +1,182 @@
+$gray: gray;
+$blue: hsla(204, 70%, 53%, 0.7);
+$red: rgba(206, 0, 0, 0.7);
+$green: rgba(0, 160, 27, .7);
+$yellow: rgba(220, 200  , 0, .9);
+$violet: rgba(255, 31, 255, .7);
+
+$borderColor: rgba(255, 255, 255, 0.8);
+$borderColorActive: rgba(255, 255, 255, 0.6);
+$borderColorHighlighted: rgba(255, 255, 255, 1);
+$pictureSize: 6.5rem;
+
+.wvSerieslist {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wvSerieslist__seriesItem--selectable {
+    // Pointer cursor (for `ng-click`)
+    cursor: pointer !important;
+
+    // Lighten up the icon on hover
+    &:hover {
+        color: white;
+    }
+}
+
+.wvSerieslist__placeholderIcon, .wvSerieslist__placeholderIcon.fa { // Make sure it has precedence over .fa class {
+    position: absolute;
+
+    // Fill the li element
+    width: 100%;
+    height: 100%;
+
+    // Fill the li element with the fontawesome icon
+    font-size: $pictureSize/2;
+    line-height: $pictureSize;
+    text-align: center;
+}
+
+.wvSerieslist__placeholderIcon--strikeout, .wvSerieslist__placeholderIcon--strikeout.fa { // Make sure it has precedence over .fa class
+    // Grey out (since no report is available)
+    color: #c3c3c3;
+
+    // Diagonal line crossing report icon (to tell none are available)
+    // position: relative;
+
+    &::after { // use after to not conflicts with font-awesome :before
+        position: absolute;
+
+        left: 0;
+        top: 50%;
+        right: 0;
+
+        transform: rotate(-45deg) scaleX(0.9);
+
+        border-top: 5px solid;
+        border-color: inherit;
+
+        content: "";
+    }
+}
+
+.wvSerieslist__picture{
+    display: inline-block;
+    font-size: 14px;
+    width: $pictureSize;
+    height: $pictureSize;
+    position: relative;
+
+    // Move picture behind the `toggle layout@ left` button.
+    z-index: -1;
+}
+.wvSerieslist__badge {
+    position: absolute;
+    bottom:5px;
+    right:5px;
+    font-size:10px;
+    line-height:15px;
+    width:15px;
+    height:15px;
+    border-radius: 100%;
+    background-color: $gray;
+    vertical-align: middle;
+    text-align: center;
+    font-weight: bold;
+}
+.wvSerieslist__information{
+    font-size: 14px;
+    float: right;
+    padding-left: 1rem;
+    width: calc(100% - #{$pictureSize});
+    height: $pictureSize;
+}
+.wvSerieslist__label{
+    white-space: nowrap;
+    width:calc(100% - 10px);
+    overflow:hidden;
+    height:$pictureSize/2;
+    line-height:$pictureSize/2;
+    vertical-align: middle;
+}
+.wvSerieslist__timeline{
+    //border-top: 0.1rem solid rgba(255,255,255,0.2);
+    height:$pictureSize/2;
+    line-height:$pictureSize/2;
+    vertical-align: middle;
+}
+
+.wvSerieslist__seriesItem {
+    // anchor
+    position: relative;
+
+    // unstyle list
+    padding-left: 0;
+    list-style: none;
+    font-size: 0;
+
+    // mimic on hover border for draggable
+    border-right: 0.2rem solid transparent;
+    border-left: 0.2rem solid transparent;
+    border-top: 0.2rem solid transparent;
+    border-bottom: 0.2rem solid transparent;
+    border-corner-shape: notch;
+
+    line-height: 0px;
+    margin: 0.1rem;
+
+    &.active{
+        border-color: $borderColorActive;
+        border-style: solid;
+    }
+
+    &.highlighted{
+        border-color: $borderColorHighlighted;
+        border-style: solid;
+    }
+
+    &:hover, &:focus, &.focused{
+        border-style: dashed;
+        border-color: $borderColor;
+    }
+}
+
+.wvSerieslist__seriesItem--list {
+    display: block;
+}
+.wvSerieslist__seriesItem--grid {
+    display: inline-block;
+}
+.wvSerieslist__seriesItem--oneCol{
+    text-align: center;
+}
+
+.wvSerieslist__seriesItem--activated,
+.wvSerieslist__videoItem--activated,
+.wvSerieslist__pdfItem--activated {
+    border: 0.2rem solid hsla(204, 70%, 53%, 1) !important;
+}
+
+// Color related modifiers
+.wvSerieslist__badge--blue {
+    @extend .wvSerieslist__badge;
+    background-color: $blue;
+}
+.wvSerieslist__badge--red {
+    @extend .wvSerieslist__badge;
+    background-color: $red;
+}
+.wvSerieslist__badge--green {
+    @extend .wvSerieslist__badge;
+    background-color: $green;
+}
+.wvSerieslist__badge--yellow {
+    @extend .wvSerieslist__badge;
+    background-color: $yellow;
+}
+.wvSerieslist__badge--violet {
+    @extend .wvSerieslist__badge;
+    background-color: $violet;
+}