infrastructure/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-07-15 11:34:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

webmail: change many inline styles to using css classes, and add dark mode

Browse Source 
this started with looking into the dark mode of PR #163 by mattfbacon. it's a
very good solution, especially for the amount of code. while looking into dark
mode, some common problems with inverting colors are:
- box-shadow start "glowing" which isn't great. likewise, semitransparent
  layers would become brighter, not darker.
- while popups/overlays in light mode just stay the same white, in dark mode
  they should become lighter than the regular content because box shadows don't
  give enough contrast in dark mode.

while looking at adding explicit styles for dark mode, it turns out that's
easier when we work more with css rules/classes instead of inline styles (so we
can use the @media rule).

so we now also create css rules instead of working with inline styles a lot.
benefits:
- creating css rules is useful for items that repeat. they'll have a single css
  class. changing a style on a css class is now reflected in all elements of that
  kind (with that class)
- css class names are helpful when inspecting the DOM while developing: they
  typically describe the function of the element.

most css classes are defined near where they are used, often while making the
element using the class (the css rule is created on first use).

this changes moves colors used for styling to a single place in webmail/lib.ts.
each property can get two values: one for regular/light mode, one for dark mode.
that should prevent forgetting one of them and makes it easy to configure both.
this change sets colors for the dark mode. i think the popups look better than
in PR #163, but in other ways it may be worse. this is a start, we can tweak
the styling.

if we can reduce the number of needed colors some more, we could make them
configurable in the webmail settings in the future. so this is also a step
towards making the ui looks configurable as discussed in issue #107.
This commit is contained in:
Mechiel Lukkien
2024-05-06 09:13:50 +02:00
parent 195c57f06e
commit a16c08681b
10 changed files with 1130 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
webmail/webmail.html
View File

@ -6,79 +6,15 @@
<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; }
[title]:hover { 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>