From: Robert Kaiser Date: Fri, 24 Feb 2017 21:27:10 +0000 (+0100) Subject: sync both themes with toolkit windows theme changes in Mozilla 52 cycle X-Git-Tag: LCARStrek-2.49~10 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=987dae1b58dde80be3e64488d7da121274fa8592 sync both themes with toolkit windows theme changes in Mozilla 52 cycle --- diff --git a/EarlyBlue/global/aboutNetworking.css b/EarlyBlue/global/aboutNetworking.css index 9b2eced8..bbc375a5 100644 --- a/EarlyBlue/global/aboutNetworking.css +++ b/EarlyBlue/global/aboutNetworking.css @@ -19,12 +19,12 @@ body { } #refreshDiv { - text-align: end; + justify-content: flex-end; margin-bottom: 0.5em; } #refreshButton { - vertical-align: middle; + margin-top: 0; } /** Categories **/ @@ -103,7 +103,6 @@ body { } .tab table { - border: 1; width: 100%; } diff --git a/EarlyBlue/global/aboutReaderControls.css b/EarlyBlue/global/aboutReaderControls.css index 6f86c578..1a602d84 100644 --- a/EarlyBlue/global/aboutReaderControls.css +++ b/EarlyBlue/global/aboutReaderControls.css @@ -82,6 +82,7 @@ background-color: #fbfbfb; -moz-user-select: none; border-right: 1px solid #b5b5b5; + z-index: 1; } .button { diff --git a/EarlyBlue/global/datetimeinputpickers.css b/EarlyBlue/global/datetimeinputpickers.css new file mode 100644 index 00000000..fc48fe93 --- /dev/null +++ b/EarlyBlue/global/datetimeinputpickers.css @@ -0,0 +1,352 @@ +/* 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 { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --calendar-width: 23.1rem; + --date-picker-item-height: 2.4rem; + + --border: 0.1rem solid #9999CC; + --border-radius: 0.3rem; + --border-active-color: #666699; + + --font-color: #000000; + --fill-color: #CCD0DD; + + --selected-font-color: #FFFFFF; + --selected-fill-color: #336699; + + --button-font-color: #666699; + --button-font-color-hover: #6666CC; + --button-font-color-active: #9999CC; + --button-fill-color-active: #000000; + + --weekday-font-color: #6C6C6C; + --weekday-outside-font-color: #6C6C6C; + --weekend-font-color: #DA4E44; + --weekend-outside-font-color: #FF988F; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +button { + -moz-appearance: none; + background: none; + border: none; +} + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav > button { + width: 3rem; + height: var(--date-picker-item-height); + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +.nav > button:hover { + fill: var(--button-font-color-hover); +} + +.nav > button.active { + fill: var(--button-font-color-active); +} + +.nav > button.left { + background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%; +} + +.nav > button.right { + background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%; +} + +.month-year-container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 3rem; + width: 17.1rem; + height: var(--date-picker-item-height); + z-index: 10; +} + +button.month-year { + font-size: 1.3rem; + border: var(--border); + border-radius: 0.3rem; + padding: 0.2rem 2.6rem 0.2rem 1.2rem; +} + +button.month-year:hover { + background: var(--fill-color); +} + +button.month-year.active { + border-color: var(--border-active-color); + background: var(--button-fill-color-active); +} + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: window; + opacity: 1; + transition: opacity 0.15s; +} + +.month-year-view.hidden { + visibility: hidden; + opacity: 0; +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 0 0.5rem; +} + +.month-year-view .spinner { + transform: scaleY(1); + transform-origin: top; + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner { + transform: scaleY(0); + transition: none; +} + +.month-year-view .spinner > div { + transform: scaleY(1); + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner > div { + transform: scaleY(2.5); + transition: none; +} + +.order-month-year > #spinner-month, +.order-year-month > #spinner-year { + order: 1; +} + +.order-month-year > #spinner-year, +.order-year-month > #spinner-month { + order: 2; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-font-color); +} + +.days-viewport { + height: 15rem; + overflow: hidden; + position: relative; +} + +.days-view { + position: absolute; + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.week-header > div, +.days-view > div { + align-items: center; + display: flex; + height: var(--date-picker-item-height); + margin: 0.05rem 0.15rem; + position: relative; + justify-content: center; + width: 3rem; +} + +.days-view > div.outside { + color: var(--weekday-outside-font-color); +} + +.days-view > div.weekend { + color: var(--weekend-font-color); +} + +.days-view > div.weekend.outside { + color: var(--weekend-outside-font-color); +} + +#time-picker, +.month-year-view { + display: flex; + flex-direction: row; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + height: var(--spinner-button-height); + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +.spinner-container > button:hover { + fill: var(--button-font-color-hover); +} + +.spinner-container > button.active { + fill: var(--button-font-color-active); +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div:hover::before, +.calendar-container .days-view > div:hover::before { + background: var(--fill-color); + border: var(--border); + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection, +.calendar-container .days-view > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before, +.calendar-container .days-view > div.selection::before { + background: var(--selected-fill-color); + border: none; + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/EarlyBlue/global/datetimepopup.css b/EarlyBlue/global/datetimepopup.css new file mode 100644 index 00000000..52f6fc7a --- /dev/null +++ b/EarlyBlue/global/datetimepopup.css @@ -0,0 +1,11 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: 0; + margin-right: 0; +} diff --git a/EarlyBlue/global/global.css b/EarlyBlue/global/global.css index e76b20dc..b9f97da8 100644 --- a/EarlyBlue/global/global.css +++ b/EarlyBlue/global/global.css @@ -27,10 +27,10 @@ menulist > menupopup { /* ::::: Variables ::::: */ :root { - --panel-arrowcontent-padding: 6px; - --panel-arrowcontent-background: #CCD0DD; - --panel-arrowcontent-color: #000000; - --panel-arrowcontent-border-color: #CCD0DD; + --arrowpanel-padding: 6px; + --arrowpanel-background: #CCD0DD; + --arrowpanel-color: #000000; + --arrowpanel-border-color: #CCD0DD; } /* ::::: root elements ::::: */ diff --git a/EarlyBlue/global/icons/input-clear.svg b/EarlyBlue/global/icons/input-clear.svg new file mode 100644 index 00000000..73e1580b --- /dev/null +++ b/EarlyBlue/global/icons/input-clear.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index 45d87eb3..4b7af22d 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -74,6 +74,11 @@ html|hr { xul|caption { } +html|h2, +xul|caption > xul|checkbox, +xul|caption > xul|label { +} + xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; @@ -569,7 +574,12 @@ xul|*.checkbox-label-box { xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } - +*/ +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} +/* xul|radio { margin-inline-start: 0; } diff --git a/EarlyBlue/global/menu.css b/EarlyBlue/global/menu.css index 5f55b3e3..310951ec 100644 --- a/EarlyBlue/global/menu.css +++ b/EarlyBlue/global/menu.css @@ -240,10 +240,3 @@ menulist > menupopup > menuseparator { .autocomplete-history-popup > menuitem { max-width: none !important; } - -/* ::::: tree column picker ::::: */ - -.treecell-popupcell-menu { - margin-inline-start: -2px; - list-style-image: url("chrome://global/skin/tree/columnpicker.gif"); -} \ No newline at end of file diff --git a/EarlyBlue/global/narrate.css b/EarlyBlue/global/narrate.css index 3aa8a8a6..8a44e78e 100644 --- a/EarlyBlue/global/narrate.css +++ b/EarlyBlue/global/narrate.css @@ -1,3 +1,8 @@ +.narrating { + position: relative; + z-index: 1; +} + body.light .narrating { background-color: #ffc; } @@ -9,3 +14,33 @@ body.sepia .narrating { body.dark .narrating { background-color: #242424; } + +.narrate-word-highlight { + position: absolute; + display: none; + transform: translate(-50%, calc(-50% - 2px)); + z-index: -1; + border-bottom-style: solid; + border-bottom-width: 7px; + transition: left 0.1s ease; +} + +.narrating > .narrate-word-highlight { + display: inline-block; +} + +.narrate-word-highlight.newline { + transition: none; +} + +body.light .narrate-word-highlight { + border-bottom-color: #ffe087; +} + +body.sepia .narrate-word-highlight { + border-bottom-color: #bdb5a5; +} + +body.dark .narrate-word-highlight { + border-bottom-color: #6f6f6f; +} diff --git a/EarlyBlue/global/popup.css b/EarlyBlue/global/popup.css index 38eb25c0..b3b35664 100644 --- a/EarlyBlue/global/popup.css +++ b/EarlyBlue/global/popup.css @@ -44,11 +44,11 @@ panel[type="arrow"][side="right"] { } .panel-arrowcontent { - padding: var(--panel-arrowcontent-padding); - color: var(--panel-arrowcontent-color); - background: var(--panel-arrowcontent-background); + padding: var(--arrowpanel-padding); + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); background-clip: padding-box; - border: 1px outset var(--panel-arrowcontent-border-color); + border: 1px outset var(--arrowpanel-border-color); margin: 0px; } diff --git a/EarlyBlue/global/timepicker.css b/EarlyBlue/global/timepicker.css new file mode 100644 index 00000000..683ae123 --- /dev/null +++ b/EarlyBlue/global/timepicker.css @@ -0,0 +1,153 @@ +/* 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 { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + + --border: 0.1rem solid #9999CC; + --border-radius: 0.3rem; + + --font-color: #000000; + --fill-color: #CCD0DD; + + --selected-font-color: #FFFFFF; + --selected-fill-color: #336699; + + --button-font-color: #666699; + --button-font-color-hover: #6666CC; + --button-font-color-active: #9999CC; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font-size: var(--font-size-default); +} + +#time-picker { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.spinner-container { + font-family: sans-serif; + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + -moz-appearance: none; + border: none; + background: none; + background-color: var(--button-font-color); + height: var(--spinner-button-height); +} + +.spinner-container > button:hover { + background-color: var(--button-font-color-hover); +} + +.spinner-container > button.active { + background-color: var(--button-font-color-active); +} + +.spinner-container > button.up { + mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; +} + +.spinner-container > button.down { + mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div:hover::before { + background: var(--fill-color); + border: var(--border); + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before { + background: var(--selected-fill-color); + border: none; + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/EarlyBlue/global/tree.css b/EarlyBlue/global/tree.css index 38663a06..5a0d73d5 100644 --- a/EarlyBlue/global/tree.css +++ b/EarlyBlue/global/tree.css @@ -361,6 +361,17 @@ treechildren::-moz-tree-cell-text(selected, editing) { color: inherit; } +treechildren::-moz-tree-cell(active, selected, focus, editing), +tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing), +tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) { + background-color: transparent; + border: none; +} + +treechildren::-moz-tree-cell-text(active, selected, editing) { + opacity: 0; +} + .tree-input { border: 1px solid #336699; margin: 0; diff --git a/EarlyBlue/mozapps/extensions/newaddon.css b/EarlyBlue/mozapps/extensions/newaddon.css index 4276b537..703ccc54 100644 --- a/EarlyBlue/mozapps/extensions/newaddon.css +++ b/EarlyBlue/mozapps/extensions/newaddon.css @@ -90,7 +90,6 @@ #buttonDeck { margin-top: 25px; - -moz-box-pack: stretch; -moz-box-align: stretch; } diff --git a/EarlyBlue/mozapps/extensions/update.css b/EarlyBlue/mozapps/extensions/update.css index 557efddf..0bf6ec22 100644 --- a/EarlyBlue/mozapps/extensions/update.css +++ b/EarlyBlue/mozapps/extensions/update.css @@ -1,7 +1,3 @@ -#alert { - list-style-image: url("chrome://mozapps/skin/update/update.png"); -} - .throbber { list-style-image: url("chrome://global/skin/icons/loading.gif"); width: 16px; diff --git a/EarlyBlue/mozapps/plugins/contentPluginDisabled.png b/EarlyBlue/mozapps/plugins/contentPluginDisabled.png deleted file mode 100644 index e82a3e36..00000000 Binary files a/EarlyBlue/mozapps/plugins/contentPluginDisabled.png and /dev/null differ diff --git a/EarlyBlue/mozapps/plugins/contentPluginDownload.png b/EarlyBlue/mozapps/plugins/contentPluginDownload.png deleted file mode 100644 index e90a5f21..00000000 Binary files a/EarlyBlue/mozapps/plugins/contentPluginDownload.png and /dev/null differ diff --git a/EarlyBlue/mozapps/plugins/contentPluginMissing.png b/EarlyBlue/mozapps/plugins/contentPluginMissing.png deleted file mode 100644 index 712eda03..00000000 Binary files a/EarlyBlue/mozapps/plugins/contentPluginMissing.png and /dev/null differ diff --git a/EarlyBlue/mozapps/plugins/pluginProblem.css b/EarlyBlue/mozapps/plugins/pluginProblem.css index 7e5a71d5..b1a680f9 100644 --- a/EarlyBlue/mozapps/plugins/pluginProblem.css +++ b/EarlyBlue/mozapps/plugins/pluginProblem.css @@ -62,13 +62,6 @@ html|a { margin-bottom: 6px; } -:-moz-type-unsupported .icon, -:-moz-type-unsupported-platform .icon { - background-image: url("chrome://mozapps/skin/plugins/contentPluginMissing.png"); -} -:-moz-type-unsupported .icon[installable] { - background-image: url("chrome://mozapps/skin/plugins/contentPluginDownload.png"); -} :-moz-handler-vulnerable-updatable .icon, :-moz-handler-vulnerable-no-update .icon { background-image: url("chrome://mozapps/skin/plugins/contentPluginBlocked.png"); @@ -81,9 +74,6 @@ html|a { background-image: url("chrome://mozapps/skin/plugins/contentPluginActivate.png"); -moz-user-focus: normal; } -:-moz-handler-disabled .icon { - background-image: url("chrome://mozapps/skin/plugins/contentPluginDisabled.png"); -} :-moz-handler-crashed .icon { background-image: url("chrome://mozapps/skin/plugins/contentPluginCrashed.png"); } @@ -100,13 +90,15 @@ html|a { } @media not all and (-moz-touch-enabled) { - :-moz-handler-clicktoplay .msgTapToPlay { + :-moz-handler-clicktoplay .msgTapToPlay, + a .msgTapToPlay { display: none; } } @media (-moz-touch-enabled) { - :-moz-handler-clicktoplay .msgClickToPlay { + :-moz-handler-clicktoplay .msgClickToPlay, + a .msgTapToPlay { display: none; } } diff --git a/EarlyBlue/mozapps/update/update.png b/EarlyBlue/mozapps/update/update.png deleted file mode 100644 index b46114a3..00000000 Binary files a/EarlyBlue/mozapps/update/update.png and /dev/null differ diff --git a/EarlyBlue/mozapps/update/updates.css b/EarlyBlue/mozapps/update/updates.css index 114c46c5..d76aa56a 100644 --- a/EarlyBlue/mozapps/update/updates.css +++ b/EarlyBlue/mozapps/update/updates.css @@ -106,7 +106,7 @@ wizardpage { #verificationFailedIcon { margin-inline-start: 5px; - list-style-image: url("chrome://global/skin/icons/notfound.png"); + list-style-image: url("chrome://global/skin/icons/information-16.png"); } /* Error Page */ diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index dbee9673..678b5b67 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -5320,7 +5320,7 @@ notification.heartbeat { #UITourTooltipButtons { /** - * Override the --panel-arrowcontent-padding so the background extends + * Override the --arrowpanel-padding so the background extends * to the sides and bottom of the panel. */ margin-left: -10px; diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css index 252bbfd4..2f091404 100644 --- a/LCARStrek/browser/controlcenter/panel.css +++ b/LCARStrek/browser/controlcenter/panel.css @@ -82,7 +82,7 @@ } #identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { - background: var(--panel-arrowcontent-background); + background: var(--arrowpanel-background); padding: 0; } diff --git a/LCARStrek/browser/customizableui/panelUI.css b/LCARStrek/browser/customizableui/panelUI.css index 20d412dd..94fe0847 100644 --- a/LCARStrek/browser/customizableui/panelUI.css +++ b/LCARStrek/browser/customizableui/panelUI.css @@ -1610,7 +1610,7 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { /* === END panelUI.inc.css === */ .panel-subviews { - background-color: var(--panel-arrowcontent-background); + background-color: var(--arrowpanel-background); } #PanelUI-contents #zoom-out-btn { @@ -1634,8 +1634,8 @@ menuitem[checked="true"].subviewbutton > .menu-iconic-left { #BMB_bookmarksPopup menupopup[placespopup=true] > hbox { /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */ /* box-shadow: 0 0 4px rgba(0,0,0,0.2); - background: var(--panel-arrowcontent-background); - border: 1px solid var(--panel-arrowcontent-border-color); + background: var(--arrowpanel-background); + border: 1px solid var(--arrowpanel-border-color); border-radius: 3.5px; margin-top: -4px;*/ } diff --git a/LCARStrek/global/aboutNetworking.css b/LCARStrek/global/aboutNetworking.css index fee91cc1..ad893d79 100644 --- a/LCARStrek/global/aboutNetworking.css +++ b/LCARStrek/global/aboutNetworking.css @@ -19,12 +19,12 @@ body { } #refreshDiv { - text-align: end; + justify-content: flex-end; margin-bottom: 0.5em; } #refreshButton { - vertical-align: middle; + margin-top: 0; } /** Categories **/ @@ -104,7 +104,6 @@ body { } .tab table { - border: 1; width: 100%; } diff --git a/LCARStrek/global/aboutReaderControls.css b/LCARStrek/global/aboutReaderControls.css index b2b2c19d..f70b0a06 100644 --- a/LCARStrek/global/aboutReaderControls.css +++ b/LCARStrek/global/aboutReaderControls.css @@ -82,6 +82,7 @@ background-color: #fbfbfb; -moz-user-select: none; border-right: 1px solid #b5b5b5; + z-index: 1; } .button { diff --git a/LCARStrek/global/datetimeinputpickers.css b/LCARStrek/global/datetimeinputpickers.css new file mode 100644 index 00000000..1cc6b0bf --- /dev/null +++ b/LCARStrek/global/datetimeinputpickers.css @@ -0,0 +1,352 @@ +/* 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 { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + --calendar-width: 23.1rem; + --date-picker-item-height: 2.4rem; + + --border: 0.1rem solid #9C9CFF; + --border-radius: 0.3rem; + --border-active-color: #FF9F00; + + --font-color: #FF9F00; + --fill-color: #000000; + + --selected-font-color: #000000; + --selected-fill-color: #008484; + + --button-font-color: #FF9F00; + --button-font-color-hover: #FFCF00; + --button-font-color-active: #FF9F00; + --button-fill-color-active: #000000; + + --weekday-font-color: #6C6C6C; + --weekday-outside-font-color: #6C6C6C; + --weekend-font-color: #DA4E44; + --weekend-outside-font-color: #FF988F; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font: message-box; + font-size: var(--font-size-default); +} + +button { + -moz-appearance: none; + background: none; + border: none; +} + +.nav { + display: flex; + width: var(--calendar-width); + height: 2.4rem; + margin-bottom: 0.8rem; + justify-content: space-between; +} + +.nav > button { + width: 3rem; + height: var(--date-picker-item-height); + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +.nav > button:hover { + fill: var(--button-font-color-hover); +} + +.nav > button.active { + fill: var(--button-font-color-active); +} + +.nav > button.left { + background: url("chrome://global/skin/icons/calendar-arrows.svg#left") no-repeat 50% 50%; +} + +.nav > button.right { + background: url("chrome://global/skin/icons/calendar-arrows.svg#right") no-repeat 50% 50%; +} + +.month-year-container { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + top: 0; + left: 3rem; + width: 17.1rem; + height: var(--date-picker-item-height); + z-index: 10; +} + +button.month-year { + font-size: 1.3rem; + border: var(--border); + border-radius: 0.3rem; + padding: 0.2rem 2.6rem 0.2rem 1.2rem; +} + +button.month-year:hover { + background: var(--fill-color); +} + +button.month-year.active { + border-color: var(--border-active-color); + background: var(--button-fill-color-active); +} + +button.month-year::after { + position: absolute; + content: ""; + width: 2.6rem; + height: 1.6rem; + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +button.month-year.active::after { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.month-year-view { + position: absolute; + z-index: 5; + padding-top: 3.2rem; + top: 0; + left: 0; + bottom: 0; + width: var(--calendar-width); + background: window; + opacity: 1; + transition: opacity 0.15s; +} + +.month-year-view.hidden { + visibility: hidden; + opacity: 0; +} + +.month-year-view > .spinner-container { + width: 5.5rem; + margin: 0 0.5rem; +} + +.month-year-view .spinner { + transform: scaleY(1); + transform-origin: top; + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner { + transform: scaleY(0); + transition: none; +} + +.month-year-view .spinner > div { + transform: scaleY(1); + transition: transform 0.15s; +} + +.month-year-view.hidden .spinner > div { + transform: scaleY(2.5); + transition: none; +} + +.order-month-year > #spinner-month, +.order-year-month > #spinner-year { + order: 1; +} + +.order-month-year > #spinner-year, +.order-year-month > #spinner-month { + order: 2; +} + +.calendar-container { + cursor: default; + display: flex; + flex-direction: column; + width: var(--calendar-width); +} + +.week-header { + display: flex; +} + +.week-header > div { + color: var(--weekday-font-color); +} + +.week-header > div.weekend { + color: var(--weekend-font-color); +} + +.days-viewport { + height: 15rem; + overflow: hidden; + position: relative; +} + +.days-view { + position: absolute; + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.week-header > div, +.days-view > div { + align-items: center; + display: flex; + height: var(--date-picker-item-height); + margin: 0.05rem 0.15rem; + position: relative; + justify-content: center; + width: 3rem; +} + +.days-view > div.outside { + color: var(--weekday-outside-font-color); +} + +.days-view > div.weekend { + color: var(--weekend-font-color); +} + +.days-view > div.weekend.outside { + color: var(--weekend-outside-font-color); +} + +#time-picker, +.month-year-view { + display: flex; + flex-direction: row; + justify-content: center; +} + +.spinner-container { + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + height: var(--spinner-button-height); + filter: url("chrome://global/skin/filters.svg#fill"); + fill: var(--button-font-color); +} + +.spinner-container > button:hover { + fill: var(--button-font-color-hover); +} + +.spinner-container > button.active { + fill: var(--button-font-color-active); +} + +.spinner-container > button.up { + background: url("chrome://global/skin/icons/spinner-arrows.svg#up") no-repeat 50% 50%; +} + +.spinner-container > button.down { + background: url("chrome://global/skin/icons/spinner-arrows.svg#down") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div:hover::before, +.calendar-container .days-view > div:hover::before { + background: var(--fill-color); + border: var(--border); + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection, +.calendar-container .days-view > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before, +.calendar-container .days-view > div.selection::before { + background: var(--selected-fill-color); + border: none; + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/LCARStrek/global/datetimepopup.css b/LCARStrek/global/datetimepopup.css new file mode 100644 index 00000000..52f6fc7a --- /dev/null +++ b/LCARStrek/global/datetimepopup.css @@ -0,0 +1,11 @@ +/* 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/. */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +panel[type="arrow"][side="top"], +panel[type="arrow"][side="bottom"] { + margin-left: 0; + margin-right: 0; +} diff --git a/LCARStrek/global/global.css b/LCARStrek/global/global.css index 53cf677c..371f540c 100644 --- a/LCARStrek/global/global.css +++ b/LCARStrek/global/global.css @@ -53,10 +53,10 @@ toolbaritem > menubar { /* ::::: Variables ::::: */ :root { - --panel-arrowcontent-padding: 6px; - --panel-arrowcontent-background: #000000; - --panel-arrowcontent-color: #FF9F00; - --panel-arrowcontent-border-color: #FF9F00; + --arrowpanel-padding: 6px; + --arrowpanel-background: #000000; + --arrowpanel-color: #FF9F00; + --arrowpanel-border-color: #FF9F00; } /* ::::: root elements ::::: */ diff --git a/LCARStrek/global/icons/input-clear.svg b/LCARStrek/global/icons/input-clear.svg new file mode 100644 index 00000000..59999207 --- /dev/null +++ b/LCARStrek/global/icons/input-clear.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/LCARStrek/global/icons/notfound.png b/LCARStrek/global/icons/notfound.png deleted file mode 100644 index 2c8189a0..00000000 Binary files a/LCARStrek/global/icons/notfound.png and /dev/null differ diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index be9fa280..4d39c5ad 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -99,6 +99,11 @@ html|hr { xul|caption { } +html|h2, +xul|caption > xul|checkbox, +xul|caption > xul|label { +} + xul|caption > xul|checkbox, xul|caption > xul|label { margin-top: 0; @@ -606,7 +611,12 @@ xul|*.checkbox-label-box { xul|richlistitem > xul|*.checkbox-check { margin: 3px 6px; } - +*/ +html|*.toggle-container-with-text { + display: flex; + align-items: center; +} +/* xul|radio { margin-inline-start: 0; } diff --git a/LCARStrek/global/menu.css b/LCARStrek/global/menu.css index 71d7a90d..aa39f261 100644 --- a/LCARStrek/global/menu.css +++ b/LCARStrek/global/menu.css @@ -243,10 +243,3 @@ menulist > menupopup > menuseparator { .autocomplete-history-popup > menuitem { max-width: none !important; } - -/* ::::: tree column picker ::::: */ - -.treecell-popupcell-menu { - margin-inline-start: -2px; - list-style-image: url("chrome://global/skin/tree/columnpicker.gif"); -} diff --git a/LCARStrek/global/narrate.css b/LCARStrek/global/narrate.css index 3aa8a8a6..8a44e78e 100644 --- a/LCARStrek/global/narrate.css +++ b/LCARStrek/global/narrate.css @@ -1,3 +1,8 @@ +.narrating { + position: relative; + z-index: 1; +} + body.light .narrating { background-color: #ffc; } @@ -9,3 +14,33 @@ body.sepia .narrating { body.dark .narrating { background-color: #242424; } + +.narrate-word-highlight { + position: absolute; + display: none; + transform: translate(-50%, calc(-50% - 2px)); + z-index: -1; + border-bottom-style: solid; + border-bottom-width: 7px; + transition: left 0.1s ease; +} + +.narrating > .narrate-word-highlight { + display: inline-block; +} + +.narrate-word-highlight.newline { + transition: none; +} + +body.light .narrate-word-highlight { + border-bottom-color: #ffe087; +} + +body.sepia .narrate-word-highlight { + border-bottom-color: #bdb5a5; +} + +body.dark .narrate-word-highlight { + border-bottom-color: #6f6f6f; +} diff --git a/LCARStrek/global/popup.css b/LCARStrek/global/popup.css index d2188344..07c78226 100644 --- a/LCARStrek/global/popup.css +++ b/LCARStrek/global/popup.css @@ -45,11 +45,11 @@ panel[type="arrow"][side="right"] { .panel-arrowcontent { border-radius: 6px; - padding: var(--panel-arrowcontent-padding); - color: var(--panel-arrowcontent-color); - background: var(--panel-arrowcontent-background); + padding: var(--arrowpanel-padding); + color: var(--arrowpanel-color); + background: var(--arrowpanel-background); background-clip: padding-box; - border: 1px solid var(--panel-arrowcontent-border-color); + border: 1px solid var(--arrowpanel-border-color); margin: 0px; } diff --git a/LCARStrek/global/timepicker.css b/LCARStrek/global/timepicker.css new file mode 100644 index 00000000..37fd3f85 --- /dev/null +++ b/LCARStrek/global/timepicker.css @@ -0,0 +1,153 @@ +/* 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 { + --font-size-default: 1.1rem; + --spinner-width: 3rem; + --spinner-margin-top-bottom: 0.4rem; + --spinner-item-height: 2.4rem; + --spinner-item-margin-bottom: 0.1rem; + --spinner-button-height: 1.2rem; + --colon-width: 2rem; + --day-period-spacing-width: 1rem; + + --border: 0.1rem solid #9C9CFF; + --border-radius: 0.3rem; + + --font-color: #FF9F00; + --fill-color: #000000; + + --selected-font-color: #000000; + --selected-fill-color: #008484; + + --button-font-color: #FF9F00; + --button-font-color-hover: #FFCF00; + --button-font-color-active: #FF9F00; + + --disabled-opacity: 0.2; +} + +html { + font-size: 10px; +} + +body { + margin: 0; + color: var(--font-color); + font-size: var(--font-size-default); +} + +#time-picker { + display: flex; + flex-direction: row; + justify-content: space-around; +} + +.spinner-container { + font-family: sans-serif; + display: flex; + flex-direction: column; + width: var(--spinner-width); +} + +.spinner-container > button { + -moz-appearance: none; + border: none; + background: none; + background-color: var(--button-font-color); + height: var(--spinner-button-height); +} + +.spinner-container > button:hover { + background-color: var(--button-font-color-hover); +} + +.spinner-container > button.active { + background-color: var(--button-font-color-active); +} + +.spinner-container > button.up { + mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%; +} + +.spinner-container > button.down { + mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%; +} + +.spinner-container.hide-buttons > button { + visibility: hidden; +} + +.spinner-container > .spinner { + position: relative; + width: 100%; + margin: var(--spinner-margin-top-bottom) 0; + cursor: default; + overflow-y: scroll; + scroll-snap-type: mandatory; + scroll-snap-points-y: repeat(100%); +} + +.spinner-container > .spinner > div { + box-sizing: border-box; + position: relative; + text-align: center; + padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0; + margin-bottom: var(--spinner-item-margin-bottom); + height: var(--spinner-item-height); + -moz-user-select: none; + scroll-snap-coordinate: 0 0; +} + +.spinner-container > .spinner > div:hover::before { + background: var(--fill-color); + border: var(--border); + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner:not(.scrolling) > div.selection { + color: var(--selected-font-color); +} + +.spinner-container > .spinner > div.selection::before { + background: var(--selected-fill-color); + border: none; + border-radius: var(--border-radius); + content: ""; + position: absolute; + top: 0%; + bottom: 0%; + left: 0%; + right: 0%; + z-index: -10; +} + +.spinner-container > .spinner > div.disabled::before, +.spinner-container > .spinner.scrolling > div.selection::before, +.spinner-container > .spinner.scrolling > div:hover::before { + display: none; +} + +.spinner-container > .spinner > div.disabled { + opacity: var(--disabled-opacity); +} + +.colon { + display: flex; + justify-content: center; + align-items: center; + width: var(--colon-width); + margin-bottom: 0.3rem; +} + +.spacer { + width: var(--day-period-spacing-width); +} diff --git a/LCARStrek/global/tree.css b/LCARStrek/global/tree.css index 35351d10..76b61de9 100644 --- a/LCARStrek/global/tree.css +++ b/LCARStrek/global/tree.css @@ -392,6 +392,17 @@ treechildren::-moz-tree-cell-text(selected, editing) { color: inherit; } +treechildren::-moz-tree-cell(active, selected, focus, editing), +tree[seltype="cell"] > treechildren::-moz-tree-cell(active, selected, focus, editing), +tree[seltype="text"] > treechildren::-moz-tree-cell(active, selected, focus, editing) { + background-color: transparent; + border: none; +} + +treechildren::-moz-tree-cell-text(active, selected, editing) { + opacity: 0; +} + .tree-input { border: 1px solid #9C9CFF; margin: 0; diff --git a/LCARStrek/mozapps/extensions/newaddon.css b/LCARStrek/mozapps/extensions/newaddon.css index e0363edc..89715592 100644 --- a/LCARStrek/mozapps/extensions/newaddon.css +++ b/LCARStrek/mozapps/extensions/newaddon.css @@ -90,7 +90,6 @@ #buttonDeck { margin-top: 25px; - -moz-box-pack: stretch; -moz-box-align: stretch; } diff --git a/LCARStrek/mozapps/extensions/update.css b/LCARStrek/mozapps/extensions/update.css index 4da9e439..8488da80 100644 --- a/LCARStrek/mozapps/extensions/update.css +++ b/LCARStrek/mozapps/extensions/update.css @@ -1,7 +1,3 @@ -#alert { - list-style-image: url("chrome://mozapps/skin/update/update.png"); -} - .throbber { list-style-image: url("chrome://global/skin/icons/loading.png"); width: 16px; diff --git a/LCARStrek/mozapps/places/defaultFavicon-inverted@2x.png b/LCARStrek/mozapps/places/defaultFavicon-inverted@2x.png index a556b569..1c207ecc 100644 Binary files a/LCARStrek/mozapps/places/defaultFavicon-inverted@2x.png and b/LCARStrek/mozapps/places/defaultFavicon-inverted@2x.png differ diff --git a/LCARStrek/mozapps/places/defaultFavicon@2x.png b/LCARStrek/mozapps/places/defaultFavicon@2x.png index 838479f8..74673460 100644 Binary files a/LCARStrek/mozapps/places/defaultFavicon@2x.png and b/LCARStrek/mozapps/places/defaultFavicon@2x.png differ diff --git a/LCARStrek/mozapps/plugins/contentPluginDisabled.png b/LCARStrek/mozapps/plugins/contentPluginDisabled.png deleted file mode 100644 index bf86c018..00000000 Binary files a/LCARStrek/mozapps/plugins/contentPluginDisabled.png and /dev/null differ diff --git a/LCARStrek/mozapps/plugins/contentPluginDownload.png b/LCARStrek/mozapps/plugins/contentPluginDownload.png deleted file mode 100644 index 8c1c5c5d..00000000 Binary files a/LCARStrek/mozapps/plugins/contentPluginDownload.png and /dev/null differ diff --git a/LCARStrek/mozapps/plugins/contentPluginMissing.png b/LCARStrek/mozapps/plugins/contentPluginMissing.png deleted file mode 100644 index 03fd3a31..00000000 Binary files a/LCARStrek/mozapps/plugins/contentPluginMissing.png and /dev/null differ diff --git a/LCARStrek/mozapps/plugins/pluginProblem.css b/LCARStrek/mozapps/plugins/pluginProblem.css index 059395cf..400e9178 100644 --- a/LCARStrek/mozapps/plugins/pluginProblem.css +++ b/LCARStrek/mozapps/plugins/pluginProblem.css @@ -61,13 +61,6 @@ html|a { margin-bottom: 6px; } -:-moz-type-unsupported .icon, -:-moz-type-unsupported-platform .icon { - background-image: url("chrome://mozapps/skin/plugins/contentPluginMissing.png"); -} -:-moz-type-unsupported .icon[installable] { - background-image: url("chrome://mozapps/skin/plugins/contentPluginDownload.png"); -} :-moz-handler-clicktoplay .icon, :-moz-handler-vulnerable-updatable .icon, :-moz-handler-vulnerable-no-update .icon { @@ -81,9 +74,6 @@ html|a { background-image: url("chrome://mozapps/skin/plugins/contentPluginActivate.png"); -moz-user-focus: normal; } -:-moz-handler-disabled .icon { - background-image: url("chrome://mozapps/skin/plugins/contentPluginDisabled.png"); -} :-moz-handler-crashed .icon { background-image: url("chrome://mozapps/skin/plugins/contentPluginCrashed.png"); } @@ -100,13 +90,15 @@ html|a { } @media not all and (-moz-touch-enabled) { - :-moz-handler-clicktoplay .msgTapToPlay { + :-moz-handler-clicktoplay .msgTapToPlay, + a .msgTapToPlay { display: none; } } @media (-moz-touch-enabled) { - :-moz-handler-clicktoplay .msgClickToPlay { + :-moz-handler-clicktoplay .msgClickToPlay, + a .msgTapToPlay { display: none; } } diff --git a/LCARStrek/mozapps/update/update.png b/LCARStrek/mozapps/update/update.png deleted file mode 100644 index 0170499b..00000000 Binary files a/LCARStrek/mozapps/update/update.png and /dev/null differ diff --git a/LCARStrek/mozapps/update/updates.css b/LCARStrek/mozapps/update/updates.css index 88c95010..08258f56 100644 --- a/LCARStrek/mozapps/update/updates.css +++ b/LCARStrek/mozapps/update/updates.css @@ -106,7 +106,7 @@ wizardpage { #verificationFailedIcon { margin-inline-start: 5px; - list-style-image: url("chrome://global/skin/icons/notfound.png"); + list-style-image: url("chrome://global/skin/icons/information-16.png"); } /* Error Page */