X-Git-Url: https://git-public.kairo.at/?p=themes.git;a=blobdiff_plain;f=LCARStrek%2Fbrowser%2Fdownloads%2Fdownloads.css;h=e90d51e054f9802e6c3a8099370cc5f070998e12;hp=a6c13292f47a5d44b38c63ea0a43b8683f002b66;hb=589b5528220a57ff70809bd8ef0eeaf51a0c8b2f;hpb=7b9280260c845074b0e106d9e3e1ed28e7a87a57 diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css index a6c13292..e90d51e0 100644 --- a/LCARStrek/browser/downloads/downloads.css +++ b/LCARStrek/browser/downloads/downloads.css @@ -4,11 +4,6 @@ /*** Panel and outer controls ***/ -#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { - /* Avoid that the arrow overlaps the selection on first item */ - padding-top: 5px; -} - #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } @@ -23,14 +18,37 @@ display: none; } +#downloadsPanel[hasdownloads] > #emptyDownloads { + display: none; +} + +#emptyDownloads { + padding: 10px 20px; + max-width: 40ch; +} + #downloadsHistory { - background: transparent; - color: #9C9CFF; cursor: pointer; + margin: 4px !important; + color: #3333FF; +} + +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { + outline: 1px #008484 dotted; + outline-offset: -1px; } #downloadsHistory > .button-box { - margin: 1em; + border: none; +} + +#downloadsFooter { +} + +#downloadsFooter:hover { +} + +#downloadsFooter:hover:active { } /*** Downloads Summary and List items ***/ @@ -45,16 +63,20 @@ richlistitem[type="download"] { #downloadsSummary { padding: 8px 38px 8px 12px; cursor: pointer; + -moz-user-focus: normal; +} + +#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { + outline: 1px #008484 dotted; + outline-offset: -5px; } #downloadsSummary > .downloadTypeIcon { - height: 24px; - width: 24px; - list-style-image: url("chrome://mozapps/skin/downloads/downloadIcon.png"); + list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); } #downloadsSummaryDescription { - color: -moz-nativehyperlinktext; + color: #3333FF; } richlistitem[type="download"] { @@ -77,191 +99,106 @@ richlistitem[type="download"]:first-child { .downloadTypeIcon { -moz-margin-end: 8px; /* Prevent flickering when changing states. */ - min-height: 32px; - min-width: 32px; + height: 32px; + width: 32px; } .blockedIcon { list-style-image: url("chrome://global/skin/icons/alert-error.gif"); } +/* 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: + + 1) This is the size that we want .downloadDetails to be + 2) The container's width is set by localizers by &downloadDetails.width;, + which is a ch unit. Since this is the value that should control the + panel width, we apply it to the outer container to constrain + .downloadTarget and .downloadProgress. + + Finally, since we want .downloadTarget's font-size to be at 100% of the + 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: 90%; +} + +#downloadsSummaryDescription, .downloadTarget { margin-bottom: 6px; cursor: inherit; } +.downloadTarget { + font-size: calc(100%/0.9); +} + +#downloadsSummaryDetails, .downloadDetails { opacity: 0.6; - font-size: 90%; cursor: inherit; } .downloadButton { - -moz-appearance: none; min-width: 0; min-height: 0; - margin: 6px; - border: none; + margin: 3px; +/* border: none; */ background: transparent; padding: 5px; list-style-image: url("chrome://browser/skin/downloads/buttons.png"); } .downloadButton > .button-box { + border: 1px solid transparent; padding: 0; } +#downloadsPanel[keyfocus] .downloadButton:focus > .button-box { + border: 1px dotted #008484; +} + /*** Highlighted list items ***/ -richlistitem[type="download"][state="1"]:hover { +/* #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.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } -.downloadButton.downloadCancel:hover, -.downloadButton.downloadCancel: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); } -.downloadButton.downloadShow:hover, -.downloadButton.downloadShow:active { +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); } .downloadButton.downloadRetry { -moz-image-region: rect(32px, 16px, 48px, 0px); } -.downloadButton.downloadRetry:hover, -.downloadButton.downloadRetry:active { +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); } - -/*** 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[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { - background-image: url("chrome://browser/skin/downloads/download-glow.png"); -} - -#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; -} - -/*** Event notification ***/ - -#downloads-indicator-notification { - opacity: 0; - background: url("chrome://browser/skin/downloads/download-notification.png") - center no-repeat; - background-size: 16px; -} - -@keyframes downloadsIndicatorNotificationRight { - 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 downloadsIndicatorNotificationLeft { - 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] > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationRight; - animation-duration: 1s; -} - -#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { - animation-name: downloadsIndicatorNotificationLeft; -} - -/*** 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-progress { - width: 16px; - height: 5px; - min-width: 0; - min-height: 0; - margin-top: 1px; - margin-bottom: 2px; - border-radius: 2px; - background-color: #795900; - /*border: 1px solid #FFCF00;*/ -} - -#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: #000000; - 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: #000000; -}