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