Nord CSS for Facebook Messenger

nord.css

/* Copied from: https://github.com/ducfilan/Dark-mode-Franz-Ferdi */

:root,
.__fb-light-mode {
  --card-background: #2e3440;
  --comment-background: #3b4252;
  --comment-footer-background: #3b4252;
  --card-background-flat: #3b4252;
  --disabled-button-background: #434c5e;
  --divider: #3b4252;
  --hosted-view-selected-state: #1d2731;
  --hover-overlay: rgba(255, 255, 255, 0.05);
  --media-inner-border: rgba(255, 255, 255, 0.1);
  --messenger-card-background: #2e3440;
  --overlay-alpha-80: rgba(41, 41, 41, 0.8);
  --popover-background: #2e3440;
  --primary-icon: #eceff4;
  --primary-text: #eceff4;
  --scroll-thumb: #434c5eaa;
  --secondary-button-background: #3b4252;
  --secondary-icon: #d8dee9;
  --secondary-text: #d8dee9;
  --shadow-1: rgba(0, 0, 0, 0.3);
  --shadow-2: rgba(0, 0, 0, 0.4);
  --shadow-5: rgba(0, 0, 0, 0.7);
  --shadow-8: rgba(0, 0, 0, 1);
  --shadow-inset: rgba(000, 000, 000, 0.5);
  --surface-background: #2e3440;
  --wash: #434c5e;
  --web-wash: #2e3440;
}

html::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar {
  background: var(--popover-background);
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
}

body {
  color: var(--primary-text);
}

/* Delivered icon on left*/
.rq0escxv.l9j0dhe7.du4w35lb.j83agx80.cbu4d94t.pfnyh3mw.d2edcug0.hpfvmrgz.aovydwv3.p8cu3f6v.kb5gq1qc.taijpn5t.b0upgy8r
  path,
.l9j0dhe7.swg4t2nn path,
.a8c37x1j.ms05siws.hwsy1cff.b7h9ocf4 path {
  fill: var(--primary-text);
}

path[d='M0 36h36V0H0z'] {
  fill: none !important;
}

/* Icons */
path[d='M18 30c-6.627 0-12-5.372-12-12 0-6.627 5.373-12 12-12 6.628 0 12 5.373 12 12 0 6.628-5.372 12-12 12zm5.294-16.707l-7.296 7.295-3.254-3.252c-.352-.353-.919-.439-1.323-.148a1 1 0 00-.128 1.522l3.998 3.997a1 1 0 001.414 0l8.002-8.001a1 1 0 10-1.413-1.413z'] {
  fill: var(--secondary-text);
}

.sp_o5t_XtHjhxN_1_5x {
  filter: invert(0.8);
}

/* App download */
.oajrlxb2.q2y6ezfg.gcieejh5.bn081pho.humdl8nn.izx4hr6d.rq0escxv.nhd2j8a9.j83agx80.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.jb3vyjys.d1544ag0.qt6c0cv9.tw6a2znq.i1ao9s8h.esuyzwwr.f1sip0of.lzcic4wl.l9j0dhe7.abiwlrkh.p8dawk7l.beltcj47.p86d2i9g.aot14ch1.kzx2olss.cbu4d94t.taijpn5t.ni8dbmo4.stjgntxs.k4urcfbm.tv7at329 {
  background: var(--popover-background);
}

.sn0e7ne5 {
  box-shadow: var(--shadow-5) 0px 0px 2px;
}

/* Middle header */
.bafdgad4 {
  box-shadow: 0 0 4px var(--shadow-5);
}

/* Pop-up close icon */
.sp_GOPGoqMu6Pq_1_5x {
  filter: invert(0.8);
}

/* Feedback icons */
.sp_BQbKIpOzOAx_1_5x,
.sp_a51jIvPl6dA_1_5x {
  filter: invert(0.8);
}

/* Group video call icon */
svg.a8c37x1j.ms05siws.l3qrxjdp.b7h9ocf4.moj8do2t {
  fill: var(--primary-icon);
}

/* Fix for image view */
div.s45kfl79.emlxlaya.bkmhp75w.spb7xbtv.bp9cbjyn.rt8b4zig.n8ej3o3l.agehan2d.sk4xxmp2.rq0escxv.pq6dq46d.taijpn5t.l9j0dhe7.tdjehn4e.m7zwrmfr.tmrshh9y {
  background-color: var(--primary-icon);
}

div.oajrlxb2.qu0x051f.esr5mh6w.e9989ue4.r7d6kgcz.nhd2j8a9.p7hjln8o.kvgmc6g5.cxmmr5t8.oygrvhab.hcukyx3x.i1ao9s8h.esuyzwwr.f1sip0of.abiwlrkh.p8dawk7l.lzcic4wl.bp9cbjyn.s45kfl79.emlxlaya.bkmhp75w.spb7xbtv.rt8b4zig.n8ej3o3l.agehan2d.sk4xxmp2.rq0escxv.j83agx80.taijpn5t.jb3vyjys.rz4wbd8a.qt6c0cv9.a8nywdso.l9j0dhe7.qypqp5cg.q676j6op.tdjehn4e {
  background-color: var(--primary-icon);
}