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 }
|