228 lines
8.2 KiB
HTML
228 lines
8.2 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
|
- You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title id="reader-title"></title>
|
|
<meta
|
|
http-equiv="Content-Security-Policy"
|
|
content="default-src chrome:; img-src data: *; media-src *; object-src 'none'"
|
|
/>
|
|
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
|
<meta name="viewport" content="width=device-width; user-scalable=0" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://global/skin/design-system/tokens-brand.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://global/skin/aboutReader.css"
|
|
type="text/css"
|
|
/>
|
|
<link rel="localization" href="toolkit/about/aboutReader.ftl" />
|
|
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/reader/moz-slider.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/moz-input-color.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://global/content/elements/named-deck.js"
|
|
></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="top-anchor"></div>
|
|
|
|
<div id="toolbar" class="toolbar-container">
|
|
<div class="toolbar reader-toolbar">
|
|
<div class="reader-controls">
|
|
<button
|
|
class="close-button toolbar-button"
|
|
aria-labelledby="toolbar-close"
|
|
data-telemetry-id="reader-close"
|
|
>
|
|
<span
|
|
class="hover-label"
|
|
id="toolbar-close"
|
|
data-l10n-id="about-reader-toolbar-close"
|
|
></span>
|
|
</button>
|
|
<ul class="dropdown text-layout-dropdown">
|
|
<li>
|
|
<button
|
|
class="dropdown-toggle toolbar-button text-layout-button"
|
|
aria-labelledby="toolbar-text-layout-controls"
|
|
data-telemetry-id="reader-text-layout-controls"
|
|
>
|
|
<span
|
|
class="hover-label"
|
|
id="toolbar-text-layout-controls"
|
|
data-l10n-id="about-reader-toolbar-text-layout-controls"
|
|
></span>
|
|
</button>
|
|
</li>
|
|
<li class="dropdown-popup" id="text-layout-controls" tabindex="-1">
|
|
<h2
|
|
data-l10n-id="about-reader-text-header"
|
|
id="about-reader-text-header"
|
|
></h2>
|
|
<div id="text-size-controls">
|
|
<span
|
|
data-l10n-id="about-reader-text-size-label"
|
|
id="about-reader-text-size-label"
|
|
></span>
|
|
<div class="text-size-buttons buttonrow">
|
|
<button
|
|
class="text-size-minus-button"
|
|
data-l10n-id="about-reader-toolbar-minus"
|
|
data-telemetry-id="text-size-minus-button"
|
|
></button>
|
|
<button
|
|
class="text-size-plus-button"
|
|
data-l10n-id="about-reader-toolbar-plus"
|
|
data-telemetry-id="text-size-plus-button"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div id="font-controls">
|
|
<div id="font-type-dropdown" class="dropdown-selector">
|
|
<label
|
|
for="font-type-selector"
|
|
data-l10n-id="about-reader-font-type-selector-label"
|
|
></label>
|
|
<select
|
|
name="font-type-selector"
|
|
id="font-type-selector"
|
|
data-telemetry-id="font-type-selector"
|
|
></select>
|
|
</div>
|
|
<div id="font-weight-dropdown" class="dropdown-selector">
|
|
<label
|
|
for="font-weight-selector"
|
|
data-l10n-id="about-reader-font-weight-selector-label"
|
|
></label>
|
|
<select
|
|
name="font-weight-selector"
|
|
id="font-weight-selector"
|
|
data-telemetry-id="font-weight-selector"
|
|
></select>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<h2
|
|
data-l10n-id="about-reader-layout-header"
|
|
id="about-reader-layout-header"
|
|
></h2>
|
|
<div id="content-width-slider" class="slider-container"></div>
|
|
<div id="line-spacing-slider" class="slider-container"></div>
|
|
<hr />
|
|
<details id="about-reader-advanced-layout">
|
|
<summary class="accordion-header">
|
|
<h2
|
|
data-l10n-id="about-reader-advanced-layout-header"
|
|
id="about-reader-advanced-layout-header"
|
|
></h2>
|
|
<span class="chevron-icon"></span>
|
|
</summary>
|
|
<div
|
|
id="character-spacing-slider"
|
|
class="slider-container"
|
|
></div>
|
|
<div id="word-spacing-slider" class="slider-container"></div>
|
|
<label
|
|
for="text-alignment-buttons"
|
|
data-l10n-id="about-reader-text-alignment-label"
|
|
></label>
|
|
<div
|
|
class="text-alignment-buttons radiorow"
|
|
id="text-alignment-buttons"
|
|
></div>
|
|
<button
|
|
class="text-layout-reset-button reset-button"
|
|
data-l10n-id="about-reader-reset-button"
|
|
></button>
|
|
</details>
|
|
</li>
|
|
</ul>
|
|
<ul class="dropdown colors-dropdown">
|
|
<li>
|
|
<button
|
|
class="dropdown-toggle toolbar-button colors-button"
|
|
aria-labelledby="toolbar-color-controls"
|
|
data-telemetry-id="reader-color-controls"
|
|
>
|
|
<span
|
|
class="hover-label"
|
|
id="toolbar-color-controls"
|
|
data-l10n-id="about-reader-toolbar-theme-controls"
|
|
></span>
|
|
</button>
|
|
</li>
|
|
<li class="dropdown-popup" id="color-controls">
|
|
<h2
|
|
data-l10n-id="about-reader-colors-menu-header"
|
|
id="about-reader-colors-menu-header"
|
|
></h2>
|
|
<button-group aria-labelledby="about-reader-colors-menu-header">
|
|
<button
|
|
is="named-deck-button"
|
|
deck="tabs-deck"
|
|
name="fxtheme"
|
|
data-l10n-id="about-reader-fxtheme-tab"
|
|
data-telemetry-id="colors-menu-default-tab"
|
|
></button>
|
|
<button
|
|
is="named-deck-button"
|
|
deck="tabs-deck"
|
|
name="customtheme"
|
|
data-l10n-id="about-reader-customtheme-tab"
|
|
data-telemetry-id="colors-menu-custom-tab"
|
|
></button>
|
|
</button-group>
|
|
<named-deck id="tabs-deck" is-tabbed>
|
|
<div name="fxtheme" class="color-scheme-buttons radiorow"></div>
|
|
<div name="customtheme">
|
|
<ul class="custom-colors-selection"></ul>
|
|
<button
|
|
class="custom-colors-reset-button reset-button"
|
|
data-l10n-id="about-reader-reset-button"
|
|
></button>
|
|
</div>
|
|
</named-deck>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="header reader-header">
|
|
<a class="domain reader-domain"></a>
|
|
<div class="domain-border"></div>
|
|
<h1 class="reader-title"></h1>
|
|
<div class="credits reader-credits"></div>
|
|
<div class="meta-data">
|
|
<div class="reader-estimated-time"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="content">
|
|
<div class="moz-reader-content"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="reader-message"></div>
|
|
</div>
|
|
<div aria-owns="toolbar"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|