You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
6.4 KiB
223 lines
6.4 KiB
/* Dialog |
|
* |
|
* Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog |
|
* |
|
* Dialog: |
|
* 1. Dialog (default styling): |
|
* .dijitDialog - styles for dialog's bounding box |
|
* |
|
* 2. Dialog title |
|
* .dijitDialogTitleBar - styles for the title container at the top of dialog |
|
* .dijitDialogTitle - the text container in dialog title |
|
* |
|
* 3. Dialog content |
|
* .dijitDialogPaneContent - main container for content area and action bar |
|
* .dijitDialogPaneContentArea - styles for content container |
|
* |
|
* 4. Dialog action bar |
|
* .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content |
|
* |
|
* 5. Dialog underlay |
|
* .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content |
|
* |
|
* |
|
* Tooltip & TooltipDialog: |
|
* 1. tooltip content container: |
|
* .dijitTooltipContainer - tooltip content container |
|
* |
|
* 2. tooltip connector: |
|
* .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) |
|
*/ |
|
.claro .dijitDialog { |
|
border: 1px solid #759dc0; |
|
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); |
|
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); |
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); |
|
} |
|
.claro .dijitDialogPaneContent { |
|
background: #ffffff repeat-x top left; |
|
border-top: 1px solid #759dc0; |
|
padding: 10px 8px; |
|
position: relative; |
|
} |
|
.claro .dijitDialogPaneContentArea { |
|
/* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from |
|
* left to right but still indent dialog content |
|
*/ |
|
margin: -10px -8px; |
|
padding: 10px 8px; |
|
} |
|
.claro .dijitDialogPaneActionBar { |
|
/* gray bar at bottom of dialog with OK/Cancel buttons */ |
|
|
|
background-color: #efefef; |
|
padding: 3px 5px 2px 7px; |
|
text-align: right; |
|
border-top: 1px solid #d3d3d3; |
|
} |
|
.claro .dijitDialogPaneContent .dijitDialogPaneActionBar { |
|
margin: 10px -8px -10px; |
|
} |
|
.claro .dijitTooltipDialog .dijitDialogPaneActionBar { |
|
-webkit-border-bottom-right-radius: 4px; |
|
-webkit-border-bottom-left-radius: 4px; |
|
border-bottom-right-radius: 4px; |
|
border-bottom-left-radius: 4px; |
|
-moz-border-radius-bottomright: 4px; |
|
-moz-border-radius-bottomleft: 4px; |
|
margin: 10px -10px -8px; |
|
} |
|
.claro .dijitDialogPaneActionBar .dijitButton { |
|
float: none; |
|
} |
|
.claro .dijitDialogTitleBar { |
|
/* outer container for the titlebar of the dialog */ |
|
|
|
border: 1px solid #ffffff; |
|
border-top: none; |
|
background-color: #abd6ff; |
|
background-image: url("images/standardGradient.png"); |
|
background-repeat: repeat-x; |
|
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
|
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
|
background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
|
background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); |
|
_background-image: none; |
|
padding: 5px 7px 4px 7px; |
|
} |
|
.claro .dijitDialogTitle { |
|
/* typography and styling of the dialog title */ |
|
|
|
padding: 0 1px; |
|
font-size: 1.091em; |
|
color: #000000; |
|
} |
|
.claro .dijitDialogCloseIcon { |
|
/* the default close icon for the dialog */ |
|
|
|
background: url("images/dialogCloseIcon.png"); |
|
background-repeat: no-repeat; |
|
position: absolute; |
|
right: 5px; |
|
height: 15px; |
|
width: 21px; |
|
} |
|
.dj_ie6 .claro .dijitDialogCloseIcon { |
|
background-image: url("images/dialogCloseIcon8bit.png"); |
|
} |
|
.claro .dijitDialogCloseIconHover { |
|
background-position: -21px; |
|
} |
|
.claro .dijitDialogCloseIcon:active { |
|
background-position: -42px; |
|
} |
|
/* Tooltip and TooltipDialog */ |
|
.claro .dijitTooltip, |
|
.claro .dijitTooltipDialog { |
|
/* the outermost dom node, holding the connector and container */ |
|
|
|
background: transparent; |
|
/* make the area on the sides of the arrow transparent */ |
|
|
|
} |
|
.dijitTooltipBelow { |
|
/* leave room for arrow above content */ |
|
|
|
padding-top: 13px; |
|
padding-left: 3px; |
|
padding-right: 3px; |
|
} |
|
.dijitTooltipAbove { |
|
/* leave room for arrow below content */ |
|
|
|
padding-bottom: 13px; |
|
padding-left: 3px; |
|
padding-right: 3px; |
|
} |
|
.claro .dijitTooltipContainer { |
|
/* the part with the text */ |
|
|
|
background-color: #ffffff; |
|
background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); |
|
background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); |
|
background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); |
|
background-image: linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px); |
|
background-position: bottom; |
|
border: 1px solid #759dc0; |
|
padding: 6px 8px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); |
|
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); |
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); |
|
font-size: 1em; |
|
color: #000000; |
|
} |
|
.claro .dijitTooltipConnector { |
|
/* the arrow piece */ |
|
|
|
border: 0; |
|
z-index: 2; |
|
background-image: url("images/tooltip.png"); |
|
background-repeat: no-repeat; |
|
width: 16px; |
|
height: 14px; |
|
} |
|
.dj_ie6 .claro .dijitTooltipConnector { |
|
background-image: url("images/tooltip8bit.png"); |
|
} |
|
.claro .dijitTooltipBelow .dijitTooltipConnector { |
|
/* the arrow piece for tooltips below an element */ |
|
|
|
top: 0; |
|
left: 3px; |
|
background-position: -31px 0; |
|
width: 16px; |
|
height: 14px; |
|
} |
|
.claro .dijitTooltipAbove .dijitTooltipConnector { |
|
/* the arrow piece for tooltips above an element */ |
|
|
|
bottom: 0; |
|
left: 3px; |
|
background-position: -15px 0; |
|
width: 16px; |
|
height: 14px; |
|
} |
|
.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, |
|
.dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector { |
|
bottom: -1px; |
|
} |
|
.claro .dijitTooltipABRight .dijitTooltipConnector { |
|
/* above or below tooltip, but the arrow appears on the right, |
|
and the right edges of target and tooltip are aligned rather than the left. |
|
Override above rules for .dijitTooltipBelow, .dijitTooltipAbove */ |
|
|
|
left: auto; |
|
right: 3px; |
|
} |
|
.claro .dijitTooltipLeft { |
|
padding-right: 14px; |
|
} |
|
.claro .dijitTooltipLeft .dijitTooltipConnector { |
|
/* the arrow piece for tooltips to the left of an element, bottom borders aligned */ |
|
|
|
right: 0; |
|
background-position: 0 0; |
|
width: 16px; |
|
height: 14px; |
|
} |
|
.claro .dijitTooltipRight { |
|
padding-left: 14px; |
|
} |
|
.claro .dijitTooltipRight .dijitTooltipConnector { |
|
/* the arrow piece for tooltips to the right of an element, bottom borders aligned */ |
|
|
|
left: 0; |
|
background-position: -48px 0; |
|
width: 16px; |
|
height: 14px; |
|
} |
|
.claro .dijitDialogUnderlay { |
|
background: #ffffff; |
|
}
|
|
|