Mercurial > hg > orthanc-stone
comparison StoneWebViewer/Resources/Styles/_toolbar.scss @ 1495:fb74ed5d8c22
initial commit of the Stone Web viewer
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Thu, 25 Jun 2020 16:51:10 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
1494:5a3ef478deb6 | 1495:fb74ed5d8c22 |
---|---|
1 .wvToolbar { | |
2 position: absolute; | |
3 } | |
4 | |
5 .wvToolbar--top { | |
6 top: 0; | |
7 height: $toolbarHeight; | |
8 | |
9 // Position the toolbar to the right (even if it's positioned | |
10 // horizontally). | |
11 right: 0; | |
12 text-align: right; | |
13 | |
14 // Allow user to scroll through the toolbar if screen is too small. Note we | |
15 // can't use z-index properly to show buttons on top of the viewer, as any | |
16 // popover will appear behind them (even with higher z-index) due to an | |
17 // overflow property hidden somewhere. | |
18 // overflow-y: auto; | |
19 white-space: nowrap; | |
20 max-width: 100%; | |
21 } | |
22 | |
23 .wvToolbar--right { | |
24 right: 0; | |
25 width: 42px; // != $toolbarHeight since we're in the reverse order. | |
26 | |
27 // Allow user to scroll through the toolbar if screen is too small. | |
28 // overflow-x: auto; | |
29 height: 100%; | |
30 z-index: 2; | |
31 &.wvToolbar--big{ | |
32 width: 68px; | |
33 } | |
34 } | |
35 | |
36 /* Splitpane Grid Configuration */ | |
37 | |
38 .wvToolbar__splitpaneConfigPopover { | |
39 // Prevent white space between buttons. | |
40 font-size: 0; | |
41 } | |
42 | |
43 .wvToolbar__splitpaneConfigNotice { | |
44 font-size: 1.25rem; | |
45 font-style: italic; | |
46 text-align: center; | |
47 | |
48 color: #333; | |
49 } | |
50 | |
51 input[type="radio"].wvToolbar__splitpaneConfigButtonInput { | |
52 // Hide the radio input, but make it fit the label, so we can rely on its | |
53 // html caracteristics without having to suffer from its design. | |
54 position: absolute; | |
55 width: 0; | |
56 height: 0; | |
57 left: 0; | |
58 top: 0; | |
59 bottom: 2px; | |
60 right: 0; | |
61 opacity: 0; | |
62 } | |
63 | |
64 /* Windowing Preset */ | |
65 | |
66 .wvToolbar__windowingPresetConfigPopover { | |
67 | |
68 } | |
69 .wvToolbar__windowingPresetConfigNotice { | |
70 font-size: 1.25rem; | |
71 font-style: italic; | |
72 text-align: center; | |
73 | |
74 color: #333; | |
75 } | |
76 | |
77 .wvToolbar__windowingPresetList { | |
78 list-style: none; | |
79 margin: 0; | |
80 padding: 0; | |
81 | |
82 font-size: 1.5rem; | |
83 } | |
84 .wvToolbar__windowingPresetListItem { | |
85 // Remove <a> default styles. Take care - this class may either be used | |
86 // with <a> or <button>. | |
87 &:hover { | |
88 text-decoration: none; | |
89 color: white; | |
90 } | |
91 | |
92 // Remove <button> default styles. | |
93 outline: none; | |
94 background-color: transparent; | |
95 border: none; | |
96 | |
97 // Set relative to position button absolutely | |
98 position: relative; | |
99 | |
100 // Style button | |
101 display: inline-block; | |
102 cursor: pointer; | |
103 font-variant: small-caps; | |
104 text-transform: lowercase; | |
105 text-align: center; | |
106 font-size: 1.3rem; | |
107 font-weight: 400; | |
108 line-height: 2.2rem; | |
109 color: hsl(0, 0%, 85%); | |
110 transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease; | |
111 | |
112 // Position button | |
113 margin: 0; | |
114 min-width: 3rem; | |
115 padding: 0 10px; | |
116 line-height: 3.6rem; | |
117 | |
118 | |
119 | |
120 // Prevent multi line buttons. | |
121 max-height: 2.8rem; | |
122 max-width: 100%; | |
123 overflow: hidden; | |
124 | |
125 // Set margin | |
126 margin: 0.6rem; | |
127 margin-left: 0rem; | |
128 margin-right: 0rem; | |
129 & + & { | |
130 margin-left: 0.7rem; | |
131 } | |
132 | |
133 // Set button size | |
134 line-height: 2rem; | |
135 | |
136 // Align text | |
137 padding-top: 0.1rem; | |
138 padding-bottom: 0.5rem; | |
139 | |
140 // Style button | |
141 font-size: 1.4rem; | |
142 border: 1px solid hsl(0, 0%, 27%); | |
143 | |
144 // Set best looking font with small-caps. | |
145 font-family: Arial; | |
146 | |
147 // Change background on hover | |
148 background-color: hsl(0, 0%, 0%); | |
149 &:hover { | |
150 background-color: hsl(0, 0%, 10%); | |
151 } | |
152 | |
153 & > .glyphicon { // used with the same element as glyphicons | |
154 // Position button | |
155 position: relative; | |
156 display: inline-block; | |
157 top: 3px; | |
158 margin-right: 4px; | |
159 } | |
160 | |
161 // Text color | |
162 color: hsl(0, 0%, 10%); | |
163 border: 1px solid hsl(0, 0%, 73%); | |
164 | |
165 // Change background on hover | |
166 background-color: hsl(0, 0%, 100%); | |
167 &:hover { | |
168 color: hsl(0, 0%, 10%); | |
169 background-color: hsl(0, 0%, 90%); | |
170 } | |
171 | |
172 | |
173 width: 100%; | |
174 margin: 0; | |
175 margin-left: 0 !important; | |
176 border-top: none; | |
177 border-bottom: none; | |
178 } |