From 4931dbf456a64c61875220987fca84c6c08819df Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Wed, 4 Nov 2015 14:53:46 +0100 Subject: update to 43.0b1 --- .../chrome/browser/aboutNetError_alert.svg | 8 +- arc-firefox-theme/chrome/browser/browser.css | 215 +++++++++++-------- .../chrome/browser/controlcenter/panel.css | 7 +- .../browser/customizableui/panelUIOverlay.css | 12 +- arc-firefox-theme/chrome/browser/devedition.css | 19 -- .../chrome/browser/devedition/search.svg | 27 --- .../chrome/browser/devtools/animationinspector.css | 196 +++++++++++------ .../chrome/browser/devtools/canvasdebugger.css | 4 +- .../chrome/browser/devtools/computedview.css | 2 +- .../chrome/browser/devtools/dark-theme.css | 11 +- .../chrome/browser/devtools/debugger.css | 27 ++- .../browser/devtools/editor-breakpoint@2x.png | Bin 0 -> 773 bytes .../browser/devtools/floating-scrollbars-light.css | 2 +- .../browser/devtools/floating-scrollbars.css | 1 - .../chrome/browser/devtools/inspector.css | 2 +- .../chrome/browser/devtools/light-theme.css | 11 +- .../chrome/browser/devtools/markup-view.css | 12 ++ .../chrome/browser/devtools/memory.css | 81 +++++++ .../chrome/browser/devtools/netmonitor.css | 28 +-- .../chrome/browser/devtools/performance.css | 68 ++++-- .../chrome/browser/devtools/ruleview.css | 23 +- .../chrome/browser/devtools/shadereditor.css | 2 +- .../chrome/browser/devtools/styleeditor.css | 2 +- .../chrome/browser/devtools/webaudioeditor.css | 2 +- .../chrome/browser/devtools/webconsole.css | 29 ++- .../browser/devtools/webconsole_networkpanel.css | 99 --------- .../chrome/browser/devtools/widgets.css | 23 +- arc-firefox-theme/chrome/browser/drm-icon.svg | 46 ++-- arc-firefox-theme/chrome/browser/engineManager.css | 11 - .../chrome/browser/fullscreen-darknoise.png | Bin 3050 -> 0 bytes .../chrome/browser/fullscreen/insecure.svg | 39 ++++ .../chrome/browser/fullscreen/secure.svg | 26 +++ arc-firefox-theme/chrome/browser/fxa/android.png | Bin 15286 -> 279 bytes .../chrome/browser/fxa/android@2x.png | Bin 736 -> 488 bytes .../chrome/browser/fxa/default-avatar.png | Bin 1562 -> 1386 bytes .../chrome/browser/fxa/default-avatar@2x.png | Bin 2560 -> 2236 bytes arc-firefox-theme/chrome/browser/fxa/logo.png | Bin 17703 -> 1728 bytes arc-firefox-theme/chrome/browser/fxa/logo@2x.png | Bin 4517 -> 3190 bytes .../chrome/browser/fxa/sync-illustration.png | Bin 18697 -> 2420 bytes .../chrome/browser/fxa/sync-illustration@2x.png | Bin 8682 -> 6016 bytes .../chrome/browser/heartbeat-icon.svg | 20 +- .../chrome/browser/heartbeat-star-lit.svg | 47 +--- .../chrome/browser/heartbeat-star-off.svg | 47 +--- arc-firefox-theme/chrome/browser/info.svg | 2 +- arc-firefox-theme/chrome/browser/newtab/newTab.css | 7 +- .../chrome/browser/notification-pluginAlert@2x.png | Bin 0 -> 1189 bytes .../browser/notification-pluginBlocked@2x.png | Bin 0 -> 2067 bytes .../browser/notification-pluginNormal@2x.png | Bin 0 -> 469 bytes .../chrome/browser/places/autocomplete-star.png | Bin 0 -> 636 bytes .../chrome/browser/places/star-icons.png | Bin 978 -> 0 bytes .../browser/preferences/in-content/preferences.css | 127 ++++++++++- .../browser/preferences/in-content/search.css | 14 -- .../chrome/browser/sass/_browser-sass.scss | 236 +++++++++++++-------- .../chrome/browser/sass/browser-dark.css | 215 +++++++++++-------- .../chrome/browser/sass/browser-darker.css | 215 +++++++++++-------- .../chrome/browser/sass/browser-light.css | 215 +++++++++++-------- arc-firefox-theme/chrome/browser/searchbar.css | 63 ++---- .../chrome/browser/social/chat-icons.svg | 24 ++- .../chrome/browser/tabbrowser/loading.png | Bin 12184 -> 13906 bytes .../chrome/browser/tabbrowser/pendingpaint.png | Bin 30233 -> 10133 bytes .../chrome/global/in-content/common.css | 17 +- .../chrome/global/in-content/dropdown.svg | 2 +- arc-firefox-theme/chrome/global/menu.css | 5 +- .../chrome/global/menu/shared-menu-check@2x.png | Bin 0 -> 377 bytes arc-firefox-theme/chrome/global/notification.css | 1 + .../chrome/mozapps/extensions/extensions.css | 6 +- 66 files changed, 1336 insertions(+), 962 deletions(-) delete mode 100644 arc-firefox-theme/chrome/browser/devedition/search.svg create mode 100644 arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png create mode 100644 arc-firefox-theme/chrome/browser/devtools/memory.css delete mode 100644 arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css delete mode 100644 arc-firefox-theme/chrome/browser/engineManager.css delete mode 100644 arc-firefox-theme/chrome/browser/fullscreen-darknoise.png create mode 100644 arc-firefox-theme/chrome/browser/fullscreen/insecure.svg create mode 100644 arc-firefox-theme/chrome/browser/fullscreen/secure.svg create mode 100644 arc-firefox-theme/chrome/browser/notification-pluginAlert@2x.png create mode 100644 arc-firefox-theme/chrome/browser/notification-pluginBlocked@2x.png create mode 100644 arc-firefox-theme/chrome/browser/notification-pluginNormal@2x.png create mode 100644 arc-firefox-theme/chrome/browser/places/autocomplete-star.png delete mode 100644 arc-firefox-theme/chrome/browser/places/star-icons.png create mode 100644 arc-firefox-theme/chrome/global/menu/shared-menu-check@2x.png (limited to 'arc-firefox-theme/chrome') diff --git a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg index 66215d4..b19c1c7 100644 --- a/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg +++ b/arc-firefox-theme/chrome/browser/aboutNetError_alert.svg @@ -5,12 +5,12 @@ - - + + - - + + diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css index f7ed613..45ebf90 100644 --- a/arc-firefox-theme/chrome/browser/browser.css +++ b/arc-firefox-theme/chrome/browser/browser.css @@ -1309,7 +1309,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { -moz-margin-start: 0; } .urlbar-history-dropmarker { - -moz-appearance: toolbarbutton-dropdown; } + -moz-appearance: toolbarbutton-dropdown; + transition: opacity 0.15s ease; } + +#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { + opacity: 0; } #urlbar-container { -moz-box-align: center; } @@ -1376,7 +1380,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -1582,10 +1585,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; } + .notification-anchor-icon { list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; @@ -1929,8 +1938,7 @@ notification[value="loop-sharing-notification"] .messageImage { .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/star-icons.png"); - -moz-image-region: rect(0px 32px 16px 16px); + list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } @@ -2712,6 +2720,12 @@ lwtHeader;*/ /* box-shadow instead of background-color to work around native styling */ box-shadow: inset -5px 0 ThreeDShadow; } +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } + +.alltabs-endimage[soundplaying] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); } + /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading_16.png"); @@ -2775,14 +2789,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { .sync-panel-button-box { margin-top: 1em; } -#sync-error-panel-title, #sync-start-panel-title { font-size: 120%; font-weight: bold; margin-bottom: 5px; } -#sync-start-panel-subtitle, -#sync-error-panel-subtitle { +#sync-start-panel-subtitle { margin: 0; } /* Status panel */ @@ -2807,19 +2819,45 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-top-left-radius: .3em; margin-left: 1em; } -#full-screen-warning-message { - background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); - color: white; - border-radius: 4px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; } +html|*#fullscreen-warning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; } + +html|*#fullscreen-warning::before { + margin: 0; + width: 24px; + height: 24px; } + +html|*#fullscreen-warning.verifiedIdentity::before, +html|*#fullscreen-warning.verifiedDomain::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); } + +html|*#fullscreen-warning.unknownIdentity::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -.full-screen-description { - font-size: 150%; } +html|*#fullscreen-domain-text, +html|*#fullscreen-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; } + +html|*#fullscreen-domain { + font-weight: bold; + margin: 0; } -#full-screen-domain-text { - font-size: 300%; } +html|*#fullscreen-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -2946,7 +2984,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2959,7 +2997,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2969,7 +3007,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3027,11 +3065,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-home-button { + -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; @@ -3053,6 +3093,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; @@ -3071,7 +3112,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3159,7 +3200,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3181,7 +3222,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3252,7 +3293,7 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { @@ -3652,12 +3693,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin: 0; background: none; } -.chat-toolbarbutton:hover { - background-color: rgba(255, 255, 255, 0.35); } - -.chat-toolbarbutton:hover:active { - background-color: rgba(255, 255, 255, 0.5); } - .chat-toolbarbutton > .toolbarbutton-text { display: none; } @@ -3668,40 +3703,70 @@ toolbar[brighttext] #downloads-indicator-counter { .chat-close-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } -.chat-close-button:-moz-any(:hover, :hover:active) { +.chat-close-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } + +.chat-close-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } .chat-minimize-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } -.chat-minimize-button:-moz-any(:hover, :hover:active) { +.chat-minimize-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } + +.chat-minimize-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } .chat-swap-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); transform: rotate(180deg); } -.chat-swap-button:-moz-any(:hover, :hover:active) { +.chat-swap-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } + +.chat-swap-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } chatbar > chatbox > .chat-titlebar > .chat-swap-button { transform: none; } +.chat-loop-hangup { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white"); + background-color: #d13f1a; + border: 1px solid #d13f1a; + border-top-right-radius: 4px; + width: 32px; + height: 26px; + margin-top: -6px; + margin-bottom: -5px; + -moz-margin-start: 6px; + -moz-margin-end: -5px; } + +.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover, :hover:active) { + background-color: #ef6745; + border-color: #ef6745; } + .chat-title { - font-weight: bold; - color: black; + color: #666; text-shadow: none; cursor: inherit; } .chat-titlebar { - height: 30px; - min-height: 30px; + height: 26px; + min-height: 26px; width: 100%; margin: 0; - padding: 7px 6px; - border: none; - border-bottom: 1px solid #ccc; - cursor: pointer; } + padding: 5px 4px; + border: 1px solid #ebebeb; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + cursor: pointer; + background-color: #ebebeb; } + +.chat-titlebar[selected] { + background-color: #f0f0f0; } .chat-titlebar > .notification-anchor-icon { margin-left: 2px; @@ -3716,16 +3781,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { background-size: 100% 20px; background-position: 0 -10px; } -chatbox[dark=true] > .chat-titlebar, -chatbox[dark=true] > .chat-titlebar[selected] { - border-bottom: none; - background-color: #000; - background-image: none; } - -chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { - font-weight: normal; - color: #c1c1c1; } - .chat-frame { padding: 0; margin: 0; @@ -3738,11 +3793,22 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { height: 21px; width: 21px; border: 1px solid #ccc; - border-bottom: none; } + border-bottom: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } @media (min-resolution: 2dppx) { .chatbar-button { list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; } + +.chatbar-button[activity]:not([open]) { + background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } + .chatbar-button > .toolbarbutton-icon { width: 16px; } @@ -3771,41 +3837,24 @@ chatbar { chatbox { -moz-margin-start: 4px; - background-color: white; - border: 1px solid #ccc; - border-bottom: none; } + background-color: transparent; } + +chatbar > chatbox { + /* Apply the same border-radius as the .chat-titlebar to make the box-shadow + go round nicely. */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + /* Offset the chatbox the same amount as the box-shadows' spread, to make it + visible. */ + -moz-margin-end: 5px; } window > chatbox { -moz-margin-start: 0px; margin: 0px; border: none; - padding: 0px; } - -.chat-titlebar { - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chatbar-button { - -moz-appearance: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chatbar-button > .toolbarbutton-icon { - -moz-margin-end: 0; } - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity] { - background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); } - -chatbox { - border-top-left-radius: 2.5px; - border-top-right-radius: 2.5px; } + padding: 0px; + border-radius: 4px; } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public diff --git a/arc-firefox-theme/chrome/browser/controlcenter/panel.css b/arc-firefox-theme/chrome/browser/controlcenter/panel.css index 27c2258..e3a4d14 100644 --- a/arc-firefox-theme/chrome/browser/controlcenter/panel.css +++ b/arc-firefox-theme/chrome/browser/controlcenter/panel.css @@ -158,6 +158,7 @@ #identity-popup-security-descriptions > description, #identity-popup-securityView-header > description, #identity-popup-securityView-body > description, +#identity-popup-permissions-content > description, #tracking-protection-content > label { white-space: pre-wrap; font-size: 110%; @@ -296,10 +297,14 @@ description#identity-popup-content-verifier, min-width: 60px; } -#identity-popup-permission-list { +#identity-popup-permission-list:not(:empty) { margin-top: 5px; } +#identity-popup-permission-list:not(:empty) + description { + display: none; +} + .identity-popup-permission-label { -moz-margin-start: 0; word-wrap: break-word; diff --git a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css index c96ee12..367bf27 100644 --- a/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css +++ b/arc-firefox-theme/chrome/browser/customizableui/panelUIOverlay.css @@ -1210,19 +1210,9 @@ toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem] border-bottom-left-radius: 0; } -.toolbaritem-combined-buttons > separator { +.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator { -moz-appearance: none; - width: 3px; -moz-box-align: stretch; - background-image: linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, transparent), - linear-gradient(to bottom, transparent, hsla(210,54%,20%,.15) 40%, hsla(210,54%,20%,.15) 60%, transparent), - linear-gradient(to bottom, transparent, hsla(0,0%,100%,.3) 40%, hsla(0,0%,100%,.3) 60%, transparent); - background-size: 1px, 1px, 1px; - background-position: 0 0, 1px 0, 2px 0; - background-repeat: no-repeat; -} - -.toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator { margin: .5em 0; width: 1px; height: auto; diff --git a/arc-firefox-theme/chrome/browser/devedition.css b/arc-firefox-theme/chrome/browser/devedition.css index d1ddeca..eb2234b 100644 --- a/arc-firefox-theme/chrome/browser/devedition.css +++ b/arc-firefox-theme/chrome/browser/devedition.css @@ -44,8 +44,6 @@ --toolbarbutton-active-boxshadow: none; --toolbarbutton-active-bordercolor: rgba(25,33,38,.8); --toolbarbutton-checkedhover-backgroundcolor: #1D4F73; - --toolbarbutton-combined-boxshadow: none; - --toolbarbutton-combined-backgroundimage: linear-gradient(#5F6670 0, #5F6670 18px); /* Url and search bars */ --url-and-searchbar-background-color: #171B1F; @@ -59,7 +57,6 @@ --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); - --search-button-image: url("chrome://browser/skin/devedition/search.svg#search-icon-inverted"); } :root[devtoolstheme="dark"] #identity-box { @@ -68,11 +65,6 @@ --identity-box-selected-background-color: rgba(231,230,230,.2); } -:root[devtoolstheme="dark"] .searchbar-dropmarker-image { - --searchbar-dropmarker-url: url("chrome://browser/skin/devtools/dropmarker.svg"); - --searchbar-dropmarker-2x-url: url("chrome://browser/skin/devtools/dropmarker.svg"); -} - :root[devtoolstheme="light"] { --url-and-searchbar-background-color: #fff; @@ -105,11 +97,6 @@ --toolbarbutton-active-boxshadow: none; --toolbarbutton-active-bordercolor: rgba(0,0,0,0.15); --toolbarbutton-checkedhover-backgroundcolor: #d7d7d8; - --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"); } /* Give some space to drag the window around while customizing @@ -271,12 +258,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper { -moz-image-region: rect(0, 54px, 18px, 36px); } -searchbar:not([oneoffui]) .search-go-button { - /* !important is needed because searchbar.css is loaded after this */ - -moz-image-region: auto !important; - list-style-image: var(--search-button-image); -} - .tab-background { visibility: hidden; } diff --git a/arc-firefox-theme/chrome/browser/devedition/search.svg b/arc-firefox-theme/chrome/browser/devedition/search.svg deleted file mode 100644 index 6bacdc0..0000000 --- a/arc-firefox-theme/chrome/browser/devedition/search.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css index 40efab7..dfd1b3d 100644 --- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css @@ -12,6 +12,15 @@ --even-animation-timeline-background-color: rgba(128,128,128,0.03); } +:root { + /* How high should toolbars be */ + --toolbar-height: 20px; + /* How wide should the sidebar be */ + --timeline-sidebar-width: 150px; + /* How high should animations displayed in the timeline be */ + --timeline-animation-height: 20px; +} + html { height: 100%; } @@ -26,33 +35,47 @@ body { color: var(--theme-content-color3); } -/* The top toolbar, containing the toggle-all button */ +/* The top toolbar, containing the toggle-all button. And the timeline toolbar, + containing playback control buttons, shown only when there are animations + displayed in the timeline */ -#toolbar { +#global-toolbar, +#timeline-toolbar { border-bottom: 1px solid var(--theme-splitter-color); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; - height: 20px; + height: var(--toolbar-height); } -#toolbar .label { - padding: 1px 4px; +#timeline-toolbar { + display: none; } -#toggle-all { - border-width: 0 0 0 1px; - min-height: 20px; +[timeline] #global-toolbar { + display: none; +} + +[timeline] #timeline-toolbar { + display: flex; +} + +#global-toolbar .label { + padding: 1px 4px; } /* The main animations container */ #players { - height: calc(100% - 20px); + height: calc(100% - var(--toolbar-height)); overflow: auto; } +[empty] #players { + display: none; +} + /* The error message, shown when an invalid/unanimated element is selected */ #error-message { @@ -65,16 +88,23 @@ body { display: none; } +[empty] #error-message { + display: block; +} -/* Element picker and toggle-all buttons */ +/* Element picker, toggle-all buttons, timeline pause button, ... */ -#element-picker, -#toggle-all { +#global-toolbar .devtools-button, +#timeline-toolbar .devtools-button { + border-width: 0 0 0 1px; + min-height: var(--toolbar-height); +} + +.devtools-button { position: relative; } -#element-picker::before, -#toggle-all::before { +.devtools-button::before { content: ""; display: block; width: 16px; @@ -83,10 +113,13 @@ body { left: 50%; top: 50%; margin: -8px 0 0 -8px; +} + +#element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick.png"); } -#toggle-all::before { +.pause-button::before { background-image: url("debugger-pause.png"); } @@ -95,21 +128,21 @@ body { filter: none; /* Icon is blue when checked, don't invert for light theme */ } -#toggle-all.paused::before { +.pause-button.paused::before { background-image: url("debugger-play.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #element-picker::before { background-image: url("chrome://browser/skin/devtools/command-pick@2x.png"); background-size: 64px; } - #toggle-all::before { + .pause-button::before { background-image: url("debugger-pause@2x.png"); } - #toggle-all.paused::before { + .pause-button.paused::before { background-image: url("debugger-play@2x.png"); } } @@ -119,6 +152,7 @@ body { .animation-timeline { height: 100%; overflow: hidden; + position: relative; /* The timeline gets its background-image from a canvas element created in /browser/devtools/animationinspector/utils.js drawGraphElementBackground thanks to document.mozSetImageElement("time-graduations", canvas) @@ -127,17 +161,42 @@ body { background-repeat: repeat-y; /* The animations are drawn 150px from the left edge so that animated nodes can be displayed in a sidebar */ - background-position: 150px 0; + background-position: var(--timeline-sidebar-width) 0; display: flex; flex-direction: column; } +.animation-timeline .scrubber { + position: absolute; + height: 100%; + width: var(--timeline-sidebar-width); + border-right: 1px solid red; + box-sizing: border-box; + z-index: 1; + pointer-events: none; +} + +.animation-timeline .scrubber::before { + content: ""; + position: absolute; + top: 0; + width: 1px; + right: -6px; + border-top: 5px solid red; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} + .animation-timeline .time-header { - margin-left: 150px; - height: 20px; + margin-left: var(--timeline-sidebar-width); + min-height: var(--toolbar-height); overflow: hidden; position: relative; - border-bottom: 1px solid var(--theme-splitter-color); + /* This is the same color as the time graduations in + browser/devtools/animationinspector/utils.js */ + border-bottom: 1px solid rgba(128, 136, 144, .5); + cursor: col-resize; + -moz-user-select: none; } .animation-timeline .time-header .time-tick { @@ -158,7 +217,7 @@ body { .animation-timeline .animation { margin: 4px 0; - height: 20px; + height: var(--timeline-animation-height); position: relative; } @@ -167,7 +226,7 @@ body { } .animation-timeline .animation .target { - width: 150px; + width: var(--timeline-sidebar-width); overflow: hidden; height: 100%; } @@ -179,7 +238,7 @@ body { .animation-timeline .animation .time-block { position: absolute; top: 0; - left: 150px; + left: var(--timeline-sidebar-width); right: 0; height: 100%; } @@ -189,19 +248,37 @@ body { .animation-timeline .animation .iterations { position: relative; height: 100%; - border: 1px solid var(--theme-highlight-lightorange); box-sizing: border-box; - background: var(--theme-contrast-background); - /* Iterations are displayed with a repeating linear-gradient which size is - dynamically changed from JS */ + + --timelime-border-color: var(--theme-body-color); + --timeline-background-color: var(--theme-splitter-color); + + /* Iterations of the animation are displayed with a repeating linear-gradient + which size is dynamically changed from JS. The gradient only draws 1px + borders between each iteration. These borders must have the same color as + the border of this element */ background-image: linear-gradient(to right, - var(--theme-highlight-lightorange) 0, - var(--theme-highlight-lightorange) 1px, + var(--timelime-border-color) 0, + var(--timelime-border-color) 1px, transparent 1px, transparent 2px); background-repeat: repeat-x; background-position: -1px 0; + border: 1px solid var(--timelime-border-color); + + /* The background color is set independently */ + background-color: var(--timeline-background-color); +} + +.animation-timeline .animation .cssanimation { + --timelime-border-color: var(--theme-highlight-lightorange); + --timeline-background-color: var(--theme-contrast-background); +} + +.animation-timeline .animation .csstransition { + --timelime-border-color: var(--theme-highlight-bluegrey); + --timeline-background-color: var(--theme-highlight-blue); } .animation-timeline .animation .iterations.infinite { @@ -226,42 +303,41 @@ body { top: unset; } -.animation-timeline .animation .animation-title { - height: 1.5em; +.animation-timeline .animation .name { + color: var(--theme-selection-color); + height: 100%; width: 100%; - box-sizing: border-box; overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + line-height: 150%; + padding: 0 2px; } .animation-timeline .animation .delay { position: absolute; top: 0; - height: 100%; - background-image: linear-gradient(to bottom, - transparent, - transparent 9px, - var(--theme-highlight-lightorange) 9px, - var(--theme-highlight-lightorange) 11px, - transparent 11px, - transparent); -} + /* Make sure the delay covers up the animation border */ + transform: translate(-1px, -1px); + box-sizing: border-box; + height: calc(100% + 2px); -.animation-timeline .animation .delay::before { - position: absolute; - content: ""; - left: 0; - width: 2px; - height: 8px; - top: 50%; - margin-top: -4px; - background: var(--theme-highlight-lightorange); + border: 1px solid var(--timelime-border-color); + border-width: 1px 0 1px 1px; + background-image: repeating-linear-gradient(45deg, + transparent, + transparent 1px, + var(--theme-selection-color) 1px, + var(--theme-selection-color) 4px); + background-color: var(--timelime-border-color); } -.animation-timeline .animation .name { - position: absolute; - z-index: 1; - padding: 2px; - white-space: nowrap; +.animation-timeline .animation .delay.negative { + /* Negative delays are displayed on top of the animation, so they need a + right border. Whereas normal delays are displayed just before the + animation, so there's already the animation's left border that serves as + a separation. */ + border-width: 1px; } /* Animation target node gutter, contains a preview of the dom node */ @@ -326,7 +402,7 @@ body { /* Timeline wiget */ .timeline { - height: 20px; + height: var(--timeline-animation-height); width: 100%; display: flex; flex-direction: row; @@ -362,7 +438,7 @@ body { background-image: url(rewind.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .timeline .toggle::before { background-image: url(debugger-pause@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css index a749260..efeac51 100644 --- a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css @@ -138,7 +138,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #resume { list-style-image: url(debugger-play@2x.png); -moz-image-region: rect(0px,64px,32px,32px); @@ -243,7 +243,7 @@ background-size: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .selected .call-item-gutter { background-image: url("editor-debug-location@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css index f770681..a4eff43 100644 --- a/arc-firefox-theme/chrome/browser/devtools/computedview.css +++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css @@ -61,7 +61,7 @@ body { background-size: 5px 8px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .property-value, .other-property-value { background-image: url(arrow-e@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css index 53a868f..22480b2 100644 --- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css @@ -38,6 +38,7 @@ /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */ --theme-graphs-green: #70bf53; --theme-graphs-blue: #46afe3; + --theme-graphs-bluegrey: #5e88b0; --theme-graphs-purple: #df80ff; --theme-graphs-yellow: #d99b28; --theme-graphs-red: #eb5368; @@ -334,7 +335,7 @@ div.CodeMirror span.eval-text { background-position: -42px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -372,7 +373,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png"); @@ -725,7 +726,7 @@ div.CodeMirror span.eval-text { opacity: 0.5; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-button::before { background-size: 32px; } @@ -842,7 +843,7 @@ div.CodeMirror span.eval-text { -moz-image-region: rect(0, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-dark .devtools-searchinput { background-image: url(magnifying-glass@2x.png); } @@ -1172,7 +1173,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-rulers.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css index 97eb3b0..e16cdb8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/debugger.css +++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css @@ -66,7 +66,7 @@ list-style-image: url(debugger-blackbox.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #black-box { list-style-image: url(debugger-blackbox@2x.png); } @@ -76,7 +76,7 @@ list-style-image: url(debugger-prettyprint.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #pretty-print { list-style-image: url(debugger-prettyprint@2x.png); } @@ -86,7 +86,7 @@ list-style-image: url(debugger-toggleBreakpoints.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #toggle-breakpoints { list-style-image: url(debugger-toggleBreakpoints@2x.png); } @@ -104,7 +104,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #sources-toolbar .devtools-toolbarbutton:not([label]) { -moz-image-region: rect(0px,32px,32px,0px); } @@ -138,7 +138,7 @@ -moz-margin-end: 5px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #black-boxed-message-button > .button-box > .button-icon { background-image: url(debugger-blackbox@2x.png); } @@ -226,7 +226,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #trace { list-style-image: url(tracer-icon@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -328,7 +328,7 @@ margin: 2px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .dbg-expression-arrow { background-image: url(commandline-icon@2x.png); } @@ -564,7 +564,7 @@ list-style-image: url(debugger-play.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #resume { list-style-image: url(debugger-pause@2x.png); -moz-image-region: rect(0px,32px,32px,0px); @@ -581,7 +581,12 @@ } #debugger-controls toolbarbutton[disabled] { - opacity: .5; + opacity: .5; + transition: none; +} + +#resume[break-on-next] { + background: var(--theme-highlight-lightorange); } #step-over { @@ -596,7 +601,7 @@ list-style-image: url(debugger-step-out.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #step-over { list-style-image: url(debugger-step-over@2x.png); } @@ -626,7 +631,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #instruments-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png new file mode 100644 index 0000000..7253aee Binary files /dev/null and b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css index 7e38611..01b622f 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css @@ -3,7 +3,7 @@ * 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/. */ -@import url("floating-scrollbars.css"); +@import url("chrome://browser/skin/devtools/floating-scrollbars.css"); scrollbar thumb { background-color: rgba(170,170,170,0.2) !important; diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css index 934a38e..61c66c8 100644 --- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css +++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css @@ -29,7 +29,6 @@ scrollbar thumb { background-color: rgba(170,170,170,0.2) !important; border-radius: 3px !important; } - scrollbar scrollbarbutton, scrollbar gripper { display: none; } diff --git a/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css index cab78e7..a892ec3 100644 --- a/arc-firefox-theme/chrome/browser/devtools/inspector.css +++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css @@ -49,7 +49,7 @@ -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #inspector-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css index 92515ff..276b34a 100644 --- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css +++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css @@ -38,6 +38,7 @@ /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */ --theme-graphs-green: #85d175; --theme-graphs-blue: #83b7f6; + --theme-graphs-bluegrey: #0072ab; --theme-graphs-purple: #b693eb; --theme-graphs-yellow: #efc052; --theme-graphs-red: #e57180; @@ -343,7 +344,7 @@ div.CodeMirror span.eval-text { background-position: -14px 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-twisty, .theme-checkbox { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -381,7 +382,7 @@ div.CodeMirror span.eval-text { margin-left: -4px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-tooltip-panel .panel-arrow[side="top"], .theme-tooltip-panel .panel-arrow[side="bottom"] { list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png"); @@ -723,7 +724,7 @@ div.CodeMirror span.eval-text { opacity: 0.5; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-button::before { background-size: 32px; } @@ -840,7 +841,7 @@ div.CodeMirror span.eval-text { -moz-image-region: rect(0, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .theme-dark .devtools-searchinput { background-image: url(magnifying-glass@2x.png); } @@ -1170,7 +1171,7 @@ div.CodeMirror span.eval-text { background-image: url("chrome://browser/skin/devtools/command-rulers.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #command-button-paintflashing > image { background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png"); } diff --git a/arc-firefox-theme/chrome/browser/devtools/markup-view.css b/arc-firefox-theme/chrome/browser/devtools/markup-view.css index e1912d8..fb3d958 100644 --- a/arc-firefox-theme/chrome/browser/devtools/markup-view.css +++ b/arc-firefox-theme/chrome/browser/devtools/markup-view.css @@ -15,6 +15,18 @@ border: 1px solid #CCC; } +/* Draw a circle next to nodes that have a pseudo class lock. + Center vertically with the 1.4em line height on .tag-line */ +.child.pseudoclass-locked::before { + content: ""; + background: var(--theme-highlight-lightorange); + border-radius: 50%; + width: .8em; + height: .8em; + margin-top: .3em; + left: 1px; + position: absolute; +} /* Selected nodes in the tree should have light selected text. theme-selected doesn't work in this case since the text is a diff --git a/arc-firefox-theme/chrome/browser/devtools/memory.css b/arc-firefox-theme/chrome/browser/devtools/memory.css new file mode 100644 index 0000000..78f8f1f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/devtools/memory.css @@ -0,0 +1,81 @@ +/* vim:set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* CSS Variables specific to this panel that aren't defined by the themes */ +.theme-dark { + --cell-border-color: rgba(255,255,255,0.15); + --cell-border-color-light: rgba(255,255,255,0.1); + --focus-cell-border-color: rgba(255,255,255,0.5); + --row-alt-background-color: rgba(29,79,115,0.15); + --row-hover-background-color: rgba(29,79,115,0.25); +} + +.theme-light { + --cell-border-color: rgba(0,0,0,0.15); + --cell-border-color-light: rgba(0,0,0,0.1); + --focus-cell-border-color: rgba(0,0,0,0.3); + --row-alt-background-color: rgba(76,158,217,0.1); + --row-hover-background-color: rgba(76,158,217,0.2); +} + +.heap-view { + position: relative; +} + +.heap-view .theme-twisty { + text-align: end; +} + +.heap-tree-item { + list-style-type: none; + /* display: none; */ +} + +.heap-tree-item[expanded] { + display: block; +} + +.heap-tree-item:nth-child(2n) { + background-color: var(--row-alt-background-color); +} + +.heap-tree-item:hover { + background-color: var(--row-hover-background-color); +} + +.heap-tree-item:focus { + background-color: var(--theme-selection-background); +} + +.heap-tree-item:focus description { + color: var(--theme-selection-color) !important; +} + +.heap-tree-item:focus .call-tree-cell { + -moz-border-end-color: var(--focus-cell-border-color); +} + + +.heap-tree-cell[type="bytes"], .heap-tree-cell[type="count"] { + position: absolute; + text-align: right; + width: 40px; +} + +.heap-tree-cell[type="name"] { + width: 150px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +.heap-tree-cell[type="count"] { + left: 300px; +} + +.heap-tree-cell[type="bytes"] { + left: 250px; +} diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css index 9448a39..d47f112 100644 --- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css +++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* vim:set ts=2 sw=2 sts=2 et: */ /* 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 @@ -146,25 +142,27 @@ width: 16px; height: 16px; -moz-margin-end: 4px; + cursor: pointer; } .security-state-insecure { - list-style-image: url(chrome://browser/skin/identity-not-secure.svg); + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); } .security-state-secure { - cursor: pointer; list-style-image: url(chrome://browser/skin/identity-secure.svg); } .security-state-weak { - cursor: pointer; list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); } .security-state-broken { - cursor: pointer; - list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + list-style-image: url(chrome://browser/skin/controlcenter/warning-gray.svg); +} + +.security-state-local { + list-style-image: url(chrome://browser/skin/identity-not-secure.svg); } .requests-menu-type { @@ -200,7 +198,8 @@ label.requests-menu-status-code { } box.requests-menu-status:not([code]) { - background-color: var(--theme-content-color2); + background-color: var(--theme-highlight-red); + border-radius: 0; /* squares */ } box.requests-menu-status[code="cached"] { @@ -420,7 +419,7 @@ box.requests-menu-status[code^="5"] { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #details-pane-toggle { list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -547,6 +546,10 @@ box.requests-menu-status[code^="5"] { -moz-padding-start: 1em; } +.theme-dark #security-error-message { + color: var(--theme-selection-color); +} + #security-tabpanel { overflow: auto; } @@ -560,7 +563,7 @@ box.requests-menu-status[code^="5"] { height: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .security-warning-icon { background-image: url(alerticon-warning@2x.png); } @@ -832,6 +835,7 @@ box.requests-menu-status[code^="5"] { } } +/* Platform overrides (copied in from the old platform specific files) */ #headers-summary-resend { padding: 4px; } diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css index 8eafa36..4279a16 100644 --- a/arc-firefox-theme/chrome/browser/devtools/performance.css +++ b/arc-firefox-theme/chrome/browser/devtools/performance.css @@ -20,6 +20,16 @@ --row-hover-background-color: rgba(76,158,217,0.2); } +/** + * A generic class to hide elements, replacing the `element.hidden` attribute + * that we use to hide elements that can later be active + */ +.hidden { + display: none; + width: 0px; + height: 0px; +} + /* Toolbar */ #performance-toolbar-control-other { @@ -224,8 +234,20 @@ .call-tree-header[type="count"], .call-tree-cell[type="count"], .call-tree-header[type="self-count"], -.call-tree-cell[type="self-count"] { - width: 9vw; +.call-tree-cell[type="self-count"], +.call-tree-header[type="size"], +.call-tree-cell[type="size"], +.call-tree-header[type="self-size"], +.call-tree-cell[type="self-size"], +.call-tree-header[type="count-percentage"], +.call-tree-cell[type="count-percentage"], +.call-tree-header[type="self-count-percentage"], +.call-tree-cell[type="self-count-percentage"], +.call-tree-header[type="size-percentage"], +.call-tree-cell[type="size-percentage"], +.call-tree-header[type="self-size-percentage"], +.call-tree-cell[type="self-size-percentage"] { + width: 6vw; } .call-tree-header[type="function"], @@ -518,22 +540,31 @@ font-weight: bold; } +.marker-details-customcontainer .custom-button { + padding: 2px 5px; + border-width: 1px; +} + /** * Marker colors */ -menuitem.marker-color-graphs-purple:before, -.marker-color-graphs-purple { - background-color: var(--theme-graphs-purple); -} -menuitem.marker-color-graphs-grey:before, -.marker-color-graphs-grey{ - background-color: var(--theme-graphs-grey); -} menuitem.marker-color-graphs-green:before, .marker-color-graphs-green { background-color: var(--theme-graphs-green); } +menuitem.marker-color-graphs-blue:before, +.marker-color-graphs-blue { + background-color: var(--theme-graphs-blue); +} +menuitem.marker-color-graphs-bluegrey:before, +.marker-color-graphs-bluegrey { + background-color: var(--theme-graphs-bluegrey); +} +menuitem.marker-color-graphs-purple:before, +.marker-color-graphs-purple { + background-color: var(--theme-graphs-purple); +} menuitem.marker-color-graphs-yellow:before, .marker-color-graphs-yellow { background-color: var(--theme-graphs-yellow); @@ -542,9 +573,9 @@ menuitem.marker-color-graphs-red:before, .marker-color-graphs-red { background-color: var(--theme-graphs-red); } -menuitem.marker-color-graphs-blue:before, -.marker-color-graphs-blue { - background-color: var(--theme-graphs-blue); +menuitem.marker-color-graphs-grey:before, +.marker-color-graphs-grey{ + background-color: var(--theme-graphs-grey); } /** @@ -558,6 +589,14 @@ menuitem.marker-color-graphs-blue:before, min-width: 200px; } +#optimizations-graph { + height: 30px; +} + +#jit-optimizations-view.empty #optimizations-graph { + display: none !important; +} + /* override default styles for tree widget */ #jit-optimizations-view .tree-widget-empty-text { font-size: inherit; @@ -670,9 +709,6 @@ description.opt-icon::before { .opt-icon[severity=warning]::before { background-position: -24px -24px; } -.opt-icon[type=linkable]::before { - cursor: pointer; -} ul.frames-list { list-style-type: none; diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css index 8fad666..e9ae604 100644 --- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css +++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css @@ -5,10 +5,12 @@ /* CSS Variables specific to this panel that aren't defined by the themes */ .theme-light { --rule-highlight-background-color: #ffee99; + --rule-filter-icon: url(magnifying-glass-light.png); } .theme-dark { --rule-highlight-background-color: #594724; + --rule-filter-icon: url(magnifying-glass.png); } .ruleview { @@ -103,18 +105,25 @@ background-size: 13px 12px; -moz-margin-start: 5px; display: inline-block; - vertical-align: top; width: 13px; height: 12px; } - -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .ruleview-warning { background-image: url(alerticon-warning@2x.png); } } +.ruleview-overridden-rule-filter { + background-image: var(--rule-filter-icon); + background-size: 11px 11px; + -moz-margin-start: 5px; + display: inline-block; + width: 11px; + height: 11px; +} + .ruleview-ruleopen { -moz-padding-end: 5px; } @@ -196,7 +205,7 @@ background-size: 1em; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .ruleview-bezierswatch { background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png"); background-size: 1em; @@ -300,13 +309,15 @@ * the state */ #ruleview-add-rule-button, -#pseudo-class-panel-toggle { +#pseudo-class-panel-toggle, +.ruleview-overridden-rule-filter { opacity: 0.8; } #ruleview-add-rule-button:not([disabled]):hover, #pseudo-class-panel-toggle:hover, -#pseudo-class-panel-toggle[checked] { +#pseudo-class-panel-toggle[checked], +.ruleview-overridden-rule-filter:hover { opacity: 1; } diff --git a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css index 9ba9ff8..4626a38 100644 --- a/arc-firefox-theme/chrome/browser/devtools/shadereditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css @@ -60,7 +60,7 @@ border: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .side-menu-widget-item-checkbox .checkbox-check { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css index a4a300f..0cc2fca 100644 --- a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css @@ -115,7 +115,7 @@ height: 40px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .stylesheet-enabled { background-image: url(itemToggle@2x.png); } diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css index 0d66638..3be55bd 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css +++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css @@ -187,7 +187,7 @@ text { -moz-box-flex: 1; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #inspector-pane-toggle { list-style-image: url(debugger-collapse@2x.png); -moz-image-region: rect(0px,32px,32px,0px); diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css index d875c23..d17690e 100644 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css +++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css @@ -2,10 +2,6 @@ * 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 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/. */ - /* General output styles */ a { @@ -323,18 +319,32 @@ a { } .message[category=console][severity=error] > .icon::before, -.message[category=output][severity=error] > .icon::before { +.message[category=output][severity=error] > .icon::before, +.message[category=server][severity=error] > .icon::before { background-position: -12px -36px; } -.message[category=console][severity=warn] > .icon::before { +.message[category=console][severity=warn] > .icon::before, +.message[category=server][severity=warn] > .icon::before { background-position: -24px -36px; } -.message[category=console][severity=info] > .icon::before { +.message[category=console][severity=info] > .icon::before, +.message[category=server][severity=info] > .icon::before { background-position: -36px -36px; } +/* Server Logging Styles */ + +.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before { + background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99)); + border-color: rgb(76, 143, 76); +} + +.message[category=server] > .indent { + -moz-border-end: solid #90B090 6px; +} + /* Input and output styles */ .message[category=input] > .indent, .message[category=output] > .indent { @@ -364,7 +374,7 @@ a { background-size: 16px 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .jsterm-input-node { background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32); } @@ -586,6 +596,3 @@ a { } } -.jsterm-input-node { - width: 98%; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css deleted file mode 100644 index 3803fe3..0000000 --- a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css +++ /dev/null @@ -1,99 +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/. */ - -body { - font-family: sans-serif; - font-size: 11px; - background: #EEE; - color: #000; -} - -#header { - padding: 5px; - overflow-x:auto; - display: block; -} - -h1 { - font-size: 13px; - line-height: 15px; - padding: 3px 10px; - vertical-align: bottom; - margin: 0px; - background: linear-gradient(#BBB, #999); - border-radius: 2px; - text-shadow: #FFF 0px 1px 0px; -} - -h1 .info { - font-size: 11px; - line-height: 15px; - vertical-align: bottom; - float: right; - color: #333; - padding-right: 3px; -} - -.property-table { - padding: 2px 5px; - background: linear-gradient(#FFF, #F8F8F8); - color: #333; - width: 100%; - max-height: 330px; - overflow: auto; - display: block; -} - -.property-name { - font-size: 11px; - font-weight: bold; - color: #000; - white-space: nowrap; - text-align: end; - vertical-align: top; - width: 10%; -} - -.property-value { - padding-right: 5px; - font-size: 11px; - word-wrap: break-word; - width: 90%; -} - -div.group { - margin-top: 10px; -} - -div.group, -#header { - background: #FFF; - border-color: #E1E1E1; - border-style: solid; - border-width: 1px; - box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2); - border-radius: 4px 4px 4px 4px; -} - -img#responseImageNode { - box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px; - max-width: 100%; -} - -#responseImageNodeDiv { - padding: 5px; -} - -#responseBodyFetchLink, #requestBodyFetchLink { - padding: 5px; - margin: 0; - cursor: pointer; - font-weight: bold; - font-size: 1.1em; - text-decoration: underline; -} - -.longStringEllipsis { - margin-left: 0.6em; -} diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css index 18a6757..a23f0f5 100644 --- a/arc-firefox-theme/chrome/browser/devtools/widgets.css +++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css @@ -1,7 +1,3 @@ -/* 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/. */ - /* vim:set ts=2 sw=2 sts=2 et: */ /* 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 @@ -108,7 +104,7 @@ padding: 0; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .scrollbutton-up > .toolbarbutton-icon, .scrollbutton-down > .toolbarbutton-icon { background-image: url("breadcrumbs-scrollbutton@2x.png"); @@ -217,6 +213,7 @@ padding-bottom: 0; } + .breadcrumbs-widget-item:not([checked]) { background: -moz-element(#breadcrumb-separator-normal) no-repeat center left; } @@ -638,7 +635,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variable-or-property-non-writable-icon { background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png"); } @@ -738,7 +735,7 @@ height: 16px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-delete { background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png"); } @@ -764,7 +761,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-edit { background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png"); } @@ -790,7 +787,7 @@ cursor: pointer; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .variables-view-open-inspector { background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png"); } @@ -1421,7 +1418,7 @@ } } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .tree-widget-item:before { background-image: url("chrome://browser/skin/devtools/controls@2x.png"); } @@ -1591,9 +1588,3 @@ background-image: url("app-manager/add.svg"); -moz-margin-end: 2px; } - -.side-menu-widget-group-checkbox .checkbox-spacer-box, -.side-menu-widget-item-checkbox .checkbox-spacer-box { - margin: 0; - border: none; -} diff --git a/arc-firefox-theme/chrome/browser/drm-icon.svg b/arc-firefox-theme/chrome/browser/drm-icon.svg index bd7c7ba..db2b36d 100644 --- a/arc-firefox-theme/chrome/browser/drm-icon.svg +++ b/arc-firefox-theme/chrome/browser/drm-icon.svg @@ -2,47 +2,37 @@ - + - - + + - - + + - - - + + + + + - - - - - - - - - - - - - - - + + + diff --git a/arc-firefox-theme/chrome/browser/engineManager.css b/arc-firefox-theme/chrome/browser/engineManager.css deleted file mode 100644 index 6a1076e..0000000 --- a/arc-firefox-theme/chrome/browser/engineManager.css +++ /dev/null @@ -1,11 +0,0 @@ - -#engineList treechildren::-moz-tree-image(engineName) { - -moz-margin-end: 4px; - -moz-margin-start: 1px; - width: 16px; - height: 16px; -} - -#engineList treechildren::-moz-tree-row { - height: 20px; -} diff --git a/arc-firefox-theme/chrome/browser/fullscreen-darknoise.png b/arc-firefox-theme/chrome/browser/fullscreen-darknoise.png deleted file mode 100644 index 5c33e24..0000000 Binary files a/arc-firefox-theme/chrome/browser/fullscreen-darknoise.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/fullscreen/insecure.svg b/arc-firefox-theme/chrome/browser/fullscreen/insecure.svg new file mode 100644 index 0000000..eec272f --- /dev/null +++ b/arc-firefox-theme/chrome/browser/fullscreen/insecure.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/fullscreen/secure.svg b/arc-firefox-theme/chrome/browser/fullscreen/secure.svg new file mode 100644 index 0000000..960fc1d --- /dev/null +++ b/arc-firefox-theme/chrome/browser/fullscreen/secure.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/fxa/android.png b/arc-firefox-theme/chrome/browser/fxa/android.png index bb1ada8..b014c42 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/android.png and b/arc-firefox-theme/chrome/browser/fxa/android.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/android@2x.png b/arc-firefox-theme/chrome/browser/fxa/android@2x.png index 957b907..bbd602f 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/android@2x.png and b/arc-firefox-theme/chrome/browser/fxa/android@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar.png index 6ed0e7a..8faca35 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/default-avatar.png and b/arc-firefox-theme/chrome/browser/fxa/default-avatar.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png b/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png index 0bda852..1428e23 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png and b/arc-firefox-theme/chrome/browser/fxa/default-avatar@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/logo.png b/arc-firefox-theme/chrome/browser/fxa/logo.png index b54b392..63c006c 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/logo.png and b/arc-firefox-theme/chrome/browser/fxa/logo.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/logo@2x.png b/arc-firefox-theme/chrome/browser/fxa/logo@2x.png index 5d25f05..283b091 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/logo@2x.png and b/arc-firefox-theme/chrome/browser/fxa/logo@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png b/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png index c6de26c..3d37308 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png and b/arc-firefox-theme/chrome/browser/fxa/sync-illustration.png differ diff --git a/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png b/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png index bc13da3..23a3858 100644 Binary files a/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png and b/arc-firefox-theme/chrome/browser/fxa/sync-illustration@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/heartbeat-icon.svg b/arc-firefox-theme/chrome/browser/heartbeat-icon.svg index bb1fc5c..db2cb5f 100644 --- a/arc-firefox-theme/chrome/browser/heartbeat-icon.svg +++ b/arc-firefox-theme/chrome/browser/heartbeat-icon.svg @@ -1,19 +1,13 @@ - + - - - - - - - - - - - - + + + + + + diff --git a/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg b/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg index 921354a..3f59099 100644 --- a/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg +++ b/arc-firefox-theme/chrome/browser/heartbeat-star-lit.svg @@ -1,50 +1,7 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg b/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg index 48f7a0f..143fe48 100644 --- a/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg +++ b/arc-firefox-theme/chrome/browser/heartbeat-star-off.svg @@ -1,50 +1,7 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/arc-firefox-theme/chrome/browser/info.svg b/arc-firefox-theme/chrome/browser/info.svg index f004119..9ff38dd 100644 --- a/arc-firefox-theme/chrome/browser/info.svg +++ b/arc-firefox-theme/chrome/browser/info.svg @@ -2,7 +2,7 @@ - + diff --git a/arc-firefox-theme/chrome/browser/newtab/newTab.css b/arc-firefox-theme/chrome/browser/newtab/newTab.css index 4073cd9..16a21d3 100644 --- a/arc-firefox-theme/chrome/browser/newtab/newTab.css +++ b/arc-firefox-theme/chrome/browser/newtab/newTab.css @@ -119,7 +119,7 @@ .newtab-cell:not([ignorehover]) .newtab-link:hover, .newtab-site[dragged] { border: 2px solid white; - box-shadow: 0 0 6px 2px #4cb1ff; + box-shadow: 0 0 6px 1px #add6ff; margin: -2px; } @@ -171,7 +171,10 @@ } .newtab-site:hover .newtab-title { - color: #222; + color: white; + background-color: #333; + border: 1px solid #333; + border-top: 1px solid white; } .newtab-site[pinned] .newtab-title { diff --git a/arc-firefox-theme/chrome/browser/notification-pluginAlert@2x.png b/arc-firefox-theme/chrome/browser/notification-pluginAlert@2x.png new file mode 100644 index 0000000..f335996 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/notification-pluginAlert@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/notification-pluginBlocked@2x.png b/arc-firefox-theme/chrome/browser/notification-pluginBlocked@2x.png new file mode 100644 index 0000000..5126be0 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/notification-pluginBlocked@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/notification-pluginNormal@2x.png b/arc-firefox-theme/chrome/browser/notification-pluginNormal@2x.png new file mode 100644 index 0000000..c081bbb Binary files /dev/null and b/arc-firefox-theme/chrome/browser/notification-pluginNormal@2x.png differ diff --git a/arc-firefox-theme/chrome/browser/places/autocomplete-star.png b/arc-firefox-theme/chrome/browser/places/autocomplete-star.png new file mode 100644 index 0000000..2675f93 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/places/autocomplete-star.png differ diff --git a/arc-firefox-theme/chrome/browser/places/star-icons.png b/arc-firefox-theme/chrome/browser/places/star-icons.png deleted file mode 100644 index fd4e0cd..0000000 Binary files a/arc-firefox-theme/chrome/browser/places/star-icons.png and /dev/null differ diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css index c83e0eb..30b860f 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/preferences.css @@ -21,6 +21,27 @@ treecol { -moz-user-select: none; } +#engineList treechildren::-moz-tree-image(engineShown, checked), +#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check"); + width: 21px; + height: 21px; +} + +#engineList treechildren::-moz-tree-image(engineShown, checked, selected), +#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) { + list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); +} + +#engineList treechildren::-moz-tree-row, +#blocklistsTree treechildren::-moz-tree-row { + min-height: 36px; +} + +#selectionCol { + min-width: 26px; +} + /* Category List */ #categories { @@ -414,6 +435,101 @@ description > html|a { -moz-box-align: start; } +#syncStatusMessage { + visibility: collapse; + opacity: 0; + transition: opacity 1s linear; + padding: 14px 8px 14px 14px; + border-radius: 2px; +} + +#syncStatusMessage[message-type] { + visibility: visible; + opacity: 1; +} + +#syncStatusMessage[message-type="verify-success"] { + background-color: #74BF43; +} + +#syncStatusMessage[message-type="verify-error"] { + background-color: #D74345; +} + +#syncStatusMessage[message-type="migration"] { + background-color: #FF9500; +} + +#sync-migration-buttons-deck { + visibility: collapse; +} + +#learnMoreLink { + margin: 0; + color: #FBFBFB; + text-decoration: underline; +} + +#syncStatusMessage[message-type="migration"] #sync-migration-buttons-deck { + visibility: visible; +} + +#sync-migration-buttons-deck { + margin-top: 20px; +} + +#sync-migration-buttons-deck button { + margin: 0 10px 0 0; + border: 0; + border-radius: 2px; +} + +#sync-migrate-upgrade, +#sync-migrate-resend { + background-color: #0095DD; + color: #FBFBFB; +} + +#sync-migrate-upgrade:hover, +#sync-migrate-resend:hover { + background-color: #008ACB; +} + +#sync-migrate-upgrade:hover:active, +#sync-migrate-resend:hover:active { + background-color: #006B9D; +} + +#syncStatusMessageWrapper { + -moz-box-flex: 1; + padding-right: 5px; +} + +#syncStatusMessageTitle, #syncStatusMessageDescription { + color: #FBFBFB; +} + +#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle { + display: none; +} + +#syncStatusMessageTitle { + font-weight: bold !important; + font-size: 16px; + line-height: 157%; + margin: 0 0 20px; +} + +#syncStatusMessageDescription { + font-size: 14px; + line-height: 158%; + margin: 0 !important; +} + +#syncStatusMessageClose { + margin: 0px; +} + #fxaSyncEngines > vbox:first-child { margin-right: 80px; } @@ -459,7 +575,6 @@ description > html|a { } #signedOutAccountBoxTitle { - margin-inline-start: 6px !important; font-weight: bold; } @@ -468,9 +583,19 @@ description > html|a { margin-top: 11px; } +.fxaAccountBoxButtons > * { + -moz-box-flex: 1; +} + .fxaAccountBoxButtons > button { padding-left: 11px; padding-right: 11px; + margin: 0; + min-width: 0; +} + +.fxaAccountBoxButtons > button:first-child { + margin-right: 14px !important; } .fxaSyncIllustration { diff --git a/arc-firefox-theme/chrome/browser/preferences/in-content/search.css b/arc-firefox-theme/chrome/browser/preferences/in-content/search.css index a203a4d..db9fd3a 100644 --- a/arc-firefox-theme/chrome/browser/preferences/in-content/search.css +++ b/arc-firefox-theme/chrome/browser/preferences/in-content/search.css @@ -19,16 +19,6 @@ margin: .5em 0; } -#engineList treechildren::-moz-tree-image(engineShown, checked) { - list-style-image: url("chrome://global/skin/in-content/check.svg#check"); - width: 21px; - height: 21px; -} - -#engineList treechildren::-moz-tree-image(engineShown, checked, selected) { - list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted"); -} - #engineList treechildren::-moz-tree-image(engineName) { -moz-margin-end: 10px; -moz-margin-start: 1px; @@ -36,10 +26,6 @@ height: 16px; } -#engineList treechildren::-moz-tree-row { - min-height: 36px; -} - #engineList treechildren::-moz-tree-drop-feedback { background-color: Highlight; width: 10000px; /* 100% doesn't work; 10k is hopefully larger than any window diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index dfb78a4..5779eae 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -1734,6 +1734,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { .urlbar-history-dropmarker { -moz-appearance: toolbarbutton-dropdown; + transition: opacity 0.15s ease; +} + +#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { + opacity: 0; } #urlbar-container { @@ -1853,7 +1858,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -2149,11 +2153,20 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box // padding-left: 7px; //} +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), +/* This adds a second flip for the notification anchors, as they don't switch direction + for RTL mode. */ .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; +} + .notification-anchor-icon { list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; @@ -2593,8 +2606,7 @@ notification[value="loop-sharing-notification"] .messageImage { .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/star-icons.png"); - -moz-image-region: rect(0px 32px 16px 16px); + list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } @@ -3672,6 +3684,14 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- box-shadow: inset -5px 0 ThreeDShadow; } +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); +} + +.alltabs-endimage[soundplaying] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); +} + /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading_16.png"); @@ -3753,15 +3773,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { margin-top: 1em; } -#sync-error-panel-title, #sync-start-panel-title { font-size: 120%; font-weight: bold; margin-bottom: 5px; } -#sync-start-panel-subtitle, -#sync-error-panel-subtitle { +#sync-start-panel-subtitle { margin: 0; } @@ -3791,23 +3809,52 @@ toolbarbutton.chevron > .toolbarbutton-icon { margin-left: 1em; } -#full-screen-warning-message { - background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); - color: white; - border-radius: 4px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; + +html|*#fullscreen-warning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; +} + +html|*#fullscreen-warning::before { + margin: 0; + width: 24px; height: 24px; } -.full-screen-description { - font-size: 150%; +html|*#fullscreen-warning.verifiedIdentity::before, +html|*#fullscreen-warning.verifiedDomain::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); } -#full-screen-domain-text { - font-size: 300%; +html|*#fullscreen-warning.unknownIdentity::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); } +html|*#fullscreen-domain-text, +html|*#fullscreen-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; +} + +html|*#fullscreen-domain { + font-weight: bold; + margin: 0; +} + +html|*#fullscreen-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; +} /* Responsive Mode */ @@ -3960,7 +4007,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -3979,7 +4026,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { -moz-image-region: rect(0px,32px,16px,16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px,32px,32px,0px); @@ -3994,7 +4041,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } @@ -4069,12 +4116,14 @@ toolbarbutton.chevron > .toolbarbutton-icon { } .devtools-responsiveui-home-button { + -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; @@ -4102,6 +4151,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; @@ -4126,7 +4176,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -4218,7 +4268,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); @@ -4247,7 +4297,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -4335,7 +4385,7 @@ html|*#gcli-output-frame { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } @@ -4826,14 +4876,6 @@ toolbar[brighttext] #downloads-indicator-counter { background: none; } -.chat-toolbarbutton:hover { - background-color: rgba(255,255,255,.35); -} - -.chat-toolbarbutton:hover:active { - background-color: rgba(255,255,255,.5); -} - .chat-toolbarbutton > .toolbarbutton-text { display: none; } @@ -4847,7 +4889,11 @@ toolbar[brighttext] #downloads-indicator-counter { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } -.chat-close-button:-moz-any(:hover,:hover:active) { +.chat-close-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); +} + +.chat-close-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } @@ -4855,7 +4901,11 @@ toolbar[brighttext] #downloads-indicator-counter { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } -.chat-minimize-button:-moz-any(:hover,:hover:active) { +.chat-minimize-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); +} + +.chat-minimize-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } @@ -4864,7 +4914,11 @@ toolbar[brighttext] #downloads-indicator-counter { transform: rotate(180deg); } -.chat-swap-button:-moz-any(:hover,:hover:active) { +.chat-swap-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); +} + +.chat-swap-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } @@ -4872,22 +4926,46 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { transform: none; } +.chat-loop-hangup { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white"); + background-color: #d13f1a; + border: 1px solid #d13f1a; + border-top-right-radius: 4px; + width: 32px; + height: 26px; + margin-top: -6px; + margin-bottom: -5px; + -moz-margin-start: 6px; + -moz-margin-end: -5px; +} + +.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) { + background-color: #ef6745; + border-color: #ef6745; +} + .chat-title { - font-weight: bold; - color: black; + color: #666; text-shadow: none; cursor: inherit; } .chat-titlebar { - height: 30px; - min-height: 30px; + height: 26px; + min-height: 26px; width: 100%; margin: 0; - padding: 7px 6px; - border: none; - border-bottom: 1px solid #ccc; + padding: 5px 4px; + border: 1px solid #ebebeb; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; cursor: pointer; + background-color: #ebebeb; +} + +.chat-titlebar[selected] { + background-color: #f0f0f0; } .chat-titlebar > .notification-anchor-icon { @@ -4906,18 +4984,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { background-position: 0 -10px; } -chatbox[dark=true] > .chat-titlebar, -chatbox[dark=true] > .chat-titlebar[selected] { - border-bottom: none; - background-color: #000; - background-image: none; -} - -chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { - font-weight: normal; - color: #c1c1c1; -} - .chat-frame { padding: 0; margin: 0; @@ -4932,6 +4998,10 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { width: 21px; border: 1px solid #ccc; border-bottom: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255,255,255,.43), transparent); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } @media (min-resolution: 2dppx) { @@ -4940,6 +5010,15 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { } } +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; +} + +.chatbar-button[activity]:not([open]) { + background-image: radial-gradient(circle farthest-corner at center 2px, rgb(254,254,255) 3%, rgba(210,235,255,0.9) 12%, rgba(148,205,253,0.6) 30%, rgba(148,205,253,0.2) 70%); +} + .chatbar-button > .toolbarbutton-icon { width: 16px; } @@ -4975,9 +5054,18 @@ chatbar { chatbox { -moz-margin-start: 4px; - background-color: white; - border: 1px solid #ccc; - border-bottom: none; + background-color: transparent; +} + +chatbar > chatbox { + /* Apply the same border-radius as the .chat-titlebar to make the box-shadow + go round nicely. */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; + box-shadow: 0 0 5px rgba(0,0,0,.3); + /* Offset the chatbox the same amount as the box-shadows' spread, to make it + visible. */ + -moz-margin-end: 5px; } window > chatbox { @@ -4985,39 +5073,7 @@ window > chatbox { margin: 0px; border: none; padding: 0px; -} - -.chat-titlebar { - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255,255,255,.3), transparent); -} - -.chat-titlebar[selected] { - background-color: #f0f0f0; -} - -.chatbar-button { - -moz-appearance: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255,255,255,.3), transparent); -} - -.chatbar-button > .toolbarbutton-icon { - -moz-margin-end: 0; -} - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; -} - -.chatbar-button[activity] { - background-image: radial-gradient(circle farthest-corner at center 3px, rgb(233,242,252) 3%, rgba(172,206,255,0.75) 40%, rgba(87,151,201,0.5) 80%, transparent); -} - -chatbox { - border-top-left-radius: 2.5px; - border-top-right-radius: 2.5px; + border-radius: 4px; } /* Customization mode */ diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css index b559ab2..ed2fb4d 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css @@ -1310,7 +1310,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { -moz-margin-start: 0; } .urlbar-history-dropmarker { - -moz-appearance: toolbarbutton-dropdown; } + -moz-appearance: toolbarbutton-dropdown; + transition: opacity 0.15s ease; } + +#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { + opacity: 0; } #urlbar-container { -moz-box-align: center; } @@ -1377,7 +1381,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -1583,10 +1586,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #2b2e39; } +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; } + .notification-anchor-icon { list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; @@ -1930,8 +1939,7 @@ notification[value="loop-sharing-notification"] .messageImage { .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/star-icons.png"); - -moz-image-region: rect(0px 32px 16px 16px); + list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } @@ -2712,6 +2720,12 @@ lwtHeader;*/ /* box-shadow instead of background-color to work around native styling */ box-shadow: inset -5px 0 ThreeDShadow; } +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } + +.alltabs-endimage[soundplaying] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); } + /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading_16.png"); @@ -2775,14 +2789,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { .sync-panel-button-box { margin-top: 1em; } -#sync-error-panel-title, #sync-start-panel-title { font-size: 120%; font-weight: bold; margin-bottom: 5px; } -#sync-start-panel-subtitle, -#sync-error-panel-subtitle { +#sync-start-panel-subtitle { margin: 0; } /* Status panel */ @@ -2807,19 +2819,45 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-top-left-radius: .3em; margin-left: 1em; } -#full-screen-warning-message { - background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); - color: white; - border-radius: 4px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; } +html|*#fullscreen-warning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; } + +html|*#fullscreen-warning::before { + margin: 0; + width: 24px; + height: 24px; } + +html|*#fullscreen-warning.verifiedIdentity::before, +html|*#fullscreen-warning.verifiedDomain::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); } + +html|*#fullscreen-warning.unknownIdentity::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -.full-screen-description { - font-size: 150%; } +html|*#fullscreen-domain-text, +html|*#fullscreen-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; } + +html|*#fullscreen-domain { + font-weight: bold; + margin: 0; } -#full-screen-domain-text { - font-size: 300%; } +html|*#fullscreen-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -2946,7 +2984,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2959,7 +2997,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2969,7 +3007,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3027,11 +3065,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-home-button { + -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; @@ -3053,6 +3093,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; @@ -3071,7 +3112,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3159,7 +3200,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3181,7 +3222,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3252,7 +3293,7 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { @@ -3652,12 +3693,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin: 0; background: none; } -.chat-toolbarbutton:hover { - background-color: rgba(255, 255, 255, 0.35); } - -.chat-toolbarbutton:hover:active { - background-color: rgba(255, 255, 255, 0.5); } - .chat-toolbarbutton > .toolbarbutton-text { display: none; } @@ -3668,40 +3703,70 @@ toolbar[brighttext] #downloads-indicator-counter { .chat-close-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } -.chat-close-button:-moz-any(:hover, :hover:active) { +.chat-close-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } + +.chat-close-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } .chat-minimize-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } -.chat-minimize-button:-moz-any(:hover, :hover:active) { +.chat-minimize-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } + +.chat-minimize-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } .chat-swap-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); transform: rotate(180deg); } -.chat-swap-button:-moz-any(:hover, :hover:active) { +.chat-swap-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } + +.chat-swap-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } chatbar > chatbox > .chat-titlebar > .chat-swap-button { transform: none; } +.chat-loop-hangup { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white"); + background-color: #d13f1a; + border: 1px solid #d13f1a; + border-top-right-radius: 4px; + width: 32px; + height: 26px; + margin-top: -6px; + margin-bottom: -5px; + -moz-margin-start: 6px; + -moz-margin-end: -5px; } + +.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover, :hover:active) { + background-color: #ef6745; + border-color: #ef6745; } + .chat-title { - font-weight: bold; - color: black; + color: #666; text-shadow: none; cursor: inherit; } .chat-titlebar { - height: 30px; - min-height: 30px; + height: 26px; + min-height: 26px; width: 100%; margin: 0; - padding: 7px 6px; - border: none; - border-bottom: 1px solid #ccc; - cursor: pointer; } + padding: 5px 4px; + border: 1px solid #ebebeb; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + cursor: pointer; + background-color: #ebebeb; } + +.chat-titlebar[selected] { + background-color: #f0f0f0; } .chat-titlebar > .notification-anchor-icon { margin-left: 2px; @@ -3716,16 +3781,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { background-size: 100% 20px; background-position: 0 -10px; } -chatbox[dark=true] > .chat-titlebar, -chatbox[dark=true] > .chat-titlebar[selected] { - border-bottom: none; - background-color: #000; - background-image: none; } - -chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { - font-weight: normal; - color: #c1c1c1; } - .chat-frame { padding: 0; margin: 0; @@ -3738,11 +3793,22 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { height: 21px; width: 21px; border: 1px solid #ccc; - border-bottom: none; } + border-bottom: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } @media (min-resolution: 2dppx) { .chatbar-button { list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; } + +.chatbar-button[activity]:not([open]) { + background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } + .chatbar-button > .toolbarbutton-icon { width: 16px; } @@ -3771,41 +3837,24 @@ chatbar { chatbox { -moz-margin-start: 4px; - background-color: white; - border: 1px solid #ccc; - border-bottom: none; } + background-color: transparent; } + +chatbar > chatbox { + /* Apply the same border-radius as the .chat-titlebar to make the box-shadow + go round nicely. */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + /* Offset the chatbox the same amount as the box-shadows' spread, to make it + visible. */ + -moz-margin-end: 5px; } window > chatbox { -moz-margin-start: 0px; margin: 0px; border: none; - padding: 0px; } - -.chat-titlebar { - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chatbar-button { - -moz-appearance: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chatbar-button > .toolbarbutton-icon { - -moz-margin-end: 0; } - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity] { - background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); } - -chatbox { - border-top-left-radius: 2.5px; - border-top-right-radius: 2.5px; } + padding: 0px; + border-radius: 4px; } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css index 1e9220c..3d6a6cf 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css @@ -1309,7 +1309,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { -moz-margin-start: 0; } .urlbar-history-dropmarker { - -moz-appearance: toolbarbutton-dropdown; } + -moz-appearance: toolbarbutton-dropdown; + transition: opacity 0.15s ease; } + +#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { + opacity: 0; } #urlbar-container { -moz-box-align: center; } @@ -1376,7 +1380,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -1582,10 +1585,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; } + .notification-anchor-icon { list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; @@ -1929,8 +1938,7 @@ notification[value="loop-sharing-notification"] .messageImage { .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/star-icons.png"); - -moz-image-region: rect(0px 32px 16px 16px); + list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } @@ -2712,6 +2720,12 @@ lwtHeader;*/ /* box-shadow instead of background-color to work around native styling */ box-shadow: inset -5px 0 ThreeDShadow; } +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } + +.alltabs-endimage[soundplaying] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); } + /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading_16.png"); @@ -2775,14 +2789,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { .sync-panel-button-box { margin-top: 1em; } -#sync-error-panel-title, #sync-start-panel-title { font-size: 120%; font-weight: bold; margin-bottom: 5px; } -#sync-start-panel-subtitle, -#sync-error-panel-subtitle { +#sync-start-panel-subtitle { margin: 0; } /* Status panel */ @@ -2807,19 +2819,45 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-top-left-radius: .3em; margin-left: 1em; } -#full-screen-warning-message { - background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); - color: white; - border-radius: 4px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; } +html|*#fullscreen-warning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; } + +html|*#fullscreen-warning::before { + margin: 0; + width: 24px; + height: 24px; } + +html|*#fullscreen-warning.verifiedIdentity::before, +html|*#fullscreen-warning.verifiedDomain::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); } + +html|*#fullscreen-warning.unknownIdentity::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -.full-screen-description { - font-size: 150%; } +html|*#fullscreen-domain-text, +html|*#fullscreen-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; } + +html|*#fullscreen-domain { + font-weight: bold; + margin: 0; } -#full-screen-domain-text { - font-size: 300%; } +html|*#fullscreen-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -2946,7 +2984,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2959,7 +2997,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2969,7 +3007,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3027,11 +3065,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-home-button { + -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; @@ -3053,6 +3093,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; @@ -3071,7 +3112,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3159,7 +3200,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3181,7 +3222,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3252,7 +3293,7 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { @@ -3652,12 +3693,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin: 0; background: none; } -.chat-toolbarbutton:hover { - background-color: rgba(255, 255, 255, 0.35); } - -.chat-toolbarbutton:hover:active { - background-color: rgba(255, 255, 255, 0.5); } - .chat-toolbarbutton > .toolbarbutton-text { display: none; } @@ -3668,40 +3703,70 @@ toolbar[brighttext] #downloads-indicator-counter { .chat-close-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } -.chat-close-button:-moz-any(:hover, :hover:active) { +.chat-close-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } + +.chat-close-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } .chat-minimize-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } -.chat-minimize-button:-moz-any(:hover, :hover:active) { +.chat-minimize-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } + +.chat-minimize-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } .chat-swap-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); transform: rotate(180deg); } -.chat-swap-button:-moz-any(:hover, :hover:active) { +.chat-swap-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } + +.chat-swap-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } chatbar > chatbox > .chat-titlebar > .chat-swap-button { transform: none; } +.chat-loop-hangup { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white"); + background-color: #d13f1a; + border: 1px solid #d13f1a; + border-top-right-radius: 4px; + width: 32px; + height: 26px; + margin-top: -6px; + margin-bottom: -5px; + -moz-margin-start: 6px; + -moz-margin-end: -5px; } + +.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover, :hover:active) { + background-color: #ef6745; + border-color: #ef6745; } + .chat-title { - font-weight: bold; - color: black; + color: #666; text-shadow: none; cursor: inherit; } .chat-titlebar { - height: 30px; - min-height: 30px; + height: 26px; + min-height: 26px; width: 100%; margin: 0; - padding: 7px 6px; - border: none; - border-bottom: 1px solid #ccc; - cursor: pointer; } + padding: 5px 4px; + border: 1px solid #ebebeb; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + cursor: pointer; + background-color: #ebebeb; } + +.chat-titlebar[selected] { + background-color: #f0f0f0; } .chat-titlebar > .notification-anchor-icon { margin-left: 2px; @@ -3716,16 +3781,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { background-size: 100% 20px; background-position: 0 -10px; } -chatbox[dark=true] > .chat-titlebar, -chatbox[dark=true] > .chat-titlebar[selected] { - border-bottom: none; - background-color: #000; - background-image: none; } - -chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { - font-weight: normal; - color: #c1c1c1; } - .chat-frame { padding: 0; margin: 0; @@ -3738,11 +3793,22 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { height: 21px; width: 21px; border: 1px solid #ccc; - border-bottom: none; } + border-bottom: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } @media (min-resolution: 2dppx) { .chatbar-button { list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; } + +.chatbar-button[activity]:not([open]) { + background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } + .chatbar-button > .toolbarbutton-icon { width: 16px; } @@ -3771,41 +3837,24 @@ chatbar { chatbox { -moz-margin-start: 4px; - background-color: white; - border: 1px solid #ccc; - border-bottom: none; } + background-color: transparent; } + +chatbar > chatbox { + /* Apply the same border-radius as the .chat-titlebar to make the box-shadow + go round nicely. */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + /* Offset the chatbox the same amount as the box-shadows' spread, to make it + visible. */ + -moz-margin-end: 5px; } window > chatbox { -moz-margin-start: 0px; margin: 0px; border: none; - padding: 0px; } - -.chat-titlebar { - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chatbar-button { - -moz-appearance: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chatbar-button > .toolbarbutton-icon { - -moz-margin-end: 0; } - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity] { - background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); } - -chatbox { - border-top-left-radius: 2.5px; - border-top-right-radius: 2.5px; } + padding: 0px; + border-radius: 4px; } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css index f7ed613..45ebf90 100644 --- a/arc-firefox-theme/chrome/browser/sass/browser-light.css +++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css @@ -1309,7 +1309,11 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { -moz-margin-start: 0; } .urlbar-history-dropmarker { - -moz-appearance: toolbarbutton-dropdown; } + -moz-appearance: toolbarbutton-dropdown; + transition: opacity 0.15s ease; } + +#urlbar:not(:hover) > .urlbar-textbox-container > .urlbar-history-dropmarker { + opacity: 0; } #urlbar-container { -moz-box-align: center; } @@ -1376,7 +1380,6 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { -moz-appearance: none; - -moz-user-focus: ignore; min-width: 80px; border-radius: 3px; padding: 4px 16px; @@ -1582,10 +1585,16 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box border-style: solid; border-color: #dcdfe3; } +/* This changes the direction of the main notification box on the url bar. */ #notification-popup-box:-moz-locale-dir(rtl), .notification-anchor-icon:-moz-locale-dir(rtl) { transform: scaleX(-1); } +/* For the anchor icons in the chat window, we don't have the notification popup box, + so we need to cancel the RTL transform. */ +.notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) { + transform: none; } + .notification-anchor-icon { list-style-image: url(moz-icon://stock/gtk-dialog-info?size=16); width: 16px; @@ -1929,8 +1938,7 @@ notification[value="loop-sharing-notification"] .messageImage { .ac-result-type-bookmark, .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) { - list-style-image: url("chrome://browser/skin/places/star-icons.png"); - -moz-image-region: rect(0px 32px 16px 16px); + list-style-image: url("chrome://browser/skin/places/autocomplete-star.png"); width: 16px; height: 16px; } @@ -2712,6 +2720,12 @@ lwtHeader;*/ /* box-shadow instead of background-color to work around native styling */ box-shadow: inset -5px 0 ThreeDShadow; } +.alltabs-endimage[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); } + +.alltabs-endimage[soundplaying] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); } + /* Sidebar */ #sidebar-throbber[loading="true"] { list-style-image: url("chrome://global/skin/icons/loading_16.png"); @@ -2775,14 +2789,12 @@ toolbarbutton.chevron > .toolbarbutton-icon { .sync-panel-button-box { margin-top: 1em; } -#sync-error-panel-title, #sync-start-panel-title { font-size: 120%; font-weight: bold; margin-bottom: 5px; } -#sync-start-panel-subtitle, -#sync-error-panel-subtitle { +#sync-start-panel-subtitle { margin: 0; } /* Status panel */ @@ -2807,19 +2819,45 @@ toolbarbutton.chevron > .toolbarbutton-icon { border-top-left-radius: .3em; margin-left: 1em; } -#full-screen-warning-message { - background-image: url("chrome://browser/skin/fullscreen-darknoise.png"); - color: white; - border-radius: 4px; - margin-top: 30px; - padding: 30px 50px; - box-shadow: 0 0 2px white; } +html|*#fullscreen-warning { + align-items: center; + background: rgba(45, 62, 72, 0.9); + border: 2px solid #fafafa; + box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5); + border-radius: 8px; + padding: 24px 16px; + font: message-box; } + +html|*#fullscreen-warning::before { + margin: 0; + width: 24px; + height: 24px; } + +html|*#fullscreen-warning.verifiedIdentity::before, +html|*#fullscreen-warning.verifiedDomain::before { + content: url("chrome://browser/skin/fullscreen/secure.svg"); } + +html|*#fullscreen-warning.unknownIdentity::before { + content: url("chrome://browser/skin/fullscreen/insecure.svg"); } -.full-screen-description { - font-size: 150%; } +html|*#fullscreen-domain-text, +html|*#fullscreen-generic-text { + font-size: 21px; + font-weight: lighter; + color: #fafafa; + margin: 0 16px; } + +html|*#fullscreen-domain { + font-weight: bold; + margin: 0; } -#full-screen-domain-text { - font-size: 300%; } +html|*#fullscreen-exit-button { + padding: 5px 30px; + font: message-box; + font-size: 14px; + font-weight: lighter; + margin: 0; + box-sizing: content-box; } /* Responsive Mode */ .browserContainer[responsivemode] { @@ -2946,7 +2984,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-rotate { list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-close { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } @@ -2959,7 +2997,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-touch[checked] { -moz-image-region: rect(0px, 32px, 16px, 16px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-touch { list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -2969,7 +3007,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png"); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-screenshot { list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png"); } } .devtools-responsiveui-resizebarV { @@ -3027,11 +3065,13 @@ toolbarbutton.chevron > .toolbarbutton-icon { background-image: linear-gradient(to right, #111 11%, #333 56%); } .devtools-responsiveui-home-button { + -moz-user-focus: ignore; width: 40px; height: 30px; list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png"); } .devtools-responsiveui-sleep-button { + -moz-user-focus: ignore; -moz-appearance: none; /* compensate browserStack top padding */ margin-top: -67px; @@ -3053,6 +3093,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-up-button, .devtools-responsiveui-volume-down-button { + -moz-user-focus: ignore; -moz-appearance: none; border: 1px solid red; min-width: 8px; @@ -3071,7 +3112,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { .devtools-responsiveui-volume-down-button { border-bottom-left-radius: 12px; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .devtools-responsiveui-resizebarV { background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png"); } @@ -3159,7 +3200,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { #developer-toolbar-toolbox-button[checked=true] { -moz-image-region: rect(0px, 64px, 16px, 48px); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-toolbox-button { list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png"); -moz-image-region: rect(0px, 32px, 32px, 0px); } @@ -3181,7 +3222,7 @@ toolbarbutton.chevron > .toolbarbutton-icon { width: 16px; opacity: 0.6; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #developer-toolbar-closebutton { list-style-image: url("chrome://browser/skin/devtools/close@2x.png"); } } #developer-toolbar-closebutton > .toolbarbutton-icon { @@ -3252,7 +3293,7 @@ html|*#gcli-output-frame { .gclitoolbar-input-node[focused="true"]::before { background-position: -16px center; } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { .gclitoolbar-input-node::before { background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png"); } } .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection { @@ -3652,12 +3693,6 @@ toolbar[brighttext] #downloads-indicator-counter { margin: 0; background: none; } -.chat-toolbarbutton:hover { - background-color: rgba(255, 255, 255, 0.35); } - -.chat-toolbarbutton:hover:active { - background-color: rgba(255, 255, 255, 0.5); } - .chat-toolbarbutton > .toolbarbutton-text { display: none; } @@ -3668,40 +3703,70 @@ toolbar[brighttext] #downloads-indicator-counter { .chat-close-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close"); } -.chat-close-button:-moz-any(:hover, :hover:active) { +.chat-close-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover"); } + +.chat-close-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active"); } .chat-minimize-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize"); } -.chat-minimize-button:-moz-any(:hover, :hover:active) { +.chat-minimize-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover"); } + +.chat-minimize-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active"); } .chat-swap-button { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand"); transform: rotate(180deg); } -.chat-swap-button:-moz-any(:hover, :hover:active) { +.chat-swap-button:hover { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover"); } + +.chat-swap-button:hover:active { list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active"); } chatbar > chatbox > .chat-titlebar > .chat-swap-button { transform: none; } +.chat-loop-hangup { + list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white"); + background-color: #d13f1a; + border: 1px solid #d13f1a; + border-top-right-radius: 4px; + width: 32px; + height: 26px; + margin-top: -6px; + margin-bottom: -5px; + -moz-margin-start: 6px; + -moz-margin-end: -5px; } + +.chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover, :hover:active) { + background-color: #ef6745; + border-color: #ef6745; } + .chat-title { - font-weight: bold; - color: black; + color: #666; text-shadow: none; cursor: inherit; } .chat-titlebar { - height: 30px; - min-height: 30px; + height: 26px; + min-height: 26px; width: 100%; margin: 0; - padding: 7px 6px; - border: none; - border-bottom: 1px solid #ccc; - cursor: pointer; } + padding: 5px 4px; + border: 1px solid #ebebeb; + border-bottom: 0; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + cursor: pointer; + background-color: #ebebeb; } + +.chat-titlebar[selected] { + background-color: #f0f0f0; } .chat-titlebar > .notification-anchor-icon { margin-left: 2px; @@ -3716,16 +3781,6 @@ chatbar > chatbox > .chat-titlebar > .chat-swap-button { background-size: 100% 20px; background-position: 0 -10px; } -chatbox[dark=true] > .chat-titlebar, -chatbox[dark=true] > .chat-titlebar[selected] { - border-bottom: none; - background-color: #000; - background-image: none; } - -chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { - font-weight: normal; - color: #c1c1c1; } - .chat-frame { padding: 0; margin: 0; @@ -3738,11 +3793,22 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { height: 21px; width: 21px; border: 1px solid #ccc; - border-bottom: none; } + border-bottom: none; + background-color: #d9d9d9; + background-image: linear-gradient(rgba(255, 255, 255, 0.43), transparent); + border-top-left-radius: 3px; + border-top-right-radius: 3px; } @media (min-resolution: 2dppx) { .chatbar-button { list-style-image: url("chrome://browser/skin/social/services-16@2x.png"); } } +.chatbar-button:hover, +.chatbar-button[open="true"] { + background-color: #f0f0f0; } + +.chatbar-button[activity]:not([open]) { + background-image: radial-gradient(circle farthest-corner at center 2px, #fefeff 3%, rgba(210, 235, 255, 0.9) 12%, rgba(148, 205, 253, 0.6) 30%, rgba(148, 205, 253, 0.2) 70%); } + .chatbar-button > .toolbarbutton-icon { width: 16px; } @@ -3771,41 +3837,24 @@ chatbar { chatbox { -moz-margin-start: 4px; - background-color: white; - border: 1px solid #ccc; - border-bottom: none; } + background-color: transparent; } + +chatbar > chatbox { + /* Apply the same border-radius as the .chat-titlebar to make the box-shadow + go round nicely. */ + border-top-left-radius: 4px; + border-top-right-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + /* Offset the chatbox the same amount as the box-shadows' spread, to make it + visible. */ + -moz-margin-end: 5px; } window > chatbox { -moz-margin-start: 0px; margin: 0px; border: none; - padding: 0px; } - -.chat-titlebar { - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chat-titlebar[selected] { - background-color: #f0f0f0; } - -.chatbar-button { - -moz-appearance: none; - background-color: #d9d9d9; - background-image: linear-gradient(rgba(255, 255, 255, 0.3), transparent); } - -.chatbar-button > .toolbarbutton-icon { - -moz-margin-end: 0; } - -.chatbar-button:hover, -.chatbar-button[open="true"] { - background-color: #f0f0f0; } - -.chatbar-button[activity] { - background-image: radial-gradient(circle farthest-corner at center 3px, #e9f2fc 3%, rgba(172, 206, 255, 0.75) 40%, rgba(87, 151, 201, 0.5) 80%, transparent); } - -chatbox { - border-top-left-radius: 2.5px; - border-top-right-radius: 2.5px; } + padding: 0px; + border-radius: 4px; } /* Customization mode */ /* This Source Code Form is subject to the terms of the Mozilla Public diff --git a/arc-firefox-theme/chrome/browser/searchbar.css b/arc-firefox-theme/chrome/browser/searchbar.css index 08fd9dd..b026cdb 100644 --- a/arc-firefox-theme/chrome/browser/searchbar.css +++ b/arc-firefox-theme/chrome/browser/searchbar.css @@ -15,47 +15,35 @@ margin: 0; } -.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text { - font-weight: bold; -} - /* Engine button */ .searchbar-engine-image { height: 16px; width: 16px; list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); + -moz-margin-start: -1px; } -.searchbar-engine-button { - -moz-appearance: none; - min-width: 0; - margin: 0; - border: 0; +/* Search go button */ +.search-go-container { -moz-box-align: center; - background-color: transparent; } -.searchbar-engine-button > .button-box { - -moz-appearance: none; - padding: 2px 0; - -moz-padding-end: 2px; - border: 0; +.search-go-button { + padding: 1px; + list-style-image: url("chrome://browser/skin/reload-stop-go.png"); + -moz-image-region: rect(0, 42px, 14px, 28px); } -.searchbar-dropmarker-image { - -moz-appearance: toolbarbutton-dropdown !important; - width: 12px; - height: 12px; +.search-go-button:hover { + -moz-image-region: rect(14px, 42px, 28px, 28px); } -/* Search go button */ -.search-go-container { - -moz-box-align: center; +.search-go-button:hover:active { + -moz-image-region: rect(28px, 42px, 42px, 28px); } -.search-go-button { - padding: 1px; - list-style-image: url(moz-icon://stock/gtk-find?size=menu); +.search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); } menuitem[cmd="cmd_clearhistory"] { @@ -93,23 +81,6 @@ menuitem[cmd="cmd_clearhistory"][disabled] { -moz-image-region: rect(0, 60px, 20px, 40px); } -searchbar[oneoffui] .search-go-button { - list-style-image: url("chrome://browser/skin/reload-stop-go.png"); - -moz-image-region: rect(0, 42px, 14px, 28px); -} - -searchbar[oneoffui] .search-go-button:hover { - -moz-image-region: rect(14px, 42px, 28px, 28px); -} - -searchbar[oneoffui] .search-go-button:hover:active { - -moz-image-region: rect(28px, 42px, 42px, 28px); -} - -searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { - transform: scaleX(-1); -} - .search-panel-current-engine { border-top: none !important; @@ -236,10 +207,6 @@ searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon list-style-image: url("chrome://browser/skin/search-engine-placeholder.png"); } -searchbar[oneoffui] .searchbar-engine-button { - display: none; -} - .search-panel-tree > .autocomplete-treebody::-moz-tree-cell { border-top: none !important; } @@ -262,10 +229,6 @@ searchbar[oneoffui] .searchbar-engine-button { list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon-active"); } -searchbar[oneoffui] .searchbar-engine-image { - -moz-margin-start: -1px; -} - .search-setting-button { -moz-appearance: none; border: none; diff --git a/arc-firefox-theme/chrome/browser/social/chat-icons.svg b/arc-firefox-theme/chrome/browser/social/chat-icons.svg index a11bc65..766b974 100644 --- a/arc-firefox-theme/chrome/browser/social/chat-icons.svg +++ b/arc-firefox-theme/chrome/browser/social/chat-icons.svg @@ -8,28 +8,42 @@ display: none; } use { - fill: #c1c1c1; + fill: #666; + } + use[id$="-hover"] { + fill: #4a4a4a; } use[id$="-active"] { - fill: #c1c1c1; + fill: #4a4a4a; } use[id$="-disabled"] { - fill: #c1c1c1; + fill: #666; + } + use[id$="-white"] { + fill: #fff; } - - + + + + + + + + + + diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png b/arc-firefox-theme/chrome/browser/tabbrowser/loading.png index 55f25e5..a2f9b79 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/loading.png and b/arc-firefox-theme/chrome/browser/tabbrowser/loading.png differ diff --git a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png index 512b525..7bbf0fe 100644 Binary files a/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png and b/arc-firefox-theme/chrome/browser/tabbrowser/pendingpaint.png differ diff --git a/arc-firefox-theme/chrome/global/in-content/common.css b/arc-firefox-theme/chrome/global/in-content/common.css index dc3d018..5814b1e 100644 --- a/arc-firefox-theme/chrome/global/in-content/common.css +++ b/arc-firefox-theme/chrome/global/in-content/common.css @@ -146,6 +146,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; } @@ -178,7 +180,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; @@ -292,6 +294,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; } @@ -459,7 +462,7 @@ html|a:hover:active, /* Hide the actual checkbox */ html|input[type="checkbox"] { - opacity: 0; + visibility: hidden; position: absolute; } @@ -557,7 +560,7 @@ xul|*.radio-label-box { /* Category List */ -xul|*#categories { +*|*#categories { -moz-appearance: none; background-color: var(--in-content-category-background); padding-top: 39px; @@ -565,7 +568,7 @@ xul|*#categories { border-width: 0; } -xul|*.category { +*|*.category { -moz-appearance: none; color: var(--in-content-category-text); -moz-border-end-width: 0; @@ -575,18 +578,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 > *|*.category[current] { border-top: var(--in-content-category-border-focus); border-bottom: var(--in-content-category-border-focus); } diff --git a/arc-firefox-theme/chrome/global/in-content/dropdown.svg b/arc-firefox-theme/chrome/global/in-content/dropdown.svg index 458eb0b..bc7bad2 100644 --- a/arc-firefox-theme/chrome/global/in-content/dropdown.svg +++ b/arc-firefox-theme/chrome/global/in-content/dropdown.svg @@ -15,7 +15,7 @@ } - + diff --git a/arc-firefox-theme/chrome/global/menu.css b/arc-firefox-theme/chrome/global/menu.css index c2c779b..aab929e 100644 --- a/arc-firefox-theme/chrome/global/menu.css +++ b/arc-firefox-theme/chrome/global/menu.css @@ -160,10 +160,7 @@ menucaption > .menu-iconic-text { menulist > menupopup > menuitem > .menu-iconic-left, menulist > menupopup > menucaption > .menu-iconic-left, -menulist > menupopup > menu > .menu-iconic-left, -menulist > menupopup > menuitem > .menu-iconic-right, -menulist > menupopup > menucaption > .menu-iconic-right, -menulist > menupopup > menu > .menu-iconic-right { +menulist > menupopup > menu > .menu-iconic-left { display: none; } diff --git a/arc-firefox-theme/chrome/global/menu/shared-menu-check@2x.png b/arc-firefox-theme/chrome/global/menu/shared-menu-check@2x.png new file mode 100644 index 0000000..2b1f836 Binary files /dev/null and b/arc-firefox-theme/chrome/global/menu/shared-menu-check@2x.png differ diff --git a/arc-firefox-theme/chrome/global/notification.css b/arc-firefox-theme/chrome/global/notification.css index 079f408..f525710 100644 --- a/arc-firefox-theme/chrome/global/notification.css +++ b/arc-firefox-theme/chrome/global/notification.css @@ -20,6 +20,7 @@ notification[type="info"] { notification[type="critical"] { color: white; background-image: linear-gradient(rgb(212,0,0), rgb(152,0,0)); + -moz-appearance: none; } .notification-inner { diff --git a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css index e3e5a63..ed8efcf 100644 --- a/arc-firefox-theme/chrome/mozapps/extensions/extensions.css +++ b/arc-firefox-theme/chrome/mozapps/extensions/extensions.css @@ -124,6 +124,10 @@ padding-top: 0; } +.category[selected="true"]:hover { + background-color:#1A2533; +} + .category[disabled] { overflow: hidden; height: 0; @@ -969,7 +973,7 @@ button.button-link { color: #0095dd; cursor: pointer; min-width: 0; - height: 20px; + min-height: 20px; margin: 0 6px; } -- cgit v1.2.3