/* ============================================================================ NOTIFICATION CENTER — merged layout (js/notification-center.js) Everything is prefixed nc2- and scoped under #notifSidebar (or the nc2- class on the register), with !important on colours: the light theme carries blanket rules ([data-theme="light"] div {background:inherit}, button {...!important}, span/b/a colours) that would otherwise flatten the cards and buttons. Dark values are the default (the app's default theme); the light block only overrides the tokens. New rules go at the END of this file. ============================================================================ */ #notifSidebar.nc2 { --nc-ground: #0c1117; --nc-card: #121820; --nc-card2: #1a222d; --nc-line: #2a3545; --nc-line2: #3d4f66; --nc-ink: #e6edf3; --nc-ink2: #b6c2cf; --nc-mut: #8b949e; --nc-amber: #f59e0b; --nc-amber-ink: #2a1700; --nc-amber-bg: rgba(245, 158, 11, .14); --nc-amber-tx: #fdba74; --nc-ok: #22c55e; --nc-ok-bg: rgba(34, 197, 94, .18); --nc-bad: #ef4444; --nc-bad-bg: rgba(239, 68, 68, .16); --nc-myo: #24508c; --nc-myo-line: #3d6fb3; --nc-go: #15803d; --nc-go2: #166534; --nc-nav: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --nc-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --nc-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; width: 404px; right: -420px; } #notifSidebar.nc2.visible { right: 0; } [data-theme="light"] #notifSidebar.nc2 { --nc-ground: #e7ebef; --nc-card: #ffffff; --nc-card2: #eef4f8; --nc-line: #d6e2ea; --nc-line2: #b9cedb; --nc-ink: #102033; --nc-ink2: #33465a; --nc-mut: #536579; --nc-amber-bg: #fff5e1; --nc-amber-tx: #b45309; --nc-ok: #2c8c62; --nc-ok-bg: #e3f3eb; --nc-bad: #c94136; --nc-bad-bg: #f8e4e1; --nc-myo: #16386b; --nc-myo-line: #16386b; --nc-nav: #0a5989; } /* header in the nav bar's own navy (dark: navy gradient, light: marine blue) */ #notifSidebar.nc2 .notif-sidebar-header { background: var(--nc-nav) !important; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; } #notifSidebar.nc2 .notif-sidebar-header h3 { color: #fff !important; background: transparent !important; } #notifSidebar.nc2 .notif-sidebar-close { color: rgba(255, 255, 255, .85) !important; background: rgba(255, 255, 255, .14) !important; border-radius: 6px; width: 26px; height: 26px; padding: 0; } #notifSidebar.nc2 .notif-sidebar-close:hover { background: rgba(255, 255, 255, .28) !important; color: #fff !important; } #notifSidebar.nc2 .notif-sidebar-tab { padding: 10px 6px; white-space: nowrap; } /* the screen behind the center stays clear and usable */ .notification-backdrop.visible { background: transparent !important; pointer-events: none !important; backdrop-filter: none !important; } /* Tasks pane */ #notifSidebar.nc2 .nc2-tasks { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--nc-ground) !important; } #notifSidebar.nc2 .nc2-tasks > * { flex: none; } #notifSidebar.nc2 .nc2-tasks > *:empty { display: none; } #notifSidebar.nc2 #nc2Appr { display: flex; flex-direction: column; gap: 10px; background: transparent !important; } #notifSidebar.nc2 .nc2-pad { padding: 10px; display: flex; flex-direction: column; gap: 10px; background: var(--nc-ground) !important; } #notifSidebar.nc2 .nc2-sec { display: flex; align-items: center; gap: 8px; font: 700 11px var(--nc-sans); letter-spacing: .07em; text-transform: uppercase; color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-sec .nc2-n { color: var(--nc-amber-tx) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-sec .nc2-sec-note { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--nc-mut) !important; background: transparent !important; } /* cards */ #notifSidebar.nc2 .nc2-card { background: var(--nc-card) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-line); border-radius: 9px; overflow: hidden; font: 13px/1.4 var(--nc-sans); } #notifSidebar.nc2 .nc2-ur { padding: 10px; display: flex; flex-direction: column; gap: 7px; } #notifSidebar.nc2 .nc2-ur > div:not(.nc2-holdban) { background: transparent !important; } #notifSidebar.nc2 .nc2-ur-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #notifSidebar.nc2 .nc2-ctr { font: 700 15px var(--nc-mono); color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-mono { font-family: var(--nc-mono); font-weight: 700; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-myo { font: 700 11px/1.5 var(--nc-mono); border-radius: 4px; padding: 1px 6px; white-space: nowrap; background: var(--nc-myo) !important; color: #fff !important; border: 1px solid var(--nc-myo-line) !important; } #notifSidebar.nc2 .nc2-cpy { cursor: copy; border-radius: 3px; } #notifSidebar.nc2 .nc2-cpy:hover { box-shadow: 0 0 0 2px var(--nc-amber-bg); } #notifSidebar.nc2 .nc2-cp { flex: none; width: 18px; height: 18px; padding: 1px; margin-left: -3px; line-height: 0; cursor: pointer; border-radius: 4px; background: transparent !important; color: var(--nc-mut) !important; border: 0 !important; } #notifSidebar.nc2 .nc2-cp svg { width: 13px; height: 13px; } #notifSidebar.nc2 .nc2-cp:hover, #notifSidebar.nc2 .nc2-cp.nc2-copied { color: var(--nc-ok) !important; } #notifSidebar.nc2 .nc2-wait { margin-left: auto; padding: 0 8px; border-radius: 9px; font: 700 10.5px/17px var(--nc-sans); white-space: nowrap; background: var(--nc-amber-bg) !important; color: var(--nc-amber-tx) !important; } #notifSidebar.nc2 .nc2-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; } #notifSidebar.nc2 .nc2-chip { padding: 0 7px; border-radius: 9px; font: 700 10.5px/17px var(--nc-sans); background: var(--nc-card2) !important; color: var(--nc-ink2) !important; border: 1px solid var(--nc-line); } #notifSidebar.nc2 .nc2-chip-bad { background: var(--nc-bad-bg) !important; color: var(--nc-bad) !important; border-color: transparent; } #notifSidebar.nc2 .nc2-mrn { font: 600 11.5px var(--nc-mono); white-space: nowrap; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-ur-meta { font-size: 12px; color: var(--nc-ink2) !important; } #notifSidebar.nc2 .nc2-nums { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-dim { color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-proof { display: flex; gap: 5px; flex-wrap: wrap; } #notifSidebar.nc2 .nc2-thumb { width: 38px; height: 38px; padding: 0; border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--nc-card2) !important; color: var(--nc-ink2) !important; border: 1px solid var(--nc-line) !important; font: 600 11px var(--nc-sans); } #notifSidebar.nc2 .nc2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } #notifSidebar.nc2 .nc2-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } #notifSidebar.nc2 .nc2-right { margin-left: auto; } #notifSidebar.nc2 .nc2-btn { padding: 5px 10px; border-radius: 6px; font: 600 12px var(--nc-sans); cursor: pointer; background: var(--nc-card2) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-line) !important; } #notifSidebar.nc2 .nc2-btn:disabled { opacity: .6; cursor: progress; } #notifSidebar.nc2 .nc2-btn-go { background: var(--nc-go) !important; color: #fff !important; border-color: var(--nc-go) !important; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); } #notifSidebar.nc2 .nc2-btn-go:hover { background: var(--nc-go2) !important; } #notifSidebar.nc2 .nc2-btn-hold { background: transparent !important; color: var(--nc-amber-tx) !important; border-color: var(--nc-amber) !important; } #notifSidebar.nc2 .nc2-btn-amber { background: var(--nc-amber) !important; color: var(--nc-amber-ink) !important; border-color: var(--nc-amber) !important; } #notifSidebar.nc2 .nc2-btn-quiet { background: transparent !important; color: var(--nc-mut) !important; } /* on hold: the card stays, amber, with its reason */ #notifSidebar.nc2 .nc2-onhold { background: var(--nc-amber-bg) !important; border-color: var(--nc-amber); box-shadow: inset 4px 0 0 var(--nc-amber); } #notifSidebar.nc2 .nc2-wait-hold { background: var(--nc-amber) !important; color: var(--nc-amber-ink) !important; } #notifSidebar.nc2 .nc2-holdban { display: flex; gap: 9px; align-items: flex-start; padding: 7px 9px; border-radius: 7px; font-size: 12.5px; background: var(--nc-amber) !important; color: var(--nc-amber-ink) !important; } #notifSidebar.nc2 .nc2-holdban > div { background: transparent !important; color: var(--nc-amber-ink) !important; min-width: 0; } #notifSidebar.nc2 .nc2-holdban b { display: block; overflow-wrap: anywhere; color: var(--nc-amber-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-holdban small { font-size: 11px; opacity: .8; color: var(--nc-amber-ink) !important; } #notifSidebar.nc2 .nc2-hb { flex: none; padding: 1px 8px; border-radius: 9px; font: 700 10px/17px var(--nc-sans); letter-spacing: .08em; text-transform: uppercase; background: var(--nc-amber-ink) !important; color: #fff !important; } #notifSidebar.nc2 .nc2-holdedit { display: flex; gap: 6px; } #notifSidebar.nc2 .nc2-holdedit input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 7px; font: 12.5px var(--nc-sans); background: var(--nc-card) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-amber) !important; } /* approved: fold, green fill carrying the check and the DONE box, then away */ #notifSidebar.nc2 .nc2-folding { overflow: hidden; transition: height .46s cubic-bezier(.55, 0, .2, 1), border-color .25s, box-shadow .25s; border-color: var(--nc-ok); box-shadow: 0 0 0 2px var(--nc-ok-bg); } #notifSidebar.nc2 .nc2-folding > * { transition: opacity .2s, transform .46s cubic-bezier(.55, 0, .2, 1); opacity: 0; transform: scale(.97) translateY(-6px); transform-origin: top center; } #notifSidebar.nc2 .nc2-done { border-color: var(--nc-ok); } #notifSidebar.nc2 .nc2-solved { position: relative; display: flex; align-items: center; min-height: 76px; padding: 12px 136px 12px 12px; overflow: hidden; font-size: 12.5px; background: transparent !important; } #notifSidebar.nc2 .nc2-solved-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--nc-ok-bg) !important; border-right: 3px solid var(--nc-ok); animation: nc2Fill .9s cubic-bezier(.5, 0, .2, 1) both, nc2Edge .3s 1s both; } #notifSidebar.nc2 .nc2-solved-ride { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; align-items: center; white-space: nowrap; background: transparent !important; } #notifSidebar.nc2 .nc2-solved-txt { position: relative; min-width: 0; background: transparent !important; animation: nc2Fade .35s .6s both; } #notifSidebar.nc2 .nc2-solved-txt b { display: block; font-size: 13.5px; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-solved-txt small { display: block; font-size: 11.5px; color: var(--nc-ink2) !important; } #notifSidebar.nc2 .nc2-tick { flex: none; width: 34px; height: 34px; } #notifSidebar.nc2 .nc2-tick circle { fill: var(--nc-card); stroke: var(--nc-ok); stroke-width: 3; } #notifSidebar.nc2 .nc2-tick path { fill: none; stroke: var(--nc-ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 25; stroke-dashoffset: 25; animation: nc2Draw .28s .9s ease-out forwards; } #notifSidebar.nc2 .nc2-stamp { padding: 1px 8px; border-radius: 5px; font: 700 11px var(--nc-sans); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-7deg); background: var(--nc-card) !important; color: var(--nc-ok) !important; border: 2px solid var(--nc-ok) !important; animation: nc2Stamp .35s 1.05s cubic-bezier(.2, 1.6, .4, 1) both; } #notifSidebar.nc2 .nc2-leaving { transition: opacity .45s, max-height .5s .1s, margin .5s .1s, transform .45s; opacity: 0; transform: translateX(60px); max-height: 0 !important; margin-top: -10px; border-width: 0; } @keyframes nc2Fill { from { width: 0; } } @keyframes nc2Edge { to { border-right-color: transparent; } } @keyframes nc2Fade { from { opacity: 0; } } @keyframes nc2Draw { to { stroke-dashoffset: 0; } } @keyframes nc2Stamp { from { opacity: 0; transform: scale(2.3) rotate(-7deg); } } /* the pending items that keep their old card sit in the same column */ #notifSidebar.nc2 .nc2-old { border: 1px solid var(--nc-line); border-left: 3px solid var(--accent-orange, #f97316); border-radius: 9px; background: var(--nc-card) !important; } /* Comments tab: one card per shipment */ #notifSidebar.nc2 .nc2-cgrp { overflow: visible; } #notifSidebar.nc2 .nc2-chd { display: flex; align-items: center; gap: 6px; padding: 7px 9px; min-width: 0; border-bottom: 1px solid var(--nc-line); border-radius: 8px 8px 0 0; background: var(--nc-card2) !important; } #notifSidebar.nc2 .nc2-crn { flex: none; font: 700 12px var(--nc-mono); color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-ctag { flex: none; font: 600 11px var(--nc-sans); color: var(--nc-ink2) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-csep { flex: none; color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-ccu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px var(--nc-sans); color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-crow { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--nc-line); background: transparent !important; } #notifSidebar.nc2 .nc2-chd + .nc2-crow { border-top: 0; } #notifSidebar.nc2 .nc2-cgo { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 0; text-align: left; cursor: pointer; font: 12.5px/1.4 var(--nc-sans); background: transparent !important; color: var(--nc-ink) !important; border: 0 !important; } #notifSidebar.nc2 .nc2-cgo:hover .nc2-ctext { color: var(--nc-amber-tx) !important; } #notifSidebar.nc2 .nc2-colchip { flex: none; padding: 0 7px; border-radius: 5px; font: 700 10.5px/18px var(--nc-sans); white-space: nowrap; background: var(--nc-amber-bg) !important; color: var(--nc-amber-tx) !important; } #notifSidebar.nc2 .nc2-ctext { flex: 1; min-width: 0; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-ctext small { display: block; font-size: 11px; color: var(--nc-mut) !important; } #notifSidebar.nc2 .nc2-arrow { flex: none; align-self: center; color: var(--nc-amber-tx) !important; background: transparent !important; font-weight: 700; } #notifSidebar.nc2 .nc2-cacts { display: flex; gap: 6px; background: transparent !important; } #notifSidebar.nc2 .nc2-cacts .nc2-btn { padding: 3px 10px; font-size: 11.5px; } /* the follow-up task panel, embedded with its own design */ #notifSidebar.nc2 #nc2Fut { background: transparent !important; } #notifSidebar.nc2 .fut-panel.fut-panel.fut-panel.nc2-fut { position: static !important; display: flex !important; width: auto !important; max-width: none !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; border: 1px solid var(--nc-line) !important; border-radius: 9px; box-shadow: none; overflow: visible; } #notifSidebar.nc2 .nc2-fut .fut-hd .fut-min { display: none !important; } #notifSidebar.nc2 .nc2-fut .fut-hd { border-radius: 8px 8px 0 0; } #notifSidebar.nc2 .nc2-fut .fut-body { overflow: visible !important; border-radius: 0 0 8px 8px; } html.nc2-has-fut .fut-button.fut-button.fut-button { display: none !important; } /* View cell / Show row: the register lights up beside the open center */ tr.nc2-row-hl > td { background: #fff1c9 !important; color: #3b2600 !important; } tr.nc2-row-hl > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; } td.nc2-cell-hl, tr.nc2-cell-hl > td:first-child { outline: 3px solid #f59e0b !important; outline-offset: -3px; animation: nc2Pulse 1.2s ease-in-out 3; } @keyframes nc2Pulse { 50% { outline-color: #b45309; background: #ffe08a; } } @media (prefers-reduced-motion: reduce) { #notifSidebar.nc2 .nc2-solved-fill, #notifSidebar.nc2 .nc2-solved-txt, #notifSidebar.nc2 .nc2-stamp, td.nc2-cell-hl { animation: none !important; } #notifSidebar.nc2 .nc2-tick path { animation: none !important; stroke-dashoffset: 0; } #notifSidebar.nc2 .nc2-folding, #notifSidebar.nc2 .nc2-folding > *, #notifSidebar.nc2 .nc2-leaving { transition: none !important; } } /* ── daily briefing ─────────────────────────────────────────────────────── */ #notifBubble .nc2-mail { position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); animation: nc2MailIn .75s cubic-bezier(.2, .8, .2, 1) both; } #notifBubble .nc2-mail svg { width: 16px; height: 11px; } @keyframes nc2MailIn { 0% { opacity: 0; transform: translate(-34px, -44px) rotate(-22deg) scale(.5); } 60% { opacity: 1; transform: translate(2px, 2px) rotate(5deg) scale(1.08); } 100% { transform: none; } } #notifSidebar.nc2 #nc2Brief { background: transparent !important; } #notifSidebar.nc2 .nc2-bseal { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border-radius: 10px; text-align: left; cursor: pointer; font: 13px/1.35 var(--nc-sans); background: var(--nc-card) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-line2) !important; transition: border-color .15s, transform .15s; } #notifSidebar.nc2 .nc2-bseal:hover { border-color: var(--nc-mut) !important; transform: translateY(-1px); } #notifSidebar.nc2 .nc2-bseal svg { flex: none; width: 30px; height: 21px; } #notifSidebar.nc2 .nc2-bseal span { flex: 1; min-width: 0; background: transparent !important; color: var(--nc-ink) !important; } #notifSidebar.nc2 .nc2-bseal b { display: block; font-size: 13px; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bseal small { font-size: 11px; color: var(--nc-mut) !important; } #notifSidebar.nc2 .nc2-bseal i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ef4444 !important; } #notifSidebar.nc2 .nc2-mf { transform-box: fill-box; transform-origin: top center; transition: transform .28s cubic-bezier(.3, .7, .2, 1); } #notifSidebar.nc2 .nc2-bseal.nc2-opening .nc2-mf { transform: scaleY(-1); } #notifSidebar.nc2 .nc2-bseal.nc2-opening i { opacity: 0; transition: opacity .2s; } #notifSidebar.nc2 .nc2-bseal.nc2-opening span { opacity: .55; transition: opacity .25s; } #notifSidebar.nc2 .nc2-brief { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; border-color: var(--nc-line2); } #notifSidebar.nc2 .nc2-brief > div { background: transparent !important; } #notifSidebar.nc2 .nc2-bh { display: flex; align-items: flex-start; gap: 8px; } #notifSidebar.nc2 .nc2-bh > div { flex: 1; min-width: 0; background: transparent !important; } #notifSidebar.nc2 .nc2-bh small { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--nc-mut) !important; } #notifSidebar.nc2 .nc2-bh b { font-size: 15px; font-weight: 700; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bx { width: 22px; height: 22px; padding: 0; border-radius: 6px; font-size: 15px; line-height: 1; cursor: pointer; background: transparent !important; color: var(--nc-mut) !important; border: 0 !important; } #notifSidebar.nc2 .nc2-bx:hover { background: var(--nc-card2) !important; color: var(--nc-ink) !important; } #notifSidebar.nc2 .nc2-btiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } #notifSidebar.nc2 .nc2-btile { text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; background: var(--nc-card2) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-line) !important; transition: border-color .15s, transform .15s; } #notifSidebar.nc2 .nc2-btile:hover { border-color: var(--nc-line2) !important; transform: translateY(-1px); } #notifSidebar.nc2 .nc2-btile.nc2-on { border-color: var(--nc-ink2) !important; background: var(--nc-card) !important; } #notifSidebar.nc2 .nc2-btile b { display: block; font: 700 22px/1.1 var(--nc-sans); font-variant-numeric: tabular-nums; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-btile span { font-size: 11px; color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-blist { display: flex; flex-direction: column; border: 1px solid var(--nc-line); border-radius: 8px; overflow: hidden; } #notifSidebar.nc2 .nc2-blh { padding: 5px 10px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--nc-mut) !important; background: var(--nc-card2) !important; } #notifSidebar.nc2 .nc2-brow { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; text-align: left; cursor: pointer; font: 12.5px/1.35 var(--nc-sans); background: transparent !important; color: var(--nc-ink) !important; border: 0 !important; border-top: 1px solid var(--nc-line) !important; } #notifSidebar.nc2 .nc2-brow:hover { background: var(--nc-amber-bg) !important; } #notifSidebar.nc2 .nc2-bc { flex: none; font: 700 11.5px var(--nc-mono); color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bt small { display: block; font-weight: 400; font-size: 11px; overflow: hidden; text-overflow: ellipsis; color: var(--nc-mut) !important; } #notifSidebar.nc2 .nc2-bd { flex: none; font: 600 10.5px var(--nc-mono); color: var(--nc-ink2) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bd-arr { padding: 1px 8px; border-radius: 9px; font: 700 10.5px var(--nc-sans); background: var(--nc-ok-bg) !important; color: var(--nc-ok) !important; } #notifSidebar.nc2 .nc2-bnone { padding: 9px 10px; font-size: 12px; color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bfoot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } #notifSidebar.nc2 .nc2-blink { margin-right: auto; padding: 4px 0; cursor: pointer; font: 11.5px var(--nc-sans); text-decoration: underline; text-underline-offset: 2px; background: transparent !important; color: var(--nc-mut) !important; border: 0 !important; } #notifSidebar.nc2 .nc2-blink:hover { color: var(--nc-ink) !important; } #notifSidebar.nc2 .nc2-bmsg { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--nc-ink) !important; } #notifSidebar.nc2 .nc2-bmsg b { color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-bmsg span { color: var(--nc-ink2) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-brief.nc2-grow { overflow: hidden; animation: nc2Grow .52s cubic-bezier(.2, .8, .2, 1) both; } #notifSidebar.nc2 .nc2-grow .nc2-btile { animation: nc2Rise .42s cubic-bezier(.2, .7, .2, 1) both; } #notifSidebar.nc2 .nc2-grow .nc2-btile:nth-child(1) { animation-delay: .12s; } #notifSidebar.nc2 .nc2-grow .nc2-btile:nth-child(2) { animation-delay: .2s; } #notifSidebar.nc2 .nc2-grow .nc2-btile:nth-child(3) { animation-delay: .28s; } #notifSidebar.nc2 .nc2-grow .nc2-blist, #notifSidebar.nc2 .nc2-grow .nc2-bfoot { animation: nc2Fade .3s .36s both; } @keyframes nc2Grow { from { max-height: 54px; } to { max-height: 560px; } } @keyframes nc2Rise { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { #notifBubble .nc2-mail, #notifSidebar.nc2 .nc2-brief.nc2-grow, #notifSidebar.nc2 .nc2-grow .nc2-btile, #notifSidebar.nc2 .nc2-grow .nc2-blist, #notifSidebar.nc2 .nc2-grow .nc2-bfoot { animation: none !important; } } /* long comment text and long refs never push a card wider than the panel */ #notifSidebar.nc2 .nc2-ctext { overflow-wrap: anywhere; word-break: break-word; } #notifSidebar.nc2 .nc2-chd { flex-wrap: wrap; } #notifSidebar.nc2 .nc2-chd .nc2-myo { white-space: normal; overflow-wrap: anywhere; } /* ── settings (gear left of the x) ───────────────────────────────────────── */ #notifSidebar.nc2 .notif-sidebar-header h3 { flex: 1; } #notifSidebar.nc2 .nc2-gear { width: 26px; height: 26px; margin-right: 6px; padding: 0; border-radius: 6px; display: grid; place-items: center; cursor: pointer; background: rgba(255, 255, 255, .14) !important; color: rgba(255, 255, 255, .85) !important; border: 0 !important; } #notifSidebar.nc2 .nc2-gear:hover, #notifSidebar.nc2 .nc2-gear[aria-expanded="true"] { background: rgba(255, 255, 255, .28) !important; color: #fff !important; } #notifSidebar.nc2 .nc2-settings { flex: none; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--nc-card) !important; color: var(--nc-ink) !important; border-bottom: 1px solid var(--nc-line2); box-shadow: 0 6px 14px rgba(0, 0, 0, .18); font: 12.5px/1.4 var(--nc-sans); } #notifSidebar.nc2 .nc2-settings[hidden] { display: none !important; } #notifSidebar.nc2 .nc2-settings > div { background: transparent !important; } #notifSidebar.nc2 .nc2-set-h { display: flex; align-items: center; justify-content: space-between; } #notifSidebar.nc2 .nc2-set-h b { font-size: 13px; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-set-row { display: flex; align-items: center; gap: 12px; } #notifSidebar.nc2 .nc2-set-row > div { flex: 1; min-width: 0; background: transparent !important; } #notifSidebar.nc2 .nc2-set-row b { display: block; font-size: 12.5px; color: var(--nc-ink) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-set-row small { display: block; font-size: 11px; color: var(--nc-mut) !important; } #notifSidebar.nc2 .nc2-switch { flex: none; position: relative; width: 38px; height: 22px; padding: 0; border-radius: 11px; cursor: pointer; background: var(--nc-line2) !important; border: 0 !important; transition: background .2s; } #notifSidebar.nc2 .nc2-switch i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff !important; transition: transform .2s; } #notifSidebar.nc2 .nc2-switch[aria-checked="true"] { background: var(--nc-go) !important; } #notifSidebar.nc2 .nc2-switch[aria-checked="true"] i { transform: translateX(16px); } #notifSidebar.nc2 .nc2-set-sub { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 10px; padding: 8px 10px; border-radius: 8px; background: var(--nc-card2) !important; } #notifSidebar.nc2 .nc2-set-sub label { font-size: 11px; color: var(--nc-mut) !important; background: transparent !important; } #notifSidebar.nc2 .nc2-set-sub select { padding: 4px 6px; border-radius: 6px; font: 12px var(--nc-sans); background: var(--nc-card) !important; color: var(--nc-ink) !important; border: 1px solid var(--nc-line2) !important; } #notifSidebar.nc2 .nc2-set-sub > .nc2-btn { grid-column: 1 / -1; justify-self: start; } #notifSidebar.nc2 .nc2-seg2 { display: inline-flex; background: transparent !important; } #notifSidebar.nc2 .nc2-seg2 button { padding: 4px 12px; font: 600 11.5px var(--nc-sans); cursor: pointer; background: var(--nc-card) !important; color: var(--nc-ink2) !important; border: 1px solid var(--nc-line2) !important; } #notifSidebar.nc2 .nc2-seg2 button:first-child { border-radius: 6px 0 0 6px; } #notifSidebar.nc2 .nc2-seg2 button:last-child { border-radius: 0 6px 6px 0; border-left: 0 !important; } #notifSidebar.nc2 .nc2-seg2 button[aria-pressed="true"] { background: var(--nc-amber) !important; color: var(--nc-amber-ink) !important; border-color: var(--nc-amber) !important; } #notifSidebar.nc2 .nc2-dim2 { opacity: .5; } #notifSidebar.nc2 .nc2-set-note { font-size: 10.5px; color: var(--nc-mut) !important; } /* done bar: a clear light green in the light theme (it read as grey) */ [data-theme="light"] #notifSidebar.nc2 .nc2-done { background: #fff !important; border-color: #16a34a; } [data-theme="light"] #notifSidebar.nc2 .nc2-solved-fill { background: linear-gradient(90deg, #dcfce7, #bbf7d0) !important; border-right-color: #16a34a; } [data-theme="light"] #notifSidebar.nc2 .nc2-tick circle { fill: #fff; stroke: #16a34a; } [data-theme="light"] #notifSidebar.nc2 .nc2-tick path { stroke: #16a34a; } [data-theme="light"] #notifSidebar.nc2 .nc2-stamp { background: #fff !important; color: #15803d !important; border-color: #15803d !important; } [data-theme="light"] #notifSidebar.nc2 .nc2-solved-txt b { color: #14532d !important; } [data-theme="light"] #notifSidebar.nc2 .nc2-solved-txt small { color: #166534 !important; } /* slide with a GPU transform (no repaint of the panel per frame), hidden off-screen when closed */ #notifSidebar.nc2, #notifSidebar.nc2.visible { right: 0 !important; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s !important; will-change: transform; contain: layout style paint; backface-visibility: hidden; } #notifSidebar.nc2 { transform: translate3d(105%, 0, 0); visibility: hidden; } #notifSidebar.nc2.visible { transform: translate3d(0, 0, 0); visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s !important; } .notification-backdrop { transition: none !important; } @media (prefers-reduced-motion: reduce) { #notifSidebar.nc2, #notifSidebar.nc2.visible { transition: none !important; } } /* Tasks section: no dark header; title like "Needs your approval", then My tasks / Whole team + pager, then the cards */ #notifSidebar.nc2 #nc2Fut { display: flex; flex-direction: column; gap: 8px; } #notifSidebar.nc2 .fut-panel.fut-panel.fut-panel.nc2-fut { border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; } #notifSidebar.nc2 .nc2-fut .fut-hd { display: none !important; } #notifSidebar.nc2 .nc2-fut .fut-bar { padding: 0 0 8px !important; background: transparent !important; border: 0 !important; } #notifSidebar.nc2 .nc2-fut .fut-body { padding: 0 !important; background: transparent !important; border-radius: 0; }