| /* Copyright (c) 2013 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. */ |
| |
| /* This file contains styles specific to Android and iOS. */ |
| |
| html { |
| height: 100%; |
| } |
| |
| body { |
| color: rgb(76, 76, 76); |
| height: 100%; |
| margin: 0; |
| } |
| |
| .page { |
| -webkit-flex-flow: column; |
| display: -webkit-flex; |
| height: 100%; |
| } |
| |
| #scrolling-container { |
| -webkit-flex: auto; /* Container should take up extra vertical space. */ |
| -webkit-overflow-scrolling: touch; |
| overflow-y: auto; |
| } |
| |
| h1 { |
| font-weight: bold; |
| margin-bottom: 12px; |
| } |
| |
| #top-container, |
| #results-display { |
| margin: 0; |
| } |
| |
| #top-container, |
| #results-display, |
| #results-pagination { |
| max-width: none; |
| } |
| |
| h1, |
| h3, |
| #notification-bar, |
| #search-field, |
| .entry-box, |
| #loading-spinner { |
| padding-left: 16px; |
| padding-right: 16px; |
| } |
| |
| h3 { |
| background: rgb(245, 245, 245); |
| color: rgb(138, 138, 138); |
| font-size: 14px; |
| height: 30px; |
| line-height: 30px; |
| margin-top: 0; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| #search-field { |
| -webkit-padding-start: 64px; |
| background-image: |
| url('../../../../ui/webui/resources/images/2x/search.png'); |
| background-position: 16px center; |
| background-repeat: no-repeat; |
| background-size: 32px; |
| border: 0; |
| display: block; |
| line-height: 1.5; |
| margin-top: 16px; |
| width: 100%; |
| } |
| |
| html[dir='rtl'] #search-field { |
| background-position: right 16px center; |
| } |
| |
| .no-results-message { |
| margin-bottom: 1em; |
| padding-left: 16px; |
| padding-right: 16px; |
| } |
| |
| .search-results .no-results-message { |
| margin-top: 1em; |
| } |
| |
| #notification-bar.alone { |
| float: none; |
| font-size: 75%; |
| margin: 0; |
| padding-bottom: 0; |
| padding-top: 0; |
| } |
| |
| #remove-selected, |
| #search-button, |
| .gap { |
| display: none; |
| } |
| |
| .entry-box { |
| -webkit-padding-end: 0; |
| } |
| |
| button.remove-entry { |
| background: url('../../../../ui/webui/resources/images/2x/x-thin.png') |
| no-repeat center center; |
| background-size: 13px; |
| border: 0; |
| box-sizing: border-box; |
| height: 100%; |
| min-width: 45px; |
| opacity: 0.7; |
| padding: 0 16px; |
| vertical-align: top; |
| width: 45px; |
| } |
| |
| button.remove-entry:active { |
| opacity: 1.0; |
| } |
| |
| .entry-box { |
| margin-bottom: 0; |
| margin-top: 0; |
| padding-bottom: 0; |
| } |
| |
| h3, |
| .entry, |
| #search-field { |
| border-bottom: 1px solid rgb(220, 220, 220); |
| border-top: 1px solid rgb(220, 220, 220); |
| margin-bottom: -1px; |
| overflow: hidden; |
| } |
| |
| .entry-box, |
| #search-field, |
| #results-pagination button { |
| height: 60px; |
| } |
| |
| .entry-box-container { |
| display: block; |
| } |
| |
| input { |
| border-radius: 0; |
| } |
| |
| #clear-browsing-data { |
| /* Style it like a native Android button. */ |
| background-color: rgb(221, 221, 221); |
| border: 0; |
| border-radius: 0; |
| border-top: 1px solid rgb(198, 198, 198); |
| box-shadow: none; |
| font-size: 75%; |
| font-weight: bold; |
| height: 46px; |
| margin: 0; |
| min-height: 46px; |
| text-shadow: none; |
| text-transform: uppercase; |
| width: 100%; |
| } |
| |
| .day-results, |
| .search-results { |
| margin: 0; |
| } |
| |
| /* Fade out the entry-box, rather than its parent node, so that the dividing |
| line between entries doesn't fade out. */ |
| .entry.fade-out .entry-box { |
| -webkit-transition: opacity 200ms; |
| opacity: 1; |
| } |
| |
| .entry.fade-out { |
| opacity: 1; |
| } |
| |
| .entry.fade-out .entry-box { |
| opacity: 0; |
| } |
| |
| .entry input[type=checkbox] { |
| display: none; |
| } |
| |
| .entry .visit-entry { |
| -webkit-flex: auto; |
| -webkit-flex-flow: column; |
| -webkit-padding-start: 48px; |
| background-size: 32px; |
| line-height: 1.3; |
| } |
| |
| .entry .domain { |
| -webkit-padding-start: 0; |
| font-size: 14px; |
| } |
| |
| #older-button { |
| -webkit-padding-end: 16px; |
| } |
| |
| #newest-button { |
| -webkit-padding-start: 16px; |
| } |
| |
| #loading-spinner { |
| margin-top: 16px; |
| } |
| |
| <if expr="is_ios"> |
| /* iOS does not support the latest flexbox syntax, only the 2009 working draft |
| syntax (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/). */ |
| .entry-box, |
| .site-domain-wrapper { |
| -wekbit-box-align: center; |
| display: -webkit-box; |
| } |
| |
| .entry .visit-entry { |
| -webkit-box-flex: 1; |
| -webkit-box-orient: vertical; |
| -webkit-box-pack: center; |
| display: -webkit-box; |
| } |
| |
| #scrolling-container { |
| bottom: 46px; |
| left: 0; |
| position: fixed; |
| right: 0; |
| top: 0; |
| } |
| |
| #clear-browsing-data { |
| bottom: 0; |
| position: fixed; |
| } |
| </if> |
| |
| .entry .bookmark-section { |
| display: none; |
| } |
| |
| .entry .time { |
| line-height: 60px; |
| min-width: 90px; |
| text-align: inherit; |
| width: 90px; |
| } |
| |
| @media only screen and (max-width:600px) { |
| |
| /* Omit the time on very small screens. */ |
| .entry .time { |
| display: none; |
| } |
| |
| } /* @media only screen and (max-width:600px) */ |
| |
| @media only screen and (min-width:720px) { |
| |
| h3, |
| .entry, |
| #search-field { |
| border: 1px solid rgb(220, 220, 220); |
| } |
| |
| h3 { |
| margin-top: 30px; |
| } |
| |
| #scrolling-container { |
| padding-bottom: 30px; |
| } |
| |
| #scrolling-container > * { |
| margin-left: auto; |
| margin-right: auto; |
| max-width: 718px; |
| } |
| |
| h1, |
| #notification-bar, |
| #loading-spinner, |
| .no-results-message { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| |
| } /* @media only screen and (max-width:720px) */ |
| |
| <if expr="is_ios"> |
| .ios-keyboard-visible #clear-browsing-data { |
| display: none; |
| } |
| |
| .ios-keyboard-visible #scrolling-container { |
| /* Should be 0, but that breaks scrolling -- see crbug.com/292715. */ |
| bottom: -1px; |
| } |
| </if> /* is_ios */ |