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 /*** Highlighted list items ***/
 187
 188 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
 189   outline: 1px #008484 dotted;
 190   outline-offset: -1px;
 191   /*-moz-outline-radius: 3px;*/
 192 }
 193
 194 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
 195 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
 196   border-radius: 3px;
 197   background-color: #794900;
 198   color: #FFCF00;
 199   cursor: pointer;
 200 }
 201
 202 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
 203 }
 204
 205 /*** Button icons ***/
 206
 207 .downloadButton.downloadConfirmBlock,
 208 .downloadButton.downloadCancel {
 209   -moz-image-region: rect(0px, 16px, 16px, 0px);
 210 }
 211 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
 212 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
 213 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
 214 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
 215 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
 216 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
 217   -moz-image-region: rect(0px, 32px, 16px, 16px);
 218 }
 219
 220 .downloadButton.downloadShow {
 221   -moz-image-region: rect(16px, 16px, 32px, 0px);
 222 }
 223 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
 224 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
 225 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
 226   -moz-image-region: rect(16px, 32px, 32px, 16px);
 227 }
 228
 229 .downloadButton.downloadRetry {
 230   -moz-image-region: rect(32px, 16px, 48px, 0px);
 231 }
 232 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
 233 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
 234 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
 235   -moz-image-region: rect(32px, 32px, 48px, 16px);
 236 }