mirror of
https://github.com/mjl-/mox.git
synced 2024-12-27 08:53:48 +03:00
3a58b2a1f4
the attachment buttons for images get some opacity for the text view, to indicate you don't have to open them explicitly.
88 lines
5.1 KiB
HTML
88 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mox Webmail</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
|
|
<link rel="icon" href="noNeedlessFaviconRequestsPlease:" />
|
|
<style>
|
|
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
|
|
.mono, .mono * { font-family: 'ubuntu mono', monospace; }
|
|
h1, h2 { margin-bottom: 1ex; }
|
|
h1 { font-size: 1.1rem; }
|
|
table td, table th { padding: .15em .25em; }
|
|
[title] { text-decoration: underline; text-decoration-style: dotted; }
|
|
.silenttitle { text-decoration: none; }
|
|
fieldset { border: 0; }
|
|
.loading { opacity: 0.1; animation: fadeout 1s ease-out; }
|
|
@keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } }
|
|
@keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
|
|
.button { display: inline-block; }
|
|
button, .button, select { border-radius: .15em; background-color: #eee; border: 1px solid #888; padding: 0 .15em; color: inherit; /* for ipad, which shows blue or white text */ }
|
|
button.active, .button.active, button.active:hover, .button.active:hover { background-color: gold; }
|
|
button:hover, .button:hover, select:hover { background-color: #ddd; }
|
|
button.keyword:hover { background-color: #ffbd21; }
|
|
button.keyword { cursor: pointer; }
|
|
.btngroup button, .btngroup .button { border-radius: 0; border-right-width: 0; }
|
|
.btngroup button:first-child, .btngroup .button:first-child { border-radius: .15em 0 0 .15em; }
|
|
.btngroup button:last-child, .btngroup .button:last-child { border-radius: 0 .15em .15em 0; border-right-width: 1px; }
|
|
iframe { border: 0; }
|
|
.invert { filter: invert(100%); }
|
|
.scriptswitch { text-decoration: underline #dca053 2px; }
|
|
.textmulti > *:nth-child(even) { background-color: #f4f4f4; }
|
|
.textmulti > * { padding: 2ex .5em; margin: -.5em; /* compensate pad */ }
|
|
.textmulti > *:first-child { padding: .5em; }
|
|
.pad { padding: .5em; }
|
|
|
|
.msgitem { display: flex; user-select: none; }
|
|
.msgitemcell { padding: 2px 4px; }
|
|
/* note: we assign widths to .msgitemflags, .msgitemfrom, .msgitemsubject, .msgitemage, and offsets through a stylesheet created in js */
|
|
.msgitemage { text-align: right; }
|
|
.msgitemfrom { position: relative; }
|
|
.msgitemfromtext { white-space: nowrap; overflow: hidden; }
|
|
.msgitemfromthreadbar { position: absolute; border-right: 2px solid #666; right: 0; top: 0; bottom: 0; /* top or bottom set with inline style for first & last */ }
|
|
.msgitemsubjecttext { white-space: nowrap; overflow: hidden; }
|
|
.msgitemsubjectsnippet { font-weight: normal; color: #666; }
|
|
.msgitemmailbox { background: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
|
.msgitemmailbox.msgitemmailboxcollapsed { background: #eee; color: #333; }
|
|
.msgitemidentity { background-color: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
|
|
|
.topbar, .mailboxesbar { background-color: #fdfdf1; }
|
|
.msglist { background-color: #f5ffff; }
|
|
table.search td { padding: .25em; }
|
|
.keyword { background-color: gold; color: black; border: 1px solid #8c7600; padding: 0 .15em; border-radius: .15em; font-weight: normal; font-size: .9em; margin: 0 .15em; white-space: nowrap; }
|
|
.keyword.keywordcollapsed { background-color: #ffeb7e; color: #333; }
|
|
.mailbox { padding: .15em .25em; }
|
|
.mailboxitem { cursor: pointer; border-radius: .15em; user-select: none; }
|
|
.mailboxitem.dropping { background: gold !important; }
|
|
.mailboxitem:hover { background: #eee; }
|
|
.mailboxitem.active { background: linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%); }
|
|
.mailboxhoveronly { visibility: hidden; }
|
|
.mailboxitem:hover .mailboxhoveronly, .mailboxitem:focus .mailboxhoveronly { visibility: visible; }
|
|
.mailboxcollapse { visibility: hidden; }
|
|
.mailboxitem:hover .mailboxcollapse, .mailboxitem:focus .mailboxcollapse { visibility: visible; }
|
|
.msgitem { cursor: pointer; border-radius: .15em; border: 1px solid transparent; }
|
|
.msgitem.focus { border: 1px solid #2685ff; }
|
|
.msgitem:hover { background-color: #eee; }
|
|
.msgitem.active { background: linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%); }
|
|
.msgitemsubject { position: relative; }
|
|
.msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; }
|
|
.msgitemflag.msgitemflagcollapsed { color: #666; }
|
|
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
|
|
.quoted1 { color: #03828f; }
|
|
.quoted2 { color: #c7445c; }
|
|
.quoted3 { color: #417c10; }
|
|
.autosize { display: inline-grid; max-width: 90vw; }
|
|
.autosize.input { grid-area: 1 / 2; }
|
|
.autosize::after { content: attr(data-value); margin-right: 1em; line-height: 0; visibility: hidden; white-space: pre-wrap; overflow-x: hidden; }
|
|
|
|
.scrollparent { position: relative; }
|
|
.yscroll { overflow-y: scroll; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
|
.yscrollauto { overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="page"><div style="padding: 1em; text-align: center">Loading...</div></div>
|
|
<script>/* placeholder */</script>
|
|
</body>
|
|
</html>
|