| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Advanced Font Settings</title> |
| <script src="js/cr.js"></script> |
| <script src="js/cr/ui.js"></script> |
| <script src="js/cr/ui/overlay.js"></script> |
| <script src="slider.js"></script> |
| <script src="pending_changes.js"></script> |
| <script src="options.js"></script> |
| <link rel="stylesheet" href="css/chrome_shared.css"> |
| <link rel="stylesheet" href="css/overlay.css"> |
| <link rel="stylesheet" href="css/widgets.css"> |
| <link rel="stylesheet" href="css/uber_shared.css"> |
| <link rel="stylesheet" href="slider.css"> |
| <style> |
| body.uber-frame { |
| margin-inline-start: 18px; |
| margin-inline-end: 30px; |
| } |
| |
| body.uber-frame section { |
| max-width: 650px; |
| } |
| |
| body.uber-frame section:last-of-type { |
| margin-top: 28px; |
| } |
| |
| body.uber-frame header { |
| left: 0; |
| padding-inline-start: 18px; |
| right: 0; |
| } |
| |
| body.uber-frame header > h1 { |
| padding-bottom: 16px; |
| } |
| |
| h1 { |
| font-size: 16px; |
| } |
| |
| .script-header { |
| margin-top: 12px; |
| } |
| |
| h3 { |
| margin-bottom: 11px; |
| font-size: 14px; |
| } |
| |
| section { |
| font-size: 12px; |
| } |
| |
| .bordered { |
| border: 1px solid #D9D9D9; |
| border-radius: 2px; |
| } |
| |
| .smaller { |
| font-size: smaller; |
| } |
| |
| .font-settings-div { |
| margin-inline-end: 5px; |
| width: 180px; |
| } |
| |
| .font-settings-div:first-of-type { |
| width: 138px; |
| } |
| |
| .font-settings-div > :first-child { |
| margin-bottom: 10px; |
| } |
| |
| .font-settings-div > * { |
| margin-bottom: 14px; |
| } |
| |
| .font-settings-row { |
| display: -webkit-flex; |
| width: 800px; |
| } |
| |
| .sample-text-div { |
| display: -webkit-flex; |
| white-space: nowrap; |
| width: 100%; |
| overflow: hidden; |
| } |
| |
| .sample-text-span { |
| margin-top: auto; |
| margin-bottom: auto; |
| margin-left: 20px; |
| } |
| |
| #overlay-container { |
| z-index: 100; |
| } |
| |
| #standardFontSample { |
| font-family: standard; |
| } |
| |
| #serifFontSample { |
| font-family: serif; |
| } |
| |
| #sansSerifFontSample { |
| font-family: sans-serif; |
| } |
| |
| #fixedFontSample { |
| font-family: monospace; |
| } |
| |
| #minFontSample { |
| font-family: standard; |
| } |
| |
| select { |
| width: 100%; |
| } |
| |
| #footer > button { |
| padding-inline-start: 9px; |
| padding-inline-end: 9px; |
| } |
| |
| #footer > #apply-settings { |
| padding-inline-start: 17px; |
| padding-inline-end: 17px; |
| } |
| |
| #apply-settings:enabled { |
| background-color: #4f7dd6; |
| background-image: none; |
| border-color: #2a4aac; |
| box-shadow: none; |
| color: #fbfafb; |
| text-shadow: none; |
| } |
| |
| .slider-legend { |
| position: relative; |
| /* This offset is needed to get the legend to align with the slider. */ |
| top: -7px; |
| } |
| |
| .slider-container { |
| display: inline-block; |
| position: relative; |
| top: 1px; |
| height: 24px; |
| width: 88px; |
| } |
| </style> |
| </head> |
| <body class="uber-frame"> |
| <div id="overlay-container" class="overlay" hidden> |
| <div id="reset-overlay" class="page"> |
| <div class="close-button"></div> |
| <div id="reset-this-script-overlay-dialog" hidden> |
| <h1>Reset</h1> |
| <div id="reset-this-script-overlay-dialog-content" class="content-area"> |
| </div> |
| <div class="action-area"> |
| <div class="button-strip"> |
| <button id="reset-this-script-cancel">Cancel</button> |
| <button id="reset-this-script-ok">Reset</button> |
| </div> |
| </div> |
| </div> |
| <div id="reset-all-scripts-overlay-dialog" hidden> |
| <h1>Reset</h1> |
| <div class="content-area"> |
| Are you sure you want to reset all settings? |
| </div> |
| <div class="action-area"> |
| <div class="button-strip"> |
| <button id="reset-all-cancel">Cancel</button> |
| <button id="reset-all-ok">Reset</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="page"> |
| <header style="transform: translateX(0px);"> |
| <h1>Advanced Font Settings</h1> |
| </header> |
| <section> |
| <h3 class="script-header">Script</h3> |
| <div class="font-settings-row"> |
| <select style="width: 200px" id="scriptList"></select> |
| </div> |
| </section> |
| <section> |
| <h3>Proportional fonts</h3> |
| <div class="font-settings-row"> |
| <div class="font-settings-div"> |
| <div id="defaultFontSizeLabel"></div> |
| <div style="width: 100%; margin-bottom: 0"> |
| <span class="slider-legend smaller">Aa</span> |
| <div id="defaultFontSizeSliderContainer" class="slider-container"></div> |
| <span class="slider-legend">Aa</span> |
| </div> |
| </div> |
| <div class="font-settings-div"> |
| <div>Standard</div> |
| <div><select id="standardFontList"></select></div> |
| </div> |
| <div class="font-settings-div"> |
| <div>Serif</div> |
| <div><select id="serifFontList"></select></div> |
| </div> |
| <div class="font-settings-div"> |
| <div>Sans-Serif</div> |
| <div><select id="sansSerifFontList"></select></div> |
| </div> |
| </div> |
| <div class="bordered" style="position: relative; left: 0; right: 0; height: 160px; width: 702px;"> |
| <div class="sample-text-div" style="height: 33%"> |
| <span id='standardFontSample' class="sample-text-span"> |
| The quick brown fox jumps over the lazy dog. |
| </span> |
| </div> |
| <div class="sample-text-div" style="height: 33%"> |
| <span id="serifFontSample" class="sample-text-span"> |
| The quick brown fox jumps over the lazy dog. |
| </span> |
| </div> |
| <div class="sample-text-div" style="height: 33%"> |
| <span id="sansSerifFontSample" class="sample-text-span"> |
| The quick brown fox jumps over the lazy dog. |
| </span> |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Fixed-width fonts</h3> |
| <div class="font-settings-row"> |
| <div class="font-settings-div"> |
| <div id="fixedFontSizeLabel"></div> |
| <div style="width: 100%; margin-bottom: 0"> |
| <span class="slider-legend smaller">Aa</span> |
| <div id="defaultFixedFontSizeSliderContainer" class="slider-container"></div> |
| <span class="slider-legend">Aa</span> |
| </div> |
| </div> |
| <div class="font-settings-div"> |
| <div>Fixed</div> |
| <div><select id="fixedFontList"></select></div> |
| </div> |
| </div> |
| <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;"> |
| <div class="sample-text-div" style="height: 100%"> |
| <span id="fixedFontSample" class="sample-text-span"> |
| The quick brown fox jumps over the lazy dog. |
| </span> |
| </div> |
| </div> |
| </section> |
| <section> |
| <h3>Minimum font size</h3> |
| <div class="font-settings-row"> |
| <div class="font-settings-div"> |
| <div id="minFontSizeLabel" style="margin-bottom: 8px"></div> |
| <div style="width: 100%; margin-bottom: 12px"> |
| <span class="slider-legend smaller">Aa</span> |
| <div id="minFontSizeSliderContainer" class="slider-container"></div> |
| <span class="slider-legend">Aa</span> |
| </div> |
| </div> |
| </div> |
| <div class="bordered" style="position: relative; overflow: hidden; left: 0; right: 0; height: 58px; width: 702px;"> |
| <div class="sample-text-div" style="height: 100%"> |
| <span id="minFontSample" class="sample-text-span"> |
| The quick brown fox jumps over the lazy dog. |
| </span> |
| </div> |
| </div> |
| </section> |
| <section id="footer"> |
| <button id="apply-settings"> |
| Apply settings |
| </button> |
| <button id="reset-this-script-button"> |
| Reset settings for this script |
| </button> |
| <button id="reset-all-button"> |
| Reset all settings |
| </button> |
| </section> |
| </div> |
| </body> |
| </html> |
