From 07296beb54b9f42727fbce3473d76c6e3f7cf173 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Tue, 15 Aug 2017 19:07:56 +0200 Subject: [PATCH] third part of syncing LCARStrek with Firefox 55 browser windows theme changes --- LCARStrek/browser/aboutSyncTabs.css | 86 ------ LCARStrek/browser/browser.css | 274 +++++++++++++----- .../connection-mixed-active-loaded.svg | 38 +-- .../connection-mixed-passive-loaded.svg | 38 +-- LCARStrek/browser/controlcenter/extension.svg | 8 + LCARStrek/browser/controlcenter/panel.css | 12 +- LCARStrek/browser/identity-icon.svg | 39 +-- LCARStrek/browser/sync-16.png | Bin 245 -> 0 bytes LCARStrek/browser/sync-32.png | Bin 327 -> 0 bytes LCARStrek/browser/tracking-protection-16.svg | 36 +-- 10 files changed, 223 insertions(+), 308 deletions(-) delete mode 100644 LCARStrek/browser/aboutSyncTabs.css create mode 100644 LCARStrek/browser/controlcenter/extension.svg delete mode 100644 LCARStrek/browser/sync-16.png delete mode 100644 LCARStrek/browser/sync-32.png diff --git a/LCARStrek/browser/aboutSyncTabs.css b/LCARStrek/browser/aboutSyncTabs.css deleted file mode 100644 index 015f517b..00000000 --- a/LCARStrek/browser/aboutSyncTabs.css +++ /dev/null @@ -1,86 +0,0 @@ -#tabsList { - background: #000000; - width: 100%; -} - -#headers { - background: url("chrome://communicator/skin/sync/sync-32.png") no-repeat; - margin-top: 4px; - width: 45em; - height: 32px; - margin-inline-start: 2em; - margin-inline-end: 2em; -} - -#headers:-moz-locale-dir(rtl) { - background-position-x: 100%; -} - -#tabsListHeading { - font-size: 140%; - font-weight: bold; - margin-inline-start: 40px; -} - -richlistitem { - margin-inline-end: 2em; -} - -richlistitem[selected="true"], -richlistitem:focus { - outline-style: none; -} - -richlistitem[type="tab"] { - min-height: 3em; - border: #9C9CFF 1px solid !important; - padding: 2px 5px; - margin-bottom: 4px; - margin-inline-start: 4em; - border-radius: 6px; - background-color: #402800; - width: 44em; - opacity: 0.9; -} - -richlistitem[type="tab"][selected="true"] { - background-color: #008484; -} - -richlistitem[type="client"] { - min-height: 2em; - color: #FF9F00; - margin-inline-start: 2em; - margin-top: 2px; - margin-bottom: 3px; - width: 42em; - border-radius: 6px; - background-color: transparent; - -moz-user-focus: ignore !important; -} -richlistitem.mobile[type="client"] { - list-style-image: url("chrome://browser/skin/sync-mobileIcon.svg#icon"); -} -richlistitem.desktop[type="client"] { - list-style-image: url("chrome://browser/skin/sync-desktopIcon.svg#icon"); -} - -.title, -.clientName { - font-size: 1.1em; -} - -.title[selected="true"], -.url[selected="true"] { - color: inherit; -} - -.url { - color: #3333FF; - font-size: 0.95em; -} - -.tabIcon { - padding-inline-start: 2px; - padding-top: 2px; -} diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 376fa833..d475b646 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -1873,12 +1873,19 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */ -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] { border-bottom: 1px solid var(--panel-separator-color); - background-color: #000000; + padding-inline-start: 0; + padding-inline-end: 6px; + min-height: 3em; +} + +/* Opt-in notification */ + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-in"] { padding: 6px 0; padding-inline-start: 44px; - padding-inline-end: 6px; + background-color: #000000; background-image: url("chrome://browser/skin/info.svg"); background-clip: padding-box; background-position: 20px center; @@ -1886,20 +1893,20 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, background-size: 16px 16px; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { background-position: right 20px center; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description { margin: 0; padding: 0; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-notification"] > description > label.text-link { margin-inline-start: 0; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button { -moz-appearance: none; min-width: 80px; border-radius: 3px; @@ -1908,16 +1915,121 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, margin-inline-start: 10px; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"] { +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-disable"]:hover { +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"] { +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] button[anonid="search-suggestions-notification-enable"]:hover { +} + +/* Opt-out hint */ + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] > hbox[anonid="search-suggestions-opt-out"] { + font: message-box; +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description { + margin: auto; + padding: 4px 8px; + background-color: #000000; + border: 1px solid #FFCF00; + border-radius: 4px; + color: #A09090; +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span { + unicode-bidi: embed; +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] hbox[anonid="search-suggestions-hint-box"] > description > html|span.prefix { + font-weight: bold; +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] > hbox[anonid="search-suggestions-opt-out"] > .ac-site-icon { + transform: scale(0); + animation-name: search-suggestions-hint-grow; + animation-duration: 500ms; + animation-delay: 500ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; + animation-fill-mode: forwards; +} + +@keyframes search-suggestions-hint-grow { + 0% { transform: scale(0); } + 40% { transform: scale(1.5); } + 60% { transform: scale(1); } + 80% { transform: scale(1.25); } + 100% { transform: scale(1); } +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] > .ac-title-text { + text-overflow: clip; +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-typing"] { + overflow: hidden; + max-width: 8ch; + width: 0; + animation-name: search-suggestions-hint-typing; + animation-duration: 500ms; + animation-delay: 750ms; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +@keyframes search-suggestions-hint-typing { + from { width: 0; } + to { width: 8ch; } +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"] { + opacity: 0; + animation-duration: 250ms; + animation-delay: 1500ms; + animation-iteration-count: 1; + animation-fill-mode: forwards; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { +/* Margin-inline-start can't be animated yet */ +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(ltr) { + margin-left: 160px; + animation-name: search-suggestions-hint-buildin-ltr; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { +@keyframes search-suggestions-hint-buildin-ltr { + from { margin-left: 160px; opacity: 0; } + to { margin-left: 0; opacity: 1; } +} + +#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"][animate] hbox[anonid="search-suggestions-hint-box"]:-moz-locale-dir(rtl) { + /* Should be margin-inline-start but that can't be animated yet */ + margin-right: 160px; + animation-name: search-suggestions-hint-buildin-rtl; +} + +@keyframes search-suggestions-hint-buildin-rtl { + from { margin-right: 160px; opacity: 0; } + to { margin-right: 0; opacity: 1; } +} + +#search-suggestions-change-settings { + opacity: 0; + animation-name: search-suggestions-hint-fadein; + animation-duration: 500ms; + animation-delay: 1800ms; + animation-iteration-count: 1; + animation-fill-mode: forwards; } -#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { +@keyframes search-suggestions-hint-fadein { + from { opacity: 0 } + to { opacity: 1 } } /* === END urlbarSearchSuggestionsNotification.inc.css === */ @@ -1974,62 +2086,6 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, /* page proxy icon */ /* === BEGIN identity-block.inc.css === */ -/* === BEGIN identity-block/icons.inc.css === */ - -#identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); -} - -#identity-box:hover > #identity-icon:not(.no-hover), -#identity-box[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); -} - -#identity-box.grantedPermissions > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); -} - -#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), -#identity-box.grantedPermissions[open=true] > #identity-icon { - list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); -} - -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { - list-style-image: url(chrome://branding/content/identity-icons-brand.svg); -} - -#tracking-protection-icon { - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); -} - -#tracking-protection-icon[state="loaded-tracking-content"] { - list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); -} - - -#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { - list-style-image: url(chrome://browser/skin/connection-secure.svg); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { - list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); - visibility: visible; -} - -#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, -#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { - list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); - visibility: visible; -} - -/* === END identity-block/icons.inc.css === */ - #identity-box { font-size: .9em; border-radius: 2px; @@ -2098,11 +2154,47 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but padding-inline-start: 2.01px; } +#identity-icon, +#tracking-protection-icon, +#connection-icon, +#extension-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill; + fill: #A09090; +} + +#identity-icon:-moz-lwtheme, +#tracking-protection-icon:-moz-lwtheme, +#connection-icon:-moz-lwtheme, +#extension-icon:-moz-lwtheme { +/* fill: rgba(0,0,0,.6);*/ +} + /* MAIN IDENTITY ICON */ #identity-icon { width: 16px; height: 16px; + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); +} + +#identity-box:hover > #identity-icon:not(.no-hover), +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); +} + +#identity-box.grantedPermissions > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover), +#identity-box.grantedPermissions[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); } #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { @@ -2110,20 +2202,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { - -moz-image-region: inherit; list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg); - context-properties: fill; - fill: #FFCF00; - width: 16px; - width: 16px; - height: 16px; } #urlbar[actiontype="extension"] > #identity-box > #identity-icon { - -moz-image-region: inherit; list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg); - width: 16px; - height: 16px; } /* SHARING ICON */ @@ -2172,12 +2255,15 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but /* TRACKING PROTECTION ICON */ #tracking-protection-icon { - width: 16px; - height: 16px; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled); margin-inline-start: 2px; margin-inline-end: 0; } +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled); +} + #tracking-protection-icon[animate] { transition: margin-left 200ms ease-out, margin-right 200ms ease-out; } @@ -2190,19 +2276,47 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but transition: none; } +#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon, #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon { visibility: collapse; } -/* CONNECTION ICON */ +/* CONNECTION ICON, EXTENSION ICON */ -#connection-icon { +#connection-icon, +#extension-icon { width: 16px; height: 16px; margin-inline-start: 2px; visibility: collapse; } +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon); + visibility: visible; +} + +#identity-box.extensionPage > #extension-icon { + list-style-image: url(chrome://browser/skin/controlcenter/extension.svg); + visibility: visible; +} + /* REMOTE CONTROL ICON */ #main-window[remotecontrol] #remote-control-icon { diff --git a/LCARStrek/browser/connection-mixed-active-loaded.svg b/LCARStrek/browser/connection-mixed-active-loaded.svg index 1a2bd065..44969446 100644 --- a/LCARStrek/browser/connection-mixed-active-loaded.svg +++ b/LCARStrek/browser/connection-mixed-active-loaded.svg @@ -4,28 +4,6 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - @@ -53,18 +31,6 @@ - - - - - - - - - - - - - - + + diff --git a/LCARStrek/browser/connection-mixed-passive-loaded.svg b/LCARStrek/browser/connection-mixed-passive-loaded.svg index 0a0465d5..46bb4a7d 100644 --- a/LCARStrek/browser/connection-mixed-passive-loaded.svg +++ b/LCARStrek/browser/connection-mixed-passive-loaded.svg @@ -4,28 +4,6 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - @@ -51,18 +29,6 @@ - - - - - - - - - - - - - - + + diff --git a/LCARStrek/browser/controlcenter/extension.svg b/LCARStrek/browser/controlcenter/extension.svg new file mode 100644 index 00000000..5f152104 --- /dev/null +++ b/LCARStrek/browser/controlcenter/extension.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/LCARStrek/browser/controlcenter/panel.css b/LCARStrek/browser/controlcenter/panel.css index 09be6f36..67f1b454 100644 --- a/LCARStrek/browser/controlcenter/panel.css +++ b/LCARStrek/browser/controlcenter/panel.css @@ -16,6 +16,7 @@ #identity-popup[connection=secure] [when-connection~=secure], #identity-popup[connection=chrome] [when-connection~=chrome], #identity-popup[connection=file] [when-connection~=file], +#identity-popup[connection=extension] [when-connection~=extension], /* Show insecure login forms messages when needed. */ #identity-popup[loginforms=insecure] [when-loginforms=insecure], /* Show weak cipher messages when needed. */ @@ -254,7 +255,9 @@ #identity-popup[connection=secure-cert-user-overridden] #identity-popup-securityView, #identity-popup[connection=secure-cert-user-overridden] #identity-popup-security-content { - background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon); + background-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg); + -moz-context-properties: fill; + fill: #A09090; } #identity-popup[loginforms=insecure] #identity-popup-securityView, @@ -264,6 +267,13 @@ background-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); } +#identity-popup[connection=extension] #identity-popup-securityView, +#identity-popup[connection=extension] #identity-popup-security-content { + background-image: url(chrome://browser/skin/controlcenter/extension.svg); + -moz-context-properties: fill; + fill: #008484; +} + #identity-popup-security-descriptions > description { margin-top: 6px; color: #A09090; diff --git a/LCARStrek/browser/identity-icon.svg b/LCARStrek/browser/identity-icon.svg index 27220e50..b1f964d0 100755 --- a/LCARStrek/browser/identity-icon.svg +++ b/LCARStrek/browser/identity-icon.svg @@ -3,32 +3,11 @@ - 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/. --> - @@ -38,18 +17,8 @@ - - - - - - - - - - - - - - + + + + diff --git a/LCARStrek/browser/sync-16.png b/LCARStrek/browser/sync-16.png deleted file mode 100644 index dc6924a34faf03501c5a4fa0bcad938108266934..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 245 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!93?!50ihlx9jKx9jP7LeL$-D$|cmjMvT!Hle z^FV^(|9pn&iD&A7EXI-`zhDN3XE)M7oFs2|7lsa2Sq~tGv%n*=n1O*?7=#%aX3dcR z3bL1Y`ns~;W)c>bQNCt)CmJXe>gnPb!f`!0frmFSA>qWVlLrp$&^q1Nm>YSQg>7Z$ z8-IxO>_%)r1c48n{Iv*t(u z1=&kHeO=jaGYN}WYrf2zxD+U~+|$J|MB=jV1w+0=20W|*?u%wdat5t;>c6m*+t|B! z)|oR4C)F?Uo4cz(a@ib4MHzFgij$L*EdMFqS}obOFud}E^FxD$lP_1?5o8hj&{3tF z@K#n|KGW#IWZ#_%X2;e$Rvm7<6O$O+$YZP-wE94I)V1$rI`(tQbIx+_TrYrFH`Bg|8-%w>)4;#{*+CG5(Q>$+$E>u1z5Caw-pX}SL27U*OK MPgg&ebxsLQ07fEn8~^|S diff --git a/LCARStrek/browser/tracking-protection-16.svg b/LCARStrek/browser/tracking-protection-16.svg index 0ee0c95b..c4c92fd5 100755 --- a/LCARStrek/browser/tracking-protection-16.svg +++ b/LCARStrek/browser/tracking-protection-16.svg @@ -4,23 +4,6 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - -- 2.43.0