X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Fdownloads.css;h=ce1c7b914eece6b67784c241bcc7797bae2efff4;hp=bd3db7dafdbfb4df3375e07754287adb14c6d73c;hb=1b1f3d099d79ff3f7e081b2702a1076c6cd627c4;hpb=d23bf94a3357d30cf7300a6eb9c051f0a225b02a diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index bd3db7da..ce1c7b91 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -4,6 +4,9 @@ /* === 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 { @@ -18,10 +21,8 @@ #downloadsListBox { background-color: transparent; - padding: 4px; color: inherit; margin: 0; - border: none; } #emptyDownloads { @@ -37,7 +38,8 @@ border-top: 1px solid var(--panel-separator-color);*/ } -.downloadsPanelFooter toolbarseparator { +.downloadsPanelFooter toolbarseparator, +richlistitem[type="download"] > toolbarseparator { margin: 0; border: 0; min-width: 0; @@ -80,50 +82,15 @@ padding-inline-end: 10px; } -#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory { - padding-inline-start: 68px; -} - -toolbarseparator.downloadsDropmarkerSplitter { - margin: 7px 0; +richlistitem[type="download"] > toolbarseparator { + margin: 10px 0; } -#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, -#downloadsFooter[showingdropdown] toolbarseparator { +richlistitem[type="download"]:hover > toolbarseparator { margin: 0; } -.downloadsDropmarker { - padding: 0 21px; -} - -.downloadsDropmarker > .button-box > hbox { - display: none; -} - -.downloadsDropmarker > .button-box > .button-menu-dropmarker { - display: -moz-box; - padding: 0; - margin: 0; -} - -.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { - width: 16px; - height: 16px; -/* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); - filter: url("chrome://browser/skin/filters.svg#fill"); - fill: currentColor;*/ -} - -/* Override default icon size which is too small for this dropdown */ -.downloadsDropmarker > .button-box > .button-menu-dropmarker { - width: 16px; - height: 16px; -} - #downloadsSummary { - padding: 0 12px; - cursor: pointer; -moz-user-focus: normal; } @@ -140,33 +107,26 @@ toolbarseparator.downloadsDropmarkerSplitter { #downloadsSummary, richlistitem[type="download"] { height: var(--downloads-item-height); - padding-inline-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 { - margin-top: 8px; - margin-inline-end: 12px; - margin-bottom: 8px; - margin-inline-start: 0; + margin: 8px 13px; width: 32px; height: 32px; } .downloadBlockedBadge { - margin: 0 4px; + margin: 0 5px; background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; } @@ -196,42 +156,141 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { 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); +} + +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); +} + +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 { @@ -243,11 +302,15 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { /* 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 { - list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png"); + 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:-moz-locale-dir(rtl) { - list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png"); +#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"); } #downloadsPanel-blockedSubview { @@ -285,19 +348,13 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { -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 ***/ -#downloadsSummary { -} - -#downloadsSummary:hover { -} - -#downloadsSummary:hover:active { -} - #downloadsPanel[keyfocus] #downloadsSummary:focus, #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus { outline: 1px #008484 dotted; @@ -326,12 +383,8 @@ richlistitem[type="download"][showingsubview][verdict="Malware"] { /*** 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; } @@ -348,7 +401,13 @@ richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { } richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { - list-style-image: url("chrome://global/skin/icons/information-32.png"); + list-style-image: url("chrome://global/skin/icons/info.svg"); +} + +@media (-moz-windows-default-theme) { + richlistitem[type="download"][verdict="Malware"] { + color: #FF0000; + } } /*** Highlighted list items ***/ @@ -358,61 +417,3 @@ richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { outline-offset: -1px; /*-moz-outline-radius: 3px;*/ } - -/* #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; -} - -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { -} - -/*** Button icons ***/ - -.downloadButton.downloadIconCancel { - -moz-image-region: rect(0px, 16px, 16px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active { - -moz-image-region: rect(0px, 32px, 16px, 16px); -} - -.downloadButton.downloadIconShow { - -moz-image-region: rect(16px, 16px, 32px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active { - -moz-image-region: rect(16px, 32px, 32px, 16px); -} - -.downloadButton.downloadIconRetry { - -moz-image-region: rect(32px, 16px, 48px, 0px); -} -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover, -richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active { - -moz-image-region: rect(32px, 32px, 48px, 16px); -} - -.downloadButton.downloadShowBlockedInfo { - -moz-image-region: rect(48px, 16px, 64px, 0px); -} -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo, -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover, -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active { -/* -moz-image-region: rect(48px, 32px, 64px, 16px);*/ -} - -.downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) { - -moz-image-region: rect(64px, 16px, 80px, 0px); -} -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl), -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl), -richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) { -/* -moz-image-region: rect(64px, 32px, 80px, 16px);*/ -}