UI

app/app-detail.component.css

 :host {
     /*background-color: #c3d9ff;*/
     flex-grow: 1;
-    overflow-y: auto;
+    position: relative;
+}
+:host:before {
+    content: '';
+    background-image: url('http://vignette2.wikia.nocookie.net/touhou/images/2/2c/Th10_cover.jpg/revision/latest?cb=20071101234746');
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    filter: grayscale(50%) opacity(10%);
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+
+}
+.scroll {
     padding: 1rem;
+    height: 100%;
 }
 
 .actions {

app/app-detail.component.html

+<div class="scroll">
 <h1>{{currentApp.name}}</h1>
 <!--应用未安装-->
 <div class="actions" *ngIf="!currentApp.isInstalled()">
@@ -177,3 +178,4 @@
         </form>
     </div>
 </div>
+</div>
\ No newline at end of file

app/lobby.component.css

 :host {
     display: flex;
+}
+#right {
+    display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 
 #main {
@@ -10,7 +14,13 @@
 
 #candy {
     background-color: #444;
-    height: 236px;
+    height: 230px;
+    flex-shrink: 0;
+}
+
+roster {
+    width: 190px;
+    background-color: #f7f7f9;
     flex-shrink: 0;
 }
 
@@ -32,7 +42,10 @@
 /*}*/
 
 span {
-    margin-left: 8px;
+    margin: 12px 0 8px 8px;
+    color: #a7a7a7;
+    font-size: 14px;
+    display: block;
 }
 
 .actions {
@@ -105,18 +118,14 @@ span {
 }
 
 .sidebar {
-    width: 240px;
+    width: 190px;
     flex-shrink: 0;
-    overflow-y: auto;
-    background-color: #f5f5f5;
+    background-color: #f7f7f9;
     border-right: 1px solid #eee;
-    padding-top: 10px;
-}
-
-/* Sidebar navigation */
-.sidebar {
     padding-left: 0;
     padding-right: 0;
+    padding-top: 20px;
+
 }
 
 .sidebar .nav {
@@ -134,3 +143,42 @@ span {
 .sidebar .nav-link {
     border-radius: 0;
 }
+
+.nav-link {
+    padding: .3em 1em;
+    color: black;
+    font-size: 15px;
+}
+
+.nav-link.active {
+    background-color: #ebf3f8;
+    color: #00a4d9;
+}
+
+a {
+    cursor: default;
+}
+.search {
+    background-color: #ebf3f8;
+    border: none;
+}
+i.search {
+    color: #a7a7a7;
+}
+input.search {
+    padding-left: 0;
+    font-size: 14px;
+    font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
+}
+input.search::-webkit-input-placeholder{
+    color: #a7a7a7;
+}
+
+#search {
+    padding: 0 10px;
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+}
\ No newline at end of file

app/lobby.component.html

 <!-- Begin page content -->
-<div id="main">
-    <nav id="apps" *ngIf="apps" class="bg-faded sidebar">
+<nav id="apps" *ngIf="apps" class="bg-faded sidebar scroll">
+    <div id="search" class="input-group">
+        <i class="fa fa-search input-group-addon search" id="basic-addon1"></i>
+        <input type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
+    </div>
+
+
     <span i18n *ngIf="grouped_apps.installed">已安装</span>
     <ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
         <li *ngFor="let app of grouped_apps.installed" class="nav-item">
-                <a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">{{app.name}}<i
+            <a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">
+                <img class="icon" src="https://lh3.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAAA/AKB_U8u0CDmxkVqQgOKesrJIb-6eiXacgA/s32-c-mo/photo.jpg">
+                {{app.name}}<i
                     *ngIf="!app.isReady() && !app.status.total" class="spin fa fa-circle-o-notch fa-spin fa-fw"></i>
                 <div *ngIf="!app.isReady() && app.status.total" class="progress">
                     <div class="pie" [class.second-half]="app.status.progress/app.status.total>0.5">
@@ -47,10 +54,15 @@
             <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
         </li>
     </ul>
-    </nav>
+</nav>
+
+<div id="right">
+
+<div id="main">
     <app-detail *ngIf="currentApp" [currentApp]="currentApp"></app-detail>
-    <roster></roster>
+    <roster class="scroll"></roster>
 </div>
 
 <webview *ngIf="currentApp" #candy id="candy" [src]="candy_url" (new-window)="openExternal($event.url)"
          nodeintegration></webview>
+</div>

app/mycard.component.css

@@ -6,9 +6,9 @@
 #avatar {
     display: block;
     float: left;
-    border-radius: 50%;
-    height: 2rem;
-    margin-top: 0.175rem;
+    border-radius: 10%;
+    height: 1.5rem;
+    margin-top: 0.475rem;
 }
 
 .item {
@@ -16,9 +16,17 @@
     float: left;
     padding-top: .425rem;
     padding-bottom: .425rem;
-    margin-left: 4px;
-    color: #eceeef;
+    margin: 0 0.8rem;
     text-decoration: none;
+    color: #a7a7a7;
+}
+.item-icon {
+    color: #a7a7a7;
+    font-size: 18px;
+    margin: .6rem .3rem;
+}
+.item:hover, .item-icon:hover, .nav-link:hover {
+    color: #5e5e5e;
 }
 
 #update-status > i {
@@ -28,10 +36,6 @@
     padding-bottom: .425rem;
 }
 
