c24a564272d67950f5021a3a086d02df342648b2
[Packages/TYPO3.CMS.git] / typo3 / stylesheet.css
1 /****************************************
2
3 GENERAL STYLE FOR TYPO3 BACKEND:
4
5 Stylesheet for the TYPO3 backend.
6 You can configure another/additional stylesheet for use by the $TBE_STYLES global var
7
8 TYPO3 CVS ID: $Id$
9
10 *****************************************/
11
12
13
14
15 /*********************************************
16 * MAIN STYLES:
17 *********************************************/
18
19 SELECT, TEXTAREA, INPUT, TD, BODY, .defstyle, P, DIV {
20 font-family: Verdana, Arial, Helvetica;
21 font-size: 10px;
22 margin: 0 0 0 0;
23 color: black;
24 }
25 FORM { margin: 0 0 0 0; }
26 H1, H2, H3, H4 {
27 font-family: Verdana, Arial, Helvetica;
28 font-size: 10px;
29 font-weight: bold;
30 margin: 3px 0px 3px 0px;
31 }
32
33 /* Occasionally used, eg. in About Modules: */
34 H1 {
35 font-size: 14px;
36 text-align: center;
37 margin-top: 16px;
38 margin-bottom: 16px;
39 }
40
41 /* MAIN page header: */
42 H2 {
43 background-color: #9BA1A8;
44 text-align: center;
45 }
46
47 /* Normal section headers */
48 H3 {
49 margin: 8px 0px 5px 0px;
50 padding: 1px 3px 1px 3px;
51 background-color: #E7DBA8;
52 }
53
54 /* Discrete section headers (no background) */
55 H4 {
56 margin-top: 6px;
57 color: #333333;
58 }
59
60 /* Preformatted text - not used so much in TYPO3 */
61 PRE {
62 font-family: mono-spaced;
63 font-size: 12px;
64 }
65
66 /* Links in general */
67 A {
68 color : black;
69 text-decoration: underline;
70 }
71 A:hover {color: #254D7B}
72
73 /* horizontal ruler */
74 HR, DIV.hr {
75 height: 1px;
76 color: #ddd;
77 background-color: #ddd;
78 border-top: 1px solid #7a7a7a;
79 border-bottom: 1px solid #000;
80 }
81
82 IMG {
83 border: 0px;
84 }
85
86
87
88
89
90
91 /*********************************************
92 * Background color classes:
93 *********************************************/
94
95 .bgColor {background-color: #F7F3EF;}
96 .bgColor-10 {background-color: #ede9e5;}
97 .bgColor-20 {background-color: #e3dfdb;}
98 .bgColor2 {background-color: #9BA1A8;}
99 .bgColor3 {background-color: #F6F2E6;}
100 .bgColor3-20 {background-color: #e2ded2;}
101 .bgColor4 {background-color: #D9D5C9;}
102 .bgColor4-20 {background-color: #c5c1b5;}
103 .bgColor5 {background-color: #ABBBB4;}
104 .bgColor6 {background-color: #E7DBA8;}
105
106
107
108
109
110 /*********************************************
111 * Various body tags:
112 *********************************************/
113
114 /* Set default values for bodytags: */
115 BODY {
116 margin: 2px 0px 0px 4px;
117 background-color: #F7F3EF;
118 }
119
120 /* Setting alternative background color on some frames: */
121 BODY#typo3-alt-toplogo-php, BODY#typo3-alt-menu-sel-php, BODY#typo3-alt-topmenu-dummy-php, BODY#typo3-alt-topmenu-dummy-php-iconmenu, BODY#typo3-alt-clickmenu-php, BODY#typo3-alt-clickmenu-php-notop, BODY#typo3-alt-palette-php {
122 background-color: #9BA1A8;
123 }
124
125
126
127
128 /****************************************
129 * SPECIFIC WRAPPERS
130 *
131 * The "template" class is usually instantiated as either
132 * bicDoc, mediumDoc, smallDoc or noDoc
133 * Each of these will result in the whole page content between the bodytags being wrapped in a DIV-section with a class.
134 * The class name will be "typo3-[classname]"
135 * In particular we set the width of these wrapper-sections:
136 *****************************************/
137
138 DIV.typo3-bigDoc, DIV.typo3-noDoc { margin-left: 10px; margin-top: 5px; width: 740px; }
139 DIV.typo3-noDoc H2 { width: 740px; }
140 DIV.typo3-mediumDoc { width: 470px; }
141 DIV.typo3-smallDoc { width: 350px; }
142
143
144
145 /*********************************************
146 * SPECIAL ELEMENTS IN THE BACKEND
147 *********************************************/
148
149 /* Context Sensitive Menu / Top frame (alt_clickmenu.php): */
150 BODY#typo3-alt-clickmenu-php { background-image: url(gfx/alt_topmenu_back_full.gif); margin-top: 10px; }
151 BODY#typo3-alt-clickmenu-php-notop { background-image: url(gfx/alt_topmenu_back_dummy.gif) }
152 TABLE#typo3-CSM-top A { text-decoration: none;}
153 TABLE#typo3-CSM-top IMG { vertical-align: middle; margin-bottom:2px; }
154 TABLE#typo3-CSM-top TR TD { white-space: nowrap; }
155 TABLE#typo3-CSM-top TR TD.c-closebutton { padding-left: 10px; }
156 TABLE#typo3-CSM-top TR TD.c-itemicon { padding-left: 10px; font-weight: bold; }
157 TABLE#typo3-CSM-top IMG.c-roimg { margin-right: 2px; }
158
159 /* Context Sensitive Menu / Layer (alt_clickmenu.php creates it) */
160 /* Notice: Rollover color is set by ->bgColor5 in the template object of alt_clickmenu.php */
161 TABLE.typo3-CSM { border: #9BA1A8 1px solid; }
162 TABLE.typo3-CSM TD.typo3-CSM-item { white-space: nowrap; }
163 TABLE.typo3-CSM TR.typo3-CSM-itemRow TD { padding: 1px 5px 1px 5px; }
164 TABLE.typo3-CSM TR.typo3-CSM-itemRow { height: 13px; cursor: pointer; }
165
166 /* Top menu (alt_topmenu_dummy.php) */
167 BODY#typo3-alt-topmenu-dummy-php { background-image: url(gfx/alt_topmenu_back_dummy.gif); }
168 BODY#typo3-alt-topmenu-dummy-php-iconmenu { background-image: url(gfx/alt_topmenu_back_full.gif); margin-top: 8px; margin-left: 6px; }
169 TABLE#typo3-topMenu TR TD {white-space: nowrap;}
170 TABLE#typo3-topMenu TR TD.c-logout {padding-left: 20px;}
171 TABLE#typo3-topMenu TR TD.c-menu IMG {margin: 0px 1px 0px 1px;}
172
173 /* Logo frame (alt_toplogo.php) */
174 BODY#typo3-alt-toplogo-php {margin: 0px 0px 0px 0px;}
175
176 /* Help > About modules (alt_intro.php) */
177 DIV.typo3-alt-intro-php { width: 600px; margin-left: 10px; }
178 TABLE#typo3-about-modules {margin-top: 5px;}
179 TABLE#typo3-about-modules TR TD { vertical-align: top; padding: 2px 2px 2px 2px; }
180 TABLE#typo3-about-modules TR.c-mainitem TD IMG { vertical-align: middle; padding: 0px 2px 0px 2px; }
181
182 /* Vertical Module Menu script, left frame (alt_menu.php): */
183 BODY#typo3-alt-menu-php { margin: 2px 0px 0px 2px; }
184 BODY#typo3-alt-menu-php A { text-decoration: none; }
185 TABLE#typo3-vmenu TR.c-mainitem TD { background-color: #D9D9D8; padding: 1px 1px 1px 1px; border: #9BA1A8 1px solid; vertical-align: middle;}
186 TABLE#typo3-vmenu TR.c-endrow TD {height: 5px;}
187 TABLE#typo3-vmenu TR.c-first TD {height: 2px;}
188 TABLE#typo3-vmenu TR.c-mainitem TD IMG { vertical-align: middle; margin-right: 2px;}
189 TABLE#typo3-vmenu TR.c-mainitem TD SPAN.c-label { position: relative; top: 1px;}
190 DIV#typo3-alt-menu-php-logininfo { text-align: center; width: 90px; margin-top:15px; margin-bottom: 15px;}
191 DIV#typo3-alt-menu-php-logininfo P { margin-top:5px; }
192 DIV#typo3-alt-menu-php-adminFunc { text-align: left; width: 110px; margin-top:15px; }
193 DIV#typo3-alt-menu-php-adminFunc IMG { margin: 0px 2px 0px 2px;}
194
195 /* Trees */
196 TABLE#typo3-tree A { text-decoration: none; }
197 TABLE#typo3-tree TR TD { white-space: nowrap; }
198 TABLE#typo3-tree TR TD IMG { vertical-align: middle; }
199 TABLE#typo3-tree TR TD IMG.c-recIcon { margin-right: 1px;}
200 TABLE#typo3-tree { margin-bottom: 10px; width: 95%; }
201 BODY#typo3-alt-file-navframe-php P.c-refresh IMG, BODY#typo3-alt-db-navframe-php P.c-refresh IMG { vertical-align: middle; margin-right: 7px;}
202
203 /* Element Browser / RTE link selection: */
204 TABLE#typo3-curUrl { font-weight: bold; width: 100%; margin-bottom: 2px;}
205 TABLE#typo3-RTElinkMenu TR TD { text-align: center; white-space: nowrap; width: 15%; font-weight: bold; }
206 TABLE#typo3-linkTarget { margin-bottom: 25px; }
207 TABLE#typo3-linkPages TR TD.c-wCell, TABLE#typo3-linkFiles TR TD.c-wCell, TABLE#typo3-EBrecords TR TD.c-wCell, TABLE#typo3-EBfiles TR TD.c-wCell { padding-right: 5px; white-space: nowrap; }
208 BODY#typo3-browse-links-php IMG { vertical-align: middle; }
209 BODY#typo3-browse-links-php IMG.c-blinkArrowL { margin: 0px 3px 0px 3px; }
210 TABLE#typo3-linkMail, TABLE#typo3-linkURL, TABLE#typo3-linkTarget { margin-top: 5px; }
211 BODY#typo3-browse-links-php H3.bgColor5 { margin-top: 2px; }
212 BODY#typo3-browse-links-php A { text-decoration: none; }
213 TABLE#typo3-msgBox { margin-top: 10px; margin-bottom: 10px;}
214 TABLE#typo3-msgBox TR TD { padding: 10px 50px 10px 50px; }
215
216 /* Palette display for TCEforms (top frame, alt_palette.php) */
217 BODY#typo3-alt-palette-php { background-image: url(gfx/alt_topmenu_back_full.gif); margin-top: 8px; margin-left: 6px; }
218 TABLE#typo3-TCEforms-palette TD {white-space: nowrap; vertical-align: top;}
219 TABLE#typo3-TCEforms-palette TR TD.c-label { padding-top: 3px; }
220 TABLE#typo3-TCEforms-palette TR TD.c-close { padding-top: 3px; }
221
222 /* Context Sensitive Help window (view_help.php) */
223 DIV.typo3-view-help { margin-top: 6px; margin-left: 3px; width:95%; }
224 DIV.typo3-view-help H3 { background-color: #ABBBB4; margin-top: 0px;}
225 DIV.typo3-view-help H4 { margin-top: 15px; border-bottom: 1px black solid; }
226
227 /* Shortcut frame (alt_shortcut.php) */
228 BODY#typo3-alt-shortcut-php { border-top: #9BA1A8 1px solid; margin: 0px 0px 0px 0px; padding: 2px 0px 0px 5px;}
229
230 /* Document, listing recently edited records if no records were open (alt_doc_nodoc.php) - this is effectively the Doc module */
231 TABLE.typo3-recent-edited { width: 100%; }
232 TABLE.typo3-recent-edited IMG.c-recicon { margin-right: 5px; vertical-align: middle; }
233 TABLE.typo3-recent-edited TD { white-space: nowrap; }
234 BODY#typo3-alt-doc-nodoc-php P IMG { vertical-align: middle; margin-left: 5px; }
235 BODY#typo3-alt-doc-nodoc-php { margin-left: 5px; }
236
237 /* Login Screen
238
239 * Warning:
240 * DO NOT prevent the copyright notice from being shown!
241 * According to the GPL license an interactive application must show such a notice on start-up ('If the program is interactive, make it output a short notice... ' - see GPL.txt)
242 * Therefore preventing this notice from being properly shown is a violation of the license, regardless of whether you remove it or use the stylesheet to obstruct the display.
243 */
244 BODY#typo3-index-php { background-color: white; margin: 0px 0px 0px 0px; }
245 BODY#typo3-index-php TABLE#wrapper { width: 100%; height: 80%; margin-top: 30px; }
246 BODY#typo3-index-php TABLE#loginwrapper { width: 100%; background-color: #F2AC56; text-align: left; }
247 BODY#typo3-index-php DIV#copyrightnotice { width: 70%; text-align: left; margin-top: 10px; }
248 BODY#typo3-index-php DIV#copyrightnotice IMG { margin-right:5px; margin-bottom:5px; }
249 BODY#typo3-index-php DIV#loginimage {text-align: right; padding-right: 30px; margin-bottom: 5px;}
250 TABLE#logintable { margin: 5px 20px 5px 20px; }
251 TABLE#logintable TR TD { padding: 1px 1px 1px 1px;}
252 TABLE#logintable H2 { background-color: transparent; font-size: 14px; color: white; text-align: left; }
253 TABLE#logintable P { font-size: 12px; color: white; font-weight: bold; }
254 TABLE#logintable P.c-info { font-size: 10px; font-weight: normal; }
255 TABLE#logintable INPUT.c-username, TABLE#logintable INPUT.c-password, TABLE#logintable SELECT.c-interfaceselector { width: 150px; }
256 TABLE#logintable INPUT { border: #E87E25 solid 1px; background-color: white; }
257
258 DIV#loginNews { width: 70%; margin-top: 30px; }
259 DIV#loginNews H2 { background-color: #E26816; color: white; font-size: 12px; }
260 DIV#loginNews TABLE TR TD { padding-right: 10px; padding-left: 10px; }
261 DIV#loginNews TABLE TR TD.c-header { font-weight: bold; background-color: #FFD8A9; }
262 DIV#loginNews TABLE TR.c-spacer { height: 10px; }
263
264 /* Wizards: */
265 BODY#typo3-wizard-tsconfig-php { margin-left: 5px; }
266 TABLE#typo3-tablewizard SPAN.c-wizButtonsH INPUT { margin-right: 2px; vertical-align: middle; }
267 TABLE#typo3-tablewizard SPAN.c-wizButtonsV INPUT { margin-right: 2px; vertical-align: middle; }
268 TABLE#typo3-formwizard SPAN.c-wizButtonsV INPUT { margin-bottom: 2px; }
269 INPUT.c-inputButton, IMG.c-inputButton { margin-right: 2px; vertical-align: middle; }
270 DIV#c-saveButtonPanel, DIV#c-inputMode { margin-top: 10px; }
271 TABLE#typo3-formwizard TR#typo3-formWizardHeader TD { font-weight: bold; text-align: center; }
272 TABLE#typo3-formwizard TR TD { padding: 0px 2px 0px 2px; }
273 BODY#typo3-wizard-rte-php, BODY#typo3-wizard-rte-php TABLE#typo3-rtewizard { height: 98%; }
274 BODY#typo3-wizard-rte-php TABLE#typo3-rtewizard TR TD#c-formContent { height: 100%; vertical-align: top; }
275
276 /* History / Undo */
277 TABLE#typo3-history TR TD, TABLE#typo3-history-item TR TD { vertical-align: top; }
278 TABLE#typo3-history TR.c-head TD, TABLE#typo3-history-item TR.c-head TD { font-weight: bold; }
279 TABLE#typo3-history IMG, TABLE#typo3-history-item IMG { margin: 1px 1px 1px 1px;}
280
281 /* Move element */
282 BODY#typo3-move-el-php IMG { vertical-align: middle; }
283 BODY#typo3-move-el-php TABLE#typo3-ttContentList IMG, BODY#typo3-move-el-php IMG#c-recIcon {margin-right: 4px; }
284
285 /* File scripts */
286 BODY#typo3-file-upload-php DIV#c-submit, BODY#typo3-file-upload-php DIV#c-upload, BODY#typo3-file-upload-php DIV#c-override, BODY#typo3-file-upload-php DIV#c-select {
287 margin-top: 10px;
288 }
289 BODY#typo3-file-rename-php DIV#c-submit, BODY#typo3-file-rename-php DIV#c-rename {
290 margin-top: 10px;
291 }
292 BODY#typo3-file-newfolder-php DIV#c-select, BODY#typo3-file-newfolder-php DIV#c-createFolders, BODY#typo3-file-newfolder-php DIV#c-submitFolders, BODY#typo3-file-newfolder-php DIV#c-newFile, BODY#typo3-file-newfolder-php DIV#c-submitFiles {
293 margin-top: 10px;
294 }
295 BODY#typo3-file-edit-php DIV#c-submit, BODY#typo3-file-edit-php DIV#c-edit {
296 margin-top: 10px;
297 }
298
299 /* Web > Page */
300 TABLE.typo3-page-ceHeader { width: 100%; }
301 TABLE.typo3-page-ceHeader IMG { vertical-align: middle; }
302 TABLE.typo3-page-columnsMode IMG.c-divider { margin: 10px 0px 5px 0px;}
303
304 /* Web > List */
305 TABLE.typo3-dblist IMG { vertical-align: middle; }
306 TABLE.typo3-dblist TR TD { padding-left: 1px; padding-right: 6px; }
307 TABLE.typo3-dblist TR TD.c-headLineTable { background-color: #cccccc; height: 16px; }
308 TABLE.typo3-dblist TR TD.c-headLine { background-color: #eeeeee; }
309 TABLE.typo3-dblist TR TD.c-headLineTable A { text-decoration: none;font-weight: bold; }
310 TABLE.typo3-dblist TR TD DIV.typo3-DBctrl { background-color: #C5C1B5; }
311 TABLE.typo3-dblist TR TD DIV.typo3-clipCtrl {background-color: #ABBBB4; text-align: center; }
312 TABLE.typo3-dblist TR TD DIV.typo3-clipCtrl IMG, TABLE.typo3-dblist TR TD DIV.typo3-DBctrl IMG { margin-left: 1px; margin-right: 1px; }
313
314 DIV#typo3-newRecordLink { margin: 5px 0px 5px 0px; font-weight: bold;}
315 DIV#typo3-newRecordLink IMG { margin-right: 5px; vertical-align: middle; }
316
317 INPUT.smallCheckboxes { vertical-align: middle; margin: 0 0 0 0; padding: 0 0 0 0; width: 12px; height: 12px; }
318 DIV#typo3-listOptions { margin: 10px 0px 10px 0px; }
319
320 /* File > List */
321 TABLE#typo3-filelist IMG { vertical-align: middle; }
322 TABLE#typo3-filelist TR TD { padding-left: 1px; padding-right: 6px; }
323 TABLE#typo3-filelist TR TD.c-headLine { background-color: #cccccc; font-weight: bold; height: 16px; }
324 TABLE#typo3-filelist TR TD DIV.typo3-clipCtrl {background-color: #ABBBB4; text-align: center; }
325
326 /* Clipboard */
327 TABLE#typo3-clipboard, DIV#typo3-newRecordLink, TABLE#typo3-dblist-search { margin-top: 10px; }
328 TABLE#typo3-clipboard TR.bgColor5 TD A { text-decoration: none; }
329 TABLE#typo3-clipboard TR.bgColor5 TD IMG { vertical-align: middle; }
330
331 /* Page info */
332 TABLE.typo3-page-pages TR TD.c-headLine { background-color: #ABBBB4; }
333 BODY#typo3-mod-web-info-index-php IMG { vertical-align: middle; }
334 TABLE.typo3-page-sysnote TR TD { background-color: #D9D5C9 }
335 TABLE.typo3-page-sysnote TR TD.c-headLine { background-color: #c5c1b5 }
336
337 /* Web > Access */
338 TABLE#typo3-permissionList IMG { vertical-align: middle; }
339 TABLE#typo3-permissionMatrix TD { text-align: center; width: 16%; }
340 TABLE#typo3-permissionMatrix TD.bgColor2 { font-weight: bold; padding-left: 10px; padding-right: 10px; }
341
342 /* New element */
343 BODY#typo3-db-new-php IMG { vertical-align: middle; }
344 BODY#typo3-db-new-php A IMG { margin-right: 5px; }
345 BODY#typo3-db-new-php A { text-decoration: none; }
346 BODY#typo3-db-new-php IMG.c-helpImg { margin-left: 20px; text-align: right; }
347 BODY#typo3-db-new-php DIV#typo3-newPageLink { margin-top: 20px; }
348
349 /*********************************************
350 * VARIOUS STAND-ALONE classes:
351 *********************************************/
352
353 /* Dimmed span tag color (disabled) */
354 .typo3-dimmed {color: #666666;}
355
356 /* Red span tag color (warning, notice) */
357 .typo3-red {color: red;}
358 TABLE.warningbox { border: solid 2px black; background-color: yellow; margin: 20px 0px 20px 0px; }
359 TABLE.warningbox TD { padding: 20px 20px 20px 20px; font-weight: bold; }
360
361 /* Various classes: */
362 .nobr {white-space: nowrap;}
363 .diff-r {color: red;}
364 .diff-g {color: green;}
365 IMG.absmiddle { vertical-align: middle; }
366 .smallCheckboxes { width:12; height:12; margin:0 0 0 0; }
367 .uppercase { text-transform : uppercase; }
368
369 /* Permissions, green and red */
370 .perm-allowed {color: green; font-weight: bold;}
371 .perm-denied {color: red; font-weight: bold;}
372
373 /* Clipboard */
374 TR.typo3-clipboard-head {
375 background-color: #cccccc;
376 }
377
378 /* Go back A-tags */
379 A.typo3-goBack {
380 font-weight: bold;
381 background-color: #D9D5C9;
382 padding: 1px 1px 1px 1px;
383 }
384 A.typo3-goBack IMG { margin-right: 5px; vertical-align: middle; }
385 SPAN.typo3-moduleHeader IMG { vertical-align: middle; margin-right: 4px; }
386
387
388
389 /*********************************************
390 * TypoScript Highlighting:
391 *********************************************/
392
393 PRE.ts-hl {font-size: 11px; font-family : monospace;}
394 PRE.ts-hl .ts-prespace {}
395 PRE.ts-hl .ts-objstr_postspace {}
396 PRE.ts-hl .ts-operator_postspace {}
397 PRE.ts-hl .ts-operator { color: black; font-weight: bold; }
398 PRE.ts-hl .ts-value {color: #cc0000;}
399 PRE.ts-hl .ts-objstr {color: #0000cc;}
400 PRE.ts-hl .ts-value_copy {color: #006600;}
401 PRE.ts-hl .ts-value_unset {background-color: #66cc66;}
402 PRE.ts-hl .ts-ignored {background-color: #66cc66;}
403 PRE.ts-hl .ts-default {background-color: #66cc66;}
404 PRE.ts-hl .ts-comment {color: #666666; font-style: italic;}
405 PRE.ts-hl .ts-condition {background-color: maroon; color: #ffffff; font-weight: bold;}
406 PRE.ts-hl .ts-error {background-color: yellow; border: 1px red dashed; font-weight: bold;}
407 PRE.ts-hl .ts-linenum {background-color: #eeeeee;}
408
409
410
411
412
413
414
415
416
417
418
419
420 /* Visual debugging: */
421 /*
422 H2,H3,H4,DIV {border: 1px dotted #666666;}
423 */