third_party/WebKit/Source/devtools/front_end/ui/searchableView.css

   1 /*
   2  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
   3  * Use of this source code is governed by a BSD-style license that can be
   4  * found in the LICENSE file.
   5  */
   6
   7 .search-bar {
   8     flex: 0 0 23px;
   9     background-color: #eee;
  10     border-top: 1px solid #ccc;
  11     display: flex;
  12     overflow: hidden;
  13 }
  14
  15 .search-bar.replaceable {
  16     flex: 0 0 44px;
  17 }
  18
  19 .search-replace {
  20     -webkit-appearance: none;
  21     border: 0;
  22     padding: 0 3px;
  23     margin: 0;
  24     flex: 1;
  25 }
  26
  27 .search-replace:focus {
  28     outline: none;
  29 }
  30
  31 .toolbar-search {
  32     border-spacing: 1px;
  33 }
  34
  35 .toolbar-search td {
  36     padding: 0 5px 0 0;
  37 }
  38
  39 .toolbar-search td > span {
  40     display: flex;
  41     align-items: baseline;
  42     line-height: 17px;
  43 }
  44
  45 .toolbar-search-navigation-controls {
  46     align-self: stretch;
  47     background-image: linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
  48 }
  49
  50 .toolbar-search-navigation {
  51     display: inline-block;
  52     width: 18px;
  53     height: 18px;
  54     background-repeat: no-repeat;
  55     background-position: 4px 7px;
  56     border-left: 1px solid rgb(170, 170, 170);
  57     opacity: 0.3;
  58 }
  59
  60 .toolbar-search-navigation.enabled {
  61     opacity: 1.0;
  62 }
  63
  64 .toolbar-search button.search-action-button {
  65     border: 1px solid rgb(163, 163, 163);
  66     border-radius: 8px;
  67     margin: 0;
  68     background-image: linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
  69     width: 100%;
  70     height: 20px;
  71 }
  72
  73 .toolbar-search button.search-action-button:active {
  74     background-image: linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
  75 }
  76
  77 .toolbar-search-control {
  78     display: -webkit-flex;
  79     position: relative;
  80     background-color: white;
  81 }
  82
  83 .toolbar-replace-control,
  84 #search-input-field {
  85     padding-top: 1px;
  86     line-height: 17px;
  87 }
  88
  89 .toolbar-search-control, .toolbar-replace-control {
  90     border: 1px solid rgb(163, 163, 163);
  91     height: 20px;
  92     border-radius: 2px;
  93     width: 253px;
  94     margin-left: 1px;
  95 }
  96
  97 .toolbar-search-navigation.enabled:active {
  98     background-position: 4px 7px, 0 0;
  99 }
 100
 101 .toolbar-search-navigation.toolbar-search-navigation-prev {
 102     background-image: url(Images/searchPrev.png);
 103     border-left: 1px solid rgb(163, 163, 163);
 104 }
 105
 106 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
 107     background-image: url(Images/searchPrev.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 108 }
 109
 110 .toolbar-search-navigation.toolbar-search-navigation-next {
 111     background-image: url(Images/searchNext.png);
 112     border-left: 1px solid rgb(230, 230, 230);
 113 }
 114
 115 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
 116     background-image: url(Images/searchNext.png), linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
 117 }
 118
 119 .search-results-matches {
 120     display: inline-block;
 121     text-align: right;
 122     font-size: 11px;
 123     padding: 0 4px;
 124     color: rgb(165, 165, 165);
 125 }