examples/layout-browser/layout-browser.css

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /*===================================\r
  10 /*   Basic page styles\r
  11 /*===================================*/\r
  12 body {\r
  13     font-family:'lucida grande',tahoma,arial,sans-serif;\r
  14     font-size:11px;\r
  15 }\r
  16 a {\r
  17     color:#15428B;\r
  18 }\r
  19 a:link, a:visited {\r
  20     text-decoration: none;\r
  21 }\r
  22 a:hover {\r
  23     text-decoration: underline;\r
  24 }\r
  25 #header {\r
  26     background: #7F99BE url(images/layout-browser-hd-bg.gif) repeat-x center;\r
  27 }\r
  28 #header h1 {\r
  29     font-size: 16px;\r
  30     color: #fff;\r
  31     font-weight: normal;\r
  32     padding: 5px 10px;\r
  33 }\r
  34 #start-div h2 {\r
  35     font-size: 12px;\r
  36     color: #555;\r
  37     padding-bottom:5px;\r
  38     border-bottom:1px solid #C3D0DF;\r
  39 }\r
  40 #start-div p {\r
  41     margin: 10px 0;\r
  42 }\r
  43 #details-panel h2 {\r
  44     padding:10px 10px 0;\r
  45     font-size:12px;\r
  46     color:#15428B;\r
  47 }\r
  48 #details-panel p {\r
  49     padding:10px 10px 0;\r
  50 }\r
  51 #details-panel pre {\r
  52     border-top:1px dotted #ddd;\r
  53     border-bottom:1px dotted #ddd;\r
  54     margin-top:10px;\r
  55     padding:0 5px;\r
  56     background:#f5f5f5;\r
  57 }\r
  58 #details-panel .details-info {\r
  59     margin:15px;\r
  60     padding:15px;\r
  61     border:1px dotted #999;\r
  62     color:#555;\r
  63     background: #f9f9f9;\r
  64 }\r
  65 \r
  66 /*===================================\r
  67 /*   Customized layout styles\r
  68 /*===================================*/\r
  69 \r
  70 /* Remove the border around the tabs and override the default white background: */\r
  71 .x-tab-panel-header-plain .x-tab-strip-top {\r
  72     background: #DFE8F6 url(../images/default/tabs/tab-strip-bg.gif) repeat-x scroll center bottom !important;\r
  73 }\r
  74 \r
  75 /* Custom CSS applied to a single panel in an accordion: */\r
  76 .custom-accordion .x-panel-body {\r
  77     font-family:georgia,serif;\r
  78     padding:20px 80px !important;\r
  79     background:#ffe;\r
  80     font-size:18px;\r
  81     text-align:center;\r
  82     color:#15428B;\r
  83 }\r
  84 .custom-accordion .x-panel-header-text {\r
  85     font-weight:bold;\r
  86     font-style:italic;\r
  87     color:#555;\r
  88 }\r
  89 \r
  90 /* Custom style for the FormLayout footer so that it integrates into the border layout nicely: */\r
  91 #form-panel .x-panel-footer {\r
  92     background:#DFE8F6;\r
  93     border-color:#99BBE8;\r
  94     border-style:none solid solid;\r
  95     border-width:0pt 1px 1px;\r
  96 }\r
  97 \r
  98 /* Customize the TableLayout html using standard CSS rules: */\r
  99 #table-panel .x-table-layout {\r
 100     padding:5px;\r
 101 }\r
 102 #table-panel .x-table-layout td {\r
 103     vertical-align:top;\r
 104     padding:5px;\r
 105     font-size: 11px;\r
 106 }\r
 107 \r
 108 /* Toolbar icons for absolute form example: */\r
 109 .icon-send {\r
 110     background-image:url(images/email_go.png) !important;\r
 111 }\r
 112 .icon-save {\r
 113     background-image:url(images/disk.png) !important;\r
 114 }\r
 115 .icon-print {\r
 116     background-image:url(images/printer.png) !important;\r
 117 }\r
 118 .icon-spell {\r
 119     background-image:url(images/spellcheck.png) !important;\r
 120 }\r
 121 .icon-attach {\r
 122     background-image:url(images/page_attach.png) !important;\r
 123 }\r
 124 /* Custom rule to make the toolbar fit within a framed panel with no margin: */\r
 125 .email-form .x-panel-mc .x-panel-tbar .x-toolbar {\r
 126     border-top:1px solid #C2D6EF;\r
 127     border-left:1px solid #C2D6EF;\r
 128     border-bottom:1px solid #99BBE8;\r
 129     margin:-5px -4px 0;\r
 130 }\r
 131 \r
 132 /* Custom styles for the "Tabs with nested layouts" example: */\r
 133 .inner-tab-custom .x-border-layout-ct {\r
 134     background: #fff;\r
 135 }\r
 136 \r
 137 /*===================================\r
 138 /*  Rules for custom ux layouts\r
 139 /*====================================*/\r
 140 /* \r
 141  * Ext.ux.layout.CenterLayout\r
 142  */\r
 143 .ux-layout-center-item {\r
 144     margin:0 auto;\r
 145     text-align:left;\r
 146 }\r
 147 .ux-layout-center .x-panel-body,  /* if the container is a panel */\r
 148 body.ux-layout-center {           /* if the container is the doc body (for viewport) */\r
 149     text-align:center;\r
 150 }\r