diff options
Diffstat (limited to 'mobile/android/themes/geckoview')
14 files changed, 484 insertions, 0 deletions
diff --git a/mobile/android/themes/geckoview/config.css b/mobile/android/themes/geckoview/config.css new file mode 100644 index 0000000000..f1689d5865 --- /dev/null +++ b/mobile/android/themes/geckoview/config.css @@ -0,0 +1,379 @@ +/* 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/. */ + +:root { + --background-color: #fff; + --text-color: #0c0c0d; + --border-color: #e1e1e2; + + --toolbar-background-color: #f9f9fa; + --searchbar-background-color: #ededf0; + --searchbar-focused-background-color: #fff; + + --deemphasized-border-color: rgba(0,0,0,0.05); + --deemphasized-text-color: rgba(0,0,0,0.5); +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #292833; + --text-color: #f9f9fa; + --border-color: rgba(255,255,255,0.15); + + --toolbar-background-color: #1c1b22; + --searchbar-background-color: #3f3e46; + --searchbar-focused-background-color: #4c4a54; + + --deemphasized-border-color: rgba(249,249,250,0.05); + --deemphasized-text-color: rgba(249,249,250,0.5); + } +} + +html, +body { + margin: 0; + padding: 0; + user-select: none; + font-family: sans-serif; + -moz-text-size-adjust: none; + background-color: var(--background-color); + color: var(--text-color); +} + +.toolbar { + width: 100%; + min-height: 3em; + display: flow-root; + position: sticky; + top: 0; + left: 0; + z-index: 10; + background-color: var(--toolbar-background-color); + font-weight: bold; + box-shadow: 0 2px 7px rgba(0,0,0,0.25); +} + +.toolbar-container { + max-width: 40em; + margin-inline: auto; +} + +#filter-container { + margin: 0.375em; + height: 2em; + background-color: var(--searchbar-background-color); + border-radius: 0.25em; + border: 1px solid transparent; + overflow: hidden; + display: flex; + float: inline-end; +} + +#filter-container:focus-within { + background-color: var(--searchbar-focused-background-color); + box-shadow: 0 1px 6px rgba(0,0,0,.1); +} + +#filter-input { + border: none; + background: none; + color: inherit; + flex-grow: 1; + height: 100%; + box-sizing: border-box; + opacity: 0.75; +} + +#new-pref-toggle-button { + background-image: url("chrome://geckoview/skin/images/add.svg"); + background-size: 1.25em; + background-position: center; + background-repeat: no-repeat; + height: 3em; + width: 3em; + outline: none; + float: inline-start; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; +} + +#filter-search-button, +#filter-input-clear-button { + background-size: 1em; + background-position: center; + background-repeat: no-repeat; + height: 2em; + width: 2em; + outline: none; + display: inline-block; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; +} + +#filter-search-button { + background-image: url("chrome://geckoview/skin/images/search.svg"); +} + +#filter-search-button:dir(rtl) { + scale: -1 1; +} + +#filter-input-clear-button { + background-image: url("chrome://geckoview/skin/images/search-clear.svg"); +} + +#filter-input:placeholder-shown + #filter-input-clear-button { + visibility: hidden; /* display: none; causes the input size to change */ +} + +.toolbar-item { + display: inline-block; + height: 3em; + min-width: 3em; + float: right; +} + +#content { + position: relative; + margin: 0 auto; + padding-inline: 0; + min-height: 100%; + max-width: 40em; +} + +#prefs-container { + list-style: none; + min-height: 100%; + width: 100%; + margin: 0; + padding: 0; + box-sizing: border-box; + overflow-x: hidden; +} + +#prefs-container li { + border-bottom: 1px solid var(--border-color); + cursor: pointer; +} + +#new-pref-container { + width: 100%; + margin: 0; + background-color: var(--background-color); + box-shadow: 0 5px 18px rgba(0,0,0,.2); + box-sizing: border-box; + overflow-x: hidden; + max-width: 40em; + max-height: 100%; + position: fixed; + top: 3em; + left: auto; + display: none; + z-index: 5; +} + +#new-pref-container input, +#new-pref-container select { + border: none; + background: none; +} + +#new-pref-container.show { + display: block; +} + +#new-pref-line-boolean, +#new-pref-value-string, +#new-pref-value-int { + display: none; +} +#new-pref-item[typestyle="boolean"] #new-pref-line-boolean, +#new-pref-item[typestyle="string"] #new-pref-value-string, +#new-pref-item[typestyle="int"] #new-pref-value-int { + display: flex; +} +#new-pref-item[typestyle="boolean"] #new-pref-line-input { + border-top: none; +} + +.pref-name, +.pref-value { + padding: 15px 10px; + text-align: match-parent; + text-overflow: ellipsis; + overflow: hidden; + background: none; + color: inherit; + direction: ltr; +} + +.pref-value { + flex: 1 1 auto; + border: none; + unicode-bidi: plaintext; +} + +.pref-name[locked] { + -moz-context-properties: fill, fill-opacity; + fill: currentColor; + fill-opacity: 0.8; + background-image: url("chrome://geckoview/skin/images/lock.svg"); + background-repeat: no-repeat; + background-position-y: center; + background-size: 1em; +} + +:dir(ltr) > .pref-name[locked] { + background-position-x: right 10px; + padding-right: 30px; +} + +:dir(rtl) > .pref-name[locked] { + background-position-x: 10px; + padding-left: 30px; +} + +#new-pref-name { + width: 30em; +} + +#new-pref-type { + appearance: none; + color: inherit; + border-inline-start: 1px solid var(--deemphasized-border-color) !important; + text-align: center; + width: 9em; + padding-inline: 8px; +} + +.pref-item-line { + border-top: 1px solid var(--deemphasized-border-color); + color: var(--deemphasized-text-color); + display: flex; +} + +#new-pref-value-boolean { + flex: 1 1 auto; +} + +#new-pref-container .pref-button.toggle { + display: flex; + opacity: 1; + flex: 0 1 auto; + float: right; +} + +#new-pref-container .pref-button.cancel, +#new-pref-container .pref-button.create { + display: inline-block; + opacity: 1; + flex: 1 1 auto; +} + +.pref-item-line { + pointer-events: none; +} + +#new-pref-container .pref-item-line, +.pref-item.selected .pref-item-line, +.pref-item:not(.selected) .pref-button.reset { + pointer-events: auto; +} + +#new-pref-container .pref-button.create[disabled] { + opacity: 0.5; +} + +.pref-item.selected { + background-color: hsla(0,0%,60%,.2); +} + +.pref-button { + display: inline-flex; + box-sizing: border-box; + align-items: center; + text-align: center; + padding: 10px 1em; + border-inline-start: 1px solid var(--deemphasized-border-color); + opacity: 0; + transition-property: opacity; + transition-duration: 500ms; +} + +.pref-item.selected .pref-item-line .pref-button { + opacity: 1; +} + +.pref-item:not(.selected) .pref-item-line .pref-button:not(.reset) { + display: none; +} + +.pref-item:not(.selected) .pref-button.reset { + opacity: 1; +} + +.pref-button:active, +#new-pref-type:active { + background-color: hsla(0,0%,60%,.4); +} + +.pref-button[disabled] { + display: none; +} + +.pref-button.up, +.pref-button.down { + -moz-context-properties: fill, fill-opacity; + fill: var(--text-color); + fill-opacity: 0.8; + background-size: 1em; + background-position: center; + background-repeat: no-repeat; +} + +.pref-button.up { + background-image: url("chrome://geckoview/skin/images/arrow-up.svg"); +} + +.pref-button.down { + background-image: url("chrome://geckoview/skin/images/arrow-down.svg"); +} + +#prefs-shield { + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.45); + position: fixed; + top: 0; + left: 0; + opacity: 0; + transition-property: opacity; + transition-duration: 500ms; + display: none; +} + +#prefs-shield[shown] { + display: block; + opacity: 1; +} + +#loading-container::before { + content: ""; + display: block; + width: 1.25em; + height: 1.25em; + border: 0.15em solid currentColor; + margin: 1em auto; + border-right-color: transparent; + border-radius: 100%; + opacity: 0.8; + animation: 1.1s linear infinite spin; +} + +@keyframes spin { + from { transform: none; } + to { transform: rotate(360deg); } +} diff --git a/mobile/android/themes/geckoview/images/accessiblecaret-normal.svg b/mobile/android/themes/geckoview/images/accessiblecaret-normal.svg new file mode 100644 index 0000000000..add588ead1 --- /dev/null +++ b/mobile/android/themes/geckoview/images/accessiblecaret-normal.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="66px" height="80px" viewBox="0 0 66 80" xmlns="http://www.w3.org/2000/svg"> + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-332.000000, -1230.000000)" fill="AccentColor" opacity="0.95"> + <path d="M342,1253 L365,1230 L388,1253 C401.220659,1266.37181 401.223493,1287.34993 388,1300 C375.446886,1313.2341 354.555948,1313.23694 342,1300 C328.779341,1287.35277 328.776507,1266.37465 342,1253 Z"></path> + </g> + </g> +</svg> diff --git a/mobile/android/themes/geckoview/images/accessiblecaret-tilt-left.svg b/mobile/android/themes/geckoview/images/accessiblecaret-tilt-left.svg new file mode 100644 index 0000000000..f5d238dc09 --- /dev/null +++ b/mobile/android/themes/geckoview/images/accessiblecaret-tilt-left.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-564.000000, -1723.000000)" fill="AccentColor" opacity="0.95"> + <path d="M564,1756 C564,1737.7746 578.770596,1723 597,1723 L630,1723 L630,1756 C630,1774.2254 615.229404,1789 597,1789 C578.774603,1789 564,1774.2294 564,1756 L564,1756 Z"></path> + </g> + </g> +</svg> diff --git a/mobile/android/themes/geckoview/images/accessiblecaret-tilt-right.svg b/mobile/android/themes/geckoview/images/accessiblecaret-tilt-right.svg new file mode 100644 index 0000000000..72f5b41cf9 --- /dev/null +++ b/mobile/android/themes/geckoview/images/accessiblecaret-tilt-right.svg @@ -0,0 +1,10 @@ +<!-- 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/. --> +<svg width="66px" height="66px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-690.000000, -1723.000000)" fill="AccentColor" opacity="0.95"> + <path d="M723,1723 C741.225397,1723 756,1737.7706 756,1756 C756,1774.2254 741.229404,1789 723,1789 C704.774603,1789 690,1774.2294 690,1756 L690,1723 L723,1723 Z"></path> + </g> + </g> +</svg> diff --git a/mobile/android/themes/geckoview/images/add.svg b/mobile/android/themes/geckoview/images/add.svg new file mode 100644 index 0000000000..7796815d9b --- /dev/null +++ b/mobile/android/themes/geckoview/images/add.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 1 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/arrow-down.svg b/mobile/android/themes/geckoview/images/arrow-down.svg new file mode 100644 index 0000000000..05279202d2 --- /dev/null +++ b/mobile/android/themes/geckoview/images/arrow-down.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/arrow-up.svg b/mobile/android/themes/geckoview/images/arrow-up.svg new file mode 100644 index 0000000000..42eabd2494 --- /dev/null +++ b/mobile/android/themes/geckoview/images/arrow-up.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8 4a1 1 0 00-.707.293l-5 5a1 1 0 001.414 1.414L8 6.414l4.293 4.293a1 1 0 001.414-1.414l-5-5A1 1 0 008 4z"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/dropmarker-right.svg b/mobile/android/themes/geckoview/images/dropmarker-right.svg new file mode 100644 index 0000000000..411417f88e --- /dev/null +++ b/mobile/android/themes/geckoview/images/dropmarker-right.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="7px" height="10px" xmlns="http://www.w3.org/2000/svg"> + <polyline points="1 1 6 5 1 9" stroke="#414141" stroke-width="2" stroke-linecap="round" fill="none" stroke-linejoin="round"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/dropmarker.svg b/mobile/android/themes/geckoview/images/dropmarker.svg new file mode 100644 index 0000000000..1f52a0bd50 --- /dev/null +++ b/mobile/android/themes/geckoview/images/dropmarker.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="10px" height="7px" xmlns="http://www.w3.org/2000/svg"> + <polyline points="1 1 5 6 9 1" stroke="#414141" stroke-width="2" stroke-linecap="round" fill="none" stroke-linejoin="round"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/lock.svg b/mobile/android/themes/geckoview/images/lock.svg new file mode 100644 index 0000000000..e0854cc15b --- /dev/null +++ b/mobile/android/themes/geckoview/images/lock.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M12,7 L13,7 C13.5522847,7 14,7.44771525 14,8 L14,14 C14,14.5522847 13.5522847,15 13,15 L3,15 C2.44771525,15 2,14.5522847 2,14 L2,8 C2,7.44771525 2.44771525,7 3,7 L4,7 L4,5.00032973 C4,2.79202307 5.79321704,1 8,1 C10.2075938,1 12,2.79481161 12,5.00032973 L12,7 Z M10,7 L10,5.00032973 C10,3.89878113 9.10242341,3 8,3 C6.89748845,3 6,3.89689088 6,5.00032973 L6,7 L10,7 Z"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/search-clear.svg b/mobile/android/themes/geckoview/images/search-clear.svg new file mode 100644 index 0000000000..17d2eb692c --- /dev/null +++ b/mobile/android/themes/geckoview/images/search-clear.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M6.586 8l-2.293 2.293a1 1 0 0 0 1.414 1.414L8 9.414l2.293 2.293a1 1 0 0 0 1.414-1.414L9.414 8l2.293-2.293a1 1 0 1 0-1.414-1.414L8 6.586 5.707 4.293a1 1 0 0 0-1.414 1.414L6.586 8zM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"/> +</svg> diff --git a/mobile/android/themes/geckoview/images/search.svg b/mobile/android/themes/geckoview/images/search.svg new file mode 100644 index 0000000000..840ca07bd2 --- /dev/null +++ b/mobile/android/themes/geckoview/images/search.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"/> +</svg> diff --git a/mobile/android/themes/geckoview/jar.mn b/mobile/android/themes/geckoview/jar.mn new file mode 100644 index 0000000000..a5d7d54f7e --- /dev/null +++ b/mobile/android/themes/geckoview/jar.mn @@ -0,0 +1,20 @@ +#filter substitution +# 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/. + +geckoview.jar: + +% skin geckoview classic/1.0 %skin/ + skin/config.css (config.css) + skin/images/accessiblecaret-normal.svg (images/accessiblecaret-normal.svg) + skin/images/accessiblecaret-tilt-left.svg (images/accessiblecaret-tilt-left.svg) + skin/images/accessiblecaret-tilt-right.svg (images/accessiblecaret-tilt-right.svg) + skin/images/add.svg (images/add.svg) + skin/images/arrow-down.svg (images/arrow-down.svg) + skin/images/arrow-up.svg (images/arrow-up.svg) + skin/images/dropmarker-right.svg (images/dropmarker-right.svg) + skin/images/dropmarker.svg (images/dropmarker.svg) + skin/images/lock.svg (images/lock.svg) + skin/images/search-clear.svg (images/search-clear.svg) + skin/images/search.svg (images/search.svg) diff --git a/mobile/android/themes/geckoview/moz.build b/mobile/android/themes/geckoview/moz.build new file mode 100644 index 0000000000..d988c0ff9b --- /dev/null +++ b/mobile/android/themes/geckoview/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] |
