annotate Applications/StoneWebViewer/Resources/Styles/wv-overlay.scss @ 1949:d3ae6858e77b

more consistent handling of numberOfFrames
author Sebastien Jodogne <s.jodogne@gmail.com>
date Fri, 15 Jul 2022 16:19:18 +0200
parents d1806b4e4839
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1495
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
1 $gray: gray;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
2 $blue: hsla(204, 70%, 53%, 0.7);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
3 $red: rgba(206, 0, 0, 0.7);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
4 $green: rgba(0, 160, 27, .7);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
5 $yellow: rgba(220, 200 , 0, .9);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
6 $violet: rgba(255, 31, 255, .7);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
7
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
8 .wv-overlay {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
9 // width&height is 0x0 to avoid capturing viewport events
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
10 color: orange;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
11 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
12
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
13 .wv-overlay-icon {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
14 width: 64px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
15 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
16
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
17 .wvOverlay__studyBadge {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
18 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
19 top: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
20 left: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
21 width: 1.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
22 height: 1.5rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
23 background-color: $gray;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
24 z-index: 1;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
25 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
26
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
27 .wv-overlay-topleft {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
28 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
29 top: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
30 left: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
31 text-align: left;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
32 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
33
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
34 .wv-overlay-topright {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
35 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
36 top: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
37 right: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
38 text-align: right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
39 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
40
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
41 .wv-overlay-bottomright {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
42 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
43 bottom: 2em; // save 2em for the timeline
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
44 right: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
45 text-align: right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
46 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
47
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
48 .wv-overlay-bottomleft {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
49 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
50 bottom: 2em; // save 2em for the timeline
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
51 left: 0rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
52 text-align: left;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
53 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
54
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
55 .wv-overlay-timeline-wrapper {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
56 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
57 right: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
58 bottom: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
59 left: 0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
60 z-index: 1; // Make sure the representation of the selected image on the timeline appear on top of other overlay panels
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
61 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
62
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
63 .wv-overlay-topleft, .wv-overlay-topright, .wv-overlay-bottomright, .wv-overlay-bottomleft {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
64 padding: 2rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
65 transition: color 500ms, background-color 500ms;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
66 background-color: rgba(0, 0, 0, 0.66);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
67 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
68
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
69 .wv-overlay-topleft:hover, .wv-overlay-topright:hover, .wv-overlay-bottomright:hover, .wv-overlay-bottomleft:hover {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
70 background-color: rgba(0, 0, 0, 0.9);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
71 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
72
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
73 .wvPaneOverlay {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
74 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
75 top: 50%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
76 width: 100%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
77 transform: translateY(-50%);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
78
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
79 font-weight: 100;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
80 text-align: center;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
81 color: white;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
82 font-size: 2rem;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
83 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
84
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
85 .wv-overlay-scrollbar-loaded {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
86 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
87 bottom:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
88 left:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
89 height: 5px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
90 background-color: red;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
91 will-change: right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
92 transform-origin: 0% 50%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
93 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
94
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
95 .wv-overlay-scrollbar-loading {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
96 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
97 bottom:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
98 left:0;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
99 height: 5px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
100 background-color: #660000;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
101 will-change: right;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
102 transform-origin: 0% 50%;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
103 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
104
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
105 .wv-overlay-scrollbar-text {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
106 position: absolute;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
107 bottom: calc(1em + 5px);
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
108 left: 5px;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
109 height: 1em;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
110 color: red;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
111 font-size: 0.8em;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
112 font-family: helvetica;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
113 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
114
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
115 // Color related modifiers
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
116 .wvOverlay__studyBadge--blue {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
117 @extend .wvOverlay__studyBadge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
118 background-color: $blue;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
119 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
120 .wvOverlay__studyBadge--red {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
121 @extend .wvOverlay__studyBadge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
122 background-color: $red;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
123 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
124 .wvOverlay__studyBadge--green {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
125 @extend .wvOverlay__studyBadge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
126 background-color: $green;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
127 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
128 .wvOverlay__studyBadge--yellow {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
129 @extend .wvOverlay__studyBadge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
130 background-color: $yellow;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
131 }
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
132 .wvOverlay__studyBadge--violet {
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
133 @extend .wvOverlay__studyBadge;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
134 background-color: $violet;
fb74ed5d8c22 initial commit of the Stone Web viewer
Sebastien Jodogne <s.jodogne@gmail.com>
parents:
diff changeset
135 }