chrome/browser/resources/md_downloads/item.css

   1 /* Copyright 2015 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 :host {
   6   display: flex;
   7   margin: 24px 0;
   8 }
   9
  10 :host([hide-date]) {
  11   margin-top: -12px;
  12 }
  13
  14 :host(:first-of-type),
  15 :host(:not(:first-of-type):not([hide-date])) {
  16   margin-top: 30px;
  17 }
  18
  19 #date-container,
  20 #end-cap {
  21   flex: 1 0 var(--downloads-side-column-basis);
  22 }
  23
  24 #date-container > * {
  25   color: #7c7c7c;
  26   font-weight: 500;
  27 }
  28
  29 :host([hide-date]) #date-container {
  30   visibility: hidden;
  31 }
  32
  33 #content {
  34   background: white;
  35   border-radius: 2px;  /* TODO(dbeam): change to paper-card instead. */
  36   display: flex;
  37   flex: none;
  38   min-height: 103px;
  39   width: var(--downloads-item-width);
  40 }
  41
  42 #content[elevation='1'] {
  43   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
  44               0 3px 1px -2px rgba(0, 0, 0, .2);
  45 }
  46
  47 #details {
  48   -webkit-border-start: 1px #d8d8d8 solid;
  49   -webkit-padding-end: 16px;
  50   -webkit-padding-start: 24px;
  51   display: flex;
  52   flex: 1;
  53   flex-direction: column;
  54   padding-bottom: 12px;
  55   padding-top: 16px;
  56 }
  57
  58 #content:not(.is-active) #details {
  59   color: #bababa;
  60 }
  61
  62 #content:not(.is-active) #name {
  63   text-decoration: line-through;
  64 }
  65
  66 .icon-wrapper {
  67   align-self: center;
  68   flex: none;
  69   justify-content: center;
  70   margin: 0 24px;
  71 }
  72
  73 .icon {
  74   height: 32px;
  75   width: 32px;
  76 }
  77
  78 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
  79   /* TODO(dbeam): animate from top-aligned to centered when items finish? */
  80   align-self: flex-start;
  81   padding-top: 16px;
  82 }
  83
  84 #content:not(.is-active) .icon {
  85   -webkit-filter: grayscale(100%);
  86   opacity: .5;
  87 }
  88
  89 #warning {
  90   -webkit-mask-image: url(../../../../ui/webui/resources/images/warning.svg);
  91   -webkit-mask-repeat: no-repeat;
  92   -webkit-mask-size: 100%;
  93   background: rgb(255, 193, 7);
  94 }
  95
  96 #name,
  97 #file-link,
  98 #url {
  99   max-width: 100%;
 100 }
 101
 102 #name,
 103 #file-link {
 104   font-weight: 500;
 105   word-break: break-all;
 106 }
 107
 108 #name {
 109   -webkit-margin-end: 12px;  /* Only really affects #tag. */
 110 }
 111
 112 .is-active :-webkit-any(#name, #file-link, #pause, #resume, #show) {
 113   color: rgb(51, 103, 214);
 114 }
 115
 116 #tag {
 117   color: #5a5a5a;
 118   font-weight: 500;
 119 }
 120
 121 #url {
 122   color: inherit;
 123   margin-top: 6px;
 124   overflow: hidden;
 125   text-decoration: none;
 126   text-overflow: ellipsis;
 127   white-space: nowrap;
 128 }
 129
 130 .is-active #url {
 131   color: #969696;
 132 }
 133
 134 #progress,
 135 #description:not(:empty),
 136 .controls {
 137   margin-top: 16px;
 138 }
 139
 140 .is-active #description {
 141   color: #616161;
 142 }
 143
 144 .dangerous #description {
 145   color: rgb(239, 108, 0);
 146 }
 147
 148 #progress {
 149   --paper-progress-active-color: rgb(54, 126, 237);
 150   --paper-progress-container-color: rgb(223, 222, 223);
 151   width: auto;
 152 }
 153
 154 .controls {
 155   -webkit-margin-start: -8px;
 156 }
 157
 158 #cancel,
 159 #retry,
 160 .keep,
 161 .discard {
 162   color: #5a5a5a;
 163 }
 164
 165 #remove-wrapper {
 166   align-self: flex-start;
 167   margin: 0;
 168 }
 169
 170 #remove {
 171   --iron-icon-height: 16px;
 172   --iron-icon-width: 16px;
 173   color: #969696;
 174   height: 16px;
 175   padding: 8px;
 176   width: 16px;
 177 }
 178
 179 #incognito {
 180   bottom: 20px;
 181   content: -webkit-image-set(url(1x/incognito_marker.png) 1x,
 182                              url(2x/incognito_marker.png) 2x);
 183   position: absolute;
 184   right: 10px;
 185 }
 186
 187 @media not all and (max-width: 1024px) {
 188   /* Only show rule separators in wide mode. */
 189   :host(:not(:first-of-type):not([hide-date])) {
 190     border-top: 1px solid rgba(0, 0, 0, .14);
 191     padding-top: 30px;
 192   }
 193
 194   #date-container > * {
 195     -webkit-margin-start: 24px;
 196   }
 197 }
 198
 199 @media all and (max-width: 1024px) {
 200   /* In narrow windows, put the dates on top instead of on the side. */
 201   :host {
 202     flex-direction: column;
 203   }
 204
 205   :host([hide-date]) #date-container,
 206   #end-cap {
 207     display: none;
 208   }
 209
 210   #content {
 211     margin: 0 auto;
 212   }
 213
 214   #date-container {
 215     flex: none !important;
 216     margin: 0 auto 16px;
 217     width: var(--downloads-item-width);
 218   }
 219 }