-.item:hover, li > a:hover {
-    color: #fff;
-}
-
 a {
     cursor: default;
 }
@@ -44,3 +48,34 @@ lobby[hidden], webview[hidden] {
     display: inherit !important;
     overflow: hidden;
 }
+
+#navbar {
+    background-color: #f7f7f9!important;
+    padding: 0;
+}
+
+#navbar-brand {
+    color: #00a4d9;
+    font-size: 24px;
+    width: 190px;
+    margin: 0;
+    text-align: center;
+}
+
+#navbar .nav-link {
+    font-size: 18px;
+    color: #a7a7a7;
+    padding: .8rem 1.2em;
+}
+.nav-item.active {
+    background-color: white;
+}
+#navbar .nav-item.active .nav-link {
+    color: #00a4d9;
+}
+
+#border {
+    margin: .2rem 0.4rem;
+    color: #a7a7a7;
+    font-size: 1.2rem;
+}
\ No newline at end of file

app/mycard.component.html

-<nav id="navbar" class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
-    <a class="navbar-brand" href="#">MyCard</a>
+<nav id="navbar" class="navbar navbar-toggleable-md navbar-light">
+    <a id="navbar-brand" class="navbar-brand" href="#">MyCard</a>
     <ul class="navbar-nav mr-auto">
         <li *ngIf="!loginService.logged_in" class="nav-item active">
             <a i18n class="nav-link" href="#">登录</a>
         </li>
-        <!--
-        <li [ngClass]="{active: routingService.component == 'store'}" class="nav-item">
-            <a (click)="changeFouce('store')" class="nav-link" href="#">商店</a>
-        </li>
-        -->
+
+        <!--<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'store'}" class="nav-item">-->
+            <!--<a (click)="currentPage = 'store'" class="nav-link" href="#">商店</a>-->
+        <!--</li>-->
+
         <li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'lobby'}" class="nav-item">
             <a i18n (click)="currentPage='lobby'" class="nav-link" href="#">游戏</a>
         </li>
@@ -29,9 +29,10 @@
         <div id="user" *ngIf="loginService.logged_in">
             <a href="#" class="profile"><img id="avatar" [src]="loginService.user.avatar_url" alt="image"></a>
             <a href="#" class="profile item" id="username">{{loginService.user.username}}</a>
-            <a i18n href="#" (click)="loginService.logout()" class="item">切换账号</a>
-            <a i18n href="#" data-toggle="modal" data-target="#settings-modal" class="item">设置</a>
+            <i (click)="loginService.logout()" class="fa fa-sign-out item-icon" aria-hidden="true"></i>
+            <i data-toggle="modal" data-target="#settings-modal" class="fa fa-cog item-icon" aria-hidden="true"></i>
         </div>
