From: Robert Kaiser Date: Sun, 30 Apr 2017 18:34:41 +0000 (+0200) Subject: second and final part of syncing LCARStrek with Firefox 54 browser windows theme... X-Git-Tag: LCARStrek-2.51~4 X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=commitdiff_plain;h=38bd4bf13f45e40e78b09a90ad580a40d50d7a61 second and final part of syncing LCARStrek with Firefox 54 browser windows theme changes --- diff --git a/LCARStrek/browser/ToolbarFx.png b/LCARStrek/browser/ToolbarFx.png index 2fcf6d8d..6c4a4c36 100644 Binary files a/LCARStrek/browser/ToolbarFx.png and b/LCARStrek/browser/ToolbarFx.png differ diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index b56b1248..88d26e95 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -36,6 +36,41 @@ menubar { -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar"); } +/* === BEGIN browser.inc.css === */ + +/* Zoom button */ +#urlbar-zoom-button { + margin: 0 3px; + font-size: .8em; + padding: 0 8px; + border-radius: 1em; +/* background-color: hsla(0,0%,0%,.05); + border: 1px solid ThreeDLightShadow;*/ +} + +#urlbar-zoom-button[animate="true"] { + animation-name: urlbar-zoom-reset-pulse; + animation-duration: 250ms; +} + +#urlbar-zoom-button:hover { +/* background-color: hsla(0,0%,0%,.1);*/ +} + +#urlbar-zoom-button:hover:active { +/* background-color: hsla(0,0%,0%,.15);*/ +} + +#urlbar-zoom-button > .toolbarbutton-text { + display: -moz-box; +} + +#urlbar-zoom-button > .toolbarbutton-icon { + display: none; +} + +/* === END browser.inc.css === */ + :root { /*--backbutton-urlbar-overlap: 5px;*/ @@ -106,13 +141,6 @@ menubar { display: none; } -#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before, -#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before, -#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before, -#main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before { - outline-color: #A09090; -} - #navigator-toolbox { } @@ -1699,34 +1727,7 @@ html|*.urlbar-input:-moz-lwtheme::placeholder, #urlbar-zoom-button { /* -moz-appearance: none;*/ - margin: 0 3px; - font-size: .8em; - padding: 0 8px; - border-radius: 1em; -/* background-color: hsla(0,0%,0%,.05); - color: inherit; - border: 1px solid ThreeDLightShadow;*/ -} - -#urlbar-zoom-button[animate="true"] { - animation-name: urlbar-zoom-reset-pulse; - animation-duration: 250ms; -} - -#urlbar-zoom-button:hover { -/* background-color: hsla(0,0%,0%,.1);*/ -} - -#urlbar-zoom-button:hover:active { -/* background-color: hsla(0,0%,0%,.15);*/ -} - -#urlbar-zoom-button > .toolbarbutton-text { - display: -moz-box; -} - -#urlbar-zoom-button > .toolbarbutton-icon { - display: none; +/* color: inherit;*/ } .search-go-container { @@ -2244,14 +2245,9 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-radius: 2px; border: 1px solid transparent; } - -.autocomplete-richlistitem[selected=true] { - background-color: hsl(210, 80%, 52%); -} */ .ac-title { font-size: 14px; -/* color: hsl(0, 0%, 0%);*/ } .ac-tags { @@ -2259,8 +2255,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box } /* html|span.ac-tag { - background-color: hsl(216, 0%, 88%); - color: hsl(0, 0%, 0%); border-radius: 2px; border: 1px solid transparent; padding: 0 1px; @@ -2273,30 +2267,6 @@ html|span.ac-tag { font-size: 12px; } -.ac-separator { -/* color: hsl(0, 0%, 50%);*/ -} - -.ac-url { - color: #9C9CFF; -} - -.ac-action { - color: #9C9CFF; -} - -.ac-title[selected=true], -.ac-separator[selected], -.ac-url[selected=true], -.ac-action[selected=true] { - color: #000000; -} - -.ac-tags-text[selected] > html|span.ac-tag { - background-color: #A09090; - color: #000000; -} - html|span.ac-emphasize-text-title, html|span.ac-emphasize-text-tag, html|span.ac-emphasize-text-url { @@ -3189,7 +3159,7 @@ richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type- transition: 1s background-color ease-out; } -.tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] { +.tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] { background-color: #008484; } @@ -3833,13 +3803,10 @@ html|*.pointerlockfswarning-domain { margin: 0; } +html|*#fullscreen-exit-button { + html|*.pointerlockfswarning-exit-button { - padding: 5px 30px; - font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; - font-size: 14px; - font-weight: lighter; margin: 0; - box-sizing: content-box; border-radius: 300px; border: none; @@ -4552,6 +4519,22 @@ notification.pluginVulnerable .messageImage { --drag-drop-transition-duration: .3s; } +#main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme { + background-repeat: no-repeat; + background-position: right top; + background-attachment: fixed; + background-color: transparent; + background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%, + var(--toolbox-rect-height), 0), + linear-gradient(to bottom, + var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px), + rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px), + rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px), + rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px), + rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px), + transparent calc(var(--toolbox-rect-height-with-unit) + 2px)); +} + #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox { margin-bottom: 1em; } @@ -5100,15 +5083,6 @@ toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring { background-attachment: fixed; } -#main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme { - background-repeat: no-repeat; - background-position: right top; - background-attachment: fixed; - /* The image will get set from CustomizeMode.jsm */ - background-image: none; - background-color: transparent; -} - #main-window[customization-lwtheme]:-moz-lwtheme { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-repeat: repeat; diff --git a/LCARStrek/browser/customizableui/panelUI.css b/LCARStrek/browser/customizableui/panelUI.css index a770a2a1..acc24688 100644 --- a/LCARStrek/browser/customizableui/panelUI.css +++ b/LCARStrek/browser/customizableui/panelUI.css @@ -593,6 +593,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { #PanelUI-footer-addons > toolbarbutton { background-color: #A09090; + /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */ + /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/ display: flex; flex: 1 1 0%; width: calc(22.35em + 30px); @@ -809,8 +811,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { } .fxaSyncIllustration { + width: 180px; height: var(--panel-ui-sync-illustration-height); - list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); } .PanelUI-remotetabs-prefs-button > .toolbarbutton-text { @@ -1237,19 +1239,19 @@ menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active), color: #A09090; } -#PanelUI-remotetabs-tabslist > toolbarbutton, +#PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"], #PanelUI-historyItems > toolbarbutton { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); } @media (min-resolution: 1.1dppx) { - #PanelUI-remotetabs-tabslist > toolbarbutton, + #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"], #PanelUI-historyItems > toolbarbutton { list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png"); } } -#PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon, +#PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon, #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon, #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon, #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon { diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css index f2a78ba0..b89998cf 100644 --- a/LCARStrek/browser/downloads/indicator.css +++ b/LCARStrek/browser/downloads/indicator.css @@ -2,6 +2,74 @@ * 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/. */ +/* === BEGIN indicator.inc.css === */ + +#downloads-indicator-progress-icon { + background: var(--downloads-indicator-image-attention) bottom no-repeat; + background-size: 18px; + margin-top: 18px; + /* From javascript side we use animation delay from 0s to -100s to show + * corresponding frames needed for progress. + * animation-delay is set to a positive value to make nothing shown. + */ + animation-play-state: paused; + animation-delay: 1s; + animation-duration: 100s; + animation-timing-function: linear; + animation-name: indicatorArrowProgress; +} +/* +toolbar[brighttext] #downloads-indicator-progress-icon { + background-image: var(--downloads-indicator-image-attention-inverted); + animation-name: indicatorArrowProgressDark; +} +*/ +@keyframes indicatorArrowProgress { + 0% { + margin-top: 12px; + filter: brightness(1.2); + } + 100% { + margin-top: 2px; + filter: brightness(1); + } +} +/* +@keyframes indicatorArrowProgressDark { + 0% { + margin-top: 12px; + filter: brightness(0.7); + } + 100% { + margin-top: 2px; + filter: brightness(1); + } +} +*/ +#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon { + animation-name: downloadsIndicatorStartJump; + /* Upon changing the overall duration below, please keep the delay time of + setTimeout() identical in indicator.js for this animation. */ + animation-duration: 0.5s; + animation-delay: 1s; + animation-iteration-count: 2; +} + +@keyframes downloadsIndicatorStartJump { + 0% { + transform: translateY(0); + animation-timing-function: ease-out; + } + 50% { + transform: translateY(-3px); + animation-timing-function: ease-in; + } + 100% { + transform: translateY(0); + } +} +/* === END indicator.inc.css === */ + /*** Status and progress indicator ***/ #downloads-animation-container { @@ -21,15 +89,17 @@ /*@media not all and (min-resolution: 1.1dppx) {*/ #downloads-button { - --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); - --downloads-indicator-icon-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); - --downloads-indicator-icon-attention: url("chrome://browser/skin/downloads/download-glow.png"); + --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); + --downloads-indicator-image-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); + --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 36, 198, 54, 180); +/* --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180); + --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);*/ } /*}*/ #downloads-indicator-icon { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; width: 18px; height: 18px; background-size: 18px; @@ -38,12 +108,12 @@ #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-hover); + background-image: var(--downloads-indicator-image-hover); color: #000000; } toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { -/* background-image: var(--downloads-indicator-icon-inverted); */ +/* background-image: var(--downloads-indicator-image-inverted); */ } #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, @@ -77,7 +147,7 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in } #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } #downloads-button[cui-areatype="menu-panel"][attention="success"] { @@ -89,18 +159,18 @@ toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-in equivalent to -moz-any([progress], [paused]). */ #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: var(--downloads-indicator-icon) center no-repeat; + background: var(--downloads-indicator-image) center no-repeat; background-size: 12px; } #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-attention); + background-image: var(--downloads-indicator-image-attention); } #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: var(--downloads-indicator-icon-hover); + background-image: var(--downloads-indicator-image-hover); background-size: 12px; } diff --git a/LCARStrek/browser/fxa/sync-illustration.svg b/LCARStrek/browser/fxa/sync-illustration.svg index e0672127..0d19135e 100644 --- a/LCARStrek/browser/fxa/sync-illustration.svg +++ b/LCARStrek/browser/fxa/sync-illustration.svg @@ -2,15 +2,29 @@ - - - - - - - - - - - + + + + + + + diff --git a/LCARStrek/browser/preferences/in-content/preferences.css b/LCARStrek/browser/preferences/in-content/preferences.css index 151b4995..32b9f93e 100644 --- a/LCARStrek/browser/preferences/in-content/preferences.css +++ b/LCARStrek/browser/preferences/in-content/preferences.css @@ -525,6 +525,10 @@ description > html|a { margin-bottom: 11px; } +#verifiedManage:visited { + color: var(--in-content-link-color); +} + .fxaSyncIllustration { margin-top: 35px; } @@ -580,7 +584,6 @@ description > html|a { .fxaSyncIllustration { width: 231px; - list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png) } #fxaLoginStatus[hasName] #fxaEmailAddress1 { @@ -644,9 +647,6 @@ description > html|a { .iOSLink { background-image: url("chrome://browser/skin/fxa/ios@2x.png"); } - .fxaSyncIllustration { - list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png) - } .fxaFirefoxLogo { list-style-image: url(chrome://browser/skin/fxa/logo@2x.png); } diff --git a/LCARStrek/browser/sync-128.png b/LCARStrek/browser/sync-128.png deleted file mode 100644 index 9cb2d709..00000000 Binary files a/LCARStrek/browser/sync-128.png and /dev/null differ diff --git a/LCARStrek/browser/tabbrowser/tab-audio-small.svg b/LCARStrek/browser/tabbrowser/tab-audio-small.svg index d5ba1dc5..a8763cd3 100644 --- a/LCARStrek/browser/tabbrowser/tab-audio-small.svg +++ b/LCARStrek/browser/tabbrowser/tab-audio-small.svg @@ -33,6 +33,15 @@ + + + + + @@ -42,17 +51,12 @@ - - - - - - - + + +