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