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   @apply(--downloads-shared-style);
   7   display: flex;
   8   margin: 24px 0;
   9 }
  10
  11 :host([hide-date]) {
  12   margin-top: -12px;
  13 }
  14
  15 :host(:not(:first-of-type):not([hide-date])) {
  16   border-top: 1px solid rgba(0, 0, 0, .14);
  17   padding-top: 30px;
  18 }
  19
  20 :host(:first-of-type),
  21 :host(:not(:first-of-type):not([hide-date])) {
  22   margin-top: 30px;
  23 }
  24
  25 #date-container,
  26 #end-cap {
  27   flex: 1 0 var(--downloads-side-column-basis);
  28 }
  29
  30 #date-container > * {
  31   color: #5a5a5a;
  32   font-size: 92.3%;
  33   font-weight: bold;
  34 }
  35
  36 :host([hide-date]) #date-container {
  37   visibility: hidden;
  38 }
  39
  40 #content {
  41   background: white;
  42   border-radius: 2px;  /* TODO(dbeam): why does this differ from Polymer? */
  43   display: flex;
  44   flex: none;
  45   min-height: 96px;
  46   width: var(--downloads-item-width);
  47 }
  48
  49 #details {
  50   -webkit-border-start: 1px #d8d8d8 solid;
  51   display: flex;
  52   flex: 1;
  53   flex-direction: column;
  54   padding: 16px 16px 12px 16px;
  55 }
  56
  57 #content:not(.is-active) #details {
  58   color: #bababa;
  59 }
  60
  61 .icon-wrapper {
  62   align-self: center;
  63   flex: none;
  64   justify-content: center;
  65   margin: 0 32px;
  66 }
  67
  68 .icon {
  69   height: 32px;
  70   width: 32px;
  71 }
  72
  73 #content:not(.is-active) .icon {
  74   -webkit-filter: grayscale(100%);
  75 }
  76
  77 #warning {
  78   -webkit-mask-image: url(../../../../ui/webui/resources/images/warning.svg);
  79   -webkit-mask-repeat: no-repeat;
  80   -webkit-mask-size: 100%;
  81   background: rgb(217, 84, 61);
  82 }
  83
  84 #name,
  85 #file-link,
  86 #url {
  87   max-width: 100%;
  88 }
  89
  90 #name,
  91 #file-link {
  92   word-break: break-all;
  93 }
  94
  95 #name {
  96   -webkit-margin-end: 12px;  /* Only really affects #tag. */
  97   font-weight: bold;
  98 }
  99
 100 .is-active #name {
 101   color: #212121;
 102 }
 103
 104 .dangerous #name {
 105   color: rgb(35, 114, 236);
 106 }
 107
 108 #tag {
 109   color: #5a5a5a;
 110   font-weight: bold;
 111 }
 112
 113 #url {
 114   color: inherit;
 115   margin-top: 6px;
 116   overflow: hidden;
 117   text-decoration: none;
 118   text-overflow: ellipsis;
 119   white-space: nowrap;
 120 }
 121
 122 .is-active #url {
 123   color: rgb(51, 103, 214);
 124 }
 125
 126 #progress,
 127 #description:not(:empty),
 128 .controls {
 129   margin-top: 16px;
 130 }
 131
 132 .is-active #description {
 133   color: #616161;
 134 }
 135
 136 .dangerous #description {
 137   color: rgb(217, 84, 61);
 138 }
 139
 140 #progress {
 141   --paper-progress-active-color: rgb(54, 126, 237);
 142   --paper-progress-container-color: rgb(223, 222, 223);
 143   width: auto;
 144 }
 145
 146 /* TODO(dbeam): open up a CSS mixin instead in Polymer. */
 147 #progress /deep/ #progressContainer {
 148   border-radius: 2px;
 149 }
 150
 151 #remove-wrapper {
 152   align-self: flex-start;
 153   margin: 0;
 154 }
 155
 156 #remove {
 157   --paper-icon-button: {
 158     height: 16px;
 159     width: 16px;
 160   };
 161   --iron-icon-height: 16px;
 162   --iron-icon-width: 16px;
 163 }
 164
 165 #incognito {
 166   bottom: 16px;
 167   content: -webkit-image-set(url(1x/incognito_marker.png) 1x,
 168                              url(2x/incognito_marker.png) 2x);
 169   position: absolute;
 170   right: 10px;
 171 }
 172
 173 @media not all and (max-width: 1024px) {
 174   #date-container > * {
 175     -webkit-margin-start: 24px;
 176   }
 177 }
 178
 179 @media all and (max-width: 1024px) {
 180   /* In narrow windows, put the dates on top instead of on the side. */
 181   :host {
 182     flex-direction: column;
 183   }
 184
 185   :host([hide-date]) #date-container,
 186   #end-cap {
 187     display: none;
 188   }
 189
 190   #content {
 191     margin: 0 auto;
 192   }
 193
 194   #date-container {
 195     flex: none !important;
 196     margin: 0 auto 30px;
 197     width: var(--downloads-item-width);
 198   }
 199 }