1 /* Copyright (c) 2013 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 file contains styles specific to Android and iOS. */ 6 7 body { 8 color: rgb(76, 76, 76); 9 margin: 0; 10 margin-bottom: 46px; 11 } 12 13 h1 { 14 font-weight: bold; 15 margin-bottom: 12px; 16 } 17 18 #top-container, 19 #results-display { 20 margin: 0; 21 } 22 23 #top-container, 24 #results-display, 25 #results-pagination { 26 max-width: none; 27 } 28 29 h1, 30 h3, 31 #notification-bar, 32 #search-field, 33 .entry-box, 34 #loading-spinner { 35 padding-left: 16px; 36 padding-right: 16px; 37 } 38 39 h3 { 40 background: rgb(245, 245, 245); 41 color: rgb(138, 138, 138); 42 font-size: 14px; 43 height: 30px; 44 line-height: 30px; 45 margin-top: 0; 46 overflow: hidden; 47 text-overflow: ellipsis; 48 white-space: nowrap; 49 } 50 51 #search-field { 52 -webkit-padding-start: 64px; 53 background-image: 54 url('../../../../ui/webui/resources/images/2x/search.png'); 55 background-position: 16px center; 56 background-repeat: no-repeat; 57 background-size: 32px; 58 border: 0; 59 display: block; 60 line-height: 1.5; 61 margin-top: 16px; 62 width: 100%; 63 } 64 65 html[dir='rtl'] #search-field { 66 background-position: right 16px center; 67 } 68 69 .no-results-message { 70 margin-bottom: 1em; 71 padding-left: 16px; 72 padding-right: 16px; 73 } 74 75 .search-results .no-results-message { 76 margin-top: 1em; 77 } 78 79 #notification-bar.alone { 80 float: none; 81 font-size: 75%; 82 margin: 0; 83 padding-bottom: 0; 84 padding-top: 0; 85 } 86 87 #remove-selected, 88 #search-button, 89 .gap, 90 .snippet { 91 display: none; 92 } 93 94 .entry-box { 95 -webkit-padding-end: 0; 96 } 97 98 button.remove-entry { 99 background: url('../../../../ui/webui/resources/images/2x/x-thin.png') 100 no-repeat center center; 101 background-size: 13px; 102 border: 0; 103 box-sizing: border-box; 104 height: 100%; 105 min-width: 45px; 106 opacity: 0.7; 107 padding: 0 16px; 108 vertical-align: top; 109 width: 45px; 110 } 111 112 button.remove-entry:active { 113 opacity: 1.0; 114 } 115 116 .entry-box { 117 margin-bottom: 0; 118 margin-top: 0; 119 padding-bottom: 0; 120 } 121 122 h3, 123 .entry, 124 #search-field { 125 border-bottom: 1px solid rgb(220, 220, 220); 126 border-top: 1px solid rgb(220, 220, 220); 127 margin-bottom: -1px; 128 overflow: hidden; 129 } 130 131 .entry-box, 132 #search-field, 133 #results-pagination button { 134 height: 60px; 135 } 136 137 .entry-box-container { 138 display: block; 139 } 140 141 input { 142 border-radius: 0; 143 } 144 145 #clear-browsing-data { 146 /* Style it like a native Android button. */ 147 background-color: rgb(221, 221, 221); 148 border: 0; 149 border-radius: 0; 150 border-top: 1px solid rgb(198, 198, 198); 151 bottom: 0; 152 box-shadow: none; 153 font-size: 75%; 154 font-weight: bold; 155 height: 46px; 156 margin: 0; 157 position: fixed; 158 text-shadow: none; 159 text-transform: uppercase; 160 width: 100%; 161 } 162 163 .day-results, 164 .search-results { 165 margin: 0; 166 } 167 168 <if expr="pp_ifdef('ios')"> 169 /* Add extra spacing caused by the missing search bar on iOS. */ 170 h3:first-of-type { 171 margin-top: 16px; 172 } 173 </if> 174 175 /* Fade out the entry-box, rather than its parent node, so that the dividing 176 line between entries doesn't fade out. */ 177 .entry.fade-out .entry-box { 178 -webkit-transition: opacity 200ms; 179 opacity: 1; 180 } 181 182 .entry.fade-out { 183 opacity: 1; 184 } 185 186 .entry.fade-out .entry-box { 187 opacity: 0; 188 } 189 190 .entry input[type=checkbox] { 191 display: none; 192 } 193 194 .entry .visit-entry { 195 -webkit-flex: auto; 196 -webkit-flex-flow: column; 197 -webkit-padding-start: 48px; 198 background-size: 32px; 199 line-height: 1.3; 200 } 201 202 .entry .domain { 203 -webkit-padding-start: 0; 204 font-size: 14px; 205 } 206 207 #older-button { 208 -webkit-padding-end: 16px; 209 } 210 211 #newest-button { 212 -webkit-padding-start: 16px; 213 } 214 215 #loading-spinner { 216 margin-top: 16px; 217 } 218 219 <if expr="pp_ifdef('ios')"> 220 /* iOS does not support the latest flexbox syntax, only the 2009 working draft 221 syntax (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/). */ 222 .entry-box, 223 .site-domain-wrapper { 224 -wekbit-box-align: center; 225 display: -webkit-box; 226 } 227 228 .entry .visit-entry { 229 -webkit-box-flex: 1; 230 -webkit-box-orient: vertical; 231 -webkit-box-pack: center; 232 display: -webkit-box; 233 } 234 </if> 235 236 .entry .bookmark-section { 237 display: none; 238 } 239 240 .entry .time { 241 line-height: 60px; 242 min-width: 90px; 243 text-align: inherit; 244 width: 90px; 245 } 246 247 @media only screen and (max-width:600px) { 248 249 /* Omit the time on very small screens. */ 250 .entry .time { 251 display: none; 252 } 253 254 } /* @media only screen and (max-width:600px) */ 255 256 @media only screen and (min-width:720px) { 257 258 body { 259 margin-bottom: 76px; 260 } 261 262 h3, 263 .entry, 264 #search-field { 265 border: 1px solid rgb(220, 220, 220); 266 } 267 268 h3 { 269 margin-top: 30px; 270 } 271 272 .page { 273 margin: 0 auto; 274 max-width: 718px; 275 } 276 277 h1, 278 #notification-bar, 279 #loading-spinner, 280 .no-results-message { 281 padding-left: 0; 282 padding-right: 0; 283 } 284 285 } /* @media only screen and (max-width:720px) */ 286