LCARStrek/browser/downloads/downloads.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* === BEGIN downloads.inc.css === */
   6
   7 /*** Panel and outer controls ***/
   8
   9 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
  10   overflow: hidden;
  11   display: block;
  12 }
  13
  14 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
  15 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  16   padding: 0;
  17 }
  18
  19 #downloadsListBox {
  20   background-color: transparent;
  21   padding: 4px;
  22   color: inherit;
  23 }
  24
  25 #emptyDownloads {
  26   padding: 10px 20px;
  27   /* The panel can be wider than this description after the blocked subview is
  28      shown, so center the text. */
  29   text-align: center;
  30 }
  31
  32 .downloadsPanelFooter {
  33   background-color: #000000;
  34   border-top: 1px solid #A09090;
  35 }
  36
  37 .downloadsPanelFooter > toolbarseparator {
  38   margin: 0;
  39   border: 0;
  40   min-width: 0;
  41 /*  border-left: 1px solid hsla(210,4%,10%,.14);
  42   -moz-appearance: none !important;*/
  43 }
  44
  45 .downloadsPanelFooterButton {
  46   margin: 0;
  47   padding: 0;
  48 /*  min-height: 40px;*/
  49 }
  50
  51 .downloadsPanelFooterButton:hover {
  52 }
  53
  54 .downloadsPanelFooterButton:hover:active {
  55 }
  56
  57 .downloadsPanelFooterButton[default] {
  58 }
  59
  60 .downloadsPanelFooterButton[default]:hover {
  61 }
  62
  63 .downloadsPanelFooterButton[default]:hover:active {
  64 }
  65
  66 #downloadsSummary {
  67   padding: 0 12px;
  68   cursor: pointer;
  69   -moz-user-focus: normal;
  70 }
  71
  72 #downloadsSummary > .downloadTypeIcon {
  73   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
  74 }
  75
  76 #downloadsSummaryDescription {
  77   color: #3333FF;
  78 }
  79
  80 /*** List items and similar elements in the summary ***/
  81
  82 #downloadsSummary,
  83 richlistitem[type="download"] {
  84   height: var(--downloads-item-height);
  85   padding-inline-end: 0;
  86   color: inherit;
  87 }
  88
  89 richlistitem[type="download"] {
  90   margin: 0;
  91   /*border-top: 1px solid var(--downloads-item-border-top-color);*/
  92   border-bottom: 1px solid var(--downloads-item-border-bottom-color);
  93   background: transparent;
  94   padding: 8px;
  95 }
  96
  97 richlistitem[type="download"]:first-child {
  98 /*  border-top: 1px solid transparent;*/
  99 }
 100
 101 .downloadTypeIcon {
 102   margin-top: 8px;
 103   margin-inline-end: 12px;
 104   margin-bottom: 8px;
 105   margin-inline-start: 0;
 106   width: 32px;
 107   height: 32px;
 108 }
 109
 110 .downloadBlockedBadge {
 111   margin: 0 4px;
 112   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 113 }
 114
 115 downloadBlockedBadge:-moz-locale-dir(rtl) {
 116   background-position-x: left;
 117 }
 118
 119 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
 120   background-image: url("chrome://browser/skin/warning.svg");
 121 }
 122
 123 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
 124   background-image: url("chrome://browser/skin/info.svg");
 125 }
 126
 127 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
 128    a vbox with class .downloadContainer. We set the font-size of the entire
 129    container to --downloads-item-font-size-factor because:
 130
 131    1) This is the size that we want .downloadDetails to be
 132    2) The container's width is set by localizers by &downloadDetails.width;,
 133       which is a ch unit. Since this is the value that should control the
 134       panel width, we apply it to the outer container to constrain
 135       .downloadTarget and .downloadProgress.
 136
 137    Finally, since we want .downloadTarget's font-size to be at 100% of the
 138    font-size of .downloadContainer's parent, we use calc to go from the
 139    smaller font-size back to the original font-size.
 140  */
 141 #downloadsSummaryDetails,
 142 .downloadContainer {
 143   font-size: calc(100% * var(--downloads-item-font-size-factor));
 144 }
 145
 146 #downloadsSummaryDescription,
 147 .downloadTarget {
 148   margin-bottom: var(--downloads-item-target-margin-bottom);
 149   cursor: inherit;
 150 }
 151
 152 .downloadTarget {
 153   font-size: calc(100% / var(--downloads-item-font-size-factor));
 154 }
 155
 156 #downloadsSummaryDetails,
 157 .downloadDetails {
 158   margin-top: var(--downloads-item-details-margin-top);
 159   opacity: var(--downloads-item-details-opacity);
 160   cursor: inherit;
 161 }
 162
 163 .downloadButton {
 164   min-width: 0;
 165   min-height: 0;
 166   margin: 3px;
 167 /*  border: none; */
 168   background: transparent;
 169   padding: 5px;
 170   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 171 }
 172
 173 .downloadButton > .button-box {
 174   padding: 0;
 175 }
 176
 177 /*** Blocked subview ***/
 178
 179 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
 180   /* When the main view is showing, the shadow on the left edge of the subview is
 181      barely visible on the right edge of the main view, so set it to none. */
 182   box-shadow: none;
 183 }
 184
 185 /* When the subview is showing, turn the download button into an arrow pointing
 186    back to the main view. */
 187 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
 188   list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
 189 }
 190
 191 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton:-moz-locale-dir(rtl) {
 192   list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
 193 }
 194
 195 #downloadsPanel-blockedSubview {
 196   background-image: url("chrome://browser/skin/warning.svg");
 197   background-size: 32px 32px;
 198   background-position: 16px 16px;
 199   background-repeat: no-repeat;
 200 }
 201
 202 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
 203   background-position: calc(100% - 16px) 16px;
 204 }
 205
 206 #downloadsPanel-blockedSubview[verdict=Malware] {
 207   background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
 208 }
 209
 210 #downloadsPanel-blockedSubview-title {
 211   margin-top: 16px;
 212   margin-bottom: 16px;
 213   font-size: calc(100% / var(--downloads-item-font-size-factor));
 214 }
 215
 216 #downloadsPanel-blockedSubview-details1,
 217 #downloadsPanel-blockedSubview-details2 {
 218   font-size: calc(100% * var(--downloads-item-font-size-factor));
 219   margin-bottom: 16px;
 220   opacity: var(--downloads-item-details-opacity);
 221 }
 222
 223 #downloadsPanel-blockedSubview-title,
 224 #downloadsPanel-blockedSubview-details1,
 225 #downloadsPanel-blockedSubview-details2 {
 226   -moz-margin-start: 64px;
 227   -moz-margin-end: 16px;
 228 }
 229
 230 /* === END downloads.inc.css === */
 231
 232 /*** Panel and outer controls ***/
 233
 234 #downloadsSummary {
 235 }
 236
 237 #downloadsSummary:hover {
 238 }
 239
 240 #downloadsSummary:hover:active {
 241 }
 242
 243 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 244 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
 245   outline: 1px #008484 dotted;
 246   outline-offset: -1px;
 247 }
 248
 249 #downloadsPanel[keyfocus] #downloadsSummary:focus {
 250   outline-offset: -5px;
 251 }
 252
 253 .downloadsPanelFooterButton > .button-box {
 254   /* Hide the border so we don't display an inner focus ring. */
 255   border: none;
 256 }
 257
 258 richlistitem[type="download"][showingsubview] {
 259   background-color: Highlight;
 260   color: HighlightText;
 261   transition: background-color var(--panelui-subview-transition-duration),
 262               color var(--panelui-subview-transition-duration);
 263 }
 264
 265 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
 266 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
 267 richlistitem[type="download"][showingsubview][verdict="Malware"] {
 268   background-color: hsl(4, 82%, 47%);
 269   color: white;
 270 }
 271
 272
 273 /*** List items and similar elements in the summary ***/
 274
 275 :root {
 276   --downloads-item-height: 7em;
 277   /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/
 278   --downloads-item-border-bottom-color: #9C9CFF;
 279   --downloads-item-font-size-factor: 0.9;
 280   --downloads-item-target-margin-bottom: 6px;
 281   --downloads-item-details-margin-top: 0;
 282   --downloads-item-details-opacity: 0.6;
 283 }
 284
 285 .downloadButton > .button-box {
 286   border: 1px solid transparent;
 287 }
 288
 289 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
 290   border: 1px dotted #008484;
 291 }
 292
 293 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
 294   list-style-image: url("chrome://global/skin/icons/warning.svg");
 295 }
 296
 297 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
 298   list-style-image: url("chrome://global/skin/icons/information-32.png");
 299 }
 300
 301 /*** Highlighted list items ***/
 302
 303 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
 304   outline: 1px #008484 dotted;
 305   outline-offset: -1px;
 306   /*-moz-outline-radius: 3px;*/
 307 }
 308
 309 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
 310 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
 311   border-radius: 3px;
 312   background-color: #794900;
 313   color: #FFCF00;
 314   cursor: pointer;
 315 }
 316
 317 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
 318 }
 319
 320 /*** Button icons ***/
 321
 322 .downloadButton.downloadIconCancel {
 323   -moz-image-region: rect(0px, 16px, 16px, 0px);
 324 }
 325 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel,
 326 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover,
 327 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active {
 328   -moz-image-region: rect(0px, 32px, 16px, 16px);
 329 }
 330
 331 .downloadButton.downloadIconShow {
 332   -moz-image-region: rect(16px, 16px, 32px, 0px);
 333 }
 334 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow,
 335 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover,
 336 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active {
 337   -moz-image-region: rect(16px, 32px, 32px, 16px);
 338 }
 339
 340 .downloadButton.downloadIconRetry {
 341   -moz-image-region: rect(32px, 16px, 48px, 0px);
 342 }
 343 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry,
 344 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover,
 345 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active {
 346   -moz-image-region: rect(32px, 32px, 48px, 16px);
 347 }
 348
 349 .downloadButton.downloadShowBlockedInfo {
 350   -moz-image-region: rect(48px, 16px, 64px, 0px);
 351 }
 352 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo,
 353 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover,
 354 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active {
 355 /*  -moz-image-region: rect(48px, 32px, 64px, 16px);*/
 356 }
 357
 358 .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
 359   -moz-image-region: rect(64px, 16px, 80px, 0px);
 360 }
 361 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl),
 362 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl),
 363 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) {
 364 /*  -moz-image-region: rect(64px, 32px, 80px, 16px);*/
 365 }