Mercurial > hg > orthanc-stone

comparison Applications/StoneWebViewer/Resources/Styles/_toolbar.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/_toolbar.scss@fb74ed5d8c22
children
comparison
equal deleted inserted replaced
1537:de8cf5859e84 1538:d1806b4e4839
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 }