examples/ext/resources/css/layout.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 .x-layout-container{\r
  10     width:100%;\r
  11     height:100%;\r
  12     overflow:hidden;\r
  13          background-color:#c3daf9;\r
  14 }\r
  15 .x-layout-container .x-layout-tabs-body{\r
  16         border:0 none;\r
  17 }\r
  18 .x-layout-collapsed{\r
  19     position:absolute;\r
  20     left:-10000px;\r
  21     top:-10000px;\r
  22     visibility:hidden;\r
  23     background-color:#c3daf9;\r
  24     width:20px;\r
  25     height:20px;\r
  26     overflow:hidden;\r
  27         border:1px solid #98c0f4;\r
  28         z-index:20;\r
  29 }\r
  30 .ext-border-box .x-layout-collapsed{\r
  31     width:22px;\r
  32     height:22px;\r
  33 }\r
  34 .x-layout-collapsed-over{\r
  35     cursor:pointer;\r
  36          background-color:#d9e8fb;\r
  37 }\r
  38 .x-layout-collapsed-west .x-layout-collapsed-tools, .x-layout-collapsed-east .x-layout-collapsed-tools{\r
  39         position:absolute;\r
  40     top:0;\r
  41     left:0;\r
  42     width:20px;\r
  43     height:20px;\r
  44 }\r
  45 .x-layout-collapsed-north .x-layout-collapsed-tools, .x-layout-collapsed-south .x-layout-collapsed-tools{\r
  46         position:absolute;\r
  47     top:0;\r
  48     right:0;\r
  49     width:20px;\r
  50     height:20px;\r
  51 }\r
  52 .x-layout-collapsed .x-layout-tools-button{\r
  53     margin:0;\r
  54 }\r
  55 .x-layout-collapsed .x-layout-tools-button-inner{\r
  56     width:16px;\r
  57     height:16px;\r
  58 }\r
  59 .x-layout-inactive-content{\r
  60     position:absolute;\r
  61     left:-10000px;\r
  62     top:-10000px;\r
  63     visibility:hidden;\r
  64 }\r
  65 .x-layout-active-content{\r
  66     visibility:visible;\r
  67 }\r
  68 .x-layout-panel{\r
  69     position:absolute;border:1px solid #98c0f4;overflow:hidden;background-color:white;\r
  70 }\r
  71 .x-layout-panel-east, .x-layout-panel-west {\r
  72     z-index:10;\r
  73 }\r
  74 .x-layout-panel-north, .x-layout-panel-south {\r
  75     z-index:11;\r
  76 }\r
  77 .x-layout-collapsed-north, .x-layout-collapsed-south, .x-layout-collapsed-east, .x-layout-collapsed-west {\r
  78     z-index:12;\r
  79 }\r
  80 .x-layout-panel-body{\r
  81     overflow:hidden;\r
  82 }\r
  83 .x-layout-grid-wrapper{\r
  84 \r
  85 }\r
  86 .x-layout-split{\r
  87     position:absolute;\r
  88     height:5px;\r
  89     width:5px;\r
  90     line-height:1px;\r
  91     font-size:1px;\r
  92     z-index:3;\r
  93     background-color:#c3daf9;\r
  94 }\r
  95 .x-layout-panel-hd{\r
  96     background-image: url(../images/default/layout/panel-title-light-bg.gif);\r
  97     color: black;\r
  98     border-bottom:1px solid #98c0f4;\r
  99     position:relative;\r
 100 }\r
 101 .x-layout-panel-hd-text{\r
 102     font:normal 11px tahoma, verdana, helvetica;\r
 103     padding: 4px;\r
 104     padding-left: 4px;\r
 105     display:block;\r
 106          white-space:nowrap;\r
 107 }\r
 108 .x-layout-panel-hd-tools{\r
 109     position:absolute;\r
 110     right:0;\r
 111     top:0;\r
 112     text-align:right;\r
 113     padding-top:2px;\r
 114     padding-right:2px;\r
 115     width:60px;\r
 116 }\r
 117 .x-layout-tools-button{\r
 118     z-index:6;\r
 119     padding:2px;\r
 120     cursor:pointer;\r
 121     float:right;\r
 122 }\r
 123 .x-layout-tools-button-over{\r
 124     padding:1px;\r
 125     border:1px solid #98c0f4;\r
 126     background-color:white;\r
 127 }\r
 128 .x-layout-tools-button-inner{\r
 129     height:12px;\r
 130     width:12px;\r
 131     line-height:1px;\r
 132     font-size:1px;\r
 133     background-repeat:no-repeat;\r
 134     background-position:center;\r
 135 }\r
 136 .x-layout-close{\r
 137     background-image:url(../images/default/layout/panel-close.gif);\r
 138 }\r
 139 .x-layout-stick{\r
 140     background-image:url(../images/default/layout/stick.gif);\r
 141 }\r
 142 .x-layout-collapse-west,.x-layout-expand-east{\r
 143     background-image:url(../images/default/layout/collapse.gif);\r
 144 }\r
 145 .x-layout-expand-west,.x-layout-collapse-east{\r
 146     background-image:url(../images/default/layout/expand.gif);\r
 147 }\r
 148 .x-layout-collapse-north,.x-layout-expand-south{\r
 149     background-image:url(../images/default/layout/ns-collapse.gif);\r
 150 }\r
 151 .x-layout-expand-north,.x-layout-collapse-south{\r
 152     background-image:url(../images/default/layout/ns-expand.gif);\r
 153 }\r
 154 .x-layout-split-h{\r
 155     background-image:url(../images/default/sizer/e-handle.gif);\r
 156     background-position: left;\r
 157 }\r
 158 .x-layout-split-v{\r
 159     background-image:url(../images/default/sizer/s-handle.gif);\r
 160     background-position: top;\r
 161 }\r
 162 .x-layout-panel .x-tabs-wrap{\r
 163     background:url(../images/default/layout/gradient-bg.gif);\r
 164 }\r
 165 .x-layout-panel .x-tabs-body {\r
 166     background-color:white;\r
 167     overflow:auto;height:100%;\r
 168 }\r
 169 .x-layout-component-panel, .x-layout-nested-layout {\r
 170         position:relative;\r
 171    padding:0;\r
 172         overflow:hidden;\r
 173         width:200px;\r
 174         height:200px;\r
 175 }\r
 176 .x-layout-nested-layout .x-layout-panel {\r
 177           border:0 none;\r
 178 }\r
 179 .x-layout-nested-layout .x-layout-panel-north {\r
 180           border-bottom:1px solid #98c0f4;\r
 181 }\r
 182 .x-layout-nested-layout .x-layout-panel-south {\r
 183           border-top:1px solid #98c0f4;\r
 184 }\r
 185 .x-layout-nested-layout .x-layout-panel-east {\r
 186           border-left:1px solid #98c0f4;\r
 187 }\r
 188 .x-layout-nested-layout .x-layout-panel-west {\r
 189           border-right:1px solid #98c0f4;\r
 190 }\r
 191 \r
 192 .x-layout-panel-dragover {\r
 193         border: 2px solid #6593cf;\r
 194 }\r
 195 .x-layout-panel-proxy {\r
 196         background-image: url(../images/default/layout/gradient-bg.gif);\r
 197         background-color:#c3daf9;\r
 198         border:1px dashed #6593cf;\r
 199         z-index:10001;\r
 200         overflow:hidden;\r
 201         position:absolute;\r
 202         left:0;top:0;\r
 203 }\r
 204 .x-layout-slider {\r
 205         z-index:15;\r
 206         overflow:hidden;\r
 207         position:absolute;\r
 208 }\r
 209 \r
 210 .x-scroller-up, .x-scroller-down {\r
 211         background-color:#c3daf9;\r
 212         border: 1px solid #6593cf;\r
 213         border-top-color: #fff;\r
 214         border-left-color: #fff;\r
 215         border-right:0 none;\r
 216         cursor:pointer;\r
 217         overflow:hidden;\r
 218         line-height:16px;\r
 219 }\r
 220 .x-scroller-down {\r
 221         border-bottom: 0 none;\r
 222         border-top: 1px solid #6593cf;\r
 223 }\r
 224 .x-scroller-btn-over {\r
 225         background-color: #d9e8f8;\r
 226 }\r
 227 .x-scroller-btn-click {\r
 228         background-color: #AECEF7;\r
 229 }\r
 230 .x-scroller-btn-disabled {\r
 231         cursor:default;\r
 232         background-color: #c3daf9;\r
 233         -moz-opacity: 0.3;\r
 234    opacity:.30;\r
 235    filter: alpha(opacity=30);\r
 236 }\r
 237 \r
 238 /* Reader Layout */\r
 239 \r
 240 .x-reader .x-layout-panel-north {\r
 241     border:0 none;\r
 242 }\r
 243 .x-reader .x-layout-panel-center{\r
 244     border:0 none;\r
 245 }\r
 246 .x-reader .x-layout-nested-layout .x-layout-panel-center{\r
 247     border:1px solid #99bbe8;\r
 248     border-top:0 none;\r
 249 }\r
 250 .x-reader .x-layout-nested-layout .x-layout-panel-south{\r
 251     border:1px solid #99bbe8;\r
 252 }