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