Skip to content

M
moecube
Commit a85894c9 authored by hjistc's avatar hjistc
Browse files
Options

UI

parent 07328b74
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 91 deletions
app/app-detail.component.css
View file @ a85894c9
:host { :host {
/*background-color: #c3d9ff;*/ /*background-color: #c3d9ff;*/
flex-grow: 1; 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; padding: 1rem;
height: 100%;
} }
.actions { .actions {
......
app/app-detail.component.html
View file @ a85894c9
<div class="scroll">
<h1>{{currentApp.name}}</h1> <h1>{{currentApp.name}}</h1>
<!--应用未安装--> <!--应用未安装-->
<div class="actions" *ngIf="!currentApp.isInstalled()"> <div class="actions" *ngIf="!currentApp.isInstalled()">
...@@ -176,4 +177,5 @@ ...@@ -176,4 +177,5 @@
</div> </div>
</form> </form>
</div> </div>
</div>
</div> </div>
\ No newline at end of file
app/lobby.component.css
View file @ a85894c9
:host { :host {
display: flex; display: flex;
}
#right {
display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1;
} }
#main { #main {
...@@ -10,7 +14,13 @@ ...@@ -10,7 +14,13 @@
#candy { #candy {
background-color: #444; background-color: #444;
height: 236px; height: 230px;
flex-shrink: 0;
}
roster {
width: 190px;
background-color: #f7f7f9;
flex-shrink: 0; flex-shrink: 0;
} }
...@@ -32,7 +42,10 @@ ...@@ -32,7 +42,10 @@
/*}*/ /*}*/
span { span {
margin-left: 8px; margin: 12px 0 8px 8px;
color: #a7a7a7;
font-size: 14px;
display: block;
} }
.actions { .actions {
...@@ -105,18 +118,14 @@ span { ...@@ -105,18 +118,14 @@ span {
} }
.sidebar { .sidebar {
width: 240px; width: 190px;
flex-shrink: 0; flex-shrink: 0;
overflow-y: auto; background-color: #f7f7f9;
background-color: #f5f5f5;
border-right: 1px solid #eee; border-right: 1px solid #eee;
padding-top: 10px;
}
/* Sidebar navigation */
.sidebar {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
padding-top: 20px;
} }
.sidebar .nav { .sidebar .nav {
...@@ -133,4 +142,43 @@ span { ...@@ -133,4 +142,43 @@ span {
.sidebar .nav-link { .sidebar .nav-link {
border-radius: 0; 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
View file @ a85894c9
<!-- Begin page content --> <!-- Begin page content -->
<div id="main"> <nav id="apps" *ngIf="apps" class="bg-faded sidebar scroll">
<nav id="apps" *ngIf="apps" class="bg-faded sidebar"> <div id="search" class="input-group">
<span i18n *ngIf="grouped_apps.installed">已安装</span> <i class="fa fa-search input-group-addon search" id="basic-addon1"></i>
<ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column"> <input type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
<li *ngFor="let app of grouped_apps.installed" class="nav-item"> </div>
<a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">{{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"> <span i18n *ngIf="grouped_apps.installed">已安装</span>
<div class="pie" [class.second-half]="app.status.progress/app.status.total>0.5"> <ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
<div class="left-side half-circle" <li *ngFor="let app of grouped_apps.installed" class="nav-item">
[style.transform]="'rotate('+(app.status.progress/app.status.total).toString()+'turn)'"></div> <a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">
<div class="right-side half-circle"></div> <img class="icon" src="https://lh3.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAAA/AKB_U8u0CDmxkVqQgOKesrJIb-6eiXacgA/s32-c-mo/photo.jpg">
</div> {{app.name}}<i
<div class="shadow"></div> *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">
<div class="left-side half-circle"
[style.transform]="'rotate('+(app.status.progress/app.status.total).toString()+'turn)'"></div>
<div class="right-side half-circle"></div>
</div> </div>
</a> <div class="shadow"></div>
</li> </div>
</ul> </a>
<span i18n *ngIf="grouped_apps.recommend">推荐</span> </li>
<ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column"> </ul>
<li *ngFor="let app of grouped_apps.recommend" class="nav-item"> <span i18n *ngIf="grouped_apps.recommend">推荐</span>
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a> <ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column">
</li> <li *ngFor="let app of grouped_apps.recommend" class="nav-item">
</ul> <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
<span i18n *ngIf="grouped_apps.mysterious">迷之物体</span> </li>
<ul *ngIf="grouped_apps.mysterious" class="nav nav-pills flex-column"> </ul>
<li *ngFor="let app of grouped_apps.mysterious" class="nav-item"> <span i18n *ngIf="grouped_apps.mysterious">迷之物体</span>
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a> <ul *ngIf="grouped_apps.mysterious" class="nav nav-pills flex-column">
</li> <li *ngFor="let app of grouped_apps.mysterious" class="nav-item">
</ul> <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
<span i18n *ngIf="grouped_apps.touhou">东方 Project</span> </li>
<ul *ngIf="grouped_apps.touhou" class="nav nav-pills flex-column"> </ul>
<li *ngFor="let app of grouped_apps.touhou" class="nav-item"> <span i18n *ngIf="grouped_apps.touhou">东方 Project</span>
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a> <ul *ngIf="grouped_apps.touhou" class="nav nav-pills flex-column">
</li> <li *ngFor="let app of grouped_apps.touhou" class="nav-item">
</ul> <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
<span i18n *ngIf="grouped_apps.touhou_pc98">东方旧作</span> </li>
<ul *ngIf="grouped_apps.touhou_pc98" class="nav nav-pills flex-column"> </ul>
<li *ngFor="let app of grouped_apps.touhou_pc98" class="nav-item"> <span i18n *ngIf="grouped_apps.touhou_pc98">东方旧作</span>
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a> <ul *ngIf="grouped_apps.touhou_pc98" class="nav nav-pills flex-column">
</li> <li *ngFor="let app of grouped_apps.touhou_pc98" class="nav-item">
</ul> <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
<span i18n *ngIf="grouped_apps.runtime_installed">已安装的运行库</span> </li>
<ul *ngIf="grouped_apps.runtime_installed" class="nav nav-pills flex-column"> </ul>
<li *ngFor="let app of grouped_apps.runtime_installed" class="nav-item"> <span i18n *ngIf="grouped_apps.runtime_installed">已安装的运行库</span>
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a> <ul *ngIf="grouped_apps.runtime_installed" class="nav nav-pills flex-column">
</li> <li *ngFor="let app of grouped_apps.runtime_installed" class="nav-item">
</ul> <a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</nav> </li>
</ul>
</nav>
<div id="right">
<div id="main">
<app-detail *ngIf="currentApp" [currentApp]="currentApp"></app-detail> <app-detail *ngIf="currentApp" [currentApp]="currentApp"></app-detail>
<roster></roster> <roster class="scroll"></roster>
</div> </div>
<webview *ngIf="currentApp" #candy id="candy" [src]="candy_url" (new-window)="openExternal($event.url)" <webview *ngIf="currentApp" #candy id="candy" [src]="candy_url" (new-window)="openExternal($event.url)"
nodeintegration></webview> nodeintegration></webview>
</div>
app/mycard.component.css
View file @ a85894c9
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
#avatar { #avatar {
display: block; display: block;
float: left; float: left;
border-radius: 50%; border-radius: 10%;
height: 2rem; height: 1.5rem;
margin-top: 0.175rem; margin-top: 0.475rem;
} }
.item { .item {
...@@ -16,9 +16,17 @@ ...@@ -16,9 +16,17 @@
float: left; float: left;
padding-top: .425rem; padding-top: .425rem;
padding-bottom: .425rem; padding-bottom: .425rem;
margin-left: 4px; margin: 0 0.8rem;
color: #eceeef;
text-decoration: none; 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 { #update-status > i {
...@@ -28,10 +36,6 @@ ...@@ -28,10 +36,6 @@
padding-bottom: .425rem; padding-bottom: .425rem;
} }
.item:hover, li > a:hover {
color: #fff;
}
a { a {
cursor: default; cursor: default;
} }
...@@ -43,4 +47,35 @@ lobby[hidden], webview[hidden] { ...@@ -43,4 +47,35 @@ lobby[hidden], webview[hidden] {
flex: 0 1; flex: 0 1;
display: inherit !important; display: inherit !important;
overflow: hidden; 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
View file @ a85894c9
<nav id="navbar" class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <nav id="navbar" class="navbar navbar-toggleable-md navbar-light">
<a class="navbar-brand" href="#">MyCard</a> <a id="navbar-brand" class="navbar-brand" href="#">MyCard</a>
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li *ngIf="!loginService.logged_in" class="nav-item active"> <li *ngIf="!loginService.logged_in" class="nav-item active">
<a i18n class="nav-link" href="#">登录</a> <a i18n class="nav-link" href="#">登录</a>
</li> </li>
<!--
<li [ngClass]="{active: routingService.component == 'store'}" class="nav-item"> <!--<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'store'}" class="nav-item">-->
<a (click)="changeFouce('store')" class="nav-link" href="#">商店</a> <!--<a (click)="currentPage = 'store'" class="nav-link" href="#">商店</a>-->
</li> <!--</li>-->
-->
<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'lobby'}" class="nav-item"> <li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'lobby'}" class="nav-item">
<a i18n (click)="currentPage='lobby'" class="nav-link" href="#">游戏</a> <a i18n (click)="currentPage='lobby'" class="nav-link" href="#">游戏</a>
</li> </li>
...@@ -29,9 +29,10 @@ ...@@ -29,9 +29,10 @@
<div id="user" *ngIf="loginService.logged_in"> <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"><img id="avatar" [src]="loginService.user.avatar_url" alt="image"></a>
<a href="#" class="profile item" id="username">{{loginService.user.username}}</a> <a href="#" class="profile item" id="username">{{loginService.user.username}}</a>
<a i18n href="#" (click)="loginService.logout()" class="item">切换账号</a> <i (click)="loginService.logout()" class="fa fa-sign-out item-icon" aria-hidden="true"></i>
<a i18n href="#" data-toggle="modal" data-target="#settings-modal" class="item">设置</a> <i data-toggle="modal" data-target="#settings-modal" class="fa fa-cog item-icon" aria-hidden="true"></i>
</div> </div>
<div id="border">|</div>
<div id="window-buttons"> <div id="window-buttons">
<i (click)="currentWindow.minimize()" class="fa fa-minus"></i> <i (click)="currentWindow.minimize()" class="fa fa-minus"></i>
<i *ngIf="!currentWindow.isMaximized()" (click)="currentWindow.maximize()" class="fa fa-expand"></i> <i *ngIf="!currentWindow.isMaximized()" (click)="currentWindow.maximize()" class="fa fa-expand"></i>
......
app/roster.component.css
View file @ a85894c9
:host {
background-color: bisque;
display: none;
width: 250px;
}
\ No newline at end of file
candy.html
View file @ a85894c9
...@@ -4,12 +4,45 @@ ...@@ -4,12 +4,45 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Candy - Chats are not dead yet</title> <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/libs.min.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/candy/res/default.css"/> <link rel="stylesheet" type="text/css" href="node_modules/candy/res/default.css"/>
<style> <style>
body { body {
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif; 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> </style>
<script>delete module.exports</script> <script>delete module.exports</script>
...@@ -47,6 +80,93 @@ ...@@ -47,6 +80,93 @@
<!--正在输入那个插件不好用--> <!--正在输入那个插件不好用-->
<!--<script type="text/javascript" src="node_modules/candy-shop/typingnotifications/typingnotifications.js"></script>--> <!--<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" />--> <!--<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> </head>
<body> <body>
<div id="candy"></div> <div id="candy"></div>
...@@ -71,6 +191,7 @@ ...@@ -71,6 +191,7 @@
const params = new URLSearchParams(location.search); 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.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.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.init('wss://chat.mycard.moe:5280/websocket', { Candy.init('wss://chat.mycard.moe:5280/websocket', {
......
styles.css
View file @ a85894c9
...@@ -17,12 +17,13 @@ mycard { ...@@ -17,12 +17,13 @@ mycard {
} }
#window-buttons > i { #window-buttons > i {
color: rgba(255, 255, 255, .75); color: #a7a7a7;
margin: .5rem; font-size: 18px;
margin: .6rem .3rem;
} }
#window-buttons > i:hover { #window-buttons > i:hover {
color: #fff; color: #5e5e5e;
} }
#navbar { #navbar {
...@@ -36,11 +37,44 @@ mycard { ...@@ -36,11 +37,44 @@ mycard {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
#navbar-right > div, #user > .item { #navbar-right > div {
float: left; float: left;
margin: 0 0.5rem; margin: 0 0.3rem;
} }
.darwin #navbar { .darwin #navbar {
padding-left: 80px; padding-left: 80px;
} }
\ No newline at end of file
/* 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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment