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   padding: 0;
  11 }
  12
  13 #downloadsListBox {
  14   background-color: transparent;
  15   padding: 4px;
  16   color: inherit;
  17 }
  18
  19 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
  20   display: none;
  21 }
  22
  23 #downloadsPanel[hasdownloads] > #emptyDownloads {
  24   display: none;
  25 }
  26
  27 #emptyDownloads {
  28   padding: 10px 20px;
  29   max-width: 40ch;
  30 }
  31
  32 #downloadsSummary {
  33   padding: 8px 38px 8px 12px;
  34   cursor: pointer;
  35   -moz-user-focus: normal;
  36 }
  37
  38 #downloadsSummary > .downloadTypeIcon {
  39   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
  40 }
  41
  42 #downloadsSummaryDescription {
  43   color: #3333FF;
  44 }
  45
  46 #downloadsHistory {
  47   cursor: pointer;
  48   margin: 4px !important;
  49   color: #3333FF;
  50 }
  51
  52 #downloadsHistory > .button-box {
  53 }
  54
  55 /*** List items and similar elements in the summary ***/
  56
  57 #downloadsSummary,
  58 richlistitem[type="download"] {
  59   height: var(--downloads-item-height);
  60   -moz-padding-end: 0;
  61   color: inherit;
  62 }
  63
  64 richlistitem[type="download"] {
  65   margin: 0;
  66   /*border-top: 1px solid var(--downloads-item-border-top-color);*/
  67   border-bottom: 1px solid var(--downloads-item-border-bottom-color);
  68   background: transparent;
  69   padding: 8px;
  70 }
  71
  72 richlistitem[type="download"]:first-child {
  73 /*  border-top: 1px solid transparent;*/
  74 }
  75
  76 .downloadTypeIcon {
  77   -moz-margin-end: 8px;
  78   /* Prevent flickering when changing states. */
  79   height: 32px;
  80   width: 32px;
  81 }
  82
  83 .blockedIcon {
  84   list-style-image: url("chrome://global/skin/icons/alert-error.gif");
  85 }
  86
  87 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
  88    a vbox with class .downloadContainer. We set the font-size of the entire
  89    container to --downloads-item-font-size-factor because:
  90
  91    1) This is the size that we want .downloadDetails to be
  92    2) The container's width is set by localizers by &downloadDetails.width;,
  93       which is a ch unit. Since this is the value that should control the
  94       panel width, we apply it to the outer container to constrain
  95       .downloadTarget and .downloadProgress.
  96
  97    Finally, since we want .downloadTarget's font-size to be at 100% of the
  98    font-size of .downloadContainer's parent, we use calc to go from the
  99    smaller font-size back to the original font-size.
 100  */
 101 #downloadsSummaryDetails,
 102 .downloadContainer {
 103   font-size: calc(100% * var(--downloads-item-font-size-factor));
 104 }
 105
 106 #downloadsSummaryDescription,
 107 .downloadTarget {
 108   margin-bottom: var(--downloads-item-target-margin-bottom);
 109   cursor: inherit;
 110 }
 111
 112 .downloadTarget {
 113   font-size: calc(100% / var(--downloads-item-font-size-factor));
 114 }
 115
 116 #downloadsSummaryDetails,
 117 .downloadDetails {
 118   margin-top: var(--downloads-item-details-margin-top);
 119   opacity: var(--downloads-item-details-opacity);
 120   cursor: inherit;
 121 }
 122
 123 .downloadButton {
 124   min-width: 0;
 125   min-height: 0;
 126   margin: 3px;
 127 /*  border: none; */
 128   background: transparent;
 129   padding: 5px;
 130   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 131 }
 132
 133 .downloadButton > .button-box {
 134   padding: 0;
 135 }
 136
 137
 138 /* === END downloads.inc.css === */
 139
 140 /*** Panel and outer controls ***/
 141
 142 #downloadsFooter {
 143 }
 144
 145 #downloadsFooter:hover {
 146 }
 147
 148 #downloadsFooter:hover:active {
 149 }
 150
 151 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 152 #downloadsPanel[keyfocus] #downloadsHistory:focus {
 153   outline: 1px #008484 dotted;
 154   outline-offset: -1px;
 155 }
 156
 157 #downloadsPanel[keyfocus] #downloadsSummary:focus {
 158   outline-offset: -5px;
 159 }
 160
 161 #downloadsHistory > .button-box {
 162   /* Hide the border so we don't display an inner focus ring. */
 163   border: none;
 164 }
 165
 166 /*** List items and similar elements in the summary ***/
 167
 168 :root {
 169   --downloads-item-height: 7em;
 170   /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/
 171   --downloads-item-border-bottom-color: #9C9CFF;
 172   --downloads-item-font-size-factor: 0.9;
 173   --downloads-item-target-margin-bottom: 6px;
 174   --downloads-item-details-margin-top: 0;
 175   --downloads-item-details-opacity: 0.6;
 176 }
 177
 178 .downloadButton > .button-box {
 179   border: 1px solid transparent;
 180 }
 181
 182 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
 183   border: 1px dotted #008484;
 184 }
 185
 186 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
 187   list-style-image: url("chrome://global/skin/icons/warning.svg");
 188 }
 189
 190 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
 191   list-style-image: url("chrome://global/skin/icons/information-32.png");
 192 }
 193
 194 /*** Highlighted list items ***/
 195
 196 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
 197   outline: 1px #008484 dotted;
 198   outline-offset: -1px;
 199   /*-moz-outline-radius: 3px;*/
 200 }
 201
 202 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
 203 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
 204   border-radius: 3px;
 205   background-color: #794900;
 206   color: #FFCF00;
 207   cursor: pointer;
 208 }
 209
 210 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
 211 }
 212
 213 /*** Button icons ***/
 214
 215 .downloadButton.downloadIconCancel {
 216   -moz-image-region: rect(0px, 16px, 16px, 0px);
 217 }
 218 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel,
 219 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover,
 220 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active {
 221   -moz-image-region: rect(0px, 32px, 16px, 16px);
 222 }
 223
 224 .downloadButton.downloadIconShow {
 225   -moz-image-region: rect(16px, 16px, 32px, 0px);
 226 }
 227 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow,
 228 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover,
 229 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active {
 230   -moz-image-region: rect(16px, 32px, 32px, 16px);
 231 }
 232
 233 .downloadButton.downloadIconRetry {
 234   -moz-image-region: rect(32px, 16px, 48px, 0px);
 235 }
 236 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry,
 237 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover,
 238 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active {
 239   -moz-image-region: rect(32px, 32px, 48px, 16px);
 240 }