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