X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fbrowser.css;h=8689da24f72f706e91e0bf0e859cf01de93af721;hp=23c1d8579b5ebf029667fff8e96f0f56024f63da;hb=b1dfcf3228675c75fda183c9cd0161c9be5d4047;hpb=13875a54c4ffb8d452d1dc3745fdbab3f906da8f diff --git a/LCARStrek/browser/browser.css b/LCARStrek/browser/browser.css index 23c1d857..8689da24 100644 --- a/LCARStrek/browser/browser.css +++ b/LCARStrek/browser/browser.css @@ -37,7 +37,9 @@ menubar { } :root { - --verified-identity-box-backgroundcolor: #000000; + /*--backbutton-urlbar-overlap: 5px;*/ + + --identity-box-verified-background-color: #000000; --panel-separator-color: #A09090; @@ -80,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) { @@ -253,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) { @@ -919,40 +920,40 @@ toolbar[brighttext] #pocket-button, } #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); } @@ -1322,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); } @@ -1518,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;*/ @@ -1543,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 { @@ -1555,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; } @@ -1563,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; } @@ -1572,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;*/ } @@ -1616,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 { } @@ -1626,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, @@ -1911,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), @@ -1966,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; @@ -1990,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; -} +/* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */ -#identity-box:-moz-locale-dir(ltr) { -/* border-top-left-radius: 1.5px; - border-bottom-left-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; } -#identity-box:-moz-locale-dir(rtl) { -/* border-top-right-radius: 1.5px; - border-bottom-right-radius: 1.5px;*/ +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) { + background-position: right 20px center; } -#notification-popup-box:not([hidden]) + #identity-box { - -moz-padding-start: 10px !important; - border-radius: 0; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description { + margin: 0; + padding: 0; } -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 > label.text-link { + -moz-margin-start: 0; } -window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar > #identity-box { - transition: padding-left, padding-right; +#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(ltr) { - padding-left: 2px; +#PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] { } -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"]:hover { } -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:-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 { @@ -2086,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"]) { @@ -2115,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 { @@ -2131,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"); +} + +#tracking-protection-icon[animate] { + transition: margin-left 200ms ease-out; } -.chromeUI > #page-proxy-favicon[pageproxystate="valid"] { - list-style-image: url("chrome://branding/content/identity-icons-brand.png"); +#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"] { @@ -2190,7 +2243,7 @@ window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-but max-width: 50ch; } -#urlbar[actiontype="searchengine"] > #identity-box > #page-proxy-favicon { +#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; @@ -2375,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; } @@ -2393,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 { @@ -2552,45 +2617,6 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: rect(0, 32px, 16px, 16px); } -/* === BEGIN readinglist.inc.css === */ - -/* Reading List button */ - -#urlbar:not([focused]):not(:hover) #readinglist-addremove-button { - opacity: 0; - width: 0px; -} - -#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; -} - -#readinglist-addremove-button:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-hover"); -} - -#readinglist-addremove-button:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#addpage-active"); -} - -#readinglist-addremove-button[already-added="true"] { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded"); -} - -#readinglist-addremove-button[already-added="true"]:hover { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-hover"); -} - -#readinglist-addremove-button[already-added="true"]:active { - list-style-image: url("chrome://browser/skin/readinglist/icons.svg#alreadyadded-active"); -} - -/* === END readinglist.inc.css === */ - /* Reader mode button */ #reader-mode-button { @@ -2901,6 +2927,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- .tab-throbber, .tab-icon-image, +.tab-icon-sound, .tab-close-button { } @@ -2918,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"); } @@ -2949,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; @@ -3017,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; } @@ -3739,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 { @@ -3881,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%; } @@ -3893,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. @@ -5293,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); } @@ -5723,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; } @@ -5737,6 +5879,7 @@ toolbarpaletteitem[place="toolbar"] { -moz-margin-end: 5px; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button .button-text { font-size: 1.15rem; } @@ -5757,6 +5900,7 @@ toolbarpaletteitem[place="toolbar"] { color: #000000; } +#UITourTooltipButtons > label, #UITourTooltipButtons > button.button-link { -moz-appearance: none; background: transparent; @@ -5904,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 === */ @@ -6048,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 { @@ -6056,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; +}