yaffs.net Git - yaffs-website/blob - web/core/modules/color/css/color.admin.css

   1 /**
   2  * @file
   3  * Stylesheet for the administration pages of the Color module.
   4  */
   5 .color-form {
   6   max-width: 50em;
   7 }
   8 .farbtastic {
   9   margin: 0 auto;
  10 }
  11 .color-form .form-item {
  12   margin: 0.5em 0;
  13   height: 2em;
  14   padding: 0.5em;
  15 }
  16 .color-form label {
  17   clear: left; /* LTR */
  18 }
  19 [dir="rtl"] .color-form label {
  20   clear: right;
  21 }
  22 .color-form .form-text {
  23   float: left; /* LTR */
  24   width: 86%;
  25   text-align: center;
  26   cursor: pointer;
  27 }
  28 [dir="rtl"] .color-form .form-text {
  29   float: right;
  30 }
  31 .color-palette__hook {
  32   float: left; /* LTR */
  33   width: 16px;
  34   height: 16px;
  35 }
  36 [dir="rtl"] .color-palette__hook {
  37   float: right;
  38 }
  39 .color-palette__hook.is-down,
  40 .color-palette__hook.is-up,
  41 .color-palette__hook.is-both {
  42   background: url(../images/hook.png) no-repeat 100% 0; /* LTR */
  43 }
  44 [dir="rtl"] .color-palette__hook.is-down,
  45 [dir="rtl"] .color-palette__hook.is-up,
  46 [dir="rtl"] .color-palette__hook.is-both {
  47   background: url(../images/hook-rtl.png) no-repeat 0 0;
  48 }
  49 .color-palette__hook.is-up {
  50   background-position: 100% -27px; /* LTR */
  51 }
  52 [dir="rtl"] .color-palette__hook.is-up {
  53   background-position: 0 -27px;
  54 }
  55 .color-palette__hook.is-both {
  56   background-position: 100% -54px; /* LTR */
  57 }
  58 [dir="rtl"] .color-palette__hook.is-both {
  59   background-position: 0 -54px;
  60 }
  61 /**
  62  * The button also inherits from .link, which hides the background. Use a more
  63  * specific selector to overwrite.
  64  */
  65 button.color-palette__lock,
  66 .color-palette__lock {
  67   float: left; /* LTR */
  68   width: 20px;
  69   height: 19px;
  70   background: url(../images/lock.png) no-repeat 50% 0;
  71   cursor: pointer;
  72   position: relative;
  73   top: -1.7em;
  74   left: -10px;
  75   direction: ltr;
  76   text-indent: -9999px;
  77   border: 0;
  78   outline: 0;
  79 }
  80 [dir="rtl"] button.color-palette__lock,
  81 [dir="rtl"] .color-palette__lock {
  82   float: right;
  83 }
  84 /* Same as above .color-palette__lock rule. */
  85 button.is-unlocked,
  86 .is-unlocked {
  87   background-position: 50% -22px;
  88 }
  89
  90 /* wide viewport. */
  91 @media screen and (min-width: 37.5625em) { /* 601px */
  92   .color-placeholder {
  93     float: right; /* LTR */
  94   }
  95   [dir="rtl"] .color-placeholder {
  96     float: left;
  97   }
  98   .color-form .form-item {
  99     margin: 0.5em 195px 0.5em 0; /* LTR */
 100   }
 101   [dir="rtl"] .color-form .form-item {
 102     margin: 0.5em 0 0.5em 195px;
 103   }
 104   .color-form label {
 105     float: left; /* LTR */
 106     clear: left; /* LTR */
 107     width: 15em;
 108   }
 109   [dir="rtl"] .color-form label {
 110     float: right;
 111     clear: right;
 112   }
 113   .color-form .form-text,
 114   .color-form .form-select {
 115     float: left; /* LTR */
 116     width: auto;
 117   }
 118   [dir="rtl"] .color-form .form-text,
 119   [dir="rtl"] .color-form .form-select {
 120     float: right;
 121   }
 122   .color-palette__hook {
 123     float: left; /* LTR */
 124     margin-top: 3px;
 125   }
 126   [dir="rtl"] .color-palette__hook {
 127     float: right;
 128   }
 129 }
 130 .item-selected {
 131   background: #eee;
 132 }
 133
 134 /* Preview */
 135 .color-preview {
 136   display: none;
 137 }
 138 .js .color-preview {
 139   display: block;
 140   position: relative;
 141   float: left; /* LTR */
 142 }
 143 .js[dir="rtl"] .color-preview {
 144   float: right;
 145 }
 146
 147 @media screen and (max-width: 30em) { /* 480px */
 148   .color-form .color-preview-sidebar,
 149   .color-form .color-preview-content {
 150     width: auto;
 151     margin: 0;
 152   }
 153 }