lib/dijit/themes/claro/Dialog.css

   1 /* Dialog
   2  *
   3  * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
   4  *
   5  * Dialog:
   6  * 1. Dialog (default styling):
   7  *              .dijitDialog - styles for dialog's bounding box
   8  *
   9  * 2. Dialog title
  10  *              .dijitDialogTitleBar - styles for the title container at the top of dialog
  11  *              .dijitDialogTitle - the text container in dialog title
  12  *
  13  * 3. Dialog content
  14  *              .dijitDialogPaneContent - main container for content area and action bar
  15  *              .dijitDialogPaneContentArea - styles for content container
  16  *
  17  * 4. Dialog action bar
  18  *              .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
  19  *
  20  * 5. Dialog underlay
  21  *              .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
  22  *
  23  *
  24  * Tooltip & TooltipDialog:
  25  * 1. tooltip content container:
  26  *              .dijitTooltipContainer - tooltip content container
  27  *
  28  * 2. tooltip connector:
  29  *              .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
  30  */
  31 .claro .dijitDialog {
  32   border: 1px solid #759dc0;
  33   -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  34   -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  35   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  36 }
  37 .claro .dijitDialogPaneContent {
  38   background: #ffffff repeat-x top left;
  39   border-top: 1px solid #759dc0;
  40   padding: 10px 8px;
  41   position: relative;
  42 }
  43 .claro .dijitDialogPaneContentArea {
  44   /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from
  45          * left to right but still indent dialog content
  46          */
  47   margin: -10px -8px;
  48   padding: 10px 8px;
  49 }
  50 .claro .dijitDialogPaneActionBar {
  51   /* gray bar at bottom of dialog with OK/Cancel buttons */
  52
  53   background-color: #efefef;
  54   padding: 3px 5px 2px 7px;
  55   text-align: right;
  56   border-top: 1px solid #d3d3d3;
  57   margin: 10px -8px -10px;
  58 }
  59 .claro .dijitTooltipDialog .dijitDialogPaneActionBar {
  60   -webkit-border-bottom-right-radius: 4px;
  61   -webkit-border-bottom-left-radius: 4px;
  62   border-bottom-right-radius: 4px;
  63   border-bottom-left-radius: 4px;
  64   -moz-border-radius-bottomright: 4px;
  65   -moz-border-radius-bottomleft: 4px;
  66   margin: 10px -10px -8px;
  67 }
  68 .claro .dijitDialogPaneActionBar .dijitButton {
  69   float: none;
  70 }
  71 .claro .dijitDialogTitleBar {
  72   /* outer container for the titlebar of the dialog */
  73
  74   border: 1px solid #ffffff;
  75   border-top: none;
  76   background-color: #abd6ff;
  77   background-image: url("images/standardGradient.png");
  78   background-repeat: repeat-x;
  79   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  80   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  81   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  82   background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  83   _background-image: none;
  84   padding: 5px 7px 4px 7px;
  85 }
  86 .claro .dijitDialogTitle {
  87   /* typography and styling of the dialog title */
  88
  89   padding: 0 1px;
  90   font-size: 1.091em;
  91   color: #000000;
  92 }
  93 .claro .dijitDialogCloseIcon {
  94   /* the default close icon for the dialog */
  95
  96   background: url("images/dialogCloseIcon.png");
  97   background-repeat: no-repeat;
  98   position: absolute;
  99   right: 5px;
 100   height: 15px;
 101   width: 21px;
 102 }
 103 .dj_ie6 .claro .dijitDialogCloseIcon {
 104   background-image: url("images/dialogCloseIcon8bit.png");
 105 }
 106 .claro .dijitDialogCloseIconHover {
 107   background-position: -21px;
 108 }
 109 .claro .dijitDialogCloseIconActive {
 110   background-position: -42px;
 111 }
 112 /* Tooltip and TooltipDialog */
 113 .claro .dijitTooltip, .claro .dijitTooltipDialog {
 114   /* the outermost dom node, holding the connector and container */
 115
 116   background: transparent;
 117   /* make the area on the sides of the arrow transparent */
 118
 119 }
 120 .dijitTooltipBelow {
 121   /* leave room for arrow above content */
 122
 123   padding-top: 13px;
 124   padding-left: 3px;
 125   padding-right: 3px;
 126 }
 127 .dijitTooltipAbove {
 128   /* leave room for arrow below content */
 129
 130   padding-bottom: 13px;
 131   padding-left: 3px;
 132   padding-right: 3px;
 133 }
 134 .claro .dijitTooltipContainer {
 135   /* the part with the text */
 136
 137   background-color: #ffffff;
 138   background-image: -moz-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
 139   background-image: -webkit-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
 140   background-image: -o-linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
 141   background-image: linear-gradient(bottom, rgba(207, 229, 250, 0.1) 0px, #ffffff 10px);
 142   background-position: bottom;
 143   border: 1px solid #759dc0;
 144   padding: 6px 8px;
 145   -moz-border-radius: 4px;
 146   border-radius: 4px;
 147   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
 148   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
 149   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
 150   font-size: 1em;
 151   color: #000000;
 152 }
 153 .claro .dijitTooltipConnector {
 154   /* the arrow piece */
 155
 156   border: 0;
 157   z-index: 2;
 158   background-image: url("images/tooltip.png");
 159   background-repeat: no-repeat;
 160   width: 16px;
 161   height: 14px;
 162 }
 163 .dj_ie6 .claro .dijitTooltipConnector {
 164   background-image: url("images/tooltip8bit.png");
 165 }
 166 .claro .dijitTooltipABRight .dijitTooltipConnector {
 167   /* above or below tooltip, but the arrow appears on the right,
 168                 and the right edges of target and tooltip are aligned rather than the left */
 169
 170   left: auto !important;
 171   right: 3px;
 172 }
 173 .claro .dijitTooltipBelow .dijitTooltipConnector {
 174   /* the arrow piece for tooltips below an element */
 175
 176   top: 0;
 177   left: 3px;
 178   background-position: -31px 0;
 179   width: 16px;
 180   height: 14px;
 181 }
 182 .claro .dijitTooltipAbove .dijitTooltipConnector {
 183   /* the arrow piece for tooltips above an element */
 184
 185   bottom: 0;
 186   left: 3px;
 187   background-position: -15px 0;
 188   width: 16px;
 189   height: 14px;
 190 }
 191 .dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
 192   bottom: -1px;
 193 }
 194 .claro .dijitTooltipLeft {
 195   padding-right: 14px;
 196 }
 197 .claro .dijitTooltipLeft .dijitTooltipConnector {
 198   /* the arrow piece for tooltips to the left of an element, bottom borders aligned */
 199
 200   right: 0;
 201   background-position: 0 0;
 202   width: 16px;
 203   height: 14px;
 204 }
 205 .claro .dijitTooltipRight {
 206   padding-left: 14px;
 207 }
 208 .claro .dijitTooltipRight .dijitTooltipConnector {
 209   /* the arrow piece for tooltips to the right of an element, bottom borders aligned */
 210
 211   left: 0;
 212   background-position: -48px 0;
 213   width: 16px;
 214   height: 14px;
 215 }
 216 .claro .dijitDialogUnderlay {
 217   background: #ffffff;
 218 }