examples/ux/css/ux-all.css

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 .ux-layout-center-item {
   8     margin:0 auto;
   9     text-align:left;
  10 }
  11 .ux-layout-center .x-panel-body,
  12 body.ux-layout-center {
  13     text-align:center;
  14 }
  15 .x-column-tree .x-panel-header {
  16         padding: 3px 0px 0px 0px;
  17         border-bottom-width: 0px;
  18 }
  19
  20 .x-column-tree .x-panel-header .x-panel-header-text {
  21         margin-left: 3px
  22 }
  23
  24 .x-column-tree .x-tree-node {
  25     zoom:1;
  26 }
  27 .x-column-tree .x-tree-node-el {
  28     /*border-bottom:1px solid #eee; borders? */
  29     zoom:1;
  30 }
  31 .x-column-tree .x-tree-selected {
  32     background: #d9e8fb;
  33 }
  34 .x-column-tree  .x-tree-node a {
  35     line-height:18px;
  36     vertical-align:middle;
  37 }
  38 .x-column-tree  .x-tree-node a span{
  39
  40 }
  41 .x-column-tree  .x-tree-node .x-tree-selected a span{
  42         background:transparent;
  43         color:#000;
  44 }
  45 .x-tree-col {
  46     float:left;
  47     overflow:hidden;
  48     padding:0 1px;
  49     zoom:1;
  50 }
  51
  52 .x-tree-col-text, .x-tree-hd-text {
  53     color:#000;
  54     overflow:hidden;
  55     -o-text-overflow: ellipsis;
  56     text-overflow: ellipsis;
  57     padding:3px 3px 3px 5px;
  58     white-space: nowrap;
  59     font:normal 11px arial, tahoma, helvetica, sans-serif;
  60 }
  61
  62 .x-tree-headers {
  63         margin-top: 3px;
  64         background: #f9f9f9 url(../../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
  65         cursor:default;
  66     zoom:1;
  67 }
  68
  69 .x-tree-hd {
  70     float:left;
  71     overflow:hidden;
  72     border-left:1px solid #eee;
  73     border-right:1px solid #d0d0d0;
  74 }
  75 .x-grid3-summary-row {\r
  76     border-left:1px solid #fff;\r
  77     border-right:1px solid #fff;\r
  78     color:#333;\r
  79     background: #f1f2f4;\r
  80 }\r
  81 .x-grid3-summary-row .x-grid3-cell-inner {\r
  82     font-weight:bold;\r
  83     padding-bottom:4px;\r
  84 }\r
  85 .x-grid3-cell-first .x-grid3-cell-inner {\r
  86     padding-left:16px;\r
  87 }\r
  88 .x-grid-hide-summary .x-grid3-summary-row {\r
  89     display:none;\r
  90 }\r
  91 .x-grid3-summary-msg {\r
  92     padding:4px 16px;\r
  93     font-weight:bold;\r
  94 }.x-grouptabs-panel {\r
  95     background-color: #4E78B1;\r
  96     border: solid 15px #4E78B1;\r
  97 }\r
  98 .x-tab-panel-left .x-grouptabs-panel-header,\r
  99 .x-tab-panel-right .x-grouptabs-panel-header {\r
 100     float: left;\r
 101     border: 0;\r
 102     background: transparent;\r
 103 }\r
 104 .x-tab-panel-right .x-grouptabs-panel-header {\r
 105     float:right;\r
 106 }\r
 107 .x-tab-panel-left .x-grouptabs-bwrap {\r
 108     float: right;\r
 109     position: relative;\r
 110 }\r
 111 .x-tab-panel-right .x-grouptabs-bwrap {\r
 112     float: left;\r
 113     position: relative;\r
 114 }\r
 115 .x-tab-panel-left ul.x-grouptabs-strip,\r
 116 .x-tab-panel-right ul.x-grouptabs-strip {\r
 117     width: auto;\r
 118         display: block;\r
 119 }\r
 120 .x-tab-panel-left ul.x-grouptabs-strip li,\r
 121 .x-tab-panel-right ul.x-grouptabs-strip li {\r
 122     padding: 6px 0 2px 6px;\r
 123     float: none;\r
 124     margin: 0;\r
 125     position: relative;\r
 126     clear: both;\r
 127 }\r
 128 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text,\r
 129 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 130         font-size: 13px;\r
 131         line-height: 18px;\r
 132         cursor: pointer;\r
 133 }\r
 134 \r
 135 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 136     padding-left: 18px;\r
 137 }\r
 138 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
 139     padding-right: 18px;\r
 140 }\r
 141 \r
 142 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text,\r
 143 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 144         font-size: 12px;\r
 145     padding: 0;  \r
 146 }\r
 147 \r
 148 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 149         margin-left: 4px;\r
 150 }\r
 151 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
 152         margin-right: 4px;\r
 153 }\r
 154 \r
 155 .x-grouptabs-panel .x-grouptabs-strip a.x-grouptabs-text{\r
 156     overflow: hidden;\r
 157     white-space: nowrap;\r
 158         display: block;\r
 159     color: #DFE8F6;\r
 160     font-family: tahoma, arial, sans-serif;\r
 161     font-weight: bold;\r
 162     text-decoration: none;\r
 163 }\r
 164 .x-tab-panel-right .x-grouptabs-strip a.x-grouptabs-text {\r
 165     text-align: right;\r
 166 }\r
 167 \r
 168 .x-grouptabs-panel .x-grouptabs-strip-active a.x-grouptabs-text {\r
 169     color: #395B8E;\r
 170 }\r
 171 \r
 172 .x-grouptabs-panel ul.x-grouptabs-sub a.x-grouptabs-text {\r
 173         font-weight: normal;\r
 174 }\r
 175 .x-tab-joint {\r
 176     position: absolute;\r
 177     width: 3px;\r
 178     top: 1px;\r
 179     background: #fff;\r
 180     z-index: 9999;\r
 181 }\r
 182 \r
 183 .x-grouptabs-panel .x-grouptabs-panel-body {\r
 184     border: 1px solid #999;\r
 185 }\r
 186 \r
 187 .x-grouptabs-panel ul.x-grouptabs-strip li {\r
 188     border-top: 1px solid transparent;\r
 189     border-bottom: 1px solid transparent;\r
 190         border-left: 1px solid transparent;\r
 191 }\r
 192 \r
 193 .x-grouptabs-panel ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 194     border: 0;\r
 195     background: #fff;\r
 196     border-top: 1px solid #999;\r
 197     border-bottom: 1px solid #999;\r
 198 }\r
 199 \r
 200 .x-tab-panel-left ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 201     border-left: 1px solid #999;\r
 202 }\r
 203 .x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 204     border-right: 1px solid #999;\r
 205 }\r
 206 \r
 207 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li.x-grouptabs-strip-active{\r
 208     background-color: #EDEEF0;\r
 209 }\r
 210 \r
 211 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub {\r
 212     background-color: transparent;\r
 213 }\r
 214 \r
 215 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li {\r
 216     border-color: transparent;\r
 217 }\r
 218 \r
 219 /* Tab corners */\r
 220 .x-grouptabs-panel .x-grouptabs-corner {\r
 221     background-image: url('../images/x-grouptabs-corners.gif');\r
 222     display: none;\r
 223     width: 11px;\r
 224     height: 11px;\r
 225     position: absolute;\r
 226     font-size: 1px;\r
 227     line-height: 6px;\r
 228     overflow: hidden;\r
 229     zoom:1;\r
 230 }\r
 231 .x-grouptabs-panel .x-grouptabs-strip-active .x-grouptabs-corner {\r
 232     display: block;\r
 233 }\r
 234 .x-grouptabs-panel .x-grouptabs-main.x-grouptabs-strip-active ul.x-grouptabs-sub .x-grouptabs-corner {\r
 235         display: none;\r
 236 }\r
 237 \r
 238 .x-grouptabs-panel .x-grouptabs-corner-top-left {\r
 239     background-position: top left;\r
 240     left: 0; top: 0;\r
 241 }\r
 242 .x-grouptabs-panel .x-grouptabs-corner-bottom-left {\r
 243     background-position: bottom left;\r
 244     left: 0; bottom: 0;\r
 245 }\r
 246 .x-grouptabs-panel .x-grouptabs-corner-top-right {\r
 247     background-position: top right;\r
 248     right: 0; top: 0;\r
 249 }\r
 250 .x-grouptabs-panel .x-grouptabs-corner-bottom-right {\r
 251     background-position: bottom right;\r
 252     right: 0; bottom: 0;\r
 253 }\r
 254 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-left{\r
 255     bottom: -4px; left: -4px;\r
 256 }\r
 257 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-right{\r
 258     bottom: -4px; right: -4px;\r
 259 }\r
 260 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-left{\r
 261     top: -4px; left: -4px;\r
 262 }\r
 263 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-right{\r
 264     top: -4px; right: -4px;\r
 265 }\r
 266 \r
 267 .x-grouptabs-panel ul.x-grouptabs-sub li.x-tab-with-icon a.x-grouptabs-text {\r
 268     background-repeat: no-repeat;\r
 269     padding-left: 20px;\r
 270 }\r
 271 \r
 272 /* General tab styling */\r
 273 .x-grouptabs-panel .x-grouptabs-expand {\r
 274         background: transparent url('../images/elbow-plus-nl.gif') no-repeat;\r
 275         width: 16px;\r
 276         height: 16px;\r
 277         position: absolute;\r
 278         left: 7px;\r
 279         top: 6px;\r
 280 }\r
 281 \r
 282 .ext-ie6 .x-grouptabs-panel .x-grouptabs-expand,\r
 283 .ext-border-box .x-grouptabs-panel .x-grouptabs-expand {\r
 284         left: 0;\r
 285 }\r
 286 \r
 287 .x-grouptabs-expanded .x-grouptabs-expand {\r
 288         background-image: url('../images/elbow-minus-nl.gif');\r
 289 }\r
 290 \r
 291 /* GroupTabs sub group styling */\r
 292 .x-grouptabs-sub {\r
 293         display: none;\r
 294         margin-top: 4px;\r
 295 }\r
 296 \r
 297 .x-grouptabs-expanded .x-grouptabs-sub {\r
 298         display: block;\r
 299 }\r
 300 \r
 301 .x-grouptabs-panel ul.x-grouptabs-sub li {\r
 302         height: 18px;\r
 303         margin: 0 0 2px;\r
 304     padding: 0;\r
 305 }\r
 306 \r
 307 .x-grouptabs-panel ul.x-grouptabs-sub .x-grouptabs-main-item {\r
 308         display: none;\r
 309 }\r
 310 \r
 311 .x-tab-with-icon{\r
 312    border-style:none !important;\r
 313 }\r
 314 .ux-mselect{\r
 315     overflow:auto;\r
 316     background:white;\r
 317     position:relative; /* for calculating scroll offsets */\r
 318     zoom:1;\r
 319     overflow:auto;      \r
 320 }\r
 321 .ux-mselect-item{\r
 322     font:normal 12px tahoma, arial, helvetica, sans-serif;\r
 323     padding:2px;\r
 324     border:1px solid #fff;\r
 325     white-space: nowrap;\r
 326     cursor:pointer;\r
 327 }\r
 328 .ux-mselect-selected{\r
 329         border:1px dotted #a3bae9 !important;\r
 330     background:#DFE8F6;\r
 331     cursor:pointer;\r
 332 }\r
 333 \r
 334 .x-view-drag-insert-above { \r
 335     border-top:1px dotted #3366cc; \r
 336 } \r
 337 .x-view-drag-insert-below { \r
 338     border-bottom:1px dotted #3366cc; \r
 339 }
 340 .x-panel-resize {
 341         height:5px;
 342         background:transparent url(../images/panel-handle.gif) no-repeat center bottom;
 343         position:relative;
 344         left:0;
 345         top:2px;
 346         cursor:n-resize;
 347         cursor:row-resize;
 348         /* for IE */
 349         font-size:1px;
 350         line-height:1px;
 351         overflow:hidden;
 352 }.x-portal .x-panel-dd-spacer {\r
 353     margin-bottom:10px;\r
 354 }\r
 355 \r
 356 .x-portlet {\r
 357     margin-bottom:10px;\r
 358 }\r
 359 \r
 360 /* Clean up the look of the portlets */\r
 361 .x-portlet .x-panel-ml {\r
 362     padding-left:2px;\r
 363 }\r
 364 .x-portlet .x-panel-mr {\r
 365     padding-right:2px;\r
 366 }\r
 367 .x-portlet .x-panel-bl {\r
 368     padding-left:2px;\r
 369 }\r
 370 \r
 371 .x-portlet .x-panel-br {\r
 372     padding-right:2px;\r
 373 }\r
 374 .x-portlet .x-panel-body {\r
 375     background:white;\r
 376 }\r
 377 .x-portlet .x-panel-mc {\r
 378     padding-top:2px;\r
 379 }\r
 380 .x-portlet .x-panel-bc .x-panel-footer {\r
 381     padding-bottom:2px;\r
 382 }\r
 383 .x-portlet .x-panel-nofooter .x-panel-bc {\r
 384     height:2px;\r
 385 }.ext-ie .x-row-editor .x-form-text {
 386     margin:0 !important;
 387 }
 388 .x-row-editor-header {
 389     height:2px;
 390     overflow:hidden;
 391     background: transparent url(../images/row-editor-bg.gif) repeat-x 0 0;
 392 }
 393 .x-row-editor-footer {
 394     height:2px;
 395     overflow:hidden;
 396     background: transparent url(../images/row-editor-bg.gif) repeat-x 0 -2px;
 397 }
 398 .ext-ie .x-row-editor-footer {
 399     margin-top:-1px;
 400 }
 401
 402 .x-row-editor-body {
 403     overflow:hidden;
 404     zoom:1;
 405     background: #ebf2fb;
 406     padding-top:2px;
 407 }
 408 .x-row-editor .x-btns {
 409     position:absolute;
 410     top:28px;
 411     left:20px;
 412     padding-left:5px;
 413     background: transparent url(../images/row-editor-btns.gif) no-repeat 0 0;
 414 }
 415 .x-row-editor .x-btns .x-plain-bwrap {
 416     padding-right:5px;
 417     background: transparent url(../images/row-editor-btns.gif) no-repeat right -31px;
 418 }
 419 .x-row-editor .x-btns .x-plain-body {
 420     background: transparent url(../images/row-editor-btns.gif) repeat-x 0 -62px;
 421     height:31px;
 422 }
 423 .x-row-editor .x-btns .x-table-layout-cell {
 424     padding:3px;
 425 }
 426
 427 .errorTip .x-tip-body ul{
 428     list-style-type:disc;
 429     margin-left:15px;
 430 }
 431 .x-form-spinner-proxy{
 432         /*background-color:#ff00cc;*/
 433 }
 434 .x-form-field-wrap .x-form-spinner-trigger {
 435     background:transparent url('../images/spinner.gif') no-repeat 0 0;
 436 }
 437
 438 .x-form-field-wrap .x-form-spinner-overup{
 439     background-position:-17px 0;
 440 }
 441 .x-form-field-wrap .x-form-spinner-clickup{
 442     background-position:-34px 0;
 443 }
 444 .x-form-field-wrap .x-form-spinner-overdown{
 445     background-position:-51px 0;
 446 }
 447 .x-form-field-wrap .x-form-spinner-clickdown{
 448     background-position:-68px 0;
 449 }
 450
 451
 452 .x-trigger-wrap-focus .x-form-spinner-trigger{
 453     background-position:-85px 0;
 454 }
 455 .x-trigger-wrap-focus .x-form-spinner-overup{
 456     background-position:-102px 0;
 457 }
 458 .x-trigger-wrap-focus .x-form-spinner-clickup{
 459     background-position:-119px 0;
 460 }
 461 .x-trigger-wrap-focus .x-form-spinner-overdown{
 462     background-position:-136px 0;
 463 }
 464 .x-trigger-wrap-focus .x-form-spinner-clickdown{
 465     background-position:-153px 0;
 466 }
 467 .x-trigger-wrap-focus .x-form-trigger{
 468     border-bottom: 1px solid #7eadd9;
 469 }
 470
 471 .x-form-field-wrap .x-form-spinner-splitter {
 472         line-height:1px;
 473         font-size:1px;
 474     background:transparent url('../images/spinner-split.gif') no-repeat 0 0;
 475         position:absolute;
 476         cursor: n-resize;
 477 }
 478 .x-trigger-wrap-focus .x-form-spinner-splitter{
 479     background-position:-14px 0;
 480 }