+        <div id="border">|</div>
         <div id="window-buttons">
             <i (click)="currentWindow.minimize()" class="fa fa-minus"></i>
             <i *ngIf="!currentWindow.isMaximized()" (click)="currentWindow.maximize()" class="fa fa-expand"></i>

app/roster.component.css

-:host {
-    background-color: bisque;
-
-    display: none;
-
-    width: 250px;
-}
\ No newline at end of file

candy.html

@@ -4,12 +4,45 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Candy - Chats are not dead yet</title>
+    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="node_modules/candy/libs.min.css"/>
     <link rel="stylesheet" type="text/css" href="node_modules/candy/res/default.css"/>
     <style>
         body {
             font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
         }
+        /* Turn on custom 8px wide scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px; /* 1px wider than Lion. */
+            /* This is more usable for users trying to click it. */
+            background-color: rgba(0,0,0,0);
+            -webkit-border-radius: 100px;
+        }
+        /* hover effect for both scrollbar area, and scrollbar 'thumb' */
+        ::-webkit-scrollbar:active {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+        ::-webkit-scrollbar-thumb:vertical {
+            /* This is the EXACT color of Mac OS scrollbars.
+               Yes, I pulled out digital color meter */
+            background: rgba(0,0,0,0.1);
+            -webkit-border-radius: 100px;
+        }
+        ::-webkit-scrollbar-thumb:vertical:active {
+            background: rgba(0,0,0,0.2); /* Some darker color when you click it */
+            -webkit-border-radius: 100px;
+        }
+
+        .scroll {
+            overflow-y: hidden;
+        }
+
+        .scroll:hover {
+            overflow-y: auto;
+
+        }
     </style>
 
     <script>delete module.exports</script>
@@ -47,6 +80,93 @@
     <!--正在输入那个插件不好用-->
     <!--<script type="text/javascript" src="node_modules/candy-shop/typingnotifications/typingnotifications.js"></script>-->
     <!--<link rel="stylesheet" type="text/css" href="node_modules/candy-shop/typingnotifications/typingnotifications.css" />-->
+    <style>
+        .message-pane-wrapper, .message-form-wrapper {
+            margin-right: 190px;
+        }
+        .roster-pane, #chat-toolbar{
+            width: 190px
+        }
+    </style>
+    <style>
+        #candy {
+            background-color: #f7f7f9;
+        }
+        #chat-tabs li {
+            box-shadow: 0 0 1px 1px #ccc;
+        }
+        #chat-tabs a {
+            color: #999;
+            background-color: #ececec;
+        }
+        #chat-tabs .active a.label {
+            background-color: white;
+        }
+        #chat-tabs .active .transition, #chat-tabs .transition {
+            background: none;
+            /*background-color: white;*/
+        }
+        .message-pane-wrapper{
+            background-color: white;
+            padding: 0;
+        }
+        .message-pane li {
+            border-bottom: none;
+            box-shadow: none;
+            padding: 0 5px;
+        }
+        .message-pane li>div {
+            padding: 0 0 0 150px;
+            line-height: 28px;
+        }
+        .message-pane .label {
+            margin-left: -150px;
+            width: 130px;
+        }
+        .roster-pane {
+            background-color: initial;
+            border-top: none;
+            box-shadow: none;
+            margin: 30px 0 32px 0;
+        }
+        .roster-pane .user {
+            border-bottom: none;
+            box-shadow: none;
+            color: black;
+        }
+        .roster-pane .user:hover {
+            background-color: #ebf3f8;
+        }
+        #chat-toolbar {
+            background-color: initial;
+            border-top: 1px solid #eee;
+            box-shadow: none;
+        }
+        .message-form-wrapper {
+            border-top: 1px solid #eee;
+        }
+        .roster-pane .label{
+            text-shadow: none
+        }
+        #candy {
+            border-top: 1px solid #eee;
+            box-shadow: inset 0 1px 2px white;
+        }
+
+        .usercount span {
+            background-color: initial;
+            color: #a7a7a7;
+        }
+
+        /*#chat-toolbar #emoticons-icon, #chat-toolbar .usercount {*/
+            /*background-image: initial;*/
+        /*}*/
+
+        /*#chat-toolbar #emoticons-icon::before, #chat-toolbar .usercount::before {*/
+            /*font-size: 16px;*/
+        /*}*/
+
+</style>
 </head>
 <body>
 <div id="candy"></div>
