Mercurial > hg > orthanc-stone
comparison 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 |
comparison
equal
deleted
inserted
replaced
1537:de8cf5859e84 | 1538:d1806b4e4839 |
---|---|
1 $gray: gray; | |
2 $blue: hsla(204, 70%, 53%, 0.7); | |
3 $red: rgba(206, 0, 0, 0.7); | |
4 $green: rgba(0, 160, 27, .7); | |
5 $yellow: rgba(220, 200 , 0, .9); | |
6 $violet: rgba(255, 31, 255, .7); | |
7 | |
8 $borderColor: rgba(255, 255, 255, 0.8); | |
9 $borderColorActive: rgba(255, 255, 255, 0.6); | |
10 $borderColorHighlighted: rgba(255, 255, 255, 1); | |
11 $pictureSize: 6.5rem; | |
12 | |
13 .wvSerieslist { | |
14 margin: 0; | |
15 padding: 0; | |
16 list-style: none; | |
17 } | |
18 | |
19 .wvSerieslist__seriesItem--selectable { | |
20 // Pointer cursor (for `ng-click`) | |
21 cursor: pointer !important; | |
22 | |
23 // Lighten up the icon on hover | |
24 &:hover { | |
25 color: white; | |
26 } | |
27 } | |
28 | |
29 .wvSerieslist__placeholderIcon, .wvSerieslist__placeholderIcon.fa { // Make sure it has precedence over .fa class { | |
30 position: absolute; | |
31 | |
32 // Fill the li element | |
33 width: 100%; | |
34 height: 100%; | |
35 | |
36 // Fill the li element with the fontawesome icon | |
37 font-size: $pictureSize/2; | |
38 line-height: $pictureSize; | |
39 text-align: center; | |
40 } | |
41 | |
42 .wvSerieslist__placeholderIcon--strikeout, .wvSerieslist__placeholderIcon--strikeout.fa { // Make sure it has precedence over .fa class | |
43 // Grey out (since no report is available) | |
44 color: #c3c3c3; | |
45 | |
46 // Diagonal line crossing report icon (to tell none are available) | |
47 // position: relative; | |
48 | |
49 &::after { // use after to not conflicts with font-awesome :before | |
50 position: absolute; | |
51 | |
52 left: 0; | |
53 top: 50%; | |
54 right: 0; | |
55 | |
56 transform: rotate(-45deg) scaleX(0.9); | |
57 | |
58 border-top: 5px solid; | |
59 border-color: inherit; | |
60 | |
61 content: ""; | |
62 } | |
63 } | |
64 | |
65 .wvSerieslist__picture{ | |
66 display: inline-block; | |
67 font-size: 14px; | |
68 width: $pictureSize; | |
69 height: $pictureSize; | |
70 position: relative; | |
71 | |
72 // Move picture behind the `toggle layout@ left` button. | |
73 z-index: -1; | |
74 } | |
75 .wvSerieslist__badge { | |
76 position: absolute; | |
77 bottom:5px; | |
78 right:5px; | |
79 font-size:10px; | |
80 line-height:15px; | |
81 width:15px; | |
82 height:15px; | |
83 border-radius: 100%; | |
84 background-color: $gray; | |
85 vertical-align: middle; | |
86 text-align: center; | |
87 font-weight: bold; | |
88 } | |
89 .wvSerieslist__information{ | |
90 font-size: 14px; | |
91 float: right; | |
92 padding-left: 1rem; | |
93 width: calc(100% - #{$pictureSize}); | |
94 height: $pictureSize; | |
95 } | |
96 .wvSerieslist__label{ | |
97 white-space: nowrap; | |
98 width:calc(100% - 10px); | |
99 overflow:hidden; | |
100 height:$pictureSize/2; | |
101 line-height:$pictureSize/2; | |
102 vertical-align: middle; | |
103 } | |
104 .wvSerieslist__timeline{ | |
105 //border-top: 0.1rem solid rgba(255,255,255,0.2); | |
106 height:$pictureSize/2; | |
107 line-height:$pictureSize/2; | |
108 vertical-align: middle; | |
109 } | |
110 | |
111 .wvSerieslist__seriesItem { | |
112 // anchor | |
113 position: relative; | |
114 | |
115 // unstyle list | |
116 padding-left: 0; | |
117 list-style: none; | |
118 font-size: 0; | |
119 | |
120 // mimic on hover border for draggable | |
121 border-right: 0.2rem solid transparent; | |
122 border-left: 0.2rem solid transparent; | |
123 border-top: 0.2rem solid transparent; | |
124 border-bottom: 0.2rem solid transparent; | |
125 border-corner-shape: notch; | |
126 | |
127 line-height: 0px; | |
128 margin: 0.1rem; | |
129 | |
130 &.active{ | |
131 border-color: $borderColorActive; | |
132 border-style: solid; | |
133 } | |
134 | |
135 &.highlighted{ | |
136 border-color: $borderColorHighlighted; | |
137 border-style: solid; | |
138 } | |
139 | |
140 &:hover, &:focus, &.focused{ | |
141 border-style: dashed; | |
142 border-color: $borderColor; | |
143 } | |
144 } | |
145 | |
146 .wvSerieslist__seriesItem--list { | |
147 display: block; | |
148 } | |
149 .wvSerieslist__seriesItem--grid { | |
150 display: inline-block; | |
151 } | |
152 .wvSerieslist__seriesItem--oneCol{ | |
153 text-align: center; | |
154 } | |
155 | |
156 .wvSerieslist__seriesItem--activated, | |
157 .wvSerieslist__videoItem--activated, | |
158 .wvSerieslist__pdfItem--activated { | |
159 border: 0.2rem solid hsla(204, 70%, 53%, 1) !important; | |
160 } | |
161 | |
162 // Color related modifiers | |
163 .wvSerieslist__badge--blue { | |
164 @extend .wvSerieslist__badge; | |
165 background-color: $blue; | |
166 } | |
167 .wvSerieslist__badge--red { | |
168 @extend .wvSerieslist__badge; | |
169 background-color: $red; | |
170 } | |
171 .wvSerieslist__badge--green { | |
172 @extend .wvSerieslist__badge; | |
173 background-color: $green; | |
174 } | |
175 .wvSerieslist__badge--yellow { | |
176 @extend .wvSerieslist__badge; | |
177 background-color: $yellow; | |
178 } | |
179 .wvSerieslist__badge--violet { | |
180 @extend .wvSerieslist__badge; | |
181 background-color: $violet; | |
182 } |