set window control variables in friends themes

LaserFlash · Jun 17, 2023 · c1a3c67 · c1a3c67
1 parent f5f1a18
commit c1a3c67
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 41 deletions.
diff --git a/src/common/_window-control.scss b/src/common/_window-control.scss
@@ -5,6 +5,7 @@
   --window-control-bg-color-hover: #3d4450;
   --window-control-exit-bg-color: transparent;
   --window-control-exit-bg-color-hover: #e22a27;
+  --window-control-exit-icon-color-hover: --window-control-icon-color-hover;
 }
 
 $window-control-button-size: 22px;
@@ -47,7 +48,7 @@ $window-control-button-size: 22px;
       &.closeButton {
         &:hover {
           background-color: var(--window-control-exit-bg-color-hover);
-          color: var(--window-control-icon-color-hover);
+          color: var(--window-control-exit-icon-color-hover);
         }
       }
     }

diff --git a/src/friends-client/customisable/colourSet/blackMode.scss b/src/friends-client/customisable/colourSet/blackMode.scss
@@ -2,7 +2,7 @@
 @use 'common/functions' as *;
 @use 'common/variables-sass' as *;
 
-:root {
+.friendsui-container {
   /* Body Background Colours */
   --header: #{hex-to-rgb($black-primary)};
   --friendlist: #{hex-to-rgb($black-secondary)};
@@ -20,10 +20,6 @@
   --icon: #{hex-to-rgb($gray-500)};
   --iconhover: #{hex-to-rgb($white)};
 
-  /* Title Icon Background */
-  --titleiconbg: #{hex-to-rgb($gray-800)};
-  --titleiconhover: var(--iconhover);
-
   /* Status Colours */
   --ingame: #{hex-to-rgb($black-ingame)};
   --online: #{hex-to-rgb($black-online)};
@@ -44,7 +40,10 @@
   --scrollbar-secondary: var(--scrollbar-primary);
   --scrollbar-secondary-hover: var(--scrollbar-primary-hover);
 
-  /* Close Button */
-  --close-button: #{hex-to-rgb($red-close)};
-  --close-icon-hover: #{hex-to-rgb($white)};
+  /* Window Controls */
+  --window-control-icon-color: var(--icon);
+  --window-control-icon-color-hover: var(--iconhover);
+  --window-control-bg-color-hover: #{$gray-800};
+  --window-control-exit-bg-color-hover: #{$red-dark};
+  --window-control-exit-icon-color-hover: #{$white};
 }
diff --git a/src/friends-client/customisable/colourSet/darkMode.scss b/src/friends-client/customisable/colourSet/darkMode.scss
@@ -2,7 +2,7 @@
 @use 'common/functions' as *;
 @use 'common/variables-sass' as *;
 
-:root {
+.friendsui-container {
   /* Body Background Colours */
   --header: #{hex-to-rgb($dark-primary)};
   --friendlist: #{hex-to-rgb($dark-secondary)};
@@ -20,10 +20,6 @@
   --icon: #{hex-to-rgb($gray-500)};
   --iconhover: #{hex-to-rgb($white)};
 
-  /* Title Icon Background */
-  --titleiconbg: #{hex-to-rgb($gray-800)};
-  --titleiconhover: var(--iconhover);
-
   /* Status Colours */
   --ingame: #{hex-to-rgb($dark-ingame)};
   --online: #{hex-to-rgb($dark-online)};
@@ -44,7 +40,10 @@
   --scrollbar-secondary: var(--scrollbar-primary);
   --scrollbar-secondary-hover: var(--scrollbar-primary-hover);
 
-  /* Close Button */
-  --close-button: #{hex-to-rgb($red-close)};
-  --close-icon-hover: #{hex-to-rgb($white)};
+  /* Window Controls */
+  --window-control-icon-color: var(--icon);
+  --window-control-icon-color-hover: var(--iconhover);
+  --window-control-bg-color-hover: #{$gray-800};
+  --window-control-exit-bg-color-hover: #{$red-close};
+  --window-control-exit-icon-color-hover: #{$white};
 }
diff --git a/src/friends-client/customisable/colourSet/discordColours.scss b/src/friends-client/customisable/colourSet/discordColours.scss
@@ -2,7 +2,7 @@
 @use 'common/functions' as *;
 @use 'common/variables-sass' as *;
 
-:root {
+.friendsui-container {
   /* Body Background Colours */
   --header: #{hex-to-rgb($discord-primary)};
   --friendlist: #{hex-to-rgb($discord-secondary)};
@@ -20,10 +20,6 @@
   --icon: #{hex-to-rgb($gray-500)};
   --iconhover: #{hex-to-rgb($white)};
 
-  /* Title Icon Background */
-  --titleiconbg: #{hex-to-rgb($gray-800)};
-  --titleiconhover: var(--iconhover);
-
   /* Status Colours */
   --ingame: #{hex-to-rgb($discord-ingame)};
   --online: #{hex-to-rgb($discord-online)};
@@ -42,7 +38,10 @@
   --scrollbar-secondary: var(--friendlist);
   --scrollbar-secondary-hover: var(--friendlist);
 
-  /* Close Button */
-  --close-button: #{hex-to-rgb($red-close)};
-  --close-icon-hover: #{hex-to-rgb($white)};
+  /* Window Controls */
+  --window-control-icon-color: var(--icon);
+  --window-control-icon-color-hover: var(--iconhover);
+  --window-control-bg-color-hover: #{$gray-800};
+  --window-control-exit-bg-color-hover: #{$red-close};
+  --window-control-exit-icon-color-hover: #{$white};
 }
diff --git a/src/friends-client/customisable/colourSet/lightMode.scss b/src/friends-client/customisable/colourSet/lightMode.scss
@@ -2,7 +2,7 @@
 @use 'common/functions' as *;
 @use 'common/variables-sass' as *;
 
-:root {
+.friendsui-container {
   /* Body Background Colours */
   --header: #{hex-to-rgb($light-primary)};
   --friendlist: #{hex-to-rgb($light-secondary)};
@@ -20,10 +20,6 @@
   --icon: #{hex-to-rgb($gray-700)};
   --iconhover: #{hex-to-rgb($black)};
 
-  /* Title Icon Background */
-  --titleiconbg: #{hex-to-rgb($gray-300)};
-  --titleiconhover: var(--iconhover);
-
   /* Status Colours */
   --ingame: #{hex-to-rgb($light-ingame)};
   --online: #{hex-to-rgb($light-online)};
@@ -42,9 +38,11 @@
   --scrollbar-secondary: var(--scrollbar-primary);
   --scrollbar-secondary-hover: var(--scrollbar-primary-hover);
 
-  /* Close Button */
-  --close-button: #{hex-to-rgb($red-close)};
-  --close-icon-hover: #{hex-to-rgb($white)};
+  /* Window Controls */
+  --window-control-icon-color: var(--icon);
+  --window-control-icon-color-hover: var(--iconhover);
+  --window-control-bg-color-hover: #{$gray-100};
+  --window-control-exit-bg-color-hover: #{$red-close};
 }
 
 .client_chat_frame * {

diff --git a/src/friends-client/customisable/colourSet/steamColours.scss b/src/friends-client/customisable/colourSet/steamColours.scss
@@ -2,7 +2,7 @@
 @use 'common/functions' as *;
 @use 'common/variables-sass' as *;
 
-:root {
+.friendsui-container {
   /* Body Background Colours */
   --header: #{hex-to-rgb($steam-primary)};
   --friendlist: #{hex-to-rgb($steam-secondary)};
@@ -20,10 +20,6 @@
   --icon: #{hex-to-rgb($gray-500)};
   --iconhover: #{hex-to-rgb($white)};
 
-  /* Title Icon Background */
-  --titleiconbg: 30, 30, 31;
-  --titleiconhover: var(--iconhover);
-
   /* Status Colours */
   --ingame: #{hex-to-rgb($steam-ingame)};
   --online: #{hex-to-rgb($steam-online)};
@@ -44,7 +40,10 @@
   --scrollbar-secondary: var(--scrollbar-primary);
   --scrollbar-secondary-hover: var(--scrollbar-primary-hover);
 
-  /* Close Button */
-  --close-button: #{hex-to-rgb($red-dark)};
-  --close-icon-hover: #{hex-to-rgb($white)};
+  /* Window Controls */
+  --window-control-icon-color: var(--icon);
+  --window-control-icon-color-hover: var(--iconhover);
+  --window-control-bg-color-hover: rgb(30, 30, 31);
+  --window-control-exit-bg-color-hover: #{$red-dark};
+  --window-control-exit-icon-color-hover: #{$white};
 }