Mercurial > hg > orthanc-stone
view StoneWebViewer/Resources/Styles/_serieslist.scss @ 1526:61023b0d39c8
Reverted the Stone Web Viewer plugin to rev. 307a805d0587
(mistakenly changed to serve the RT Viewer and make it
available in the Orthanc Explorer while it should have been
done in a separate plugin)
author | Benjamin Golinvaux <bgo@osimis.io> |
---|---|
date | Sun, 02 Aug 2020 13:53:48 +0200 |
parents | fb74ed5d8c22 |
children |
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; }