Outlook Glow by TGekko

/* ==UserStyle==
@name        Outlook Glow
@namespace   outlook.com
@version     1.0.0
@license     MIT
@author      TGekko (https://www.tgekko.com/)
@description Make Outlook glow with simple beauty.
@var range tg-hue Hue [15, 0, 360, 1]
==/Userstyle== */

@-moz-document regexp("^https:\\/\\/[^\\/]*outlook\\..*$") {
 body {
  --tg-backlight: hsl(var(--tg-hue) 100% 5%);
  --tg-subtle: hsl(var(--tg-hue) 100% 15%);
  --tg-glow: hsl(var(--tg-hue) 100% 50%);
  background: var(--tg-backlight);
 }
 :where(body :not(.bYoTH)), .JCRRb:hover, .dPKNh.dnzWM {
  background: none !important;
  border-color: transparent !important;
 }
 #OwaTitleBar {
  margin: 0.5em 3em;
 }
 #OwaTitleBar, [role=dialog] > *, .ms-Checkbox-label, .Y0d3P {
  position: relative;
  background: var(--tg-backlight) !important;
 }
 .ms-Callout, .Y0d3P, [role=presentation]:has([role=menu]) {
  background: var(--tg-backlight) !important;
  box-shadow: 0 0 10rem var(--tg-glow);
 }
 .splitButtonContainer-217, .css-509, [class*=badge] {
  background: var(--tg-subtle) !important;
 }
 .Y0d3P {
  box-shadow: inset 0 0 1rem var(--tg-glow);
 }
 :where(#OwaTitleBar, [role=dialog] > *, .ms-Checkbox-label, .L72vd)::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 10rem var(--tg-glow);
  z-index: -2;
 }
 .ms-Checkbox-label::before {
  box-shadow: 0 0 0.4rem var(--tg-glow);
 }
 .yyYQP {
  will-change: auto;
 }
 .fui-FluentProviderr0 {
  --white: var(--black) !important;
  --neutralPrimarySurface: var(--tg-backlight) !important;
 }
 button {
  cursor: pointer !important;
 }
 #searchBoxId-Mail {
  box-shadow: none;
 }
 [role=search] {
  border-radius: 0;
  border-bottom: 1px solid var(--tg-subtle) !important;
 }
 .L72vd, .g_zET, [role=main] {
  overflow: visible;
 }
 .GciPK {
  backdrop-filter: none;
 }
 [style*="background-color: white !important"] * {
  visibility: visible;
 }
 [style*="background-color: white !important"] {
  visibility: hidden;
 }
 .nbmyu {
  overflow: hidden;
  overflow-y: hidden;
 }
 table {
  border: 1px solid hsla(var(--tg-hue) 100% 50% / 20%) !important;
 }
 tr > th {
  background: hsla(var(--tg-hue) 100% 50% / 20%) !important;
 }
 tr:not(:has(th)):nth-of-type(odd) > td {
  background: hsla(var(--tg-hue) 100% 50% / 10%) !important;
 }
}