Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/wv-overlay.scss @ 1538:d1806b4e4839

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 }