From 5c9f09af139ce97175ba8f88bf7942b4f05f0b9a Mon Sep 17 00:00:00 2001 From: Leon Kowarschick Date: Tue, 2 Jun 2020 12:51:43 +0200 Subject: [PATCH] add custom discord theme --- files/.Xresources | 1 + .../.config/EnhancedDiscord/plugins/style.css | 2 +- .../EnhancedDiscord/plugins/style.css.bak | 57 +++++ .../configstore/update-notifier-npm.json | 2 +- files/.config/nitrogen/bg-saved.cfg | 4 +- files/.config/nitrogen/nitrogen.cfg | 2 +- files/.xmonad/.stack-work/stack.sqlite3 | Bin 323584 -> 323584 bytes files/.xmonad/lib/Config.hs | 3 +- files/custom_discord.css | 198 ++++++++++++++++++ 9 files changed, 263 insertions(+), 6 deletions(-) create mode 100644 files/.config/EnhancedDiscord/plugins/style.css.bak create mode 100644 files/custom_discord.css diff --git a/files/.Xresources b/files/.Xresources index 5b767d4..dd8d905 100644 --- a/files/.Xresources +++ b/files/.Xresources @@ -1,4 +1,5 @@ *.background: #282828 +color5: #ff0000 Xcursor.size: 16 Xcursor.theme: capitaine-cursors-light diff --git a/files/.config/EnhancedDiscord/plugins/style.css b/files/.config/EnhancedDiscord/plugins/style.css index 3cdcf73..3e4f5cb 100644 --- a/files/.config/EnhancedDiscord/plugins/style.css +++ b/files/.config/EnhancedDiscord/plugins/style.css @@ -27,7 +27,7 @@ /* unread indicators */ .theme-dark .unread-2OHH1w:not(.selected-nT-gM3):before { - background: transparent; + background: #282828; opacity: 0.5; height: 50px; width: 50px; diff --git a/files/.config/EnhancedDiscord/plugins/style.css.bak b/files/.config/EnhancedDiscord/plugins/style.css.bak new file mode 100644 index 0000000..3cdcf73 --- /dev/null +++ b/files/.config/EnhancedDiscord/plugins/style.css.bak @@ -0,0 +1,57 @@ +@import url(https://enhanceddiscord.com/theme.css); + +/* theme settings - uncomment (by removing the /*) and modify these lines in order to change things */ +:root { +/* --bg: url(https://i.imgur.com/ybRUHPc.jpg); /* background for the entire window. Almost everything is transparent to this image. */ +/* --bg-overlay: rgba(0, 0, 0, 0.8); /* overlay for the background. Generally, this should darken the picture to make text more readable. */ +/* --accent-color: #900; /* color of buttons, misc. text, etc. */ +/* --mention-color: #f00; /* color of mention text */ +/* --mention-bg: rgba(255, 0, 0, 0.15); /* mention background color */ +/* --mention-bgh: rgba(255, 0, 0, 0.4); /* mention backgroung while hovering over it */ +/* --link-color: #faa61a; /* color of all links */ +/* --link-color-hover: #fad61a; /* color of all links while hovering over them */ +/* --tag-color: #fff; /* text color of tags (bot tags and custom) */ +/* --tag-bg: rgba(255, 0, 0, 0.3); /* background of tags (bot tags and custom) */ +/* --popup-background: #222; /* background of modals, confirmation messages etc. */ +/* --popup-highlight: #333; /* color of headers and footers of "popouts" (linked to above) */ +/* --context-menu-bg: #333; /* color of context (right-click) menus. */ +/* --unread-color: #f00; /* color of unread/selected server indicators. */ +} + + +/* nitrofag badge */ +.profileBadgePremium-3kZ9Qj, .topSectionNormal-2-vo2m .profileBadgePremium-3kZ9Qj, +.profileBadgePremium-3kZ9Qj, .topSectionPlaying-1J5E4n .profileBadgePremium-3kZ9Qj { + background-image: url(https://discordapp.com/assets/9c252d28ca4980d65054a0258052983b.svg); +} + +/* unread indicators */ +.theme-dark .unread-2OHH1w:not(.selected-nT-gM3):before { + background: transparent; + opacity: 0.5; + height: 50px; + width: 50px; + left: 0px; + bottom: 0px; + top: 0px; + margin-top: 0; + border-radius: 50%; + border-top-right-radius: 5px; + border-bottom-left-radius: 5px; + /* box-shadow: 16px -16px 10px -14px #f00; */ + /* background: -webkit-radial-gradient(transparent 15px, #f00 25px, transparent 40px); */ + box-shadow: inset 0 0 12px 2px var(--unread-color); +} +.theme-dark .selected-nT-gM3:before { + background: var(--unread-color); +} +.theme-dark .unread-2OHH1w:hover::before { + border-radius: 15px; + border-top-right-radius: 5px; + border-bottom-left-radius: 5px; + transition: border-radius 150ms; +} +/* uncomment the following lines to hide gif picker */ +/*button[aria-label="Open GIF picker"] { + display: none; +}*/ diff --git a/files/.config/configstore/update-notifier-npm.json b/files/.config/configstore/update-notifier-npm.json index 788ee66..a0d60f7 100644 --- a/files/.config/configstore/update-notifier-npm.json +++ b/files/.config/configstore/update-notifier-npm.json @@ -1,4 +1,4 @@ { "optOut": false, - "lastUpdateCheck": 1590939768340 + "lastUpdateCheck": 1591026213722 } \ No newline at end of file diff --git a/files/.config/nitrogen/bg-saved.cfg b/files/.config/nitrogen/bg-saved.cfg index ac38ef2..392c7a3 100644 --- a/files/.config/nitrogen/bg-saved.cfg +++ b/files/.config/nitrogen/bg-saved.cfg @@ -1,9 +1,9 @@ [xin_1] -file=/home/leon/Bilder/wallpapers/abstract-barb-wires-blur-close-up-116021.jpg +file=/home/leon/Bilder/wallpapers/wallhaven-ox2gr9.jpg mode=5 bgcolor=#000000 [xin_0] -file=/home/leon/Bilder/wallpapers/abstract-barb-wires-blur-close-up-116021.jpg +file=/home/leon/Bilder/wallpapers/wallhaven-ox2gr9.jpg mode=5 bgcolor=#000000 diff --git a/files/.config/nitrogen/nitrogen.cfg b/files/.config/nitrogen/nitrogen.cfg index 285120a..c849ccf 100644 --- a/files/.config/nitrogen/nitrogen.cfg +++ b/files/.config/nitrogen/nitrogen.cfg @@ -1,7 +1,7 @@ [geometry] posx=20 posy=1130 -sizex=1246 +sizex=1689 sizey=1366 [nitrogen] diff --git a/files/.xmonad/.stack-work/stack.sqlite3 b/files/.xmonad/.stack-work/stack.sqlite3 index 9dbc3ddb6e4e407a74720eac6e4ac262469a3454..91e9cd8d6741335bf74e5376a33996a937434be6 100644 GIT binary patch delta 43 ycmZp8Al&dkc!D(JqKPujjEgoVB!6IHTsB!zz^M8AhxYFu7=f5+`}Ysboc{rzK@`0J delta 44 zcmZp8Al&dkc!D(JjEOSNj59VSB!6ILU|c#`QNXbI`-k@L9~gm{Y5VsN%$)xLq}CLu diff --git a/files/.xmonad/lib/Config.hs b/files/.xmonad/lib/Config.hs index 6affdbb..bb0f3a6 100644 --- a/files/.xmonad/lib/Config.hs +++ b/files/.xmonad/lib/Config.hs @@ -103,11 +103,12 @@ scratchpads :: [NamedScratchpad] scratchpads = [ NS "terminal" "termite --class sp_term" (className =? "sp_term") (customFloating $ W.RationalRect 0.66 0.7 0.34 0.3) , NS "spotify" "spotify" (appName =? "spotify") defaultFloating - , NS "discord" "discord" (appName =? "discord") defaultFloating , NS "whatsapp" launchWhatsapp (("WhatsApp" `isSuffixOf`) <$> title) defaultFloating , NS "slack" "slack" (("Slack | " `isPrefixOf`) <$> title) defaultFloating + , NS "discord" launchDiscord (appName =? "discord") defaultFloating ] launchWhatsapp = "gtk-launch chrome-hnpfjngllnobngcgfapefoaidbinmjnm-Default.desktop" +launchDiscord = "beautifuldiscord --css /home/leon/.config/beautifuldiscord/custom_discord.css" -- Colors ------ {{{ diff --git a/files/custom_discord.css b/files/custom_discord.css new file mode 100644 index 0000000..4aa0e09 --- /dev/null +++ b/files/custom_discord.css @@ -0,0 +1,198 @@ +:root { + /* ---- */ + --bg1: #282828; + --bg2: #222222; + --bg3: #1d2021; + --button: #daddee1a; + /* ---- */ + --fg2: #a89984; + --fg1: #fbf1c7; + --disabled: #696969; + /* ---- */ + --accent: #83c07c; + --accent2: #83a598; + --contrast: #ffffff; + /* ---- */ + + --red: #fb4934; + --purple: #b16286; + --blue: #458588; + --cyan: #7acfe4; + --green: #83c07c; + --yellow: #fabd2f; + --border1: #223344; + --border2: #334455; + -moz-tab-size: 2; +} + +.theme-dark { + --header-primary: var(--fg1); + --header-secondary: var(--fg2); + --text-normal: var(--fg1); + --text-muted: var(--fg2); + --text-link: var(--accent); + --channels-default: var(--fg2); + --interactive-normal: var(--fg2); + --interactive-hover: var(--fg1); + --interactive-active: var(--fg1); + --interactive-muted: var(--fg2); + --background-primary: var(--bg1); + --background-secondary: var(--bg2); + --background-secondary-alt: var(--bg1); + --background-tertiary: var(--bg1); + --background-accent: var(--accent); + --background-floating: var(--bg1); + --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(--bg1); + --activity-card-background: var(--bg2); + --deprecated-panel-background: var(--bg3); + --background-modifier-selected: var(--bg1); + --elevation-low: none !important; + --background-message-hover: var(--bg2) !important; +} + +::-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; +} + +[class*="peopleColumn"]{ + background-color: var(--bg2); +} + +[class*="section"]{ + background-color: var(--bg3); +} + +[class*="sidebar"] [class*="container"] [class*="header"] { + background-color: var(--bg1) !important; + box-shadow: 0 0 15px 0 rgba(0,0,0,0.2); +} + +[class*="sidebar"] > [class*="container"], +[class*="members"][class*="scroller"] { + box-shadow: inset 0 0 15px 0 rgba(0,0,0,0.2); +} + +[class*="scrollerWrap"] { + border-radius: 10px !important; +} + +[class*="membersWrap"] { + /*border-top-left-radius: 15px;*/ + overflow: hidden; +} + +[class*="chatContent"] [class*="form"]{ + padding-top: 0.5rem; + background-color: var(--bg1); + box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); +} + +[class*="textAreaSlate"] { + background-color: var(--bg3); + border-radius: 13px; + color: var(--fg-2); + box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); +} + +[class*="textAreaSlate"] > * { + padding-left: 1rem; + padding-right: 1rem; +} + +button[class*="lookFilled"] { + background-color: var(--button) !important; +} +button[class*="buttonActive"][class*="lookFilled"] { + background-color: var(--accent) !important; + color: var(--bg1) !important; +} + +button[class*="lookLink"] { + color: var(--fg1) !important; +} + +[class*="sprite"] { + filter: brightness(80%) sepia(80%) saturate(60%) !important; +} +[class*="username"] { + filter: sepia(30%) !important; + transition: filter 0.2s; +} +[class*="username"]:hover { + filter: sepia(20%) !important; +} + +img[class*="avatar"] { + filter: sepia(30%) !important; + transition: filter 0.1s, transform 0.1s ease-in-out; +} +img[class*="avatar"]:hover { + filter: sepia(0%) !important; + transform: scale(1.05); +} + +[class*="pictureInPictureWindow"] { + box-shadow: 0 8px 15px 0px rgba(0, 0, 0, 0.5) !important; +} + +[class*="divider"] { + border-color: var(--red) !important; +} + +[class*="unreadPill-"] { + background-color: var(--red); +} + +[class*="unreadPillCap"] { + fill: var(--red); +} +button[class*="lookFilled"] { + color: var(--fg1) !important; +} + +[class*="live"][class*="textBadge"] { + background-color: var(--red) !important; + color: var(--fg1); +} + +/*[class*="modal"] [class*="inner"] {*/ + /*background-color: var(--bg1) !important;*/ +/*}*/ +/*[class*="uploadModal"] {*/ + /*background-color: red !important;*/ +/*}*/ + +[class*="modal"] [class*="queryContainer-"], +[class*="modal"] [class*="resultsGroup-"], +[class*="modal"] [class*="bodyInner-"], +[class*="modal"] [class*="quickMessage-"], +[class*="modal"] [class*="inner-"], +[class*="modal"] [class*="header-"]:not(header):not(h2), +[class*="modal"] [class*="uploadModal-"] { + background-color: var(--bg1) !important; +} +[class*="modal"] [class*="footer-"] { + background-color: var(--bg3) !important; + filter: brightness(110%); +} + +/*[class*="mention"][class*="interactive"] {*/ + /*background-color: var(--green);*/ + /*color: var(--bg1);*/ +/*}*/ + + +[class*="panels"]>*:nth-child(2) { + height: 4.6rem; + padding-bottom: 0.5rem; +}