foreglow.css

/* Foreglow Firefox Theme */
/* Install in chrome/userChrome.css */

:root {
  --bg: #161221 !important;
  --bg-alt: #1D182A !important;
  --bg-hover: #281F3D !important;
  --fg: #E8E3F2 !important;
  --fg-dim: #A49BBF !important;
  --comment: #736699 !important;
  --keyword: #CB81E4 !important;
  --string: #ED9F82 !important;
  --function: #EC93BF !important;
  --type: #75C6D7 !important;
  --accent: #F471C8 !important;
  --border: #322C44 !important;
  --error: #E46772 !important;
  --warning: #F2A65A !important;
  --success: #6BC7A8 !important;

  color-scheme: dark;

  --lwt-text-color: var(--fg) !important;
  --lwt-toolbarbutton-icon-fill: var(--fg) !important;
  --toolbar-color: var(--fg) !important;
  --toolbar-bgcolor: var(--bg) !important;
  --tab-text-color: var(--fg-dim) !important;
  --tab-selected-textcolor: var(--fg) !important;

  --panel-background: var(--bg-alt) !important;
  --panel-color: var(--fg) !important;
  --arrowpanel-background: var(--bg-alt) !important;
  --arrowpanel-color: var(--fg) !important;
  --arrowpanel-border-color: var(--border) !important;

  --autocomplete-popup-background: var(--bg-alt) !important;
  --autocomplete-popup-color: var(--fg) !important;
  --autocomplete-popup-highlight-background: var(--bg-hover) !important;
  --autocomplete-popup-highlight-color: var(--fg) !important;
}

menupopup,
menubar,
menu,
menuitem,
panel,
panelview,
.panel-arrowcontent,
tooltip,
#nav-bar,
#TabsToolbar,
#toolbar-menubar,
#PersonalToolbar,
.bookmark-item,
#urlbar-background,
#findbar-textbox,
.tabbrowser-tab {
  -moz-appearance: none !important;
}

#nav-bar,
#TabsToolbar,
#toolbar-menubar {
border-color: var(--border) !important;
color: var(--fg) !important;
}

.toolbarbutton-icon {
  fill: var(--fg) !important;
}


:root {
  --starfield-color: #ffffff;
  --starfield-opacity: 0.5;
}

#navigator-toolbox {
background-color: var(--bg) !important;
position: relative;
z-index: 0;
overflow: hidden;
}

#navigator-toolbox::before,
#navigator-toolbox::after {
content: ".";
position: absolute;
top: 0;
left: 0;
color: transparent;
font-family: monospace;
pointer-events: none;
z-index: -1;
}

