examples/themes/index-gray.html

   1 <html>
   2     <head>
   3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4         <title>Ext JS 4 Themes</title>
   5         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all-gray.css" />
   6
   7         <script type="text/javascript" src="../../bootstrap.js"></script>
   8
   9         <script type="text/javascript" src="themes.js"></script>
  10
  11         <style>
  12             h1 a:link, h1 a:visited {
  13                 color: #046BCA;
  14             }
  15
  16             h1 a:hover, h1 a:focus, h1 a:active {
  17                 color: #1C417C;
  18             }
  19
  20             div#header {
  21                 height: 65px;
  22                 width: 1090px;
  23                 padding: 25px 0 10px 0;
  24                 margin: 0 50px;
  25             }
  26             div#header h1 {
  27                 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  28                 font-size: 24px;
  29                 font-weight: 600;
  30             }
  31             form#styleswitcher {
  32                 background-color: #f3f3f3;
  33                 background-color: rgba(243,243,243,.333);
  34                 border: 1px solid #ddd;
  35                 border-color: rgba(221,221,221,.333);
  36                 border-radius:         8px;
  37                 -moz-border-radius:    8px;
  38                 -ms-border-radius:     8px;
  39                 -o-border-radius:      8px;
  40                 -webkit-border-radius: 8px;
  41
  42                 float: right;
  43                 padding: 8px 10px;
  44
  45                 width: auto;
  46             }
  47             form#styleswitcher select {
  48                 font-size: 13px;
  49                 line-height: 13px;
  50             }
  51             div#header h1 span {
  52                 color: inherit;
  53                 font-family: Helvetica, Arial, sans-serif;
  54                 font-size: 13px;
  55                 font-weight: normal;
  56                 line-height: 30px;
  57                 padding-left: 25px;
  58             }
  59         </style>
  60     </head>
  61     <body>
  62
  63         <div id="header">
  64             <form id="styleswitcher">
  65                 <label for="styleswitcher_select">Choose Theme: </label>
  66                 <select name="styleswitcher_select" id="styleswitcher_select">
  67                     <option value="index.html">3.x Theme</option>
  68                     <option value="index-gray.html" selected="true">Gray Theme</option>
  69                     <option value="index-access.html">Accessibility Theme</option>
  70                 </select>
  71             </form>
  72
  73             <h1>Ext JS Themes <span>View and test every Ext component against bundled <a href="http://www.sencha.com/products/extjs/themes/">Ext Themes</a>, or, your own custom themes.</span></h1>
  74         </div>
  75
  76     </body>
  77 </html>