760 lines
15 KiB
CSS
760 lines
15 KiB
CSS
/*
|
|
Copyright (c) 2012, 2019, Oracle and/or its affiliates. All rights reserved.
|
|
|
|
This program is free software; you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation; version 2 of the License.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with this program; if not, write to the Free Software
|
|
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
|
*/
|
|
|
|
/******************************************************************************
|
|
*** ***
|
|
*** Style sheet settings for configuration of MySQL CLuster ***
|
|
*** ***
|
|
******************************************************************************/
|
|
|
|
body {
|
|
font-family: Helvetica, Verdana, sans-serif;
|
|
font-size: 70%;
|
|
line-height: 1.5em;
|
|
text-align: left;
|
|
margin: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
padding: 0;
|
|
background: url(../img/content-bg.png);
|
|
background-repeat: repeat-x;
|
|
background-color: #f9fbfc;
|
|
color: #000000;
|
|
}
|
|
|
|
#aboutDialog {
|
|
width: 450px;
|
|
height: 130px;
|
|
text-align: center;
|
|
}
|
|
|
|
/************************** Modal dialog for messages ************************/
|
|
/* The Modal (background) */
|
|
.modalinfohf, .modalinfoh, .modalinfo {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1001; /* Sit on top, 1001 BECAUSE OF dojo */
|
|
padding-top: 100px; /* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
/*overflow: auto; /* Enable scroll if needed */
|
|
overflow: hidden;
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
|
|
-webkit-animation-name: fadeIn;
|
|
-webkit-animation-duration: 0.6s;
|
|
animation-name: fadeIn;
|
|
animation-duration: 0.6s
|
|
}
|
|
|
|
/* Full Modal Content H + B + F*/
|
|
.modalinfohf-content, .modalinfoh-content, .modalinfo-content {
|
|
background-color: #fefefe;
|
|
margin: auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 60%;
|
|
height: auto;
|
|
/*overrides height, 80% of view height - 100px taken by top margin of verlay*/
|
|
max-height: calc(80vh - 100px);
|
|
-webkit-animation-name: fadeIn;
|
|
-webkit-animation-duration: 0.6s;
|
|
/* standard names for compatibility */
|
|
animation-name: fadeIn;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
/* Just Modal Body Text */
|
|
.modalinfohf-body, .modalinfoh-body, .modalinfo-body {
|
|
/*overrides height, 80% of view height - px taken by top margin of verlay and header*/
|
|
/*There is always something in the header, at least X to close the modal.*/
|
|
/*This does not cover for eventual footer :-/ */
|
|
max-height: calc(80vh - 260px);
|
|
height: auto; /*when content fits*/
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* The Close Button */
|
|
.closei, .closeih, .closeihf {
|
|
color: #aaaaaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.closei:hover, .closeih:hover, .closeihf:hover,
|
|
.closei:focus, .closeih:focus, .closeihf:focus {
|
|
color: #000;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
from {opacity: 0}
|
|
to {opacity: 1}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {opacity: 0}
|
|
to {opacity: 1}
|
|
}
|
|
/************************** Title, various html styles ************************/
|
|
|
|
a, a:link, a:visited {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*label {
|
|
font-size: medium;
|
|
}*/
|
|
|
|
#title {
|
|
position:absolute;
|
|
top: 7px;
|
|
padding-left: 11px;
|
|
}
|
|
|
|
.title img {
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.title span {
|
|
vertical-align:middle;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#title-right {
|
|
position:absolute;
|
|
top: 5px;
|
|
right:5px;
|
|
}
|
|
|
|
/************************ Panels surrounding main pane ***********************/
|
|
|
|
#panel-main-left {
|
|
position:absolute;
|
|
top: 0px;
|
|
left:0px;
|
|
height:100%;
|
|
width: 11px;
|
|
background: url(../img/content-panel-main-left.png);
|
|
}
|
|
|
|
#panel-main-right {
|
|
position:absolute;
|
|
top: 0px;
|
|
right:0px;
|
|
height:100%;
|
|
width: 11px;
|
|
background: url(../img/content-panel-main-right.png);
|
|
}
|
|
|
|
#panel-main-bottom {
|
|
position:absolute;
|
|
bottom: 0px;
|
|
height: 12px;
|
|
left: 0px;
|
|
right: 0px;
|
|
background: url(../img/content-panel-main-bottom.png);
|
|
}
|
|
|
|
#panel-main-img-bottom {
|
|
position:absolute;
|
|
left: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
/*************************** Top level menu ***********************************/
|
|
|
|
#menu {
|
|
position:absolute;
|
|
top: 38px;
|
|
}
|
|
|
|
#menu-right {
|
|
position:absolute;
|
|
top: 37px;
|
|
right:5px;
|
|
}
|
|
|
|
.menu {
|
|
font-size: 12px;
|
|
float: left;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.menu img {
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.menu span {
|
|
vertical-align:middle;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/******* Top level container and title, position and scale correctly **********/
|
|
|
|
#content-main {
|
|
display: block;
|
|
position:absolute;
|
|
width: auto;
|
|
top: 64px;
|
|
left: 20px;
|
|
right: 20px;
|
|
bottom: 60px;
|
|
}
|
|
|
|
#content-main-tab-buttons {
|
|
position:absolute;
|
|
bottom: 25px;
|
|
right: 25px;
|
|
background-color: #f9fbfc;
|
|
}
|
|
|
|
#content-main-tab-cfgstatusbuttons {
|
|
position:absolute;
|
|
bottom: 25px;
|
|
left: 25px;
|
|
background-color: #f9fbfc;
|
|
}
|
|
|
|
#content-main-tab-container {
|
|
border-bottom-style: solid;
|
|
border-width: 1px;
|
|
border-color: #adb6c7;
|
|
}
|
|
|
|
/********** Tab container style: Make it look like a breadcrumb trail *********/
|
|
|
|
.dijitTabContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.dijitTabContainerTop-tabs .dijitTab .dijitTabContent {
|
|
background: transparent!important;
|
|
border: none!important;
|
|
}
|
|
.dijitTabContainerTop-tabs .dijitTab .tabLabel {
|
|
padding-left: 4px;
|
|
color: #adb6c7;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.dijitTabContainerTop-tabs .dijitTabHover .tabLabel {
|
|
padding-left: 4px!important;
|
|
}
|
|
.dijitTabContainerTop-tabs .dijitTabCheckedHover .tabLabel {
|
|
padding-left: 4px!important;
|
|
}
|
|
.dijitTabContainerTop-tabs .dijitTabChecked .tabLabel {
|
|
color: #074260;
|
|
}
|
|
.claro .dijitTabContainerTop-dijitContentPane {
|
|
background-color: #f9fbfc!important;
|
|
padding: 8px!important;
|
|
}
|
|
.claro .dijitTabPaneWrapperNested {
|
|
margin: 4px;
|
|
}
|
|
|
|
.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent {
|
|
padding: 4px!important;
|
|
}
|
|
.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent {
|
|
padding: 4px!important;
|
|
}
|
|
.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/****************** Contents within the top level container *******************/
|
|
|
|
.content-tab-title {
|
|
color: #074260;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h2 {
|
|
color: #074260;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.content-tab-sub-title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.content-tab-top-panel {
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.content-tab-center-panel {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #adb6c7;
|
|
margin-left: 10%;
|
|
margin-right: 10%;
|
|
margin-top: 15px;
|
|
margin-bottom: 20px;
|
|
padding: 0!important;
|
|
}
|
|
|
|
.content-tab-bottom-panel {
|
|
height: 32px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.content-block-header {
|
|
font-size: 12px;
|
|
padding-top: 30px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.content-block-img {
|
|
width: 65px;
|
|
text-align: right;
|
|
vertical-align: top;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.content-block-info {
|
|
font-size: 11px;
|
|
color: #838383;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.content-block-data {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.content-block-data-subtitle td {
|
|
font-size: 11px;
|
|
color: #838383;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.content-block-panel {
|
|
width: 540px;
|
|
height: 350px;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
-webkit-border-radius: 6px;
|
|
border: 1px solid #c2c7d3;
|
|
background-color: #ffffff;
|
|
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
|
|
-moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
|
|
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.60);
|
|
padding: 5px;
|
|
}
|
|
|
|
.content-block-panel-center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.content-grid-header {
|
|
border: none!important;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px!important;
|
|
padding: 0!important;
|
|
}
|
|
|
|
.content-tree-panel {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #adb6c7;
|
|
height: 100%;
|
|
width: 240px;
|
|
padding: 0!important;
|
|
margin: 0!important;
|
|
}
|
|
|
|
.content-tree-details-panel {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: #adb6c7;
|
|
height: 100%;
|
|
padding: 0!important;
|
|
margin: 0!important;
|
|
}
|
|
|
|
/*************************** Individual widgets *******************************/
|
|
|
|
#clusterDetails {
|
|
margin-left: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#sshDetails {
|
|
margin-left: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#installDetails {
|
|
margin-left: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#configDetails {
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
#startupDetails {
|
|
line-height: 1.4em;
|
|
}
|
|
|
|
#configWizardProgressBar {
|
|
width: 300px;
|
|
}
|
|
|
|
#hostGrid .dojoxGridSortNode {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
padding: 1px;
|
|
margin: 0px;
|
|
}
|
|
|
|
#hostGrid .dojoxGridSortNode:hover {
|
|
overflow: visible;
|
|
}
|
|
/******************* Button without background or border **********************/
|
|
|
|
.menuButton .dijitButtonNode {
|
|
margin: 4px;
|
|
padding: 3px;
|
|
border: none;
|
|
color: #074260;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
background: transparent;
|
|
}
|
|
|
|
.menuIconButton .dijitButtonNode {
|
|
margin: 4px;
|
|
padding: 3px;
|
|
border: none;
|
|
color: #d0d0d0;
|
|
font-size: 12px;
|
|
background: transparent;
|
|
}
|
|
|
|
.menuIconButton .dijitButtonNode .dijitArrowButtonInner {
|
|
background: transparent;
|
|
width: 0px;
|
|
}
|
|
|
|
.iconButton .dijitButtonNode {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
|
|
/*********** Button without background but with border and hoover **************/
|
|
.fbtn .dijitButtonNode {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
padding: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.8em;
|
|
appearance: none;
|
|
box-shadow: none;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
-webkit-border-radius: 6px;
|
|
background: transparent!important;
|
|
}
|
|
|
|
.fbtn .dijitButtonNode:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.fbtn .dijitButtonNode:border {
|
|
color: #6496c8;
|
|
background: rgba(0,0,0,0);
|
|
border: solid 5px #6496c8;
|
|
}
|
|
|
|
.fbtn .dijitButtonNode:hover {
|
|
/* border-color: #346392; */
|
|
border-color: DodgerBlue;
|
|
color: #346392;
|
|
}
|
|
|
|
.fbtn .dijitButtonNode:active {
|
|
border-color: #6496c8; /* #27496d; */
|
|
color: #27496d;
|
|
transform: translateY(1px);
|
|
-webkit-transform: translateY(1px);
|
|
-moz-transform: translateY(1px);
|
|
}
|
|
|
|
.fbtn.fbtnDisabled.dijitDisabled {
|
|
opacity: 0.45;
|
|
cursor: no-drop;
|
|
user-select: none;
|
|
}
|
|
|
|
.fbtn.fbtnDisabled.dijitReadOnly {
|
|
opacity: 0.45;
|
|
cursor: no-drop;
|
|
user-select: none;
|
|
}
|
|
|
|
/*********** Button without background but with border and hoover **************/
|
|
/***** This is for hostTree.addProcessDlgSetup, "Add processes" dialog box *****/
|
|
.fbtn2 .dijitButtonNode {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
font-size: 12px;
|
|
line-height: 1.8em;
|
|
appearance: none;
|
|
box-shadow: none;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
-webkit-border-radius: 6px;
|
|
background: transparent!important;
|
|
width: 92px;
|
|
}
|
|
|
|
.fbtn2 .dijitButtonNode:focus {
|
|
outline: none
|
|
}
|
|
|
|
.fbtn2 .dijitButtonNode:border {
|
|
color: #6496c8;
|
|
background: rgba(0,0,0,0);
|
|
border: solid 5px #6496c8;
|
|
}
|
|
|
|
.fbtn2 .dijitButtonNode:hover {
|
|
/*border-color: #346392;*/
|
|
border-color: DodgerBlue;
|
|
color: #346392;
|
|
}
|
|
|
|
.fbtn2 .dijitButtonNode:active {
|
|
border-color: #6496c8; /*#27496d;*/
|
|
color: #27496d;
|
|
transform: translateY(1px);
|
|
-webkit-transform: translateY(1px);
|
|
-moz-transform: translateY(1px);
|
|
}
|
|
|
|
/***** This is for bottom of the page config. status buttons *****/
|
|
.fbtn3 .dijitButtonNode {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
font-size: 12px;
|
|
line-height: 1.8em;
|
|
appearance: none;
|
|
box-shadow: none;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
-webkit-border-radius: 6px;
|
|
background: transparent!important;
|
|
width: auto;
|
|
color: white;
|
|
}
|
|
|
|
.fbtn3 .dijitButtonNode:focus {
|
|
outline: none
|
|
}
|
|
|
|
.fbtn3 .dijitButtonNode:border {
|
|
color: #6496c8;
|
|
background: rgba(0,0,0,0);
|
|
border: solid 5px #6496c8;
|
|
}
|
|
|
|
/*.fbtn3 .dijitButtonNode:hover {
|
|
border-color: DodgerBlue;
|
|
color: #346392;
|
|
}*/
|
|
|
|
.fbtn3 .dijitButtonNode:active {
|
|
/* border-color: #6496c8;
|
|
color: #27496d;*/
|
|
transform: translateY(1px);
|
|
-webkit-transform: translateY(1px);
|
|
-moz-transform: translateY(1px);
|
|
}
|
|
|
|
/********************** Toggle view of passwords button ***********************/
|
|
.tglbtn {
|
|
display: inline-block;
|
|
margin: 1px;
|
|
padding: 2px;
|
|
font-size: 14px;
|
|
line-height: 1.8em;
|
|
appearance: none;
|
|
box-shadow: none;
|
|
width: 21px;
|
|
height: 21px;
|
|
background: url(../img/pwdshow_btn_small.png) no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.tglbtn:focus {
|
|
outline: none
|
|
}
|
|
|
|
.tglbtn:border {
|
|
color: #6496c8;
|
|
background: rgba(0,0,0,0);
|
|
border: solid 1px #6496c8;
|
|
}
|
|
|
|
.tglbtn:hover {
|
|
/*border-color: #346392;*/
|
|
border-color: DodgerBlue;
|
|
color: #346392;
|
|
}
|
|
|
|
.tglbtn:active {
|
|
border-color: #6496c8; /*#27496d;*/
|
|
color: #27496d;
|
|
}
|
|
|
|
.tglbtn:disabled {
|
|
background: #dddddd;
|
|
}
|
|
/************************** Tooltip question mark *****************************/
|
|
|
|
.helpIcon {
|
|
color: #074260;
|
|
}
|
|
|
|
/****************************** Various icons *********************************/
|
|
|
|
.installIcon {
|
|
background-image: url('../img/flag.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.deployIcon {
|
|
background-image: url('../img/deploy.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.startIcon {
|
|
background-image: url('../img/start.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.stopIcon {
|
|
background-image: url('../img/stop.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.viewIcon {
|
|
background-image: url('../img/icons8-view-50.png');
|
|
width: 16px;
|
|
height: 15px;
|
|
}
|
|
.leftIcon {
|
|
background-image: url('../img/left.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.rightIcon {
|
|
background-image: url('../img/right.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.lastIcon {
|
|
background-image: url('../img/last.gif');
|
|
width: 11px;
|
|
height: 11px;
|
|
}
|
|
.dijitIconAdd {
|
|
background-image: url('../dojo/dijit/themes/claro/images/dnd.png');
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.settingsIcon {
|
|
background-image: url('../img/settings.gif');
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.arrowIcon {
|
|
background-image: url('../img/tab-separator.png');
|
|
width: 11px;
|
|
height: 17px;
|
|
}
|
|
.anyHostIcon {
|
|
background-image: url('../img/anyhost.gif');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.greenLight {
|
|
background-image: url('../img/greenlight.gif');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.yellowLight {
|
|
background-image: url('../img/yellowlight.gif');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
.redLight {
|
|
background-image: url('../img/redlight.gif');
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
/***************** Wrap <pre> when showing log of commands ********************/
|
|
pre{
|
|
white-space: pre-wrap;
|
|
} |