From 95fc0420bd345787f73cc7862fa6e26af69263e5 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 14 Jun 2022 05:53:27 -0700
Subject: [PATCH] tweaks to window-controls under linux

---
 src/renderer/less/helpers.less | 65 ++++++++---------------
 src/renderer/less/linux.less   | 53 +++++++++++++++++++
 src/renderer/style.less        | 96 ++++++++++++++--------------------
 3 files changed, 113 insertions(+), 101 deletions(-)

diff --git a/src/renderer/less/helpers.less b/src/renderer/less/helpers.less
index 86169ab2..1350f7f0 100644
--- a/src/renderer/less/helpers.less
+++ b/src/renderer/less/helpers.less
@@ -153,22 +153,8 @@
       }
 
       .close-btn {
-        width              : 50px;
-        height             : 100%;
-        background-image   : var(--gfx-closeBtn);
-        background-position: center;
-        background-repeat  : no-repeat;
-        -webkit-app-region : no-drag;
-        appearance         : none;
-        border             : 0;
-        background-color   : transparent;
-        position           : absolute;
-        top                : 0;
-        right              : 0;
+        .menu-panel.menu-header-text.close-btn
 
-        &:hover {
-          background-color: rgb(196, 43, 28)
-        }
       }
     }
   }
@@ -191,22 +177,7 @@
       }
 
       .close-btn {
-        width              : 50px;
-        height             : 100%;
-        background-image   : var(--gfx-closeBtn);
-        background-position: center;
-        background-repeat  : no-repeat;
-        -webkit-app-region : no-drag;
-        appearance         : none;
-        border             : 0;
-        background-color   : transparent;
-        position           : absolute;
-        top                : 0;
-        right              : 0;
-
-        &:hover {
-          background-color: rgb(196, 43, 28)
-        }
+        .menu-panel.menu-header-text.close-btn
       }
     }
 
@@ -371,23 +342,31 @@
     }
   }
 
-
   .menu-header-text {
     margin: 18px 6px;
 
     .close-btn {
-      width              : 50px;
-      height             : 42px;
-      background-image   : var(--gfx-closeBtn);
+      width: 36px;
+      height: 36px;
       background-position: center;
-      background-repeat  : no-repeat;
-      -webkit-app-region : no-drag;
-      appearance         : none;
-      border             : 0;
-      background-color   : transparent;
-      position           : absolute;
-      top                : 0;
-      right              : 0;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      appearance: none;
+      border: 0;
+      background-color: transparent;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      border-radius: 50px;
+      display: grid;
+      align-content: center;
+
+      &:before {
+        content: "";
+        font-family: "codicon";
+        color: var(--textColor);
+        font-size: 20px;
+      }
 
       &:hover {
         background-color: rgb(196, 43, 28)
diff --git a/src/renderer/less/linux.less b/src/renderer/less/linux.less
index dc0be238..777e9cd0 100644
--- a/src/renderer/less/linux.less
+++ b/src/renderer/less/linux.less
@@ -3,4 +3,57 @@ body[platform="linux"] {
     #window-controls-container {
         //display: none;
     }
+
+    .window-controls {
+        justify-content: flex-end;
+        align-items    : center;
+        padding-right  : 6px;
+
+        >div {
+            --iconSize: 16px;
+
+            &.close,
+            &.minmax,
+            &.minimize,
+            &.minmax.restore {
+                background-image: unset!important;
+                position        : relative;
+                display         : grid;
+                align-content   : center;
+                text-align      : center;
+                height          : 36px!important;
+                width           : 36px!important;
+                border-radius   : 50px;
+                transition: background-color .1s ease-in-out;
+
+                &:hover {
+                    background: rgb(200 200 200 / 10%)!important;
+                  }
+            }
+
+            &.close::before {
+                font-family: "codicon";
+                font-size  : var(--iconSize);
+                content    : "";
+            }
+
+            &.minmax::before {
+                font-family: "codicon";
+                font-size  : var(--iconSize);
+                content    : "";
+            }
+
+            &.minimize::before {
+                font-family: "codicon";
+                font-size  : var(--iconSize);
+                content    : "";
+            }
+
+            &.restore::before {
+                font-family: "codicon";
+                font-size  : var(--iconSize);
+                content    : "";
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 23bc4827..200735f0 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1163,52 +1163,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   &-macos {
     width: 100px;
   }
-}
 
-.app-chrome .app-chrome-item > .window-controls > div {
-  height: 100%;
-  width: 32px;
-}
-
-.app-chrome .app-chrome-item > .window-controls > div:hover {
-  background: rgb(200 200 200 / 10%);
-}
-
-.app-chrome .app-chrome-item > .window-controls > div.close {
-  width: 100%;
-  height: 100%;
-  background-image: var(--gfx-closeBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-
-  &:hover {
-    background-color: rgb(196, 43, 28)
+  > div {
+    height: 100%;
+    width: 32px;
+    &:hover {
+      background: rgb(200 200 200 / 10%);
+    }
+    &.close {
+      width: 100%;
+      height: 100%;
+      background-image: var(--gfx-closeBtn);
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+    
+      &:hover {
+        background-color: rgb(196, 43, 28)
+      }
+    }
+    &.minmax {
+      background-image: var(--gfx-maxBtn);
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      width: 100%;
+      height: 100%;
+    }
+    &.minmax.restore {
+      background-image: var(--gfx-restoreBtn);
+    }
+    &.minimize {
+      background-image: var(--gfx-minBtn);
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 
-.app-chrome .app-chrome-item > .window-controls > div.minmax {
-  background-image: var(--gfx-maxBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
-}
-
-.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
-  background-image: var(--gfx-restoreBtn);
-}
-
-.app-chrome .app-chrome-item > .window-controls > div.minimize {
-  background-image: var(--gfx-minBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
-}
-
 body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize {
   display: none;
 }
@@ -3478,22 +3473,7 @@ body.no-gpu {
       }
 
       .close-btn {
-        width: 50px;
-        height: 100%;
-        background-image: var(--gfx-closeBtn);
-        background-position: center;
-        background-repeat: no-repeat;
-        -webkit-app-region: no-drag;
-        appearance: none;
-        border: 0;
-        background-color: transparent;
-        position: absolute;
-        top: 0;
-        right: 0;
-
-        &:hover {
-          background-color: rgb(196, 43, 28)
-        }
+        .menu-panel.menu-header-text.close-btn
       }
     }