X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fbrowser.css;h=8689da24f72f706e91e0bf0e859cf01de93af721;hp=b52c2d461fa7de7d0b8344028807a34f7729990b;hb=b1dfcf3228675c75fda183c9cd0161c9be5d4047;hpb=7c0a01f2b6f2d4daeff8216e5ca2bbbcde496d2a diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index b52c2d46..8689da24 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -37,7 +37,14 @@ menubar { } :root { - --verified-identity-box-backgroundcolor: #000000; + /*--backbutton-urlbar-overlap: 5px;*/ + + --identity-box-verified-background-color: #000000; + + --panel-separator-color: #A09090; + + /*--urlbar-separator-color: rgba(0,0,0,.2);*/ + --urlbar-separator-color: #9C9CFF; } #menubar-items { @@ -75,7 +82,7 @@ menubar { #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar, #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar { -/* margin-top: 15px;*/ +/* margin-top: var(--space-above-tabbar);*/ } @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) { @@ -248,37 +255,36 @@ menubar { } /* titlebar command buttons */ - #titlebar-min { - list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize"); } #titlebar-min:hover { - list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover"); } #titlebar-max { - list-style-image: url("chrome://browser/skin/win-maximize.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize"); } #titlebar-max:hover { - list-style-image: url("chrome://browser/skin/win-maximize-hover.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover"); } #main-window[sizemode="maximized"] #titlebar-max { - list-style-image: url("chrome://navigator/skin/icons/win-restore.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore"); } #main-window[sizemode="maximized"] #titlebar-max:hover { - list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover"); } #titlebar-close { - list-style-image: url("chrome://navigator/skin/icons/win-close.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#close"); } #titlebar-close:hover { - list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif"); + list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover"); } @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) { @@ -512,6 +518,10 @@ menuitem.bookmark-item { #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon { list-style-image: url("chrome://browser/skin/ToolbarFx.png"); } +toolbar[brighttext] #pocket-button, +#pocket-button { + list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */ +} #back-button { -moz-image-region: rect(0, 36px, 18px, 18px); @@ -910,40 +920,40 @@ menuitem.bookmark-item { } #loop-button, -#loop-button > .toolbarbutton-badge-container { +#loop-button > .toolbarbutton-badge-stack { list-style-image: url("chrome://browser/skin/loop/toolbarfx.png"); -moz-image-region: rect(0, 18px, 18px, 0); } #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]), -#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 90px, 18px, 72px); } #loop-button[state="disabled"], #loop-button[disabled="true"], -#loop-button[state="disabled"] > .toolbarbutton-badge-container, -#loop-button[disabled="true"] > .toolbarbutton-badge-container { +#loop-button[state="disabled"] > .toolbarbutton-badge-stack, +#loop-button[disabled="true"] > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 36px, 18px, 18px); } #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]), -#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 126px, 18px, 108px); } #loop-button:not([disabled="true"])[state="error"], -#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 54px, 18px, 36px); } #loop-button:not([disabled="true"])[state="action"], -#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 72px, 18px, 54px); } #loop-button:not([disabled="true"])[state="active"], -#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack { -moz-image-region: rect(0, 108px, 18px, 90px); } @@ -1313,48 +1323,38 @@ toolbaritem[sdkstylewidget="true"] > toolbarbutton { } #loop-button[cui-areatype="menu-panel"], -toolbarpaletteitem[place="palette"] > #loop-button, -#loop-button[cui-areatype="menu-panel"] > .toolbarbutton-badge-container, -toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { +toolbarpaletteitem[place="palette"] > #loop-button { list-style-image: url("chrome://browser/skin/loop/menuPanel.png"); -moz-image-region: rect(0, 32px, 32px, 0); } /* Make sure that the state icons are not shown in the customization palette. */ -toolbarpaletteitem[place="palette"] > #loop-button, -toolbarpaletteitem[place="palette"] > #loop-button > .toolbarbutton-badge-container { +toolbarpaletteitem[place="palette"] > #loop-button { -moz-image-region: rect(0, 32px, 32px, 0) !important; } -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]), -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 160px, 32px, 128px); } #loop-button[cui-areatype="menu-panel"][state="disabled"], -#loop-button[cui-areatype="menu-panel"][disabled="true"], -#loop-button[cui-areatype="menu-panel"][state="disabled"] > .toolbarbutton-badge-container, -#loop-button[cui-areatype="menu-panel"][disabled="true"] > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"][disabled="true"] { -moz-image-region: rect(0, 64px, 32px, 32px); } -#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]), -#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) { -moz-image-region: rect(0, 224px, 32px, 192px); } -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"], -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] { -moz-image-region: rect(0, 96px, 32px, 64px); } -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"], -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] { -moz-image-region: rect(0, 128px, 32px, 96px); } -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"], -#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] > .toolbarbutton-badge-container { +#loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] { -moz-image-region: rect(0, 192px, 32px, 160px); } @@ -1509,6 +1509,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-bri -moz-padding-end: 5px;*/ } +#nav-bar .toolbarbutton-1[type=panel], #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) { /* padding-left: 5px; padding-right: 5px;*/ @@ -1534,7 +1535,7 @@ toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-bri .findbar-button > .toolbarbutton-text, #nav-bar .toolbarbutton-1 > .toolbarbutton-icon, #nav-bar .toolbarbutton-1 > .toolbarbutton-text, -#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container, +#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon { @@ -1546,7 +1547,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an } /* #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon, -#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container, +#nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack, #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon { padding: 3px 7px; } @@ -1554,7 +1555,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an /* Help SDK icons fit: */ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon, -toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 16px; } @@ -1563,7 +1564,10 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba width: 32px; } -#nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack, +#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon, +#nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack, #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ { /* -moz-padding-end: 17px;*/ } @@ -1607,7 +1611,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-an #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text, -#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container, +#nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack, window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon { } @@ -1617,7 +1621,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([ope #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon, #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text, -#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container { +#nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack { } #TabsToolbar .toolbarbutton-1, @@ -1793,7 +1797,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but list-style-image: url(chrome://browser/skin/undoCloseTab.png); } -@media (min-resolution: 1.25dppx) { +@media (min-resolution: 1.1dppx) { #alltabs_undoCloseTab { list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png); } @@ -1863,6 +1867,11 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but color: #FFBFFF; } +/* overlap the urlbar's border */ +#PopupAutoCompleteRichResult { + margin-top: -1px; +} + #urlbar:-moz-lwtheme, .searchbar-textbox:-moz-lwtheme { /* background-color: rgba(255,255,255,.8); @@ -1897,7 +1906,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir( window:not([chromehidden~="toolbar"]) #urlbar-wrapper { /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/ -/* -moz-margin-start: -5px; */ +/* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */ } window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl), @@ -1952,6 +1961,19 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, .urlbar-icon:hover:active { } +#urlbar-search-footer { + border-top: 1px solid #A09090; +} + +#urlbar-search-settings { +} + +#urlbar-search-settings:hover { +} + +#urlbar-search-settings:hover:active { +} + #urlbar-search-splitter { min-width: 6px; -moz-margin-start: -3px; @@ -1976,90 +1998,66 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder, color: #8050B0; } -#search-container { - min-width: calc(54px + 11ch); -} - -/* identity box */ - -#identity-box { - border-radius: 2px; - font-size: .9em; -} - -#identity-box:-moz-locale-dir(ltr) { -/* border-top-left-radius: 1.5px; - border-bottom-left-radius: 1.5px;*/ -} +/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */ -#identity-box:-moz-locale-dir(rtl) { -/* border-top-right-radius: 1.5px; - border-bottom-right-radius: 1.5px;*/ +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] { + border-bottom: 1px solid #A09090; + background-color: #000000; + padding: 6px 0; + -moz-padding-start: 44px; + -moz-padding-end: 6px; + background-image: url("chrome://browser/skin/info.svg"); + background-clip: padding-box; + background-position: 20px center; + background-repeat: no-repeat; + background-size: 16px 16px; } -#notification-popup-box:not([hidden]) + #identity-box { - -moz-padding-start: 10px !important; - border-radius: 0; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { -/* border-radius: 0; */ - -moz-padding-start: 2px; - -moz-padding-end: 2px; - -moz-margin-end: 1px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { - transition: padding-left, padding-right; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link { + -moz-margin-start: 0; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { - padding-left: 2px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + -moz-appearance: none; + -moz-user-focus: ignore; + min-width: 80px; + border-radius: 3px; + padding: 4px 16px; + margin: 0; + -moz-margin-start: 10px; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { - padding-right: 2px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box { - /* forward button hiding is delayed when hovered */ - transition-delay: 100s; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover { } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) { - /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ - padding-left: 2.01px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] { } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > - #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) { - /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ - padding-right: 2.01px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover { } -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - -moz-margin-end: 3px; -} +/* === END urlbarSearchSuggestionsNotification.inc.css === */ -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; +#search-container { + min-width: calc(54px + 11ch); } -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl), -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} +/* identity box */ -#identity-box.verifiedIdentity:not(:-moz-lwtheme) { - var(--verified-identity-box-backgroundcolor); +#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) { + var(--identity-box-verified-background-color); } #identity-box:-moz-focusring { @@ -2072,11 +2070,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but outline-color: #000000; } -#identity-icon-labels { - -moz-margin-start: 1px; - -moz-margin-end: 3px; -} - /* Location bar dropmarker */ .urlbar-history-dropmarker:not(:hover):not([open="true"]) { @@ -2084,7 +2077,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but } #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker, -#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker { +#urlbar-wrapper > #urlbar > .urlbar-history-dropmarker, +#urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker { border: none; border-radius: 0px; } @@ -2100,10 +2094,29 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but /* === BEGIN identity-block.inc.css === */ -:root { +#identity-box { + --identity-box-border-color: #A09090; --identity-box-verified-color: #008484; /* Default theme does different color per channel, we can't as they do it build-time. */ --identity-box-chrome-color: #9C9CFF; + + border-inline-end: 1px solid --identity-box-border-color); + font-size: .9em; + border-radius: 2px; + -moz-margin-end: 3px; +/* padding: 2px 5px; + margin-inline-end: 4px;*/ + overflow: hidden; +} + +#identity-box:-moz-locale-dir(ltr) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +#identity-box:-moz-locale-dir(rtl) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } #urlbar[pageproxystate="valid"] > #identity-box.chromeUI { @@ -2116,44 +2129,99 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but -moz-border-end: 1px solid var(--identity-box-verified-color); } -#urlbar[pageproxystate="valid"] > #identity-box.chromeUI, -#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity { - background-position: right; - background-size: 1px; - background-repeat: no-repeat; +#notification-popup-box:not([hidden]) + #identity-box { + padding-inline-start: 10px !important; + border-radius: 0; } -/* page proxy icon */ +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box { +/* border-radius: 0; */ + -moz-padding-start: 2px; + -moz-padding-end: 2px; + -moz-margin-end: 1px; +} -#page-proxy-favicon { +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { + transition: padding-left, padding-right; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > + #notification-popup-box[hidden] + #identity-box { + padding-inline-start: 2px; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > + #notification-popup-box[hidden] + #identity-box { + /* forward button hiding is delayed when hovered */ + transition-delay: 100s; +} + +window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > + #notification-popup-box[hidden] + #identity-box { + /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */ + padding-inline-start: 2.01px; +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon { width: 16px; height: 16px; - list-style-image: url("chrome://browser/skin/identity-icons-generic.png"); - margin: 2px; + list-style-image: url("chrome://browser/skin/tracking-protection-16.svg"); + margin-left: 0; + opacity: 1; +} + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg"); } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://branding/content/identity-icons-brand.png"); +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out; +} + +#tracking-protection-icon:not([state]) { + margin-left: -16px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon { + visibility: collapse; +} + +/* MAIN IDENTITY ICON */ + +#page-proxy-favicon { + width: 16px; + height: 16px; + list-style-image: url("chrome://browser/skin/identity-not-secure.svg"); + margin: 2px; } -.verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://browser/skin/identity-icons-https.png"); +.chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url("chrome://branding/content/identity-icons-brand.svg"); } -.verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png"); +.verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url("chrome://browser/skin/identity-secure.svg"); } -.mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png"); +.mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg"); } -.mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png"); +.weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"], +.mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg"); } -.mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png"); +.mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] { + list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg"); } #page-proxy-favicon[pageproxystate="invalid"] { @@ -2175,6 +2243,107 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but max-width: 50ch; } +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; +} + +/* MAIN IDENTITY ICON */ + +#identity-icon { + width: 16px; + height: 16px; + list-style-image: url(chrome://browser/skin/identity-icon.svg#normal); +} + +#identity-box:hover > #identity-icon, +#identity-box[open=true] > #identity-icon { + list-style-image: url(chrome://browser/skin/identity-icon.svg#hover); +} + +#urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon { + list-style-image: url(chrome://branding/content/identity-icons-brand.svg); +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon { + opacity: 0.3; +} + +#urlbar[actiontype="searchengine"] > #identity-box > #identity-icon { + -moz-image-region: inherit; + list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon); + width: 16px; + height: 16px; + opacity: 1; +} + +/* TRACKING PROTECTION ICON */ + +#tracking-protection-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + margin-inline-end: 0; + list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); + opacity: 1; +} + +#tracking-protection-icon[state="loaded-tracking-content"] { + list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg); +} + +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out, margin-right 200ms ease-out; +} + +#tracking-protection-icon:not([state]) { + margin-inline-end: -18px; + pointer-events: none; + opacity: 0; + /* Only animate the shield in, when it disappears hide it immediately. */ + transition: none; +} + +#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon { + visibility: collapse; +} + +/* CONNECTION ICON */ + +#connection-icon { + width: 16px; + height: 16px; + margin-inline-start: 2px; + visibility: collapse; +} + +#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-secure.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon, +#urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg); + visibility: visible; +} + +#urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon { + list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg); + visibility: visible; +} + /* === END identity-block.inc.css === */ #page-proxy-favicon { @@ -2259,17 +2428,20 @@ richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-si height: 16px; } -.ac-comment { - font-size: 1.06em; +.ac-comment, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description, +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button { + font-size: 1.05em; } -.ac-extra > .ac-comment { +.ac-extra > .ac-comment, +.ac-url-text, +.ac-action-text { font-size: 1em; } .ac-url-text, .ac-action-text { - font-size: 1em; color: #9C9CFF; } @@ -2277,6 +2449,15 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- list-style-image: url("chrome://browser/skin/actionicon-tab.png"); -moz-image-region: rect(0, 16px, 16px, 0); padding: 0 3px; + width: 22px; + height: 16px; +} + +@media (min-resolution: 1.1dppx) { + richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon { + list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png"); + -moz-image-region: rect(0, 32px, 32px, 0); + } } richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon { @@ -2306,13 +2487,19 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- /* combined go/reload/stop button in location bar */ -#urlbar > toolbarbutton { - -moz-margin-start: 0; - padding: 0 2px; - background-origin: border-box; - border: none; +#urlbar-go-button, +#urlbar-reload-button, +#urlbar-stop-button { + border-style: none; list-style-image: url("chrome://browser/skin/reload-stop-goFx.png"); - -moz-border-start: 1px solid #9C9CFF; +/* padding: 0 9px;*/ + margin-inline-start: 2px; + border-inline-start: 1px solid var(--urlbar-separator-color); + border-image: linear-gradient(transparent 15%, + var(--urlbar-separator-color) 15%, + var(--urlbar-separator-color) 85%, + transparent 85%); + border-image-slice: 1; } #urlbar:-moz-locale-dir(ltr) > toolbarbutton { @@ -2367,57 +2554,68 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: rect(14px, 28px, 28px, 14px); } -/* popup blocker button */ +@media (min-resolution: 1.1dppx) { + #urlbar-go-button, + #urlbar-reload-button, + #urlbar-stop-button { + list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png"); + } -#page-report-button { - list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); - -moz-image-region: rect(0, 16px, 16px, 0); -} + #urlbar-go-button > .toolbarbutton-icon, + #urlbar-reload-button > .toolbarbutton-icon, + #urlbar-stop-button > .toolbarbutton-icon { + width: 14px; + } -#page-report-button:hover , -#page-report-button:hover:active, -#page-report-button[open="true"] { - -moz-image-region: rect(0, 32px, 16px, 16px); -} + #urlbar-go-button { + -moz-image-region: rect(0, 84px, 28px, 56px); + } -/* === BEGIN readinglist.inc.css === */ + #urlbar-go-button:hover { + -moz-image-region: rect(28px, 84px, 56px, 56px); + } -/* Reading List button */ + #urlbar-go-button:hover:active { + -moz-image-region: rect(56px, 84px, 84px, 56px); + } -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; -} + #urlbar-reload-button { + -moz-image-region: rect(0, 28px, 28px, 0); + } -#readinglist-addremove-button { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage"); - -moz-image-region: rect(0, 14px, 14px, 0); - transition: width 150ms ease-in-out, opacity 150ms ease-in-out 150ms; - opacity: 1; - width: 20px; -} + #urlbar-reload-button:not([disabled]):hover { + -moz-image-region: rect(28px, 28px, 56px, 0); + } -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); -} + #urlbar-reload-button:not([disabled]):hover:active { + -moz-image-region: rect(56px, 28px, 84px, 0); + } -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); -} + #urlbar-stop-button { + -moz-image-region: rect(0, 56px, 28px, 28px); + } -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); -} + #urlbar-stop-button:not([disabled]):hover { + -moz-image-region: rect(28px, 56px, 56px, 28px); + } -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); + #urlbar-stop-button:hover:active { + -moz-image-region: rect(56px, 56px, 84px, 28px); + } } -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); +/* popup blocker button */ + +#page-report-button { + list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png"); + -moz-image-region: rect(0, 16px, 16px, 0); } -/* === END readinglist.inc.css === */ +#page-report-button:hover , +#page-report-button:hover:active, +#page-report-button[open="true"] { + -moz-image-region: rect(0, 32px, 16px, 16px); +} /* Reader mode button */ @@ -2729,6 +2927,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { } @@ -2746,16 +2945,81 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- .tab-icon-overlay { width: 16px; height: 16px; - /* margin-top: 10px; */ + /* margin-top: -12px; */ -moz-margin-start: -16px; display: none; + position: relative; } .tab-icon-overlay[crashed] { - display: -moz-box; list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); } +.tab-icon-overlay[crashed], +.tab-icon-overlay[soundplaying][pinned], +.tab-icon-overlay[muted][pinned]:not([crashed]) { + display: -moz-box; +} + +.tab-icon-overlay[soundplaying][pinned], +.tab-icon-overlay[muted][pinned]:not([crashed]) { + border-radius: 8px; +} + +.tab-icon-overlay[soundplaying][pinned]:hover, +.tab-icon-overlay[muted][pinned]:hover { + background-color: #FFCF00; +} + +.tab-icon-overlay[soundplaying][pinned] { + display: -moz-box; + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio"); +} + +.tab-icon-overlay[soundplaying][pinned]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover"); +} + +.tab-icon-overlay[soundplaying][pinned]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed"); +} + +.tab-icon-overlay[muted][pinned]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +.tab-icon-overlay[muted][pinned]:not([crashed]):hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover"); +} + +.tab-icon-overlay[muted][pinned]:not([crashed]):hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying][pinned]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]) { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]):hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-overlay[muted][pinned]:not([crashed]):hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted-pressed"); +} + .tab-throbber[busy] { list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png"); } @@ -2777,6 +3041,66 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- margin-bottom: 2px !important; } +.tab-icon-sound { + -moz-margin-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound:not([soundplaying]):not([muted]), +.tab-icon-sound[pinned] { + display: none; +} + +.tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted"); +} + +.tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover"); +} + +.tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed"); +} + +.tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio"); +} + +.tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover"); +} + +.tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-dark-pressed"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted] { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-hover"); +} + +#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active { + list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-dark-pressed"); +} + .tab-close-button { margin-top: 1px; padding: 0; @@ -2845,6 +3169,9 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- .tab-background-middle, .tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-sound, .tab-close-button { pointer-events: auto; } @@ -3068,115 +3395,6 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { background-color: #008484; } -/* ::::: Identity Indicator Styling ::::: */ - -/* Popup Icons */ -#identity-popup-icon { - height: 64px; - width: 64px; - padding: 0; - list-style-image: url("chrome://browser/skin/identity.png"); - -moz-image-region: rect(0px, 64px, 64px, 0px); -} - -#identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(64px, 64px, 128px, 0px); -} - -#identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon { - -moz-image-region: rect(128px, 64px, 192px, 0px); -} - -/* Popup Body Text */ -.identity-popup-description { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 2px 0 4px; -} - -.identity-popup-label { - white-space: pre-wrap; - -moz-padding-start: 15px; - margin: 0; -} - -#identity-popup-content-host, -#identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner { - font-size: 1.2em; -} - -#identity-popup-content-host { - margin-top: 3px; - margin-bottom: 5px; - font-weight: bold; - max-width: 300px; -} - -#identity-popup-content-owner { - margin-top: 4px; - margin-bottom: 0 !important; - font-weight: bold; - max-width: 300px; -} - -.verifiedDomain > #identity-popup-content-owner { - font-weight: normal; -} - -#identity-popup-content-verifier { - margin: 4px 0 2px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption { - margin-top: 10px; - -moz-margin-start: -24px; -} - -#identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon , -#identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon { - list-style-image: url("chrome://browser/skin/Secure24.png"); -} - -#identity-popup-help-icon { - border: none; - margin: 7px 0 0 -3px; - background: none; - min-width: 0; - list-style-image: url("chrome://global/skin/icons/question-16.png"); - cursor: pointer; -} - -#identity-popup-help-icon > .button-box > .button-text { - display: none; -} - -#identity-popup-help-icon > .button-box > .button-icon { - height: 16px; - width: 16px; -} - -#identity-popup-more-info-button { - margin-top: 6px; - margin-bottom: 0; - -moz-margin-end: 0; -} - -#identity-popup > .panel-arrowcontainer > .panel-arrowcontent { - padding: 0; -} - -#identity-popup-container { - min-width: 280px; - padding: 10px; -} - -#identity-popup-button-container { -/* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/ - padding: 10px; - margin-top: 5px; -} - /* === BEGIN notification-icons.inc.css === */ .popup-notification-icon { @@ -3194,7 +3412,8 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { } .popup-notification-icon[popupid="xpinstall-disabled"], -.popup-notification-icon[popupid="addon-install-blocked"] { +.popup-notification-icon[popupid="addon-install-blocked"], +.popup-notification-icon[popupid="addon-install-origin-blocked"] { list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg); } @@ -3300,6 +3519,8 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled } .notification-anchor-icon { + list-style-image: url("chrome://global/skin/icons/information-16.png"); + width: 16px; height: 16px; margin: 0 2px; @@ -3309,11 +3530,6 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled outline: 1px dotted #008484; } -.default-notification-icon, -#default-notification-icon { - list-style-image: url("chrome://global/skin/icons/information-16.png"); -} - .identity-notification-icon, #identity-notification-icon { list-style-image: url("chrome://mozapps/skin/profile/profileicon.png"); @@ -3489,8 +3705,70 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled 100% { transform: translateX(0); } } +/* HiDPI notification icons */ +@media (min-resolution: 1.1dppx) { +/* #notification-popup-box { + border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill; + } +*/ + .notification-anchor-icon { + list-style-image: url(chrome://global/skin/icons/information-32.png); + } + + .webRTC-shareDevices-notification-icon, + #webRTC-shareDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png); + } + + .webRTC-sharingDevices-notification-icon, + #webRTC-sharingDevices-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png); + } + + .webRTC-shareMicrophone-notification-icon, + #webRTC-shareMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png); + } + + .webRTC-sharingMicrophone-notification-icon, + #webRTC-sharingMicrophone-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png); + } + + .webRTC-shareScreen-notification-icon, + #webRTC-shareScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png); + } + + .webRTC-sharingScreen-notification-icon, + #webRTC-sharingScreen-notification-icon { + list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingDevices"], + .popup-notification-icon[popupid="webRTC-shareDevices"] { + list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingMicrophone"], + .popup-notification-icon[popupid="webRTC-shareMicrophone"] { + list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png); + } + + .popup-notification-icon[popupid="webRTC-sharingScreen"], + .popup-notification-icon[popupid="webRTC-shareScreen"] { + list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png); + } +} + /* === END notification-icons.inc.css === */ +.popup-notification-body[popupid="addon-progress"], +.popup-notification-body[popupid="addon-install-confirmation"] { + width: 28em; + max-width: 28em; +} + /* Translation infobar */ /* === BEGIN infobar.inc.css === */ @@ -3616,12 +3894,6 @@ notification[value="loop-sharing-notification"] .messageImage { -moz-image-region: auto; } -#menu_readingList, -#BMB_readingList { - list-style-image: url("chrome://browser/skin/readinglist/readinglist-icon.svg"); - -moz-image-region: auto; -} - #panelMenu_pocket, #menu_pocket, #BMB_pocket { @@ -3758,10 +4030,6 @@ notification[value="loop-sharing-notification"] .messageImage { box-shadow: 0 0 2px #9C9CFF; } -#full-screen-warning-container[obscure-browser] { - background-color: rgba(0,0,0,0.3); -} - .full-screen-description { font-size: 150%; } @@ -3770,11 +4038,6 @@ notification[value="loop-sharing-notification"] .messageImage { font-size: 300%; } -.full-screen-approval-button, -#full-screen-remember-decision { - font-size: 120%; -} - /* === BEGIN commandline.inc.css === */ /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS. @@ -4390,10 +4653,6 @@ html|*#gcli-output-frame { border: 0; } -#social-undoactivation-button { - -moz-margin-start: 0; /* override default label margin to match description margin */ -} - #socialActivatedNotification .popup-notification-button-container { margin-left: 6px; } @@ -4672,7 +4931,6 @@ chatbox[dark=true] > .chat-titlebar > hbox > .chat-title { .chatbar-innerbox { background: transparent; - margin: -285px 0 0; overflow: hidden; } @@ -4830,6 +5088,41 @@ notification.pluginVulnerable .messageImage { /* === BEGIN login-doorhanger.inc.css === */ +#notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent { + /* Since we display a sliding subview that extends to the border, we cannot + * keep the default padding of arrow panels. We use the same padding in the + * individual content views instead. Since we removed the padding, we also + * have to ensure the contents are clipped to the border box. */ + padding: 0; + overflow: hidden; +} + +#login-fill-mainview, +#login-fill-details { + padding: var(--panel-arrowcontent-padding); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-mainview { + transform: translateX(-14px); +} + +#login-fill-mainview, +#login-fill-details { + transition: transform 150ms; +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details { + transform: translateX(105%); +} + +#login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) { + transform: translateX(-105%); +} + +#login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer { + background-color: hsla(240,39%,100%,.1); +} + #login-fill-testing { color: #FF0000; font-weight: bold; @@ -4864,6 +5157,15 @@ notification.pluginVulnerable .messageImage { color: #A09090; } +#login-fill-details { + padding: 4px; + background: var(--panel-arrowcontent-background); + color: var(--panel-arrowcontent-color); + background-clip: padding-box; + border-left: 1px solid #9C9CFF; + -moz-margin-start: 38px; +} + /* === END login-doorhanger.inc.css === */ /* === BEGIN customizeMode.inc.css === */ @@ -5071,6 +5373,25 @@ notification.pluginVulnerable .messageImage { background-color: #FF9F00; } +@media (min-resolution: 1.1dppx) { + #customization-titlebar-visibility-button { + list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png"); + -moz-image-region: rect(0, 48px, 48px, 0); + } + + #customization-titlebar-visibility-button:hover { + -moz-image-region: rect(48px, 48px, 96px, 0); + } + + #customization-titlebar-visibility-button[checked] { + -moz-image-region: rect(0, 96px, 48px, 48px); + } + + #customization-titlebar-visibility-button[checked]:hover { + -moz-image-region: rect(48px, 96px, 96px, 48px); + } +} + #main-window[customize-entered] #customization-panel-container { background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"); background-position: left top; @@ -5112,14 +5433,14 @@ toolbarpaletteitem[notransition][place="panel"] { } toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon, +toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarpaletteitem > toolbaritem.panel-wide-item, toolbarpaletteitem > toolbarbutton[type="menu-button"] { transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important; } toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon, -toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-container > .toolbarbutton-icon { +toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon { transform: scale(1.3); } @@ -5542,10 +5863,12 @@ toolbarpaletteitem[place="toolbar"] { padding: 2em 15px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button { margin: 0 15px; } +#UITourTooltipButtons > label:first-child, #UITourTooltipButtons > button:first-child { -moz-margin-start: 0; } @@ -5556,6 +5879,7 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -5576,6 +5900,7 @@ toolbarpaletteitem[place="toolbar"] { color: #000000; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -5723,7 +6048,13 @@ notification.heartbeat { /* === END UITour.inc.css === */ #UITourTooltipButtons { - margin: 24px -4px -4px; + /** + * Override the --panel-arrowcontent-padding so the background extends + * to the sides and bottom of the panel. + */ + margin-left: -10px; + margin-right: -10px; + margin-bottom: -10px; } /* === BEGIN contextmenu.inc.css === */ @@ -5825,6 +6156,21 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { -moz-image-region: rect(36px, 144px, 54px, 126px); } +#context-bookmarkpage[starred=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */ + -moz-image-region: rect(0px, 162px, 18px, 144px); +} + +#context-bookmarkpage[starred=true][_moz-menuactive=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */ + -moz-image-region: rect(18px, 162px, 36px, 144px); +} + +#context-bookmarkpage[starred=true][disabled=true] { + /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */ + -moz-image-region: rect(36px, 162px, 54px, 144px); +} + #context-back:-moz-locale-dir(rtl), #context-forward:-moz-locale-dir(rtl), #context-reload:-moz-locale-dir(rtl) { @@ -5852,6 +6198,10 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { list-style-image: url("chrome://browser/skin/drm-icon.svg#chains"); } +#fill-login { + list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png"); +} + /* === END contextmenu.inc.css === */ #context-navigation { @@ -5860,3 +6210,7 @@ menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left { #context-sep-navigation { /* margin-top: -4px; */ } + +.browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +}