diff options
Diffstat (limited to 'arc-firefox-theme/chrome/browser/sass/_browser-sass.scss')
| -rw-r--r-- | arc-firefox-theme/chrome/browser/sass/_browser-sass.scss | 246 |
1 files changed, 153 insertions, 93 deletions
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss index dfb78a4..fd0d813 100644 --- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss +++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss @@ -63,6 +63,10 @@ $darker_asset_path_2: if($darker=='true', 'dark', $asset_path); background-color: $borders_color; } +#navigator-toolbox:-moz-lwtheme::after { + background-color: rgba(0,0,0,.3); +} + #navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar):not(#TabsToolbar) { -moz-appearance: none; border-style: none; @@ -149,7 +153,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton):not(:hover):not(:active):not([op // -moz-padding-end: 2px; //} -.bookmark-item:not(#home-button) > .toolbarbutton-icon, +.bookmark-item > .toolbarbutton-icon, #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { width: 16px; height: 16px; @@ -354,7 +358,7 @@ menuitem.bookmark-item { } /* Stock icons for the menu bar items */ -menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) { +menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) { -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic"); } @@ -1084,7 +1088,7 @@ toolbar[brighttext] #PanelUI-menu-button.thumburger { #TabsToolbar & { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/loop-tabbar-icons.svg"); } } -#loop-button:not([disabled=true]):-moz-any([open],[checked],:hover:active), +#nav-bar #loop-button:not([disabled=true]):-moz-any([open],[checked],:hover:active), #TabsToolbar #loop-button:not([disabled=true]):-moz-any([open],[checked],:hover:active) { list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; } @@ -1734,6 +1738,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 +1862,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 +2157,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 +2610,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 +3688,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 +3777,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 +3813,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 +4011,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 +4030,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 +4045,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 +4120,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 +4155,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 +4180,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 +4272,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 +4301,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 +4389,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 +4880,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 +4893,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 +4905,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 +4918,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 +4930,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 +4988,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 +5002,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 +5014,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 +5058,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 +5077,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 */ |