Update Settings Page.

shared/Settings.VisualElementsManifest.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
+    <VisualElements DisplayName="设置" BackgroundColor="#5133AB" ShowNameOnSquare150x150Logo="on" ForegroundText="light" Square150x150Logo="Settings.Assets\150x150Logo.png" Square70x70Logo="Settings.Assets\70x70Logo.png" />
+</Application>

shared/VisualElements/scale.xml

@@ -12,4 +12,19 @@
         <scale dpi="100">SplashLarge.png</scale>
         <scale dpi="default">SplashLarge.png</scale>
     </resource>
+    <resource id="settings-splash">
+        <scale dpi="100">splash\settings\splashscreen.scale-100.png</scale>
+        <scale dpi="125">splash\settings\splashscreen.scale-125.png</scale>
+        <scale dpi="150">splash\settings\splashscreen.scale-150.png</scale>
+        <scale dpi="200">splash\settings\splashscreen.scale-200.png</scale>
+        <scale dpi="400">splash\settings\splashscreen.scale-200.png</scale>
+        <scale dpi="default">splash\settings\splashscreen.png</scale>
+    </resource>
+    <resource id="settings-splashlarge">
+        <scale dpi="80">splash\settings\large\splashscreen.scale-80.png</scale>
+        <scale dpi="100">splash\settings\large\splashscreen.scale-100.png</scale>
+        <scale dpi="140">splash\settings\large\splashscreen.scale-140.png</scale>
+        <scale dpi="180">splash\settings\large\splashscreen.scale-180.png</scale>
+        <scale dpi="default">splash\settings\large\splashscreen.png</scale>
+    </resource>
 </resources>

shared/VisualElementsManifest.xml

@@ -1,12 +1,27 @@
-<Application>
-  <VisualElements
+<Applications>
+  <Application Id='App'>
+    <VisualElements
       DisplayName='App Installer'
       Logo='VisualElements\150x150.png'
       SmallLogo='VisualElements\70x70.png'
       ForegroundText='light'
       Lnk32x32Logo="Icons\Main.ico"
       BackgroundColor='#0078D7'>
-    <DefaultTile ShowName='allLogos'/>
-    <SplashScreen Image="VisualElements\SplashLarge.png" BackgroundColor="#0078d7" DarkModeBackgroundColor='#001629' />
-  </VisualElements>
-</Application>
+      <DefaultTile ShowName='allLogos' />
+      <SplashScreen Image="VisualElements\SplashLarge.png" BackgroundColor="#0078d7"
+        DarkModeBackgroundColor='#001629' />
+    </VisualElements>
+  </Application>
+  <Application Id='Settings'>
+    <VisualElements
+      DisplayName='Settings'
+      Logo='Settings.Assets\Logo.png'
+      SmallLogo='Settings.Assets\SmallLogo.png'
+      ForegroundText='light'
+      BackgroundColor='#5133ab'>
+      <DefaultTile ShowName='allLogos' />
+      <SplashScreen Image="VisualElements\splash\settings\splashscreen.png"
+        BackgroundColor="#5133ab" DarkModeBackgroundColor='#2e1e5c' />
+    </VisualElements>
+  </Application>
+</Applications>

shared/html/applist.html

@@ -251,7 +251,7 @@
     <div role="template" id="applist-item-template">
         <div class="applist-list-item">
             <div class="applist-item-picbox" style="background-color: rgb(0,0,0);">
-                <img class="applist-item-pic" src="./Images/AppLogoDefault.png" width="32" height="32">
+                <img class="applist-item-pic" src="images/applogo.default.png" width="32" height="32">
                 <div class="applist-item-img-border"></div>
             </div>
             <div class="applist-item-divide"></div>
@@ -351,6 +351,15 @@
                 inode.appid = appid;
                 inode.color = color;
                 item.itemInfo = inode;
