Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/_layout.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/_layout.scss@fb74ed5d8c22
children
comparison
equal deleted inserted replaced
1537:de8cf5859e84 1538:d1806b4e4839
1 $topHeight: 42px;
2 $bottomHeightSmall: 7rem; // On small width, we provide two-lines bottom zone to compensate the smaller width
3 $bottomHeightLarge: 5rem; // On large width, we provide one-line bottom zone
4
5 $asideWidth: 32rem;
6 $asideMinifyWidth: 12rem;
7
8 $asideRightMinifyWidth: 85px; // eq. 7.5rem * 12px - ( $asideRightPadding / 2 )
9 $asideRightPadding: 10px;
10
11 /* layout: left section */
12
13 // Adapt left aside based on state (opened/closed).
14 .wvLayoutLeft {
15 // Set general properties.
16 position:absolute;
17 z-index:2;
18 background-color:black;
19 width: $asideWidth;
20
21 // Position the left side below the top zone if it is shown
22 &.wvLayoutLeft--toppadding {
23 top: $topHeight;
24 }
25 &:not(.wvLayoutLeft--toppadding) {
26 top: 0;
27 }
28
29 // Position the left section over the bottom one if the latter is shown
30 &.wvLayoutLeft--bottompadding {
31 @media screen and (max-device-width: 374px) {
32 bottom: $bottomHeightSmall;
33 }
34 @media screen and (min-device-width: 375px) {
35 bottom: $bottomHeightLarge;
36 }
37 }
38 &:not(.wvLayoutLeft--bottompadding) {
39 bottom: 0;
40 }
41
42 // Position the left side on the left
43 left: 0;
44
45 // When layout left is shown, nothing special happens (default state)
46 &:not(.wvLayoutLeft--closed) {
47 }
48
49 // When layout left is closed, move it aside
50 &.wvLayoutLeft--closed {
51 transform: translateX(- $asideWidth); // Move all out of the screen
52 &.wvLayoutLeft--small {
53 transform: translateX(-$asideMinifyWidth);
54 }
55 }
56 &.wvLayoutLeft--small{
57 width: $asideMinifyWidth;
58 & .wvLayoutLeft__contentTop, & .wvLayoutLeft__contentMiddle, & .wvLayoutLeft__contentBottom{
59 width: 100%;
60 }
61 }
62 }
63
64 // Layout-Left Flexbox containers for the content.
65 .wvLayoutLeft__content {
66 border-right: 1px solid #AAA;
67
68 // Display flex mode so optional actions can be positionned at the bottom
69 // side.
70 flex: 1;
71 display: flex;
72 flex-direction: column;
73
74 // Make it scrollable.
75 overflow-y: auto;
76 height: 100%;
77 }
78
79 .wvLayoutLeft__contentTop {
80 // We have to set a static height since we use floating to make white space
81 // disapear in nested content.
82 // note: could be deactivate with the clearfix so we can have a dynamic height
83 // max-height: 6rem;
84 padding: 0rem 1rem 0rem 1rem;
85
86 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
87 // border).
88 width: $asideWidth - 0.1rem;
89
90 &:after{
91 content: "";
92 display:block;
93 height:0;
94 width:0;
95 clear:both;
96 }
97 }
98
99 .wvLayoutLeft__contentMiddle {
100 // Let the middle zone take as much space as required.
101 flex: 1 0 auto;
102
103 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
104 // border).
105 width: $asideWidth - 0.1rem;
106
107 }
108
109 .wvLayoutLeft__contentBottom {
110 // Enforce width even if there is a scrollbar on win/IE11 (-1 px for
111 // border).
112 width: $asideWidth - 0.1rem;
113 }
114 .wvLayout__leftBottom.wvLayout__leftBottom--enabled {
115 border-top: 1px solid hsla(0, 0%, 100%, 0.2);
116 margin-top: 1rem;
117 padding: 1rem;
118
119 // Prevent from taking more space than intended.
120 // flex-grow: 0;
121 }
122
123 .wvLayoutLeft__actions,
124 %wvLayoutLeft__actions{
125 display:block;
126 position:absolute;
127 right:1px; // border
128 top: 50%;
129 transform: translateY(-50%);
130 width:25px;
131 }
132 .wvLayoutLeft__actions--outside{
133 @extend.wvLayoutLeft__actions;
134 right:-25px; // width + border
135 }
136 .wvLayoutLeft__action{
137 background-color:$primary;
138 opacity: 0.5;
139 color:white;
140 transition: none;
141 &:hover, &:focus{
142 opacity: 1;
143 }
144 }
145
146
147 /* layout: right section */
148
149 // Adapt right aside based on state (opened/closed).
150 .wvLayout__right {
151 display:block;
152 position:absolute;
153 z-index:2;
154 background-color:black;
155 width: $asideRightMinifyWidth;
156
157 // Position the left side below the top zone if it is shown
158 &.wvLayout__right--toppadding {
159 top: $topHeight;
160 }
161 &:not(.wvLayout__right--toppadding) {
162 top: 0;
163 }
164
165 // Position the right section over the bottom one if the latter is shown
166 &.wvLayout__right--bottompadding {
167 @media screen and (max-device-width: 374px) {
168 bottom: $bottomHeightSmall;
169 }
170 @media screen and (min-device-width: 375px) {
171 bottom: $bottomHeightLarge;
172 }
173 }
174 &:not(.wvLayout__right--bottompadding) {
175 bottom: 0;
176 }
177
178 // Position the right side on the right
179 right: 0;
180
181 // When layout right is shown, nothing special happens (default state)
182 &:not(.wvLayout__right--closed) {
183 }
184
185 // When layout right is closed, move it aside
186 &.wvLayout__right--closed {
187 transform: translateX(+ $asideRightMinifyWidth); // Move all out of the screen
188 }
189
190 // Set childrens to full height (so border-left appears at 100% height)
191 & > wv-layout-right,
192 & > wv-layout-right > .wvViewer__asideRight
193 {
194 display: block;
195 height: 100%;
196 width: 100%;
197 }
198 }
199
200 .wvAsideRight__content {
201 height: 100%;
202 float: left;
203
204 border-left: 1px solid #AAA;
205
206 padding: 0 $asideRightPadding/2;
207 width: $asideWidth;
208 }
209
210 .wvAsideRight__actions,
211 %wvAsideRight__actions{
212 display:block;
213 position:absolute;
214 left:1px; // border
215 top: 50%;
216 transform: translateY(-50%);
217 width:25px;
218
219 // Compensate aside z-index to let user click on button when another button
220 // is behind the actions.
221 z-index: 3;
222 }
223 .wvAsideRight__actions--outside{
224 @extend.wvAsideRight__actions;
225 left:-25px; // width + border
226 }
227 .wvAsideRight__action{
228 background-color:$primary;
229 opacity: 0.5;
230 color:white;
231 transition: none;
232 &:hover, &:focus{
233 opacity: 1;
234 }
235 }
236 .wvAsideRight__fixOpenFullyTooltip + .tooltip { // Fix the "open fully" bad tooltip placement of the asideRight
237 left: -6.633em !important;
238 top: 1px !important;
239 }
240
241
242 /* layout: bottom section */
243
244 // Set bottom section size & position
245 .wvLayout__bottom {
246 position: absolute;
247
248 // Display the bottom bar in the bottom side
249 @media screen and (max-device-width: 374px) {
250 height: $bottomHeightSmall;
251 }
252 @media screen and (min-device-width: 375px) {
253 height: $bottomHeightLarge;
254 }
255
256 left: 0;
257 bottom: 0;
258 right: 0;
259
260 // Set grey background color (as it is only used to display notices)
261 background-color: hsl(0, 0%, 10%);
262 }
263
264
265 /* layout: main section */
266
267 // Set main section size & position
268 .wvLayout__main {
269 position: absolute;
270
271 // Align content (such as toolbar)
272 text-align: center;
273
274 // Position splitpane considering the toolbar when toolbar is present.
275 & .wvLayout__splitpane--toolbarAtTop {
276 display: block;
277 height: calc(100% - #{$toolbarHeight});
278 width: 100%;
279
280 position: relative;
281 top: $toolbarHeight;
282 }
283 & .wvLayout__splitpane--toolbarAtRight {
284 display: block;
285 height: 100%;
286 width: calc(100% - #{$toolbarHeight});
287 }
288
289 & .wvLayout__splitpane--bigToolbarAtTop {
290 display: block;
291 height: calc(100% - 68px);
292 width: 100%;
293
294 position: relative;
295 top: 68px;
296 }
297 & .wvLayout__splitpane--bigToolbarAtRight {
298 display: block;
299 height: 100%;
300 width: calc(100% - 68px);
301 }
302
303 // Position the main section below the top zone if the latter is shown
304 &.wvLayout__main--toppadding {
305 top: $topHeight;
306 }
307 &:not(.wvLayout__main--toppadding) {
308 top: 0;
309 }
310
311 // Position the main section over the bottom one if the latter is shown
312 &.wvLayout__main--bottompadding {
313 bottom:440px;
314 @media screen and (max-device-width: 374px) {
315 bottom: $bottomHeightSmall;
316 }
317 @media screen and (min-device-width: 375px) {
318 bottom: $bottomHeightLarge;
319 }
320 }
321 &:not(.wvLayout__main--bottompadding) {
322 bottom: 0;
323 }
324
325 // Make the main content fill the screen by default
326 // Depending on the browser, the left and right attributes are more
327 // optimized than padding's ones. The reason is that they based upon
328 // absolute positioning. The require no contextual positioning calculation
329 // and are less performance intensive, especially concidering transition
330 // animation.
331 right: 0;
332 left: 0;
333
334 // transition: 0.6s left ease, 0.6s right ease;
335
336 // Adapt main section's size based on aside left's state (opened/closed)
337 // 1. When aside left is not hidden , move the main section 300 pixel to
338 // the right
339 &.wvLayout__main--leftpadding {
340 left: $asideWidth;
341 }
342 // 2. When aside left is hidden, let the main take 100% of the place
343 &:not(.wvLayout__main--leftpadding, .wvLayout__main--smallleftpadding) {
344 left: 0px;
345 }
346 &.wvLayout__main--smallleftpadding {
347 left: $asideMinifyWidth;
348 }
349
350 // Adapt main section's size based on aside right's state (opened/closed)
351 // 1. When aside right is not hidden , move the main section 84 pixel to
352 // the left
353 &.wvLayout__main--rightpadding {
354 right: $asideRightMinifyWidth;
355 }
356 // 2. When aside right is hidden, let the main take 100% of the place
357 &:not(.wvLayout__main--rightpadding) {
358 right: 0px;
359 }
360 }
361
362 /* global */
363 .popover {
364 // Set back black as default popover text color
365 color: black;
366 }
367
368 .wvViewer__editor--full{
369 position:absolute;
370 top:0;
371 right:0;
372 z-index:10;
373 opacity:0;
374 transform: translateX(100%);
375 width:100%;
376 height:100%;
377 background-color:white;
378 color:$text-color;
379 &.opened{
380 opacity:1;
381 transform: translateX(0);
382 }
383 }
384
385 .wvViewer__topBar{
386 width:100%;
387 // margin-top: 0.5rem;
388
389 // Allow user to scroll through the toolbar if screen is too small. Note we
390 // can't use z-index properly to show buttons on top of the viewer, as any
391 // popover will appear behind them (even with higher z-index) due to an
392 // overflow property hidden somewhere.
393 overflow-y: auto;
394 white-space: nowrap;
395 max-width: 100%;
396 }
397 .wvViewer__buttonGroup{
398 display:inline-block;
399 }
400 .wvViewer__buttonGroup--asideWidth{
401 width: $asideWidth;
402 padding-right: 1rem;
403 }
404 .wvViewer__buttonGroup--contentWidth{
405 width: calc(100% - #{$asideWidth});
406 padding-left: 1rem;
407 max-height: 4.2rem; // Make sure mobile keeps the menubar below a certain size
408 }
409 .wvViewer__iframe{
410 position:absolute;
411 left:0;
412 top:0;
413 }
414
415 /* bottom bar */
416 .wvViewer__bottomBar,
417 %wvViewer__bottomBar{
418 position:absolute;
419 left:0;
420 bottom:0;
421 width:100%;
422 background-color:#111111;
423 }
424
425 .wvViewer__bottomBar--expanded{
426 @extend .wvViewer__bottomBar;
427 height: 80px; //total height of the last serieList cell (64 + 10(margin bottom previous item) + item padding bottom +1 border-width (top item)
428 //border-top: 1px solid rgba(255,255,255,0.1);
429 color:white;
430
431 .wvViewer__timeline{
432 width: calc(100% - 80px);
433 }
434 .wvTimeline__hotspots{
435 bottom: -40px;
436 }
437 }
438
439 .wvViewer__bottomBar--minimized{
440 @extend .wvViewer__bottomBar;
441 color: white;
442
443 padding-top: 0.5rem;
444 padding-bottom: 0.5rem;
445 padding-left: 2.5rem;
446
447 .wvTimeline__hotspot{
448 top: -40px;
449 opacity:0;
450 visibility:hidden;
451 z-index:-1;
452 // transition: all 0.3s ease 0.6s; //adding a delay when mouse leave
453 // transition-property: opacity, visibility, z-index;
454 }
455 &:hover .wvTimeline__hotspot{
456 opacity:1;
457 visibility: visible;
458 z-index:5;
459 transition-delay: 0s;
460 }
461 }
462
463 .wvViewer__timeline{
464 height:24px;
465 //background-color:rgba(1,1,1,0.2);
466 line-height: 24px;
467 vertical-align: middle;
468 width:100%;
469 }
470
471 .wvViewer__trademark{
472 display:inline-block;
473 float:right;
474 width:80px;
475 height:80px;
476 float:right;
477 line-height: 80px;
478 vertical-align: middle;
479 text-align: center;
480 }
481 .wvTimeline__action--text{
482
483 }
484 .wvTimeline__input{
485 border-radius: 3px;
486 &:focus{
487 outline:none;
488 }
489 margin-top:2px;
490 border: 1px solid $border-color;
491 }
492
493 .wvTimeline__actions{
494 display:inline-block;
495 border-right: 1px solid $border-color;
496 }
497 .wvTimeline__wrapper{
498 }