examples/themes/index.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.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                 body {
  60                     padding-bottom:10px;
  61                 }
  62         </style>
  63     </head>
  64     <body>
  65
  66                 <div id="header">
  67                         <form id="styleswitcher">
  68                                 <label for="styleswitcher_select">Choose Theme: </label>
  69                                 <select name="styleswitcher_select" id="styleswitcher_select">
  70                                         <option value="index.html" selected="true">3.x Theme</option>
  71                     <option value="index-gray.html">Gray Theme</option>
  72                                         <option value="index-access.html">Accessibility Theme</option>
  73                                 </select>
  74                         </form>
  75
  76                         <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>
  77                 </div>
  78
  79     </body>
  80 </html>