@novacraft-engineering/mailbox 0.4.4 → 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);
@@ -1007,6 +1010,90 @@
 .chipDelivered { color: var(--nc-success); border-color: rgba(52,211,153,.3); }
 .chipBounced { color: var(--nc-danger); border-color: color-mix(in srgb, var(--nc-danger) 30%, transparent); }
 .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;
@@ -4055,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;
@@ -5395,6 +5535,87 @@
   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;
+  gap: 6px;
+  margin-top: 14px;
+}
+
+.confirmField > span {
+  font: 500 12.5px/1.4 var(--nc-font-sans);
+  color: var(--nc-fg-2);
+}
+
+.confirmField .pwWrap { width: 100%; }
+
+.confirmInput {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 10px;
+  background: var(--nc-ink-1);
+  color: var(--nc-fg-1);
+  font: 400 14px/1.4 var(--nc-font-sans);
+}
+
+.confirmInput:focus { border-color: var(--nc-violet-400); outline: none; }
+
 .confirmActions {
   display: flex;
   justify-content: flex-end;
@@ -7007,3 +7228,35 @@
     width: auto;
   }
 }
+
+
+/* ── Field-level validation ─────────────────────────────────────────────── */
+/* Shake stays on transform so it composites; the ring is a box-shadow rather
+   than a border so the field does not reflow by a pixel when it errors. */
+@keyframes ncFieldShake {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  15%      { transform: translate3d(-5px, 0, 0); }
+  30%      { transform: translate3d(4px, 0, 0); }
+  45%      { transform: translate3d(-3px, 0, 0); }
+  60%      { transform: translate3d(2px, 0, 0); }
+  80%      { transform: translate3d(-1px, 0, 0); }
+}
+
+.fieldBad,
+.fieldBad input {
+  border-color: var(--nc-danger) !important;
+  box-shadow: 0 0 0 1px var(--nc-danger);
+}
+.fieldBad {
+  animation: ncFieldShake .4s cubic-bezier(.36, .07, .19, .97) both;
+  will-change: transform;
+}
+.msgBad {
+  color: var(--nc-danger);
+  animation: ncFieldShake .4s cubic-bezier(.36, .07, .19, .97) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fieldBad,
+  .msgBad { animation: none; }
+}