Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/wv-timeline-controls.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-timeline-controls.scss@fb74ed5d8c22
children
comparison
equal deleted inserted replaced
1537:de8cf5859e84 1538:d1806b4e4839
1 /* wv-timeline-controls directive */
2 .wv-timeline-controls {
3 padding: 0.5em 0.5em 0.5em 0.5em;
4 line-height: 1em;
5 background-color: rgba(0, 0, 0, 0.66);
6
7 text-align: center;
8
9 transition: color 500ms, background-color 500ms;
10 }
11
12 .wv-timeline-controls:hover {
13 background-color: rgba(0, 0, 0, 0.9);
14 }
15
16 // Used to make sure buttons doesn't break the style
17 .wv-timeline-controls-vertical-sizing {
18 display: inline-block;
19 line-height: 1em;
20 font-size: 1em;
21 }
22
23 .wv-timeline-controls-vflip {
24 // flip only the icon
25 &:before, &:after{
26 transform: scaleX(-1);
27 display: inline-block;
28 }
29 }
30
31 .wv-timeline-controls-button {
32 display: inline-block;
33 height: 1em;
34 width: 1em;
35 line-height: 1em;
36 font-size: 1em;
37 margin: 0;
38
39 user-select: none;
40 cursor: pointer;
41 }
42
43 .wv-timeline-controls-input {
44 height: 1em;
45 width: 3em;
46 padding: 0;
47 padding-bottom: 1px;
48 box-sizing: content-box;
49
50 border: none;
51 border-bottom: 1px solid hsla(35, 100%, 75%, 0.24);
52 background-color: transparent;
53
54 text-align: right;
55 }
56
57 // Display play button on the right side
58 .wv-timeline-controls-play-button-wrapper {
59 float: right;
60 }
61
62 /* wv-play-button directive */
63 .wv-play-button {
64 display: inline-block;
65 position: relative;
66 line-height: 1em;
67
68 // This is for the boxing box
69 height: 3em;
70 width: 6em;
71 padding-bottom: 1em;
72 padding-left: 0.25em;
73 padding-right: 0.25em;
74 }
75
76 .wv-play-button:hover .wv-play-button-config-position-handler {
77 visibility: visible;
78 }
79
80 // This is a 0x0 div to set the position
81 .wv-play-button-config-position-handler {
82 visibility: hidden;
83 position: absolute;
84 bottom: 3em;
85 left: 1em;
86 right: 0.5em;
87 // z-index: 2;
88 }
89
90 // The layout of play configuration
91 .wv-play-button-config {
92 position: absolute;
93 bottom: 0;
94 left: -6em;
95 width: 12em;
96 padding: 1em;
97 background-color: hsla(0,1,0, 0.5);
98 }
99
100 /* Style range input (see http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html) */
101
102 .wv-play-button-config-framerate-wrapper {
103 display: inline-block;
104 margin: 0.25em 0 0.5em 0;
105 }
106 input[type="range"].wv-play-button-config-framerate {
107 /*removes default webkit styles*/
108 -webkit-appearance: none;
109
110 /*fix for FF unable to apply focus style bug */
111 border: 1px solid white;
112
113 /*required for proper track sizing in FF*/
114 width: 10em;
115 }
116 input[type="range"].wv-play-button-config-framerate::-webkit-slider-runnable-track {
117 width: 10em;
118 height: 5px;
119 background: #ddd;
120 border: none;
121 border-radius: 3px;
122 }
123 input[type="range"].wv-play-button-config-framerate::-webkit-slider-thumb {
124 -webkit-appearance: none;
125 border: none;
126 height: 16px;
127 width: 16px;
128 border-radius: 50%;
129 background: goldenrod;
130 margin-top: -4px;
131 }
132 input[type="range"].wv-play-button-config-framerate:focus {
133 outline: none;
134 }
135 input[type="range"].wv-play-button-config-framerate:focus::-webkit-slider-runnable-track {
136 background: #ccc;
137 }
138
139 input[type="range"].wv-play-button-config-framerate::-moz-range-track {
140 width: 10em;
141 height: 5px;
142 background: #ddd;
143 border: none;
144 border-radius: 3px;
145 }
146 input[type="range"].wv-play-button-config-framerate::-moz-range-thumb {
147 border: none;
148 height: 16px;
149 width: 16px;
150 border-radius: 50%;
151 background: goldenrod;
152 }
153
154 /*hide the outline behind the border*/
155 input[type="range"].wv-play-button-config-framerate:-moz-focusring{
156 outline: 1px solid white;
157 outline-offset: -1px;
158 }
159
160 input[type="range"].wv-play-button-config-framerate::-ms-track {
161 width: 10em;
162 height: 5px;
163
164 /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
165 background: transparent;
166
167 /*leave room for the larger thumb to overflow with a transparent border */
168 border-color: transparent;
169 border-width: 6px 0;
170
171 /*remove default tick marks*/
172 color: transparent;
173 }
174 input[type="range"].wv-play-button-config-framerate::-ms-fill-lower {
175 background: #777;
176 border-radius: 10px;
177 }
178 input[type="range"].wv-play-button-config-framerate::-ms-fill-upper {
179 background: #ddd;
180 border-radius: 10px;
181 }
182 input[type="range"].wv-play-button-config-framerate::-ms-thumb {
183 border: none;
184 height: 16px;
185 width: 16px;
186 border-radius: 50%;
187 background: goldenrod;
188 }
189 input[type="range"].wv-play-button-config-framerate:focus::-ms-fill-lower {
190 background: #888;
191 }
192 input[type="range"].wv-play-button-config-framerate:focus::-ms-fill-upper {
193 background: #ccc;
194 }