+                if (!logo || logo.length == 0) {
+                    inode.logo = "images/applogo.default.png";
+                }
+                if (!color || color.length == 0) {
+                    inode.color = Bridge.UI.themeColor;
+                }
+                if (Bridge.String.tolower(color) == "transparent") {
+                    inode.color = Bridge.UI.themeColor;
+                }
                 item.addEventListener("click", function() {
                     setTimeout(function() {
                         external.Package.activate(appid);

shared/html/css/pages.css

@@ -184,6 +184,12 @@ progress.win-ring:indeterminate::-ms-fill {
     align-content: center;
     justify-content: space-between;
     align-items: center;
+    -ms-flex-direction: row-reverse;
+    -ms-flex-wrap: nowrap;
+    -ms-flex-pack: justify;
+    /* 对应 justify-content */
+    -ms-flex-align: center;
+    /* 对应 align-items */
 }
 
 .page>.controls .command {
@@ -194,6 +200,11 @@ progress.win-ring:indeterminate::-ms-fill {
     align-content: center;
     justify-content: flex-end;
     align-items: center;
+    display: -ms-flexbox;
+    -ms-flex-direction: row;
+    -ms-flex-wrap: nowrap;
+    -ms-flex-pack: end;
+    -ms-flex-align: center;
 }
 
 .page>.controls .command button {
@@ -207,6 +218,7 @@ progress.win-ring:indeterminate::-ms-fill {
     align-content: center;
     justify-content: flex-start;
     align-items: center;
+    display: -ms-flexbox;
     -ms-flex-direction: row;
     -ms-flex-wrap: nowrap;
     -ms-flex-line-pack: center;
@@ -243,6 +255,7 @@ progress.win-ring:indeterminate::-ms-fill {
     /*background-color: #464646;*/
     float: right;
     display: flex;
+    display: -ms-flexbox;
     flex-direction: row;
     -ms-flex-direction: row;
     flex-wrap: nowrap;
@@ -278,6 +291,7 @@ progress.win-ring:indeterminate::-ms-fill {
     bottom: 0;
     /*background-color: rgba(254,254,254, 0.1);*/
     display: flex;
+    display: -ms-flexbox;
     flex-direction: row;
     -ms-flex-direction: row;
     flex-wrap: nowrap;
@@ -331,6 +345,9 @@ progress.win-ring:indeterminate::-ms-fill {
     -ms-overflow-x: hidden;
     -ms-overflow-y: hidden;
     -ms-text-overflow: ellipsis;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     max-height: 1.3em;
     max-width: 100%;
@@ -341,6 +358,9 @@ progress.win-ring:indeterminate::-ms-fill {
     -ms-overflow-x: hidden;
     -ms-overflow-y: hidden;
     -ms-text-overflow: ellipsis;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-overflow: ellipsis;
     max-height: 1.3em;
     white-space: nowrap;
     max-width: 100%;
@@ -418,6 +438,7 @@ progress.win-ring:indeterminate::-ms-fill {
     width: 100%;
     height: calc(100% - 1.3em);
     box-sizing: border-box;
+    font-family: "Microsoft YaHei", "Segoe UI", "Ebrima", "Nirmala", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo", "Leelawadee", "Microsoft JhengHei", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math";
 }
 
 .moreinfo-content p {
@@ -435,6 +456,7 @@ progress.win-ring:indeterminate::-ms-fill {
 
 .page>.controls {
     display: flex;
+    display: -ms-flexbox;
 }
 
 .page.splash>.controls,
@@ -463,6 +485,11 @@ progress.win-ring:indeterminate::-ms-fill {
     align-content: center;
     justify-content: center;
     align-items: center;
+    display: -ms-flexbox;
+    -ms-flex-direction: row;
+    -ms-flex-wrap: nowrap;
+    -ms-flex-pack: center;
+    -ms-flex-align: center;
     font-size: 16pt;
     max-height: 100%;
 }

shared/html/install.html

@@ -261,6 +261,9 @@
                                 }
                                 try {
                                     var bc = pi.applications[0].BackgroundColor || Bridge.UI.themeColor;
+                                    if (strutils.tolower(bc) === "transparent") {
+                                        bc = Bridge.UI.themeColor;
+                                    }
                                     storelogo.style.backgroundColor = bc;
                                     slfilter.style.background = Color.genTileBackFilter(bc);
                                 } catch (e) {

shared/html/js/pages.js

@@ -426,6 +426,9 @@
             if (pkginfo.applications.length > 0) {
                 var appinfo = pkginfo.applications[0];
                 backcolor = appinfo.BackgroundColor || Bridge.UI.themeColor;
+                if (strutils.tolower(backcolor) == "transparent") {
+                    backcolor = Bridge.UI.themeColor;
+                }
             } else { backcolor = Bridge.UI.themeColor; }
             storelogo.style.backgroundColor = backcolor;
             storelogofilter.style.background = Color.genTileBackFilter(backcolor);
@@ -523,9 +526,13 @@
         storelogoimg.src = pkginfo.properties.logo_base64;
         storelogo.setAttribute("data-logoimg", pkginfo.properties.logo);
         var backcolor = "";
+        var strutils = Bridge.External.String;
         if (pkginfo.applications.length > 0) {
             var appinfo = pkginfo.applications[0];
             backcolor = appinfo.BackgroundColor || Bridge.UI.themeColor;
+            if (strutils.tolower(backcolor) == "transparent") {
+                backcolor = Bridge.UI.themeColor;
+            }
         } else { backcolor = Bridge.UI.themeColor; }
         storelogo.style.backgroundColor = backcolor;
         storelogofilter.style.background = Color.genTileBackFilter(backcolor);

shared/html/settings.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Settings</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="js/module.js"></script>
+    <script type="text/javascript" src="js/polyfill-ie.js"></script>
+    <link rel="stylesheet" href="libs/winjs/2.0/css/ui-light.css" id="winjs-style">
+    <script type="text/javascript" src="libs/winjs/1.0/js/base.js"></script>
+    <script type="text/javascript" src="libs/winjs/1.0/js/ui.js"></script>
+    <script type="text/javascript" src="js/color.js"></script>
+    <script type="text/javascript" src="js/promise.js"></script>
+    <script type="text/javascript" src="js/bridge.js"></script>
+    <script type="text/javascript" src="js/dpimodes.js"></script>
+    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/animation.js"></script>
+    <link rel="stylesheet" href="fonts/fonts.css">
+    <script type="text/javascript" src="js/event.js"></script>
+    <script type="text/javascript" src="js/tileback.js"></script>
+    <script type="text/javascript" src="js/load.js"></script>
+    <link rel="stylesheet" type="text/css" href="libs/msgbox/msgbox.css">
+    <script type="text/javascript" src="libs/msgbox/msgbox.js"></script>
+    <link rel="stylesheet" type="text/css" href="settings/page.css">
+    <script type="text/javascript" src="settings/items.js"></script>
+    <script type="text/javascript" src="js/init.js"></script>
+    <script type="text/javascript" src="settings/init.js"></script>
+    <script type="text/javascript" src="settings/initsame.js"></script>
+</head>
+
+<body>
+    <div id="settingpage" class="pagecontainer full">
+        <div class="page full guide">
+            <aside class="left win-ui-dark">
+                <header aria-label="Header content" role="banner" class="titlebanner" id="pagebanner" style="height: 120px;">
+                    <button id="back" class="win-backbutton pagetitlewb-backbutton" onclick="Bridge.Frame.callEvent ('InvokeBackPage')" style="margin-left: 20px; transform: scale(0.72);" disabled></button>
+                    <h2 class="titlearea win-type-ellipsis" id="apptitle" style="">
+                        <span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;">Settings</span>
+                    </h2>
+                </header>
+                <nav class="container">
+                    <ul class="list">
+                    </ul>
+                </nav>
+            </aside>
+            <main class="main right padding">
+                <h2>设置</h2>
+                <p>通过左侧的导航页，载入相应的设置。</p>
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>

shared/html/settings/appinstaller.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>App Installer Settings</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="../js/module.js"></script>
+    <script type="text/javascript" src="../js/polyfill-ie.js"></script>
+    <link rel="stylesheet" href="../libs/winjs/2.0/css/ui-light.css" id="winjs-style">
+    <script type="text/javascript" src="../libs/winjs/1.0/js/base.js"></script>
+    <script type="text/javascript" src="../libs/winjs/1.0/js/ui.js"></script>
+    <script type="text/javascript" src="../js/color.js"></script>
+    <script type="text/javascript" src="../js/promise.js"></script>
+    <script type="text/javascript" src="../js/bridge.js"></script>
+    <script type="text/javascript" src="../js/dpimodes.js"></script>
+    <script type="text/javascript" src="../js/resources.js"></script>
+    <script type="text/javascript" src="../js/animation.js"></script>
+    <link rel="stylesheet" href="../fonts/fonts.css">
+    <script type="text/javascript" src="../js/event.js"></script>
+    <script type="text/javascript" src="../js/tileback.js"></script>
+    <script type="text/javascript" src="../js/load.js"></script>
+    <link rel="stylesheet" type="text/css" href="../libs/msgbox/msgbox.css">
+    <script type="text/javascript" src="../libs/msgbox/msgbox.js"></script>
+    <script type="text/javascript" src="../js/init.js"></script>
+    <script type="text/javascript" src="initsame.js"></script>
+    <link rel="stylesheet" type="text/css" href="page.css">
+    <script type="text/javascript" src="appinstaller/items.js"></script>
+    <script type="text/javascript" src="appinstaller/init.js"></script>
+</head>
+
+<body>
+    <div id="settingpage" class="pagecontainer full">
+        <div class="page full guide">
+            <aside class="left win-ui-dark">
+                <header aria-label="Header content" role="banner" class="titlebanner" id="pagebanner" style="height: 120px;">
+                    <button id="back" class="win-backbutton pagetitlewb-backbutton" onclick="Bridge.Frame.callEvent ('InvokeBackPage')" style="margin-left: 20px; transform: scale(0.72);"></button>
+                    <h2 class="titlearea win-type-ellipsis" id="apptitle" style="">
+                        <span class="pagetitlewb-title" id="apptitlestr" style="margin-left: 10px; margin-right: 20px;">Settings</span>
+                    </h2>
+                </header>
+                <nav class="container">
+                    <ul class="list">
+                        <li role="button" tabindex="0">项1</li>
+                        <li role="button" tabindex="0" class="selected">项2</li>
+                        <li role="button" tabindex="0">项3</li>
+                    </ul>
+                </nav>
+            </aside>
+            <iframe class="main right">
+            </main>
+        </div>
+    </div>
+</body>
+
+</html>

shared/html/settings/appinstaller/guide.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>App Installer Settings</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="text/javascript" src="../../js/module.js"></script>
+    <script type="text/javascript" src="../../js/polyfill-ie.js"></script>
+    <link rel="stylesheet" href="../../libs/winjs/2.0/css/ui-light.css" id="winjs-style">
+    <script type="text/javascript" src="../../libs/winjs/1.0/js/base.js"></script>
+    <script type="text/javascript" src="../../libs/winjs/1.0/js/ui.js"></script>
+    <script type="text/javascript" src="../../js/color.js"></script>
+    <script type="text/javascript" src="../../js/promise.js"></script>
+    <script type="text/javascript" src="../../js/bridge.js"></script>
+    <script type="text/javascript" src="../../js/dpimodes.js"></script>
+    <script type="text/javascript" src="../../js/resources.js"></script>
+    <script type="text/javascript" src="../../js/animation.js"></script>
+    <link rel="stylesheet" href="../../fonts/fonts.css">
+    <script type="text/javascript" src="../../js/event.js"></script>
+    <script type="text/javascript" src="../../js/tileback.js"></script>
+    <script type="text/javascript" src="../../js/load.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../libs/msgbox/msgbox.css">
+    <script type="text/javascript" src="../../libs/msgbox/msgbox.js"></script>
+    <script type="text/javascript" src="../../js/init.js"></script>
+    <link rel="stylesheet" type="text/css" href="../page.css">
+    <link rel="stylesheet" type="text/css" href="../subpage.css">
+    <script type="text/javascript" src="initsame.js"></script>
+</head>
+
+<body>
+    <div class="section padding">
+        <h2>App Installer Settings</h2>
+    </div>
+</body>
+
+</html>

shared/html/settings/appinstaller/init.js

@@ -0,0 +1,35 @@
+(function(global) {
+    "use strict";
+
+    function ready(e) {
+        var page = document.querySelector("#settingpage");
+        var guide = page.querySelector(".page.guide");
+        var slide = guide.querySelector("aside");
+        var content = guide.querySelector(".main");
+        var shead = slide.querySelector("header");
+        var list = slide.querySelector("ul");
+        list.innerHTML = "";
+        var items = pages;
+        var tags = Object.keys(items);
+        var eventutil = Windows.UI.Event.Util;
+        for (var i = 0; i < tags.length; i++) {
+            var tag = tags[i];
+            var item = items[tag];
+            var li = document.createElement("li");
+            li.setAttribute("data-page", item.page);
+            li.innerHTML = item.title;
+            eventutil.addEvent(li, "click", function() {
+                for (var j = 0; j < list.children.length; j++) {
+                    var child = list.children[j];
+                    if (child.classList.contains("selected"))
+                        child.classList.remove("selected");
+                }
+                content.src = this.getAttribute("data-page");
+                this.classList.add("selected");
+            });
+            list.appendChild(li);
+        }
+        content.src = guidePage.page;
+    }
+    OnLoad.add(ready);
+})(this);

shared/html/settings/appinstaller/initsame.js

@@ -0,0 +1,8 @@
+(function(global) {
+    "use strict";
+
+    function ready(e) {
+        Windows.UI.DPI.mode = 1
+    }
+    OnLoad.add(ready);
+})(this);

shared/html/settings/appinstaller/items.js

@@ -0,0 +1,25 @@
+(function(global) {
+    "use strict";
+
+    function getPage(page, display) {
+        return {
+            page: page,
+            title: display
+        };
+    }
+    var pages = {
+        general: getPage("appinstaller/general.html", "General"),
+        theme: getPage("appinstaller/theme.html", "Theme"),
+        update: getPage("update.html", "Update")
+    };
+    Object.defineProperty(global, "pages", {
+        get: function() {
+            return pages;
+        }
+    });
+    Object.defineProperty(global, "guidePage", {
+        get: function() {
+            return getPage("appinstaller/guide.html", "Guide");
+        }
+    });
+})(this);

shared/html/settings/init.js

@@ -0,0 +1,27 @@
+(function(global) {
+    "use strict";
+
+    function ready(e) {
+        var page = document.querySelector("#settingpage");
+        var guide = page.querySelector(".page.guide");
+        var slide = guide.querySelector("aside");
+        var content = guide.querySelector("main");
+        var shead = slide.querySelector("header");
+        var list = slide.querySelector("ul");
+        list.innerHTML = "";
+        var items = global.settingPages;
+        var keys = Object.keys(items);
+        for (var i = 0; i < keys.length; i++) {
+            var item = items[keys[i]];
+            var inode = document.createElement("li");
+            inode.setAttribute("data-page", item.page);
+            inode.textContent = item.displayName;
+            Windows.UI.Event.Util.addEvent(inode, "click", function(e) {
+                window.location = "settings/" + inode.getAttribute("data-page");
+            });
+            list.appendChild(inode);
+            // WinJS.UI.Animation.createAddToListAnimation(list, inode).execute();
+        }
+    }
+    OnLoad.add(ready);
+})(this);

shared/html/settings/initsame.js

@@ -0,0 +1,32 @@
+(function(global) {
+    "use strict";
+
+    function ready(e) {
+        var page = document.querySelector("#settingpage");
+        var guide = page.querySelector(".page.guide");
+        var slide = guide.querySelector("aside");
+        var content = guide.querySelector(".main");
+        var shead = slide.querySelector("header");
+        var list = slide.querySelector("ul");
+        try { slide.style.backgroundColor = Bridge.UI.themeColor; } catch (e) {}
+        setTimeout(function() {
+            slide.style.transition = "all 0.5s cubic-bezier(0.1, 0.9, 0.2, 1)";
+        }, 0);
+        shead.style.display = "none";
+        list.style.display = "none";
+        content.style.display = "none";
+        setTimeout(function() {
+            shead.style.display = "";
+            Windows.UI.Animation.runAsync(shead, Windows.UI.Animation.Keyframes.Flyout.toLeft);
+        }, 0);
+        setTimeout(function() {
+            list.style.display = "";
+            Windows.UI.Animation.runAsync(list, Windows.UI.Animation.Keyframes.Flyout.toLeft);
+        }, 50);
+        setTimeout(function() {
+            content.style.display = "";
+            Windows.UI.Animation.runAsync(content, Windows.UI.Animation.Keyframes.SlideInFromBottom);
+        }, 100);
+    }
+    OnLoad.add(ready);
+})(this);

shared/html/settings/items.js

@@ -0,0 +1,16 @@
+(function(global) {
+    "use strict";
+
+    function getSettingsItem(page, displayName) {
+        return {
+            page: page,
+            displayName: displayName
+        };
+    }
+    var settingItems = {
+        appinstaller: getSettingsItem("appinstaller.html", "App Installer")
+    };
+    Object.defineProperty(global, "settingPages", {
+        get: function() { return settingItems; }
+    });
+})(this);

shared/html/settings/page.css

@@ -0,0 +1,215 @@
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    user-select: none;
+    -ms-user-select: none;
+}
+
+body * {
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+*,
+button,
+input,
+select,
+textarea,
+a,
+label,
+p,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+table,
+th,
+td,
+tr,
+img,
+iframe,
+object,
+embed,
+audio,
+video,
+canvas,
+form,
+fieldset,
+legend {
+    font-family: "Microsoft YaHei", "Segoe UI", "Ebrima", "Nirmala", "Gadugi", "Segoe UI Emoji", "Segoe UI Symbol", "Meiryo", "Leelawadee", "Microsoft JhengHei", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Javanese Text", "Cambria Math";
+}
+
+.pagecontainer {
+    padding: 0px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    margin: 0px;
+    padding: 0px;
+    border: 0px;
+    background-color: #f3f3f3;
+}
+
+.pagecontainer.full {
+    padding: 0px;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.pagecontainer>.page {
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    box-sizing: border-box;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+}
+
+.titlebanner {
+    height: 150px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.pagetitle {
+    margin-left: 120px;
+    margin-right: 120px;
+}
+
+.pagetitlewb-backbutton {
+    margin-left: 39px;
+    max-width: 41px;
+    max-height: 41px;
+    min-width: 41px;
+    min-height: 41px;
+}
+
+.pagetitlewb-title {
+    margin-left: 40px;
+    margin-right: 120px;
+}
+
+aside.left {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: 300px;
+    box-sizing: border-box;
+    padding: 0;
+    background-color: rgb(20, 0, 68);
+    color: white;
+}
+
+aside .container {
+    width: 100%;
+    height: calc(100% - 120px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+aside .container ul {
+    margin: 0px;
+    padding: 0px;
+    padding-bottom: 50px;
+    box-sizing: border-box;
+}
+
+aside .container ul li {
+    list-style: none;
+    min-height: 40px;
+    text-align: left;
+    /*padding: 5px 60px;*/
+    padding: 5px 50px;
+    height: 40px;
+    margin-top: 5px 0;
+    border: 1px solid rgba(0, 0, 0, 0);
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+aside .container ul li.selected {
+    /* background-color: rgba(101, 38, 254, 0.61); */
+    background-color: rgba(95, 95, 95, 0.45);
+}
+
+aside .container ul li:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+aside .container ul li:active {
+    background-color: white;
+    color: black;
+}
+
+aside .container ul li:focus {
+    border: 1px solid white;
+}
+
+.main.right {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    left: 300px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: calc(100% - 300px);
+}
+
+.main.padding {
+    padding: 44px 60px;
+}
+
+.section {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.section.padding {
+    padding: 44px 60px;
+}

shared/html/settings/subpage.css

@@ -0,0 +1,3 @@
+body {
+    background-color: rgba(255, 255, 255, 0);
+}