@novacraft-engineering/mailbox 0.4.5 → 0.4.17

package/app/mail/page.module.css

@@ -915,7 +915,10 @@
 .item:hover { background: var(--nc-ink-1); }
 .itemActive {
   background: var(--nc-ink-2);
-  border-color: var(--nc-line-1);
+  /* The same ring the selected folder wears, so "this is the one you are on" reads the
+     same in the list as it does in the sidebar. */
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1.5px var(--nc-violet-500);
 }
 .avatar {
   width: var(--row-avatar);
@@ -1009,6 +1012,89 @@
 .chipDraft { color: var(--nc-violet-200); border-color: rgba(165,120,255,.3); }
 .chipAuto { color: var(--nc-fg-3); border-color: var(--nc-line-2); }
 
+/* Copied-in notice. The brand accent carries it, darkened to 70%: white on pulsar's own
+   accent measures 2.5:1, which is unreadable, and every brand clears AA once darkened. */
+.copiedNote,
+.copiedBanner {
+  --copied-bg: color-mix(in srgb, var(--nc-violet-500, #6d28d9) 70%, black);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--copied-bg);
+  color: #fff;
+}
+
+.copiedNote {
+  margin-top: 6px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font: 500 11px/1.35 var(--nc-font-sans);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.copiedBanner {
+  margin: 10px 0 0;
+  padding: 9px 14px;
+  border-radius: 8px;
+  font: 500 13px/1.45 var(--nc-font-sans);
+  width: 100%;
+  box-sizing: border-box;
+  text-wrap: pretty;
+}
+
+.copiedNoteIcon,
+.copiedBannerIcon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: #fff;
+}
+
+.copiedNoteIcon svg { width: 12px; height: 12px; }
+
+/* A warning, not the brand: spam and spoofing are not house colours. Amber for a sender
+   that cannot be verified, red where a scanner actually failed the message. */
+.riskNote,
+.riskBanner {
+  display: flex;
+  gap: 8px;
+  color: #fff;
+  background: #b45309;
+}
+
+.riskNote {
+  align-items: center;
+  gap: 6px;
+  margin-top: 6px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font: 600 11px/1.35 var(--nc-font-sans);
+  width: fit-content;
+  max-width: 100%;
+}
+
+.riskBanner {
+  align-items: flex-start;
+  margin: 10px 0 0;
+  padding: 11px 14px;
+  border-radius: 8px;
+  font: 400 13px/1.5 var(--nc-font-sans);
+  width: 100%;
+  box-sizing: border-box;
+  text-wrap: pretty;
+}
+
+.riskBanner strong { display: block; font-weight: 650; }
+.riskBannerWhy { display: block; margin-top: 3px; opacity: 0.92; font-size: 12.5px; }
+
+.riskNoteIcon,
+.riskBannerIcon { display: inline-flex; flex-shrink: 0; }
+.riskNoteIcon svg { width: 12px; height: 12px; }
+.riskBannerIcon svg { width: 17px; height: 17px; margin-top: 1px; }
+
+.copiedBannerIcon svg { width: 16px; height: 16px; }
+
+
 .emptyList {
   display: flex;
   flex-direction: column;
@@ -4056,6 +4142,59 @@
   font: 500 14px/1.4 var(--nc-font-sans);
   color: var(--nc-fg-1);
 }
+
+.installGuide {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.installWarn {
+  margin: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--nc-line-2);
+  border-left: 3px solid var(--nc-violet-400);
+  border-radius: 10px;
+  background: var(--nc-ink-2);
+  font: 400 12px/1.55 var(--nc-font-sans);
+  color: var(--nc-fg-2);
+}
+.installSteps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.installStep {
+  display: grid;
+  grid-template-columns: 116px minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 12px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 12px;
+  background: var(--nc-ink-2);
+}
+.installStep strong {
+  display: block;
+  margin-bottom: 4px;
+  font: 600 13px/1.3 var(--nc-font-sans);
+  color: var(--nc-fg-1);
+}
+.installArt {
+  width: 100%;
+  height: auto;
+  display: block;
+  border-radius: 10px;
+  background: var(--nc-ink-1);
+}
+@media (max-width: 560px) {
+  .installStep {
+    grid-template-columns: 84px minmax(0, 1fr);
+    gap: 11px;
+  }
+}
 .tickerGroup {
   display: flex;
   flex-direction: column;
@@ -5396,6 +5535,61 @@
   word-break: break-word;
 }
 
+.bodyFileImage {
+  display: block;
+  max-width: 100%;
+  max-height: 72vh;
+  margin: 4px 0;
+  border-radius: 10px;
+  border: 1px solid var(--nc-line-1);
+  object-fit: contain;
+  background: var(--nc-ink-1);
+}
+
+.bodyFileFrame {
+  display: block;
+  width: 100%;
+  height: min(72vh, 900px);
+  margin: 4px 0;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 10px;
+  background: var(--nc-ink-1);
+}
+
+.bodyFileAudio {
+  display: block;
+  width: 100%;
+  margin: 12px 0;
+}
+
+.bodyFileCard {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 4px 0;
+  padding: 16px 18px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 12px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.bodyFileCard:hover { border-color: var(--nc-violet-400); }
+.bodyFileCard span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.bodyFileCard strong { font: 600 13.5px/1.35 var(--nc-font-sans); overflow-wrap: anywhere; }
+.bodyFileCard small { font: 400 12px/1.4 var(--nc-font-sans); color: var(--nc-fg-3); }
+
+.bodyFileGlyph {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex-shrink: 0;
+  border-radius: 9px;
+  background: var(--nc-ink-3);
+  color: var(--nc-fg-2);
+}
+
 .confirmField {
   display: flex;
   flex-direction: column;