www.aleph1.co.uk Git - yaffs-website/blob - web/core/themes/stable/css/quickedit/quickedit.theme.css

   1 /**
   2  * @file
   3  * Styling for Quick Edit module.
   4  */
   5
   6 /**
   7  * Editable.
   8  */
   9 .quickedit-field.quickedit-editable,
  10 .quickedit-field .quickedit-editable {
  11   box-shadow: 0 0 0 2px #74b7ff;
  12 }
  13
  14 /**
  15  * Highlighted (hovered) editable.
  16  */
  17 .quickedit-field.quickedit-highlighted,
  18 .quickedit-form.quickedit-highlighted,
  19 .quickedit-field .quickedit-highlighted {
  20   box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff;
  21 }
  22 .quickedit-field.quickedit-changed,
  23 .quickedit-form.quickedit-changed,
  24 .quickedit-field .quickedit-changed {
  25   box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a;
  26 }
  27 .quickedit-editing.quickedit-validation-error,
  28 .quickedit-form.quickedit-validation-error {
  29   box-shadow: 0 0 0 1px #ee8b74, 0 0 0 2px #fa2209;
  30 }
  31 .quickedit-editing.quickedit-editor-is-popup {
  32   box-shadow: none;
  33 }
  34 .quickedit-form .form-item .error {
  35   border: 1px solid #eea0a0;
  36 }
  37
  38 /**
  39  * Default form styling overrides.
  40  */
  41 .quickedit-form form {
  42   padding: 0.5em;
  43 }
  44 .quickedit-form .form-item {
  45   margin: 0;
  46 }
  47 .quickedit-form .form-wrapper {
  48   margin: 0.5em;
  49 }
  50
  51 /**
  52  * Animations.
  53  */
  54 .quickedit-animate-invisible {
  55   opacity: 0;
  56 }
  57 .quickedit-animate-default {
  58   -webkit-transition: all 0.4s ease;
  59   transition: all 0.4s ease;
  60 }
  61 .quickedit-animate-slow {
  62   -webkit-transition: all 0.6s ease;
  63   transition: all 0.6s ease;
  64 }
  65 .quickedit-animate-delay-veryfast {
  66   -webkit-transition-delay: 0.05s;
  67   transition-delay: 0.05s;
  68 }
  69 .quickedit-animate-delay-fast {
  70   -webkit-transition-delay: 0.2s;
  71   transition-delay: 0.2s;
  72 }
  73 .quickedit-animate-disable-width {
  74   -webkit-transition: width 0s;
  75   transition: width 0s;
  76 }
  77 .quickedit-animate-only-visibility {
  78   -webkit-transition: opacity 0.2s ease;
  79   transition: opacity 0.2s ease;
  80 }
  81
  82 /**
  83  * In-place editors that don't use a popup.
  84  */
  85 .quickedit-validation-errors .messages.error {
  86   box-shadow: 0 0 1px 1px red, 0 0 3px 3px rgba(153, 153, 153, 0.5);
  87   background-color: white;
  88 }
  89
  90 /**
  91  * Styling specific to the 'form' in-place editor.
  92  */
  93 .quickedit-form {
  94   box-shadow: 0 0 30px 4px #4f4f4f;
  95   background-color: white;
  96 }
  97
  98 /**
  99  * Toolbars.
 100  */
 101 .quickedit-toolbar-container {
 102   font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
 103   padding-bottom: 7px;
 104   padding-top: 7px;
 105   -webkit-transition: all 1s;
 106   transition: all 1s;
 107 }
 108 .quickedit-toolbar-container > .quickedit-toolbar-content {
 109   background-image: -webkit-linear-gradient(top, #fff, #e4e4e4);
 110   background-image: linear-gradient(to bottom, #fff, #e4e4e4);
 111   box-sizing: border-box;
 112   color: black;
 113   padding: 0.1667em;
 114   position: relative;
 115   -webkit-user-select: none;
 116   -moz-user-select: none;
 117   -ms-user-select: none;
 118   user-select: none;
 119   z-index: 2;
 120 }
 121 .quickedit-toolbar-container > .quickedit-toolbar-pointer {
 122   background-color: #e4e4e4;
 123   bottom: 2px;
 124   box-shadow: 0 0 0 1px #818181, 0 0 0 4px rgba(150, 150, 150, 0.5);
 125   display: block;
 126   height: 16px;
 127   left: 18px; /* LTR */
 128   position: absolute;
 129   -webkit-transform: rotate(45deg);
 130   -ms-transform: rotate(45deg);
 131   transform: rotate(45deg);
 132   width: 16px;
 133   z-index: 1;
 134 }
 135 [dir="rtl"] .quickedit-toolbar-container > .quickedit-toolbar-pointer {
 136   left: auto;
 137   right: 18px;
 138 }
 139 .quickedit-toolbar-container.quickedit-toolbar-pointer-top > .quickedit-toolbar-pointer {
 140   bottom: auto;
 141   top: 2px;
 142 }
 143 .quickedit-toolbar-container > .quickedit-toolbar-lining {
 144   bottom: 7px;
 145   box-shadow: 0 0 0 1px #818181, 0 3px 0 1px rgba(150, 150, 150, 0.5);
 146   display: block;
 147   left: 0;
 148   position: absolute;
 149   right: 0;
 150   top: 7px;
 151   z-index: 0;
 152 }
 153
 154 .quickedit-toolbar-label {
 155   font-style: italic;
 156   overflow: hidden;
 157   padding: 0.333em 0.4em;
 158   text-overflow: ellipsis;
 159   white-space: nowrap;
 160 }
 161 .quickedit-toolbar-label .field:after {
 162   content: ' → '; /* LTR */
 163 }
 164
 165 [dir="rtl"] .quickedit-toolbar-label .field:after {
 166   content: ' ← ';
 167 }
 168
 169 /* The toolbar; these are not necessarily visible. */
 170 .quickedit-toolbar {
 171   font-family: 'Droid sans', 'Lucida Grande', sans-serif;
 172 }
 173 .quickedit-toolbar-entity {
 174   padding: 0.1667em 0.2em;
 175 }
 176
 177 /**
 178  * Info toolgroup.
 179  */
 180 .quickedit-toolbar-fullwidth {
 181   width: 100%;
 182 }
 183 .quickedit-toolgroup.wysiwyg-floated {
 184   float: right; /* LTR */
 185 }
 186 [dir="rtl"] .quickedit-toolgroup.wysiwyg-floated {
 187   float: left;
 188 }
 189 .quickedit-toolgroup.wysiwyg-main {
 190   clear: both;
 191   width: 100%;
 192   padding-left: 0; /* LTR */
 193 }
 194 [dir="rtl"] .quickedit-toolgroup.wysiwyg-main {
 195   padding-left: 0;
 196   padding-right: 0;
 197 }
 198
 199 /**
 200  * Buttons.
 201  */
 202 .quickedit-button {
 203   background-color: #e4e4e4;
 204   border: 1px solid #d2d2d2;
 205   color: #5a5a5a;
 206   cursor: pointer;
 207   display: inline-block;
 208   margin: 0;
 209   opacity: 1;
 210   padding: 0.345em;
 211   -webkit-transition: opacity 0.1s ease;
 212   transition: opacity 0.1s ease;
 213 }
 214 .quickedit-button[aria-hidden="true"] {
 215   visibility: hidden;
 216   opacity: 0;
 217 }
 218 .quickedit-button + .quickedit-button {
 219   margin-left: 0.2em; /* LTR */
 220 }
 221 [dir="rtl"] .quickedit-button + .quickedit-button {
 222   margin-left: auto;
 223   margin-right: 0.25em;
 224 }
 225 /* Button with icons. */
 226 .quickedit-button:hover,
 227 .quickedit-button:active {
 228   background-color: #c8c8c8;
 229   border: 1px solid #a0a0a0;
 230   color: #2e2e2e;
 231 }
 232 .quickedit-toolbar-container .quickedit-button.action-cancel {
 233   background-color: transparent;
 234   border: 1px solid transparent;
 235 }
 236 .quickedit-button.action-save {
 237   color: white;
 238   background-color: #50a0e9;
 239   background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc);
 240   background-image: linear-gradient(to bottom, #50a0e9, #4481dc);
 241   border: 1px solid transparent;
 242 }
 243 .quickedit-button.action-save:hover,
 244 .quickedit-button.action-save:active {
 245   border: 1px solid #a0a0a0;
 246 }
 247 .quickedit-button.action-saving,
 248 .quickedit-button.action-saving:hover,
 249 .quickedit-button.action-saving:active {
 250   background-color: #e4e4e4;
 251   background-image: none;
 252   border-color: #d2d2d2;
 253   color: #5a5a5a;
 254 }