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