feat: v3.4.0 (#20)

Co-authored-by: Evan Paterakis <[email protected]>

.github/workflows/compile.yml

@@ -23,18 +23,26 @@ jobs:
       - name: Install the csso
         run: npm install -g csso-cli
       - name: Compile Less
-        run: lessc ./src/DNOME.less ./dist/DNOME.css
+        run: |
+          lessc ./src/DNOME.less ./dist/DNOME.css
+          for accent in blue green orange pink purple red slate teal yellow; do
+            echo "@accent_name: \"$accent\";" > ./src/override_accent.less
+            lessc ./src/DNOME.less ./dist/DNOME-$accent.css
+          done
+          rm -f ./src/override_accent.less
       - name: Optimize CSS
         run: |
           csso ./dist/DNOME.css -o ./dist/DNOME.css --comments none --stat
+          for accent in blue green orange pink purple red slate teal yellow; do
+            csso ./dist/DNOME-$accent.css -o ./dist/DNOME-$accent.css --comments none --stat
+          done
           
           # csso downcases some pseudo content
           # escaped characters
-          sed -i 's/\\a/\\A/g' ./dist/DNOME.css
+          sed -i 's/\\a/\\A/g' ./dist/*.css
       - uses: actions/upload-artifact@v3
         with:
-          name: DNOME
-          path: ./dist/DNOME.css
+          path: ./dist/
   push:
     if: "!contains(github.event.head_commit.message, '[skip-ci]')"
     needs: [ compile ]
@@ -46,10 +54,12 @@ jobs:
           ref: dist
       - uses: actions/download-artifact@v3
         with:
-          name: DNOME
+          path: ./dnome/
       - name: Commit files
         run: |
-          git add -f ./DNOME.css
+          mv ./dnome/**/*.css ./
+          rm -rf ./dnome/
+          git add -f './*.css'
           git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"
           git commit -am "chore: compile latest changes"

.gitignore

@@ -1,2 +1,3 @@
-dist/DNOME.css
+dist/
 src/modules/variables/gtk.less
+src/override_accent.less

README.md

@@ -71,13 +71,13 @@ BetterDiscord requires a non-CSS META tag and a specific suffix on the filename.
 
 ## Compiling
 
-## Web
+### Web
 
 You can compile DNOME from your browser!
 
 Visit https://dnome.geopjr.dev/ and follow the instructions.
 
-## Manually
+### Manually
 
 - Install [Less](https://lesscss.org/)
 - Run one of the following commands:
@@ -89,7 +89,7 @@ $ lessc ./src/DNOME.less ./dist/DNOME.css
 ```
 - Done, the theme should be available at `./dist/DNOME.css`
 
-### GTK Themes
+#### GTK Themes
 
 You can use colors from your current GTK theme by running:
 
@@ -104,6 +104,22 @@ and then compiling DNOME again.
 > **Warning**
 > Manually set your Discord theme in settings to the one matching your GTK theme (Dark/Light). DNOME doesn't override everything on Discord but rather enhance it.
 
+## Colors
+
+You can change the accent color to match one of the Adwaita named ones.
+
+### Manually
+
+- Change the `@accent_name` variable in [./src/DNOME.less](./src/DNOME.less) to the one you want
+- Recompile
+
+### Pre-Compiled
+
+They have been pre-compiled alongside the main stylesheet under [`dist`](https://github.com/GeopJr/DNOME/tree/dist).
+
+### Web
+
+Visit https://dnome.geopjr.dev/ and follow the instructions.
 
 ## Sponsors
 

src/DNOME.less

@@ -1,5 +1,7 @@
+@accent_name: "blue"; // blue, green, orange, pink, purple, red, slate, teal, yellow
+
 // DNOME version (can be seen in Discord settings).
-@version: "3.3.2";
+@version: "3.4.0";
 
 // The way Discord loads channels in the sidebar
 // depends on the channel tab height, making it
@@ -17,6 +19,7 @@
 // https://geopjr.dev/donate
 @attribution: true;
 
+@import (optional) "override_accent.less";
 // The CSS variables for light and dark mode.
 @import "modules/variables/index.less";
 

src/modules/attribution.less

@@ -7,7 +7,7 @@ div[class*="layer_"] {
         >div[class*="sidebarRegion_"] {
             >div[class*="sidebarRegionScroller_"] {
                 >nav[class*="sidebar_"] {
-                    >div[class*="side_"]>div[class*="clickTarget_"]>div[class*="copiableWrapper_"]>div[class*="childWrapper_"] {
+                    >div[class*="side_"]>div[class*="clickable_"] {
                         >div[class*="info_"] {
                             background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='85' height='85' viewBox='0 0 22.49 22.49'%3E%3Cpath fill-opacity='.1' d='M13.23 0a13.23 13.23 0 1 0 0 26.46 13.23 13.23 0 0 0 4.01-.64v-3.1a10.32 10.32 0 0 1-4 .83 10.32 10.32 0 1 1 0-20.64A10.32 10.32 0 0 1 22.9 16.8h3.06A13.23 13.23 0 0 0 13.23 0zM6.35 6.09a11.7 11.7 0 0 0-2.9 6.35v.26c.52.26 4.23 3.7 9.25 1.85 2.12-.8 3.44.27 5.03 1.32l.53.27-2.12 6.61.53-.26.53-.27 5.03-13.49h-.53c-1.06-1.06-1.59-1.85-2.91-2.38-1.85-.8-3.44.8-5.03 1.32-2.64.53-5.03.27-7.14-1.06l-.27-.52zm-2.9 6.87v.53l.52 1.33c1.06 2.64 4.24 3.7 6.62 3.17 1.32 0 1.58.27 2.38.53h.26l-1.32 4.5a2.38 2.38 0 0 0 .8 0l2.9-7.94-.53-.26c-1.32-.53-2.38.26-3.7.53-3.44.53-5.56-.27-7.94-2.39z'/%3E%3C/svg%3E"), linear-gradient(to bottom, #5ccefa, #5ccefa 20%, #f6a8b7 20%, #f6a8b7 40%, #fff 40%, #fff 60%, #f6a8b7 60%, #f6a8b7 80%, #5ccefa 80%, #5ccefa);
                             background-position: right bottom, center center;
@@ -39,8 +39,9 @@ div[class*="layer_"] {
                             margin-bottom: 1rem;
                         }
 
+                        flex-direction: column;
                         &:after {
-                            content: "Made by queer.software & GeopJr with 💖 (and lots of CSS)\A\Ahttps://queer.software/\Ahttps://geopjr.dev/";
+                            content: "Made by GeopJr with 💖 (and lots of CSS)\A\Ahttps://geopjr.dev/";
                             white-space: pre-wrap;
                             color: var(--text-normal);
                             font-weight: bold;

src/modules/main/chat/message_bar.less

@@ -7,6 +7,9 @@ div[class*="chat_"] {
     }
 
     form[class*="form_"] {
+        &::before {
+            height: 0px;
+        }
 
         div[class*="submitContainer_"]>div[class*="channelTextArea_"],
         >div[class*="channelTextArea_"] {

src/modules/nitro.less

@@ -24,8 +24,18 @@ div[aria-controls="GUILD_PREMIUM-tab"] {
 // Removes the gift button
 // from the message bar.
 div[class*="channelBottomBarArea_"] div[class*="buttons_"] {
-  >button[class*="colorBrand_"]:not([class*="expression_"]) {
-    display: none;
+  button[class*="colorBrand_"]:not([class*="expression_"]) {
+
+    &[aria-label*="gift"],
+    &[aria-label*="Gift"] {
+      display: none;
+    }
+
+    @supports selector(:has(*)) {
+      &:has(div[class*="giftIconButton_"]) {
+        display: none;
+      }
+    }
   }
 }
 

src/modules/variables/accents.less

@@ -0,0 +1,12 @@
+@blue: #3584e4;
+@green: #3a944a;
+@orange: #ed5b00;
+@pink: #d56199;
+@purple: #9141ac;
+@red: #e62d42;
+@slate: #6f8396;
+@teal: #2190a4;
+@yellow: #c88800;
+
+@accent: @@accent_name;
+@accent-light: @@accent_name;

src/modules/variables/css.less

@@ -49,6 +49,7 @@
     --home-background: var(--bg-overlay-2);
     --mention-background: fade(@accent, 40%);
     --mention-foreground: lighten(@accent, 30%);
+    --bg-brand: var(--dnome-accent);
 
     --dnome-base: @base;
     --dnome-bg: @bg;
@@ -120,6 +121,7 @@
     --home-background: var(--bg-overlay-2);
     --mention-background: fade(@accent-light, 20%);
     --mention-foreground: darken(@accent-light, 10%);
+    --bg-brand: var(--dnome-accent);
 
     --dnome-base: @base-light;
     --dnome-bg: @bg-light;

src/modules/variables/index.less

@@ -6,5 +6,6 @@
 // calculate colors.
 @import "dark.less";
 @import "light.less";
+@import "accents.less";
 @import (optional) "gtk.less";
 @import "css.less";

web/index.html

@@ -27,6 +27,17 @@
 <body>
   <main>
     <h1>DNOME-Builder</h1>
+    <div class="accents">
+      <input type="radio" name="accent" style="--radio-accent:#3584e4" value="blue" checked />
+      <input type="radio" name="accent" style="--radio-accent:#2190a4" value="teal" />
+      <input type="radio" name="accent" style="--radio-accent:#3a944a" value="green" />
+      <input type="radio" name="accent" style="--radio-accent:#c88800" value="yellow" />
+      <input type="radio" name="accent" style="--radio-accent:#ed5b00" value="orange" />
+      <input type="radio" name="accent" style="--radio-accent:#e62d42" value="red" />
+      <input type="radio" name="accent" style="--radio-accent:#d56199" value="pink" />
+      <input type="radio" name="accent" style="--radio-accent:#9141ac" value="purple" />
+      <input type="radio" name="accent" style="--radio-accent:#6f8396" value="slate" />
+    </div>
     <article>
       <p>You can find your GTK theme under <code>~/.config/gtk-4.0/gtk.css</code>.<br />Leave the entry empty to not use
         the custom GTK theme feature.</p>

web/main.js

@@ -9,11 +9,16 @@ const result = document.getElementById("result")
 const gtk = document.getElementById("gtk")
 
 compile_btn.onclick = () => {
+  let accent_name = "blue"
+  const checked_accent = document.querySelector('input[name="accent"]:checked')
+  if (checked_accent) accent_name = checked_accent.value
+
   compile_btn.disabled = true
   result.style.display = "none"
   progress.innerText = "Compiling..."
   let less_input = "@import \"DNOME.less\";"
 
+  less_input += `@accent_name: "${accent_name}";`
   if (gtk.value != "") {
     const gtk_variables = Utils.get_gtk_colors(gtk.value)
     const less = Utils.generate_less(gtk_variables)

web/package.json

@@ -14,5 +14,6 @@
     "less": "^4.1.3",
     "vite": "^4.3.9",
     "vite-plugin-static-copy": "^0.15.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.38dc6fba8dba35b39340b9700112c2fe1e12f10b17134715a4aa98ccf7bb035e76fd981cf0bb384dfa98f8d6af5481c2bef2f4266a24bfa20c34eb7147ce0b5e"
 }