X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Fdownloads.css;h=d0adfbb09b73f2e8ad7950c40611cdbed37b566f;hp=29a7aa0823afab2fa2daa1a8990a4dcc96571039;hb=fa981c35026cc094054c9f158969b12ad343f22f;hpb=db1c5db107950e750d8c3cf3a6ac106ec0cc606e diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index 29a7aa08..d0adfbb0 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,40 +21,45 @@ #downloadsListBox { background-color: transparent; - padding: 4px; color: inherit; + margin: 0; } #emptyDownloads { - padding: 10px 20px; + 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; } .downloadsPanelFooter { - background-color: #000000; - border-top: 1px solid #A09090; +/* background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color);*/ } -.downloadsPanelFooter > toolbarseparator { +.downloadsPanelFooter toolbarseparator, +richlistitem[type="download"] > toolbarseparator { margin: 0; border: 0; min-width: 0; -/* border-left: 1px solid hsla(210,4%,10%,.14); - -moz-appearance: none !important;*/ +/* border-left: 1px solid var(--panel-separator-color); + -moz-appearance: none;*/ } .downloadsPanelFooterButton { margin: 0; padding: 0; + min-width: 0; /* min-height: 40px;*/ + border: none; } .downloadsPanelFooterButton:hover { } -.downloadsPanelFooterButton:hover:active { +.downloadsPanelFooterButton:hover:active, +.downloadsPanelFooterButton[open="true"] { } .downloadsPanelFooterButton[default] { @@ -63,14 +71,69 @@ .downloadsPanelFooterButton[default]:hover:active { } +.downloadsPanelFooterButton > .button-box { + padding: 0; + margin: 0; + border: none; +} + +#downloadsHistory { + padding-inline-start: 10px; + 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; +} + +richlistitem[type="download"]:hover > toolbarseparator, +#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, +#downloadsFooter[showingdropdown] 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://global/skin/icons/menubutton-dropmarker.svg"); + filter: url("chrome://global/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; } #downloadsSummary > .downloadTypeIcon { - list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); } #downloadsSummaryDescription { @@ -82,33 +145,26 @@ #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; } @@ -138,42 +194,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 { @@ -185,11 +340,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:-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 { + 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"); } #downloadsPanel-blockedSubview { @@ -227,19 +386,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; @@ -250,11 +403,6 @@ richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge { outline-offset: -5px; } -.downloadsPanelFooterButton > .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; @@ -273,12 +421,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; } @@ -298,6 +442,12 @@ richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { list-style-image: url("chrome://global/skin/icons/information-32.png"); } +@media (-moz-windows-default-theme) { + richlistitem[type="download"][verdict="Malware"] { + color: #FF0000; + } +} + /*** Highlighted list items ***/ #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { @@ -305,61 +455,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);*/ -}