chrome/browser/resources/md_downloads/item.css

/* Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

:host {
  display: flex;
  flex-direction: column;
}

#date {
  color: rgb(104, 113, 116);
  font-size: 100%;
  font-weight: 500;
  margin: 24px auto 10px;
  width: var(--downloads-item-width);
}

#date:empty {
  display: none;
}

#content {
  background: white;
  border-radius: 2px;
  display: flex;
  flex: none;
  margin: 6px auto;
  min-height: 103px;
  position: relative;
  width: var(--downloads-item-width);
}

#content.is-active {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05), 0 1px 4px 0 rgba(0, 0, 0, .08),
              0 3px 1px -2px rgba(0, 0, 0, .2);
}

#content:not(.is-active) {
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .03), 0 1px 4px 0 rgba(0, 0, 0, .048),
              0 3px 1px -2px rgba(0, 0, 0, .12);
}

#details {
  -webkit-border-start: 1px #d8d8d8 solid;
  -webkit-padding-end: 16px;
  -webkit-padding-start: 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;  /* This allows #url to ellide correctly. */
  padding-bottom: 12px;
  padding-top: 16px;
}

#content:not(.is-active) #details {
  color: rgba(186, 186, 186, .6);
}

#content:not(.is-active) #name {
  text-decoration: line-through;
}

.icon-wrapper {
  align-self: center;
  flex: none;
  justify-content: center;
  margin: 0 24px;
}

.icon {
  height: 32px;
  width: 32px;
}

#content:-webkit-any(.show-progress, .dangerous) #file-icon-wrapper {
  /* TODO(dbeam): animate from top-aligned to centered when items finish? */
  align-self: flex-start;
  padding-top: 16px;
}

#content:not(.is-active) .icon {
  -webkit-filter: grayscale(100%);
  opacity: .5;
}

#danger-icon {
  height: 32px;
  width: 32px;
}

#danger-icon[icon='cr:warning'] {
  color: rgb(255, 193, 7);
}

#danger-icon[icon='downloads:remove-circle'] {
  color: rgb(244, 67, 54);
}

#name,
#file-link,
#url {
  max-width: 100%;
}

#name,
#file-link {
  font-weight: 500;
  word-break: break-all;
}

#name {
  -webkit-margin-end: 12px;  /* Only really affects #tag. */
}

#resume,
.is-active :-webkit-any(#name, #file-link, #pause, #show) {
  color: rgb(51, 103, 214);
}

#tag {
  color: #5a5a5a;
  font-weight: 500;
}

#url {
  color: inherit;
  margin-top: 6px;
  min-height: 0;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-active #url {
  color: #969696;
}

#progress,
#description:not(:empty),
.controls {
  margin-top: 16px;
}

.is-active #description {
  color: #616161;
}

.dangerous #description {
  color: rgb(239, 108, 0);
}

#progress {
  --paper-progress-active-color: rgb(54, 126, 237);
  --paper-progress-container-color: rgb(223, 222, 223);
  width: auto;
}

.controls {
  -webkit-margin-start: -.57em;
}

#cancel,
#retry,
.keep,
.discard {
  color: #5a5a5a;
}

#show {
  margin: .7em .57em;
}

#controlled-by {
  -webkit-margin-start: 8px;
}

#controlled-by,
#controlled-by a {
  color: #5a5a5a;
}

.is-active #controlled-by {
  color: #333;
}

.is-active #controlled-by a {
  color: rgb(51, 103, 214);
}

#remove-wrapper {
  align-self: flex-start;
  margin: 0;
}

#remove {
  color: #969696;
  font-size: 16px;
  height: 32px;
  line-height: 17px;  /* TODO(dbeam): why is this necesssary? */
  width: 32px;
}

#incognito {
  bottom: 20px;
  content: -webkit-image-set(
      url(chrome://downloads/1x/incognito_marker.png) 1x,
      url(chrome://downloads/2x/incognito_marker.png) 2x);
  position: absolute;
  right: 10px;
}