From 3ae0c90209c4aeacc3f8a7958e943361097a272d Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 21 Oct 2015 21:18:30 +0200 Subject: add support for Firefox 38 esr --- arc-firefox-theme/chrome/browser/devedition.css | 140 +++++++++++------------- 1 file changed, 66 insertions(+), 74 deletions(-) (limited to 'arc-firefox-theme/chrome/browser/devedition.css') diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index d1ddeca..272118b 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -6,10 +6,10 @@ :root { --tab-toolbar-navbar-overlap: 0px; - --navbar-tab-toolbar-highlight-overlap: 0px; --space-above-tabbar: 0px; --toolbarbutton-text-shadow: none; - --backbutton-urlbar-overlap: 0px; + --panel-ui-button-background-size: 1px calc(100% - 1px); + --panel-ui-button-background-position: 1px 0px; } :root[devtoolstheme="dark"] { @@ -21,7 +21,6 @@ --chrome-nav-bar-separator-color: rgba(0,0,0,.2); --chrome-nav-buttons-background: #252C33; --chrome-nav-buttons-hover-background: #1B2127; - --chrome-nav-bar-controls-border-color: #1D2328; --chrome-selection-color: #fff; --chrome-selection-background-color: #074D75; @@ -29,6 +28,7 @@ --tabs-toolbar-color: #F5F7FA; --tab-background-color: #1C2126; --tab-hover-background-color: #07090a; + --tab-separator-color: #474C50; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #1a4666; --tab-selection-box-shadow: 0 2px 0 #D7F1FF inset, @@ -47,25 +47,25 @@ --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px); + /* Identity box */ + --identity-box-chrome-color: #46afe3; + --identity-box-chrome-background-image: linear-gradient(#5F6670 0, #5F6670 100%); + --identity-box-verified-background-image: linear-gradient(#5F6670 0, #5F6670 100%); + --verified-identity-box-backgroundcolor: transparent; + /* Url and search bars */ --url-and-searchbar-background-color: #171B1F; --url-and-searchbar-color: #fff; - --urlbar-separator-color: #5F6670; --urlbar-dropmarker-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-hover-region: rect(0, 22px, 14px, 11px); - --urlbar-dropmarker-active-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-active-region: rect(0px, 22px, 14px, 11px); --urlbar-dropmarker-2x-url: url("chrome://browser/skin/devedition/urlbar-history-dropmarker.svg"); --urlbar-dropmarker-2x-region: rect(0px, 11px, 14px, 0px); - --urlbar-dropmarker-hover-2x-region: rect(0, 22px, 14px, 11px); - --urlbar-dropmarker-active-2x-region: rect(0px, 33px, 14px, 22px); + --urlbar-dropmarker-active-2x-region: rect(0px, 22px, 14px, 11px); --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted"); -} -:root[devtoolstheme="dark"] #identity-box { - --identity-box-chrome-color: #46afe3; - --identity-box-verified-background-color: transparent; - --identity-box-selected-background-color: rgba(231,230,230,.2); + /* Menu button separator */ + --panel-ui-button-background-image: linear-gradient(to bottom, transparent, #5F6670 30%, #5F6670 70%, transparent); } :root[devtoolstheme="dark"] .searchbar-dropmarker-image { @@ -78,17 +78,17 @@ --chrome-background-color: #E3E4E6; --chrome-color: #18191a; - --chrome-secondary-background-color: #f5f6f7; + --chrome-secondary-background-color: #f0f1f2; --chrome-navigator-toolbox-separator-color: #cccccc; --chrome-nav-bar-separator-color: #B6B6B8; - --chrome-nav-buttons-background: #fcfcfc; + --chrome-nav-buttons-background: #f0f1f2; --chrome-nav-buttons-hover-background: #DADBDB; - --chrome-nav-bar-controls-border-color: #ccc; --chrome-selection-color: #f5f7fa; --chrome-selection-background-color: #4c9ed9; --tab-background-color: #E3E4E6; --tab-hover-background-color: #D7D8DA; + --tab-separator-color: #C6C6C7; --tab-selection-color: #f5f7fa; --tab-selection-background-color: #4c9ed9; --tab-selection-box-shadow: 0 2px 0 #9FDFFF inset, @@ -98,18 +98,21 @@ /* Toolbar buttons */ - --toolbarbutton-hover-background: #eaeaea; + --toolbarbutton-hover-background: #D7D7D8; --toolbarbutton-hover-boxshadow: none; --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1); - --toolbarbutton-active-background: #d7d7d8 border-box; + --toolbarbutton-active-background: rgba(76,158,217,.5) linear-gradient(rgba(76,158,217,.5), rgba(76,158,217,.5)) border-box --toolbarbutton-active-boxshadow: none; - --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); - --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; + --toolbarbutton-active-bordercolor: rgba(0,0,0,0.3); + --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,0.2); --toolbarbutton-combined-boxshadow: none; --toolbarbutton-combined-backgroundimage: linear-gradient(rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 18px); /* Url and search bars */ --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon"); + + /* Menu button separator */ + --panel-ui-button-background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.1) 70%, transparent); } /* Give some space to drag the window around while customizing @@ -136,17 +139,17 @@ -moz-padding-start: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-start[visuallyselected=true]::before, +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, .tab-background-start, .tab-background-end, -.tab-background-end[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::before { +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { width: 0; } -.tab-background-start[visuallyselected=true]::after, -.tab-background-end[visuallyselected=true]::after { +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { -moz-margin-start: 0; } /* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ @@ -182,11 +185,6 @@ background-image: none; } -.browserContainer > .findbar-textbox { - background-color: var(--url-and-searchbar-background-color) !important; - color: var(--url-and-searchbar-color); -} - /* Default findbar text color doesn't look good - Bug 1125677 */ .browserContainer > findbar .findbar-find-status, .browserContainer > findbar .found-matches { @@ -212,41 +210,28 @@ toolbar[brighttext] #downloads-indicator-counter { } /* URL bar and search bar*/ +/* XXX :root[devtoolstheme="dark"] is a workaround for bug 1096413 on the findbar. */ #urlbar, -#navigator-toolbox .searchbar-textbox { +#navigator-toolbox .searchbar-textbox, +:root[devtoolstheme="dark"] .browserContainer > findbar .findbar-textbox { background-color: var(--url-and-searchbar-background-color) !important; background-image: none !important; - color: var(--url-and-searchbar-color) !important; - border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + color: var(--url-and-searchbar-color); + border: none !important; box-shadow: none !important; } -#urlbar { - -moz-border-start: none !important; - opacity: 1 !important; -} - window:not([chromehidden~="toolbar"]) #urlbar-wrapper { overflow: -moz-hidden-unscrollable; clip-path: none; -moz-margin-start: 0; } -/* Swap out the white arrow with a dark one for the dark theme */ -:root[devtoolstheme="dark"] #notification-popup-box { - border-image: url("chrome://browser/skin/devedition/urlbar-arrow.png") 0 8 0 0 fill; -} - -@media (min-resolution: 1.1dppx) { - :root[devtoolstheme="dark"] #notification-popup-box { - border-image: url("chrome://browser/skin/devedition/urlbar-arrow@2x.png") 0 16 0 0 fill; - } -} - -/* The (white) notification box background color should match the theme */ +/* Make the white notication box stick out less. */ #notification-popup-box { border-radius: 0; - background-color: var(--url-and-searchbar-background-color); + border: none; + background: transparent; } /* Nav bar specific stuff */ @@ -281,11 +266,23 @@ searchbar:not([oneoffui]) .search-go-button { visibility: hidden; } -/* Tab separators */ -.tabbrowser-tab::after, -.tabbrowser-tab::before { - background: currentColor; - opacity: 0.2 !important; +/* Make the tab splitter 1px wide with a solid background. */ +#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, +.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before, +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + background: var(--tab-separator-color); + width: 1px; + -moz-margin-start: 0; + -moz-margin-end: -1px; +} + +/* For the last tab separator, use margin-start of -1px to prevent jittering + due to the ::after element causing the width of the tab to extend, which + causes an overflow and makes it disappear, which removes the overflow and + causes it to reappear, etc, etc. */ +#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after { + -moz-margin-start: -1px; + -moz-margin-end: 0; } .tabbrowser-arrowscrollbox > .scrollbutton-down, @@ -294,13 +291,18 @@ searchbar:not([oneoffui]) .search-go-button { border-color: transparent; } +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]), +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + margin-bottom: 0; +} + .tabbrowser-tab { /* We normally rely on other tab elements for pointer events, but this theme hides those so we need it set here instead */ pointer-events: auto; } -.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]) > .tab-stack > .tab-content { +.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content { background-image: var(--pinned-tab-glow); background-position: center; background-size: 100%; @@ -312,7 +314,7 @@ searchbar:not([oneoffui]) .search-go-button { background-color: var(--tab-hover-background-color); } -.tabbrowser-tab[visuallyselected] { +.tabbrowser-tab[selected] { color: var(--tab-selection-color) !important; /* Override color: inherit */ background-color: var(--tab-selection-background-color); box-shadow: var(--tab-selection-box-shadow); @@ -329,7 +331,7 @@ searchbar:not([oneoffui]) .search-go-button { background-image: none; } -.tab-close-button[visuallyselected]:not(:hover) { +.tab-close-button[selected]:not(:hover) { background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); } @@ -352,19 +354,15 @@ searchbar:not([oneoffui]) .search-go-button { } /* Square back and forward buttons */ -#back-button > .toolbarbutton-icon, -#forward-button > .toolbarbutton-icon { +#back-button:not(:-moz-lwtheme) > .toolbarbutton-icon, +#forward-button:not(:-moz-lwtheme) > .toolbarbutton-icon { margin: 0; - border: 1px solid var(--chrome-nav-bar-controls-border-color); - padding: 2px 5px; + border: none; + padding: 2px 6px; background: var(--chrome-nav-buttons-background); box-shadow: none !important; } -#forward-button > .toolbarbutton-icon { - -moz-border-start: none; -} - /* Override a box shadow for disabled back button */ #main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { box-shadow: none !important; @@ -400,9 +398,3 @@ searchbar:not([oneoffui]) .search-go-button { #TabsToolbar:not([collapsed="true"]) + #nav-bar { border-top-width: 0 !important; } - -/* Prevent devedition foreground color from seeping into the sidebar-box (since - * its background colors aren't affected by the devedition theme) */ -#sidebar-box { - color: initial; -} -- cgit v1.2.3