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

   1 /**
   2  * @file
   3  * Visual styling for Settings Tray module.
   4  */
   5
   6 /* @todo Move this into toolbar when this module is no longer experimental:
   7  *   https://www.drupal.org/node/2784593.
   8  */
   9
  10 /* Style the edit mode toolbar and tabs. */
  11 #toolbar-bar.js-outside-in-edit-mode {
  12   background-color: #fff;
  13 }
  14 .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
  15   color: #999;
  16 }
  17 .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
  18   color: #333;
  19 }
  20
  21 /* Style both the edit and editing states of the contextual links toggle tab. */
  22 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item,
  23 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
  24 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
  25   background-color: #50a0e9;
  26   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  27   color: #ddd;
  28   text-shadow: none;
  29   font-weight: bold;
  30   outline: none;
  31 }
  32 /* Make the hover of the inactive state the same as the active state. */
  33 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
  34 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
  35   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
  36   color: #fff;
  37 }
  38 /* Make the hover of the active state the same as the inactive state. */
  39 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
  40   background-color: #2369a6;
  41   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
  42   color: #fff;
  43 }
  44 /* Make the inactive icon grey. */
  45 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:before {
  46   background-image: url(../../../misc/icons/bebebe/pencil.svg);
  47 }
  48 /* Make the active icon white. */
  49 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:before {
  50   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  51 }
  52 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover:before {
  53   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  54 }
  55 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover > .toolbar-icon-edit:before {
  56   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  57 }
  58 .toolbar-tab > .button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
  59   background-image: url(../../../misc/icons/ffffff/pencil.svg);
  60 }
  61
  62 /* Style the editables while in edit mode. */
  63 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
  64   outline: 1px dashed rgba(0,0,0,0.5);
  65   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
  66 }
  67 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
  68 .dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
  69   background-color: rgba(0,0,0,0.2);
  70 }
  71
  72 /* Style the dialog-off-canvas container. */
  73 .ui-dialog-outside-in {
  74   background: #444;
  75   border: 0 solid transparent;
  76   border-radius: 0;
  77   box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
  78   padding: 0;
  79   color: #ddd;
  80   /* Layer the dialog just under the toolbar. */
  81   z-index: 501;
  82 }
  83
  84 /* Style content in the tray. */
  85 .ui-dialog-outside-in p,
  86 .ui-dialog-outside-in h1,
  87 .ui-dialog-outside-in h2,
  88 .ui-dialog-outside-in h3,
  89 .ui-dialog-outside-in h4,
  90 .ui-dialog-outside-in h5,
  91 .ui-dialog-outside-in h6,
  92 .ui-dialog-outside-in pre,
  93 .ui-dialog-outside-in legend,
  94 .ui-dialog-outside-in cite,
  95 .ui-dialog-outside-in span,
  96 .ui-dialog-outside-in summary,
  97 .ui-dialog-outside-in details,
  98 .ui-dialog-outside-in .form-item {
  99   color: #ddd;
 100   font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
 101   font-size: 14px;
 102   font-weight: normal;
 103   background-color: transparent;
 104   text-shadow: none;
 105 }
 106 .ui-dialog-outside-in a,
 107 .ui-dialog-outside-in .link {
 108   border-bottom: none;
 109   font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
 110   font-size: 14px;
 111   font-weight: normal;
 112   color: #85bef4;
 113   text-decoration: none;
 114   transition: color .5s ease;
 115 }
 116 .ui-dialog-outside-in a:focus,
 117 .ui-dialog-outside-in .link:focus,
 118 .ui-dialog-outside-in a:hover,
 119 .ui-dialog-outside-in .link:hover {
 120   outline: none;
 121   color: #46a0f5;
 122 }
 123
 124 /* Style the tray header. */
 125 .ui-dialog-outside-in .ui-dialog-titlebar {
 126   padding: 20px;
 127   background: #2d2d2d;
 128   border: 0;
 129   border-bottom: 1px solid #000;
 130   border-radius: 0;
 131   font-weight: normal;
 132   color: #fff;
 133 }
 134 .ui-dialog-outside-in .ui-dialog-titlebar-close {
 135   background-image: url(../../../misc/icons/bebebe/ex.svg);
 136   background-position: center center;
 137   background-repeat: no-repeat;
 138   background-color: transparent;
 139   border: 0;
 140   position: absolute;
 141   right: 20px;
 142   -moz-transition: all .5s ease;
 143   transition: background .5s ease;
 144 }
 145 .ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
 146   background-image: url(../../../misc/icons/ffffff/ex.svg);
 147 }
 148 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
 149   left: 20px;
 150   right: auto;
 151 }
 152 .ui-dialog-outside-in .ui-dialog-title {
 153   font-size: 16px;
 154   margin: 0;
 155   /* Push the text away from the icon. */
 156   padding-left: 30px; /* LTR */
 157   padding-right: 0px; /* LTR */
 158   /* Ensure that long titles do not overlap the close button. */
 159   max-width: 210px;
 160   text-align: left; /* LTR */
 161 }
 162 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
 163   text-align: right;
 164   padding-left: 0px;
 165   padding-right: 0px;
 166 }
 167 .ui-dialog-outside-in .ui-dialog-title:before {
 168   background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
 169   background-size: 100% auto;
 170   content: '';
 171   display: block;
 172   height: 100%;
 173   position: absolute;
 174   left: 20px; /* LTR */
 175   top: 0;
 176   width: 20px;
 177 }
 178 [dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
 179   left: auto;
 180   right: 20px;
 181 }
 182
 183 /* Override default styling from jquery UI. */
 184 .ui-state-default,
 185 .ui-widget-content .ui-state-default,
 186 .ui-widget-header .ui-state-default {
 187   border: 0;
 188   font-weight: normal;
 189   font-size: 14px;
 190   color: #333;
 191 }
 192 /* Hide the defauld Jquery UI dialog close button. */
 193 .ui-dialog-outside-in .ui-icon-closethick {
 194   visibility: hidden;
 195 }
 196
 197 /* Groups below here with todos to move to new component need to load last. */
 198
 199 /**
 200  * Visual styling for buttons in the Settings Tray module's off canvas tray.
 201  * @todo Move to its own component:
 202  *   https://www.drupal.org/node/1945262.
 203  */
 204
 205 .ui-dialog-outside-in button.link {
 206   background: transparent;
 207   border: 0;
 208   cursor: pointer;
 209   margin: 0;
 210   padding: 0;
 211 }
 212 .ui-dialog-outside-in .button {
 213   width: 100%;
 214   height: auto;
 215   margin: 1em auto;
 216   padding: 6px 1em;
 217   background: #7b7b7b;
 218   border-radius: 1em;
 219   font-size: 14px;
 220   color: #fff;
 221   transition: all .5s ease;
 222 }
 223 .ui-dialog-outside-in .button:hover,
 224 .ui-dialog-outside-in .button:focus {
 225   background: #888;
 226 }
 227 .ui-dialog-outside-in .button--primary {
 228   background: #277abd none;
 229   border: none;
 230   color: #fff;
 231   transition: all .5s ease;
 232 }
 233 .ui-dialog-outside-in .button--primary:hover,
 234 .ui-dialog-outside-in .button--primary:focus {
 235   background: #2b8bd8;
 236 }
 237
 238
 239 /*
 240  * Visual styling for dropbutton in the Settings Tray module's off canvas tray.
 241  * @todo Move to its own component:
 242  *   https://www.drupal.org/node/1945262.
 243  */
 244
 245 .ui-dialog-outside-in .dropbutton-widget {
 246   background: #7b7b7b none;
 247   border: 0;
 248   border-radius: 1em;
 249   color: #eee;
 250   transition: background .5s ease;
 251 }
 252 .ui-dialog-outside-in .dropbutton-widget:hover {
 253   box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
 254 }
 255 .ui-dialog-outside-in .dropbutton-toggle button {
 256   background: #7b7b7b none;
 257   border-bottom-right-radius: 1em; /* LTR */
 258   border-top-right-radius: 1em; /* LTR */
 259   border-style: solid;
 260   border-color: #333;
 261   border-left-width: 1px; /* LTR */
 262   transition: background .5s ease;
 263 }
 264 [dir="rtl"] .ui-dialog-outside-in .dropbutton-toggle button {
 265   border-radius: 0;
 266   border-bottom-left-radius: 1em;
 267   border-top-left-radius: 1em;
 268   border-width: 0;
 269   border-right-width: 1px;
 270 }
 271 .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
 272 .ui-dialog-outside-in .dropbutton a:hover {
 273   background: #6b6b6b none;
 274   border-bottom-left-radius: 1em; /* LTR */
 275   border-top-left-radius: 1em; /* LTR */
 276 }
 277 [dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
 278 [dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
 279   border-radius: 0;
 280   border-bottom-right-radius: 1em;
 281   border-top-right-radius: 1em;
 282 }
 283 .ui-dialog-outside-in .dropbutton a {
 284   padding: 0.1em 0.8em;
 285   color: #eee;
 286   font-size: 90%;
 287   line-height: 1.8;
 288   transition: all .5s ease;
 289 }
 290 .ui-dialog-outside-in .dropbutton:hover a {
 291   color: #fff;
 292 }
 293 /* Make an arrow out of borders with some fancy CSS. */
 294 .ui-dialog-outside-in span.dropbutton-arrow {
 295   border-bottom-color: transparent;
 296   border-left-color: transparent;
 297   border-right-color: transparent;
 298   border-style: solid;
 299   border-width: 0.3333em 0.3333em 0;
 300   display: block;
 301   height: 0;
 302   line-height: 0;
 303   position: absolute;
 304   right: 40%;
 305   top: 50%;
 306   margin-top: -0.1666em;
 307   width: 0;
 308   overflow: hidden;
 309   color: #fff;
 310 }
 311 .js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
 312   background: transparent;
 313 }
 314 .ui-dialog-outside-in td .dropbutton-multiple {
 315   padding-right: 0;
 316 }
 317 [dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
 318   padding-left: 0;
 319 }
 320 .ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
 321   border-right: 0;
 322   border-left: 0;
 323 }
 324 .ui-dialog-outside-in td .dropbutton .secondary-action {
 325   border-top-color: #000;
 326 }