Optimized desktop darktheme mode

web/SystemAO/file_system/file_explorer.css

@@ -16,15 +16,12 @@
 }
 
 body.whiteTheme {
-    --body_text: black;
-    --body_background: rgb(250, 250, 250);
-
     --fileopr_btnTxt: rgb(226, 226, 226);
     --fileopr_oprtxt: rgb(56, 52, 52);
     --fileopr_btnhover: #f0f0f0;
     --divider: #f0f0f0;
-    --navi_bgcolor: #fcfcfc;
-    --navi_theme: #92cfe7;
+    --navi_bgcolor: var(--body_background_secondary, #fcfcfc);
+    --navi_theme: var(--theme_color, #92cfe7);
     --navi_theme_multiselect: #6c06ba;
     --navi_txt: rgb(114, 114, 114);
 
@@ -33,9 +30,6 @@ body.whiteTheme {
     
     --vroot_active_bg: #dadada;
     --dir_item_color: rgb(78, 78, 78);
-    --text_color: rgb(29, 29, 29);
-    --text_color_secondary: rgb(139, 139, 139);
-    --text_color_invert: rgb(182, 182, 182);
     --text_active: #23cc28;
 
     --dir_bg: #f5f5f5;
@@ -97,15 +91,12 @@ body.whiteTheme {
 }
 
 body.darkTheme{
-    --body_text: rgb(236, 236, 236);
-    --body_background: rgb(37, 37, 37);
-
     --fileopr_btnTxt: rgb(255, 255, 255);
     --fileopr_oprtxt: rgb(241, 241, 241);
     --fileopr_btnhover: #353535;
-    --divider: #465561;
-    --navi_bgcolor: #27292d;
-    --navi_theme: #6682c4;
+   
+    --navi_bgcolor: var(--body_background_secondary, #27292d);
+    --navi_theme: var(--theme_color, #6682c4);
     --navi_theme_multiselect: #6c06ba;
     --navi_txt: rgb(241, 241, 241);
 
@@ -114,9 +105,7 @@ body.darkTheme{
     
     --vroot_active_bg: #95b5de;
     --dir_item_color: rgb(228, 228, 228);
-    --text_color: rgb(241, 241, 241);
-    --text_color_secondary: rgb(214, 214, 214);
-    --text_color_invert: rgb(63, 63, 63);
+    
     --text_active: #23cc28;
 
     --dir_bg: #373a42;
@@ -130,7 +119,7 @@ body.darkTheme{
     --hex_folder_txt: #44d36a;
     --um_file_txt: #69aaff;
 
-    --folder_view_background: #3d3f47;
+    --folder_view_background: var(--body_background_active, #3d3f47);
     --folder_view_share: #24cc29;
     --fileobject_background_hover: #5a5e6b;
     --fileobject_background_selected: #95b5de;
@@ -597,6 +586,7 @@ body.darkTheme .ui.icon.button{
     color:var(--dir_txt);
     width: 250px;
     min-width: 250px;
+    scrollbar-width: thin;
 }
 
 
@@ -1245,7 +1235,18 @@ i.blue{
 
 */
 
-@media (max-width:800px) {
+@media (max-width:1035px) {
+    .viewportBtns{
+        display: block;
+        float: right;
+    }
+}
+
+@media (max-width:840px) {
+    .viewportBtns{
+        float: none;
+    }
+    
     .tabletAndDesktopOnly{
         display:none !important;
     }
@@ -1341,4 +1342,10 @@ i.blue{
         left: 0.4em;
         border: 0px solid transparent;
     }
+}
+
+@media (max-width:450px) {
+    .viewportBtns{
+        float: right;
+    }
 }

web/SystemAO/file_system/file_explorer.html

@@ -12,6 +12,7 @@
         <script type="text/javascript" src="../../script/forge-sha256.min.js"></script>
         <script type="text/javascript" src="../../script/qrcode.min.js"></script>
         <script type="text/javascript" src="../../script/applocale.js"></script>
+        <link rel="stylesheet" href="../../script/ao.css">
         <link rel="stylesheet" href="file_explorer.css">
         <script>
              window.mobilecheck = function() {

web/desktop.system

@@ -28,11 +28,11 @@
         }
 
         body:not(.darkTheme){
-            color: #5a5a5a;
+            color: var(--body_text, #5a5a5a);
         }
 
         body.darkTheme{
-            color: #f0f0f0;
+            color: var(--body_text,#f0f0f0);
         }
 
         * {
@@ -348,9 +348,9 @@
             z-index: 1113;
         }
 
-        #listMenu.darkTheme{
-            background-color: #242330;
-            color: white;
+        body.darkTheme #listMenu{
+            background-color: var(--body_background, #242330);
+            color: var(--text_color, white);
             -webkit-box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
             -moz-box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
             box-shadow: 7px -6px 7px -1px rgba(92,92,92,0.2);
@@ -361,18 +361,18 @@
             border-bottom: 2px solid #34b7eb;
         }
 
-        i.darkTheme{
-            color: white;
+        body.darkTheme i{
+            color: var(--text_color);
         }
 
-        #listMenu #searchBar.darkTheme::selection{
-            background: white;
+        body.darkTheme #listMenu #searchBar::selection{
+            background: var(--body_background);
         }
 
-        #listMenu.darkTheme .searchBar input{
-            background-color: #17161f !important;
-            color: white !important;
-            border: 1px solid #17161f;
+        body.darkTheme #listMenu .searchBar input{
+            background-color: var(--body_background_secondary, #17161f) !important;
+            color: var(--text_color_secondary, white) !important;
+            border: 1px solid var(--divider, #17161f);
         }
         
         #listMenu .listItemWrapper {
@@ -393,9 +393,9 @@
             padding-top: 8px;
         }
 
-        #listMenu.darkTheme .listItemWrapper .groups {
-            background-color: #17161f;
-            color: white;
+        body.darkTheme #listMenu .listItemWrapper .groups {
+            background-color: var(--body_background, #17161f);
+            color: var(--text_color, white);
         }
         
         #listMenu .listItemWrapper .groups .item {
@@ -413,8 +413,8 @@
             background-color: #dedede;
         }
 
-        #listMenu.darkTheme .listItemWrapper .groups .item:hover {
-            background-color: #242330;
+        body.darkTheme #listMenu .listItemWrapper .groups .item:hover {
+            background-color: var(--body_background_active, #242330);
         }
         
         #listMenu .listItemWrapper .items {
@@ -423,10 +423,18 @@
             display: inline-block;
             overflow-y: auto;
             padding-top: 8px;
-            box-shadow: -2px 0px 5px 0px rgba(194, 194, 194, 0.5);
+            
             vertical-align: top;
         }
 
+        body.whiteTheme #listMenu .listItemWrapper .items {
+            box-shadow: -2px 0px 5px 0px rgba(194, 194, 194, 0.5); 
+        }
+
+        body.darkTheme #listMenu .listItemWrapper .items {
+            box-shadow: -2px 0px 5px 0px rgba(194, 194, 194, 0.11); 
+        }
+
         #listMenu.darkTheme .listItemWrapper .items {
             box-shadow: 0px 0px 0px 0px transparent;
         }
@@ -442,8 +450,8 @@
             background-color: #f5f5f5;
         }
 
-        #listMenu.darkTheme .listItemWrapper .items .item:hover {
-            background-color: #17161f !important;
+        body.darkTheme #listMenu .listItemWrapper .items .item:hover {
+            background-color: var(--body_background_active, #17161f) !important;
             margin-right: 5px;
         }
         
@@ -467,8 +475,11 @@
             background-color: #dedede;
         }
 
-        #listMenu.darkTheme .poweroption:hover {
-            background-color: #242330;
+        body.darkTheme #listMenu .poweroption{
+            color: var(--text_color_secondary); 
+        }
+        body.darkTheme #listMenu .poweroption:hover {
+            background-color: var(--body_background_active);
         }
         
         .contextmenu {
@@ -719,7 +730,7 @@
         }
 
         #quickAccessPanel{
-            background-color:white;
+            background-color:var(--body_background);
             position:absolute;
             top:28px;
             right:4px;
@@ -747,45 +758,50 @@
             
         }
 
-        #quickAccessPanel:not(.darkTheme) .item{
-            color: #5a5a5a;
-        }
-
-        #quickAccessPanel.darkTheme .item{
-            color: #eeeeee;
+        #quickAccessPanel .item{
+            color: var(--text_color);
         }
 
         #quickAccessPanel .item:hover{
-           background-color:#fafafa;
+           background-color:var(--body_background_active);
         }
 
         /*
             Handle dark theme for the quick access panel
         */
 
-        #quickAccessPanel.darkTheme{
-            background-color: #242330;
-            color: white;
+        #quickAccessPanel{
+            background-color: var(--body_background);
+            color: var(--text_color);
             border: 1px solid transparent;
+        }
+
+        body.darkTheme #quickAccessPanel{
             -webkit-box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
             -moz-box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
             box-shadow: -5px 4px 7px -1px rgba(92,92,92,0.2);
         }
