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   flex-direction: column;
   8   margin: 12px 0;
   9 }
  10
  11 #date {
  12   color: #7c7c7c;
  13   font-size: 100%;
  14   font-weight: 500;
  15   margin: 18px auto 16px;  /* This top margin + :host top margin = 30px. */
  16   width: var(--downloads-item-width);
  17 }
  18
  19 #content {
  20   background: white;
  21   border-radius: 2px;  /* TODO(dbeam): change to paper-card instead. */
  22   display: flex;
  23   flex: none;
  24   margin: 0 auto;
  25   min-height: 103px;
  26   width: var(--downloads-item-width);
  27 }
  28
  29 #content[elevation='1'] {
  30   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
  31               0 3px 1px -2px rgba(0, 0, 0, .2);
  32 }
  33
  34 #details {
  35   -webkit-border-start: 1px #d8d8d8 solid;
  36   -webkit-padding-end: 16px;
  37   -webkit-padding-start: 24px;
  38   display: flex;
  39   flex: 1;
  40   flex-direction: column;
  41   padding-bottom: 12px;
  42   padding-top: 16px;
  43 }
  44
  45 #content:not(.is-active) #details {
  46   color: #bababa;
  47 }
  48
  49 #content:not(.is-active) #name {
  50   text-decoration: line-through;
  51 }
  52
  53 .icon-wrapper {
  54   align-self: center;
  55   flex: none;
  56   justify-content: center;
  57   margin: 0 24px;
  58 }
  59
  60 .icon {
  61   height: 32px;
  62   width: 32px;
  63 }
  64
  65 #content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
  66   /* TODO(dbeam): animate from top-aligned to centered when items finish? */
  67   align-self: flex-start;
  68   padding-top: 16px;
  69 }
  70
  71 #content:not(.is-active) .icon {
  72   -webkit-filter: grayscale(100%);
  73   opacity: .5;
  74 }
  75
  76 #warning {
  77   -webkit-mask-image: url(../../../../ui/webui/resources/images/warning.svg);
  78   -webkit-mask-repeat: no-repeat;
  79   -webkit-mask-size: 100%;
  80   background: rgb(255, 193, 7);
  81 }
  82
  83 #name,
  84 #file-link,
  85 #url {
  86   max-width: 100%;
  87 }
  88
  89 #name,
  90 #file-link {
  91   font-weight: 500;
  92   word-break: break-all;
  93 }
  94
  95 #name {
  96   -webkit-margin-end: 12px;  /* Only really affects #tag. */
  97 }
  98
  99 .is-active :-webkit-any(#name, #file-link, #pause, #resume, #show) {
 100   color: rgb(51, 103, 214);
 101 }
 102
 103 #tag {
 104   color: #5a5a5a;
 105   font-weight: 500;
 106 }
 107
 108 #url {
 109   color: inherit;
 110   margin-top: 6px;
 111   overflow: hidden;
 112   text-decoration: none;
 113   text-overflow: ellipsis;
 114   white-space: nowrap;
 115 }
 116
 117 .is-active #url {
 118   color: #969696;
 119 }
 120
 121 #progress,
 122 #description:not(:empty),
 123 .controls {
 124   margin-top: 16px;
 125 }
 126
 127 .is-active #description {
 128   color: #616161;
 129 }
 130
 131 .dangerous #description {
 132   color: rgb(239, 108, 0);
 133 }
 134
 135 #progress {
 136   --paper-progress-active-color: rgb(54, 126, 237);
 137   --paper-progress-container-color: rgb(223, 222, 223);
 138   width: auto;
 139 }
 140
 141 .controls {
 142   -webkit-margin-start: -8px;
 143 }
 144
 145 #cancel,
 146 #retry,
 147 .keep,
 148 .discard {
 149   color: #5a5a5a;
 150 }
 151
 152 #remove-wrapper {
 153   align-self: flex-start;
 154   margin: 0;
 155 }
 156
 157 #remove {
 158   --iron-icon-height: 16px;
 159   --iron-icon-width: 16px;
 160   color: #969696;
 161   height: 16px;
 162   padding: 8px;
 163   width: 16px;
 164 }
 165
 166 #incognito {
 167   bottom: 20px;
 168   content: -webkit-image-set(url(1x/incognito_marker.png) 1x,
 169                              url(2x/incognito_marker.png) 2x);
 170   position: absolute;
 171   right: 10px;
 172 }