Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/Resources/Styles/wv-overlay.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/wv-overlay.scss@fb74ed5d8c22 |
children |
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 .wv-overlay { | |
9 // width&height is 0x0 to avoid capturing viewport events | |
10 color: orange; | |
11 } | |
12 | |
13 .wv-overlay-icon { | |
14 width: 64px; | |
15 } | |
16 | |
17 .wvOverlay__studyBadge { | |
18 position: absolute; | |
19 top: 0; | |
20 left: 0; | |
21 width: 1.5rem; | |
22 height: 1.5rem; | |
23 background-color: $gray; | |
24 z-index: 1; | |
25 } | |
26 | |
27 .wv-overlay-topleft { | |
28 position: absolute; | |
29 top: 0rem; | |
30 left: 0rem; | |
31 text-align: left; | |
32 } | |
33 | |
34 .wv-overlay-topright { | |
35 position: absolute; | |
36 top: 0rem; | |
37 right: 0rem; | |
38 text-align: right; | |
39 } | |
40 | |
41 .wv-overlay-bottomright { | |
42 position: absolute; | |
43 bottom: 2em; // save 2em for the timeline | |
44 right: 0rem; | |
45 text-align: right; | |
46 } | |
47 | |
48 .wv-overlay-bottomleft { | |
49 position: absolute; | |
50 bottom: 2em; // save 2em for the timeline | |
51 left: 0rem; | |
52 text-align: left; | |
53 } | |
54 | |
55 .wv-overlay-timeline-wrapper { | |
56 position: absolute; | |
57 right: 0; | |
58 bottom: 0; | |
59 left: 0; | |
60 z-index: 1; // Make sure the representation of the selected image on the timeline appear on top of other overlay panels | |
61 } | |
62 | |
63 .wv-overlay-topleft, .wv-overlay-topright, .wv-overlay-bottomright, .wv-overlay-bottomleft { | |
64 padding: 2rem; | |
65 transition: color 500ms, background-color 500ms; | |
66 background-color: rgba(0, 0, 0, 0.66); | |
67 } | |
68 | |
69 .wv-overlay-topleft:hover, .wv-overlay-topright:hover, .wv-overlay-bottomright:hover, .wv-overlay-bottomleft:hover { | |
70 background-color: rgba(0, 0, 0, 0.9); | |
71 } | |
72 | |
73 .wvPaneOverlay { | |
74 position: absolute; | |
75 top: 50%; | |
76 width: 100%; | |
77 transform: translateY(-50%); | |
78 | |
79 font-weight: 100; | |
80 text-align: center; | |
81 color: white; | |
82 font-size: 2rem; | |
83 } | |
84 | |
85 .wv-overlay-scrollbar-loaded { | |
86 position: absolute; | |
87 bottom:0; | |
88 left:0; | |
89 height: 5px; | |
90 background-color: red; | |
91 will-change: right; | |
92 transform-origin: 0% 50%; | |
93 } | |
94 | |
95 .wv-overlay-scrollbar-loading { | |
96 position: absolute; | |
97 bottom:0; | |
98 left:0; | |
99 height: 5px; | |
100 background-color: #660000; | |
101 will-change: right; | |
102 transform-origin: 0% 50%; | |
103 } | |
104 | |
105 .wv-overlay-scrollbar-text { | |
106 position: absolute; | |
107 bottom: calc(1em + 5px); | |
108 left: 5px; | |
109 height: 1em; | |
110 color: red; | |
111 font-size: 0.8em; | |
112 font-family: helvetica; | |
113 } | |
114 | |
115 // Color related modifiers | |
116 .wvOverlay__studyBadge--blue { | |
117 @extend .wvOverlay__studyBadge; | |
118 background-color: $blue; | |
119 } | |
120 .wvOverlay__studyBadge--red { | |
121 @extend .wvOverlay__studyBadge; | |
122 background-color: $red; | |
123 } | |
124 .wvOverlay__studyBadge--green { | |
125 @extend .wvOverlay__studyBadge; | |
126 background-color: $green; | |
127 } | |
128 .wvOverlay__studyBadge--yellow { | |
129 @extend .wvOverlay__studyBadge; | |
130 background-color: $yellow; | |
131 } | |
132 .wvOverlay__studyBadge--violet { | |
133 @extend .wvOverlay__studyBadge; | |
134 background-color: $violet; | |
135 } |