chrome/browser/resources/search_header.css

   1 /* Copyright 2014 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 /* This is a common file for pages that have a title and search box as their
   6  * header. This visually looks like:
   7  * _____________________________________________________________________________
   8  * |                                                                           |
   9  * |  I Am So Great!                                  [ Search greatness... ]  |
  10  * |___________________________________________________________________________|
  11  * | Summary (90235 things currently great)                      _Great links_ |
  12  *
  13  * The title expands to fill any space it needs and the search bar is locked to
  14  * the end of the header (e.g., right in LTR, left in RTL).
  15  */
  16
  17 header,
  18 .summary {
  19   min-width: 400px;
  20 }
  21
  22 header {
  23   align-items: center;
  24   display: flex;
  25   padding: 0 12px;
  26 }
  27
  28 header h1 {
  29   flex: 1;
  30   /* TODO(dbeam): reconcile font/line-height/margin with chrome_shared.css */
  31   font-size: 1.5em;
  32   font-weight: normal;
  33   line-height: 1;
  34   margin: 15px 0;
  35 }
  36
  37 header > :-webkit-any(form, input[type='search']) {
  38   flex: none;
  39 }
  40
  41 .summary {
  42   background-color: rgb(235, 239, 249);
  43   border-top: 1px solid rgb(156, 194, 239);
  44   display: flex;
  45   padding: 5px 10px;
  46   white-space: nowrap;
  47 }
  48
  49 .summary > * {
  50   flex: none;
  51 }
  52
  53 .summary > :first-child {
  54   flex: 1;
  55   overflow: hidden;
  56   text-overflow: ellipsis;
  57   white-space: nowrap;
  58 }