chrome/browser/resources/md_downloads/toolbar.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   align-items: center;
   7   background: rgb(63, 85, 102);
   8   color: white;
   9   content-sizing: padding-box;
  10   display: flex;
  11   height: 56px;
  12 }
  13
  14 #title,
  15 #search {
  16   flex: 1 0 var(--downloads-side-column-basis);
  17 }
  18
  19 #title h1 {
  20   -webkit-margin-end: 0;
  21   -webkit-margin-start: 24px;
  22   font-size: 107.7%;
  23   font-weight: normal;
  24   margin-bottom: 0;
  25   margin-top: 0;
  26 }
  27
  28 #actions {
  29   display: flex;
  30   flex: none;
  31   width: var(--downloads-item-width);
  32 }
  33
  34 :host(:not([downloads-showing])) #actions {
  35   justify-content: center;
  36 }
  37
  38 #actions paper-button {
  39   -webkit-margin-end: 8px;
  40 }
  41
  42 #actions,
  43 #search-term {
  44   color: rgb(192, 199, 205);
  45 }
  46
  47 #search {
  48   -webkit-padding-end: 10px;
  49   box-sizing: border-box;
  50   display: flex;
  51   justify-content: flex-end;
  52 }
  53
  54 #search paper-input-container {
  55   margin-top: 2px;
  56   max-width: 200px;
  57   padding: 2px 0;
  58   width: 100%;
  59 }
  60
  61 #search-term {
  62   --paper-input-container-color: rgb(192, 199, 205);
  63   --paper-input-container-focus-color: rgb(192, 199, 205);
  64   --paper-input-container-input: {
  65     color: inherit;
  66     font-family: inherit;
  67     font-size: inherit;
  68   };
  69   --paper-input-container-input-color: rgb(192, 199, 205);
  70   z-index: 0;
  71 }
  72
  73 #search-term input[type='search']::-webkit-search-decoration,
  74 #search-term input[type='search']::-webkit-search-cancel-button,
  75 #search-term input[type='search']::-webkit-search-results-button {
  76   -webkit-appearance: none;
  77 }
  78
  79 paper-icon-button {
  80   --iron-icon-height: 20px;
  81   --iron-icon-width: 20px;
  82   --paper-icon-button: {
  83     height: 20px;
  84     padding: 6px;
  85     width: 20px;
  86   };
  87 }
  88
  89 #search-term paper-icon-button {
  90   --iron-icon-height: 16px;
  91   --iron-icon-width: 16px;
  92   --paper-icon-button: {
  93     -webkit-margin-end: -8px;
  94     height: 16px;
  95     padding: 8px;
  96     width: 16px;
  97   };
  98   position: absolute;
  99   right: 0;
 100   top: -4px;
 101   z-index: 1;
 102 }
 103
 104 :host-context([dir='rtl']) #search-term paper-icon-button {
 105   left: 0;
 106   right: auto;
 107 }
 108
 109 #more {
 110   --paper-menu-button: {
 111     padding: 0;
 112   };
 113   -webkit-margin-start: 16px;
 114 }
 115
 116 paper-item {
 117   -webkit-user-select: none;
 118   cursor: pointer;
 119   font: inherit;
 120 }
 121
 122 paper-item:hover {
 123   background: #eaeaea;  /* TODO(dbeam): real color? */
 124 }
 125
 126 @media not all and (max-width: 1024px) {
 127   /* Hide vertical dot menu when there's enough room for #actions. */
 128   paper-menu-button {
 129     display: none;
 130   }
 131 }
 132
 133 @media all and (max-width: 1024px) {
 134   /* Hide #actions for narrow windows; they're shown in a vertical dot menu. */
 135   #actions {
 136     display: none;
 137   }
 138 }