letterbox/web/index.html

267 lines
4.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" , href="https://jenil.github.io/bulmaswatch/cyborg/bulmaswatch.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="icon" href="https://static.xinu.tv/favicon/letterbox.svg" />
<!-- Pretty checkboxes from https://justboil.github.io/bulma-checkbox/ -->
<link data-trunk rel="css" href="static/main.css" />
<!-- tall thin font for user icon -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<style>
<style>.message {
display: inline-block;
padding: 0.5em;
width: 100%;
}
.message .header table td {
border: 0;
padding: 0;
}
.message .header .media-right {
padding: 1rem;
}
.message .headers {
position: relative;
width: 100%;
}
.message .headers .read-status {
position: absolute;
right: 1em;
top: 0em;
}
.message .headers .header {
overflow: clip;
text-overflow: ellipsis;
white-space: nowrap;
}
.body {
background: white;
color: black;
margin-top: 0.5em;
padding: 1em;
width: 0;
min-width: 100%;
overflow-wrap: break-word;
}
.error {
background-color: red;
}
.view-part-text-plain {
padding: 0.5em;
overflow-wrap: break-word;
white-space: pre-line;
}
iframe {
height: 100%;
width: 100%;
}
.index {
table-layout: fixed;
width: 100%;
}
.index .edit {
width: 2em;
}
.index .unread {
font-weight: bold;
}
.index .from {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 10em;
}
.index .subject {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.index .date {
width: 10em;
white-space: nowrap;
text-align: right;
}
.lb-footer {
background-color: #eee;
color: #222;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 3em;
padding: 1em;
}
.tag {
margin-right: 2px;
}
.debug ul {
padding-left: 2em;
}
.debug li {}
.loading {
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.section {
padding: 1.5em;
}
}
input,
.input {
color: #000;
}
input::placeholder,
.input::placeholder {
color: #555;
}
.mobile .search-results {
padding: 1em;
}
.mobile .thread h3 {
overflow-wrap: break-word;
padding: 1em 1em 0;
}
.mobile .thread .tags {
padding: 0 1em;
}
.search-results .row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-bottom: 1px #444 solid;
padding-bottom: .5em;
padding-top: .5em;
width: 100%;
}
.search-results .row .checkbox {}
.search-results .row .summary {
min-width: 0;
}
.search-results .row .subject {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-results .row .from {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-results .row .tag {
height: 1.5em;
padding-left: .5em;
padding-right: .5em;
}
.float-right {
float: right;
}
/* Hide quoted emails */
/*
div[name="quote"],
blockquote[type="cite"],
.gmail_quote {
background-color: red;
display: none;
}
*/
.desktop .main-content {
display: grid;
grid-template-columns: 12rem 1fr;
}
.tags-menu {
padding: 1rem;
}
.tags-menu .menu-list a {
padding: 0.25em 0.5em;
}
.tags-menu .tag-indent {
padding-left: .5em;
}
.tags-menu .tag-tag {
margin-left: -1em;
padding-right: .25em;
}
.navbar {
border: none;
}
.desktop nav.pagination,
.tablet nav.pagination {
margin-left: .5em;
margin-bottom: 0 !important;
}
.content-tree {
white-space: pre-line;
}
</style>
</head>
<body>
<section id="app"></section>
</body>
</html>