[BUGFIX] Add missing image for workspace preview
[Packages/TYPO3.CMS.git] / typo3 / sysext / workspaces / Resources / Public / Css / preview.css
1 /**
2 * Top bar
3 */
4
5 /**
6 * Tabs
7 */
8
9 .x-btn button {
10 font-size: 12px;
11 }
12
13 /* panel containing the tabs */
14 .x-tab-panel-header {
15 background-color: #3f3f3f;
16 background-image: url('../../../../../../typo3/sysext/t3skin/images/backgrounds/topbar.png');
17 background-image: linear-gradient(center top, #494949 0%, #373737 91%, #343434 92%, #2A2A2A 100%);
18 background-repeat: repeat-x;
19 border: none;
20 padding-bottom: 0;
21 padding-top: 9px;
22 }
23
24 .x-tab-strip-wrap {
25 background: url('../Images/typo3-logo.png') no-repeat 16px 0;
26 padding-left: 140px;
27 }
28
29 /* normal tab */
30 ul.x-tab-strip li {
31 margin-left: 4px;
32 }
33
34 ul.x-tab-strip-top {
35 border-bottom: 0;
36 }
37
38 /* reset ExtJS "no skin" nonsense */
39 .x-tab-strip-top .x-tab-right,
40 .x-tab-strip-top .x-tab-strip-over .x-tab-right {
41 background-position: 0 0;
42 }
43
44 /* we don't need the active tab to be 1px below the inactive */
45 .x-tab-strip-top .x-tab-strip-active .x-tab-right {
46 margin-bottom: 0;
47 }
48
49 .x-tab-strip span.x-tab-strip-text,
50 .x-tab-strip-top .x-tab-strip-active .x-tab-right span.x-tab-strip-text {
51 padding-bottom: 4px;
52 }
53
54 /* normal tab styling */
55 .x-tab-strip .x-tab-right {
56 background-color: #707171;
57 background-image: linear-gradient(center top, #707171 0%, #474747 85%, #363636 100%);
58 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#707171', EndColorStr='#474747')"; /* IE8 */
59 border-top-left-radius: 3px;
60 border-top-right-radius: 3px;
61 }
62
63 /* container surrounding text */
64 .x-tab-strip-inner {
65 padding: 4px;
66 }
67
68 /* hover tab */
69 .x-tab-strip-over .x-tab-right {
70 background-color: #707171;
71 background-image: linear-gradient(center top, #888888 0%, #474747 85%, #363636 100%);
72 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#888888', EndColorStr='#474747')"; /* IE8 */
73 }
74
75 /* active tab */
76 .x-tab-strip-active .x-tab-right {
77 background-color: #989898;
78 background-image: linear-gradient(center top, #989898 0%, #6c6c6c 85%, #474747 100%);
79 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#989898', EndColorStr='#6c6c6c')"; /* IE8 */
80 }
81
82 /* tab label */
83 .x-tab-strip span.x-tab-strip-text {
84 color: #ffffff;
85 }
86
87 /* text in tabs and buttons should not be italic.. why should it be? */
88 .x-tab-strip em,
89 .x-btn-text {
90 font-style: normal;
91 }
92
93 /**
94 * Slider
95 */
96 #controls {
97 padding-top: 5px;
98 }
99 #slider {
100 padding-top: 5px;
101 }
102
103 /* remove default ExtJS border */
104 .x-panel-body {
105 border: none;
106 }
107
108 .x-slider-horz .x-slider-thumb {
109 background-image: url('../Images/slider-thumb.png');
110 height: 21px;
111 padding: 0 2px;
112 top: 0;
113 width: 7px;
114 }
115
116 .x-slider-horz .x-slider-thumb-over, .x-slider-horz .x-slider-thumb-drag {
117 background-position: -7px -21px;
118 }
119
120 .x-slider-horz .x-slider-inner {
121 background-image: url('../Images/slider-bg.png');
122 }
123
124 #visual-mode-selector {
125 list-style: none;
126 background-color: #f9f9f9;
127 border: 1px solid #abb2bc;
128 border-top: none;
129 }
130
131 #visual-mode-selector td {
132 text-align: left;
133 }
134
135 #visual-mode-selector td button {
136 text-decoration: none;
137 }
138
139 #visual-mode-options {
140 display: block;
141 height: 20px;
142 margin: 0px 0 0 10px;
143 }
144 #visual-mode-options.x-btn-menu-active {
145 background-color: #f9f9f9;
146 border: 1px solid #abb2bc;
147 border-bottom: none;
148 }
149 #visual-mode-options .x-btn-arrow {
150 padding-right: 2px;
151 }
152
153 #visual-mode-options.x-btn-menu-active .x-btn-text {
154 color: black;
155 }
156
157 #visual-mode-toolbar {
158 border:none;
159 }
160
161 /**
162 * Preview panel
163 */
164 .x-panel-body-noheader {
165 border-top: 0;
166 }
167
168 .x-tip {
169 background-color: #ffffc7;
170 border: 1px solid #cccccc;
171 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
172 }
173
174 /* the mask for dialogs */
175 .ext-el-mask {
176 background-color: #000000;
177 opacity: 0.75;
178 filter:alpha(opacity=75);
179 }
180
181 .x-mask-loading {
182 border: none;
183 }
184
185 .x-mask-loading div {
186 background-image: url("../../../../t3skin/images/spinner/big-f0f0f0.gif");
187 background-position: top center;
188 border: none;
189 color: #828282;
190 padding-top: 40px;
191 }
192
193 .x-window-tc {
194 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/top-bottom.png);
195 }
196 .x-window-tl {
197 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/left-corners.png);
198 }
199 .x-window-tr {
200 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/right-corners.png);
201 }
202 .x-window-bc {
203 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/top-bottom.png);
204 }
205 .x-window-bl {
206 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/left-corners.png);
207 }
208 .x-window-br {
209 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/right-corners.png);
210 }
211
212 .x-window-ml {
213 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/left-right.png);
214 }
215 .x-window-mr {
216 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/window/left-right.png);
217 }
218
219 .x-window-mc {
220 border:1px solid #A2AAB8;
221 background:#e8e8e8;
222 }
223
224 .x-window-tl .x-window-header {
225 color: #FFFFFF;
226 font: bold 10px verdana,arial,tahoma,verdana,sans-serif;
227 padding: 4px 0;
228 }
229 .x-window-draggable, .x-window-draggable .x-window-header-text {
230 cursor: move;
231 }
232
233 .x-window-tl .x-window-header {
234 color:#fff;
235 font:bold 10px verdana, arial,tahoma,verdana,sans-serif;
236 padding:4px 0 4px 0;
237 }
238
239 .x-window-mc {
240 border-color:#A2AAB8;
241 font: normal 10px verdana, arial,tahoma,helvetica,sans-serif;
242 background-color:#e7e7e7;
243 }
244
245 .x-window-maximized .x-window-tc {
246 background-color:#fff;
247 }
248
249 .x-window-bbar .x-toolbar {
250 border-top-color:#A2AAB8;
251 }
252
253 .x-form-text, textarea.x-form-field {
254 background-color: #FFFFFF;
255 background-image: none;
256 border-color: #B5B8C8;
257 }
258
259 .x-btn {
260 color: #FFF;
261 }
262 .t3-icon-system-options-view {
263 float: right;
264 }
265 #feToolbarButtonNextStage.x-btn, #feToolbarButtonPreviousStage.x-btn, #feToolbarButtonDiscardStage.x-btn {
266 background: url('../Images/button_approve.png') #55A245 repeat-x;
267 border: 1px solid #7c7c7c;
268 border-radius: 1px;
269 margin-right: 10px;
270 margin-top:0px;
271 }
272 #feToolbarButtonNextStage.x-btn .x-btn-text, #feToolbarButtonPreviousStage.x-btn .x-btn-text, #feToolbarButtonDiscardStage.x-btn .x-btn-text {
273 color: #FFF;
274 line-height: 8px;
275 height: 13px;
276 padding: 0 3px 0 3px;
277 }
278 #feToolbarButtonPreviousStage.x-btn .x-btn-text {
279 color:#7c7c7c;
280 }
281 #feToolbarButtonPreviousStage.x-btn {
282 background-color: #D5D5D5;
283 background-image: url('../Images/button_reject.png');
284 }
285 #feToolbarButtonDiscardStage.x-btn {
286 background-color: #CD0505;
287 background-image: url('../Images/button_discard.png');
288 }
289 #sendToStageWindow .x-btn {
290 background-color: #d5d5d5;
291 background-image: url('../../../../../../typo3/sysext/t3skin/extjs/images/backgrounds/button.png');
292 background-repeat: repeat-x;
293 background-image: linear-gradient(center top, #f6f6f6 10%, #d5d5d5 90%);
294 border: 1px solid #7c7c7c;
295 border-radius: 1px;
296 color: #434343;
297 }
298 #sendToStageWindow .x-btn-pressed,
299 #sendToStageWindow .x-btn-over,
300 #sendToStageWindow .x-btn-icon.x-btn-over {
301 background-color: #bdbcbc;
302 background-image: url('../../../../../../typo3/sysext/t3skin/extjs/images/backgrounds/button-hover.png');
303 background-image: linear-gradient(center top, #f6f6f6 10%, #bdbcbc 90%);
304 border-color: #737f91;
305 color: #1e1e1e;
306 }
307
308 #sendToStageWindow .x-btn-over .x-btn-mc em.x-btn-split,
309 #sendToStageWindow .x-btn-click .x-btn-mc em.x-btn-split,
310 #sendToStageWindow .x-btn-menu-active .x-btn-mc em.x-btn-split,
311 #sendToStageWindow .x-btn-pressed .x-btn-mc em.x-btn-split {
312 background-image:url(../../../../../../typo3/sysext/t3skin/extjs/images/button/s-arrow-o.gif);
313 }
314
315 .x-tool {
316 background-image: url("../../../../../../typo3/sysext/t3skin/extjs/images/panel/tool-sprites.gif");
317 }
318
319 .x-tool-close {
320 background-position: 0 0;
321 }
322 .x-tool-close-over {
323 background-position: -15px 0;
324 }
325
326 /* text */
327 .x-btn.sliderButton .x-btn-text {
328 color: #A0A0A0;
329 font-style: normal;
330 }
331
332 /* alignment of text in Button "Live" */
333 #sizeSliderButtonLive .x-btn-mc {
334 text-align: right;
335 }
336
337 /* alignment of text in Button "Workspace" */
338 #sizeSliderButtonWorkspace .x-btn-mc {
339 text-align: left;
340 }
341 .x-panel-header {
342 border: none;
343 font-weight: bold;
344 padding-left:0px;
345 }
346
347 .x-window-dlg .x-btn {
348 background-color: #D5D5D5;
349 background-image: linear-gradient(center top , #F6F6F6 10%, #D5D5D5 90%);
350 border-radius: 1px 1px 1px 1px;
351 border: 1px solid #7C7C7C;
352 color: #434343;
353 }