-        #quickAccessPanel.darkTheme .item:hover{
-           background-color:#17161f;
+
+        #quickAccessPanel .header{
+           color: var(--text_color);
         }
-        #quickAccessPanel.darkTheme .header{
-           color: white;
+
+        #quickAccessPanel .meta{
+           color: var(--text_color_secondary);
         }
-        #quickAccessPanel.darkTheme .progress{
-           background-color: #0c0c0f;
+        
+        #quickAccessPanel .progress{
+           background-color: var(--body_background_active);
         }
-        #quickAccessPanel.darkTheme .header{
-           color: white;
+
+        #quickAccessPanel .progress .bar{
+            background-color: var(--text_color_secondary) !important;
         }
-        #quickAccessPanel.darkTheme .inverted.button{
-           background-color: #17161f;
-           border: 1px solid black;
+
+        #quickAccessPanel .button{
+           background-color: var(--body_background_secondary);
+           border: 1px solid var(--divider);
+           color: var(--text_color);
         }
 
         .item.module{
@@ -839,6 +855,13 @@
             border: 0px;
         }
 
+        /* File operation progress tracker */
+        #backgroundTaskPanel{
+            background-color: var(--body_background) !important;
+            color: var(--text_color);
+            border: var(--divider) !important;
+        }
+
          /* Offline blinking warning css */
          @-moz-keyframes blink {
                 0% {
@@ -1002,7 +1025,7 @@
     </script>
 </head>
 
-<body style="background-color:black;">
+<body class="whiteTheme" style="background-color:black;">
     <!-- Background frames-->
     <div id="bgwrapper" class="background-wrapper" allowdrop="true" ondrop="drop(event)" ondragstart="return false;" onclick="event.preventDefault(); hideAllContextMenus();" ondblclick="event.preventDefault();event.stopImmediatePropagation();" ondragover="allowDrop(event);"
         align="center" draggable="false">
@@ -6832,23 +6855,13 @@
         }
 
         function setDarkTheme(){
-            $("#listMenu").addClass("darkTheme");
+            $("body").removeClass("whiteTheme").addClass("darkTheme");
             $("#powerIcon").attr("src","img/system/power-white.svg");
-            $("#quickAccessPanel").addClass("darkTheme");
-            $("#quickAccessPanel").find(".button").addClass("inverted");
-            $("#searchBar").addClass("darkTheme");
-            $("#searchBar").parent().find("i").addClass("darkTheme");
-            $("#usergroups").css("color", "white");
         }
 
         function setWhiteTheme(){
-            $("#listMenu").removeClass("darkTheme");
+            $("body").removeClass("darkTheme").addClass("whiteTheme");
             $("#powerIcon").attr("src","img/system/power.svg");
-            $("#quickAccessPanel").removeClass("darkTheme");
-            $("#quickAccessPanel").find(".button").removeClass("inverted");
-            $("#searchBar").removeClass("darkTheme");
-            $("#searchBar").parent().find("i").removeClass("darkTheme");
-            $("#usergroups").css("color", "");
         }
 
         function hexToRgbA(hex, transparent=1){

web/script/ao.css

@@ -1,197 +1,214 @@
-h1, h2, h3, p, span, div { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
-
-.ts.primary.button{
-    background-color:#4287f5;
-    border: 1px solid transparent;
-}
-.ts.primary.button:hover{
-    background-color:#3570cf !important;
-}
-
-/* floatWindow CSS */
-
-.floatWindow{
-    position:fixed;
-    width:1024px;
-    height:520px;
-    left:0px;
-    top:0px;
-    border-radius: 6px;
-}
-
-.floatWindow .controls .title{
-    color:white;
-    display: inline-block;
-    position:absolute;
-    left:30px;
-    top:3px;
-    max-width:70%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.floatWindow .controls .moduleicon{
-    height:75%;
-    width:auto;
-    margin-top:4px;
-    margin-left:8px;
-    display: inline-block;
-}
-
-.floatWindow .controls{
-    position:absolute;
-    top:0px;
-    left:0px;
-    width: 100%;
-    height:22px;
-    padding-bottom:2px;
-    user-select: none;
-    border-radius: 6px 6px 0px 0px;
-}
-
-.floatWindow .iframewrapper{
-    position:absolute;
-    top: 22px;
-    width:100%;
-    height: calc(100% - 22px);
-    border-left: 3px solid #37393e;
-    border-right: 3px solid #37393e;
-    border-bottom: 3px solid #37393e;
-    border-radius: 0px 0px 6px 6px;
-}
-
-.floatWindow .iframewrapper .iframecover{
-    position:absolute;
-    top:0px;
-    left:0px;
-    width:100%;
-    height:100%;
-    display:none;
-}
-
-
-.floatWindow .iframewrapper iframe{
-    height:100%;
-    width:100%;
-    overflow:hidden;
-    position:absolute;
-    top:0px;
-    left:0px;
-    border-radius: 0px 0px 6px 6px;
-}
-
-.floatWindow .fwcontrol .buttons:hover{
-    background-color: rgba(224, 224, 224,0.3);
-}
-
-.floatWindow .fwcontrol .buttons.close:hover{
-    background-color: rgba(232,142,142,0.7);
-}
-
-
-@supports (backdrop-filter: none) {
-
-    .floatWindow{
-        box-shadow: rgb(61, 61, 61) 1px 1px 4px;
-    }
-    .floatWindow .controls {
-        background-color:rgba(26, 26, 26, 0.85);
-        backdrop-filter: blur(5px);
-    }
-
-    .floatWindow .controls .title{
-        color: white;
-    }
-
-    .floatWindow .iframewrapper{
-        border-left: 3px solid transparent;
-        border-right: 3px solid transparent;
-        border-bottom: 3px solid transparent;
-        backdrop-filter: blur(5px);
-    }
-
-    .floatWindow .fwcontrol .buttons:hover{
-        background-color: rgba(224, 224, 224,.3);
-    }
-
-    /*
-        White theme
-    */
-
-    .floatWindow.white{
-        /* Updates 27-12-2020: Added box shadow and transparent boarder under backdrop filter mode*/
-       box-shadow: rgb(61, 61, 61) 1px 1px 4px;
-   }
-
-    .floatWindow.white .controls {
-        background-color:rgba(255,255,255, 0.85);
-        backdrop-filter: blur(5px);
-        
-    }
-
-    .floatWindow.white .controls .title{
-        font-weight: 130%;
-        color: rgb(20, 20, 20);
-        padding-right: 3px;
-    }
-
-    .floatWindow.white .iframewrapper{
-        border-left: 3px solid rgba(255,255,255,0.6);
-        border-right: 3px solid rgba(255,255,255,0.6);;
-        border-bottom: 3px solid rgba(255,255,255,0.6);;
-        backdrop-filter: blur(5px);
-    }
-
-    .floatWindow.white .fwcontrol .buttons:hover{
-        background-color: rgba(180, 180, 180,1);
-    }
-
-    .floatWindow.white .fwcontrol .buttons.close:hover{
-        background-color: rgba(232,142,142,0.7);
-    }
-    
-    
-}
-
-.floatWindow .fwcontrol{
-    position:absolute;
-    top:0px;
-    right:5px;
-    display: inline-block;
-}
-
-.floatWindow .fwcontrol .buttons{
-    vertical-align: top;
-    padding-top:2px;
-    padding-bottom:2px;
-    padding-left:6px;
-    padding-right:6px;
-    display: inline-block;
-    height:23px !important;
-    
-    color:white;
-    cursor: pointer;
-}
-
-.floatWindow .fwcontrol .buttons img{
-    width:18px;
-    height:auto;
-}
-
-.floatWindow .iframewrapper.widthHover{
-    cursor:w-resize;
-}
-.floatWindow .iframewrapper.rightCorner{
-    cursor:se-resize;
-}
-.floatWindow .iframewrapper.leftCorner{
-    cursor:sw-resize;
-}
-.floatWindow .iframewrapper.heighHover{
-    cursor:s-resize;
-}
-
-.fwdragger.resizbleCursor{
-    cursor:s-resize;
-}
+h1, h2, h3, p, span, div { font-family: "Microsoft JhengHei","SimHei", "Apple LiGothic Medium", "STHeiti"}
+
+/* General purpose theme settings */
+body.whiteTheme {
+    --body_text: black;
+    --body_background: rgb(250, 250, 250);
+    --body_background_secondary: #fcfcfc;
+    --body_background_active: #fcfcfce1;
+    --divider: #f0f0f0;
+    --theme_color: #92cfe7;
+    --text_color: rgb(29, 29, 29);
+    --text_color_secondary: rgb(139, 139, 139);
+    --text_color_invert: rgb(182, 182, 182);
+}
+
+body.darkTheme{
+    --body_text: rgb(236, 236, 236);
+    --body_background: rgb(37, 37, 37);
+    --body_background_secondary: #27292d;
+    --body_background_active: #3d3f47;
+    --divider: #465561;
+    --theme_color: #6682c4;
+    --text_color: rgb(241, 241, 241);
+    --text_color_secondary: rgb(214, 214, 214);
+    --text_color_invert: rgb(63, 63, 63);
+}
+
+
+/* floatWindow CSS */
+.floatWindow{
+    position:fixed;
+    width:1024px;
+    height:520px;
+    left:0px;
+    top:0px;
+    border-radius: 6px;
+}
+
+.floatWindow .controls .title{
+    color:white;
+    display: inline-block;
+    position:absolute;
+    left:30px;
+    top:3px;
+    max-width:70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.floatWindow .controls .moduleicon{
+    height:75%;
+    width:auto;
+    margin-top:4px;
+    margin-left:8px;
+    display: inline-block;
+}
+
+.floatWindow .controls{
+    position:absolute;
+    top:0px;
+    left:0px;
+    width: 100%;
+    height:22px;
+    padding-bottom:2px;
+    user-select: none;
+    border-radius: 6px 6px 0px 0px;
+}
+
+.floatWindow .iframewrapper{
+    position:absolute;
+    top: 22px;
+    width:100%;
+    height: calc(100% - 22px);
+    border-left: 3px solid #37393e;
+    border-right: 3px solid #37393e;
+    border-bottom: 3px solid #37393e;
+    border-radius: 0px 0px 6px 6px;
+}
+
+.floatWindow .iframewrapper .iframecover{
+    position:absolute;
+    top:0px;
+    left:0px;
+    width:100%;
+    height:100%;
+    display:none;
+}
+
+
+.floatWindow .iframewrapper iframe{
+    height:100%;
+    width:100%;
+    overflow:hidden;
+    position:absolute;
+    top:0px;
+    left:0px;
+    border-radius: 0px 0px 6px 6px;
+}
+
+.floatWindow .fwcontrol .buttons:hover{
+    background-color: rgba(224, 224, 224,0.3);
+}
+
+.floatWindow .fwcontrol .buttons.close:hover{
+    background-color: rgba(232,142,142,0.7);
+}
+
+
+@supports (backdrop-filter: none) {
+
+    .floatWindow{
+        box-shadow: rgb(61, 61, 61) 1px 1px 4px;
+    }
+    .floatWindow .controls {
+        background-color:rgba(26, 26, 26, 0.85);
+        backdrop-filter: blur(5px);
+    }
+
+    .floatWindow .controls .title{
+        color: white;
+    }
+
+    .floatWindow .iframewrapper{
+        border-left: 3px solid transparent;
+        border-right: 3px solid transparent;
+        border-bottom: 3px solid transparent;
+        backdrop-filter: blur(5px);
+    }
+
+    .floatWindow .fwcontrol .buttons:hover{
+        background-color: rgba(224, 224, 224,.3);
+    }
+
+    /*
+        White theme
+    */
+
+    .floatWindow.white{
+        /* Updates 27-12-2020: Added box shadow and transparent boarder under backdrop filter mode*/
+       box-shadow: rgb(61, 61, 61) 1px 1px 4px;
+   }
+
+    .floatWindow.white .controls {
+        background-color:rgba(255,255,255, 0.85);
+        backdrop-filter: blur(5px);
+        
+    }
+
+    .floatWindow.white .controls .title{
+        font-weight: 130%;
+        color: rgb(20, 20, 20);
+        padding-right: 3px;
+    }
+
+    .floatWindow.white .iframewrapper{
+        border-left: 3px solid rgba(255,255,255,0.6);
+        border-right: 3px solid rgba(255,255,255,0.6);;
+        border-bottom: 3px solid rgba(255,255,255,0.6);;
+        backdrop-filter: blur(5px);
+    }
+
+    .floatWindow.white .fwcontrol .buttons:hover{
+        background-color: rgba(180, 180, 180,1);
+    }
+
+    .floatWindow.white .fwcontrol .buttons.close:hover{
+        background-color: rgba(232,142,142,0.7);
+    }
+    
+    
+}
+
+.floatWindow .fwcontrol{
+    position:absolute;
+    top:0px;
+    right:5px;
+    display: inline-block;
+}
+
+.floatWindow .fwcontrol .buttons{
+    vertical-align: top;
+    padding-top:2px;
+    padding-bottom:2px;
+    padding-left:6px;
+    padding-right:6px;
+    display: inline-block;
+    height:23px !important;
+    
+    color:white;
+    cursor: pointer;
+}
+
+.floatWindow .fwcontrol .buttons img{
+    width:18px;
+    height:auto;
+}
+
+.floatWindow .iframewrapper.widthHover{
+    cursor:w-resize;
+}
+.floatWindow .iframewrapper.rightCorner{
+    cursor:se-resize;
+}
+.floatWindow .iframewrapper.leftCorner{
+    cursor:sw-resize;
+}
+.floatWindow .iframewrapper.heighHover{
+    cursor:s-resize;
+}
+
+.fwdragger.resizbleCursor{
+    cursor:s-resize;
+}