blob: 41268f502241cdeb0bd06570911856735a5c9a4f [file] [log] [blame]
/* 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. */
body {
color: rgb(76, 76, 76);
margin: 0;
margin-bottom: 46px;
}
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;
}
/* Hide the search field if it is empty (!valid) and there are no results. */
body:not(.has-results) #search-field:not(:valid) {
display: none;
}
.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,
.snippet {
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);
bottom: 0;
box-shadow: none;
font-size: 75%;
font-weight: bold;
height: 46px;
margin: 0;
position: fixed;
text-shadow: none;
text-transform: uppercase;
width: 100%;
}
.day-results,
.search-results {
margin: 0;
}
<if expr="pp_ifdef('ios')">
/* Add extra spacing caused by the missing search bar on iOS. */
h3:first-of-type {
margin-top: 16px;
}
</if>
/* 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="pp_ifdef('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;
}
</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) {
body {
margin-bottom: 76px;
}
h3,
.entry,
#search-field {
border: 1px solid rgb(220, 220, 220);
}
h3 {
margin-top: 30px;
}
.page {
margin: 0 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) */