project/static/js/edit_area.css

   1 body, html{\r
   2         margin: 0; \r
   3         padding: 0;\r
   4         height: 100%;\r
   5         border: none;\r
   6         overflow: hidden;\r
   7         background-color: #FFF;\r
   8 }\r
   9 \r
  10 body, html, table, form, textarea{\r
  11         font: 12px monospace, sans-serif;\r
  12 }\r
  13 \r
  14 #editor{\r
  15         border: solid #888 1px;\r
  16         overflow: hidden;\r
  17 }\r
  18 \r
  19 #result{\r
  20         z-index: 4; \r
  21         overflow-x: auto;\r
  22         overflow-y: scroll;\r
  23         border-top: solid #888 1px;\r
  24         border-bottom: solid #888 1px;\r
  25         position: relative;\r
  26         clear: both;\r
  27 }\r
  28 \r
  29 #result.empty{\r
  30         overflow: hidden;\r
  31 }\r
  32 \r
  33 #container{\r
  34         overflow: hidden;\r
  35         border: solid blue 0;\r
  36         position: relative; \r
  37         z-index: 10;\r
  38         padding: 0 5px 0 45px;\r
  39         /*padding-right: 5px;*/ \r
  40 }\r
  41 \r
  42 #textarea{\r
  43         position: relative; \r
  44         top: 0; \r
  45         left: 0;\r
  46         margin: 0;\r
  47         padding: 0;\r
  48         width: 100%;\r
  49         height: 100%; \r
  50         overflow: hidden;  \r
  51         z-index: 7; \r
  52         border-width: 0;\r
  53         background-color: transparent;\r
  54         resize: none;\r
  55 }\r
  56 \r
  57 #textarea, #textarea:hover{\r
  58         outline: none;  /* safari outline fix */\r
  59 }\r
  60 \r
  61 #content_highlight{\r
  62         white-space: pre;\r
  63         margin: 0;\r
  64         padding: 0;\r
  65         position : absolute; \r
  66         z-index: 4; \r
  67         overflow: visible;\r
  68 }\r
  69 \r
  70 \r
  71 #selection_field, #selection_field_text{\r
  72         margin: 0; \r
  73         background-color: #E1F2F9; \r
  74 /*      height: 1px; */  \r
  75         position: absolute;\r
  76         z-index: 5;\r
  77         top: -100px;\r
  78         padding: 0;\r
  79         white-space: pre;\r
  80         overflow: hidden;\r
  81 }\r
  82 \r
  83 #selection_field.show_colors {\r
  84         z-index: 3;\r
  85         background-color:#EDF9FC;\r
  86         \r
  87 }\r
  88 \r
  89 #selection_field strong{\r
  90         font-weight:normal;\r
  91 }\r
  92 \r
  93 #selection_field.show_colors *, #selection_field_text * {\r
  94         visibility: hidden;\r
  95 }\r
  96 \r
  97 #selection_field_text{\r
  98         background-color:transparent;\r
  99 }\r
 100 \r
 101 #selection_field_text strong{\r
 102         font-weight:normal;\r
 103         background-color:#3399FE;\r
 104         color: #FFF;\r
 105         visibility:visible;\r
 106 }\r
 107 \r
 108 #container.word_wrap #content_highlight,\r
 109 #container.word_wrap #selection_field,\r
 110 #container.word_wrap #selection_field_text,\r
 111 #container.word_wrap #test_font_size{\r
 112         white-space: pre-wrap;       /* css-3 */\r
 113         white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */\r
 114         white-space: -pre-wrap;      /* Opera 4-6 */\r
 115         white-space: -o-pre-wrap;    /* Opera 7 */\r
 116         word-wrap: break-word;       /* Internet Explorer 5.5+ */\r
 117         width: 99%;\r
 118 }\r
 119 \r
 120 #line_number{\r
 121         position: absolute;\r
 122         overflow: hidden;\r
 123         border-right: solid black 1px;\r
 124         z-index:8;\r
 125         width: 38px;\r
 126         padding: 0 5px 0 0;\r
 127         margin: 0 0 0 -45px;\r
 128         text-align: right;\r
 129         color: #AAAAAA;\r
 130 }\r
 131 \r
 132 #test_font_size{\r
 133         padding: 0; \r
 134         margin: 0; \r
 135         visibility: hidden;\r
 136         position: absolute;\r
 137         white-space: pre;\r
 138 }\r
 139 \r
 140 pre{\r
 141         margin: 0;\r
 142         padding: 0;\r
 143 }\r
 144 \r
 145 .hidden{\r
 146         opacity: 0.2; \r
 147         filter:alpha(opacity=20);\r
 148 }\r
 149 \r
 150 #result .edit_area_cursor{\r
 151         position: absolute; \r
 152         z-index:6; \r
 153         background-color: #FF6633;\r
 154         top: -100px;\r
 155         margin: 0;\r
 156 }\r
 157 \r
 158 #result .edit_area_selection_field .overline{\r
 159         background-color: #996600;\r
 160 }\r
 161 \r
 162 \r
 163 /* area popup */\r
 164 .editarea_popup{\r
 165         border: solid 1px #888888;\r
 166         background-color: #ECE9D8; \r
 167         width: 250px; \r
 168         padding: 4px; \r
 169         position: absolute;\r
 170         visibility: hidden; \r
 171         z-index: 15;\r
 172         top: -500px;\r
 173 }\r
 174 \r
 175 .editarea_popup, .editarea_popup table{\r
 176         font-family: sans-serif;\r
 177         font-size: 10pt;\r
 178 }\r
 179 \r
 180 .editarea_popup img{\r
 181         border: 0;\r
 182 }\r
 183 \r
 184 .editarea_popup .close_popup{\r
 185         float: right; \r
 186         line-height: 16px; \r
 187         border: 0; \r
 188         padding: 0;\r
 189 }\r
 190 \r
 191 .editarea_popup h1,.editarea_popup h2,.editarea_popup h3,.editarea_popup h4,.editarea_popup h5,.editarea_popup h6{\r
 192         margin: 0;\r
 193         padding: 0;\r
 194 }\r
 195 \r
 196 .editarea_popup .copyright{\r
 197         text-align: right;\r
 198 }       \r
 199 \r
 200 /* Area_search */\r
 201 div#area_search_replace{\r
 202         /*width: 250px;*/\r
 203 }\r
 204 \r
 205 div#area_search_replace img{\r
 206         border: 0;\r
 207 }\r
 208 \r
 209 div#area_search_replace div.button{\r
 210         text-align: center;\r
 211         line-height: 1.7em;\r
 212 }\r
 213 \r
 214 div#area_search_replace .button a{\r
 215         cursor: pointer;\r
 216         border: solid 1px #888888;\r
 217         background-color: #DEDEDE;\r
 218         text-decoration: none;\r
 219         padding: 0 2px;\r
 220         color: #000000; \r
 221         white-space: nowrap;\r
 222 }\r
 223 \r
 224 div#area_search_replace a:hover{        \r
 225         /*border: solid 1px #888888;*/\r
 226         background-color: #EDEDED;\r
 227 }\r
 228 \r
 229 div#area_search_replace  #move_area_search_replace{\r
 230         cursor: move; \r
 231         border: solid 1px #888;\r
 232 }\r
 233 \r
 234 div#area_search_replace  #close_area_search_replace{\r
 235         text-align: right; \r
 236         vertical-align: top; \r
 237         white-space: nowrap;\r
 238 }\r
 239 \r
 240 div#area_search_replace  #area_search_msg{\r
 241         height: 18px; \r
 242         overflow: hidden; \r
 243         border-top: solid 1px #888; \r
 244         margin-top: 3px;\r
 245 }\r
 246 \r
 247 /* area help */\r
 248 #edit_area_help{\r
 249         width: 350px;\r
 250 }\r
 251 \r
 252 #edit_area_help div.close_popup{\r
 253         float: right;\r
 254 }\r
 255 \r
 256 /* area_toolbar */\r
 257 .area_toolbar{\r
 258         /*font: 11px sans-serif;*/\r
 259         width: 100%; \r
 260         /*height: 21px; */\r
 261         margin: 0; \r
 262         padding: 0;\r
 263         background-color: #ECE9D8;\r
 264         text-align: center;\r
 265 }\r
 266 \r
 267 .area_toolbar, .area_toolbar table{\r
 268         font: 11px sans-serif;\r
 269 }\r
 270 \r
 271 .area_toolbar img{\r
 272         border: 0;\r
 273         vertical-align: middle;\r
 274 }\r
 275 \r
 276 .area_toolbar input{\r
 277         margin: 0;\r
 278         padding: 0;\r
 279 }\r
 280 \r
 281 .area_toolbar select{\r
 282     font-family: 'MS Sans Serif',sans-serif,Verdana,Arial;\r
 283     font-size: 7pt;\r
 284     font-weight: normal;\r
 285     margin: 2px 0 0 0 ;\r
 286     padding: 0;\r
 287     vertical-align: top;\r
 288     background-color: #F0F0EE;\r
 289 }\r
 290 \r
 291 table.statusbar{\r
 292         width: 100%;\r
 293 }\r
 294 \r
 295 .area_toolbar td.infos{\r
 296         text-align: center;\r
 297         width: 130px;\r
 298         border-right: solid 1px #888;\r
 299         border-width: 0 1px 0 0;\r
 300         padding: 0;\r
 301 }\r
 302 \r
 303 .area_toolbar td.total{\r
 304         text-align: right;\r
 305         width: 50px;\r
 306         padding: 0;\r
 307 }\r
 308 \r
 309 .area_toolbar td.resize{\r
 310         text-align: right;\r
 311 }\r
 312 /*\r
 313 .area_toolbar span{\r
 314         line-height: 1px;\r
 315         padding: 0;\r
 316         margin: 0;\r
 317 }*/\r
 318 \r
 319 .area_toolbar span#resize_area{\r
 320         cursor: nw-resize;\r
 321         visibility: hidden;\r
 322 }\r
 323 \r
 324 /* toolbar buttons */\r
 325 .editAreaButtonNormal, .editAreaButtonOver, .editAreaButtonDown, .editAreaSeparator, .editAreaSeparatorLine, .editAreaButtonDisabled, .editAreaButtonSelected {\r
 326         border: 0; margin: 0; padding: 0; background: transparent;\r
 327         margin-top: 0;\r
 328         margin-left: 1px;\r
 329         padding: 0;\r
 330 }\r
 331 \r
 332 .editAreaButtonNormal {\r
 333         border: 1px solid #ECE9D8 !important;\r
 334         cursor: pointer;\r
 335 }\r
 336 \r
 337 .editAreaButtonOver {\r
 338         border: 1px solid #0A246A !important;\r
 339         cursor: pointer;\r
 340         background-color: #B6BDD2;\r
 341 }\r
 342 \r
 343 .editAreaButtonDown {\r
 344         cursor: pointer;\r
 345         border: 1px solid #0A246A !important;\r
 346         background-color: #8592B5;\r
 347 }\r
 348 \r
 349 .editAreaButtonSelected {\r
 350         border: 1px solid #C0C0BB !important;\r
 351         cursor: pointer;\r
 352         background-color: #F4F2E8;\r
 353 }\r
 354 \r
 355 .editAreaButtonDisabled {\r
 356         filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);\r
 357         -moz-opacity:0.3;\r
 358         opacity: 0.3;\r
 359         border: 1px solid #F0F0EE !important;\r
 360         cursor: pointer;\r
 361 }\r
 362 \r
 363 .editAreaSeparatorLine {\r
 364         margin: 1px 2px;\r
 365         background-color: #C0C0BB;\r
 366         width: 2px;\r
 367         height: 18px;\r
 368 }\r
 369 \r
 370 /* waiting screen */\r
 371 #processing{\r
 372         display: none; \r
 373         background-color:#ECE9D8; \r
 374         border: solid #888 1px;\r
 375         position: absolute; \r
 376         top: 0; \r
 377         left: 0;\r
 378         width: 100%; \r
 379         height: 100%; \r
 380         z-index: 100; \r
 381         text-align: center;\r
 382 }\r
 383 \r
 384 #processing_text{\r
 385         position:absolute;\r
 386         left: 50%;\r
 387         top: 50%;\r
 388         width: 200px;\r
 389         height: 20px; \r
 390         margin-left: -100px;\r
 391         margin-top: -10px;\r
 392         text-align: center;\r
 393 }\r
 394 /* end */\r
 395 \r
 396 \r
 397 /**** tab browsing area ****/\r
 398 #tab_browsing_area{\r
 399         display: none;\r
 400         background-color: #CCC9A8;\r
 401         border-top: 1px solid #888;\r
 402         text-align: left;\r
 403         margin: 0;\r
 404 }\r
 405 \r
 406 #tab_browsing_list {\r
 407         padding: 0; \r
 408         margin: 0; \r
 409         list-style-type: none;\r
 410         white-space: nowrap;\r
 411 }\r
 412 #tab_browsing_list li {\r
 413         float: left;\r
 414         margin: -1px;\r
 415 }\r
 416 #tab_browsing_list a {\r
 417         position: relative;\r
 418         display: block; \r
 419         text-decoration: none; \r
 420         float: left; \r
 421         cursor: pointer;\r
 422         line-height:14px;\r
 423 }\r
 424 \r
 425 #tab_browsing_list a span {\r
 426         display: block; \r
 427         color: #000; \r
 428         background: #ECE9D8; \r
 429         border: 1px solid #888; \r
 430         border-width: 1px 1px 0; \r
 431         text-align: center; \r
 432         padding: 2px 2px 1px 4px; \r
 433         position: relative;     /*IE 6 hack */\r
 434 }\r
 435 \r
 436 #tab_browsing_list a b {\r
 437         display: block; \r
 438         border-bottom: 2px solid #617994;\r
 439 }\r
 440 \r
 441 #tab_browsing_list a .edited {\r
 442         display: none;\r
 443 }\r
 444 \r
 445 #tab_browsing_list a.edited .edited {\r
 446         display: inline;\r
 447 }\r
 448 \r
 449 #tab_browsing_list a img{\r
 450         margin-left: 7px;\r
 451 }\r
 452 \r
 453 #tab_browsing_list a.edited img{\r
 454         margin-left: 3px;\r
 455 }\r
 456 \r
 457 #tab_browsing_list a:hover span {\r
 458         background: #F4F2E8;\r
 459         border-color: #0A246A;\r
 460 }\r
 461 \r
 462 #tab_browsing_list .selected a span{\r
 463         background: #046380;\r
 464         color: #FFF;\r
 465 }\r
 466 \r
 467 \r
 468 #no_file_selected{\r
 469         height: 100%;\r
 470         width: 150%; /* Opera need more than 100% */\r
 471         background: #CCC;\r
 472         display: none;\r
 473         z-index: 20;\r
 474         position: absolute;\r
 475 }\r
 476 \r
 477 \r
 478 /*** Non-editable mode ***/\r
 479 .non_editable #editor\r
 480 {\r
 481         border-width: 0 1px;\r
 482 }\r
 483 \r
 484 .non_editable .area_toolbar\r
 485 {\r
 486         display: none;\r
 487 }\r
 488 \r
 489 /*** Auto completion ***/\r
 490 #auto_completion_area\r
 491 {\r
 492         background:     #FFF;\r
 493         border:         solid 1px #888;\r
 494         position:       absolute;\r
 495         z-index:        15;\r
 496         width:  280px;\r
 497         height: 180px;\r
 498         overflow: auto;\r
 499         display:none;\r
 500 }\r
 501 \r
 502 #auto_completion_area a, #auto_completion_area a:visited\r
 503 {\r
 504         display:        block;\r
 505         padding:        0 2px 1px;\r
 506         color:          #000;\r
 507         text-decoration:none;\r
 508 }\r
 509 \r
 510 #auto_completion_area a:hover, #auto_completion_area a:focus, #auto_completion_area a.focus\r
 511 {\r
 512         background:     #D6E1FE;\r
 513         text-decoration:none;\r
 514 }\r
 515 \r
 516 #auto_completion_area ul\r
 517 {\r
 518         margin: 0;\r
 519         padding: 0;\r
 520         list-style: none inside;\r
 521 }\r
 522 #auto_completion_area li\r
 523 {\r
 524         padding:        0;\r
 525 }\r
 526 #auto_completion_area .prefix\r
 527 {\r
 528         font-style: italic;\r
 529         padding: 0 3px;\r
 530 }