From d471380e99d65fcd126e0f04b94c1d3a8004cf3d Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Mon, 25 Jan 2016 04:05:55 +0100 Subject: [PATCH] sync both themes with toolkit windows theme changes in Mozilla 42-44 cycles --- EarlyBlue/global/alerts/alert-common.css | 138 ++++++++++++++++++++ EarlyBlue/global/alerts/alert.css | 69 +--------- EarlyBlue/global/autocomplete.css | 3 +- EarlyBlue/global/findBar.css | 5 + EarlyBlue/global/in-content/common.css | 46 ++++--- EarlyBlue/global/listbox.css | 19 ++- EarlyBlue/global/toolbarbutton.css | 31 +---- EarlyBlue/mozapps/extensions/extensions.css | 2 +- EarlyBlue/mozapps/extensions/utilities.svg | 8 ++ LCARStrek/global/alerts/alert-common.css | 138 ++++++++++++++++++++ LCARStrek/global/alerts/alert.css | 68 +--------- LCARStrek/global/autocomplete.css | 1 + LCARStrek/global/findBar.css | 5 + LCARStrek/global/in-content/common.css | 42 ++++-- LCARStrek/global/inContentUI.css | 45 ------- LCARStrek/global/listbox.css | 19 ++- LCARStrek/global/toolbarbutton.css | 31 +---- LCARStrek/mozapps/extensions/extensions.css | 3 +- LCARStrek/mozapps/extensions/utilities.svg | 8 ++ 19 files changed, 416 insertions(+), 265 deletions(-) create mode 100644 EarlyBlue/global/alerts/alert-common.css create mode 100644 LCARStrek/global/alerts/alert-common.css delete mode 100644 LCARStrek/global/inContentUI.css diff --git a/EarlyBlue/global/alerts/alert-common.css b/EarlyBlue/global/alerts/alert-common.css new file mode 100644 index 00000000..546534a4 --- /dev/null +++ b/EarlyBlue/global/alerts/alert-common.css @@ -0,0 +1,138 @@ +/* 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/. */ + +/* ===== alert.css ===================================================== + == Shared styles specific to the alerts dialog. + ======================================================================= */ + +@import url("chrome://global/skin/"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#alertBox[animate] { + animation-timing-function: cubic-bezier(.12,1.23,.48,1.09); +} + +#alertBox[animate][clicked] { + animation-duration: .6s; + animation-name: alert-zoom-animation; +} + +/* This is used if the close button is clicked + before the animation has finished. */ +#alertBox[animate][closing] { + animation-duration: .6s; + animation-name: alert-fadeout-animation; +} + +@keyframes alert-animation { + from { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-zoom-animation { + to { + opacity: 0; + } +} + +@keyframes alert-fadeout-animation { + to { + opacity: 0; + } +} + +#alertImage { + width: 80px; + height: 80px; + max-width: 80px; + max-height: 80px; + object-fit: scale-down; + margin: 0 7px 7px; +} + +.alertTextBox { + padding-top: 4px; + /* The text box width is increased to make up for the lack of image when one + is not provided. 349px is the text box width when a picture is present, + 255px, plus the width of the image, 80px, and the margins, 7px each. */ + width: 349px; +} + +#alertBox[hasImage] > box > #alertTextBox { + width: 255px; +} + +#alertBox:not([hasImage]) > box > #alertTextBox { + padding-inline-start: 8px; +} + +#alertTextLabel { + padding-inline-end: 8px; +} + +.alertTitle { + -moz-box-flex: 1; + font-weight: bold; + padding: 6px 8px 0; + width: 255px; +} + +#alertFooter { + -moz-box-align: start; +} + +#alertBox:not([hasOrigin]) > box > #alertTextBox, +#alertFooter { + padding-bottom: 5px; +} + +#alertSourceLabel { + -moz-box-flex: 1; + font-size: 83.334%; + color: #808080; +} + +#alertSettings { + border-radius: 0px; + min-width: 0; + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale"); + margin-inline-end: 0; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted"); +} + +#alertSettings:hover { +} + +#alertSettings[open], +#alertSettings:hover:active { +} + +#alertSettings[focusedViaMouse]:-moz-focusring > .button-box { + border-color: transparent; +} + +#alertSettings > .button-box > .button-menu-dropmarker, +#alertSettings > .button-box > .box-inherit > .button-text { + display: none; +} diff --git a/EarlyBlue/global/alerts/alert.css b/EarlyBlue/global/alerts/alert.css index e6d562c5..db14f791 100644 --- a/EarlyBlue/global/alerts/alert.css +++ b/EarlyBlue/global/alerts/alert.css @@ -6,76 +6,15 @@ == Styles specific to the alerts dialog. ======================================================================= */ -@import url("chrome://global/skin/"); +@import url("chrome://global/skin/alerts/alert-common.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -.alertBox { +#alertBox { border: 1px solid #666699; + border-radius: 1px; background-color: #CCD0DD; -} - -.alertImageBox { - padding: 8px 0; - width: 64px; - -moz-border-end: 1px solid #9999CC; -} - -.alertTextBox { - padding: 8px; - -moz-padding-start: 16px; - width: 255px; -} - -.alertTextBox, -.alertCloseBox { -} - -.alertBox[orient="horizontal"] > .alertImageBox { - -moz-margin-end: 8px; -} - -.alertBox[orient="vertical"] > .alertImageBox { - margin-bottom: 8px; -} - -#alertNotification[clickable="true"]:hover .alertTextBox, -#alertNotification[clickable="true"]:hover .alertCloseBox { -/* background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3)); */ -} - -.alertTitle { - font-weight: bold; - font-size: 110%; -} - -#alertImage { - max-width: 48px; - max-height: 48px; - list-style-image: url("chrome://global/skin/alerts/notification-48.png"); -} - -#alertNotification[clickable="true"] { - cursor: pointer; -} - -label { - cursor: inherit; -} - -@keyframes alert-animation { - from { - opacity: 0; - } - 6.25% { - opacity: 1; - } - 93.75% { - opacity: 1; - } - to { - opacity: 0; - } + color: #000000; } .alertCloseButton { diff --git a/EarlyBlue/global/autocomplete.css b/EarlyBlue/global/autocomplete.css index 6bd01046..4ca30ee0 100644 --- a/EarlyBlue/global/autocomplete.css +++ b/EarlyBlue/global/autocomplete.css @@ -58,7 +58,8 @@ panel[type="autocomplete"], panel[type="autocomplete-richlistbox"], .autocomplete-history-popup { border: 1px solid #9999CC; - background-color: white; + background-color: #FFFFFF; + color: #000000; padding: 0; } diff --git a/EarlyBlue/global/findBar.css b/EarlyBlue/global/findBar.css index 6eee4230..5b5d48f0 100644 --- a/EarlyBlue/global/findBar.css +++ b/EarlyBlue/global/findBar.css @@ -22,6 +22,11 @@ findbar[hidden] { transition-delay: 0s, 0s, 150ms; } +findbar[noanim] { + transition-duration: 0s !important; + transition-delay: 0s !important; +} + findbar[position="top"][hidden] { margin-bottom: auto; margin-top: -1em; diff --git a/EarlyBlue/global/in-content/common.css b/EarlyBlue/global/in-content/common.css index 4c3a2e27..5bdb0b77 100644 --- a/EarlyBlue/global/in-content/common.css +++ b/EarlyBlue/global/in-content/common.css @@ -45,7 +45,7 @@ --in-content-disabled-text: #999999; } -html|body, +html|html, xul|page, xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; @@ -145,6 +145,8 @@ xul|tab { color: var(--in-content-tab-color); background-color: var(--in-content-page-background); border-width: 0; + / !important overrides tabbox.css RTL and visuallyselected rules / + border-radius: 0 !important; transition: background-color 50ms ease 0s; } @@ -180,7 +182,7 @@ html|button { xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; - height: 30px; + min-height: 30px; color: var(--in-content-text-color); border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; @@ -294,6 +296,7 @@ xul|*.help-button > xul|*.button-box > xul|*.button-text { } xul|*.spinbuttons-button { + min-height: initial; -moz-margin-start: 10px !important; -moz-margin-end: 2px !important; } @@ -404,13 +407,11 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { */ /* textboxes */ /* -*|textbox { +html|input[type="text"], +html|textarea, +xul|textbox { -moz-appearance: none; - height: 30px; color: var(--in-content-text-color); - line-height: 20px; - padding-right: 10px; - padding-left: 10px; border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; -moz-border-right-colors: none !important; @@ -420,12 +421,27 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { background-color: var(--in-content-box-background); } -html|textbox:focus, +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +html|input[type="text"], +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 10px; +} + +html|input[type="text"]:focus, +html|textarea:focus, xul|textbox[focused] { border-color: var(--in-content-border-focus); } -html|textbox:disabled, +html|input[type="text"]:disabled, +html|textarea:disabled, xul|textbox[disabled="true"] { opacity: 0.5; } @@ -461,7 +477,7 @@ html|a:hover:active, /* / Hide the actual checkbox / html|input[type="checkbox"] { - opacity: 0; + visibility: hidden; position: absolute; } @@ -561,7 +577,7 @@ xul|*.radio-label-box { */ /* Category List */ -xul|*#categories { +*|*#categories { -moz-appearance: none; background-color: var(--in-content-category-background); padding-top: 39px; @@ -569,7 +585,7 @@ xul|*#categories { border-width: 0; } -xul|*.category { +*|*.category { -moz-appearance: none; color: var(--in-content-category-text); -moz-border-end-width: 0; @@ -579,18 +595,18 @@ xul|*.category { transition: background-color 150ms; } -xul|*.category:hover { +*|*.category:hover { background-color: var(--in-content-category-background-hover); } -xul|*.category[selected] { +*|*.category[selected] { background-color: var(--in-content-category-background-active); color: var(--in-content-category-text-selected); -moz-padding-start: 11px; /* compensate the 4px border */ -moz-border-start: solid 4px var(--in-content-border-highlight); } -xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { +*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { border-top: var(--in-content-category-border-focus); border-bottom: var(--in-content-category-border-focus); } diff --git a/EarlyBlue/global/listbox.css b/EarlyBlue/global/listbox.css index 4b801dde..d0d1e9f8 100644 --- a/EarlyBlue/global/listbox.css +++ b/EarlyBlue/global/listbox.css @@ -26,24 +26,31 @@ listbox[disabled="true"] { listitem { border: 1px solid transparent; + + --listitem-selectedColor: #FFFFFF; + --listitem-selectedBackground: #808080; + --listitem-selectedFocusColor: var(--listitem-selectedColor); + --listitem-selectedFocusBackground: #336699; + --listitem-focusCurrentBorder: #6666CC; + --listitem-selectedFocusCurrentBorder: #666699; } listbox:-moz-focusring > listitem[current="true"] { - border: 1px dotted #9999CC; + border: 1px dotted var(--listitem-focusCurrentBorder); } listbox:-moz-focusring > listitem[current="true"][selected="true"] { - border: 1px dotted #666699; + border: 1px dotted var(--listitem-selectedFocusCurrentBorder); } listitem[selected="true"] { - background-color: #808080; - color: #FFFFFF; + background-color: var(--listitem-selectedBackground); + color: var(--listitem-selectedColor); } listbox:focus > listitem[selected="true"] { - background-color: #336699; - color: #FFFFFF; + background-color: var(--listitem-selectedFocusBackground); + color: var(--listitem-selectedFocusColor); } /* ::::: listheader ::::: */ diff --git a/EarlyBlue/global/toolbarbutton.css b/EarlyBlue/global/toolbarbutton.css index 84c21f42..6e61c071 100644 --- a/EarlyBlue/global/toolbarbutton.css +++ b/EarlyBlue/global/toolbarbutton.css @@ -151,44 +151,27 @@ toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubu /* ::::: toolbarbutton badged ::::: */ -.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) { +.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { -moz-margin-end: 0; } -.toolbarbutton-badge[badge=""] { - display: none; -} - .toolbarbutton-badge { background-color: #CCD0DD; -} - -.toolbarbutton-badge::after { - /* The |content| property is set in the content stylesheet. */ font-size: 10px; font-weight: bold; - padding: 1px 2px 2px; + padding: 0 2px 1px; color: #000000; - background-color: inherit; border-radius: 2px; box-shadow: 0 1px 0 #9999CC inset, 0 -1px 0 #9999CC inset, 0 1px 0 #9999CC; - position: absolute; - top: -4px; - right: -2px; - min-width: 10px; + margin: -6px 0 0 !important; + -moz-margin-end: -8px !important; + min-width: 14px; + max-width: 28px; line-height: 10px; text-align: center; -} - -.toolbarbutton-badge:-moz-locale-dir(rtl)::after { - left: -2px; - right: auto; -} - -.toolbarbutton-badge-container { - position: relative; + -moz-stack-sizing: ignore; } /* .......... dropmarker .......... */ diff --git a/EarlyBlue/mozapps/extensions/extensions.css b/EarlyBlue/mozapps/extensions/extensions.css index bf975b93..36c7fb71 100644 --- a/EarlyBlue/mozapps/extensions/extensions.css +++ b/EarlyBlue/mozapps/extensions/extensions.css @@ -980,7 +980,7 @@ button.button-link { color: #0000FF; cursor: pointer; min-width: 0; - height: 20px; + min-height: 20px; margin: 0 6px; } diff --git a/EarlyBlue/mozapps/extensions/utilities.svg b/EarlyBlue/mozapps/extensions/utilities.svg index 9cac8680..1c517ea4 100644 --- a/EarlyBlue/mozapps/extensions/utilities.svg +++ b/EarlyBlue/mozapps/extensions/utilities.svg @@ -13,6 +13,12 @@ use[id$="-native"] { fill: GrayText; } + use[id$="-grayscale"] { + fill: #808080; + } + use[id$="-inverted"] { + fill: #000000; + } @@ -20,4 +26,6 @@ + + diff --git a/LCARStrek/global/alerts/alert-common.css b/LCARStrek/global/alerts/alert-common.css new file mode 100644 index 00000000..5bcdfcb8 --- /dev/null +++ b/LCARStrek/global/alerts/alert-common.css @@ -0,0 +1,138 @@ +/* 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/. */ + +/* ===== alert.css ===================================================== + == Shared styles specific to the alerts dialog. + ======================================================================= */ + +@import url("chrome://global/skin/"); + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +#alertBox[animate] { + animation-timing-function: cubic-bezier(.12,1.23,.48,1.09); +} + +#alertBox[animate][clicked] { + animation-duration: .6s; + animation-name: alert-zoom-animation; +} + +/* This is used if the close button is clicked + before the animation has finished. */ +#alertBox[animate][closing] { + animation-duration: .6s; + animation-name: alert-fadeout-animation; +} + +@keyframes alert-animation { + from { + opacity: 0; + } + 5% { + opacity: 1; + } + 95% { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes alert-zoom-animation { + to { + opacity: 0; + } +} + +@keyframes alert-fadeout-animation { + to { + opacity: 0; + } +} + +#alertImage { + width: 80px; + height: 80px; + max-width: 80px; + max-height: 80px; + object-fit: scale-down; + margin: 0 7px 7px; +} + +.alertTextBox { + padding-top: 4px; + /* The text box width is increased to make up for the lack of image when one + is not provided. 349px is the text box width when a picture is present, + 255px, plus the width of the image, 80px, and the margins, 7px each. */ + width: 349px; +} + +#alertBox[hasImage] > box > #alertTextBox { + width: 255px; +} + +#alertBox:not([hasImage]) > box > #alertTextBox { + padding-inline-start: 8px; +} + +#alertTextLabel { + padding-inline-end: 8px; +} + +.alertTitle { + -moz-box-flex: 1; + font-weight: bold; + padding: 6px 8px 0; + width: 255px; +} + +#alertFooter { + -moz-box-align: start; +} + +#alertBox:not([hasOrigin]) > box > #alertTextBox, +#alertFooter { + padding-bottom: 5px; +} + +#alertSourceLabel { + -moz-box-flex: 1; + font-size: 83.334%; + color: #A09090; +} + +#alertSettings { + border-radius: 20px; + min-width: 0; + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale"); + margin-inline-end: 0; + margin-bottom: 0; +} + +#alertSettings > .button-box { + padding: 0; +} + +#alertSettings:hover, +#alertSettings[open] { + list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted"); +} + +#alertSettings:hover { +} + +#alertSettings[open], +#alertSettings:hover:active { +} + +#alertSettings[focusedViaMouse]:-moz-focusring > .button-box { + border-color: transparent; +} + +#alertSettings > .button-box > .button-menu-dropmarker, +#alertSettings > .button-box > .box-inherit > .button-text { + display: none; +} diff --git a/LCARStrek/global/alerts/alert.css b/LCARStrek/global/alerts/alert.css index 876a6b12..01af1cde 100644 --- a/LCARStrek/global/alerts/alert.css +++ b/LCARStrek/global/alerts/alert.css @@ -6,77 +6,15 @@ == Styles specific to the alerts dialog. ======================================================================= */ -@import url("chrome://global/skin/"); +@import url("chrome://global/skin/alerts/alert-common.css"); @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -.alertBox { +#alertBox { border: 1px solid #9C9CFF; border-radius: 3px; background-color: #000000; -} - -.alertImageBox { - padding: 8px 0; - width: 64px; - -moz-border-end: 1px solid #9C9CFF; -} - -.alertTextBox { - padding: 8px; - -moz-padding-start: 16px; - width: 255px; -} - -.alertTextBox, -.alertCloseBox { -} - -.alertBox[orient="horizontal"] > .alertImageBox { - -moz-margin-end: 8px; -} - -.alertBox[orient="vertical"] > .alertImageBox { - margin-bottom: 8px; -} - -#alertNotification[clickable="true"]:hover .alertTextBox, -#alertNotification[clickable="true"]:hover .alertCloseBox { -/* background-image: linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.3));*/ -} - -.alertTitle { - font-weight: bold; - font-size: 110%; -} - -#alertImage { - max-width: 48px; - max-height: 48px; - list-style-image: url("chrome://global/skin/alerts/notification-48.png"); -} - -#alertNotification[clickable="true"] { - cursor: pointer; -} - -label { - cursor: inherit; -} - -@keyframes alert-animation { - from { - opacity: 0; - } - 6.25% { - opacity: 1; - } - 93.75% { - opacity: 1; - } - to { - opacity: 0; - } + color: #FF9F00; } .alertCloseButton { diff --git a/LCARStrek/global/autocomplete.css b/LCARStrek/global/autocomplete.css index 7096b319..a2ad582c 100644 --- a/LCARStrek/global/autocomplete.css +++ b/LCARStrek/global/autocomplete.css @@ -69,6 +69,7 @@ panel[type="autocomplete-richlistbox"], .autocomplete-history-popup { border: 1px solid #FF9F00; background-color: #000000; + color: #FF9F00; padding: 0; } diff --git a/LCARStrek/global/findBar.css b/LCARStrek/global/findBar.css index d7e963df..2912cc85 100644 --- a/LCARStrek/global/findBar.css +++ b/LCARStrek/global/findBar.css @@ -21,6 +21,11 @@ findbar[hidden] { transition-delay: 0s, 0s, 150ms; } +findbar[noanim] { + transition-duration: 0s !important; + transition-delay: 0s !important; +} + findbar[position="top"][hidden] { margin-bottom: auto; margin-top: -1em; diff --git a/LCARStrek/global/in-content/common.css b/LCARStrek/global/in-content/common.css index 9a2975f6..17aecf56 100644 --- a/LCARStrek/global/in-content/common.css +++ b/LCARStrek/global/in-content/common.css @@ -48,7 +48,7 @@ ---in-content-help-button-background-active: #eaba00; --in-content-disabled-text: #8050B0; } -html|body, +html|html, xul|page, xul|window { font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; @@ -148,6 +148,8 @@ xul|tab { color: var(--in-content-tab-color); background-color: var(--in-content-page-background); border-width: 0; + / !important overrides tabbox.css RTL and visuallyselected rules / + border-radius: 0 !important; transition: background-color 50ms ease 0s; } @@ -183,7 +185,7 @@ html|button { xul|colorpicker[type="button"], xul|menulist { -moz-appearance: none; - height: 30px; + min-height: 30px; color: var(--in-content-text-color); border: 1px solid var(--in-content-box-border-color); -moz-border-top-colors: none !important; @@ -301,6 +303,7 @@ xul|*.help-button > xul|*.button-box > xul|*.button-text { } /* xul|*.spinbuttons-button { + min-height: initial; -moz-margin-start: 10px !important; -moz-margin-end: 2px !important; } @@ -411,7 +414,9 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { */ /* textboxes */ /* -*|textbox { +html|input[type="text"], +html|textarea, +xul|textbox { -moz-appearance: none; height: 30px; color: var(--in-content-text-color); @@ -427,12 +432,27 @@ xul|button[type="menu"] > xul|menupopup xul|menuseparator { background-color: var(--in-content-box-background); } -html|textbox:focus, +xul|textbox { + min-height: 30px; + padding-right: 10px; + padding-left: 10px; +} + +html|input[type="text"], +html|textarea { + font-family: inherit; + font-size: inherit; + padding: 5px 10px; +} + +html|input[type="text"]:focus, +html|textarea:focus, xul|textbox[focused] { border-color: var(--in-content-border-focus); } -html|textbox:disabled, +html|input[type="text"]:disabled, +html|textarea:disabled, xul|textbox[disabled="true"] { opacity: 0.5; } @@ -467,7 +487,7 @@ html|a:hover:active, /* Checkboxes and radio buttons */ /* Hide the actual checkbox */ html|input[type="checkbox"] { - opacity: 0; + visibility: hidden; position: absolute; } @@ -576,7 +596,7 @@ xul|*.radio-label-box { */ /* Category List */ -xul|*#categories { +*|*#categories { background-color: var(--in-content-categorylist-background); padding-top: 4em; margin: 0; @@ -584,7 +604,7 @@ xul|*#categories { border: none; } -xul|*.category { +*|*.category { background-color: var(--in-content-category-background); color: var(--in-content-category-text); -moz-border-end-width: 0; @@ -594,17 +614,17 @@ xul|*.category { transition: background-color 150ms; } -xul|*.category:hover { +*|*.category:hover { background-color: var(--in-content-category-background-hover); color: var(--in-content-category-text-selected); } -xul|*.category[selected] { +*|*.category[selected] { background-color: var(--in-content-category-background-active); color: var(--in-content-category-text-selected); } -xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { +*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] { border-top: var(--in-content-category-border-focus); border-bottom: var(--in-content-category-border-focus); } diff --git a/LCARStrek/global/inContentUI.css b/LCARStrek/global/inContentUI.css deleted file mode 100644 index 0e5971d0..00000000 --- a/LCARStrek/global/inContentUI.css +++ /dev/null @@ -1,45 +0,0 @@ -/* 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/. */ - -/* THIS FILE HAS BEEN DELETED IN THE ORIGINAL THEME. - * We keep it only as long as some LCARStrek stuff still refers to it. */ - -/* - * The default namespace for this file is XUL. Be sure to prefix rules that - * are applicable to both XUL and HTML with '*|'. - */ -@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -@namespace html url("http://www.w3.org/1999/xhtml"); - -/* Page background */ -*|*:root { - background-color: #000000; - color: #FF9F00; - margin: 20px; -} - -html|html { - font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; -} - -/* Use the new in-content colors for #contentAreaDownloadsView. After landing - of bug 989469 the colors can be moved to *|*:root */ -*|*#contentAreaDownloadsView { - background: #000000; - color: #FF9F00; -} - -/* Content */ -*|*.main-content { - /* Needed to allow the radius to clip the inner content, see bug 595656 */ - overflow: hidden; - border: 1px solid #9C9CFF; - border-radius: 5px; -} - -colorpicker[type="button"] { - margin: 1px 5px 2px 5px; - padding: 3px; - height: 25px; -} diff --git a/LCARStrek/global/listbox.css b/LCARStrek/global/listbox.css index b8fe1d93..cbdf3133 100644 --- a/LCARStrek/global/listbox.css +++ b/LCARStrek/global/listbox.css @@ -28,24 +28,31 @@ listbox[disabled="true"] { listitem { border: 1px solid transparent; + + --listitem-selectedColor: #000000; + --listitem-selectedBackground: #008484; + --listitem-selectedFocusColor: #FFCF00; + --listitem-selectedFocusBackground: var(--listitem-selectedBackground); + --listitem-focusCurrentBorder: #FF9F00; + --listitem-selectedFocusCurrentBorder: var(--listitem-focusCurrentBorder); } listbox:-moz-focusring > listitem[current="true"] { - border: 1px dotted #FF9F00; + border: 1px dotted var(--listitem-focusCurrentBorder); } listbox:-moz-focusring > listitem[current="true"][selected="true"] { - border: 1px dotted #FF9F00; + border: 1px dotted var(--listitem-selectedFocusCurrentBorder); } listitem[selected="true"] { - background-color: #008484; - color: #000000; + background-color: var(--listitem-selectedBackground); + color: var(--listitem-selectedColor); } listbox:focus > listitem[selected="true"] { - background-color: #008484; - color: #FFCF00; + background-color: var(--listitem-selectedFocusBackground); + color: var(--listitem-selectedFocusColor); } /* ::::: listheader ::::: */ diff --git a/LCARStrek/global/toolbarbutton.css b/LCARStrek/global/toolbarbutton.css index 4b2caa16..32d41b20 100644 --- a/LCARStrek/global/toolbarbutton.css +++ b/LCARStrek/global/toolbarbutton.css @@ -177,44 +177,27 @@ toolbarbutton[disabled="true"]:hover:active > toolbarbutton.toolbarbutton-menubu /* ::::: toolbarbutton badged ::::: */ -.toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) { +.toolbarbutton-badge-stack > .toolbarbutton-icon[label]:not([label=""]) { -moz-margin-end: 0; } -.toolbarbutton-badge[badge=""] { - display: none; -} - .toolbarbutton-badge { background-color: #000000; -} - -.toolbarbutton-badge::after { - /* The |content| property is set in the content stylesheet. */ font-size: 10px; font-weight: bold; - padding: 1px 2px 2px; + padding: 0 2px 1px; color: #FF9F00; - background-color: inherit; border-radius: 2px; box-shadow: 0 1px 0 #9C9CFF inset, 0 -1px 0 #9C9CFF inset, 0 1px 0 #9C9CFF; - position: absolute; - top: -4px; - right: -2px; - min-width: 10px; + margin: -6px 0 0 !important; + -moz-margin-end: -8px !important; + min-width: 14px; + max-width: 28px; line-height: 10px; text-align: center; -} - -.toolbarbutton-badge:-moz-locale-dir(rtl)::after { - left: -2px; - right: auto; -} - -.toolbarbutton-badge-container { - position: relative; + -moz-stack-sizing: ignore; } /* .......... dropmarker .......... */ diff --git a/LCARStrek/mozapps/extensions/extensions.css b/LCARStrek/mozapps/extensions/extensions.css index 1253434a..2be2700d 100644 --- a/LCARStrek/mozapps/extensions/extensions.css +++ b/LCARStrek/mozapps/extensions/extensions.css @@ -767,14 +767,13 @@ #detail-screenshot-box { -moz-margin-end: 2em; - padding: 10px; -/* background-color: white;*/ } #detail-screenshot { max-width: 300px; max-height: 300px; +/* background-color: white;*/ } #detail-screenshot[loading] { diff --git a/LCARStrek/mozapps/extensions/utilities.svg b/LCARStrek/mozapps/extensions/utilities.svg index cc55099a..37c97e4a 100644 --- a/LCARStrek/mozapps/extensions/utilities.svg +++ b/LCARStrek/mozapps/extensions/utilities.svg @@ -16,6 +16,12 @@ use[id$="-native"] { fill: GrayText; } + use[id$="-grayscale"] { + fill: #A09090; + } + use[id$="-inverted"] { + fill: #000000; + } @@ -23,4 +29,6 @@ + + -- 2.43.0