/* 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 */