From 33320814167ae14e2e466c9dd46f4829db95f1a1 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 27 Nov 2019 00:42:42 +0530 Subject: [PATCH 1/4] dark theme alpha --- src/card.component.mjs | 18 +++++++-- src/card.style.mjs | 92 ++++++++++++++++++++++++++++++++++++------ src/index.html | 3 ++ 3 files changed, 96 insertions(+), 17 deletions(-) diff --git a/src/card.component.mjs b/src/card.component.mjs index 2213af4..ead4352 100644 --- a/src/card.component.mjs +++ b/src/card.component.mjs @@ -6,7 +6,7 @@ template.innerHTML = // html
- +
@@ -26,7 +26,7 @@ export class DevCard extends HTMLElement{ // Methods from parent class HTMLElement. static get observedAttributes() { - return ['data-width']; + return ['data-width', 'data-theme']; } attributeChangedCallback(attr, oldValue, newValue) { @@ -34,6 +34,11 @@ export class DevCard extends HTMLElement{ this[attr] = newValue; this.setWidth(); } + + if(attr == 'data-theme' && oldValue != newValue && newValue != ''){ + this[attr] = newValue; + this.setTheme(newValue); + } } connectedCallback(){ @@ -80,11 +85,10 @@ export class DevCard extends HTMLElement{ url: 'https://dev.to/' + this.articles[0].user.username } } - // const profilePic = this.articles[0].user.profile_image_90; header.innerHTML += // html ` - ${(data.profilePic)?`${this.articles[0].user.name}'s DEV Profile`:''} + ${(data.profilePic)?`${data.name}'s DEV Profile`:''}
${data.name}
@@ -101,6 +105,12 @@ export class DevCard extends HTMLElement{ } } + setTheme(theme){ + let card = this._shadowRoot.childNodes[2]; + card.className = ''; + card.classList.add('card',theme); + } + setWidth(){ this.style.width = this.dataset.width || '300px'; } diff --git a/src/card.style.mjs b/src/card.style.mjs index 9408e50..6931232 100644 --- a/src/card.style.mjs +++ b/src/card.style.mjs @@ -4,7 +4,70 @@ export const css = // css box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: left; font-family: Arial; + --header-bg:#111; + --header-color:#fff; + --header-logo-filter: invert(50%); + --content-bg: #fff; + --content-bghover: #eee; + --content-border: #ddd; + --content-color: #222; + --button-bg: #ddd; + --button-color: #222; + --scroll-track: #eee; + --scroll-thumb: #222; + --likes-color: #999; } + +/* DARK THEME */ +.card.dark{ + --header-bg:#111; + --header-color:#fff; + --header-logo-filter: invert(50%); + --content-bg: #212121; + --content-bghover: #282828; + --content-border: #191919; + --content-color: #686868; + --button-bg: #ddd; + --button-color: #222; + --scroll-track: #777; + --scroll-thumb: #000; + --likes-color: #555; + --likes-icon-filter: invert(90%); +} + +/* Pink Theme */ +.card.pink{ + --header-bg:#ffc0cb; + --header-color:#222; + --header-logo-filter: invert(0%); + --content-bg: #fff; + --content-bghover: #ffc0cb44; + --content-border: #ffc0cb66; + --content-color: #555; + --button-bg: #222; + --button-color: #ddd; + --scroll-track: #ffc0cb; + --scroll-thumb: #999; + --likes-color: #999; +} + +/* Ocean Theme */ +.card.ocean{ + --header-bg:#090B10; + --header-color:#999; + --header-logo-filter: invert(50%); + --content-bg: #0F101A; + --content-bghover: #111422; + --content-border: #090B10; + --content-color: #5A5B66; + --button-bg: #999; + --button-color: #222; + --scroll-track: #777; + --scroll-thumb: #000; + --likes-color: #555; + --likes-icon-filter: invert(90%); +} + .profile-pic{ position:absolute; top:23px;left:20px; @@ -12,17 +75,17 @@ export const css = // css width:70px; } .header{ - background-color:#111; - color:#fff; + background-color:var(--header-bg); + color:var(--header-color); position:relative; height:120px; overflow:hidden; } @media (max-width:768px){ - .header{background-color:#111;} + .header{background-color: var(--header-bg);} } .content{ - background-color:#fff; + background-color:var(--content-bg); max-height:300px; min-height:70px; overflow-y:scroll; @@ -33,11 +96,11 @@ export const css = // css } .content::-webkit-scrollbar-track { - background-color:#eee; + background-color: var(--scroll-track); } .content::-webkit-scrollbar-thumb { - background-color:#222; + background-color: var(--scroll-thumb); } .header > .name-container{ @@ -55,8 +118,8 @@ export const css = // css } .header > .name-container .view-profile-button{ - background-color:#ddd; - color:#222; + background-color: var(--button-bg); + color: var(--button-color); font-size:10pt; border-radius:3px; padding:5px 10px; @@ -67,18 +130,18 @@ export const css = // css .article-card{ padding:10px 10px; font-size:10pt; - border-bottom:1px solid #ddd; + border-bottom:1px solid var(--content-border); display:block; text-decoration:none; transition:background-color .5s ease; } .article-card:hover{ - background-color:#eee; + background-color: var(--content-bghover); transition:background-color .5s ease; } .article-card > .title{ text-decoration:none; - color:#111; + color: var(--content-color); font-weight:400; } @@ -88,7 +151,7 @@ export const css = // css top:10px; width:130px; opacity:.1; - filter:invert(50%); + filter:var(--header-logo-filter); z-index:1; } @@ -100,8 +163,11 @@ export const css = // css width:9px; opacity:.2; } +.card .article-icon > img{ + filter: var(--likes-icon-filter); +} .article-icon > span{ - color:#999; + color: var(--likes-color); font-size:7pt; } ` \ No newline at end of file diff --git a/src/index.html b/src/index.html index 99a9235..de539d2 100644 --- a/src/index.html +++ b/src/index.html @@ -5,6 +5,9 @@ + + + From 035cc330141ce6ef81a966b747d46eb5efb09676 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 27 Nov 2019 01:40:59 +0530 Subject: [PATCH 2/4] made scroll larger --- CHANGELOG.md | 1 + CONTRIBUTING.md | 36 +++++++++- README.md | 14 ++-- build/build.main.js | 11 +++ package-lock.json | 167 +++++++++++++++++++++++++++++++++++++++++++- package.json | 4 +- src/card.style.mjs | 11 +-- src/index.html | 2 +- 8 files changed, 231 insertions(+), 15 deletions(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..1107054 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1 @@ +***Changelogs are mentioned in the [Releases](https://github.com/saurabhdaware/DEV-widget/releases) Section*** \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b4b4cc2..ffde091 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -If you are contributing to the Open Source for the first time, You can checkout [First Time Contributors Guide](#first-time-contributors-guide) +If you are contributing to the Open Source for the first time, You can check out [First Time Contributors Guide](#first-time-contributors-guide) # Local Setup - [Fork](https://github.com/saurabhdaware/DEV-widget/fork) the repository @@ -18,7 +18,7 @@ The code is based upon web components and does not use any dependency. You can r ``` # Sending Pull Request -- Create a branch in your forked repository with relevant name (`e.g enhanced-styling`, `feature-autoreload`) +- Create a branch in your forked repository with a relevant name (`e.g enhanced-styling`, `feature-autoreload`) - Push your changes to the branch - Create a pull request from your branch to `master` of my branch. @@ -31,4 +31,34 @@ The code is based upon web components and does not use any dependency. You can r - You can checkout the [Issues](https://github.com/saurabhdaware/DEV-widget/issues) and select the one that you like (You can comment on issue with something like *"Let me work on this or I'll kill you"* to let me know that you are working on it.) - There are issues with label `Difficulty: Easy` and `Difficulty: Super Easy` which are easier to solve as compare to the other issues. Though if you know JavaScript well you can solve `Difficulty: Medium` and `Difficulty: Hard` issues as well. - Just go through the [Local Setup Guide](#local-setup) to locally setup the project -- Once you are done making changes you can create a Pull Request to the master of this (https://github.com/saurabhdaware/DEV-widget) repository. \ No newline at end of file +- Once you are done making changes you can create a Pull Request to the master of this (https://github.com/saurabhdaware/DEV-widget) repository. + + +# Other Guides + +## - Creating Themes + +Before you work on a code please create an issue and mention the colors that you want to add and wait for the response. Since adding themes increase the size of the code, only few themes will be chosen for the final version. + +Here's an example from `card.style.mjs`: +```css +.card.pink{ + --header-bg:#ffc0cb; + --header-color:#222; + --header-logo-filter: invert(0%); + --content-bg: #fff; + --content-bghover: #ffc0cb44; + --content-border: #ffc0cb66; + --content-color: #555; + --button-bg: #222; + --button-color: #ddd; + --scroll-track: #ffc0cb; + --scroll-thumb: #999; + --likes-color: #999; + --likes-icon-filter: invert(0%); +} +``` + +To create a theme named "yellow", You will have to create a css block for `.card.yellow` and set the variable names as given in the above example. + +With these settings adding `data-theme="yellow"` in the file will apply your colors to the card. \ No newline at end of file diff --git a/README.md b/README.md index bac4d7b..65417d6 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ You can use it in your website/blog and show off your DEV.to articles :sunflower - + ``` @@ -47,6 +47,7 @@ import 'dev-widget' |---------------|-------------------------------|--------------------------| | data-username | Your DEV.to Username | | | data-width | Width of the card | 300px | +| data-theme | **Theme of the card** (dark, ocean, pink, default) | default | | data-name (optional) | Name to display on card | Will be fetched from API | | data-limit | Number of articles to display | 30 | @@ -54,14 +55,19 @@ import 'dev-widget' So a full example would look something like ```html - + - + ``` --- +## Changelog +**[RELEASES](https://github.com/saurabhdaware/DEV-widget/releases)** + +--- + ## Contributing -I would love to have some of your contributions on this project. You can checkout [CONTRIBUTING.md](CONTRIBUTING.md) for Contribution guidelines. +I would love to have some of your contributions to this project. You can checkout [CONTRIBUTING.md](CONTRIBUTING.md) for Contribution guidelines. diff --git a/build/build.main.js b/build/build.main.js index 38b8907..bb67ddc 100644 --- a/build/build.main.js +++ b/build/build.main.js @@ -1,7 +1,18 @@ const fse = require('fs-extra'); +const minify = require('@node-minify/core'); +const terser = require('@node-minify/terser'); + if(fse.existsSync('dist')){ fse.removeSync('dist') } fse.copySync('src','dist'); + +minify({ + compressor: terser, + input: 'src/card.component.mjs', + output: 'dist/card.component.min.mjs', + callback: function(err, min) {} +}); + fse.writeFileSync('dist/index.js',"export * from './card.component.mjs';") \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8783cd5..e9238c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,9 +1,39 @@ { "name": "dev-widget", - "version": "0.1.0", + "version": "1.1.0-alpha.1", "lockfileVersion": 1, "requires": true, "dependencies": { + "@node-minify/core": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/@node-minify/core/-/core-5.2.1.tgz", + "integrity": "sha512-feyesnJqV6mrEIpMdWDNuRkik/t/H/oQcjF8DyGBP3CsTwI0QaBhMkwcBB5ODEL0tM9Bbxwwg9gPa+3lxWT6fw==", + "dev": true, + "requires": { + "@node-minify/utils": "^5.2.0", + "glob": "7.1.6", + "mkdirp": "0.5.1" + } + }, + "@node-minify/terser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/@node-minify/terser/-/terser-5.2.1.tgz", + "integrity": "sha512-aO8IAfKOqEO3EI0ESIv3BuJ6lzRJo0vQfumRGm4F/xJ2t8BKk622dOCb8CQUliE75Ounf3ILMiWiupTTK005BQ==", + "dev": true, + "requires": { + "@node-minify/utils": "^5.2.0", + "terser": "4.4.0" + } + }, + "@node-minify/utils": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@node-minify/utils/-/utils-5.2.0.tgz", + "integrity": "sha512-DGr96beummKXoSj5yoFYlbZWB30AWkBRnYI5N+Mtil6d0cpGcOas/MESs3v71SqZnWoKaFRuG/LhErl9/RuipQ==", + "dev": true, + "requires": { + "gzip-size": "5.1.1" + } + }, "@zeit/schemas": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.6.0.tgz", @@ -99,6 +129,12 @@ "concat-map": "0.0.1" } }, + "buffer-from": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", + "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", + "dev": true + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -170,6 +206,12 @@ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", "dev": true }, + "commander": { + "version": "2.20.3", + "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", + "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", + "dev": true + }, "compressible": { "version": "2.0.17", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz", @@ -232,6 +274,12 @@ "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true }, + "duplexer": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", + "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=", + "dev": true + }, "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", @@ -293,24 +341,70 @@ "universalify": "^0.1.0" } }, + "fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true + }, "get-stream": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "dev": true }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, "graceful-fs": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.2.tgz", "integrity": "sha512-IItsdsea19BoLC7ELy13q1iJFNmd7ofZH5+X/pJr90/nRoPEX0DJo1dHDbgtYWOhJhcCgMDTOw84RZ72q6lB+Q==", "dev": true }, + "gzip-size": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz", + "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==", + "dev": true, + "requires": { + "duplexer": "^0.1.1", + "pify": "^4.0.1" + } + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, + "inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, + "requires": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, "ini": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", @@ -390,6 +484,23 @@ "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, + "mkdirp": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "dev": true, + "requires": { + "minimist": "0.0.8" + }, + "dependencies": { + "minimist": { + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "dev": true + } + } + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -417,12 +528,27 @@ "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", "dev": true }, + "once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, + "requires": { + "wrappy": "1" + } + }, "p-finally": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=", "dev": true }, + "path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true + }, "path-is-inside": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", @@ -441,6 +567,12 @@ "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ==", "dev": true }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true + }, "pseudomap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", @@ -567,6 +699,22 @@ "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-support": { + "version": "0.5.16", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz", + "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==", + "dev": true, + "requires": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, "string-width": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", @@ -616,6 +764,17 @@ "execa": "^0.7.0" } }, + "terser": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/terser/-/terser-4.4.0.tgz", + "integrity": "sha512-oDG16n2WKm27JO8h4y/w3iqBGAOSCtq7k8dRmrn4Wf9NouL0b2WpMHGChFGZq4nFAQy1FsNJrVQHfurXOSTmOA==", + "dev": true, + "requires": { + "commander": "^2.20.0", + "source-map": "~0.6.1", + "source-map-support": "~0.5.12" + } + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -665,6 +824,12 @@ "string-width": "^2.1.1" } }, + "wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true + }, "yallist": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", diff --git a/package.json b/package.json index f3e62f4..685c869 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dev-widget", - "version": "1.0.3", + "version": "1.1.0-beta.1", "description": "Unofficial Widget of DEV", "main": "dist/index.js", "module": "dist/index.js", @@ -27,6 +27,8 @@ }, "homepage": "https://github.com/saurabhdaware/DEV-widget#readme", "devDependencies": { + "@node-minify/core": "^5.2.1", + "@node-minify/terser": "^5.2.1", "fs-extra": "^8.1.0", "serve": "^11.2.0" } diff --git a/src/card.style.mjs b/src/card.style.mjs index 6931232..db3afae 100644 --- a/src/card.style.mjs +++ b/src/card.style.mjs @@ -14,7 +14,7 @@ export const css = // css --button-bg: #ddd; --button-color: #222; --scroll-track: #eee; - --scroll-thumb: #222; + --scroll-thumb: #666; --likes-color: #999; } @@ -46,8 +46,8 @@ export const css = // css --content-color: #555; --button-bg: #222; --button-color: #ddd; - --scroll-track: #ffc0cb; - --scroll-thumb: #999; + --scroll-track: transparent; + --scroll-thumb: #ffc0cb; --likes-color: #999; } @@ -62,7 +62,7 @@ export const css = // css --content-color: #5A5B66; --button-bg: #999; --button-color: #222; - --scroll-track: #777; + --scroll-track: #444; --scroll-thumb: #000; --likes-color: #555; --likes-icon-filter: invert(90%); @@ -92,7 +92,7 @@ export const css = // css } .content::-webkit-scrollbar { - width: 1px; + width: 2px; } .content::-webkit-scrollbar-track { @@ -101,6 +101,7 @@ export const css = // css .content::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); + border-radius: 5px; } .header > .name-container{ diff --git a/src/index.html b/src/index.html index de539d2..32b32a0 100644 --- a/src/index.html +++ b/src/index.html @@ -9,6 +9,6 @@ - + \ No newline at end of file From 9b132c5a8092e0a5def44da2b29db5f50e2cd2d0 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 27 Nov 2019 02:39:53 +0530 Subject: [PATCH 3/4] 1.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 685c869..827e347 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dev-widget", - "version": "1.1.0-beta.1", + "version": "1.1.0", "description": "Unofficial Widget of DEV", "main": "dist/index.js", "module": "dist/index.js", From d8f639e0cdb28e515e1269bb5ff0c34b4184dcd9 Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Wed, 27 Nov 2019 02:44:26 +0530 Subject: [PATCH 4/4] themes section added to readme --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 65417d6..fb435f9 100644 --- a/README.md +++ b/README.md @@ -61,6 +61,11 @@ So a full example would look something like ``` +--- +## Themes +`default` `ocean` `pink` `dark` +![DEV Widget themes](https://res.cloudinary.com/saurabhdaware/image/upload/v1574802681/saurabhdawaretk/dev-widget-2.png) + --- ## Changelog