changed scroll bar colors and behavior
This commit is contained in:
parent
c5603f7a7c
commit
47979f82e0
|
@ -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": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue