diff --git a/dist/main.css b/dist/main.css index b875672..0ecb17b 100644 --- a/dist/main.css +++ b/dist/main.css @@ -1 +1,2 @@ -html,body{margin:0;padding:0;background-color:#262626;font-family:verdana,arial,helvetica,sans-serif}.wait{cursor:wait}.main{margin:15px;color:#fff}.removed{background-color:#840c09}.deleted{background-color:#00007d}.removed-text{color:#c70300}.deleted-text{color:blue}a{color:#8cb3d9}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:#6a98af}.author:not([href]){color:inherit;text-decoration:none}.nowrap{display:inline-block}.space{margin-left:5px}select{background:transparent;border:0;color:#828282}header{background-color:#c70300;display:flex;justify-content:space-between;align-items:center;padding:10px}header #header a{color:#fff}header #header h1{margin:7px 0;text-align:center}header #header h1 a{transition:color .3s}header #header h1 a:hover{text-decoration:none;color:#ff8b88}header #header nav a{margin:0 7px;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text,header #status #status-helpurl{color:#fff;margin:0 20px 0 0}header #status #status-helpurl{font-size:20px}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:#ddd;word-wrap:break-word;max-width:800px;background-color:#161616}#main-box h2{margin:20px 0px 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box .highlighted{animation:highlighted-anim 3s ease-out}@keyframes highlighted-anim{0%{background-color:#add8e6}}#main-box .question{font-size:18px;color:#add8e6}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{min-width:240px;margin:0 0 8px 0;padding:5px 8px 5px 20px;border:1px solid #333;border-radius:3px;color:#ddd;font-size:14px}.comment .comment-head{font-size:10px}.comment .comment-collapse{cursor:pointer}.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:#828282;font-style:oblique}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:#828282}.comment .comment-poster{color:#ddd;background-color:#0055df;padding:0 2px;border-radius:3px}.comment .comment-score{color:#b4b4b4;font-weight:bold}.comment .comment-time{color:#828282}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:#828282;font-weight:bold;font-size:10px;margin-right:4px;cursor:pointer}.comment .comment-links a.wait{cursor:wait}.comment .comment-links a.wait:hover{text-decoration:none}.comment-odd{background-color:#121212}.comment-even{background-color:#161616}#comment-info{margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted gray;font-size:16px}#comment-info span{margin-right:8px}#comment-sort,#comment-sort input{color:gray;font-size:12px;margin:5px 0;background-color:#262626}#comment-sort input{border-color:#767676}#comment-sort input[type=number]{width:54px;appearance:textfield}#comment-sort input[type=number]:hover,#comment-sort input[type=number]:focus{appearance:none}#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:#ddd}#comment-sort option{color:#ddd;background-color:#262626}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1155px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0px;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:#646464;font-size:13px;font-weight:bold;text-align:center}.thread .thread-content{flex:1;float:left;margin-left:3px}.thread .link-flair{display:inline-block;color:#c8c8c8;background-color:#404040;margin-right:5px;border:1px solid #4d4d4d;border-radius:2px;padding:0 2px;font-size:10px}.thread .thread-title{color:#a6a6a6;margin-right:5px}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:#888;font-size:10px}.thread .thread-selftext{border:1px solid #666;border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:#ddd;font-size:14px}.thread .thread-selftext p{margin:5px 0;line-height:20px}.thread .thread-selftext a:hover{text-decoration:none}.thread .thread-selftext p:first-child{margin-top:0px}.thread .thread-selftext p:last-child{margin-bottom:0px}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:#828282;font-size:10px;margin-top:2px}.thread .total-comments{font-size:10px;font-weight:bold;margin:4px 0}.thread .total-comments a,.thread .total-comments span{color:#828282;margin-right:4px}.thread .total-comments a{cursor:pointer}.view-rest-of-comment{background-color:#264d73;border-color:#2966a3;font-size:13px;padding:10px;color:#ccc;margin-bottom:10px}.view-rest-of-comment .faux-link{color:#8cb3d9}.load-more{font-weight:bold;font-size:10px}.load-more a,.load-more span{margin-left:16px}.load-more a{cursor:pointer}.load-more .fade{animation:fade-anim 3s 5s ease-in-out forwards}@keyframes fade-anim{100%{color:#262626}}.post-rank{min-width:20px;color:#505050;font-size:16px;text-align:right;margin:14px 4px 0 0} +:root{--background: #262626;--scrolltrack: black;--scrollthumb: #888;--scrollbar: #888 black;--light: #ddd;--white: white;--border: #767676;--border-lt: #808080;--deleted-bg: #00007d;--removed-bg: #840c09;--link: #8cb3d9;--author: #6a98af;--dim: #828282;--score: #b4b4b4;--rank: #505050;--odd-bg: #121212;--even-bg: #161616;--comment-brd: #333;--thread-title: #a6a6a6;--thread-score: #646464;--thread-domain: #888;--thread-flair: #c8c8c8;--thread-flr-bg: #404040;--thread-flr-brd: #4d4d4d;--thread-brd: #666;--thread-rest: #ccc;--thread-rest-bg: #264d73;--thread-rest-brd: #2966a3;--about-bg: #161616;--about-q: #add8e6;--l-background: #262626;--l-scrolltrack: black;--l-scrollthumb: #888;--l-scrollbar: #888 black;--l-light: #ddd;--l-white: white;--l-border: #767676;--l-border-lt: #808080;--l-deleted-bg: #00007d;--l-removed-bg: #840c09;--l-link: #8cb3d9;--l-author: #6a98af;--l-dim: #828282;--l-score: #b4b4b4;--l-rank: #505050;--l-odd-bg: #121212;--l-even-bg: #161616;--l-comment-brd: #333;--l-thread-title: #a6a6a6;--l-thread-score: #646464;--l-thread-domain: #888;--l-thread-flair: #c8c8c8;--l-thread-flr-bg: #404040;--l-thread-flr-brd: #4d4d4d;--l-thread-brd: #666;--l-thread-rest: #ccc;--l-thread-rest-bg: #264d73;--l-thread-rest-brd: #2966a3;--l-about-bg: #161616;--l-about-q: #add8e6}[data-theme=LIGHT]{--background: #f1f1f1;--scrolltrack: #e7e7e7;--scrollthumb: #eee;--scrollbar: auto;--light: #111;--white: black;--border: #898989;--border-lt: #7f7f7f;--deleted-bg: #a3c2ff;--removed-bg: #ff9494;--link: #00e;--author: #369;--dim: #737373;--score: #4b4b4b;--rank: #afafaf;--odd-bg: #f6f6f6;--even-bg: white;--comment-brd: #ccc;--thread-title: #4d4d4d;--thread-score: #878787;--thread-domain: #777;--thread-flair: black;--thread-flr-bg: #c9c9c9;--thread-flr-brd: #999;--thread-brd: #999;--thread-rest: #333;--thread-rest-bg: #d9b28c;--thread-rest-brd: #d6995c;--about-bg: white;--about-q: #522719}[data-theme=LIGHT],[data-theme=SYSTEM]{--l-background: #f1f1f1;--l-scrolltrack: #e7e7e7;--l-scrollthumb: #e7e7e7;--l-scrollbar: auto;--l-light: #111;--l-white: black;--l-border: #898989;--l-border-lt: #7f7f7f;--l-deleted-bg: #a3c2ff;--l-removed-bg: #ff9494;--l-link: #00e;--l-author: #369;--l-dim: #737373;--l-score: #4b4b4b;--l-rank: #afafaf;--l-odd-bg: #f6f6f6;--l-even-bg: white;--l-comment-brd: #ccc;--l-thread-title: #4d4d4d;--l-thread-score: #878787;--l-thread-domain: #777;--l-thread-flair: black;--l-thread-flr-bg: #c9c9c9;--l-thread-flr-brd: #999;--l-thread-brd: #999;--l-thread-rest: #333;--l-thread-rest-bg: #d9b28c;--l-thread-rest-brd: #d6995c;--l-about-bg: white;--l-about-q: #522719}html{margin:0;padding:0;background-color:var(--background);font-family:verdana,arial,helvetica,sans-serif;scrollbar-color:var(--scrollbar);transition-property:color,background-color,border,border-color;transition-timing-function:ease-out;transition-duration:0s}@media(prefers-color-scheme: light){html{background-color:var(--l-background)}}html ::-webkit-scrollbar{background-color:var(--scrolltrack)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar{background-color:var(--l-scrolltrack)}}html ::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.8);background-color:var(--scrollthumb)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar-thumb{background-color:var(--l-scrollthumb)}}html ::-webkit-scrollbar-corner{-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,.8);background-color:var(--scrollthumb)}@media(prefers-color-scheme: light){html ::-webkit-scrollbar-corner{background-color:var(--l-scrollthumb)}}@media(prefers-color-scheme: light){html{scrollbar-color:var(--l-scrollbar)}}.wait{cursor:wait}.main{margin:15px;color:var(--white)}@media(prefers-color-scheme: light){.main{color:var(--l-white)}}.removed{background-color:var(--removed-bg)}@media(prefers-color-scheme: light){.removed{background-color:var(--l-removed-bg)}}.deleted{background-color:var(--deleted-bg)}@media(prefers-color-scheme: light){.deleted{background-color:var(--l-deleted-bg)}}.removed-text{color:#c70300}.deleted-text{color:blue}a{color:var(--link)}@media(prefers-color-scheme: light){a{color:var(--l-link)}}a:link,a:visited,a:active{text-decoration:none}a:hover{text-decoration:underline}.author{color:var(--author)}@media(prefers-color-scheme: light){.author{color:var(--l-author)}}.author:not([href]){color:inherit;text-decoration:none}.nowrap{display:inline-block !important}.space{margin-left:5px}select{background:transparent;border:0;color:var(--dim)}@media(prefers-color-scheme: light){select{color:var(--l-dim)}}header{background-color:#c70300;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px}header #header h1{margin:0 0 7px;text-align:center}header #header .switch-toggle{margin-right:14px;float:left;font-size:14px}header #header .switch-toggle label{cursor:pointer}header #header a[href]{color:#fff;font-size:20px}header #status{display:flex;justify-content:space-between;align-items:center}header #status #status-text,header #status #status-helpurl{margin:0 20px 0 0;text-align:center}header #status #status-helpurl{color:#fff;font-size:20px}header #status #status-image{height:64px;width:64px;border-radius:32px}#main-box{margin:0 auto;padding:20px;border-radius:5px;color:var(--light);word-wrap:break-word;max-width:800px;background-color:var(--about-bg)}@media(prefers-color-scheme: light){#main-box{color:var(--l-light);background-color:var(--l-about-bg)}}#main-box h2{margin:20px 0px 12px}#main-box h2.about{margin:0;color:#c70300}#main-box h2.todo{color:#239f2b}#main-box h2.contact{color:#1b767a}#main-box .highlighted{animation:highlighted-anim 3s ease-out}@keyframes highlighted-anim{0%{background-color:var(--about-q)}}@media(prefers-color-scheme: light){@keyframes highlighted-anim{0%{background-color:var(--l-about-q)}}}#main-box .question{font-size:18px;color:var(--about-q)}@media(prefers-color-scheme: light){#main-box .question{color:var(--l-about-q)}}#main-box ul{padding-left:30px;margin:0}#main-box .bookmarklet{background:#c70300;color:#fff;padding:9px;font-size:large;font-weight:bold;display:inline-block;border-radius:5px;margin:0 7px}.comment{min-width:240px;margin:0 0 8px 0;padding:5px 8px 5px 20px;border:1px solid var(--comment-brd);border-radius:3px;color:var(--light);font-size:14px}@media(prefers-color-scheme: light){.comment{border-color:var(--l-comment-brd);color:var(--l-light)}}.comment .comment-head{font-size:10px}.comment .comment-collapse{cursor:pointer}.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:var(--dim);font-style:oblique}@media(prefers-color-scheme: light){.comment .comment-collapsed span,.comment .comment-collapsed a:not(.comment-collapse){color:var(--l-dim)}}.comment .comment-author{font-weight:bold}.comment .comment-author:not([href]){color:var(--dim)}@media(prefers-color-scheme: light){.comment .comment-author:not([href]){color:var(--l-dim)}}.comment .comment-poster{color:#ddd;background-color:#0055df;padding:0 2px;border-radius:3px}.comment .comment-score{color:var(--score);font-weight:bold}@media(prefers-color-scheme: light){.comment .comment-score{color:var(--l-score)}}.comment .comment-time{color:var(--dim)}@media(prefers-color-scheme: light){.comment .comment-time{color:var(--l-dim)}}.comment .comment-body{max-width:840px;line-height:20px}.comment .comment-body p{margin:5px 0;line-height:20px}.comment .comment-body a:hover{text-decoration:none}.comment .comment-links{margin-bottom:6px}.comment .comment-links a{color:var(--dim);font-weight:bold;font-size:10px;margin-right:4px;cursor:pointer}@media(prefers-color-scheme: light){.comment .comment-links a{color:var(--l-dim)}}.comment .comment-links a.wait{cursor:wait}.comment .comment-links a.wait:hover{text-decoration:none}.comment-odd{background-color:var(--odd-bg)}@media(prefers-color-scheme: light){.comment-odd{background-color:var(--l-odd-bg)}}.comment-even{background-color:var(--even-bg)}@media(prefers-color-scheme: light){.comment-even{background-color:var(--l-even-bg)}}#comment-info{margin-top:10px;font-weight:bold;padding-bottom:5px;border-bottom:1px dotted var(--border-lt);font-size:16px}@media(prefers-color-scheme: light){#comment-info{border-bottom-color:var(--l-border-lt)}}#comment-info span{margin-right:8px}#comment-sort,#comment-sort input{color:var(--border-lt);font-size:12px;margin:5px 0;background-color:var(--background)}@media(prefers-color-scheme: light){#comment-sort,#comment-sort input{color:var(--l-border-lt);background-color:var(--l-background)}}#comment-sort input{border-color:var(--border)}@media(prefers-color-scheme: light){#comment-sort input{border-color:var(--l-border)}}#comment-sort input[type=number]{width:54px;appearance:textfield}#comment-sort input[type=number]:hover,#comment-sort input[type=number]:focus{appearance:none}#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:var(--light)}@media(prefers-color-scheme: light){#comment-sort input:hover,#comment-sort input:focus,#comment-sort select:hover,#comment-sort select:focus{color:var(--l-light)}}#comment-sort option{color:var(--light);background-color:var(--background)}@media(prefers-color-scheme: light){#comment-sort option{color:var(--l-light);background-color:var(--l-background)}}.thread{display:flex;flex-grow:1;margin-bottom:7px;border-radius:1px;padding-top:6px}.thread .thumbnail{width:70px;margin-right:3px;margin-top:-2px}.thread .thumbnail img{border-radius:1px}.thread .thumbnail-default{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1099px;background-repeat:no-repeat;height:50px}.thread .thumbnail-self{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1267px;background-repeat:no-repeat;height:50px}.thread .thumbnail-image{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1043px;background-repeat:no-repeat;height:50px}.thread .thumbnail-nsfw{background-image:url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png");background-position:0px -1155px;background-repeat:no-repeat;height:50px}.thread .thread-score-box{margin:0 7px;width:43px}.thread .vote{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==);background-repeat:no-repeat;margin-left:auto;margin-right:auto;width:15px;height:14px;cursor:pointer}.thread .upvote{background-position:-15px 0px;margin-top:2px}.thread .downvote{background-position:-15px -14px;margin-top:2px}.thread .thread-score{color:var(--thread-score);font-size:13px;font-weight:bold;text-align:center}@media(prefers-color-scheme: light){.thread .thread-score{color:var(--l-thread-score)}}.thread .link-flair{display:inline-block;color:var(--thread-flair);background-color:var(--thread-flr-bg);margin-right:5px;border:1px solid var(--thread-flr-brd);border-radius:2px;padding:0 2px;font-size:10px}@media(prefers-color-scheme: light){.thread .link-flair{color:var(--l-thread-flair);background-color:var(--l-thread-flr-bg);border-color:var(--l-thread-flr-brd)}}.thread .thread-title{color:var(--thread-title);margin-right:5px}@media(prefers-color-scheme: light){.thread .thread-title{color:var(--l-thread-title)}}.thread .thread-title:hover{text-decoration:none}.thread .domain{color:var(--thread-domain);font-size:10px}@media(prefers-color-scheme: light){.thread .domain{color:var(--l-thread-domain)}}.thread .thread-image{max-width:768px;max-height:768px}.thread .thread-info{color:var(--dim);font-size:10px;margin-top:2px}@media(prefers-color-scheme: light){.thread .thread-info{color:var(--l-dim)}}.thread-content{margin:0 7px}.thread-content .thread-selftext{border:1px solid var(--thread-brd);border-radius:7px;margin:5px 0 7px;padding:5px 10px;max-width:840px;color:var(--light);font-size:14px}@media(prefers-color-scheme: light){.thread-content .thread-selftext{border-color:var(--l-thread-brd);color:var(--l-light)}}.thread-content .thread-selftext p{margin:5px 0;line-height:20px}.thread-content .thread-selftext a:hover{text-decoration:none}.thread-content .thread-selftext p:first-child{margin-top:0px}.thread-content .thread-selftext p:last-child{margin-bottom:0px}.thread-content .total-comments{font-size:10px;font-weight:bold;margin-top:4px;padding-bottom:7px}.thread-content .total-comments a,.thread-content .total-comments span{color:var(--dim);margin-right:4px}@media(prefers-color-scheme: light){.thread-content .total-comments a,.thread-content .total-comments span{color:var(--l-dim)}}.thread-content .total-comments a{cursor:pointer}.view-rest-of-comment{background-color:var(--thread-rest-bg);border-color:var(--thread-rest-brd);font-size:13px;padding:10px;color:var(--thread-rest);margin-bottom:10px}@media(prefers-color-scheme: light){.view-rest-of-comment{background-color:var(--l-thread-rest-bg);border-color:var(--l-thread-rest-brd);color:var(--l-thread-rest)}}.view-rest-of-comment .faux-link{color:var(--link)}@media(prefers-color-scheme: light){.view-rest-of-comment .faux-link{color:var(--l-link)}}.load-more{font-weight:bold;font-size:10px}.load-more a,.load-more span{margin-left:16px}.load-more a{cursor:pointer}.load-more .fade{animation:fade-anim 3s 5s ease-in-out forwards}@keyframes fade-anim{100%{color:var(--background)}}@media(prefers-color-scheme: light){@keyframes fade-anim{100%{color:var(--l-background)}}}.post-rank{min-width:20px;color:var(--rank);font-size:16px;text-align:right;margin:14px 4px 0 0}@media(prefers-color-scheme: light){.post-rank{color:var(--l-rank)}} +.switch-toggle a,.switch-light span span{display:none}@media only screen{.switch-light{position:relative;display:block}.switch-light::after{clear:both;content:"";display:table}.switch-light *,.switch-light *:before,.switch-light *:after{box-sizing:border-box}.switch-light a{display:block;transition:all .2s ease-out}.switch-light label,.switch-light>span{line-height:2em}.switch-light input:focus~span a,.switch-light input:focus+label{outline-width:2px;outline-style:solid;outline-color:Highlight}}@media only screen and (-webkit-min-device-pixel-ratio: 0){.switch-light input:focus~span a,.switch-light input:focus+label{outline-color:-webkit-focus-ring-color;outline-style:auto}}@media only screen{.switch-light input{position:absolute;opacity:0;z-index:3}.switch-light input:checked~span a{right:0%}.switch-light strong{font-weight:inherit}.switch-light>span{position:relative;overflow:hidden;display:block;min-height:2em;padding:0;text-align:left}.switch-light span span{position:relative;z-index:2;display:block;float:left;width:50%;text-align:center;user-select:none}.switch-light a{position:absolute;right:50%;top:0;z-index:1;display:block;width:50%;height:100%;padding:0}.switch-light.row{display:flex}.switch-light .alert-light{color:#333}.switch-toggle{position:relative;display:block;padding:0 !important}.switch-toggle::after{clear:both;content:"";display:table}.switch-toggle *,.switch-toggle *:before,.switch-toggle *:after{box-sizing:border-box}.switch-toggle a{display:block;transition:all .2s ease-out}.switch-toggle label,.switch-toggle>span{line-height:2em}.switch-toggle input:focus~span a,.switch-toggle input:focus+label{outline-width:2px;outline-style:solid;outline-color:Highlight}}@media only screen and (-webkit-min-device-pixel-ratio: 0){.switch-toggle input:focus~span a,.switch-toggle input:focus+label{outline-color:-webkit-focus-ring-color;outline-style:auto}}@media only screen{.switch-toggle input{position:absolute;left:0;opacity:0}.switch-toggle input+label{position:relative;z-index:2;display:block;float:left;padding:0 8px;margin:0;text-align:center}.switch-toggle a{position:absolute;top:0;left:0;padding:0;z-index:1;width:10px;height:100%}.switch-toggle label:nth-child(2):nth-last-child(4),.switch-toggle label:nth-child(2):nth-last-child(4)~label,.switch-toggle label:nth-child(2):nth-last-child(4)~a{width:50%}.switch-toggle label:nth-child(2):nth-last-child(4)~input:checked:nth-child(3)+label~a{left:50%}.switch-toggle label:nth-child(2):nth-last-child(6),.switch-toggle label:nth-child(2):nth-last-child(6)~label,.switch-toggle label:nth-child(2):nth-last-child(6)~a{width:33.33%}.switch-toggle label:nth-child(2):nth-last-child(6)~input:checked:nth-child(3)+label~a{left:33.33%}.switch-toggle label:nth-child(2):nth-last-child(6)~input:checked:nth-child(5)+label~a{left:66.66%}.switch-toggle label:nth-child(2):nth-last-child(8),.switch-toggle label:nth-child(2):nth-last-child(8)~label,.switch-toggle label:nth-child(2):nth-last-child(8)~a{width:25%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(3)+label~a{left:25%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(5)+label~a{left:50%}.switch-toggle label:nth-child(2):nth-last-child(8)~input:checked:nth-child(7)+label~a{left:75%}.switch-toggle label:nth-child(2):nth-last-child(10),.switch-toggle label:nth-child(2):nth-last-child(10)~label,.switch-toggle label:nth-child(2):nth-last-child(10)~a{width:20%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(3)+label~a{left:20%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(5)+label~a{left:40%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(7)+label~a{left:60%}.switch-toggle label:nth-child(2):nth-last-child(10)~input:checked:nth-child(9)+label~a{left:80%}.switch-toggle label:nth-child(2):nth-last-child(12),.switch-toggle label:nth-child(2):nth-last-child(12)~label,.switch-toggle label:nth-child(2):nth-last-child(12)~a{width:16.6%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(3)+label~a{left:16.6%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(5)+label~a{left:33.2%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(7)+label~a{left:49.8%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(9)+label~a{left:66.4%}.switch-toggle label:nth-child(2):nth-last-child(12)~input:checked:nth-child(11)+label~a{left:83%}.switch-toggle.switch-candy,.switch-light.switch-candy>span{background-color:#2d3035;border-radius:3px;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.3),0 1px 0 rgba(255, 255, 255, 0.2)}.switch-light.switch-candy span span,.switch-light.switch-candy input:checked~span span:first-child,.switch-toggle.switch-candy label{color:#fff;font-weight:bold;text-align:center;text-shadow:1px 1px 1px #191b1e}.switch-light.switch-candy input~span span:first-child,.switch-light.switch-candy input:checked~span span:nth-child(2),.switch-candy input:checked+label{color:#333;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5)}.switch-candy a{border:1px solid #333;border-radius:3px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2),inset 0 1px 1px rgba(255, 255, 255, 0.45);background-color:#70c66b;background-image:linear-gradient(rgba(255, 255, 255, 0.2), transparent)}.switch-candy-blue a{background-color:#38a3d4}.switch-candy-yellow a{background-color:#f5e560}.switch-ios.switch-light span span{color:#888b92}.switch-ios.switch-light a{left:0;top:0;width:32px;height:32px;background-color:#fff;border-radius:100%;border:4px solid #d8d9db;transition:all .2s ease-out}.switch-ios.switch-light>span{display:block;width:100%;height:32px;background-color:#d8d9db;border-radius:28px;transition:all .4s ease-out}.switch-ios.switch-light>span span{position:absolute;top:0;left:0;width:100%;opacity:0;line-height:30px;vertical-align:middle;transition:all .2s ease-out}.switch-ios.switch-light>span span:first-of-type{opacity:1;padding-left:30px}.switch-ios.switch-light>span span:last-of-type{padding-right:30px}.switch-ios.switch-light input:checked~span a{left:100%;border-color:#4bd865;margin-left:-32px}.switch-ios.switch-light input:checked~span{border-color:#4bd865;box-shadow:inset 0 0 0 30px #4bd865}.switch-ios.switch-light input:checked~span span:first-of-type{opacity:0}.switch-ios.switch-light input:checked~span span:last-of-type{opacity:1;color:#fff}.switch-ios.switch-toggle{background-color:#d8d9db;border-radius:30px;box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 0}.switch-ios.switch-toggle a{background-color:#4bd865;border:2px solid #d8d9db;border-radius:28px;transition:all .12s ease-out}.switch-ios.switch-toggle label{height:2.4em;color:#888b92;line-height:2.4em;vertical-align:middle}.switch-ios input:checked+label{color:#3e4043}.switch-toggle.switch-holo,.switch-light.switch-holo>span{background-color:#464747;border-radius:1px;box-shadow:inset rgba(0, 0, 0, 0.1) 0 1px 0;color:#fff;text-transform:uppercase}.switch-holo label{color:#fff}.switch-holo>span span{opacity:0;transition:all .1s}.switch-holo>span span:first-of-type{opacity:1}.switch-holo>span span,.switch-holo label{font-size:85%;line-height:34.5px}.switch-holo a{background-color:#666;border-radius:1px;box-shadow:inset rgba(255, 255, 255, 0.2) 0 1px 0,inset rgba(0, 0, 0, 0.3) 0 -1px 0}.switch-holo.switch-light input:checked~span a{background-color:#0e88b1}.switch-holo.switch-light input:checked~span span:first-of-type{opacity:0}.switch-holo.switch-light input:checked~span span:last-of-type{opacity:1}.switch-light.switch-material a{top:-3px;width:28px;height:28px;border-radius:50%;background:#fafafa;box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14),0 3px 2px -2px rgba(0, 0, 0, 0.2),0 2px 4px 0 rgba(0, 0, 0, 0.12);transition:right .28s cubic-bezier(0.4, 0, 0.2, 1)}.switch-material.switch-light{overflow:visible}.switch-material.switch-light::after{clear:both;content:"";display:table}.switch-material.switch-light>span{overflow:visible;position:relative;top:3px;width:52px;height:24px;min-height:auto;border-radius:16px;background:rgba(0, 0, 0, 0.26)}.switch-material.switch-light span span{position:absolute;clip:rect(0 0 0 0)}.switch-material.switch-light input:checked~span a{right:0;background:#3f51b5;box-shadow:0 3px 4px 0 rgba(0, 0, 0, 0.14),0 3px 3px -2px rgba(0, 0, 0, 0.2),0 1px 6px 0 rgba(0, 0, 0, 0.12)}.switch-material.switch-light input:checked~span{background:rgba(63, 81, 181, 0.5)}.switch-toggle.switch-material{overflow:visible}.switch-toggle.switch-material::after{clear:both;content:"";display:table}.switch-toggle.switch-material a{top:48%;width:6px !important;height:6px;margin-left:4px;background:#3f51b5;border-radius:100%;transform:translateY(-50%);transition:transform .4s ease-in}.switch-toggle.switch-material label{color:rgba(0, 0, 0, 0.54);font-size:1em}.switch-toggle.switch-material label:before{content:"";position:absolute;top:48%;left:0;display:block;width:14px;height:14px;border-radius:100%;border:2px solid rgba(0, 0, 0, 0.54);transform:translateY(-50%)}.switch-toggle.switch-material input:checked+label:before{border-color:#3f51b5}.switch-light.switch-material>span:before,.switch-light.switch-material>span:after,.switch-toggle.switch-material label:after{content:"";position:absolute;top:0;left:0;z-index:3;display:block;width:64px;height:64px;border-radius:100%;background:#3f51b5;opacity:.4;margin-left:-20px;margin-top:-20px;transform:scale(0);transition:opacity .4s ease-in}.switch-light.switch-material>span:after{left:auto;right:0;margin-left:0;margin-right:-20px}.switch-toggle.switch-material label:after{width:52px;height:52px;margin-top:-12px}@keyframes materialRipple{0%{transform:scale(0)}20%{transform:scale(1)}100%{opacity:0;transform:scale(1)}}.switch-material.switch-light input:not(:checked)~span:after,.switch-material.switch-light input:checked~span:before,.switch-toggle.switch-material input:checked+label:after{animation:materialRipple .4s ease-in}.switch-light.switch-material.switch-light input~span:before,.switch-light.switch-material.switch-light input~span:after,.switch-material.switch-toggle input+label:after{visibility:hidden}.switch-light.switch-material.switch-light input:focus:checked~span:before,.switch-light.switch-material.switch-light input:focus:not(:checked)~span:after,.switch-material.switch-toggle input:focus:checked+label:after{visibility:visible}}@media only screen and (-webkit-max-device-pixel-ratio: 2)and (max-device-width: 1280px){.switch-light,.switch-toggle{-webkit-animation:webkitSiblingBugfix infinite 1s}}@-webkit-keyframes webkitSiblingBugfix{from{-webkit-transform:translate3d(0, 0, 0)}to{-webkit-transform:translate3d(0, 0, 0)}} diff --git a/package-lock.json b/package-lock.json index 8f30eec..88e95d7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "@babel/preset-react": "^7.16.7", "acorn": "^8.7.0", "babel-loader": "^8.2.4", + "css-toggle-switch": "^4.1.0", "eslint": "^8.11.0", "sass": "^1.49.9", "standard": "^16.0.4", @@ -2416,6 +2417,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -2613,7 +2615,8 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "node_modules/batch": { "version": "0.6.1", @@ -2702,6 +2705,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2811,6 +2815,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -2883,6 +2888,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -2890,7 +2896,8 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "node_modules/colorette": { "version": "2.0.16", @@ -2961,7 +2968,8 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true }, "node_modules/connect-history-api-fallback": { "version": "1.6.0", @@ -3099,6 +3107,15 @@ "node": ">= 8" } }, + "node_modules/css-toggle-switch": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/css-toggle-switch/-/css-toggle-switch-4.1.0.tgz", + "integrity": "sha512-XdA6fyaQqlBqTmFa6NX58tLPJj4SgDLAxV4Ec73GHQYRTYUTZoEyYHYxWGacLNTP8sTiVycKcAMBrPBKaiIZ9g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -3431,6 +3448,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true, "engines": { "node": ">=0.8.0" } @@ -4142,7 +4160,8 @@ "node_modules/fastest-levenshtein": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz", - "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==" + "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==", + "dev": true }, "node_modules/fastq": { "version": "1.13.0", @@ -4339,7 +4358,8 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true }, "node_modules/fsevents": { "version": "2.3.2", @@ -4434,6 +4454,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -4508,7 +4529,8 @@ "node_modules/graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", - "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", + "dev": true }, "node_modules/handle-thing": { "version": "2.0.1", @@ -4541,6 +4563,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true, "engines": { "node": ">=4" } @@ -4596,7 +4619,8 @@ "node_modules/hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", - "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==" + "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", + "dev": true }, "node_modules/hpack.js": { "version": "2.1.6", @@ -4805,6 +4829,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -4813,7 +4838,8 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "node_modules/internal-slot": { "version": "1.0.3", @@ -5176,7 +5202,8 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", + "dev": true }, "node_modules/isobject": { "version": "3.0.1", @@ -5568,6 +5595,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -5579,12 +5607,14 @@ "name": "minimist-lite", "version": "2.2.1", "resolved": "git+ssh://git@github.com/meszaros-lajos-gyorgy/minimist-lite.git#3c9cad3b85e9792aa1905bd69d0794d61f4c89ce", + "dev": true, "license": "MIT" }, "node_modules/mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dev": true, "dependencies": { "minimist": "^1.2.6" }, @@ -5595,7 +5625,8 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/multicast-dns": { "version": "6.2.3", @@ -8021,6 +8052,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, "dependencies": { "wrappy": "1" } @@ -8185,6 +8217,7 @@ "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, "engines": { "node": ">=0.10.0" } @@ -8991,6 +9024,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -9102,6 +9136,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, "bin": { "semver": "bin/semver.js" } @@ -10202,6 +10237,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -10365,7 +10401,8 @@ "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "dev": true }, "node_modules/thunky": { "version": "1.1.0", @@ -11010,6 +11047,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "dependencies": { "isexe": "^2.0.0" }, @@ -11054,7 +11092,8 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true }, "node_modules/ws": { "version": "8.5.0", @@ -12854,6 +12893,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -13001,7 +13041,8 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true }, "batch": { "version": "0.6.1", @@ -13080,6 +13121,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -13151,6 +13193,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -13200,6 +13243,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "requires": { "color-name": "1.1.3" } @@ -13207,7 +13251,8 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "colorette": { "version": "2.0.16", @@ -13271,7 +13316,8 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "dev": true }, "connect-history-api-fallback": { "version": "1.6.0", @@ -13369,6 +13415,12 @@ "which": "^2.0.1" } }, + "css-toggle-switch": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/css-toggle-switch/-/css-toggle-switch-4.1.0.tgz", + "integrity": "sha512-XdA6fyaQqlBqTmFa6NX58tLPJj4SgDLAxV4Ec73GHQYRTYUTZoEyYHYxWGacLNTP8sTiVycKcAMBrPBKaiIZ9g==", + "dev": true + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -13631,7 +13683,8 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true }, "eslint": { "version": "8.11.0", @@ -14166,7 +14219,8 @@ "fastest-levenshtein": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz", - "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==" + "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==", + "dev": true }, "fastq": { "version": "1.13.0", @@ -14317,7 +14371,8 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", + "dev": true }, "fsevents": { "version": "2.3.2", @@ -14381,6 +14436,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", + "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -14436,7 +14492,8 @@ "graceful-fs": { "version": "4.2.9", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz", - "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==" + "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==", + "dev": true }, "handle-thing": { "version": "2.0.1", @@ -14462,7 +14519,8 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true }, "has-symbols": { "version": "1.0.3", @@ -14503,7 +14561,8 @@ "hosted-git-info": { "version": "2.8.9", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz", - "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==" + "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", + "dev": true }, "hpack.js": { "version": "2.1.6", @@ -14667,6 +14726,7 @@ "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" @@ -14675,7 +14735,8 @@ "inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true }, "internal-slot": { "version": "1.0.3", @@ -14915,7 +14976,8 @@ "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", + "dev": true }, "isobject": { "version": "3.0.1", @@ -15214,18 +15276,21 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "git+ssh://git@github.com/meszaros-lajos-gyorgy/minimist-lite.git#3c9cad3b85e9792aa1905bd69d0794d61f4c89ce", + "dev": true, "from": "minimist@git+https://github.com/meszaros-lajos-gyorgy/minimist-lite#semver:^v2.2.1" }, "mkdirp": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dev": true, "requires": { "minimist": "git+https://github.com/meszaros-lajos-gyorgy/minimist-lite#semver:^v2.2.1" } @@ -15233,7 +15298,8 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "multicast-dns": { "version": "6.2.3", @@ -16895,6 +16961,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, "requires": { "wrappy": "1" } @@ -17010,7 +17077,8 @@ "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=" + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", + "dev": true }, "path-key": { "version": "3.1.1", @@ -17628,6 +17696,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, "requires": { "glob": "^7.1.3" } @@ -17702,7 +17771,8 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true }, "send": { "version": "0.17.2", @@ -18528,6 +18598,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -18638,7 +18709,8 @@ "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" + "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", + "dev": true }, "thunky": { "version": "1.1.0", @@ -19115,6 +19187,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "requires": { "isexe": "^2.0.0" } @@ -19147,7 +19220,8 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "dev": true }, "ws": { "version": "8.5.0", diff --git a/package.json b/package.json index c03bebe..0a8034b 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production", - "css": "sass --style compressed --no-source-map src/sass/index.sass dist/main.css" + "css": "sass -s compressed src/sass/index.sass >dist/main.css && sass -s compressed node_modules/css-toggle-switch/dist/toggle-switch-px.css >>dist/main.css" }, "dependencies": { "core-js": "^3.21.1", @@ -46,6 +46,7 @@ "@babel/preset-react": "^7.16.7", "acorn": "^8.7.0", "babel-loader": "^8.2.4", + "css-toggle-switch": "^4.1.0", "eslint": "^8.11.0", "sass": "^1.49.9", "standard": "^16.0.4", diff --git a/src/pages/common/Header.js b/src/pages/common/Header.js index 703afd8..5127de8 100644 --- a/src/pages/common/Header.js +++ b/src/pages/common/Header.js @@ -1,15 +1,29 @@ import React from 'react' import { Link } from 'react-router-dom' import { connect } from '../../state' +import { theme } from '../../state' const Header = props => (
diff --git a/src/pages/common/Post.js b/src/pages/common/Post.js index 3a2cd0c..89b864d 100644 --- a/src/pages/common/Post.js +++ b/src/pages/common/Post.js @@ -60,8 +60,22 @@ export default (props) => { const [showEdited, setShowEdited] = useState(false) - return ( -
+ const totalComments =
+ {props.reloadingComments ? + {props.num_comments} comments : + {props.num_comments} comments}  + reddit  + reveddit + {props.hasOwnProperty('edited_selftext') && + setShowEdited(!showEdited)} + onKeyDown={e => e.key == 'Enter' && setShowEdited(!showEdited)} + tabIndex= {0} + title= {showEdited ? 'The most recent version is shown; click to show the earliest archived' : 'The earliest archived version is shown; click to show the most recent'} + >*edited} +
+ + return
+
{props.position && {props.position}}
@@ -72,33 +86,25 @@ export default (props) => { {thumbnail}
{props.title} - { - props.link_flair_text && + {props.link_flair_text && {props.link_flair_text} } ({props.domain})
submitted {prettyDate(props.created_utc)} {props.edited && - * (last edited {prettyDate(props.edited)})} + * (last edited {prettyDate(props.edited)}) + }  by {props.author} to /r/{props.subreddit}
- {innerHTML !== undefined && -
} - + {innerHTML === undefined && totalComments}
- ) + {innerHTML !== undefined && +
+
+ {totalComments} +
+ } +
} diff --git a/src/pages/thread/index.js b/src/pages/thread/index.js index 1398034..cb02e50 100644 --- a/src/pages/thread/index.js +++ b/src/pages/thread/index.js @@ -106,7 +106,7 @@ class Thread extends React.Component { if (!post.deleted && !post.removed && !post.edited) { this.setState({ post }) if (this.state.loadingComments) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') // Fetch the post from Pushshift if it was deleted/removed/edited } else { @@ -145,7 +145,7 @@ class Thread extends React.Component { } if (this.state.loadingComments) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') }) .catch(error => { console.timeEnd('Load comments') @@ -167,12 +167,12 @@ class Thread extends React.Component { document.title = removedPost.title this.setState({ post: { ...removedPost, removed: true } }) if (this.state.loadingComments) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') } else { if (origMessage.startsWith('403')) { // If Reddit admits it exists but Pushshift can't find it, then this.setState({ post: { id: threadID, subreddit, removed: true } }) // create a dummy post and continue if (this.state.loadingComments) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') } else { console.timeEnd('Load comments') this.props.global.setError({ message: '404 Post not found' }) @@ -249,7 +249,7 @@ class Thread extends React.Component { if (loadingMoreComments) { this.props.global.state.loadingMoreComments = 0 this.setState({reloadingComments: true}) - this.props.global.setLoading('Loading more comments from Pushshift...') + this.props.global.setLoading('Loading comments...') console.time('Load comments') this.updateCurContig() this.getComments(loadingMoreComments, true) @@ -261,7 +261,7 @@ class Thread extends React.Component { const { commentID } = this.props.match.params if (commentID === undefined) { this.setState({loadingComments: true}) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') console.time('Load comments') this.contigs.unshift({firstCreated: EARLIEST_CREATED}) this.setCurContig(0) @@ -271,7 +271,7 @@ class Thread extends React.Component { } else if (!this.commentIdAttempts.has(commentID)) { this.commentIdAttempts.add(commentID) this.setState({reloadingComments: true}) - this.props.global.setLoading('Loading comments from Pushshift...') + this.props.global.setLoading('Loading comments...') console.time('Load comments') let createdUtcNotFound // true if Reddit doesn't have the comment's created_utc getRedditComments([commentID]) @@ -421,7 +421,7 @@ class Thread extends React.Component { return // Finished retrieving comments from Pushshift; wait for processing to finish - this.props.global.setLoading('Comparing comments to Reddit API...') + this.props.global.setLoading('Comparing comments...') Promise.all(pushshiftPromises).then(lengths => { const pushshiftComments = lengths.reduce((a,b) => a+b, 0) console.log('Pushshift:', pushshiftComments, 'comments') diff --git a/src/sass/about.sass b/src/sass/about.sass index 377bf90..aef85be 100644 --- a/src/sass/about.sass +++ b/src/sass/about.sass @@ -2,43 +2,52 @@ margin: 0 auto padding: 20px border-radius: 5px - color: $light + color: var(--light) word-wrap: break-word max-width: 800px - background-color: #161616 + background-color: var(--about-bg) + @media (prefers-color-scheme: light) + color: var(--l-light) + background-color: var(--l-about-bg) h2 margin: 20px 0px 12px h2.about margin: 0 - color: $red + color: $removed h2.todo - color: #239f2b + color: $about-todo h2.contact - color: #1b767a + color: $about-contact .highlighted animation: highlighted-anim 3s ease-out @keyframes highlighted-anim 0% - background-color: lightblue + background-color: var(--about-q) + @media (prefers-color-scheme: light) + @keyframes highlighted-anim + 0% + background-color: var(--l-about-q) .question font-size: 18px - color: lightblue - + color: var(--about-q) + @media (prefers-color-scheme: light) + color: var(--l-about-q) + ul padding-left: 30px margin: 0 .bookmarklet - background: $red - color: #fff + background: $removed + color: $white padding: 9px font-size: large font-weight: bold display: inline-block border-radius: 5px - margin: 0 7px \ No newline at end of file + margin: 0 7px diff --git a/src/sass/colors.sass b/src/sass/colors.sass index d18672f..f3ade54 100644 --- a/src/sass/colors.sass +++ b/src/sass/colors.sass @@ -1,9 +1,209 @@ -$background: #262626 -$light: #ddd -$border: #767676 -$red: #c70300 -$blue: #0000ff -$link: #8cb3d9 -$author: #6a98af -$removed: #840c09 -$deleted: #00007d +$background: #262626 +$scrolltrack: black +$scrollthumb: #888 +$light: #ddd +$white: white +$border: #767676 +$border-lt: #808080 +$removed: #c70300 +$deleted: #0000ff +$removed-bg: #840c09 +$deleted-bg: #00007d +$link: #8cb3d9 +$author: #6a98af +$dim: #828282 +$poster: #0055df +$score: #b4b4b4 +$rank: #505050 +$odd-bg: #121212 +$even-bg: #161616 +$comment-brd: #333 + +$thread-title: #a6a6a6 +$thread-score: #646464 +$thread-domain: #888 +$thread-flair: #c8c8c8 +$thread-flr-bg: #404040 +$thread-flr-brd: #4d4d4d +$thread-brd: #666 +$thread-rest: #ccc +$thread-rest-bg: #264d73 +$thread-rest-brd: #2966a3 + +$about-bg: $even-bg +$about-todo: #239f2b +$about-contact: #1b767a +$about-q: #add8e6 + +$l-background: #f1f1f1 +$l-scrolltrack: #e7e7e7 +$l-scrollthumb: #eee +$l-light: #111 +$l-white: black +$l-border: #898989 +$l-border-lt: #7f7f7f +$l-removed-bg: #ff9494 +$l-deleted-bg: #a3c2ff +$l-link: #00e +$l-author: #369 +$l-dim: #737373 +$l-score: #4b4b4b +$l-rank: #afafaf +$l-odd-bg: #f6f6f6 +$l-even-bg: white +$l-comment-brd: #ccc + +$l-thread-title: #4d4d4d +$l-thread-score: #878787 +$l-thread-domain: #777 +$l-thread-flair: black +$l-thread-flr-bg: #c9c9c9 +$l-thread-flr-brd: #999 +$l-thread-brd: #999 +$l-thread-rest: #333 +$l-thread-rest-bg: #d9b28c +$l-thread-rest-brd: #d6995c + +$l-about-bg: $l-even-bg +$l-about-q: #522719 + + +:root + + --background: #{$background} + --scrolltrack: #{$scrolltrack} + --scrollthumb: #{$scrollthumb} + --scrollbar: #{$scrollthumb} #{$scrolltrack} + --light: #{$light} + --white: #{$white} + --border: #{$border} + --border-lt: #{$border-lt} + --deleted-bg: #{$deleted-bg} + --removed-bg: #{$removed-bg} + --link: #{$link} + --author: #{$author} + --dim: #{$dim} + --score: #{$score} + --rank: #{$rank} + --odd-bg: #{$odd-bg} + --even-bg: #{$even-bg} + --comment-brd: #{$comment-brd} + + --thread-title: #{$thread-title} + --thread-score: #{$thread-score} + --thread-domain: #{$thread-domain} + --thread-flair: #{$thread-flair} + --thread-flr-bg: #{$thread-flr-bg} + --thread-flr-brd: #{$thread-flr-brd} + --thread-brd: #{$thread-brd} + --thread-rest: #{$thread-rest} + --thread-rest-bg: #{$thread-rest-bg} + --thread-rest-brd: #{$thread-rest-brd} + + --about-bg: #{$about-bg} + --about-q: #{$about-q} + + --l-background: #{$background} + --l-scrolltrack: #{$scrolltrack} + --l-scrollthumb: #{$scrollthumb} + --l-scrollbar: #{$scrollthumb} #{$scrolltrack} + --l-light: #{$light} + --l-white: #{$white} + --l-border: #{$border} + --l-border-lt: #{$border-lt} + --l-deleted-bg: #{$deleted-bg} + --l-removed-bg: #{$removed-bg} + --l-link: #{$link} + --l-author: #{$author} + --l-dim: #{$dim} + --l-score: #{$score} + --l-rank: #{$rank} + --l-odd-bg: #{$odd-bg} + --l-even-bg: #{$even-bg} + --l-comment-brd: #{$comment-brd} + + --l-thread-title: #{$thread-title} + --l-thread-score: #{$thread-score} + --l-thread-domain: #{$thread-domain} + --l-thread-flair: #{$thread-flair} + --l-thread-flr-bg: #{$thread-flr-bg} + --l-thread-flr-brd: #{$thread-flr-brd} + --l-thread-brd: #{$thread-brd} + --l-thread-rest: #{$thread-rest} + --l-thread-rest-bg: #{$thread-rest-bg} + --l-thread-rest-brd: #{$thread-rest-brd} + + --l-about-bg: #{$about-bg} + --l-about-q: #{$about-q} + + +[data-theme='LIGHT'] + + --background: #{$l-background} + --scrolltrack: #{$l-scrolltrack} + --scrollthumb: #{$l-scrollthumb} + --scrollbar: auto + --light: #{$l-light} + --white: #{$l-white} + --border: #{$l-border} + --border-lt: #{$l-border-lt} + --deleted-bg: #{$l-deleted-bg} + --removed-bg: #{$l-removed-bg} + --link: #{$l-link} + --author: #{$l-author} + --dim: #{$l-dim} + --score: #{$l-score} + --rank: #{$l-rank} + --odd-bg: #{$l-odd-bg} + --even-bg: #{$l-even-bg} + --comment-brd: #{$l-comment-brd} + + --thread-title: #{$l-thread-title} + --thread-score: #{$l-thread-score} + --thread-domain: #{$l-thread-domain} + --thread-flair: #{$l-thread-flair} + --thread-flr-bg: #{$l-thread-flr-bg} + --thread-flr-brd: #{$l-thread-flr-brd} + --thread-brd: #{$l-thread-brd} + --thread-rest: #{$l-thread-rest} + --thread-rest-bg: #{$l-thread-rest-bg} + --thread-rest-brd: #{$l-thread-rest-brd} + + --about-bg: #{$l-about-bg} + --about-q: #{$l-about-q} + + +[data-theme='LIGHT'], [data-theme='SYSTEM'] + + --l-background: #{$l-background} + --l-scrolltrack: #{$l-scrolltrack} + --l-scrollthumb: #{$l-scrolltrack} + --l-scrollbar: auto + --l-light: #{$l-light} + --l-white: #{$l-white} + --l-border: #{$l-border} + --l-border-lt: #{$l-border-lt} + --l-deleted-bg: #{$l-deleted-bg} + --l-removed-bg: #{$l-removed-bg} + --l-link: #{$l-link} + --l-author: #{$l-author} + --l-dim: #{$l-dim} + --l-score: #{$l-score} + --l-rank: #{$l-rank} + --l-odd-bg: #{$l-odd-bg} + --l-even-bg: #{$l-even-bg} + --l-comment-brd: #{$l-comment-brd} + + --l-thread-title: #{$l-thread-title} + --l-thread-score: #{$l-thread-score} + --l-thread-domain: #{$l-thread-domain} + --l-thread-flair: #{$l-thread-flair} + --l-thread-flr-bg: #{$l-thread-flr-bg} + --l-thread-flr-brd: #{$l-thread-flr-brd} + --l-thread-brd: #{$l-thread-brd} + --l-thread-rest: #{$l-thread-rest} + --l-thread-rest-bg: #{$l-thread-rest-bg} + --l-thread-rest-brd: #{$l-thread-rest-brd} + + --l-about-bg: #{$l-about-bg} + --l-about-q: #{$l-about-q} diff --git a/src/sass/comment.sass b/src/sass/comment.sass index 059c2f1..f9d801d 100644 --- a/src/sass/comment.sass +++ b/src/sass/comment.sass @@ -1,11 +1,14 @@ -.comment +.comment min-width: 240px margin: 0 0 8px 0 padding: 5px 8px 5px 20px - border: 1px solid #333 + border: 1px solid var(--comment-brd) border-radius: 3px - color: $light + color: var(--light) font-size: 14px + @media (prefers-color-scheme: light) + border-color: var(--l-comment-brd) + color: var(--l-light) .comment-head font-size: 10px @@ -14,48 +17,58 @@ cursor: pointer .comment-collapsed span, .comment-collapsed a:not(.comment-collapse) - color: #828282 + color: var(--dim) font-style: oblique + @media (prefers-color-scheme: light) + color: var(--l-dim) - .comment-author + .comment-author font-weight: bold .comment-author:not([href]) - color: #828282 + color: var(--dim) + @media (prefers-color-scheme: light) + color: var(--l-dim) .comment-poster color: $light - background-color: #0055df + background-color: $poster padding: 0 2px border-radius: 3px .comment-score - color: #b4b4b4 + color: var(--score) font-weight: bold + @media (prefers-color-scheme: light) + color: var(--l-score) .comment-time - color: #828282 + color: var(--dim) + @media (prefers-color-scheme: light) + color: var(--l-dim) .comment-body max-width: 840px line-height: 20px - + p margin: 5px 0 line-height: 20px - + a:hover text-decoration: none - .comment-links + .comment-links margin-bottom: 6px .comment-links a - color: #828282 + color: var(--dim) font-weight: bold font-size: 10px margin-right: 4px cursor: pointer + @media (prefers-color-scheme: light) + color: var(--l-dim) .comment-links a.wait cursor: wait @@ -64,7 +77,11 @@ text-decoration: none .comment-odd - background-color: #121212 + background-color: var(--odd-bg) + @media (prefers-color-scheme: light) + background-color: var(--l-odd-bg) .comment-even - background-color: #161616 + background-color: var(--even-bg) + @media (prefers-color-scheme: light) + background-color: var(--l-even-bg) diff --git a/src/sass/common.sass b/src/sass/common.sass index f617428..0ea57f4 100644 --- a/src/sass/common.sass +++ b/src/sass/common.sass @@ -1,31 +1,71 @@ -html, body +html margin: 0 padding: 0 - background-color: $background + background-color: var(--background) font-family: verdana, arial, helvetica, sans-serif + @media (prefers-color-scheme: light) + background-color: var(--l-background) + + // Blink (Chromium) + // + ::-webkit-scrollbar + background-color: var(--scrolltrack) + @media (prefers-color-scheme: light) + background-color: var(--l-scrolltrack) + // + ::-webkit-scrollbar-thumb + -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) + background-color: var(--scrollthumb) + @media (prefers-color-scheme: light) + background-color: var(--l-scrollthumb) + // + ::-webkit-scrollbar-corner + -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8) + background-color: var(--scrollthumb) + @media (prefers-color-scheme: light) + background-color: var(--l-scrollthumb) + + // Gecko (Firefox) + // + scrollbar-color: var(--scrollbar) + @media (prefers-color-scheme: light) + scrollbar-color: var(--l-scrollbar) + + transition-property: color, background-color, border, border-color + transition-timing-function: ease-out + transition-duration: 0s // changed to 0.4s after page loads in src/state.js + .wait cursor: wait .main margin: 15px - color: white + color: var(--white) + @media (prefers-color-scheme: light) + color: var(--l-white) .removed - background-color: $removed + background-color: var(--removed-bg) + @media (prefers-color-scheme: light) + background-color: var(--l-removed-bg) .deleted - background-color: $deleted + background-color: var(--deleted-bg) + @media (prefers-color-scheme: light) + background-color: var(--l-deleted-bg) .removed-text - color: $red + color: $removed .deleted-text - color: $blue + color: $deleted a - color: $link - + color: var(--link) + @media (prefers-color-scheme: light) + color: var(--l-link) + a:link, a:visited, a:active text-decoration: none @@ -33,14 +73,16 @@ a:hover text-decoration: underline .author - color: $author + color: var(--author) + @media (prefers-color-scheme: light) + color: var(--l-author) .author:not([href]) color: inherit text-decoration: none .nowrap - display: inline-block + display: inline-block !important .space margin-left: 5px @@ -48,4 +90,6 @@ a:hover select background: transparent border: 0 - color: #828282 \ No newline at end of file + color: var(--dim) + @media (prefers-color-scheme: light) + color: var(--l-dim) diff --git a/src/sass/header.sass b/src/sass/header.sass index 2fb4821..6ef4c48 100644 --- a/src/sass/header.sass +++ b/src/sass/header.sass @@ -1,43 +1,43 @@ -header - background-color: $red///*#19171c;/*#181818*/ +header + background-color: $removed + color: $white display: flex justify-content: space-between align-items: center padding: 10px - + #header - a - color: #fff - + h1 - margin: 7px 0 + margin: 0 0 7px text-align: center - a - transition: color 0.3s - + .switch-toggle + margin-right: 14px + float: left + font-size: 14px - a:hover - text-decoration: none - color: #ff8b88 - nav - a - margin: 0 7px - font-size: 20px - - #status + label + cursor: pointer + + a[href] + color: $white + font-size: 20px + + #status display: flex justify-content: space-between align-items: center #status-text, #status-helpurl - color: #fff margin: 0 20px 0 0 + text-align: center #status-helpurl + color: $white font-size: 20px - #status-image + #status-image height: 64px width: 64px - border-radius: 32px \ No newline at end of file + border-radius: 32px diff --git a/src/sass/post.sass b/src/sass/post.sass index dfbffbf..02af337 100644 --- a/src/sass/post.sass +++ b/src/sass/post.sass @@ -1,24 +1,31 @@ -#comment-info +#comment-info margin-top: 10px font-weight: bold padding-bottom: 5px - border-bottom: 1px dotted #808080 + border-bottom: 1px dotted var(--border-lt) font-size: 16px + @media (prefers-color-scheme: light) + border-bottom-color: var(--l-border-lt) #comment-info span margin-right: 8px #comment-sort, #comment-sort input - color: #808080 + color: var(--border-lt) font-size: 12px margin: 5px 0 - background-color: $background + background-color: var(--background) + @media (prefers-color-scheme: light) + color: var(--l-border-lt) + background-color: var(--l-background) #comment-sort input - border-color: $border + border-color: var(--border) + @media (prefers-color-scheme: light) + border-color: var(--l-border) &[type='number'] width: 54px @@ -29,8 +36,13 @@ input, select &:hover, &:focus - color: $light + color: var(--light) + @media (prefers-color-scheme: light) + color: var(--l-light) option - color: $light - background-color: $background + color: var(--light) + background-color: var(--background) + @media (prefers-color-scheme: light) + color: var(--l-light) + background-color: var(--l-background) diff --git a/src/sass/search.sass b/src/sass/search.sass index 95a7873..b47f919 100644 --- a/src/sass/search.sass +++ b/src/sass/search.sass @@ -3,7 +3,7 @@ // // .search-row // padding: 10px 6px 11px -// border-bottom: 1px dotted #ccc +// border-bottom: 1px dotted var(--thread-rest) // min-height: 26px // // .search-left @@ -46,7 +46,7 @@ // display: block // padding: 9px 16px // font-size: 18px -// background: #239f2b +// background: $about-todo // border: 0 // border-radius: 2px -// color: white +// color: $white diff --git a/src/sass/subreddit.sass b/src/sass/subreddit.sass index 09d9504..8a2796e 100644 --- a/src/sass/subreddit.sass +++ b/src/sass/subreddit.sass @@ -1,29 +1,31 @@ .post-rank min-width: 20px - color: #505050 + color: var(--rank) font-size: 16px text-align: right margin: 14px 4px 0 0 + @media (prefers-color-scheme: light) + color: var(--l-rank) //.subreddit-info -// border-bottom: 1px dotted gray +// border-bottom: 1px dotted var(--border-lt) // padding: 5px 10px -// color: #ccc +// color: var(--thread-rest) // font-size: 14px // margin-bottom: 5px // // select -// background: #262626 -// color: #808080 +// background: var(--background) +// color: var(--border-lt) // font-size: 14px // font-weight: bold // text-decoration: underline // border: 0 // //#pagination -// border-top: 1px dotted gray +// border-top: 1px dotted var(--border-lt) // padding: 5px 10px -// color: #ccc +// color: var(--thread-rest) // font-size: 16px // span, a // margin: 5px @@ -35,10 +37,10 @@ // margin-left: 5px // font-size: 22px // font-weight: bold -// color: white +// color: var(--white) // //.subreddit-title-link // margin-bottom: 15px // margin-left: 5px // font-size: 14px -// color: white +// color: var(--white) diff --git a/src/sass/thread.sass b/src/sass/thread.sass index e96b9db..7d63975 100644 --- a/src/sass/thread.sass +++ b/src/sass/thread.sass @@ -24,8 +24,8 @@ background-position: 0px -1267px background-repeat: no-repeat height: 50px - - .thumbnail-image + + .thumbnail-image background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") background-position: 0px -1043px background-repeat: no-repeat @@ -36,11 +36,12 @@ background-position: 0px -1155px background-repeat: no-repeat height: 50px + .thread-score-box margin: 0 7px width: 43px - .vote + .vote background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==) background-repeat: no-repeat margin-left: auto @@ -49,103 +50,123 @@ height: 14px cursor: pointer - .upvote + .upvote background-position: -15px 0px margin-top: 2px - .downvote + .downvote background-position: -15px -14px margin-top: 2px - - .thread-score - color: #646464 + + .thread-score + color: var(--thread-score) font-size: 13px font-weight: bold text-align: center + @media (prefers-color-scheme: light) + color: var(--l-thread-score) - .thread-content - flex: 1 - float: left - margin-left: 3px - - .link-flair + .link-flair display: inline-block - color: #c8c8c8 - background-color: #404040 + color: var(--thread-flair) + background-color: var(--thread-flr-bg) margin-right: 5px - border: 1px solid #4d4d4d + border: 1px solid var(--thread-flr-brd) border-radius: 2px padding: 0 2px font-size: 10px - - .thread-title - color: #a6a6a6 + @media (prefers-color-scheme: light) + color: var(--l-thread-flair) + background-color: var(--l-thread-flr-bg) + border-color: var(--l-thread-flr-brd) + + .thread-title + color: var(--thread-title) margin-right: 5px - - .thread-title:hover + @media (prefers-color-scheme: light) + color: var(--l-thread-title) + + .thread-title:hover text-decoration: none - - .domain - color: #888 + + .domain + color: var(--thread-domain) font-size: 10px - - .thread-selftext - border: 1px solid #666 + @media (prefers-color-scheme: light) + color: var(--l-thread-domain) + + .thread-image + max-width: 768px + max-height: 768px + + .thread-info + color: var(--dim) + font-size: 10px + margin-top: 2px + @media (prefers-color-scheme: light) + color: var(--l-dim) + + +.thread-content + margin: 0 7px + + .thread-selftext + border: 1px solid var(--thread-brd) border-radius: 7px margin: 5px 0 7px padding: 5px 10px max-width: 840px - color: $light + color: var(--light) font-size: 14px + @media (prefers-color-scheme: light) + border-color: var(--l-thread-brd) + color: var(--l-light) p margin: 5px 0 line-height: 20px - + a:hover text-decoration: none - p:first-child + p:first-child margin-top: 0px - - p:last-child + p:last-child margin-bottom: 0px - - .thread-image - max-width: 768px - max-height: 768px - - .thread-info - color: #828282 - font-size: 10px - margin-top: 2px - - - .total-comments + .total-comments font-size: 10px font-weight: bold - margin: 4px 0 + margin-top: 4px + padding-bottom: 7px a, span - color: #828282 + color: var(--dim) margin-right: 4px + @media (prefers-color-scheme: light) + color: var(--l-dim) a cursor: pointer .view-rest-of-comment - background-color: #264d73 - border-color: #2966a3 + background-color: var(--thread-rest-bg) + border-color: var(--thread-rest-brd) font-size: 13px padding: 10px - color: rgb(204, 204, 204) + color: var(--thread-rest) margin-bottom: 10px + @media (prefers-color-scheme: light) + background-color: var(--l-thread-rest-bg) + border-color: var(--l-thread-rest-brd) + color: var(--l-thread-rest) .faux-link - color: $link + color: var(--link) + @media (prefers-color-scheme: light) + color: var(--l-link) .load-more @@ -163,4 +184,8 @@ @keyframes fade-anim 100% - color: $background + color: var(--background) + @media (prefers-color-scheme: light) + @keyframes fade-anim + 100% + color: var(--l-background) diff --git a/src/state.js b/src/state.js index 0f87031..0f1760b 100644 --- a/src/state.js +++ b/src/state.js @@ -19,6 +19,13 @@ export const filter = { deleted: 'SHOW_DELETED' } +// Light/Dark mode themes +export const theme = { + dark: 'DARK', + light: 'LIGHT', + system: 'SYSTEM' +} + export const maxCommentsDefault = 800 export const minCommentsLimit = chunkSize export const maxCommentsLimit = 20000 @@ -35,6 +42,10 @@ export const constrainMaxComments = maxComments => { const sortKey = 'commentSort' const filterKey = 'commentFilter' const maxCommentsKey = 'maxComments' +const themeKey = 'theme' + +document.documentElement.dataset.theme = get(themeKey, theme.dark) +setTimeout(() => document.documentElement.style.transitionDuration = '0.4s') class GlobalState extends Container { state = { @@ -49,6 +60,8 @@ class GlobalState extends Container { // Preferred max # of comments to get during (re-)loads maxComments = get(maxCommentsKey, maxCommentsDefault) + curTheme = document.documentElement.dataset.theme + setCommentSort (sortType) { put(sortKey, sortType) this.setState({commentSort: sortType}) @@ -69,6 +82,12 @@ class GlobalState extends Container { // Loads more comments loadMoreComments = loadingMoreComments => this.setState({loadingMoreComments}) + setTheme (newTheme) { + put(themeKey, newTheme) + this.curTheme = newTheme + document.documentElement.dataset.theme = newTheme + } + setSuccess = () => { this.setState({statusText: '', statusHelpUrl: undefined, statusImage: '/images/success.png'}) document.body.classList.remove('wait')