diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/compacttheme.css')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/compacttheme.css | 476 |
1 files changed, 476 insertions, 0 deletions
diff --git a/arc-firefox-theme/chrome/browser/compacttheme.css b/arc-firefox-theme/chrome/browser/compacttheme.css new file mode 100644 index 0000000..12789d0 --- /dev/null +++ b/arc-firefox-theme/chrome/browser/compacttheme.css @@ -0,0 +1,476 @@ + + +/* compacttheme.css is loaded in browser.xul after browser.css when it is + preffed on. The bulk of the styling is here in the shared file, but + there are overrides for each platform in their compacttheme.css files. */ + +:root { + --tab-toolbar-navbar-overlap: 0px; + --navbar-tab-toolbar-highlight-overlap: 0px; + --space-above-tabbar: 0px; + --toolbarbutton-text-shadow: none; + --backbutton-urlbar-overlap: 0px; +} + +:root:-moz-lwtheme-brighttext { + /* Chrome */ + --chrome-background-color: #272b35; + --chrome-color: #F5F7FA; + --chrome-secondary-background-color: #393F4C; + --chrome-navigator-toolbox-separator-color: rgba(0,0,0,.2); + --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: #5675B9; + + /* Tabs */ + --tabs-toolbar-color: #F5F7FA; + --tab-background-color: #272b35; + --tab-hover-background-color: #07090a; + --tab-selection-color: #f5f7fa; + --tab-selection-background-color: #5675B9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, rgba(0,0,0,0.4) 16%, transparent 70%); + + /* Url and search bars */ + --url-and-searchbar-background-color: #171B1F; + --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-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); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root:-moz-lwtheme-brighttext, +toolbar:-moz-lwtheme-brighttext { + --toolbarbutton-hover-background: rgba(25,33, 38,.6) linear-gradient(rgba(25,33,38,.6), rgba(25,33,38,.6)) padding-box; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(25,33,38,.6); + --toolbarbutton-active-background: rgba(25,33,38,1) linear-gradient(rgba(25,33,38,1), rgba(25,33,38,1)) border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(25,33,38,.8); + --toolbarbutton-checkedhover-backgroundcolor: #3C5283; + +} + +:root:-moz-lwtheme-darktext { + --url-and-searchbar-background-color: #fff; + + --chrome-background-color: #E3E4E6; + --chrome-color: #18191a; + --chrome-secondary-background-color: #f5f6f7; + --chrome-navigator-toolbox-separator-color: #cccccc; + --chrome-nav-bar-separator-color: #B6B6B8; + --chrome-nav-buttons-background: #ffffff; /* --theme-body-background */ + --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-selection-color: #f5f7fa; + --tab-selection-background-color: #4c9ed9; + --tab-selection-box-shadow: none; + --pinned-tab-glow: radial-gradient(22px at center calc(100% - 2px), rgba(76,158,217,0.9) 13%, transparent 16%); +} + +/* Override the lwtheme-specific styling for toolbar buttons */ +:root:-moz-lwtheme-darktext, +toolbar:-moz-lwtheme-darktext { + --toolbarbutton-hover-background: #eaeaea; + --toolbarbutton-hover-boxshadow: none; + --toolbarbutton-hover-bordercolor: rgba(0,0,0,0.1); + --toolbarbutton-active-background: #d7d7d8 border-box; + --toolbarbutton-active-boxshadow: none; + --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); + --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; +} + +/* Give some space to drag the window around while customizing + (normal space to left and right of tabs doesn't work in this case) */ +#main-window[tabsintitlebar][customizing] { + --space-above-tabbar: 9px; +} + +/* Override @tabCurveHalfWidth@ and @tabCurveWidth@. XXX: Switch to a CSS variable once the perf is sorted out - bug 1088771 */ +.tab-background-middle { + border-left-width: 0; + border-right-width: 0; + margin: 0; +} + +.tab-background, +.tabs-newtab-button { + margin-inline-end: 0; + margin-inline-start: 0; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-inline-end: 0; + padding-inline-start: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { + width: 0; +} + +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { + margin-inline-start: 0; +} +/* End override @tabCurveHalfWidth@ and @tabCurveWidth@ */ + +#urlbar ::-moz-selection, +#navigator-toolbox .searchbar-textbox ::-moz-selection, +.browserContainer > findbar ::-moz-selection { + background-color: var(--chrome-selection-background-color); + color: var(--chrome-selection-color); +} + +/* Change the base colors for the browser chrome */ + +#tabbrowser-tabs, +#TabsToolbar, +#browser-panel { + background: var(--chrome-background-color); + color: var(--chrome-color); +} + +#navigator-toolbox:-moz-lwtheme::after { + border-bottom-color: var(--chrome-navigator-toolbox-separator-color); +} + +#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), +.browserContainer > findbar, +#browser-bottombox { + background-color: var(--chrome-secondary-background-color) !important; + background-image: none !important; + color: var(--chrome-color); +} + +/* Default findbar text color doesn't look good - Bug 1125677 */ +.browserContainer > findbar .findbar-find-status, +.browserContainer > findbar .found-matches { + color: inherit; +} + +#navigator-toolbox .toolbarbutton-1, +.browserContainer > findbar .findbar-button, +#PlacesToolbar toolbarbutton.bookmark-item { + color: var(--chrome-color); + text-shadow: var(--toolbarbutton-text-shadow); +} + +/* Using toolbar[brighttext] instead of important to override linux */ +toolbar[brighttext] #downloads-indicator-counter { + text-shadow: var(--toolbarbutton-text-shadow); + color: var(--chrome-color); +} + +#TabsToolbar { + text-shadow: none !important; +} + +/* URL bar and search bar*/ +#urlbar, +#navigator-toolbox .searchbar-textbox { + background-color: var(--url-and-searchbar-background-color) !important; + background-image: none !important; + color: inherit !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + box-shadow: none !important; +} + + +#identity-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal-white); +} + +#identity-box:hover > #identity-icon:not(.no-hover):-moz-lwtheme-brighttext, +#identity-box[open=true] > #identity-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover-white); +} + +#identity-box.grantedPermissions > #identity-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-white); +} + +#identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover):-moz-lwtheme-brighttext, +#identity-box.grantedPermissions[open=true] > #identity-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover-white); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + + +#tracking-protection-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled-white); +} + +#tracking-protection-icon[state="loaded-tracking-content"]:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled-white); +} + + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/connection-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon-white); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon:-moz-lwtheme-brighttext, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon-white); + visibility: visible; +} + +#urlbar { + border-inline-start: none !important; + opacity: 1 !important; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper { + overflow: -moz-hidden-unscrollable; + clip-path: none; + margin-inline-start: 0; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl), +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) { + /* Resolves text blurring issue when hovering, see bug 1340206 */ + transform: none; + /* For some reason, this property must be specified here, even though the same + value is set in the previous rule set. o_O */ + margin-inline-start: 0; +} + +#urlbar-zoom-button:-moz-lwtheme-brighttext:hover { + background-color: rgba(255,255,255,.2); +} + +#urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active { + background-color: rgba(255,255,255,.3); +} + +/* Nav bar specific stuff */ +#nav-bar { + margin-top: 0 !important; + border-top: none !important; + border-bottom: none !important; + border-radius: 0 !important; + box-shadow: 0 -1px var(--chrome-nav-bar-separator-color) !important; +} + +/* No extra vertical padding for nav bar */ +#nav-bar { + padding-top: 0; + padding-bottom: 0; +} + +/* Use smaller back button icon */ +#back-button { + -moz-image-region: rect(0, 54px, 18px, 36px); +} + +@media (min-resolution: 1.1dppx) { + #back-button { + -moz-image-region: rect(0, 108px, 36px, 72px); + } +} + +.tab-background { + visibility: hidden; +} + +/* Tab separators */ +.tabbrowser-tab::after, +.tabbrowser-tab::before { + background: currentColor; + opacity: 0.2 !important; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down, +.tabbrowser-arrowscrollbox > .scrollbutton-up { + background-color: var(--tab-background-color); + border-color: transparent; +} + +.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:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), +.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-image: var(--pinned-tab-glow); + background-position: center; + background-size: 100%; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { + background-position: left bottom var(--tab-toolbar-navbar-overlap); + background-size: 34px 100%; +} + +.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover, +.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover, +.tabbrowser-tab:hover { + background-color: var(--tab-hover-background-color); +} + +.tabbrowser-tab[visuallyselected] { + color: var(--tab-selection-color) !important; /* Override color: inherit */ + background-color: var(--tab-selection-background-color); +} + +.tab-throbber[selected][progress] { + list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted.png"); +} + +@media (min-resolution: 1.1dppx) { + .tab-throbber[selected][progress] { + list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted@2x.png"); + } +} + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted] { + filter: url(chrome://global/skin/filters.svg#fill) !important; /* removes drop-shadow filter */ +} + +/* Don't need space for the tab curves (66px - 30px) */ +.tabs-newtab-button { + width: 36px; +} + +.tabs-newtab-button:hover { + /* Important needed because !important is used in browser.css */ + background-color: var(--tab-hover-background-color) !important; + background-image: none; +} + +:root { + --forwardbutton-width: 29px; +} + +:root:-moz-lwtheme-darktext { + --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-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); +} + +.findbar-closebutton:-moz-lwtheme-brighttext:not(:hover), +#sidebar-header > .close-icon:-moz-lwtheme-brighttext:not(:hover), +.tab-close-button[selected]:not(:hover) { + background-image: -moz-image-rect(url("chrome://global/skin/icons/close.svg"), 0, 80, 16, 64); +} + +/* The menubar and tabs toolbar should match the devedition theme */ +#TabsToolbar, +#toolbar-menubar { + -moz-appearance: none !important; +} +#main-menubar { + color: var(--chrome-color); +} +#main-menubar > menu:not([open]) { + color: inherit; +} + +/* Allow buttons with -moz-appearance set to look normal on hover and open states */ +#navigator-toolbox .toolbarbutton-1:-moz-any(:hover, [open="true"]), +#PlacesToolbar toolbarbutton.bookmark-item:-moz-any(:hover, [open="true"]) { + color: initial; +} + +/* Square back and forward buttons */ +#back-button > .toolbarbutton-icon, +#forward-button > .toolbarbutton-icon { + margin: 0; + border: 1px solid var(--chrome-nav-bar-controls-border-color); + padding: 2px 5px; + background: var(--chrome-nav-buttons-background); + box-shadow: none !important; +} + +#forward-button > .toolbarbutton-icon { + border-inline-start: none; +} + +/* Override a box shadow for disabled back button */ +#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { + box-shadow: none !important; +} + +#back-button:hover:not([disabled="true"]) > .toolbarbutton-icon, +#forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-hover-background) !important; +} + +#back-button > .toolbarbutton-icon { + border-radius: 2px 0 0 2px !important; +} + +.urlbar-history-dropmarker { + -moz-appearance: none; + padding: 0 3px; + list-style-image: var(--urlbar-dropmarker-url); + -moz-image-region: var(--urlbar-dropmarker-region); +} + +/* Add the proper background for tab overflow */ +#alltabs-button, +#new-tab-button { + background: var(--chrome-background-color); +} + +#new-tab-button:hover > .toolbarbutton-icon { + border-color: transparent !important; +} + +/* Prevent double border below tabs toolbar */ +#TabsToolbar:not([collapsed="true"]) + #nav-bar { + border-top-width: 0 !important; +} + +/* Fix the bad-looking text-shadow in the sidebar header: */ +.sidebar-header, +#sidebar-header { + text-shadow: none; +} + +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + margin-inline-start: 11px; +} |