blob: ae99c8878d6e832e82513b84b43d4565fe438c3f [file] [log] [blame]
<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}" $i18n{dark}>
<head>
<meta charset="utf8">
<title>$i18n{title}</title>
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<style>
html {
/* Remove 300ms delay for 'click' event, when using touch interface. */
touch-action: manipulation;
}
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background: var(--md-background-color);
cursor: default;
}
/* Minimal styling required to display app shim. TODO(dbeam): do we really
* need all this HTML/CSS just to show "History"? Other pages just show 56px
* of [blue] border on top without text and this seems fine (maybe even
* desired when the hamburger menu shifts the text on narrow screens. */
.loading history-app {
visibility: hidden;
}
#app-shim {
display: none;
}
.loading #app-shim {
bottom: 0;
display: flex;
flex-direction: column;
font-size: 123%;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#app-shim span {
display: flex;
}
#loading-toolbar {
align-items: center;
background: var(--md-toolbar-color);
color: #fff;
height: 56px;
letter-spacing: .25px;
padding-inline-start: 24px;
}
html[dark] #loading-toolbar {
color: rgb(232, 234, 237); /* --google-grey-200 */
}
#loading-message {
align-items: center;
color: var(--md-loading-message-color);
flex: 1;
font-weight: 500;
justify-content: center;
}
</style>
</head>
<body class="loading">
<history-app id="history-app"></history-app>
<div id="app-shim">
<span id="loading-toolbar">$i18n{title}</span>
<span id="loading-message">$i18n{loading}</span>
</div>
<command id="delete-command" shortcut="Delete Backspace">
<if expr="is_macosx">
<command id="select-all-command" shortcut="Meta|a">
</if>
<if expr="not is_macosx">
<command id="select-all-command" shortcut="Ctrl|a">
</if>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="constants.html">
<script src="history.js"></script>
<link rel="import" href="chrome://resources/html/dark_mode.html">
<link rel="import" href="app.html" async id="bundle">
</body>
</html>