theme/chameleon/ui/chameleon_ui.css

   1 /* sorry about the massive abuse of !important ;-) this tries to prevent user changes in CSS being
   2 inherited by the user interface */
   3
   4 /* general box styles */
   5 #chameleon-selector-box, #chameleon-style-box,
   6 #chameleon-color-box, #chameleon-file-box,
   7 #chameleon-export-box {
   8   position: absolute !important;
   9   left: 0; top: 0;
  10   margin: 0 !important; padding: 0 !important;
  11   width: 400px !important;
  12   background: #eee !important;
  13   border: 1px solid #ccc !important;
  14   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  15   color: #000 !important;
  16 }
  17
  18 /* reset */
  19 #chameleon-selector-box div, #chameleon-style-box div, #chameleon-color-box div, #chameleon-file-box div {
  20   margin: 0 !important; padding: 0 !important;
  21   color: #000 !important;
  22   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  23   border: 0 !important;
  24 }
  25
  26 #chameleon-selector-box a, #chameleon-style-box a, #chameleon-color-box a, #chameleon-file-box a {
  27   margin: 0 !important; padding: 0 !important;
  28   color: #000 !important;
  29   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  30   border: 0 !important;
  31   background: none !important;
  32 }
  33
  34 #chameleon-selector-box a, #chameleon-style-box a, #chameleon-color-box a, #chameleon-file-box a {
  35   cursor: pointer !important;
  36 }
  37
  38 #chameleon-selector-box table, #chameleon-style-box table, #chameleon-color-box table, #chameleon-file-box table,
  39 #chameleon-selector-box tr, #chameleon-style-box tr, #chameleon-color-box tr, #chameleon-file-box tr,
  40 #chameleon-selector-box td, #chameleon-style-box td, #chameleon-color-box td, #chameleon-file-box td,
  41 #chameleon-selector-box th, #chameleon-style-box th, #chameleon-color-box th, #chameleon-file-box th  {
  42   padding: 0 !important;
  43   color: #000 !important;
  44   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  45   border: 0 !important;
  46   background: none !important;
  47 }
  48
  49 #chameleon-selector-box p, #chameleon-style-box p, #chameleon-color-box p, #chameleon-file-box p {
  50   margin: 0 !important; padding: 5px 10px 0 10px !important;
  51   color: #000 !important;
  52   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  53   border: 0 !important;
  54   background: none !important;
  55 }
  56
  57 /* drag handles */
  58 #chameleon-selector-box #chameleon-selector-box-handle,
  59 #chameleon-style-box #chameleon-style-box-handle,
  60 #chameleon-color-box #chameleon-color-box-handle,
  61 #chameleon-file-box #chameleon-file-box-handle,
  62 #chameleon-export-box #chameleon-export-box-handle {
  63   width: 100% !important; min-height: 20px !important; _height: 20px !important;
  64   background: #ddd !important;
  65 }
  66
  67 #chameleon-selector-box #chameleon-selector-box-close,
  68 #chameleon-style-box #chameleon-style-box-close,
  69 #chameleon-color-box #chameleon-color-box-close,
  70 #chameleon-file-box #chameleon-file-box-close {
  71   padding: 1px 5px !important;
  72   float: right !important;
  73   cursor: pointer !important;
  74 }
  75
  76 /* selector box specific stuff */
  77 #chameleon-selector-box ol {
  78   list-style-type: none !important;
  79   margin: 0 !important; padding: 10px 20px 10px 10px !important;
  80 }
  81
  82 #chameleon-selector-box li {
  83   margin: 0 0 2px 0 !important; padding: 0 0 0 20px !important;
  84   color: #000 !important;
  85   font: 9pt/1.4 arial,helvetica,sans-serif !important;
  86   background: url(images/tag.gif) no-repeat 0 0 !important;
  87   position: relative !important;
  88 }
  89 #chameleon-selector-box li.row1 {
  90   background-color: #eee !important;
  91 }
  92
  93 #chameleon-selector-box #chameleon-selector-list li {
  94   background-image: none !important;
  95 }
  96
  97 #chameleon-selector-box #chameleon-selector-list {
  98   border: 1px solid #ccc !important;
  99   background: #f6f6f6 !important;
 100   margin: 2px !important;
 101 }
 102
 103 #chameleon-selector-box #chameleon-selector-list li {
 104   margin: 2px !important; padding: 0 !important;
 105 }
 106
 107 #chameleon-selector-box span {
 108   padding: 1px 3px !important;
 109   font: 9pt/1.4 arial,helvetica,sans-serif !important;
 110   color: #000 !important;
 111   cursor: pointer !important;
 112 }
 113
 114 #chameleon-selector-box span.prop-value {
 115   padding-right: 0 !important;
 116   cursor: default !important;
 117   position: absolute !important;
 118   top: 0 !important; right: 0 !important;
 119 }
 120
 121 * html #chameleon-selector-box span.prop-value {
 122   padding-right: 15px !important;
 123 }
 124
 125 #chameleon-selector-box span.active-selector {
 126   background: #fff !important;
 127   font-weight: bold !important;
 128 }
 129
 130 #chameleon-selector-box #chameleon-style-overview-container {
 131   background: #f6f6f6 url(images/grad.gif) repeat-x 0 100% !important;
 132 }
 133
 134 #chameleon-selector-box #chameleon-style-overview {
 135   margin: 0 !important; padding: 0 !important;
 136   width: 100% !important;
 137   border-collapse: collapse !important;
 138 }
 139
 140 #chameleon-selector-box #chameleon-style-overview th.selector,
 141 #chameleon-selector-box #chameleon-style-overview th.current-selector {
 142   padding: 1px 5px !important;
 143   background: #000 !important;
 144   color: #fff !important;
 145   font-weight: bold !important;
 146   text-align: left !important;
 147 }
 148
 149 #chameleon-selector-box #chameleon-style-overview th.current-selector,
 150 #chameleon-selector-box #chameleon-style-overview td.current-selector {
 151   border-top: 2px solid #f90 !important;
 152   border-bottom: 2px solid #f90 !important;
 153 }
 154
 155 #chameleon-selector-box #chameleon-style-overview td.selector,
 156 #chameleon-selector-box #chameleon-style-overview td.current-selector {
 157   padding: 1px 5px !important;
 158   background: #000 !important;
 159   color: #fff !important;
 160   font-weight: normal !important;
 161   text-align: left !important;
 162 }
 163
 164 #chameleon-selector-box #chameleon-style-overview td.selector a,
 165 #chameleon-selector-box #chameleon-style-overview td.current-selector a {
 166   color: #f90 !important;
 167   font-weight: bold !important;
 168 }
 169
 170 #chameleon-selector-box #chameleon-style-overview td.prop {
 171   padding: 1px 0 1px 5px !important;
 172   width: 150px !important;
 173 }
 174
 175 #chameleon-selector-box #chameleon-style-overview td.value {
 176   padding: 1px 5px 1px 0 !important;
 177 }
 178
 179 /* style box specific stuff */
 180
 181 #chameleon-style-box input.chameleon-input-text {
 182   border: 1px solid #999 !important;
 183   color: #000 !important;
 184   background: #fff none !important;
 185 }
 186
 187 #chameleon-style-box option, #chameleon-style-box select {
 188   color: #000 !important;
 189   background: #fff none !important;
 190 }
 191
 192 #chameleon-style-box input.chameleon-input-text:focus {
 193   border: 1px solid #000 !important;
 194   background: #fff none !important;
 195 }
 196
 197 #chameleon-selector-box input.chameleon-btn,
 198 #chameleon-style-box input.chameleon-btn {
 199   border: 1px solid #000 !important;
 200   background: #aaa none !important;
 201   color: #000 !important;
 202   font-size: 9pt !important;
 203   padding: 2px 5px !important; margin: 0 2px;
 204 }
 205
 206 #chameleon-selector-box input.chameleon-btn:hover,
 207 #chameleon-style-box input.chameleon-btn:hover {
 208   background: #000 none !important;
 209   color: #fff !important;
 210 }
 211
 212
 213 #chameleon-style-box table {
 214   margin: 3px 3px 0 1px !important;
 215   position: relative !important;
 216   z-index: 2 !important;
 217 }
 218
 219 #chameleon-style-box #chameleon-style-controls, #chameleon-selector-box #chameleon-selector-controls {
 220   position: relative !important;
 221   border: 1px solid #999 !important;
 222   background: #f6f6f6 !important;
 223   margin: -1px 3px 3px 2px !important;
 224   z-index: 1 !important;
 225 }
 226
 227 #chameleon-style-box #chameleon-style-tabs, #chameleon-selector-box #chameleon-selector-tabs {
 228   position: relative !important;
 229   margin: 3px 3px 0 3px !important;
 230   z-index: 2 !important;
 231 }
 232
 233 #chameleon-style-box td.chameleon-style-tab, #chameleon-selector-box td.chameleon-selector-tab {
 234   border: 1px solid #999 !important;
 235   border-bottom: 0 !important;
 236   background: transparent url(images/inactive_tab.gif) 0 100% repeat-x !important;
 237   padding: 2px 5px 1px 5px !important;
 238   cursor: pointer !important;
 239 }
 240
 241 #chameleon-style-box td.chameleon-style-tab-active, #chameleon-selector-box td.chameleon-selector-tab-active {
 242   border: 1px solid #999 !important;
 243   border-bottom: 0 !important;
 244   background: transparent url(images/active_tab.gif) 0 100% repeat-x !important;
 245   padding: 2px 5px 1px 5px !important;
 246 }
 247
 248
 249 #chameleon-style-controls td {
 250   text-align: left !important;
 251   padding: 2px !important;
 252 }
 253
 254 #chameleon-style-controls td.label {
 255   width: 120px !important;
 256   text-align: right !important;
 257 }
 258
 259 /* the open color picker/image browser icons */
 260 #chameleon-style-controls #chameleon-style-controls-color-picker-color,
 261 #chameleon-style-controls #chameleon-style-controls-color-picker-background-color,
 262 #chameleon-style-controls #chameleon-style-controls-color-picker-border-color,
 263 #chameleon-style-controls #chameleon-style-controls-color-picker-border-left-color,
 264 #chameleon-style-controls #chameleon-style-controls-color-picker-border-right-color,
 265 #chameleon-style-controls #chameleon-style-controls-color-picker-border-top-color,
 266 #chameleon-style-controls #chameleon-style-controls-color-picker-border-bottom-color,
 267 #chameleon-style-controls #chameleon-style-controls-background-image-picker {
 268   width: 20px !important; height: 20px !important;
 269   border: 1px solid #000 !important;
 270   margin: 0 0 0 2px !important;
 271   cursor: pointer !important;
 272 }
 273
 274 /* color picker */
 275 #chameleon-color-box #chameleon-color-palette {
 276   position: relative !important;
 277   margin: 10px 12px !important;
 278 }
 279
 280 body #chameleon-color-box {
 281   width: 312px !important;
 282 }
 283
 284 #chameleon-color-box #chameleon-color-palette div {
 285   cursor: pointer !important;
 286 }
 287
 288 #chameleon-file-box table {
 289   margin: 2px 0 !important;
 290 }
 291
 292 #chameleon-file-box #chameleon-files-parent {
 293   width: 100px !important;
 294   cursor: pointer !important;
 295 }
 296
 297 #chameleon-file-box #chameleon-files-location p {
 298   font-weight: bold !important;
 299 }
 300
 301 #chameleon-file-box #chameleon-files-location p span {
 302   font-weight: normal !important;
 303 }
 304
 305 #chameleon-file-box div p, #chameleon-file-box table p {
 306   padding: 0 0 0 20px !important; margin: 5px 10px !important;
 307 }
 308
 309 #chameleon-file-box div p {
 310   background: url(images/image.gif) no-repeat 0 0 !important;
 311 }
 312
 313 #chameleon-file-box div p.chameleon-image-folder {
 314   background: url(images/folder.gif) no-repeat 0 0 !important;
 315 }
 316
 317 #chameleon-file-box table p.chameleon-image-folder {
 318   background: url(images/parent.gif) no-repeat 0 0 !important;
 319 }
 320
 321 #chameleon-file-box div p span {
 322   cursor: pointer !important;
 323 }
 324
 325 /* the buttons */
 326
 327 #chameleon-selector-box input.chameleon-btn,
 328 #chameleon-style-box input.chameleon-btn,
 329 #chameleon-color-box input.chameleon-btn,
 330 #chameleon-file-box input.chameleon-btn {
 331   cursor: pointer !important;
 332   margin-bottom: 3px !important;
 333 }
 334
 335 #chameleon-selector-box p.chameleon-instructions, #chameleon-style-box p.chameleon-instructions {
 336   font-size: 9pt !important;
 337   padding: 10px !important;
 338 }
 339
 340 #chameleon-status-msg {
 341   text-align: center !important;
 342 }
 343
 344 #chameleon-status-msg input {
 345   margin-top: 2px !important;
 346 }
 347
 348
 349 div table#chameleon-status-msg {
 350   position: relative !important;
 351   background: #f6f6f6 !important;
 352   width: 390px !important;
 353   margin: 5px auto !important;
 354   border: 1px solid #999 !important;
 355 }
 356
 357 div table#chameleon-status-msg td.chameleon-ok {
 358   background: #f6f6f6 url(images/ok.gif) no-repeat 50% 50% !important;
 359   width: 25px !important; height: 25px !important;
 360 }
 361
 362 div table#chameleon-status-msg td.chameleon-working {
 363   background: #f6f6f6 url(images/working.gif) no-repeat 50% 50% !important;
 364   width: 25px !important; height: 25px !important;
 365 }
 366
 367 div table#chameleon-status-msg td.chameleon-notice {
 368   background: #f6f6f6 url(images/notice.gif) no-repeat 50% 50% !important;
 369   width: 25px !important; height: 25px !important;
 370 }
 371
 372 div table#chameleon-status-msg td.chameleon-error {
 373   background: #f6f6f6 url(images/error.gif) no-repeat 50% 50% !important;
 374   width: 25px !important; height: 25px !important;
 375 }
 376
 377 div#chameleon-launch-hotspots, div#chameleon-status-msg {
 378   position: absolute !important;
 379   top: 0 !important; left: 50% !important;
 380   z-index: 2 !important;
 381   background: #f6f6f6 !important;
 382   border: 1px solid #999 !important;
 383   padding: 2px 10px !important;
 384   margin: 0 0 0 -200px !important;
 385   cursor: pointer !important;
 386   color: #000 !important;
 387   width: 400px !important;
 388   font: 9pt/1.4 arial,helvetica,sans-serif !important;
 389   text-align: center !important;
 390 }
 391
 392 body div#chameleon-launch-hotspots {
 393   width: 200px !important;
 394   margin: 0 0 0 -100px !important;
 395 }
 396
 397 #chameleon-selector-box ul {
 398   list-style-type: none !important;
 399 }
 400