Discord css

discocss/.config/discocss/custom.css

@@ -0,0 +1,138 @@
+:root {
+  --gruv-font-family: "Fira Code";
+  --gruv-font-size: 14px;
+
+  --gruv-bg-dark: #1d2021;
+  --gruv-bg-darkisher: #202020;
+  --gruv-bg-darkish: #222222;
+  --gruv-bg-normal: #282828;
+  --gruv-bg-brighter: #504945;
+
+  --gruv-border: #353331;
+
+  --gruv-fg-brighter: #fbf1c7;
+  --gruv-fg-normal: #ebdbb2;
+  --gruv-fg-darker: #d5c4a1;
+  --gruv-fg-dark: #a89984;
+  --gruv-fg-inactive: #696969;
+
+  --gruv-red: #fb4934;
+  --gruv-purple: #b16286;
+  --gruv-blue: #458588;
+  --gruv-green: #b8bb26;
+  --gruv-aqua: #83c07c;
+  --gruv-yellow: #fabd2f;
+  --gruv-orange: #fe8019;
+
+  --gruv-accent: var(--gruv-aqua);
+
+  --button: #daddee1a;
+}
+
+.theme-dark {
+  --header-primary: var(--gruv-fg-brighter);
+  --header-secondary: var(--gruv-fg-darker);
+  --text-normal: var(--gruv-fg-brighter);
+  --text-muted: var(--gruv-fg-darker);
+  --text-link: var(--gruv-accent);
+  --channels-default: var(--gruv-fg-darker);
+  --interactive-normal: var(--gruv-fg-darker);
+  --interactive-hover: var(--gruv-fg-brighter);
+  --interactive-active: var(--gruv-fg-brighter);
+  --interactive-muted: var(--gruv-fg-darker);
+  --background-primary: var(--gruv-bg-normal);
+  --background-secondary: var(--gruv-bg-darkish);
+  --background-secondary-alt: var(--gruv-bg-normal);
+  --background-tertiary: var(--gruv-bg-normal);
+  --background-accent: var(--gruv-accent);
+  --background-floating: var(--gruv-bg-normal);
+  --background-modifier-hover: rgba(79, 84, 92, 0.16);
+  --background-modifier-active: rgba(79, 84, 92, 0.24);
+  /*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/
+  --background-modifier-accent: rgba(0, 0, 0, 0);
+  --elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
+  --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+  --channeltextarea-background: var(--gruv-bg-normal);
+  --activity-card-background: var(--gruv-bg-darkish);
+  --deprecated-panel-background: var(--gruv-bg-dark);
+  --background-modifier-selected: var(--gruv-bg-normal);
+  --elevation-low: none !important;
+  --background-message-hover: var(--gruv-bg-darkish) !important;
+}
+
+* {
+  font-family: var(--gruv-font-family) !important;
+  font-weight: normal;
+  font-size: var(--gruv-font-size) !important;
+}
+
+/* Make channel list more compact */
+[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] {
+    height: 25px !important;
+}
+
+/* Chat content */
+[class*="chatContent"] [class*="form"] {
+  padding-top: 0.5rem;
+  background-color: var(--gruv-bg-normal);
+  box-shadow: 0 -20px 40px -20px #0000006e;
+}
+
+/* Chat profiles */
+img[class*="avatar"] {
+  border-radius: 20%;
+  overflow: hidden;
+  transition: filter 0.1s, transform 0.1s ease-in-out;
+}
+img[class*="avatar"]:hover {
+  transform: scale(1.1);
+}
+
+/* Live tag when streaming */
+[class*="live"][class*="textBadge"] {
+  background-color: var(--gruv-red) !important;
+  color: var(--gruv-fg-normal);
+}
+
+code.hljs:not(.inline)::before {
+	content: attr(class) !important;
+	float: right;
+	display: block;
+	width: auto;
+	max-width:  100px;
+	text-align: right;
+	min-width:  auto;
+	margin-top: -105px;
+	line-height: 20px;
+	overflow-x: hidden;
+	scrollbar-width: none;
+	color: var(--gruv-fg-darker);
+	opacity: 0.6;
+}
+
+
+/* Icons etc, sidebar stuff */
+[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] {
+    height: 25px !important;
+}
+
+[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] > * {
+    font-size: 15px !important;
+}
+
+[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] div[class*="iconContainer-"] svg {
+    color: var(--gruv-fg-darker) !important;
+}
+
+[class*="sidebar"] [class*="containerDefault"] [class*="iconVisibility-"] [class*="children-"]{
+    height: 25px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar,
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-track-handle,
+::-webkit-scrollbar-track-piece {
+  border-color: rgba(0, 0, 0, 0) !important;
+  background-color: rgba(0, 0, 0, 0) !important;
+}

discocss/.config/discocss/preload.js

@@ -0,0 +1,32 @@
+module.exports = () => {
+  const fs = require("fs");
+  const confDir = "/home/elal/.config/discocss";
+  const cssFile = "/home/elal/.config/discocss/custom.css";
+
+  function reload(style) {
+    style.innerHTML = fs.readFileSync(cssFile);
+  }
+
+  function inject({ document, window }) {
+    window.addEventListener("load", () => {
+      const style = document.createElement("style");
+      reload(style);
+      document.head.appendChild(style);
+
+      fs.watch(confDir, {}, () => reload(style));
+    });
+  }
+
+  inject(require("electron").webFrame.context);
+};
+
+module.exports.mw = (mainWindow) => {
+  mainWindow.setBackgroundColor("#00000000");
+};
+
+module.exports.mo = (options) => {
+  options.transparent = true;
+  if (process.platform === "linux") {
+    options.frame = true;
+  }
+};