Update js and css

usr/share/bigbashview/framework/css/biglinux.css

@@ -180,7 +180,28 @@ button{
 .min-height-2em{min-height: 2em}
 .min-height-2_4em{min-height: 3em}
 .min-height-3em{min-height: 3em}
+.min-height-full-less-6em{min-height: calc(100vh - 6em)}
+
+.min-width-40em{min-width: 40em}
+.min-width-50em{min-width: 50em}
 .min-width-60em{min-width: 60em}
+.min-width-70em{min-width: 70em}
+.min-width-80em{min-width: 80em}
+
+.width-40em{width: 40em}
+.width-50em{width: 50em}
+.width-60em{width: 60em}
+.width-70em{width: 70em}
+.width-80em{width: 80em}
+
+.width-40per{width: 40%}
+.width-50per{width: 50%}
+.width-60per{width: 60%}
+.width-70per{width: 70%}
+.width-80per{width: 80%}
+.min-width-full-less-6em{width: calc(100vw - 6em)}
+
+
 
 .package-results {
     display: flex;
@@ -861,6 +882,17 @@ i.transition-icon.rotate-icon {
 .opacity-90 { opacity: 0.9 !important; }
 .opacity-100 { opacity: 1 !important; }
 
+.z-10 { z-index: 10 !important; }
+.z-20 { z-index: 20 !important; }
+.z-30 { z-index: 30 !important; }
+.z-40 { z-index: 40 !important; }
+.z-50 { z-index: 50 !important; }
+.z-60 { z-index: 60 !important; }
+.z-70 { z-index: 70 !important; }
+.z-80 { z-index: 80 !important; }
+.z-90 { z-index: 90 !important; }
+.z-100 { z-index: 100 !important; }
+.z-1000 { z-index: 1000 !important; }
 
 .small-shadow-blue {
     box-shadow: 0px 0px 6px 2px rgb(0 186 255);
@@ -979,6 +1011,10 @@ h6 {
     border-radius: 5px;
 }
 
+.overlay-dialog {
+    margin: 0 !important;
+}
+
 .space-20px {
  height: 20px;   
 }

usr/share/bigbashview/framework/css/client-side-decorator.css

@@ -73,11 +73,12 @@
         #title-bar {
             position: fixed;
             padding: 5px;
+            margin-left: 4em;
+            margin-right: 4em;
             width: -webkit-fill-available;
             justify-content: center;
             user-select: none;
             display: flex;
-            z-index: 1000;
         }
 
         article.content {
@@ -149,7 +150,7 @@
         #window-controls-left {
             display: flex;
             align-items: center;
-            margin-left: 10px;
+            margin-left: 14px;
             position: absolute;
             height: min-content;
             width: min-content;
@@ -219,10 +220,35 @@
         .window-control-btn-img {
             margin: auto;
             min-width: inherit;
-filter: brightness(0) contrast(10);
+            filter: brightness(0) contrast(10);
         }
-
 
         .background-transparent {
             background: transparent !important;
         }
+
+        .title-auto-change-right {
+            position: absolute;
+            display: flex;
+            width: 100vw;
+            z-index: -5;
+            flex-flow: row-reverse;
+            justify-content: right;
+        }
+
+        .title-auto-change-left {
+            position: absolute;
+            display: flex;
+            width: 100vw;
+            z-index: -5;
+        }
+
+        .title-auto-change-normal-mode {
+            padding-right: 30px;
+            padding-left: 16px;
+        }
+
+        .title-auto-change-maximized-mode {
+            padding-right: 8px;
+            padding-left: 8px;
+        }

usr/share/bigbashview/framework/css/colors.sh.css

@@ -33,7 +33,7 @@ done < ~/.config/kdeglobals
 
 echo "
 :root,
-body {
+body.light, body.dark {
   --primary: $colors_window_backgroundalternate;
   --on-primary: $colors_window_decorationfocus;
   --primary-container: $colors_window_decorationhover;

usr/share/bigbashview/framework/js/client-side-decorator.js

@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', function () {
         // Variables for double-click detection
         let lastClickTime = 0;
         disableDragArea = false;
-        const doubleClickDelay = 400; // Tempo máximo em milissegundos entre cliques para ser considerado um clique duplo
+        const doubleClickDelay = 400;
         // Maybe use in future if qtwayland double click fixed // Adds a double-click event listener on the title bar to toggle window state
         // Maybe use in future if qtwayland double click fixed // var titleBar = document.getElementById('title-bar');
         // Maybe use in future if qtwayland double click fixed // titleBar.addEventListener('dblclick', function () {
@@ -49,38 +49,75 @@ document.addEventListener('DOMContentLoaded', function () {
         var windowControlsRight = document.getElementById('window-controls-right');
         var windowControlsLeft = document.getElementById('window-controls-left');
         var windowControls = document.querySelector('.window-controls');
+        var overlay = document.querySelector('.overlay');
         var maximize = document.querySelector('#maximize-btn-image');
         var right = document.getElementById('right');
+        var titleAutoChangeSide = document.querySelector('#title-auto-change-side');
 
         if (state === 'maximized') {
             // Adds the specific class and removing others
             page?.classList.add('maximized-mode');
             body?.classList.add('maximized-mode');
+            titleAutoChangeSide?.classList.add('title-auto-change-maximized-mode');
             page?.classList.remove('normal-mode');
             body?.classList.remove('normal-mode');
+            titleAutoChangeSide?.classList.remove('title-auto-change-normal-mode');
             windowControlsRight?.classList.add('maximized-mode-window-control-right');
             windowControlsLeft?.classList.add('maximized-mode-window-control-left');
             windowControlsRight?.classList.remove('window-controls');
             windowControlsLeft?.classList.remove('window-controls');
             right?.classList.add('maximized-mode-window-control-right');
             right?.classList.remove('normal-mode');
+            overlay?.classList.add('no-margin', 'no-round');
             canResize = false;
             if (maximize) { maximize.innerHTML = `<img class="window-control-btn-img" src="<?include bash RUST_BACKTRACE=0 geticons window-restore-symbolic ?>">`; }
         } else {
             // Adds the specific class and removing others
             page?.classList.add('normal-mode');
             body?.classList.add('normal-mode');
+            titleAutoChangeSide?.classList.add('title-auto-change-normal-mode');
             page?.classList.remove('maximized-mode');
             body?.classList.remove('maximized-mode');
+            titleAutoChangeSide?.classList.remove('title-auto-change-maximized-mode');
             right?.classList.add('normal-mode');
             right?.classList.remove('maximized-mode-window-control-right');
             windowControlsRight?.classList.remove('maximized-mode-window-control-right');
             windowControlsLeft?.classList.remove('maximized-mode-window-control-left');
             windowControlsRight?.classList.add('window-controls');
             windowControlsLeft?.classList.add('window-controls');
+            overlay?.classList.remove('no-margin', 'no-round');
             canResize = true;
             if (maximize) { maximize.innerHTML = `<img class="window-control-btn-img" src="<?include bash RUST_BACKTRACE=0 geticons window-maximize-symbolic ?>">`; }
         }
+
+        // Move content of left bar to top if buttons are hidden
+        if (windowControlsLeft) {
+            // Gets the computed style of the div
+            var computedStyle = window.getComputedStyle(windowControlsLeft);
+
+            // Initializes the height variable
+            var height = 2;
+
+            // Checks if the display is not 'none'
+            if (computedStyle.display !== 'none') {
+                height = windowControlsLeft.offsetHeight + 5;
+            }
+
+            // Selects the div with the id 'left'
+            var leftDiv = document.getElementById('left');
+
+            // Checks if the 'left' div exists
+            if (leftDiv) {
+                // Applies the height of the 'window-controls-left' div as the top margin on the 'left' div
+                leftDiv.style.marginTop = height + 'px';
+            }
+
+            titleAutoChangeSide?.classList.add('title-auto-change-right');
+            titleAutoChangeSide?.classList.remove('title-auto-change-left');
+        } else {
+            titleAutoChangeSide?.classList.add('title-auto-change-left');
+            titleAutoChangeSide?.classList.remove('title-auto-change-right');
+        }
     }
 
     // Moves the window when a draggable area is pressed
@@ -183,20 +220,5 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 });
 
-// Selects the div with the class 'window-controls-left'
-var windowControlsLeft = document.querySelector('#window-controls-left');
-
-// Checks if the div exists
-if (windowControlsLeft) {
-    // Gets the height of the div
-    var height = windowControlsLeft.offsetHeight + 5;
 
-    // Selects the div with the id 'left'
-    var leftDiv = document.getElementById('left');
 
-    // Checks if the 'left' div exists
-    if (leftDiv) {
-        // Applies the height of the 'window-controls-left' div as the top margin on the 'left' div
-        leftDiv.style.marginTop = height + 'px';
-    }
-}

usr/share/bigbashview/framework/shell/windowControlSide.sh

@@ -47,6 +47,17 @@ else
     buttonsRight=$(kreadconfig6 --group "org.kde.kdecoration2" --key "ButtonsOnRight" --file "$HOME/.config/kwinrc")
 fi
 
+
+# Hide window buttons in KDE maximized window if kwin using this configuration
+if [[ $XDG_CURRENT_DESKTOP == 'KDE' ]] && grep -q 'BorderlessMaximizedWindows=true' ~/.config/kwinrc; then
+
+    echo "<style>
+    #window-controls-right.maximized-mode-window-control-right { display: none; }
+    #window-controls-left.maximized-mode-window-control-left { display: none; }
+</style>"
+
+fi
+
 if [[ "$buttonsLeft" =~ [XAI] ]]; then
 
     echo '<div id="window-controls-left" class="window-controls no-drag">'