1/*
2Copyright (c) 2012, 2021, Oracle and/or its affiliates.
3
4This program is free software; you can redistribute it and/or modify
5it under the terms of the GNU General Public License, version 2.0,
6as published by the Free Software Foundation.
7
8This program is also distributed with certain software (including
9but not limited to OpenSSL) that is licensed under separate terms,
10as designated in a particular file or component or in included license
11documentation.  The authors of MySQL hereby grant you an additional
12permission to link the program and your derivative works with the
13separately licensed software that they have included with MySQL.
14
15This program is distributed in the hope that it will be useful,
16but WITHOUT ANY WARRANTY; without even the implied warranty of
17MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
18GNU General Public License, version 2.0, for more details.
19
20You should have received a copy of the GNU General Public License
21along with this program; if not, write to the Free Software
22Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301 USA
23*/
24
25/******************************************************************************
26 ***                                                                        ***
27 ***        Style sheet settings for configuration of MySQL CLuster         ***
28 ***                                                                        ***
29 ******************************************************************************/
30
31body {
32	font-family: Helvetica, Verdana, sans-serif;
33	font-size: 70%;
34	line-height: 1.5em;
35	text-align: left;
36	margin: 0;
37	margin-left: auto;
38	margin-right: auto;
39	padding: 0;
40	background: url(../img/content-bg.png);
41	background-repeat: repeat-x;
42	background-color: #f9fbfc;
43	color: #000000;
44}
45
46#aboutDialog {
47    width: 450px;
48    height: 130px;
49    text-align: center;
50}
51
52/************************** Title, various html styles ************************/
53
54a, a:link, a:visited {
55	text-decoration: none;
56}
57
58a:hover {
59	text-decoration: underline;
60}
61
62img {
63	border: 0;
64}
65
66h1 {
67	font-size: 1.5em;
68	font-weight: bold;
69}
70
71#title {
72    position:absolute;
73    top: 7px;
74    padding-left: 11px;
75}
76
77.title img {
78  vertical-align:middle;
79}
80
81.title span {
82  vertical-align:middle;
83  padding-left: 5px;
84  padding-right: 5px;
85  font-size: 12px;
86}
87
88#title-right {
89  position:absolute;
90  top: 5px;
91  right:5px;
92}
93
94/************************ Panels  surrounding main pane ***********************/
95
96#panel-main-left {
97  position:absolute;
98  top: 0px;
99  left:0px;
100  height:100%;
101  width: 11px;
102  background: url(../img/content-panel-main-left.png);
103}
104
105#panel-main-right {
106  position:absolute;
107  top: 0px;
108  right:0px;
109  height:100%;
110  width: 11px;
111  background: url(../img/content-panel-main-right.png);
112}
113
114#panel-main-bottom {
115  position:absolute;
116  bottom: 0px;
117  height: 12px;
118  left: 0px;
119  right: 0px;
120  background: url(../img/content-panel-main-bottom.png);
121}
122
123#panel-main-img-bottom {
124  position:absolute;
125  left: 0px;
126  bottom: 0px;
127}
128
129/*************************** Top level menu ***********************************/
130
131#menu {
132  position:absolute;
133  top: 38px;
134}
135
136#menu-right {
137  position:absolute;
138  top: 37px;
139  right:5px;
140}
141
142.menu {
143  font-size: 12px;
144  float: left;
145  margin-left: 10px;
146}
147
148.menu img {
149  vertical-align:middle;
150}
151
152.menu span {
153  vertical-align:middle;
154  font-weight: 700;
155  color: #ffffff;
156  padding-left: 5px;
157  padding-right: 5px;
158}
159
160/******* Top level container and title, position and scale correctly **********/
161
162#content-main {
163  display: block;
164  position:absolute;
165  width: auto;
166  top: 64px;
167  left: 20px;
168  right: 20px;
169  bottom: 60px;
170}
171
172#content-main-tab-buttons {
173  position:absolute;
174  bottom: 25px;
175  right: 25px;
176  background-color: #f9fbfc;
177}
178
179#content-main-tab-container {
180  border-bottom-style: solid;
181  border-width: 1px;
182  border-color: #adb6c7;
183}
184
185/********** Tab container style: Make it look like a breadcrumb trail *********/
186
187.dijitTabContainer {
188  width: 100%;
189  height: 100%;
190}
191.dijitTabContainerTop-tabs .dijitTab .dijitTabContent {
192    background: transparent!important;
193    border: none!important;
194}
195.dijitTabContainerTop-tabs .dijitTab .tabLabel {
196    padding-left: 4px;
197    color: #adb6c7;
198    font-size: 14px;
199    font-weight: bold;
200}
201.dijitTabContainerTop-tabs .dijitTabHover .tabLabel {
202  padding-left: 4px!important;
203}
204.dijitTabContainerTop-tabs .dijitTabCheckedHover .tabLabel {
205  padding-left: 4px!important;
206}
207.dijitTabContainerTop-tabs .dijitTabChecked .tabLabel {
208  color: #074260;
209}
210.claro .dijitTabContainerTop-dijitContentPane {
211  background-color: #f9fbfc!important;
212  padding: 8px!important;
213}
214.claro .dijitTabPaneWrapperNested {
215  margin: 4px;
216}
217
218.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
219  padding: 4px!important;
220}
221.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
222  padding: 4px!important;
223}
224.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
225  text-decoration: none;
226}
227
228/****************** Contents within the top level container *******************/
229
230.content-tab-title {
231  color: #074260;
232  font-size: 14px;
233  font-weight: bold;
234}
235
236h2 {
237  color: #074260;
238  font-size: 14px;
239  font-weight: bold;
240  padding: 0;
241  margin: 0;
242}
243
244.content-tab-sub-title {
245  font-size: 11px;
246}
247
248.content-tab-top-panel {
249  margin-left: 10px;
250  margin-right: 10px;
251}
252
253.content-tab-center-panel {
254  border-style: solid;
255  border-width: 1px;
256  border-color: #adb6c7;
257  margin-left: 10%;
258  margin-right: 10%;
259  margin-top: 15px;
260  margin-bottom: 20px;
261  padding: 0!important;
262}
263
264.content-tab-bottom-panel {
265  height: 28px;
266  margin-left: 10px;
267  margin-right: 10px;
268}
269
270.content-block-header {
271  font-size: 12px;
272  padding-top: 30px;
273  padding-bottom: 5px;
274}
275
276.content-block-img {
277  width: 65px;
278  text-align: right;
279  vertical-align: top;
280  padding-right: 12px;
281}
282
283.content-block-info {
284  font-size: 11px;
285  color: #838383;
286  padding-bottom: 10px;
287}
288
289.content-block-data {
290  font-size: 12px;
291}
292
293.content-block-data-subtitle td {
294  font-size: 11px;
295  color: #838383;
296  padding-left: 18px;
297}
298
299.content-block-panel {
300  width: 540px;
301  height: 350px;
302  border-radius: 6px;
303  -moz-border-radius: 6px;
304  -webkit-border-radius: 6px;
305  border: 1px solid #c2c7d3;
306  background-color: #ffffff;
307  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
308  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
309  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
310  padding: 5px;
311}
312
313.content-block-panel-center {
314  display: block;
315  margin-left: auto;
316  margin-right: auto;
317  margin-top: 35px;
318}
319
320.content-grid-header {
321  border: none!important;
322  font-size: 12px;
323  font-weight: 700;
324  margin-bottom: 15px!important;
325  padding: 0!important;
326}
327
328.content-tree-panel {
329  border-style: solid;
330  border-width: 1px;
331  border-color: #adb6c7;
332  height: 100%;
333  width: 240px;
334  padding: 0!important;
335  margin: 0!important;
336}
337
338.content-tree-details-panel {
339  border-style: solid;
340  border-width: 1px;
341  border-color: #adb6c7;
342  height: 100%;
343  padding: 0!important;
344  margin: 0!important;
345}
346
347/*************************** Individual widgets *******************************/
348
349#clusterDetails {
350  margin-left: 15px;
351  margin-bottom: 20px;
352}
353
354#sshDetails {
355  margin-left: 15px;
356  margin-bottom: 20px;
357}
358
359#configDetails {
360  line-height: 1.4em;
361}
362
363#startupDetails {
364  line-height: 1.4em;
365}
366
367#configWizardProgressBar {
368    width: 300px;
369}
370
371/******************* Button without background or border **********************/
372
373.menuButton .dijitButtonNode {
374    margin: 4px;
375    padding: 3px;
376    border: none;
377    color: #074260;
378    font-size: 12px;
379    font-weight: 700;
380    background: transparent;
381}
382
383.menuIconButton .dijitButtonNode {
384    margin: 4px;
385    padding: 3px;
386    border: none;
387    color: #d0d0d0;
388    font-size: 12px;
389    background: transparent;
390}
391
392.menuIconButton .dijitButtonNode .dijitArrowButtonInner {
393    background: transparent;
394    width: 0px;
395}
396
397.iconButton .dijitButtonNode {
398    border: none;
399    background: transparent;
400}
401
402/************************** Tooltip question mark *****************************/
403
404.helpIcon {
405    color: #074260;
406}
407
408/****************************** Various icons *********************************/
409
410.deployIcon {
411    background-image: url('../img/deploy.gif');
412    width: 11px;
413    height: 11px;
414}
415.startIcon {
416    background-image: url('../img/start.gif');
417    width: 11px;
418    height: 11px;
419}
420.stopIcon {
421    background-image: url('../img/stop.gif');
422    width: 11px;
423    height: 11px;
424}
425.leftIcon {
426    background-image: url('../img/left.gif');
427    width: 11px;
428    height: 11px;
429}
430.rightIcon {
431    background-image: url('../img/right.gif');
432    width: 11px;
433    height: 11px;
434}
435.lastIcon {
436    background-image: url('../img/last.gif');
437    width: 11px;
438    height: 11px;
439}
440.dijitIconAdd {
441    background-image: url('../dojo/dijit/themes/claro/images/dnd.png');
442    width: 16px;
443    height: 16px;
444}
445.settingsIcon {
446    background-image: url('../img/settings.gif');
447    width: 18px;
448    height: 18px;
449}
450.arrowIcon {
451    background-image: url('../img/tab-separator.png');
452    width: 11px;
453    height: 17px;
454}
455.newClusterIcon {
456    background-image: url('../img/icon_new_cluster.png');
457    background-position: center center;
458    background-repeat: no-repeat;
459    width: 60px;
460    height: 40px;
461}
462.continueClusterIcon {
463    background-image: url('../img/icon_continue_cluster.png');
464    background-position: center center;
465    background-repeat: no-repeat;
466    width: 60px;
467    height: 40px;
468}
469.anyHostIcon {
470    background-image: url('../img/anyhost.gif');
471    background-position: center center;
472    background-repeat: no-repeat;
473    width: 14px;
474    height: 14px;
475}
476.greenLight {
477    background-image: url('../img/greenlight.gif');
478    background-position: center center;
479    background-repeat: no-repeat;
480    width: 14px;
481    height: 14px;
482}
483.yellowLight {
484    background-image: url('../img/yellowlight.gif');
485    background-position: center center;
486    background-repeat: no-repeat;
487    width: 14px;
488    height: 14px;
489}
490.redLight {
491    background-image: url('../img/redlight.gif');
492    background-position: center center;
493    background-repeat: no-repeat;
494    width: 14px;
495    height: 14px;
496}
497
498