#navigator-toolbox::before {
font-size: 11px;
text-shadow:
926px 122px 1px var(--starfield-color),
1040px 51px 0px var(--starfield-color),
1646px 134px 1px var(--starfield-color),
1289px 50px 0px var(--starfield-color),
914px 80px 0px var(--starfield-color),
185px 13px 1px var(--starfield-color),
811px 118px 1px var(--starfield-color),
1331px 43px 1px var(--starfield-color),
30px 19px 0px var(--starfield-color),
73px 51px 0px var(--starfield-color),
1228px 10px 1px var(--starfield-color),
668px 115px 1px var(--starfield-color),
1725px 53px 1px var(--starfield-color),
478px 78px 1px var(--starfield-color),
9px 24px 1px var(--starfield-color),
1341px 74px 1px var(--starfield-color),
1128px 24px 0px var(--starfield-color),
645px 61px 1px var(--starfield-color),
591px 10px 0px var(--starfield-color),
1153px 30px 1px var(--starfield-color),
220px 77px 1px var(--starfield-color),
136px 7px 0px var(--starfield-color),
437px 56px 0px var(--starfield-color),
962px 99px 1px var(--starfield-color),
859px 21px 1px var(--starfield-color),
1289px 53px 0px var(--starfield-color),
689px 25px 0px var(--starfield-color),
681px 6px 1px var(--starfield-color),
1552px 33px 0px var(--starfield-color),
504px 28px 0px var(--starfield-color),
122px 122px 1px var(--starfield-color),
363px 51px 1px var(--starfield-color),
1042px 51px 0px var(--starfield-color),
858px 101px 0px var(--starfield-color),
808px 110px 0px var(--starfield-color),
0px 72px 1px var(--starfield-color),
622px 8px 0px var(--starfield-color),
383px 103px 1px var(--starfield-color),
1314px 28px 0px var(--starfield-color),
299px 57px 1px var(--starfield-color),
528px 5px 1px var(--starfield-color),
673px 78px 1px var(--starfield-color),
150px 22px 0px var(--starfield-color),
427px 65px 0px var(--starfield-color),
1231px 97px 0px var(--starfield-color),
1274px 119px 0px var(--starfield-color),
1202px 126px 1px var(--starfield-color),
277px 101px 0px var(--starfield-color),
1284px 42px 0px var(--starfield-color),
467px 66px 0px var(--starfield-color),
324px 53px 1px var(--starfield-color),
988px 23px 1px var(--starfield-color),
97px 29px 0px var(--starfield-color),
79px 134px 0px var(--starfield-color),
488px 103px 0px var(--starfield-color),
861px 128px 0px var(--starfield-color),
1065px 47px 0px var(--starfield-color),
258px 61px 1px var(--starfield-color),
1145px 21px 0px var(--starfield-color),
434px 55px 0px var(--starfield-color),
141px 71px 1px var(--starfield-color),
912px 66px 0px var(--starfield-color),
95px 48px 0px var(--starfield-color),
755px 36px 0px var(--starfield-color),
741px 38px 1px var(--starfield-color),
677px 136px 1px var(--starfield-color),
287px 11px 0px var(--starfield-color),
972px 94px 0px var(--starfield-color),
68px 8px 1px var(--starfield-color),
1302px 22px 1px var(--starfield-color),
137px 82px 0px var(--starfield-color),
279px 21px 0px var(--starfield-color),
927px 97px 0px var(--starfield-color),
1509px 36px 0px var(--starfield-color),
720px 24px 1px var(--starfield-color),
159px 109px 0px var(--starfield-color),
1768px 130px 1px var(--starfield-color),
29px 100px 1px var(--starfield-color),
1193px 6px 1px var(--starfield-color),
147px 23px 0px var(--starfield-color),
1309px 32px 0px var(--starfield-color),
852px 87px 1px var(--starfield-color),
1505px 120px 1px var(--starfield-color),
947px 24px 1px var(--starfield-color),
1536px 134px 0px var(--starfield-color),
635px 25px 1px var(--starfield-color),
45px 61px 0px var(--starfield-color),
1018px 127px 0px var(--starfield-color),
23px 97px 0px var(--starfield-color),
293px 54px 1px var(--starfield-color),
347px 90px 1px var(--starfield-color),
1020px 64px 0px var(--starfield-color),
828px 67px 0px var(--starfield-color),
1298px 113px 0px var(--starfield-color),
438px 101px 0px var(--starfield-color),
1194px 84px 0px var(--starfield-color),
278px 37px 1px var(--starfield-color),
718px 13px 0px var(--starfield-color),
566px 46px 0px var(--starfield-color),
922px 123px 0px var(--starfield-color);
animation: foreglow-twinkle-dim 5.5s ease-in-out infinite alternate;
}

#navigator-toolbox::after {
content: "*";
font-size: 13px;
text-shadow:
287px 65px 0px var(--starfield-color),
1255px 117px 0px var(--starfield-color),
1437px 33px 0px var(--starfield-color),
1623px 23px 0px var(--starfield-color),
551px 15px 0px var(--starfield-color),
1231px 48px 1px var(--starfield-color),
1403px 113px 0px var(--starfield-color),
1181px 8px 1px var(--starfield-color),
540px 82px 1px var(--starfield-color),
389px 49px 0px var(--starfield-color),
1193px 18px 0px var(--starfield-color),
1254px 88px 0px var(--starfield-color),
377px 103px 0px var(--starfield-color),
1599px 134px 0px var(--starfield-color),
572px 72px 0px var(--starfield-color),
884px 15px 0px var(--starfield-color),
1089px 11px 1px var(--starfield-color),
515px 132px 0px var(--starfield-color),
1059px 107px 1px var(--starfield-color),
1353px 50px 0px var(--starfield-color),
1153px 98px 1px var(--starfield-color),
1193px 9px 0px var(--starfield-color),
1178px 137px 1px var(--starfield-color),
1551px 112px 0px var(--starfield-color),
185px 116px 0px var(--starfield-color),
201px 113px 1px var(--starfield-color),
118px 53px 1px var(--starfield-color),
488px 105px 0px var(--starfield-color),
197px 120px 0px var(--starfield-color),
351px 10px 1px var(--starfield-color),
770px 92px 0px var(--starfield-color),
672px 94px 0px var(--starfield-color),
908px 12px 0px var(--starfield-color),
1096px 37px 0px var(--starfield-color),
1342px 28px 0px var(--starfield-color),
399px 108px 0px var(--starfield-color),
1695px 40px 1px var(--starfield-color),
943px 14px 0px var(--starfield-color),
1020px 137px 0px var(--starfield-color),
1197px 75px 1px var(--starfield-color),
975px 19px 0px var(--starfield-color),
1605px 31px 1px var(--starfield-color),
530px 33px 0px var(--starfield-color),
382px 131px 0px var(--starfield-color),
1299px 19px 0px var(--starfield-color),
199px 46px 1px var(--starfield-color),
889px 71px 0px var(--starfield-color),
85px 22px 0px var(--starfield-color),
721px 33px 0px var(--starfield-color),
1094px 68px 1px var(--starfield-color),
1773px 20px 0px var(--starfield-color),
47px 73px 0px var(--starfield-color),
1189px 123px 1px var(--starfield-color),
425px 106px 0px var(--starfield-color),
240px 137px 0px var(--starfield-color);
animation: foreglow-twinkle-bright 3.4s ease-in-out infinite alternate;
animation-delay: -1.7s;
}

