www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/settings_tray/css/off-canvas.theme.css

   1 /**
   2  * @file
   3  * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
   4  */
   5
   6 /* Style the dialog-off-canvas container. */
   7 .ui-dialog.ui-dialog-off-canvas {
   8   background: #444;
   9   border: 0 solid transparent;
  10   border-radius: 0;
  11   box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
  12   padding: 0;
  13   color: #ddd;
  14   /* Layer the dialog just under the toolbar. */
  15   z-index: 501;
  16 }
  17
  18 /* Style the tray header. */
  19 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
  20   padding: 1em;
  21   background: #2d2d2d;
  22   border: 0;
  23   border-bottom: 1px solid #000;
  24   border-radius: 0;
  25   font-weight: normal;
  26   color: #fff;
  27 }
  28 /* Hide the default jQuery UI dialog close button. */
  29 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
  30   visibility: hidden;
  31 }
  32 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
  33   background-image: url(../../../misc/icons/bebebe/ex.svg);
  34   background-position: center center;
  35   background-repeat: no-repeat;
  36   background-color: transparent;
  37   border: 0;
  38   position: absolute;
  39   right: 1em;
  40   transition: background .5s ease;
  41 }
  42 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
  43   background-image: url(../../../misc/icons/ffffff/ex.svg);
  44 }
  45 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
  46   left: 1em;
  47   right: auto;
  48 }
  49 .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
  50   margin: 0;
  51   /* Push the text away from the icon. */
  52   padding-left: 30px; /* LTR */
  53   padding-right: 0; /* LTR */
  54   /* Ensure that long titles do not overlap the close button. */
  55   max-width: 210px;
  56   font-size: 16px;
  57   font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
  58   text-align: left; /* LTR */
  59 }
  60 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
  61   float: right;
  62   text-align: right;
  63   padding-left: 0;
  64   padding-right: 30px;
  65 }
  66 .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
  67   background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
  68   background-size: 100% auto;
  69   content: '';
  70   display: block;
  71   height: 100%;
  72   position: absolute;
  73   left: 1em; /* LTR */
  74   top: 0;
  75   width: 20px;
  76 }
  77 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
  78   left: auto;
  79   right: 1em;
  80 }
  81
  82 /* Override default styling from jQuery UI. */
  83 #drupal-off-canvas .ui-state-default,
  84 #drupal-off-canvas .ui-widget-content .ui-state-default,
  85 #drupal-off-canvas .ui-widget-header .ui-state-default {
  86   border: 0;
  87   font-weight: normal;
  88   font-size: 14px;
  89   color: #333;
  90 }
  91 #drupal-off-canvas .ui-widget-content a {
  92   color: #85bef4;
  93 }