examples/ext/resources/css/xtheme-vista.css

   1 /*\r
   2  * Ext JS Library 1.1.1\r
   3  * Copyright(c) 2006-2007, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://www.extjs.com/license\r
   7  */\r
   8 \r
   9 .ext-el-mask-msg {\r
  10     border:1px solid #aaa;\r
  11     background: #ddd url(../images/default/box/tb.gif) repeat-x 0 -16px;\r
  12 }\r
  13 .ext-el-mask-msg div {\r
  14     border:1px solid #ccc;\r
  15 }\r
  16 /*\r
  17  Menu\r
  18  */\r
  19 .x-menu {\r
  20         border-color: #999 #999 #999 #999;\r
  21     background-image:url(../images/gray/menu/menu.gif);\r
  22 }\r
  23 .x-menu-item-arrow{\r
  24         background-image:url(../images/gray/menu/menu-parent.gif);\r
  25 }\r
  26 .x-menu-item {\r
  27         color:#222;\r
  28 }\r
  29 .x-menu-item-active {\r
  30         background:#ddd;\r
  31     border:1px solid #aaa;\r
  32 }\r
  33 .x-menu-sep {\r
  34         background:#aaa;\r
  35 }\r
  36 /** \r
  37 * Tabs\r
  38 */\r
  39 .x-tabs-wrap {\r
  40         background:#4f4f4f;\r
  41         border-bottom:1px solid #b3b6b0;\r
  42 }\r
  43 .x-tabs-strip .x-tabs-text {\r
  44         color:white;\r
  45         font-weight:normal;\r
  46 }\r
  47 .x-tabs-strip .on .x-tabs-text {\r
  48         cursor:default;\r
  49         color:#333333;\r
  50 }\r
  51 .x-tabs-top .x-tabs-strip a.x-tabs-right {\r
  52         background:transparent url(../images/vista/tabs/tab-sprite.gif) no-repeat right -50px;\r
  53 }\r
  54 .x-tabs-top .x-tabs-strip a .x-tabs-left{\r
  55         background:transparent url(../images/vista/tabs/tab-sprite.gif) no-repeat 0px -150px;\r
  56 }\r
  57 .x-tabs-top .x-tabs-strip .on .x-tabs-right {\r
  58          background: url(../images/vista/tabs/tab-sprite.gif) no-repeat right 0;\r
  59 }\r
  60 .x-tabs-top .x-tabs-strip .on .x-tabs-left{\r
  61          background: url(../images/vista/tabs/tab-sprite.gif) no-repeat 0px -100px;\r
  62 }\r
  63 .x-tabs-strip .x-tabs-closable .close-icon{\r
  64         background-image:url(../images/vista/layout/tab-close.gif);\r
  65 }\r
  66 .x-tabs-strip .on .close-icon{\r
  67         background-image:url(../images/vista/layout/tab-close-on.gif);\r
  68 }\r
  69 .x-tabs-strip .x-tabs-closable .close-over{\r
  70         background-image:url(../images/vista/layout/tab-close-on.gif);\r
  71 }\r
  72 .x-tabs-body {\r
  73     border:1px solid #b3b6b0;\r
  74     border-top:0 none;\r
  75 }\r
  76 \r
  77 .x-tabs-bottom .x-tabs-strip {\r
  78         background:#4f4f4f;\r
  79 }\r
  80 .x-tabs-bottom .x-tabs-strip a.x-tabs-right {\r
  81         background:transparent url(../images/vista/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom right;\r
  82 }\r
  83 .x-tabs-bottom .x-tabs-strip a .x-tabs-left{\r
  84         background:transparent url(../images/vista/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom left;\r
  85 }\r
  86 .x-tabs-bottom .x-tabs-wrap {\r
  87         border-bottom:0 none;\r
  88         padding-top:0;\r
  89         border-top:1px solid #b3b6b0;\r
  90 }\r
  91 .x-tabs-bottom .x-tabs-strip .on .x-tabs-right {\r
  92          background: url(../images/vista/tabs/tab-btm-right-bg.gif) no-repeat bottom left;\r
  93 }\r
  94 .x-tabs-bottom .x-tabs-strip .on .x-tabs-left {\r
  95          background: url(../images/vista/tabs/tab-btm-left-bg.gif) no-repeat bottom right;\r
  96 }\r
  97 \r
  98 .x-tabs-bottom .x-tabs-body {\r
  99     border:1px solid #b3b6b0;\r
 100     border-bottom:0 none;\r
 101 }\r
 102 /**\r
 103 * Basic-Dialog \r
 104 */\r
 105 .x-dlg-proxy {\r
 106         background:#d3d6d0;\r
 107         border:2px solid #b3b6b0;\r
 108 }\r
 109 .x-dlg-shadow{\r
 110         background:#cccccc;\r
 111    opacity:.3;\r
 112    -moz-opacity:.3;\r
 113    filter: alpha(opacity=30);\r
 114 }\r
 115 .x-dlg .x-dlg-hd {\r
 116         background: url(../images/vista/basic-dialog/hd-sprite.gif) repeat-x 0 -82px;\r
 117         background-color:#333333;\r
 118         zoom:1;\r
 119 }\r
 120 .x-dlg .x-dlg-hd-left {\r
 121         opacity:.95;-moz-opacity:.95;filter:alpha(opacity=90);\r
 122         background: url(../images/vista/basic-dialog/hd-sprite.gif) no-repeat 0 -41px;\r
 123         zoom:1;\r
 124 }\r
 125 .x-dlg .x-dlg-hd-right {\r
 126         background: url(../images/vista/basic-dialog/hd-sprite.gif) no-repeat right 0;\r
 127         zoom:1;\r
 128 }\r
 129 .x-dlg .x-dlg-dlg-body{\r
 130         background:#fff;\r
 131         border:0 none;\r
 132         border-top:0 none;\r
 133         padding:0 0px 0px;\r
 134         position:absolute;\r
 135         top:24px;left:0;\r
 136         z-index:1;\r
 137 }\r
 138 .x-dlg-auto-tabs .x-dlg-dlg-body{\r
 139         background:transparent;\r
 140 }\r
 141 .x-dlg-auto-tabs .x-tabs-top .x-tabs-wrap{\r
 142         background:transparent;\r
 143 }\r
 144 .x-dlg .x-dlg-ft{\r
 145         border-top:1px solid #b3b6b0;\r
 146         background:#F0F0F0;\r
 147         padding-bottom:8px;\r
 148 }\r
 149 .x-dlg .x-dlg-bg{\r
 150         opacity:.90;-moz-opacity:.90;filter:alpha(opacity=85);\r
 151         zoom:1;\r
 152 }\r
 153 .x-dlg .x-dlg-bg-left,.x-dlg .x-dlg-bg-center,.x-dlg .x-dlg-bg-right{\r
 154 }\r
 155 .x-dlg .x-dlg-bg-center {\r
 156         padding: 0px 4px 4px 4px;\r
 157         background:transparent url(../images/vista/basic-dialog/bg-center.gif) repeat-x bottom;\r
 158         zoom:1;\r
 159 }\r
 160 .x-dlg .x-dlg-bg-left{\r
 161         padding-left:4px;\r
 162         background:transparent url(../images/vista/basic-dialog/bg-left.gif) no-repeat bottom left;\r
 163         zoom:1;\r
 164 }\r
 165 .x-dlg .x-dlg-bg-right{\r
 166         padding-right:4px;\r
 167         background:transparent url(../images/vista/basic-dialog/bg-right.gif) no-repeat bottom right;\r
 168         zoom:1;\r
 169 }\r
 170 .x-dlg .x-tabs-top .x-tabs-body{\r
 171         border:0 none;\r
 172 }\r
 173 .x-dlg .x-tabs-bottom .x-tabs-body{\r
 174         border:1px solid #b3b6b0;\r
 175         border-bottom:0 none;\r
 176 }\r
 177 .x-dlg .x-layout-container  .x-tabs-body{\r
 178         border:0 none;\r
 179 }\r
 180 .x-dlg .x-dlg-close {\r
 181     background-image:url(../images/vista/basic-dialog/close.gif);\r
 182 }\r
 183 .x-dlg .x-dlg-collapse {\r
 184     background-image:url(../images/vista/basic-dialog/collapse.gif);\r
 185 }\r
 186 .x-dlg-collapsed .x-dlg-collapse {\r
 187     background-image:url(../images/vista/basic-dialog/expand.gif);\r
 188 }\r
 189 .x-dlg div.x-resizable-handle-east{\r
 190         background-image:url(../images/vista/s.gif);\r
 191         border:0 none;\r
 192 }\r
 193 .x-dlg div.x-resizable-handle-south{\r
 194         background-image:url(../images/vista/s.gif);\r
 195         border:0 none;\r
 196 }\r
 197 .x-dlg div.x-resizable-handle-west{\r
 198         background-image:url(../images/vista/s.gif);\r
 199         border:0 none;\r
 200 }\r
 201 .x-dlg div.x-resizable-handle-southeast{\r
 202         background-image:url(../images/vista/s.gif);\r
 203         background-position: bottom right;\r
 204         width:8px;\r
 205         height:8px;\r
 206         border:0;\r
 207 }\r
 208 .x-dlg div.x-resizable-handle-southwest{\r
 209         background-image:url(../images/vista/s.gif);\r
 210         background-position: top right;\r
 211         margin-left:1px;\r
 212         margin-bottom:1px;\r
 213         border:0;\r
 214 }\r
 215 .x-dlg div.x-resizable-handle-north{\r
 216         background-image:url(../images/vista/s.gif);\r
 217         border:0 none;\r
 218 }\r
 219 \r
 220 /* QuickTips */\r
 221 \r
 222 .x-tip .x-tip-top {\r
 223         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 224 }\r
 225 .x-tip .x-tip-top-left {\r
 226         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 227 }\r
 228 .x-tip .x-tip-top-right {\r
 229         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 230 }\r
 231 .x-tip .x-tip-ft {\r
 232         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 233 }\r
 234 .x-tip .x-tip-ft-left {\r
 235         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 236 }\r
 237 .x-tip .x-tip-ft-right {\r
 238         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 239 }\r
 240 .x-tip .x-tip-bd-left {\r
 241         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 242 }\r
 243 .x-tip .x-tip-bd-right {\r
 244         background-image: url(../images/vista/qtip/tip-sprite.gif);\r
 245 }\r
 246 \r
 247 .x-tip .x-tip-bd-inner {\r
 248     padding:2px;\r
 249 }\r
 250 \r
 251 /* BorderLayout */\r
 252 .x-layout-container{\r
 253     background:#4f4f4f;\r
 254 }\r
 255 .x-layout-collapsed{\r
 256     background-color:#9f9f9f;\r
 257          border:1px solid #4c535c;\r
 258 }\r
 259 .x-layout-collapsed-over{\r
 260          background-color:#bfbfbf;\r
 261 }\r
 262 .x-layout-panel{\r
 263     border:1px solid #4c535c;\r
 264 }\r
 265 .x-layout-nested-layout .x-layout-panel {\r
 266           border:0 none;\r
 267 }\r
 268 .x-layout-split{\r
 269     background-color:#f3f2e7;\r
 270 }\r
 271 .x-layout-panel-hd{\r
 272     background-image: url(../images/vista/layout/panel-title-bg.gif);\r
 273     border-bottom:1px solid #b5bac1;\r
 274     color:white;\r
 275 }\r
 276 .x-layout-panel-hd-text{\r
 277         color:white;\r
 278 }\r
 279 .x-layout-tools-button-over{\r
 280     border:1px solid #4c535c;\r
 281          background:#9f9f9f url(../images/vista/layout/panel-title-bg.gif) repeat-x;\r
 282 }\r
 283 .x-layout-close{\r
 284     background-image:url(../images/vista/layout/tab-close.gif);\r
 285 }\r
 286 \r
 287 .x-layout-stick{\r
 288     background-image:url(../images/vista/layout/stick.gif);\r
 289 }\r
 290 .x-layout-collapse-west,.x-layout-expand-east{\r
 291     background-image:url(../images/vista/layout/collapse.gif);\r
 292 }\r
 293 .x-layout-expand-west,.x-layout-collapse-east{\r
 294     background-image:url(../images/vista/layout/expand.gif);\r
 295 }\r
 296 .x-layout-collapse-north,.x-layout-expand-south{\r
 297     background-image:url(../images/vista/layout/ns-collapse.gif);\r
 298 }\r
 299 .x-layout-expand-north,.x-layout-collapse-south{\r
 300     background-image:url(../images/vista/layout/ns-expand.gif);\r
 301 }\r
 302 .x-layout-split-h{\r
 303     background:#9f9f9f;\r
 304 }\r
 305 .x-layout-split-v{\r
 306     background:#9f9f9f;\r
 307 }\r
 308 .x-layout-panel .x-tabs-wrap{\r
 309     background:#4f4f4f;\r
 310 }\r
 311 .x-layout-nested-layout .x-layout-panel-north {\r
 312           border-bottom:1px solid #4c535c;\r
 313 }\r
 314 .x-layout-nested-layout .x-layout-panel-south {\r
 315           border-top:1px solid #4c535c;\r
 316 }\r
 317 .x-layout-nested-layout .x-layout-panel-east {\r
 318           border-left:1px solid #4c535c;\r
 319 }\r
 320 .x-layout-nested-layout .x-layout-panel-west {\r
 321           border-right:1px solid #4c535c;\r
 322 }\r
 323 .x-layout-panel-dragover {\r
 324         border: 2px solid #4c535c;\r
 325 }\r
 326 .x-layout-panel-proxy {\r
 327         background-image: url(../images/vista/layout/gradient-bg.gif);\r
 328         background-color:#f3f2e7;\r
 329         border:1px dashed #4c535c;\r
 330 }\r
 331 \r
 332 .x-layout-container .x-layout-tabs-body{\r
 333         border:0 none;\r
 334 }\r
 335 /** Resizable */\r
 336 \r
 337 .x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-east{\r
 338     background:url(../images/vista/sizer/e-handle.gif);\r
 339          background-position: left;\r
 340 }\r
 341 .x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-west{\r
 342     background:url(../images/vista/sizer/e-handle.gif);\r
 343          background-position: left;\r
 344 }\r
 345 .x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-south{\r
 346     background:url(../images/vista/sizer/s-handle.gif);\r
 347     background-position: top;\r
 348 }\r
 349 .x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-north{\r
 350     background:url(../images/vista/sizer/s-handle.gif);\r
 351     background-position: top;\r
 352 }\r
 353 .x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast{\r
 354     background:url(../images/vista/sizer/se-handle.gif);\r
 355     background-position: top left;\r
 356 }\r
 357 .x-resizable-over .x-resizable-handle-northwest,.x-resizable-pinned .x-resizable-handle-northwest{\r
 358     background:url(../images/vista/sizer/nw-handle.gif);\r
 359     background-position:bottom right;\r
 360 }\r
 361 .x-resizable-over .x-resizable-handle-northeast,.x-resizable-pinned .x-resizable-handle-northeast{\r
 362     background:url(../images/vista/sizer/ne-handle.gif);\r
 363     background-position: bottom left;\r
 364 }\r
 365 .x-resizable-over .x-resizable-handle-southwest,.x-resizable-pinned .x-resizable-handle-southwest{\r
 366     background:url(../images/vista/sizer/sw-handle.gif);\r
 367     background-position: top right;\r
 368 }\r
 369 .x-resizable-proxy{\r
 370     border: 1px dashed #615e55;\r
 371 }\r
 372 \r
 373 /** Toolbar */\r
 374 .x-toolbar{\r
 375         border:0 none;\r
 376         background: #efefe3 url(../images/vista/toolbar/gray-bg.gif) repeat-x;\r
 377         padding:3px;\r
 378 }\r
 379 .x-toolbar .ytb-button-over{\r
 380         border:1px solid transparent;\r
 381         border-bottom:1px solid #bbbbbb;\r
 382         border-top:1px solid #eeeeee;\r
 383         background:#9f9f9f url(../images/vista/grid/grid-vista-hd.gif) repeat-x;\r
 384 }\r
 385 \r
 386 .x-paging-info {\r
 387     color:#000;\r
 388 }\r
 389 /* grid */\r
 390 .x-grid-topbar .x-toolbar{\r
 391         border:0;\r
 392         border-bottom:1px solid #555;\r
 393 }\r
 394 .x-grid-bottombar .x-toolbar{\r
 395         border:0;\r
 396         border-top:1px solid #555;\r
 397 }\r
 398 .x-grid-locked .x-grid-body td {\r
 399         background: #fafafa;\r
 400         border-right: 1px solid #e1e1e1;\r
 401         border-bottom: 1px solid #e1e1e1 !important;\r
 402 }\r
 403 .x-grid-locked .x-grid-body td .x-grid-cell-inner {\r
 404         border-top:0 none;\r
 405 }\r
 406 .x-grid-locked .x-grid-row-alt td{\r
 407         background: #f1f1f1;\r
 408 }\r
 409 .x-grid-locked .x-grid-row-selected td{\r
 410         color: #fff !important;\r
 411         background-color: #316ac5 !important;\r
 412 }\r
 413 .x-grid-hd{\r
 414         border-bottom:0;\r
 415         background:none;\r
 416 }\r
 417 .x-grid-hd-row{\r
 418         height:auto;\r
 419 }\r
 420 .x-grid-split {\r
 421         background-image: url(../images/vista/grid/grid-split.gif);\r
 422 }\r
 423 .x-grid-header{\r
 424         background: url(../images/vista/grid/grid-vista-hd.gif);\r
 425         border:0 none;\r
 426     border-bottom:1px solid #555;\r
 427 }\r
 428 .x-grid-row-alt{\r
 429         background-color: #f5f5f5;\r
 430 }\r
 431 .x-grid-row-over td{\r
 432         background-color:#eeeeee;\r
 433 }\r
 434 .x-grid-col {\r
 435         border-right: 1px solid #eee;\r
 436         border-bottom: 1px solid #eee;\r
 437 }\r
 438 .x-grid-header .x-grid-hd-inner {\r
 439         padding-bottom: 1px;\r
 440 }\r
 441 .x-grid-header  .x-grid-hd-text {\r
 442         padding-bottom: 3px;\r
 443     color:#333333;\r
 444 }\r
 445 .x-grid-hd-over .x-grid-hd-inner {\r
 446         border-bottom: 1px solid #555;\r
 447         padding-bottom: 0;\r
 448 }\r
 449 .x-grid-hd-over .x-grid-hd-text {\r
 450         background-color: #fafafa;\r
 451         border-bottom: 1px solid #555;\r
 452         padding-bottom: 2px;\r
 453 }\r
 454 .x-grid-header .sort-asc .x-grid-hd-inner, .x-grid-header .sort-desc .x-grid-hd-inner {\r
 455         border-bottom: 1px solid #555;\r
 456         padding-bottom: 0;\r
 457 }\r
 458 .x-grid-header .sort-asc  .x-grid-hd-text, .x-grid-header .sort-desc .x-grid-hd-text {\r
 459         border-bottom: 1px solid #3b5a82;\r
 460         padding-bottom: 2px;\r
 461 }\r
 462 .x-dd-drag-proxy .x-grid-hd-inner{\r
 463         background: url(../images/vista/grid/grid-vista-hd.gif) repeat-x;\r
 464         height:22px;\r
 465         width:120px;\r
 466 }\r
 467 .x-props-grid .x-grid-col-name{\r
 468          background-color: #eee;\r
 469 }\r
 470 /* toolbar */\r
 471 .x-toolbar .ytb-sep{\r
 472         background-image: url(../images/vista/grid/grid-split.gif);\r
 473 }\r
 474 \r
 475 .x-toolbar .x-btn-over .x-btn-left{\r
 476         background:url(../images/vista/toolbar/tb-btn-sprite.gif) no-repeat 0 0px;\r
 477 }\r
 478 .x-toolbar .x-btn-over .x-btn-right{\r
 479         background:url(../images/vista/toolbar/tb-btn-sprite.gif) no-repeat 0 -21px;\r
 480 }\r
 481 .x-toolbar .x-btn-over .x-btn-center{\r
 482         background:url(../images/vista/toolbar/tb-btn-sprite.gif) repeat-x 0 -42px;\r
 483 }\r
 484 \r
 485 .x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left{\r
 486         background:url(../images/vista/toolbar/tb-btn-sprite.gif) no-repeat 0 -63px;\r
 487 }\r
 488 .x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right{\r
 489         background:url(../images/vista/toolbar/tb-btn-sprite.gif) no-repeat 0 -84px;\r
 490 }\r
 491 .x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center{\r
 492         background:url(../images/vista/toolbar/tb-btn-sprite.gif) repeat-x 0 -105px;\r
 493 }\r
 494 \r
 495 /* combo box */\r
 496 .x-combo-list {\r
 497     border:1px solid #999;\r
 498     background:#dddddd;\r
 499 }\r
 500 .x-combo-list-hd {\r
 501     background-image: url(../images/vista/layout/panel-title-bg.gif);\r
 502     border-bottom:1px solid #b5bac1;\r
 503     color:white;\r
 504 }\r
 505 .x-resizable-pinned .x-combo-list-inner {\r
 506     border-bottom:1px solid #aaa;\r
 507 }\r
 508 .x-combo-list .x-combo-selected{\r
 509         background:#ddd !important;\r
 510     border:1px solid #aaa;\r
 511 }