X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Fdownloads.css;h=ce1c7b914eece6b67784c241bcc7797bae2efff4;hp=31c02e6c6ee96766b406e567b1558949b070df9a;hb=1b1f3d099d79ff3f7e081b2702a1076c6cd627c4;hpb=7327c957c10aeaccf57a457a9950ac380a326f29 diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index 31c02e6c..ce1c7b91 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -4,52 +4,102 @@ /* === BEGIN downloads.inc.css === */ +/* In the original, this is at the end of the file as a preprocessor-include */ +@import url("progressmeter.inc.css"); + /*** Panel and outer controls ***/ #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + overflow: hidden; + display: block; +} + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent, +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { padding: 0; } #downloadsListBox { background-color: transparent; - padding: 4px; color: inherit; + margin: 0; } -#downloadsPanel:not([hasdownloads]) > #downloadsListBox { - display: none; +#emptyDownloads { + padding: 16px 25px; + margin: 0; + /* The panel can be wider than this description after the blocked subview is + shown, so center the text. */ + text-align: center; } -#downloadsPanel[hasdownloads] > #emptyDownloads { - display: none; +.downloadsPanelFooter { +/* background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color);*/ } -#emptyDownloads { - padding: 10px 20px; - max-width: 40ch; +.downloadsPanelFooter toolbarseparator, +richlistitem[type="download"] > toolbarseparator { + margin: 0; + border: 0; + min-width: 0; +/* border-left: 1px solid var(--panel-separator-color); + -moz-appearance: none;*/ } -#downloadsSummary { - padding: 8px 38px 8px 12px; - cursor: pointer; - -moz-user-focus: normal; +.downloadsPanelFooterButton { + margin: 0; + padding: 0; + min-width: 0; +/* min-height: 40px;*/ + border: none; } -#downloadsSummary > .downloadTypeIcon { - list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); +.downloadsPanelFooterButton:hover { } -#downloadsSummaryDescription { - color: #3333FF; +.downloadsPanelFooterButton:hover:active, +.downloadsPanelFooterButton[open="true"] { +} + +.downloadsPanelFooterButton[default] { +} + +.downloadsPanelFooterButton[default]:hover { +} + +.downloadsPanelFooterButton[default]:hover:active { +} + +.downloadsPanelFooterButton > .button-box { + padding: 0; + margin: 0; + border: none; } #downloadsHistory { - cursor: pointer; - margin: 4px !important; - color: #3333FF; + padding-inline-start: 10px; + padding-inline-end: 10px; +} + +richlistitem[type="download"] > toolbarseparator { + margin: 10px 0; +} + +richlistitem[type="download"]:hover > toolbarseparator { + margin: 0; } -#downloadsHistory > .button-box { +#downloadsSummary { + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: #3333FF; } /*** List items and similar elements in the summary ***/ @@ -57,31 +107,39 @@ #downloadsSummary, richlistitem[type="download"] { height: var(--downloads-item-height); - -moz-padding-end: 0; - color: inherit; } richlistitem[type="download"] { - margin: 0; - /*border-top: 1px solid var(--downloads-item-border-top-color);*/ - border-bottom: 1px solid var(--downloads-item-border-bottom-color); + border-bottom: 1px solid var(--panel-separator-color); background: transparent; - padding: 8px; + color: inherit; } -richlistitem[type="download"]:first-child { -/* border-top: 1px solid transparent;*/ +richlistitem[type="download"]:last-child { + border-bottom: none; } .downloadTypeIcon { - -moz-margin-end: 8px; - /* Prevent flickering when changing states. */ - height: 32px; + margin: 8px 13px; width: 32px; + height: 32px; +} + +.downloadBlockedBadge { + margin: 0 5px; + background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; +} + +downloadBlockedBadge:-moz-locale-dir(rtl) { + background-position-x: left; } -.blockedIcon { - list-style-image: url("chrome://global/skin/icons/alert-error.gif"); +richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/warning.svg"); +} + +richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/info.svg"); } /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of @@ -98,58 +156,207 @@ richlistitem[type="download"]:first-child { font-size of .downloadContainer's parent, we use calc to go from the smaller font-size back to the original font-size. */ -#downloadsSummaryDetails, .downloadContainer { font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-inline-end: 13px; } #downloadsSummaryDescription, .downloadTarget { - margin-bottom: var(--downloads-item-target-margin-bottom); - cursor: inherit; -} - -.downloadTarget { + margin: 0; font-size: calc(100% / var(--downloads-item-font-size-factor)); } #downloadsSummaryDetails, .downloadDetails { - margin-top: var(--downloads-item-details-margin-top); opacity: var(--downloads-item-details-opacity); - cursor: inherit; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); +} + +/* The following rules control which message is shown under the name of the + download, using a set of elements that share the class ".downloadDetails". + At any given time, only one of these elements is displayed. We use a set of + rules to hide the elements that shouldn't be displayed in each case. */ + +/* The full status message is only displayed in the Downloads View. */ +.downloadDetailsFull { + display: none; +} + +/* When hovering the mouse pointer over the item, instead of the normal message + we display a more detailed one. */ +richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover { + display: none; +} + +/* When hovering the action button in particular, instead of the usual hover + message we display the command associated with the button. */ +richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels { + display: none; +} + +/* When hovering the main area of a finished download whose target exists, + instead of the usual hover message we display the "Open File" command. */ +richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover, +richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile, +richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile, +.downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile { + display: none; +} + +/* When hovering items blocked by Application Reputation, instead of the other + hover messages we display the "Show more information" label. */ +richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels, +richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo, +richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo { + display: none; +} + +richlistitem[type="download"][verdict] > toolbarseparator { + visibility: hidden; } .downloadButton { - min-width: 0; - min-height: 0; - margin: 3px; + min-width: 58px; + margin: 0; /* border: none; */ background: transparent; - padding: 5px; - list-style-image: url("chrome://browser/skin/downloads/buttons.png"); + padding: 0; + color: inherit; } -.downloadButton > .button-box { +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + filter: url("chrome://global/skin/filters.svg#fill"); + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; padding: 0; } +richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover, +richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover, +richlistitem[type="download"][verdict]:hover { + background-color: var(--arrowpanel-dimmed); +} -/* === END downloads.inc.css === */ +richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active, +richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active, +richlistitem[type="download"][verdict]:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} -/*** Panel and outer controls ***/ +richlistitem[type="download"][showingsubview] { + background-color: #794900; + color: #FFCF00; + transition: background-color var(--panelui-subview-transition-duration), + color var(--panelui-subview-transition-duration); +} + +richlistitem[type="download"][verdict="Malware"]:hover, +richlistitem[type="download"][verdict="Malware"]:hover:active, +richlistitem[type="download"][verdict="Malware"][showingsubview] { + background-color: #FF0000; + color: #000000; +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +/*** Blocked subview ***/ + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews { + /* When the main view is showing, the shadow on the left edge of the subview is + barely visible on the right edge of the main view, so set it to none. */ + box-shadow: none; +} + +/* When the subview is showing, turn the download button into an arrow pointing + back to the main view. */ +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton { + color: #FFCF00; +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} -#downloadsFooter { +#downloadsPanel-blockedSubview { + background-image: url("chrome://browser/skin/warning.svg"); + background-size: 32px 32px; + background-position: 16px 16px; + background-repeat: no-repeat; } -#downloadsFooter:hover { +#downloadsPanel-blockedSubview:-moz-locale-dir(rtl) { + background-position: calc(100% - 16px) 16px; } -#downloadsFooter:hover:active { +#downloadsPanel-blockedSubview[verdict=Malware] { + background-image: url("chrome://browser/skin/downloads/download-blocked.svg"); } +#downloadsPanel-blockedSubview-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: calc(100% / var(--downloads-item-font-size-factor)); +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 16px; + opacity: var(--downloads-item-details-opacity); +} + +#downloadsPanel-blockedSubview-title, +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + -moz-margin-start: 64px; + -moz-margin-end: 16px; +} + +/*** Progressmeter ***/ +/* %include progressmeter.inc.css - this happens as @import at the start of the file */ + +/* === END downloads.inc.css === */ + +/*** Panel and outer controls ***/ + #downloadsPanel[keyfocus] #downloadsSummary:focus, -#downloadsPanel[keyfocus] #downloadsHistory:focus { +#downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus { outline: 1px #008484 dotted; outline-offset: -1px; } @@ -158,20 +365,26 @@ richlistitem[type="download"]:first-child { outline-offset: -5px; } -#downloadsHistory > .button-box { - /* Hide the border so we don't display an inner focus ring. */ - border: none; +richlistitem[type="download"][showingsubview] { + background-color: Highlight; + color: HighlightText; + transition: background-color var(--panelui-subview-transition-duration), + color var(--panelui-subview-transition-duration); } +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover, +#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active, +richlistitem[type="download"][showingsubview][verdict="Malware"] { + background-color: hsl(4, 82%, 47%); + color: white; +} + + /*** List items and similar elements in the summary ***/ :root { - --downloads-item-height: 7em; - /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/ - --downloads-item-border-bottom-color: #9C9CFF; + --downloads-item-height: 5.5em; --downloads-item-font-size-factor: 0.9; - --downloads-item-target-margin-bottom: 6px; - --downloads-item-details-margin-top: 0; --downloads-item-details-opacity: 0.6; } @@ -183,54 +396,24 @@ richlistitem[type="download"]:first-child { border: 1px dotted #008484; } -/*** Highlighted list items ***/ - -#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { - outline: 1px #008484 dotted; - outline-offset: -1px; - /*-moz-outline-radius: 3px;*/ +richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { + list-style-image: url("chrome://global/skin/icons/warning.svg"); } -/* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */ -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover { - border-radius: 3px; - background-color: #794900; - color: #FFCF00; - cursor: pointer; +richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { + list-style-image: url("chrome://global/skin/icons/info.svg"); } -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { +@media (-moz-windows-default-theme) { + richlistitem[type="download"][verdict="Malware"] { + color: #FF0000; + } } -/*** Button icons ***/ - -.downloadButton.downloadConfirmBlock, -.downloadButton.downloadCancel { - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -.downloadButton.downloadShow { - -moz-image-region: rect(16px, 16px, 32px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active { - -moz-image-region: rect(16px, 32px, 32px, 16px); -} +/*** Highlighted list items ***/ -.downloadButton.downloadRetry { - -moz-image-region: rect(32px, 16px, 48px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { - -moz-image-region: rect(32px, 32px, 48px, 16px); +#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { + outline: 1px #008484 dotted; + outline-offset: -1px; + /*-moz-outline-radius: 3px;*/ }