changed scroll bar colors and behavior

This commit is contained in:
Nicolas Constant 2018-08-02 23:00:23 -04:00
parent c5603f7a7c
commit 47979f82e0
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
9 changed files with 83 additions and 7 deletions

View File

@ -21,10 +21,13 @@
"src/favicon.ico"
],
"styles": [
"./node_modules/simplebar/dist/simplebar.min.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": []
"scripts": [
"./node_modules/simplebar/dist/simplebar.min.js"
]
},
"configurations": {
"production": {

31
package-lock.json generated
View File

@ -1950,6 +1950,11 @@
"map-obj": "^1.0.0"
}
},
"can-use-dom": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
},
"caniuse-lite": {
"version": "1.0.30000865",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000865.tgz",
@ -6664,6 +6669,11 @@
"integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
"dev": true
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"log-symbols": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@ -8992,6 +9002,11 @@
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"resize-observer-polyfill": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
"integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
},
"resolve": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
@ -9152,6 +9167,11 @@
"ajv-keywords": "^3.1.0"
}
},
"scrollbarwidth": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz",
"integrity": "sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98="
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@ -9402,6 +9422,17 @@
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true
},
"simplebar": {
"version": "3.0.0-beta.1",
"resolved": "https://registry.npmjs.org/simplebar/-/simplebar-3.0.0-beta.1.tgz",
"integrity": "sha1-ds6twWr3YtBAR+7MwXDh7D6U41c=",
"requires": {
"can-use-dom": "^0.1.0",
"lodash.throttle": "^4.1.1",
"resize-observer-polyfill": "^1.5.0",
"scrollbarwidth": "^0.1.3"
}
},
"single-line-log": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/single-line-log/-/single-line-log-1.1.2.tgz",

View File

@ -29,6 +29,7 @@
"core-js": "^2.5.4",
"ngx-electron": "^1.0.4",
"rxjs": "^6.0.0",
"simplebar": "^3.0.0-beta.1",
"zone.js": "^0.8.26"
},
"devDependencies": {

View File

@ -15,7 +15,7 @@
#mam-create-toot a {
font-size: 0.8em;
color: white;
/* color: white; */
text-decoration: none;
margin: 0 0 0 10px;
}
@ -43,9 +43,13 @@
/* background-color: black; */
}
#mam-account-add a {
a {
font-size: 2em;
color: white;
color: #595c67;
text-decoration: none;
margin: 10px 0 0 15px;
}
a:hover {
color: #8f93a2;
}

View File

@ -2,7 +2,7 @@
<div id="mam-stream-header">
<a href title="return to top" (click)="goToTop()"><h1>{{ stream.streamName.toUpperCase() }}</h1></a>
</div>
<div id="mam-stream-toots">
<div id="mam-stream-toots" data-simplebar>
<div *ngFor="let toot of toots">
<app-toot [toot]="toot"></app-toot>
</div>

View File

@ -26,7 +26,10 @@ export class StreamComponent implements OnInit {
toots: TootWrapper[] = [];
constructor() { }
constructor(){
// var simplebar = new SimpleBar(document.querySelector('#mam-stream-toots'), { autoHide: true });
}
ngOnInit() {
//Stubs

View File

@ -18,3 +18,36 @@
white-space: normal;
margin-left: 7px;
}
.flexcroll{
scrollbar-face-color: #08090d;
scrollbar-shadow-color: #08090d;
scrollbar-highlight-color: #08090d;
scrollbar-3dlight-color: #08090d;
scrollbar-darkshadow-color: #08090d;
scrollbar-track-color: #08090d;
scrollbar-arrow-color: #08090d;
}
/* Let's get this party started */
.flexcroll::-webkit-scrollbar {
/* width: 16px !important; */
height: 7px;
}
/* Track */
/* .flexcroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
} */
/* Handle */
.flexcroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
/* background: rgba(255,0,0,0.8); */
background: #08090d;
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}

View File

@ -1,4 +1,4 @@
<div id="mam-main-display">
<div id="mam-main-display" class="flexcroll">
<div *ngFor="let s of streams" class="mam-stream-column">
<app-stream [stream]="s"></app-stream>
</div>

View File

@ -9,6 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>