Mercurial > hg > orthanc-stone
view Applications/StoneWebViewer/Resources/Styles/_serieslist.scss @ 1545:aee0f5f9cf71
fix
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Tue, 11 Aug 2020 15:07:30 +0200 |
parents | d1806b4e4839 |
children | b8f54ab47b3b |
line wrap: on
line source
$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; }