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 */