mirror of
https://github.com/mjl-/mox.git
synced 2024-12-27 08:53:48 +03:00
4ab3e6bc9b
so full name/email address is visible. using a hidden grid element that gets the same content as the input element. from https://css-tricks.com/auto-growing-inputs-textareas/ a recent commit probably also make the compose window full-screen-width on chrome, this restores to the intended behaviour of a less wide default size. if you add multiple address fields, the compose window will still grow. not great, in the future, we should make the compose window resizable by dragging.
84 lines
4.9 KiB
HTML
84 lines
4.9 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 fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
|
|
.button { display: inline-block; }
|
|
button, .button { 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 { 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; }
|
|
.pad { padding: .5em; }
|
|
.invert { filter: invert(100%); }
|
|
.scriptswitch { text-decoration: underline #dca053 2px; }
|
|
|
|
.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">Loading...</div></div>
|
|
<script>/* placeholder */</script>
|
|
</body>
|
|
</html>
|