From af1c09c5279f9bd3bf29e5cc971fe7b09c956e93 Mon Sep 17 00:00:00 2001 From: "E. Almqvist" Date: Sun, 30 Oct 2022 20:23:58 +0100 Subject: [PATCH] Discord css --- discocss/.config/discocss/custom.css | 138 +++++++++++++++++++++++++++ discocss/.config/discocss/preload.js | 32 +++++++ 2 files changed, 170 insertions(+) create mode 100644 discocss/.config/discocss/custom.css create mode 100644 discocss/.config/discocss/preload.js diff --git a/discocss/.config/discocss/custom.css b/discocss/.config/discocss/custom.css new file mode 100644 index 0000000..b4c663e --- /dev/null +++ b/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; +} diff --git a/discocss/.config/discocss/preload.js b/discocss/.config/discocss/preload.js new file mode 100644 index 0000000..b6ba50d --- /dev/null +++ b/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; + } +};