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">
19 -webkit-margin-start: 18px;
20 -webkit-margin-end: 30px;
23 body.uber-frame section {
27 body.uber-frame section:last-of-type {
31 body.uber-frame header {
32 -webkit-padding-start: 18px;
37 body.uber-frame header > h1 {
59 border: 1px solid #D9D9D9;
68 -webkit-margin-end: 5px;
72 .font-settings-div:first-of-type {
76 .font-settings-div > :first-child {
80 .font-settings-div > * {
85 display: -webkit-flex;
90 display: -webkit-flex;
106 #standardFontSample {
107 font-family: standard;
114 #sansSerifFontSample {
115 font-family: sans-serif;
119 font-family: monospace;
123 font-family: standard;
131 -webkit-padding-start: 9px;
132 -webkit-padding-end: 9px;
135 #footer > #apply-settings {
136 -webkit-padding-start: 17px;
137 -webkit-padding-end: 17px;
140 #apply-settings:enabled {
141 background-color: #4f7dd6;
142 background-image: none;
143 border-color: #2a4aac;
151 /* This offset is needed to get the legend to align with the slider. */
156 display: inline-block;
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>
170 <div id="reset-this-script-overlay-dialog-content" class="content-area">
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>
179 <div id="reset-all-scripts-overlay-dialog" hidden>
181 <div class="content-area">
182 Are you sure you want to reset all settings?
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>
194 <header style="-webkit-transform: translateX(0px);">
195 <h1>Advanced Font Settings</h1>
198 <h3 class="script-header">Script</h3>
199 <div class="font-settings-row">
200 <select style="width: 200px" id="scriptList"></select>
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%; margin-bottom: 0">
209 <span class="slider-legend smaller">Aa</span>
210 <div id="defaultFontSizeSliderContainer" class="slider-container"></div>
211 <span class="slider-legend">Aa</span>
214 <div class="font-settings-div">
216 <div><select id="standardFontList"></select></div>
218 <div class="font-settings-div">
220 <div><select id="serifFontList"></select></div>
222 <div class="font-settings-div">
223 <div>Sans-Serif</div>
224 <div><select id="sansSerifFontList"></select></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.
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.
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.
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%; margin-bottom: 0">
251 <span class="slider-legend smaller">Aa</span>
252 <div id="defaultFixedFontSizeSliderContainer" class="slider-container"></div>
253 <span class="slider-legend">Aa</span>
256 <div class="font-settings-div">
258 <div><select id="fixedFontList"></select></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.
270 <h3>Minimum font size</h3>
271 <div class="font-settings-row">
272 <div class="font-settings-div">
273 <div id="minFontSizeLabel" style="margin-bottom: 8px"></div>
274 <div style="width: 100%; margin-bottom: 12px">
275 <span class="slider-legend smaller">Aa</span>
276 <div id="minFontSizeSliderContainer" class="slider-container"></div>
277 <span class="slider-legend">Aa</span>
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.
289 <section id="footer">
290 <button id="apply-settings">
293 <button id="reset-this-script-button">
294 Reset settings for this script
296 <button id="reset-all-button">