Updated Float Window style

web/SystemAO/desktop/personalization.html

@@ -635,7 +635,7 @@
 
                             //Set the preview color
                             if (ao_module_virtualDesktop){
-                                $(parentDocument).find(".floatWindow .controls").css("background-color",hexToRgbA(thisColorCode, 0.85));
+                                $(parentDocument).find(".floatWindow .controls").css("background-color",hexToRgbA(thisColorCode, 0.25));
                                 $(parentDocument).find("#statusbar").css("background-color",thisColorCode );
                                 $(parentDocument).find("#navimenu").css("background-color",hexToRgbA(thisColorCode, 0.5));
                             }

web/desktop.system

@@ -2939,10 +2939,16 @@
                 backgroundStyle = `background-color: ${bgcolor};`;
             }
 
-            //Check if the theme color is applied. If yes, generate the floatWindow with overwritten theem color
+            //Check if the theme color is applied. If yes, generate the floatWindow with overwritten theme color
             var overWriteThemeColor = "";
+            var overWriteIframeWrapperBorderStyle = "";
             if (desktopThemeColor != ""){
-                overWriteThemeColor = `background-color: ${hexToRgbA(desktopThemeColor, 0.85)}`;
+                var overWriteBackgroundColor = hexToRgbA(desktopThemeColor, 0.25);
+                overWriteThemeColor = `background-color: ${overWriteBackgroundColor}`;
+                overWriteIframeWrapperBorderStyle = `border-left: 3px solid ${overWriteBackgroundColor};
+                    border-right: 3px solid ${overWriteBackgroundColor};
+                    border-bottom: 3px solid ${overWriteBackgroundColor};
+                    backdrop-filter: blur(5px);`
             }
 
             //Updates 2022-06-24: Added touch screen docking buttons
@@ -2973,7 +2979,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="iframewrapper">
+                <div class="iframewrapper" style="${overWriteIframeWrapperBorderStyle}">
                     <iframe src="${url}" allowfullscreen="true"></iframe>
                     <div class="iframecover"></div>
                 </div>
@@ -5012,6 +5018,7 @@
                     
                 }else if (renameMode){
                     event.preventDefault();
+                    event.stopImmediatePropagation();
                     exitRenameMode();
                 }
             
@@ -6882,10 +6889,16 @@
             desktopThemeColor = newThemeColor;
 
             //Update the related elements
-            $("#statusbar").css("background-color",newThemeColor);
+            $("#statusbar").css("background-color",hexToRgbA(newThemeColor, 0.8));
             $("#navimenu").css("background-color",hexToRgbA(newThemeColor, 0.5));
-            $(".floatWindow .controls").css("background-color",hexToRgbA(newThemeColor, 0.85));
 
+            var themeColorForBoarders = hexToRgbA(newThemeColor, 0.25);
+            $(".floatWindow .controls").css("background-color",themeColorForBoarders);
+            $(".floatWindow .iframewrapper").css({
+                "border-left":"3px solid " + themeColorForBoarders,
+                "border-right":"3px solid " + themeColorForBoarders,
+                "border-bottom":"3px solid " + themeColorForBoarders,
+            })
             //List menu theme color bar
             $("#listMenu").find(".searchBar").css("border-bottom", "2px solid " + newThemeColor);
             $("#volumebar").css("background-color", newThemeColor);

web/script/ao.css

@@ -25,6 +25,10 @@ body.darkTheme{
     --text_color_invert: rgb(63, 63, 63);
 }
 
+:root{
+    --default_fw_theme: rgba(26, 26, 26, 0.3);
+}
+
 
 /* floatWindow CSS */
 .floatWindow{
@@ -40,19 +44,19 @@ body.darkTheme{
     color:white;
     display: inline-block;
     position:absolute;
-    left:30px;
-    top:3px;
-    max-width:70%;
+    left:44.5px;
+    top:8px;
+    max-width: calc(100% - 140px);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .floatWindow .controls .moduleicon{
-    height:75%;
-    width:auto;
-    margin-top:4px;
-    margin-left:8px;
+    height:20px;
+    width:20px;
+    margin-top:8px;
+    margin-left:12.5px;
     display: inline-block;
 }
 
@@ -61,7 +65,7 @@ body.darkTheme{
     top:0px;
     left:0px;
     width: 100%;
-    height:22px;
+    height:36px;
     padding-bottom:2px;
     user-select: none;
     border-radius: 6px 6px 0px 0px;
@@ -69,9 +73,9 @@ body.darkTheme{
 
 .floatWindow .iframewrapper{
     position:absolute;
-    top: 22px;
+    top: 36px;
     width:100%;
-    height: calc(100% - 22px);
+    height: calc(100% - 36px);
     border-left: 3px solid #37393e;
     border-right: 3px solid #37393e;
     border-bottom: 3px solid #37393e;
@@ -99,7 +103,11 @@ body.darkTheme{
 }
 
 .floatWindow .fwcontrol .buttons:hover{
-    background-color: rgba(224, 224, 224,0.3);
+    background-color: rgba(224, 224, 224,0.75);
+}
+
+.floatWindow .fwcontrol .buttons.close{
+    border-top-right-radius: 6px !important;
 }
 
 .floatWindow .fwcontrol .buttons.close:hover{
@@ -113,7 +121,7 @@ body.darkTheme{
         box-shadow: rgb(61, 61, 61) 1px 1px 4px;
     }
     .floatWindow .controls {
-        background-color:rgba(26, 26, 26, 0.85);
+        background-color:var(--default_fw_theme);
         backdrop-filter: blur(5px);
     }
 
@@ -122,9 +130,9 @@ body.darkTheme{
     }
 
     .floatWindow .iframewrapper{
-        border-left: 3px solid transparent;
-        border-right: 3px solid transparent;
-        border-bottom: 3px solid transparent;
+        border-left: 3px solid var(--default_fw_theme);;
+        border-right: 3px solid var(--default_fw_theme);;
+        border-bottom: 3px solid var(--default_fw_theme);;
         backdrop-filter: blur(5px);
     }
 
@@ -150,7 +158,7 @@ body.darkTheme{
     .floatWindow.white .controls .title{
         font-weight: 130%;
         color: rgb(20, 20, 20);
-        padding-right: 3px;
+        padding-right: 12.5px;
     }
 
     .floatWindow.white .iframewrapper{
@@ -174,18 +182,18 @@ body.darkTheme{
 .floatWindow .fwcontrol{
     position:absolute;
     top:0px;
-    right:5px;
+    right:0px;
     display: inline-block;
 }
 
 .floatWindow .fwcontrol .buttons{
     vertical-align: top;
-    padding-top:2px;
+    padding-top:8px;
     padding-bottom:2px;
-    padding-left:6px;
-    padding-right:6px;
+    padding-left:10px;
+    padding-right:10px;
     display: inline-block;
-    height:23px !important;
+    height:36px !important;
     
     color:white;
     cursor: pointer;
@@ -212,3 +220,9 @@ body.darkTheme{
 .fwdragger.resizbleCursor{
     cursor:s-resize;
 }
+
+
+.fwdragger {
+    --text-outline-color: rgba(36, 36, 36, 0.75);
+    text-shadow: 1px 0 0 var(--text-outline-color), 0 -1px 0 var(--text-outline-color), 0 1px 0 var(--text-outline-color), -1px 0 0 var(--text-outline-color);
+}