chrome/common/extensions/docs/examples/api/fontSettings/options.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <title>Advanced Font Settings</title>
   6 <script src="js/cr.js"></script>
   7 <script src="js/cr/ui.js"></script>
   8 <script src="js/cr/ui/overlay.js"></script>
   9 <script src="slider.js"></script>
  10 <script src="pending_changes.js"></script>
  11 <script src="options.js"></script>
  12 <link rel="stylesheet" href="css/chrome_shared.css">
  13 <link rel="stylesheet" href="css/overlay.css">
  14 <link rel="stylesheet" href="css/widgets.css">
  15 <link rel="stylesheet" href="css/uber_shared.css">
  16 <link rel="stylesheet" href="slider.css">
  17 <style>
  18 body.uber-frame {
  19   -webkit-margin-start: 18px;
  20   -webkit-margin-end: 30px;
  21 }
  22
  23 body.uber-frame section {
  24   max-width: 650px;
  25 }
  26
  27 body.uber-frame section:last-of-type {
  28   margin-top: 28px;
  29 }
  30
  31 body.uber-frame header {
  32   -webkit-padding-start: 18px;
  33   left: 0;
  34   right: 0;
  35 }
  36
  37 body.uber-frame header > h1 {
  38   padding-bottom: 16px;
  39 }
  40
  41 h1 {
  42   font-size: 16px;
  43 }
  44
  45 .script-header {
  46   -webkit-margin-before: 12px;
  47 }
  48
  49 h3 {
  50   -webkit-margin-after: 11px;
  51   font-size: 14px;
  52 }
  53
  54 section {
  55   font-size: 12px;
  56 }
  57
  58 .bordered {
  59   border: 1px solid #D9D9D9;
  60   border-radius: 2px;
  61 }
  62
  63 .smaller {
  64   font-size: smaller;
  65 }
  66
  67 .font-settings-div {
  68   -webkit-margin-end: 5px;
  69   width: 180px;
  70 }
  71
  72 .font-settings-div:first-of-type {
  73   width: 138px;
  74 }
  75
  76 .font-settings-div > :first-child {
  77   -webkit-margin-after: 10px;
  78 }
  79
  80 .font-settings-div > * {
  81   -webkit-margin-after: 14px;
  82 }
  83
  84 .font-settings-row {
  85   display: -webkit-flex;
  86   width: 800px;
  87 }
  88
  89 .sample-text-div {
  90   display: -webkit-flex;
  91   white-space: nowrap;
  92   width: 100%;
  93   overflow: hidden;
  94 }
  95
  96 .sample-text-span {
  97   margin-top: auto;
  98   margin-bottom: auto;
  99   margin-left: 20px;
 100 }
 101
 102 #overlay-container {
 103   z-index: 100;
 104 }
 105
 106 #standardFontSample {
 107   font-family: standard;
 108 }
 109
 110 #serifFontSample {
 111   font-family: serif;
 112 }
 113
 114 #sansSerifFontSample {
 115   font-family: sans-serif;
 116 }
 117
 118 #fixedFontSample {
 119   font-family: monospace;
 120 }
 121
 122 #minFontSample {
 123   font-family: standard;
 124 }
 125
 126 select {
 127   width: 100%;
 128 }
 129
 130 #footer > button {
 131   -webkit-padding-start: 9px;
 132   -webkit-padding-end: 9px;
 133 }
 134
 135 #footer > #apply-settings {
 136   -webkit-padding-start: 17px;
 137   -webkit-padding-end: 17px;
 138 }
 139
 140 #apply-settings:enabled {
 141   background-color: #4f7dd6;
 142   background-image: none;
 143   border-color: #2a4aac;
 144   box-shadow: none;
 145   color: #fbfafb;
 146   text-shadow: none;
 147 }
 148
 149 .slider-legend {
 150   position: relative;
 151   /* This offset is needed to get the legend to align with the slider. */
 152   top: -7px;
 153 }
 154
 155 .slider-container {
 156   display: inline-block;
 157   position: relative;
 158   top: 1px;
 159   height: 24px;
 160   width: 88px;
 161 }
 162 </style>
 163 </head>
 164 <body class="uber-frame">
 165 <div id="overlay-container" class="overlay" hidden>
 166   <div id="reset-overlay" class="page">
 167     <div class="close-button"></div>
 168     <div id="reset-this-script-overlay-dialog" hidden>
 169       <h1>Reset</h1>
 170       <div id="reset-this-script-overlay-dialog-content" class="content-area">
 171       </div>
 172       <div class="action-area">
 173         <div class="button-strip">
 174           <button id="reset-this-script-cancel">Cancel</button>
 175           <button id="reset-this-script-ok">Reset</button>
 176         </div>
 177       </div>
 178     </div>
 179     <div id="reset-all-scripts-overlay-dialog" hidden>
 180       <h1>Reset</h1>
 181       <div class="content-area">
 182         Are you sure you want to reset all settings?
 183       </div>
 184       <div class="action-area">
 185         <div class="button-strip">
 186           <button id="reset-all-cancel">Cancel</button>
 187           <button id="reset-all-ok">Reset</button>
 188         </div>
 189       </div>
 190     </div>
 191   </div>
 192 </div>
 193 <div class="page">
 194   <header style="-webkit-transform: translateX(0px);">
 195     <h1>Advanced Font Settings</h1>
 196   </header>
 197   <section>
 198     <h3 class="script-header">Script</h3>
 199     <div class="font-settings-row">
 200       <select style="width: 200px" id="scriptList"></select>
 201     </div>
 202   </section>
 203   <section>
 204     <h3>Proportional fonts</h3>
 205     <div class="font-settings-row">
 206       <div class="font-settings-div">
 207         <div id="defaultFontSizeLabel"></div>
 208         <div style="width: 100%; -webkit-margin-after: 0">
 209           <span class="slider-legend smaller">Aa</span>
 210           <div id="defaultFontSizeSliderContainer" class="slider-container"></div>
 211           <span class="slider-legend">Aa</span>
 212         </div>
 213       </div>
 214       <div class="font-settings-div">
 215         <div>Standard</div>
 216         <div><select id="standardFontList"></select></div>
 217       </div>
 218       <div class="font-settings-div">
 219         <div>Serif</div>
 220         <div><select id="serifFontList"></select></div>
 221       </div>
 222       <div class="font-settings-div">
 223         <div>Sans-Serif</div>
 224         <div><select id="sansSerifFontList"></select></div>
 225       </div>
 226     </div>
 227     <div class="bordered" style="position: relative; left: 0; right: 0; height: 160px; width: 702px;">
 228       <div class="sample-text-div" style="height: 33%">
 229         <span id='standardFontSample' class="sample-text-span">
 230           The quick brown fox jumps over the lazy dog.
 231         </span>
 232       </div>
 233       <div class="sample-text-div" style="height: 33%">
 234         <span id="serifFontSample" class="sample-text-span">
 235           The quick brown fox jumps over the lazy dog.
 236         </span>
 237       </div>
 238       <div class="sample-text-div" style="height: 33%">
 239         <span id="sansSerifFontSample" class="sample-text-span">
 240           The quick brown fox jumps over the lazy dog.
 241         </span>
 242       </div>
 243     </div>
 244   </section>
 245   <section>
 246     <h3>Fixed-width fonts</h3>
 247     <div class="font-settings-row">
 248       <div class="font-settings-div">
 249         <div id="fixedFontSizeLabel"></div>
 250         <div style="width: 100%; -webkit-margin-after: 0">
 251           <span class="slider-legend smaller">Aa</span>
 252           <div id="defaultFixedFontSizeSliderContainer" class="slider-container"></div>
 253           <span class="slider-legend">Aa</span>
 254         </div>
 255       </div>
 256       <div class="font-settings-div">
 257         <div>Fixed</div>
 258         <div><select id="fixedFontList"></select></div>
 259       </div>
 260     </div>
 261     <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
 262       <div class="sample-text-div" style="height: 100%">
 263         <span id="fixedFontSample" class="sample-text-span">
 264           The quick brown fox jumps over the lazy dog.
 265         </span>
 266       </div>
 267     </div>
 268   </section>
 269   <section>
 270     <h3>Minimum font size</h3>
 271     <div class="font-settings-row">
 272       <div class="font-settings-div">
 273         <div id="minFontSizeLabel" style="-webkit-margin-after: 8px"></div>
 274         <div style="width: 100%; -webkit-margin-after: 12px">
 275           <span class="slider-legend smaller">Aa</span>
 276           <div id="minFontSizeSliderContainer" class="slider-container"></div>
 277           <span class="slider-legend">Aa</span>
 278         </div>
 279       </div>
 280     </div>
 281     <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;">
 282       <div class="sample-text-div" style="height: 100%">
 283         <span id="minFontSample" class="sample-text-span">
 284           The quick brown fox jumps over the lazy dog.
 285         </span>
 286       </div>
 287     </div>
 288   </section>
 289   <section id="footer">
 290     <button id="apply-settings">
 291       Apply settings
 292     </button>
 293     <button id="reset-this-script-button">
 294       Reset settings for this script
 295     </button>
 296     <button id="reset-all-button">
 297       Reset all settings
 298     </button>
 299   </section>
 300 </div>
 301 </body>
 302 </html>