ttrss/lib/dijit/themes/claro/Dialog.css

204 lines
5.3 KiB
CSS
Raw Normal View History

2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
border: 1px solid #769dc0;
-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 {
2011-11-08 16:40:44 +00:00
background: #ffffff repeat-x top left;
border-top: 1px solid #769dc0;
padding: 10px 8px;
position: relative;
}
.claro .dijitDialogPaneContentArea {
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
/* 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;
margin: 10px -8px -10px;
}
.claro .dijitDialogPaneActionBar .dijitButton {
2011-11-08 16:40:44 +00:00
float: none;
}
.claro .dijitDialogTitleBar {
2011-11-08 16:40:44 +00:00
/* outer container for the titlebar of the dialog */
border: 1px solid #ffffff;
border-top: none;
background-color: #abd6ff;
background-image: url("images/titlebar.png");
background-repeat: repeat-x;
padding: 5px 7px 4px 7px;
}
.claro .dijitDialogTitle {
2011-11-08 16:40:44 +00:00
/* typography and styling of the dialog title */
padding: 0 1px;
font-size: 1.091em;
}
.claro .dijitDialogCloseIcon {
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
background-image: url("images/dialogCloseIcon8bit.png");
}
.claro .dijitDialogCloseIconHover {
2011-11-08 16:40:44 +00:00
background-position: -21px;
}
.claro .dijitDialogCloseIconActive {
2011-11-08 16:40:44 +00:00
background-position: -42px;
}
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
/* leave room for arrow above content */
padding-top: 13px;
padding-left: 3px;
padding-right: 3px;
}
.dijitTooltipAbove {
2011-11-08 16:40:44 +00:00
/* leave room for arrow below content */
padding-bottom: 13px;
padding-left: 3px;
padding-right: 3px;
}
.claro .dijitTooltipContainer {
2011-11-08 16:40:44 +00:00
/* the part with the text */
background-color: #ffffff;
background-image: url("images/tooltipGradient.png");
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #769dc0;
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;
}
.dj_ie6 .claro .dijitTooltipContainer {
2011-11-08 16:40:44 +00:00
background-image: none;
}
.claro .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
background-image: url("images/tooltip8bit.png");
}
.claro .dijitTooltipABRight .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* 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 */
left: auto !important;
right: 3px;
}
.claro .dijitTooltipBelow .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* the arrow piece for tooltips below an element */
top: 0;
left: 3px;
background-position: -31px 0;
width: 16px;
height: 14px;
}
.claro .dijitTooltipAbove .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* the arrow piece for tooltips above an element */
bottom: 0;
left: 3px;
background-position: -15px 0;
width: 16px;
height: 14px;
}
2011-11-08 16:40:44 +00:00
.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
bottom: -1px;
}
.claro .dijitTooltipLeft {
2011-11-08 16:40:44 +00:00
padding-right: 14px;
}
.claro .dijitTooltipLeft .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
padding-left: 14px;
}
.claro .dijitTooltipRight .dijitTooltipConnector {
2011-11-08 16:40:44 +00:00
/* 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 {
2011-11-08 16:40:44 +00:00
background: #ffffff;
}