Menu
Public repository / 3af23b0e937520000e1aa43c7e2eb9de2675abd1
AkurAI-Mail / app/webmail/webmail.css
Latest change 3af23b0e937520000e1aa43c7e2eb9de2675abd1 - OLI-248: webmail list and reader as framework islands on a signals store by Ólafur Búi Ólafsson
/* AkurAI Mail — webmail styles. Extracted from the Svelte components (wave 3/4 of docs/framework-migration.md); plain CSS, no scoping. */
/* ── webmail page ── */
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
margin: 0;
}
body {
background: var(--app-bg);
color: var(--ink);
font-family:
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
html {
--app-bg: #edf2ef;
--surface: #fff;
--surface-soft: #f6f9f7;
--surface-selected: #e5f2ec;
--ink: #17231f;
--muted: #60716b;
--line: #d7e2dd;
--line-soft: #e9efec;
--accent: #126b5a;
--accent-hover: #0e594b;
--accent-soft: #dcefe7;
--rail: #10211d;
--rail-hover: #1d3831;
--rail-text: #e6f0ec;
--danger: #a33b2e;
--focus: #9ad5c5;
}
html[data-theme="dark"],
html[data-theme="akurai"] {
--app-bg: #0d1512;
--surface: #14221e;
--surface-soft: #10201b;
--surface-selected: #203a32;
--ink: #e7f1ec;
--muted: #a1b3ac;
--line: #2a4038;
--line-soft: #1d3029;
--accent: #79c4ab;
--accent-hover: #a4dcc9;
--accent-soft: #244f42;
--rail: #091512;
--rail-hover: #173028;
--rail-text: #e6f0ec;
--danger: #ef9e93;
--focus: #a4dcc9;
}
.spin {
animation: 0.8s linear infinite spin;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.vip-icon {
color: #d6a62c;
}
button,
input,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
opacity: 0.52;
}
button:focus-visible,
input:focus,
textarea:focus {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
input,
textarea {
border: 1px solid var(--line);
background: var(--surface);
width: 100%;
min-width: 0;
color: var(--ink);
border-radius: 6px;
padding: 10px 12px;
}
input::placeholder,
textarea::placeholder {
color: var(--muted);
opacity: 0.82;
}
textarea {
resize: vertical;
}
.sr {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden;
}
.webmail-shell {
grid-template-columns: 232px minmax(0, 1fr);
min-height: 100dvh;
display: grid;
}
.platform-rail {
background: var(--rail);
color: var(--rail-text);
flex-direction: column;
gap: 22px;
min-width: 0;
padding: 20px 16px;
display: flex;
}
.brand {
color: inherit;
align-items: center;
gap: 11px;
min-width: 0;
padding: 4px;
text-decoration: none;
display: flex;
}
.mark {
color: #112019;
background: #c7ef61;
border-radius: 6px;
flex: none;
place-items: center;
block-size: 38px;
inline-size: 38px;
font-weight: 900;
display: grid;
}
.brand strong,
.brand small {
text-overflow: ellipsis;
white-space: nowrap;
display: block;
overflow: hidden;
}
.brand strong {
letter-spacing: -0.01em;
font-size: 14px;
}
.brand small {
color: #99ada5;
margin-top: 2px;
font-size: 11px;
}
nav {
gap: 4px;
display: grid;
}
nav a,
.sign-out {
color: #cfddd7;
border-radius: 6px;
align-items: center;
gap: 10px;
min-block-size: 42px;
padding: 0 11px;
font-size: 14px;
text-decoration: none;
display: flex;
}
nav a:hover,
nav a.active,
.sign-out:hover {
background: var(--rail-hover);
color: #fff;
}
.rail-footer {
gap: 14px;
margin-top: auto;
display: grid;
}
.secure-state {
color: #9bb1a8;
align-items: center;
gap: 8px;
padding: 0 10px;
font-size: 12px;
display: flex;
}
.mail-app {
grid-template-rows: auto 76px minmax(0, 1fr);
min-width: 0;
min-height: 100dvh;
display: grid;
}
.mail-topbar {
z-index: 20;
background: var(--surface);
border-bottom: 1px solid var(--line);
grid-template-columns: minmax(170px, 245px) minmax(260px, 1fr) auto;
align-items: center;
gap: 16px;
padding: 12px 18px;
display: grid;
position: relative;
}
.identity {
gap: 2px;
min-width: 0;
display: grid;
}
.eyebrow {
color: var(--muted);
letter-spacing: 0.04em;
font-size: 11px;
font-weight: 750;
}
.identity strong {
text-overflow: ellipsis;
white-space: nowrap;
font-size: 15px;
overflow: hidden;
}
.search-control {
background: var(--surface-soft);
border: 1px solid var(--line);
min-width: 0;
min-height: 42px;
color: var(--muted);
border-radius: 6px;
align-items: center;
gap: 9px;
padding: 0 12px;
display: flex;
}
.search-control input {
background: 0 0;
border: 0;
border-radius: 0;
outline: 0;
padding: 0;
}
.clear-search {
margin-left: auto;
}
.top-actions {
align-items: center;
gap: 8px;
min-width: 0;
display: flex;
}
.menu-wrap {
position: relative;
}
.field-button {
border: 1px solid var(--line);
background: var(--surface);
min-height: 42px;
color: var(--ink);
text-align: left;
border-radius: 6px;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 0 11px;
display: flex;
}
.popup-menu {
z-index: 70;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 6px;
gap: 2px;
min-width: 100%;
max-width: min(360px, 100vw - 32px);
padding: 6px;
display: grid;
position: absolute;
top: calc(100% + 7px);
left: 0;
box-shadow: 0 18px 48px #0c1f182e;
}
.popup-menu button {
color: var(--ink);
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
background: 0 0;
border: 0;
border-radius: 6px;
padding: 9px 10px;
overflow: hidden;
}
.popup-menu button:hover {
background: var(--surface-selected);
color: var(--accent);
}
.icon-button {
border: 1px solid var(--line);
background: var(--surface);
block-size: 40px;
inline-size: 40px;
color: var(--ink);
border-radius: 6px;
flex: none;
place-items: center;
display: inline-grid;
}
.icon-button:hover {
background: var(--surface-selected);
color: var(--accent);
}
.primary-action,
.secondary-action,
.danger-action {
border: 0;
border-radius: 6px;
justify-content: center;
align-items: center;
gap: 8px;
min-block-size: 42px;
padding: 0 14px;
font-weight: 750;
display: inline-flex;
}
.primary-action {
background: var(--accent);
color: #fff;
}
html[data-theme="dark"] .primary-action,
html[data-theme="akurai"] .primary-action {
color: #082018;
}
.primary-action:hover {
background: var(--accent-hover);
}
.secondary-action {
background: var(--accent-soft);
color: var(--accent);
}
.secondary-action:hover,
.subtle-button:hover {
background: var(--surface-selected);
}
.danger-action {
background: var(--danger);
color: #fff;
}
.subtle-button {
min-height: 38px;
color: var(--muted);
background: 0 0;
border: 0;
border-radius: 6px;
padding: 0 10px;
font-weight: 700;
}
.mail-canvas {
background: var(--surface);
grid-template-columns: 205px minmax(310px, 400px) minmax(0, 1fr);
min-height: 0;
display: grid;
overflow: hidden;
}
kbd {
border: 1px solid var(--line);
font: inherit;
border-bottom-width: 2px;
border-radius: 4px;
padding: 0 3px;
}
dl {
gap: 5px;
margin: 0;
display: grid;
}
dl div {
grid-template-columns: 48px minmax(0, 1fr);
gap: 10px;
display: grid;
}
dt {
color: var(--muted);
font-size: 12px;
}
dd {
overflow-wrap: anywhere;
margin: 0;
font-size: 13px;
}
.toast {
z-index: 100;
border: 1px solid var(--line);
background: var(--surface);
max-width: min(400px, 100vw - 40px);
color: var(--ink);
border-radius: 6px;
align-items: center;
gap: 12px;
padding: 10px 10px 10px 14px;
display: flex;
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: 0 16px 45px #0c1f1833;
}
.toast span {
flex: 1;
}
.toast button {
color: var(--muted);
background: 0 0;
border: 0;
}
.overlay {
z-index: 80;
background: #07130e6b;
place-items: end center;
padding: 18px;
display: grid;
position: fixed;
inset: 0;
}
.compose-title {
background: var(--rail);
min-height: 53px;
color: var(--rail-text);
justify-content: space-between;
align-items: center;
padding: 0 12px 0 16px;
display: flex;
}
.compose-title span {
align-items: center;
gap: 8px;
font-weight: 800;
display: inline-flex;
}
.inverse {
color: #fff;
background: 0 0;
border-color: #ffffff2e;
}
.inverse:hover {
color: #fff;
background: #ffffff1a;
}
.recipient-row,
.compose-subject {
border-bottom: 1px solid var(--line-soft);
grid-template-columns: 52px minmax(0, 1fr);
align-items: center;
gap: 8px;
padding: 7px 14px;
display: grid;
}
.recipient-row > span {
color: var(--muted);
font-size: 12px;
font-weight: 750;
}
.compose-subject input {
border: 0;
border-radius: 0;
padding: 6px 0;
}
.compose-subject {
grid-template-columns: minmax(0, 1fr) auto;
}
.body-field {
min-height: 230px;
padding: 14px;
display: grid;
}
.signature-note,
.attachment-note {
color: var(--muted);
align-items: center;
gap: 6px;
margin: 0;
padding: 0 14px 8px;
font-size: 12px;
display: flex;
}
.compose-actions {
border-top: 1px solid var(--line);
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 12px;
display: flex;
}
.compose-actions > div {
align-items: center;
gap: 7px;
display: flex;
}
.file-input {
display: none;
}
.schedule-row {
align-items: center;
gap: 7px;
display: flex;
}
.schedule-row
input[type="datetime-local"] {
border-radius: 6px;
padding: 5px 8px;
font-size: 12px;
}
.settings-list button.icon-button {
justify-self: end;
}
.settings-head {
z-index: 2;
border-bottom: 1px solid var(--line);
background: var(--surface);
justify-content: space-between;
align-items: center;
min-height: 64px;
padding: 0 16px;
display: flex;
position: sticky;
top: 0;
}
.settings-head span {
align-items: center;
gap: 8px;
font-weight: 850;
display: inline-flex;
}
.setting-copy,
.muted {
color: var(--muted);
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.account-status {
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
color: var(--danger);
border-radius: 6px;
gap: 8px;
padding: 10px;
display: grid;
}
.account-status.warn {
background: color-mix(in srgb, #d6a62c 14%, var(--surface));
color: #7a5a00;
}
.account-status p {
margin: 0;
font-size: 13px;
}
.account-ok {
color: var(--muted);
margin: 0;
font-size: 12px;
}
.segmented {
background: var(--surface-soft);
border-radius: 6px;
padding: 3px;
display: flex;
}
.segmented button {
min-height: 34px;
color: var(--muted);
background: 0 0;
border: 0;
border-radius: 6px;
flex: 1;
font-weight: 750;
}
.segmented button.active {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 3px #091b141f;
}
.stack-fields {
gap: 8px;
display: grid;
}
.settings-list {
gap: 6px;
display: grid;
}
.settings-list p {
color: var(--muted);
gap: 3px;
margin: 0;
font-size: 12px;
display: grid;
}
.settings-list b {
color: var(--ink);
font-size: 13px;
}
.settings-list code {
text-overflow: ellipsis;
white-space: nowrap;
background: var(--surface-soft);
width: fit-content;
max-width: 100%;
color: var(--muted);
border-radius: 5px;
padding: 2px 5px;
overflow: hidden;
}
.settings-list span {
color: var(--accent);
font-weight: 700;
}
.check {
color: var(--ink);
align-items: center;
gap: 8px;
font-size: 13px;
display: flex;
}
.check input {
block-size: 18px;
inline-size: 18px;
}
.rule-builder {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.8fr);
gap: 7px;
display: grid;
}
.rule-builder .field-button {
width: 100%;
min-height: 40px;
}
.confirm-overlay {
z-index: 110;
place-items: center;
}
.confirm-modal {
border: 1px solid var(--line);
background: var(--surface);
width: min(390px, 100%);
color: var(--ink);
text-align: center;
border-radius: 6px;
justify-items: center;
gap: 10px;
padding: 26px;
display: grid;
box-shadow: 0 30px 80px #04100b59;
}
.danger-icon {
background: color-mix(in srgb, var(--danger) 12%, var(--surface));
block-size: 42px;
inline-size: 42px;
color: var(--danger);
border-radius: 6px;
place-items: center;
display: grid;
}
.confirm-modal h2,
.confirm-modal p {
margin: 0;
}
.confirm-modal h2 {
font-size: 18px;
}
.confirm-modal p {
color: var(--muted);
font-size: 13px;
line-height: 1.5;
}
.confirm-modal > div:last-child {
gap: 8px;
margin-top: 7px;
display: flex;
}
.shortcuts-overlay {
place-items: center;
}
.shortcuts-modal {
border: 1px solid var(--line);
background: var(--surface);
width: min(440px, 100%);
max-height: min(600px, 100dvh - 36px);
color: var(--ink);
border-radius: 6px;
gap: 4px;
padding: 0 0 16px;
display: grid;
overflow: auto;
box-shadow: 0 30px 80px #04100b59;
}
.shortcuts-head {
z-index: 1;
border-bottom: 1px solid var(--line);
background: var(--surface);
justify-content: space-between;
align-items: center;
min-height: 56px;
padding: 0 16px;
display: flex;
position: sticky;
top: 0;
}
.shortcuts-head span {
align-items: center;
gap: 8px;
font-weight: 800;
display: inline-flex;
}
.shortcuts-list {
gap: 2px;
margin: 8px 16px 0;
display: grid;
}
.shortcuts-list div {
grid-template-columns: 96px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 6px 0;
display: grid;
}
.shortcuts-list dt {
gap: 4px;
display: flex;
}
.shortcuts-list dd {
color: var(--muted);
margin: 0;
font-size: 13px;
}
.shortcuts-note {
color: var(--muted);
margin: 12px 16px 0;
font-size: 12px;
}
@media (width<=1180px) {
.webmail-shell {
grid-template-columns: 200px minmax(0, 1fr);
}
.platform-rail {
padding-inline: 13px;
}
.mail-canvas {
grid-template-columns: 180px minmax(290px, 360px) minmax(0, 1fr);
}
}
@media (width<=900px) {
.webmail-shell {
grid-template-columns: minmax(0, 1fr);
}
.platform-rail {
z-index: 60;
flex-direction: row;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 9px 13px;
position: sticky;
top: 0;
}
.brand {
padding: 0;
}
.brand small {
display: none;
}
.platform-rail nav {
margin-left: auto;
display: flex;
}
.platform-rail
nav
a {
min-height: 37px;
padding: 0 9px;
}
.rail-footer {
margin: 0;
display: block;
}
.secure-state {
display: none;
}
.sign-out {
min-height: 37px;
padding: 0 9px;
}
.mail-app {
grid-template-rows: auto auto minmax(0, 1fr);
min-height: calc(100dvh - 58px);
}
.mail-topbar {
grid-template-rows: auto auto;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
padding: 10px 13px;
}
.search-control {
grid-area: 2/1 / auto/-1;
}
.identity {
grid-column: 1;
}
.top-actions {
grid-column: 2;
}
.mail-canvas {
grid-template-columns: 160px minmax(280px, 1fr);
}
.mail-canvas.reading {
grid-template-columns: minmax(0, 1fr);
}
}
@media (width<=640px) {
.platform-rail {
gap: 8px;
}
.brand span:last-child {
display: none;
}
.platform-rail
nav
a
span,
.sign-out {
font-size: 0;
}
.platform-rail
nav
a,
.sign-out {
justify-content: center;
inline-size: 38px;
padding: 0;
}
.mail-topbar {
min-height: 112px;
}
.identity strong {
max-width: 54vw;
}
.top-actions .settings-button {
display: none;
}
.mail-canvas {
grid-template-columns: minmax(0, 1fr);
}
.overlay {
padding: 0;
}
.rule-builder {
grid-template-columns: 1fr;
}
.compose-actions {
align-items: stretch;
}
.compose-actions > div {
justify-content: space-between;
}
.toast {
max-width: calc(100vw - 24px);
bottom: 12px;
right: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ── message list ── */
.folder-column {
background: var(--surface-soft);
border-right: 1px solid var(--line);
align-content: start;
gap: 14px;
min-width: 0;
padding: 14px 12px;
display: grid;
}
.folder-summary,
.column-bar,
.pager {
justify-content: space-between;
align-items: center;
gap: 12px;
display: flex;
}
.folder-group {
gap: 3px;
display: grid;
}
.folder-row {
align-items: center;
gap: 2px;
display: flex;
}
.disclosure {
block-size: 39px;
inline-size: 20px;
color: var(--muted);
transform: translateX(calc(var(--depth, 0) * 14px));
background: 0 0;
border: 0;
flex: none;
justify-content: center;
align-items: center;
padding: 0;
display: inline-flex;
}
.disclosure svg {
transition: transform 0.12s;
}
.disclosure svg.open {
transform: rotate(90deg);
}
.disclosure-spacer {
flex: none;
inline-size: 20px;
}
.folder-button {
min-width: 0;
min-height: 39px;
padding: 0 9px;
padding-left: calc(9px + var(--depth, 0) * 14px);
color: var(--ink);
text-align: left;
background: 0 0;
border: 0;
border-radius: 6px;
flex: 1;
justify-content: space-between;
align-items: center;
gap: 8px;
display: flex;
}
.folder-button.active,
.folder-button:hover {
background: var(--surface-selected);
color: var(--accent);
}
.folder-name {
align-items: center;
gap: 10px;
display: inline-flex;
}
.folder-button em {
background: var(--accent-soft);
min-width: 21px;
color: var(--accent);
text-align: center;
border-radius: 6px;
margin-left: auto;
padding: 2px 6px;
font-size: 11px;
font-style: normal;
}
.folder-button em:not(:empty) {
display: inline-block;
}
.folder-group button:not(.folder-button) {
min-height: 39px;
color: var(--ink);
text-align: left;
background: 0 0;
border: 0;
border-radius: 6px;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 0 9px;
display: flex;
}
.folder-group button.active,
.folder-group
button:not(.folder-button):hover {
background: var(--surface-selected);
color: var(--accent);
}
.message-column {
border-right: 1px solid var(--line);
grid-template-rows: auto auto minmax(0, 1fr) auto;
min-width: 0;
display: grid;
}
.column-bar {
border-bottom: 1px solid var(--line);
min-height: 78px;
padding: 12px 14px;
}
.column-bar div {
gap: 2px;
display: grid;
}
.filter-chips {
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 8px 14px;
display: flex;
}
.chip {
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
cursor: pointer;
border-radius: 6px;
padding: 5px 11px;
font-size: 12px;
font-weight: 650;
}
.chip:hover {
background: var(--surface-selected);
}
.chip.active {
background: var(--accent-soft);
color: var(--accent);
border-color: var(--accent);
}
.chip-clear {
color: var(--muted);
cursor: pointer;
background: 0 0;
border: 0;
align-items: center;
gap: 3px;
padding: 5px 6px;
font-size: 12px;
display: inline-flex;
}
.chip-clear:hover {
color: var(--ink);
}
.message-list {
contain: strict;
min-height: 0;
overflow: auto;
}
.thread-row {
position: relative;
}
.thread-row > button {
box-sizing: border-box;
border: 0;
border-bottom: 1px solid var(--line-soft);
background: var(--surface);
width: 100%;
min-height: 106px;
color: var(--ink);
text-align: left;
gap: 10px;
padding: 13px 14px 12px 11px;
display: flex;
}
.thread-row > button:hover,
.thread-row > button.selected {
background: var(--surface-soft);
}
.message-dot {
background: 0 0;
border-radius: 6px;
flex: none;
block-size: 8px;
inline-size: 8px;
margin-top: 8px;
}
.unread .message-dot {
background: var(--accent);
}
.message-main {
flex: 1;
gap: 3px;
min-width: 0;
display: grid;
}
.row-top,
.subject-line,
.message-tags {
align-items: center;
gap: 7px;
min-width: 0;
display: flex;
}
.row-top {
justify-content: space-between;
}
.row-top b {
color: var(--ink);
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 500;
overflow: hidden;
}
.unread
.row-top
b {
font-weight: 700;
}
.row-top time {
color: var(--muted);
font-variant-numeric: tabular-nums;
flex: none;
font-size: 12px;
}
.subject-line strong {
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ink);
font-size: 13px;
font-weight: 400;
overflow: hidden;
}
.unread
.subject-line
strong {
font-weight: 600;
}
.subject-line svg {
color: #d6a62c;
flex: none;
}
.thread-count {
border: 1px solid var(--line);
background: var(--surface-soft);
color: var(--muted);
border-radius: 6px;
flex: none;
align-items: center;
gap: 2px;
margin-left: auto;
padding: 1px 7px;
font-size: 11px;
display: inline-flex;
cursor: pointer;
}
.thread-count svg {
color: var(--muted);
transition: transform 0.15s;
}
.thread-count svg.rotated {
transform: rotate(180deg);
}
.preview {
color: var(--muted);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 12px;
overflow: hidden;
}
.message-tags {
margin-top: 1px;
}
.message-tags em {
background: var(--accent-soft);
color: var(--accent);
border-radius: 6px;
align-items: center;
gap: 3px;
padding: 2px 6px;
font-size: 10px;
font-style: normal;
display: inline-flex;
}
.message-tags .spam-tag {
background: color-mix(in srgb, var(--danger) 13%, var(--surface));
color: var(--danger);
}
.thread-actions {
z-index: 2;
gap: 4px;
display: none;
position: absolute;
top: 6px;
right: 8px;
}
.thread-row:hover .thread-actions,
.thread-row:focus-within .thread-actions {
display: flex;
}
.thread-actions button {
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
border-radius: 6px;
padding: 2px 6px;
font-size: 10px;
}
.thread-actions button:hover {
background: var(--surface-selected);
color: var(--accent);
}
.thread-messages {
background: var(--surface-soft);
margin: 0;
padding: 0;
list-style: none;
}
.thread-messages
li
button {
border: 0;
border-bottom: 1px solid var(--line-soft);
width: 100%;
min-height: 36px;
color: var(--ink);
text-align: left;
background: 0 0;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 30px;
display: flex;
}
.thread-messages
li
button:hover,
.thread-messages
li
button.selected {
background: var(--surface-selected);
}
.thread-messages
.row-top
b {
font-size: 12px;
font-weight: 400;
}
.thread-messages
.unread
.row-top
b {
font-weight: 700;
}
.thread-messages .message-dot {
block-size: 6px;
inline-size: 6px;
margin-top: 0;
}
.preview,
.message-count,
.pager,
.folder-hint {
color: var(--muted);
font-size: 12px;
}
.pager {
border-top: 1px solid var(--line);
min-height: 50px;
padding: 6px 12px;
}
.empty-state {
min-height: 270px;
color: var(--muted);
text-align: center;
place-content: center;
justify-items: center;
gap: 8px;
padding: 28px;
display: grid;
}
.empty-icon {
background: var(--accent-soft);
block-size: 48px;
inline-size: 48px;
color: var(--accent);
border-radius: 6px;
place-items: center;
display: grid;
}
@media (width<=640px) {
.folder-column {
border-right: 0;
border-bottom: 1px solid var(--line);
padding: 8px;
display: block;
overflow-x: auto;
}
.folder-summary,
.folder-hint {
display: none;
}
.folder-group {
gap: 5px;
display: flex;
}
.folder-row {
flex: none;
}
.disclosure {
display: none;
}
.folder-button {
flex: none;
min-width: max-content;
min-height: 35px;
padding-left: 9px;
}
.message-column {
border-right: 0;
}
.thread-actions {
display: none !important;
}
.filter-chips {
flex-wrap: nowrap;
padding: 6px 8px;
overflow-x: auto;
}
}
/* ── message reader ── */
.reader-column {
grid-template-rows: auto auto minmax(0, 1fr);
min-width: 0;
min-height: 0;
display: grid;
overflow: hidden;
}
.reader-toolbar {
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
align-items: center;
gap: 6px;
padding: 10px 14px;
display: flex;
}
.toolbar-button {
color: var(--ink);
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 6px;
align-items: center;
gap: 5px;
padding: 7px 10px;
font-size: 13px;
display: inline-flex;
}
.toolbar-button:hover {
background: var(--surface-soft);
}
.toolbar-divider {
background: var(--line);
width: 1px;
height: 22px;
margin: 0 4px;
}
.icon-button {
color: var(--ink);
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 6px;
align-items: center;
padding: 6px;
display: inline-flex;
}
.icon-button:hover {
background: var(--surface-soft);
}
.destructive {
color: #b3261e;
}
.vip-active {
color: #d6a62c;
}
.mobile-back {
display: none;
}
.menu-wrap {
position: relative;
}
.popup-menu {
z-index: 30;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 6px;
gap: 2px;
min-width: 150px;
padding: 5px;
display: grid;
position: absolute;
top: calc(100% + 6px);
left: 0;
box-shadow: 0 16px 40px #0c1f182e;
}
.popup-menu button {
color: var(--ink);
text-align: left;
background: 0 0;
border: 0;
border-radius: 6px;
padding: 8px 9px;
font-size: 13px;
}
.popup-menu button:hover {
background: var(--surface-selected);
color: var(--accent);
}
.signals-panel {
border-bottom: 1px solid var(--line);
background: var(--surface-soft);
gap: 5px;
padding: 8px 14px;
display: grid;
}
.signal-row {
gap: 2px;
padding: 5px 0;
display: grid;
}
.signal-info {
align-items: center;
gap: 6px;
font-size: 13px;
display: flex;
}
.signal-label {
font-weight: 700;
}
.signal-prov {
color: var(--muted);
font-size: 11px;
}
.signal-conf {
color: var(--muted);
margin-left: auto;
font-size: 11px;
}
.signal-evidence {
color: var(--muted);
gap: 8px;
padding-left: 21px;
font-size: 12px;
display: flex;
}
.signal-evidence span {
display: inline;
}
.signal-evidence
span
+ span:before {
content: "·";
color: var(--line);
margin-right: 8px;
}
.signal-actions {
gap: 6px;
padding-left: 21px;
display: flex;
}
.subtle-button {
background: var(--surface);
color: var(--accent);
cursor: pointer;
border: 0;
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
}
.subtle-button:hover {
background: var(--surface-selected);
}
.reader-empty {
color: var(--muted);
align-content: center;
justify-items: center;
gap: 6px;
padding: 36px;
display: grid;
}
.reader-empty p {
text-align: center;
max-width: 220px;
margin: 0;
font-size: 14px;
}
.reader-empty strong {
font-size: 17px;
}
.empty-icon {
opacity: 0.4;
}
.reader-card {
min-height: 0;
padding: 20px 22px;
overflow-y: auto;
}
.reader-head {
margin-bottom: 22px;
}
.reader-title {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
display: flex;
}
.reader-title h1 {
margin: 0;
font-size: 21px;
line-height: 1.25;
}
.reader-title p {
color: var(--muted);
margin: 6px 0 0;
font-size: 13px;
}
.reader-head dl {
gap: 6px;
margin-top: 14px;
display: grid;
}
.reader-head dl div {
grid-template-columns: 50px minmax(0, 1fr);
gap: 8px;
font-size: 14px;
display: grid;
}
.reader-head dt {
color: var(--muted);
font-weight: 500;
}
.warning {
background: var(--error-tint);
color: #b3261e;
border-radius: 6px;
align-items: flex-start;
gap: 8px;
margin-bottom: 16px;
padding: 10px 12px;
font-size: 13px;
display: flex;
}
.message-body {
color: var(--ink);
overflow-wrap: anywhere;
font-size: 15px;
line-height: 1.65;
}
.attachments {
border-top: 1px solid var(--line);
margin-top: 22px;
padding-top: 14px;
}
.attachments strong {
align-items: center;
gap: 6px;
font-size: 14px;
display: flex;
}
.attachments div {
gap: 6px;
margin-top: 8px;
display: grid;
}
.attachment {
background: var(--surface-soft);
cursor: pointer;
text-align: left;
border: 0;
border-radius: 6px;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 11px;
font-size: 13px;
display: flex;
}
.attachment:hover {
background: var(--surface-selected);
}
.attachment span {
flex: 1;
display: grid;
}
.attachment small {
color: var(--muted);
}
@media (width<=640px) {
.mobile-back {
display: inline-flex;
}
}
/* ── compose dialog ── */
.overlay {
z-index: 80;
background: #07130e6b;
place-items: end center;
padding: 18px;
display: grid;
position: fixed;
inset: 0;
}
.compose-window {
border: 1px solid var(--line);
background: var(--surface);
border-radius: 6px;
width: min(680px, 100%);
max-height: min(780px, 100dvh - 36px);
display: grid;
overflow: auto;
box-shadow: 0 30px 80px #04100b59;
}
/* ── settings drawer ── */
.drawer-overlay {
z-index: 74;
background: #07130e6b;
position: fixed;
inset: 0;
}
.settings-drawer {
z-index: 75;
background: var(--surface);
border-left: 1px solid var(--line);
width: min(450px, 100vw);
position: fixed;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
box-shadow: -18px 0 52px #091b1438;
}
/* ── recipient combobox ── */
.combobox {
position: relative;
}
.combobox input {
width: 100%;
}
.combobox-list {
z-index: 90;
border: 1px solid var(--line);
background: var(--surface);
border-radius: 6px;
max-height: 220px;
margin: 0;
padding: 4px;
list-style: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
overflow: auto;
box-shadow: 0 12px 30px #04100b40;
}
.combobox-list li {
display: block;
}
.combobox-list button {
text-align: left;
cursor: pointer;
background: 0 0;
border: 0;
border-radius: 6px;
width: 100%;
padding: 6px 8px;
font-size: 13px;
display: block;
}
.combobox-list button.active,
.combobox-list button:hover {
background: var(--rail);
color: var(--rail-text);
}
/* ── rich text editor ── */
.rte-toolbar {
border-bottom: 1px solid var(--line-soft);
gap: 2px;
padding: 4px 0 8px;
display: flex;
}
.rte-toolbar button {
block-size: 30px;
inline-size: 30px;
color: var(--ink);
background: 0 0;
border: 1px solid #0000;
border-radius: 6px;
place-items: center;
padding: 0;
display: grid;
}
.rte-toolbar button:hover {
background: var(--surface-soft);
border-color: var(--line);
}
.rte-body {
outline: none;
flex: 1;
min-height: 190px;
padding: 8px 0;
overflow: auto;
}
.rte-body:empty:before {
content: attr(data-placeholder);
color: var(--muted);
opacity: 0.82;
}
.rte-body blockquote {
border-left: 3px solid var(--line);
color: var(--muted);
margin: 6px 0;
padding-left: 10px;
}
.rte-body ul,
.rte-body ol {
padding-left: 22px;
}
.rte-body a {
color: var(--accent);
}
/* ── sync banner ── */
.sync-status {
color: var(--muted);
align-items: center;
gap: 6px;
font-size: 12px;
display: flex;
}
.sync-status .spin {
animation: 0.8s linear infinite spin;
}
.sync-now {
color: var(--accent);
background: 0 0;
border: 0;
padding: 0 4px;
font-weight: 700;
}
.sync-now:hover {
text-decoration: underline;
}
.sync-banner {
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--danger) 8%, var(--surface));
color: var(--danger);
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: 13px;
display: flex;
}
.sync-banner.auth {
background: color-mix(in srgb, #d6a62c 14%, var(--surface));
color: #7a5a00;
}
.sync-banner-text {
flex: 1;
min-width: 0;
}
.sync-action {
background: var(--surface);
color: inherit;
border: 0;
border-radius: 6px;
padding: 5px 10px;
font-weight: 700;
}
.sync-action:hover {
background: var(--surface-selected);
}
.icon-button {
color: inherit;
background: 0 0;
border: 0;
padding: 4px;
display: inline-flex;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* ── signal badge ── */
.signal-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 3px 8px;
border-radius: 5px;
line-height: 1;
white-space: nowrap;
}
.signal-badge.compact {
padding: 2px 4px;
gap: 0;
border-radius: 4px;
min-width: 0;
}
.signal-amber {
background: #fff7e0;
color: #9a6b00;
border: 1px solid #f0d060;
}
.signal-blue {
background: #e8f0fe;
color: #1a56b4;
border: 1px solid #b8d4f8;
}
.signal-red {
background: #fdecea;
color: #b3261e;
border: 1px solid #f5c6c2;
}
.signal-muted {
background: #f3f4f6;
color: #61716c;
border: 1px solid #dce4e1;
}
.signal-badge em {
font-style: normal;
opacity: 0.7;
margin-left: 1px;
}
.signal-dismiss {
border: 0;
background: none;
color: inherit;
cursor: pointer;
padding: 0 2px;
margin-left: 2px;
font-size: 15px;
line-height: 1;
opacity: 0.5;
}
.signal-dismiss:hover {
opacity: 1;
}