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