@keyframes foreglow-twinkle-dim {
  from { opacity: calc(0.15 * var(--starfield-opacity) / 0.5); }
  to   { opacity: calc(0.5 * var(--starfield-opacity) / 0.5); }
}

@keyframes foreglow-twinkle-bright {
  from { opacity: calc(0.35 * var(--starfield-opacity) / 0.5); }
  to   { opacity: calc(0.9 * var(--starfield-opacity) / 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  #navigator-toolbox::before,
  #navigator-toolbox::after {
  animation: none;
  opacity: calc(0.35 * var(--starfield-opacity) / 0.5);
  }
}

#tabbrowser-tabs {
background-color: transparent !important;
}

.tabbrowser-tab {
  background-color: var(--bg-alt) !important;
  color: var(--fg-dim) !important;
  border-color: var(--border) !important;
}

.tabbrowser-tab[selected="true"] {
  background-color: var(--bg) !important;
  color: var(--fg) !important;
  border-top-color: var(--accent) !important;
}

.tabbrowser-tab:hover {
  background-color: var(--bg-hover) !important;
}

#urlbar-background {
background-color: var(--bg-alt) !important;
border-color: var(--border) !important;
}

#urlbar-input {
color: var(--fg) !important;
}

#urlbar-input-box,
.urlbar-icon,
.identity-box {
  color: var(--fg) !important;
  fill: var(--fg) !important;
}

.urlbarView,
.urlbarView-row,
.urlbarView-row-inner {
  background-color: var(--bg-alt) !important;
  color: var(--fg) !important;
}

.urlbarView-row[selected],
.urlbarView-row:hover {
  background-color: var(--bg-hover) !important;
}

.urlbarView-title,
.urlbarView-url,
.urlbarView-secondary {
  color: var(--fg) !important;
}

#sidebar-box {
background-color: var(--bg-alt) !important;
color: var(--fg) !important;
}

#sidebar-splitter {
border-color: var(--border) !important;
}

#PersonalToolbar {
background-color: transparent !important;
border-color: var(--border) !important;
}

#PersonalToolbar .bookmark-item,
#PersonalToolbar toolbarbutton {
color: var(--fg) !important;
}

#PersonalToolbar .bookmark-item:hover,
#PersonalToolbar toolbarbutton:hover {
background-color: var(--bg-hover) !important;
}

#PlacesToolbar menupopup[placespopup="true"] {
--arrowpanel-background: var(--bg-alt) !important;
--arrowpanel-color: var(--fg) !important;
}

menupopup,
menubar,
menu,
menuitem {
  background-color: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}

menuitem:hover {
  background-color: var(--bg-hover) !important;
}

.context-menu,
menupopup > menu,
menupopup > menuitem {
  background-color: var(--bg-alt) !important;
  color: var(--fg) !important;
}

panel,
panelview,
.panel-arrowcontent,
#appMenu-protonMainView,
#appMenu-libraryView {
background-color: var(--bg-alt) !important;
color: var(--fg) !important;
border-color: var(--border) !important;
}

toolbarbutton.subviewbutton:hover,
.subviewbutton:hover {
  background-color: var(--bg-hover) !important;
}

scrollbar {
  background-color: var(--bg) !important;
}

scrollcorner {
  background-color: var(--bg) !important;
}

scrollbar thumb {
  background-color: var(--border) !important;
  border-color: var(--bg-alt) !important;
}

scrollbar thumb:hover {
  background-color: var(--bg-hover) !important;
}

.browserContainer {
  background-color: var(--bg) !important;
}

#findbar {
background-color: var(--bg-alt) !important;
border-color: var(--border) !important;
color: var(--fg) !important;
}

#findbar-textbox {
background-color: var(--bg) !important;
color: var(--fg) !important;
border-color: var(--border) !important;
}

.findbar-button {
  color: var(--fg) !important;
}

.findbar-button:hover {
  background-color: var(--bg-hover) !important;
}

#downloadsListBox {
background-color: var(--bg-alt) !important;
}

#downloadsListBox richlistitem {
color: var(--fg) !important;
}

#downloadsPanel {
background-color: var(--bg-alt) !important;
color: var(--fg) !important;
}

tooltip {
  background-color: var(--bg-alt) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}