annotate core/modules/quickedit/css/quickedit.theme.css @ 19:fa3358dc1485 tip

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