X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Fdownloads.css;h=31c02e6c6ee96766b406e567b1558949b070df9a;hp=b7d846ef95aad98ad004f210f68a1450535a51be;hb=7327c957c10aeaccf57a457a9950ac380a326f29;hpb=5968ec68c9037501866a4d997203c8934f16fbad diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index b7d846ef..31c02e6c 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -2,6 +2,8 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ +/* === BEGIN downloads.inc.css === */ + /*** Panel and outer controls ***/ #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { @@ -18,27 +20,13 @@ display: none; } -#downloadsHistory { - cursor: pointer; - margin: 4px !important; -} - -#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { - outline: 1px #008484 dotted; - outline-offset: -1px; -} - -#downloadsHistory > .button-box { - border: none; +#downloadsPanel[hasdownloads] > #emptyDownloads { + display: none; } -/*** Downloads Summary and List items ***/ - -#downloadsSummary, -richlistitem[type="download"] { - height: 7em; - -moz-padding-end: 0; - color: inherit; +#emptyDownloads { + padding: 10px 20px; + max-width: 40ch; } #downloadsSummary { @@ -47,11 +35,6 @@ richlistitem[type="download"] { -moz-user-focus: normal; } -#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { - outline: 1px #008484 dotted; - outline-offset: -5px; -} - #downloadsSummary > .downloadTypeIcon { list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); } @@ -60,9 +43,28 @@ richlistitem[type="download"] { color: #3333FF; } +#downloadsHistory { + cursor: pointer; + margin: 4px !important; + color: #3333FF; +} + +#downloadsHistory > .button-box { +} + +/*** List items and similar elements in the summary ***/ + +#downloadsSummary, +richlistitem[type="download"] { + height: var(--downloads-item-height); + -moz-padding-end: 0; + color: inherit; +} + richlistitem[type="download"] { margin: 0; - border-bottom: 1px dotted #9C9CFF; + /*border-top: 1px solid var(--downloads-item-border-top-color);*/ + border-bottom: 1px solid var(--downloads-item-border-bottom-color); background: transparent; padding: 8px; } @@ -71,17 +73,11 @@ richlistitem[type="download"]:first-child { /* border-top: 1px solid transparent;*/ } -#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { - outline: 1px #008484 dotted; - outline-offset: -1px; - /*-moz-outline-radius: 3px;*/ -} - .downloadTypeIcon { -moz-margin-end: 8px; /* Prevent flickering when changing states. */ - min-height: 32px; - min-width: 32px; + height: 32px; + width: 32px; } .blockedIcon { @@ -90,7 +86,7 @@ richlistitem[type="download"]:first-child { /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of a vbox with class .downloadContainer. We set the font-size of the entire - container to 90% because: + container to --downloads-item-font-size-factor because: 1) This is the size that we want .downloadDetails to be 2) The container's width is set by localizers by &downloadDetails.width;, @@ -104,22 +100,23 @@ richlistitem[type="download"]:first-child { */ #downloadsSummaryDetails, .downloadContainer { - font-size: 90%; + font-size: calc(100% * var(--downloads-item-font-size-factor)); } #downloadsSummaryDescription, .downloadTarget { - margin-bottom: 6px; + margin-bottom: var(--downloads-item-target-margin-bottom); cursor: inherit; } .downloadTarget { - font-size: calc(100%/0.9); + font-size: calc(100% / var(--downloads-item-font-size-factor)); } #downloadsSummaryDetails, .downloadDetails { - opacity: 0.6; + margin-top: var(--downloads-item-details-margin-top); + opacity: var(--downloads-item-details-opacity); cursor: inherit; } @@ -134,28 +131,86 @@ richlistitem[type="download"]:first-child { } .downloadButton > .button-box { - border: 1px solid transparent; padding: 0; } + +/* === END downloads.inc.css === */ + +/*** Panel and outer controls ***/ + +#downloadsFooter { +} + +#downloadsFooter:hover { +} + +#downloadsFooter:hover:active { +} + +#downloadsPanel[keyfocus] #downloadsSummary:focus, +#downloadsPanel[keyfocus] #downloadsHistory:focus { + outline: 1px #008484 dotted; + outline-offset: -1px; +} + +#downloadsPanel[keyfocus] #downloadsSummary:focus { + outline-offset: -5px; +} + +#downloadsHistory > .button-box { + /* Hide the border so we don't display an inner focus ring. */ + border: none; +} + +/*** 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-font-size-factor: 0.9; + --downloads-item-target-margin-bottom: 6px; + --downloads-item-details-margin-top: 0; + --downloads-item-details-opacity: 0.6; +} + +.downloadButton > .button-box { + border: 1px solid transparent; +} + #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { border: 1px dotted #008484; } /*** Highlighted list items ***/ -#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover { +#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { + outline: 1px #008484 dotted; + 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.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 { @@ -179,150 +234,3 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hove richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { -moz-image-region: rect(32px, 32px, 48px, 16px); } - -/*** Status and progress indicator ***/ - -#downloads-indicator-anchor { - /* Makes the outermost stack element positioned, so that its contents are - rendered over the main browser window in the Z order. This is required by - the animated event notification. */ - position: relative; -} - -/*** Main indicator icon ***/ - -#downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), - 0, 108, 18, 90) center no-repeat; - min-width: 18px; - min-height: 18px; -} - -#downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon, -#downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, -#downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), - 18, 108, 36, 90) center no-repeat; -} - -#downloads-indicator-icon:-moz-lwtheme-brighttext { -/* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), - 0, 108, 18, 90) center no-repeat;*/ -} - -#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); -} - -/* In the next few rules, we use :not([counter]) as a shortcut that is - equivalent to -moz-any([progress], [paused]). */ - -#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), - 0, 108, 18, 90) center no-repeat; - background-size: 12px; -} - -#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); -} - -#downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, -#downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { - background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), - 18, 108, 36, 90) center no-repeat; -} - -/*** Download notifications ***/ - -#downloads-indicator-notification { - opacity: 0; - background-size: 16px; - background-position: center; - background-repeat: no-repeat; -} - -@keyframes downloadsIndicatorNotificationStartRight { - from { opacity: 0; transform: translate(-128px, 128px) scale(8); } - 20% { opacity: .85; animation-timing-function: ease-out; } - to { opacity: 0; transform: translate(0) scale(1); } -} - -@keyframes downloadsIndicatorNotificationStartLeft { - from { opacity: 0; transform: translate(128px, 128px) scale(8); } - 20% { opacity: .85; animation-timing-function: ease-out; } - to { opacity: 0; transform: translate(0) scale(1); } -} - -#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { - background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); - animation-name: downloadsIndicatorNotificationStartRight; - animation-duration: 1s; -} - -#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationStartLeft; -} - -@keyframes downloadsIndicatorNotificationFinish { - from { opacity: 0; transform: scale(1); } - 20% { opacity: .65; animation-timing-function: ease-in; } - to { opacity: 0; transform: scale(8); } -} - -#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { - background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); - animation-name: downloadsIndicatorNotificationFinish; - animation-duration: 1s; -} - -/*** Progress bar and text ***/ - -#downloads-indicator-counter { - height: 9px; - margin: -3px 0 0; - color: #FFCF00; - font-size: 9px; - line-height: 9px; - text-align: center; -} - -#downloads-indicator-counter:-moz-lwtheme-brighttext { -/* color: white; - text-shadow: 0 0 1px rgba(0,0,0,.7), - 0 1px 1.5px rgba(0,0,0,.5);*/ -} - -#downloads-indicator-progress { - width: 16px; - height: 5px; - min-width: 0; - min-height: 0; - margin-top: 1px; - margin-bottom: 2px; - border-radius: 2px; - background-color: #795900; -} - -#downloads-indicator-progress > .progress-bar { - -moz-appearance: none; - min-width: 0; - min-height: 0; - background-color: #008484; - border-radius: 2px 0 0 2px; -} - -#downloads-indicator-progress > .progress-remainder { - min-width: 0; - min-height: 0; - background-color: #A09090; - border-radius: 0 2px 2px 0; -} - -#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { - background-color: #8050B0; -} - -#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { - background-color: #404048; -}