@@ -71,6 +191,7 @@
     const params = new URLSearchParams(location.search);
 
     Candy.View.Template.Login.form = '<form method="post" id="login-form" class="login-form">' + '<input type="hidden" id="nickname" name="nickname" value="' + params.get('nickname') + '"/>' + '{{#displayUsername}}<input type="hidden" id="username" name="username" value="' + params.get('jid') + '"/>' + '{{#displayDomain}} <span class="at-symbol">@</span> ' + '<select id="domain" name="domain">{{#domains}}<option value="{{domain}}">{{domain}}</option>{{/domains}}</select>' + "{{/displayDomain}}" + "{{/displayUsername}}" + '{{#presetJid}}<input type="hidden" id="username" name="username" value="{{presetJid}}"/>{{/presetJid}}' + '{{#displayPassword}}<input type="hidden" id="password" name="password" value="' + params.get('password') + '"/>{{/displayPassword}}' + '<input type="submit" class="button" value="{{_loginSubmit}}" /></form>';
+//    Candy.View.Template.Chat.toolbar = '<ul id="chat-toolbar">' + '<li id="emoticons-icon" class="fa fa-smile-o" data-tooltip="{{tooltipEmoticons}}"></li>' + '<li id="chat-sound-control" class="checked" data-tooltip="{{tooltipSound}}"></li>' + '<li class="checked" id="chat-statusmessage-control" data-tooltip="{{tooltipStatusmessage}}">' + '</li><li class="context" data-tooltip="{{tooltipAdministration}}"></li>' + '<li class="usercount fa fa-user-o" data-tooltip="{{tooltipUsercount}}">' + '<span id="chat-usercount"></span></li></ul>',
 
     Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
     Candy.init('wss://chat.mycard.moe:5280/websocket', {

styles.css

@@ -17,12 +17,13 @@ mycard {
 }
 
 #window-buttons > i {
-    color: rgba(255, 255, 255, .75);
-    margin: .5rem;
+    color: #a7a7a7;
+    font-size: 18px;
+    margin: .6rem .3rem;
 }
 
 #window-buttons > i:hover {
-    color: #fff;
+    color: #5e5e5e;
 }
 
 #navbar {
@@ -36,11 +37,44 @@ mycard {
     -webkit-app-region: no-drag;
 }
 
-#navbar-right > div, #user > .item {
+#navbar-right > div {
     float: left;
-    margin: 0 0.5rem;
+    margin: 0 0.3rem;
 }
 
 .darwin #navbar {
     padding-left: 80px;
 }
+
+/* Turn on custom 8px wide scrollbar */
+::-webkit-scrollbar {
+    width: 8px; /* 1px wider than Lion. */
+    /* This is more usable for users trying to click it. */
+    background-color: rgba(0,0,0,0);
+    -webkit-border-radius: 100px;
+}
+/* hover effect for both scrollbar area, and scrollbar 'thumb' */
+::-webkit-scrollbar:active {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
+::-webkit-scrollbar-thumb:vertical {
+    /* This is the EXACT color of Mac OS scrollbars.
+       Yes, I pulled out digital color meter */
+    background: rgba(0,0,0,0.1);
+    -webkit-border-radius: 100px;
+}
+::-webkit-scrollbar-thumb:vertical:active {
+    background: rgba(0,0,0,0.2); /* Some darker color when you click it */
+    -webkit-border-radius: 100px;
+}
+
+.scroll {
+    overflow-y: hidden;
+}
+
+.scroll:hover {
+    overflow-y: auto;
+
+}