Mercurial > hg > orthanc-stone
diff Applications/StoneWebViewer/Resources/Styles/_serieslist.scss @ 1538:d1806b4e4839
moving OrthancStone/Samples/ as Applications/Samples/
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Tue, 11 Aug 2020 13:24:38 +0200 |
parents | StoneWebViewer/Resources/Styles/_serieslist.scss@fb74ed5d8c22 |
children | b8f54ab47b3b |
line wrap: on
line diff
--- /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; +}