diff --git a/dist/main.css b/dist/main.css index 388a6c9..501b184 100644 --- a/dist/main.css +++ b/dist/main.css @@ -1,2 +1,2 @@ -: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;--tooltip-bg: #121212;--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-tooltip-bg: #121212;--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;--tooltip-bg: white;--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-tooltip-bg: white;--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{background-color:var(--background);font-family:verdana,arial,helvetica,sans-serif;scrollbar-color:var(--scrollbar);transition-property:background-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)}}div,input{transition-property:background-color,border-color;transition-timing-function:ease-out;transition-duration:.4s}body{margin:0}.wait{cursor:wait}.main{margin:8px 15px 15px 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:rgba(0,0,0,0);border:0;color:var(--dim)}@media(prefers-color-scheme: light){select{color:var(--l-dim)}}@media(pointer: coarse),(hover: none){span[title],a[title]{position:relative;display:inline-flex;justify-content:center}span[title]:hover::after,a[title]:hover::after{content:attr(title);position:absolute;top:95%;z-index:1;padding:3px;min-width:125px;font-weight:normal;text-align:center;color:var(--white);background-color:var(--tooltip-bg);border:1px solid var(--thread-brd);border-radius:3px}}@media(pointer: coarse)and (prefers-color-scheme: light),(hover: none)and (prefers-color-scheme: light){span[title]:hover::after,a[title]:hover::after{color:var(--l-white);background-color:var(--l-tooltip-bg);border-color:var(--l-thread-brd)}}header{background-color:#c70300;color:#fff;display:flex;justify-content:space-between;align-items:center;margin:7px;padding:7px}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 .highlighted{border:2px solid var(--thread-rest-brd)}@media(prefers-color-scheme: light){.comment .highlighted{border-color:var(--l-thread-rest-brd)}}.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)}}#comment-sort .attention{outline:3px solid #c70300;border-radius:2px;animation:attention-anim 1s steps(2, jump-none) 2}@keyframes attention-anim{100%{outline-style:none}}.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)}} +: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;--tooltip-bg: #121212;--diff-ins: #050;--diff-del: #800;--diff-mod: #770;--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-tooltip-bg: #121212;--l-diff-ins: #050;--l-diff-del: #800;--l-diff-mod: #770;--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;--tooltip-bg: white;--diff-ins: #afa;--diff-del: #faa;--diff-mod: #ff9;--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-tooltip-bg: white;--l-diff-ins: #afa;--l-diff-del: #faa;--l-diff-mod: #ff9;--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{background-color:var(--background);font-family:verdana,arial,helvetica,sans-serif;scrollbar-color:var(--scrollbar);transition-property:background-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)}}div,input{transition-property:background-color,border-color;transition-timing-function:ease-out;transition-duration:.4s}body{margin:0}.wait{cursor:wait}.main{margin:8px 15px 15px 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:rgba(0,0,0,0);border:0;color:var(--dim)}@media(prefers-color-scheme: light){select{color:var(--l-dim)}}@media(pointer: coarse),(hover: none){span[title],a[title]{position:relative;display:inline-flex;justify-content:center}span[title]:hover::after,a[title]:hover::after{content:attr(title);position:absolute;top:95%;z-index:1;padding:3px;min-width:132px;font-weight:normal;text-align:center;color:var(--white);background-color:var(--tooltip-bg);border:1px solid var(--thread-brd);border-radius:3px}}@media(pointer: coarse)and (prefers-color-scheme: light),(hover: none)and (prefers-color-scheme: light){span[title]:hover::after,a[title]:hover::after{color:var(--l-white);background-color:var(--l-tooltip-bg);border-color:var(--l-thread-brd)}}header{background-color:#c70300;color:#fff;display:flex;justify-content:space-between;align-items:center;margin:7px;padding:7px}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 .highlighted{border:2px solid var(--thread-rest-brd)}@media(prefers-color-scheme: light){.comment .highlighted{border-color:var(--l-thread-rest-brd)}}.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)}}#comment-sort .attention{outline:3px solid #c70300;border-radius:2px;animation:attention-anim 1s steps(2, jump-none) 2}@keyframes attention-anim{100%{outline-style:none}}.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}.thread-selftext ins.diffins,.thread-selftext ins.diffmod,.comment ins.diffins,.comment ins.diffmod{text-decoration:none;background-color:var(--diff-ins)}@media(prefers-color-scheme: light){.thread-selftext ins.diffins,.thread-selftext ins.diffmod,.comment ins.diffins,.comment ins.diffmod{background-color:var(--l-diff-ins)}}.thread-selftext ins.mod,.comment ins.mod{text-decoration:none;background-color:var(--diff-mod)}@media(prefers-color-scheme: light){.thread-selftext ins.mod,.comment ins.mod{background-color:var(--l-diff-mod)}}.thread-selftext del.diffdel,.thread-selftext del.diffmod,.comment del.diffdel,.comment del.diffmod{background-color:var(--diff-del)}@media(prefers-color-scheme: light){.thread-selftext del.diffdel,.thread-selftext del.diffmod,.comment del.diffdel,.comment del.diffmod{background-color:var(--l-diff-del)}}.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 dd28763..79c4939 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.1.8", "license": "GPL-3.0", "dependencies": { + "@ali-tas/htmldiff-js": "^1.1.3", "core-js": "^3.22.7", "npm": "^8.11.0", "react": "^16.14.0", @@ -35,6 +36,11 @@ "webpack-dev-server": "^4.9.0" } }, + "node_modules/@ali-tas/htmldiff-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@ali-tas/htmldiff-js/-/htmldiff-js-1.1.3.tgz", + "integrity": "sha512-2QyK08A/O1pG5yRwFY1B4fQJbaxH8b0FxLiGTNuZP9yp8Y7uW6yat9UXzA2yjF5KOaNQ9y9/Eu94+ro74S9Qng==" + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -2436,6 +2442,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" }, @@ -2617,7 +2624,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", @@ -2707,6 +2715,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" @@ -2810,6 +2819,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", @@ -2873,6 +2883,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" } @@ -2880,7 +2891,8 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true }, "node_modules/colorette": { "version": "2.0.16", @@ -2951,7 +2963,8 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "node_modules/connect-history-api-fallback": { "version": "1.6.0", @@ -3383,6 +3396,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, "engines": { "node": ">=0.8.0" } @@ -4079,7 +4093,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/faye-websocket": { "version": "0.11.4", @@ -4267,7 +4282,8 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "node_modules/fsevents": { "version": "2.3.2", @@ -4389,6 +4405,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -4434,7 +4451,8 @@ "node_modules/graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", + "dev": true }, "node_modules/handle-thing": { "version": "2.0.1", @@ -4467,6 +4485,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, "engines": { "node": ">=4" } @@ -4534,7 +4553,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", @@ -4734,6 +4754,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -4742,7 +4763,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", @@ -5068,7 +5090,8 @@ "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "node_modules/isobject": { "version": "3.0.1", @@ -5155,7 +5178,8 @@ "node_modules/json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true }, "node_modules/json-schema-traverse": { "version": "0.4.1", @@ -5456,6 +5480,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" }, @@ -5473,7 +5498,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": "7.2.5", @@ -7938,6 +7964,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, "dependencies": { "wrappy": "1" } @@ -8087,6 +8114,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" } @@ -8844,6 +8872,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" }, @@ -8932,6 +8961,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" } @@ -10043,6 +10073,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" }, @@ -10188,7 +10219,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", @@ -10804,6 +10836,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" }, @@ -10848,7 +10881,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.7.0", @@ -10888,6 +10922,11 @@ } }, "dependencies": { + "@ali-tas/htmldiff-js": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@ali-tas/htmldiff-js/-/htmldiff-js-1.1.3.tgz", + "integrity": "sha512-2QyK08A/O1pG5yRwFY1B4fQJbaxH8b0FxLiGTNuZP9yp8Y7uW6yat9UXzA2yjF5KOaNQ9y9/Eu94+ro74S9Qng==" + }, "@ampproject/remapping": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", @@ -12669,6 +12708,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" } @@ -12803,7 +12843,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", @@ -12882,6 +12923,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" @@ -12947,6 +12989,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", @@ -12990,6 +13033,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" } @@ -12997,7 +13041,8 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" + "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", + "dev": true }, "colorette": { "version": "2.0.16", @@ -13061,7 +13106,8 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true }, "connect-history-api-fallback": { "version": "1.6.0", @@ -13383,7 +13429,8 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true }, "eslint": { "version": "8.16.0", @@ -13906,7 +13953,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 }, "faye-websocket": { "version": "0.11.4", @@ -14048,7 +14096,8 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "fsevents": { "version": "2.3.2", @@ -14130,6 +14179,7 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -14163,7 +14213,8 @@ "graceful-fs": { "version": "4.2.10", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", + "dev": true }, "handle-thing": { "version": "2.0.1", @@ -14189,7 +14240,8 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true }, "has-property-descriptors": { "version": "1.0.0", @@ -14239,7 +14291,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", @@ -14397,6 +14450,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -14405,7 +14459,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", @@ -14620,7 +14675,8 @@ "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==" + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true }, "isobject": { "version": "3.0.1", @@ -14685,7 +14741,8 @@ "json-parse-even-better-errors": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -14918,6 +14975,7 @@ "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" } @@ -14930,7 +14988,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": "7.2.5", @@ -16606,6 +16665,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "dev": true, "requires": { "wrappy": "1" } @@ -16712,7 +16772,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", @@ -17302,6 +17363,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" } @@ -17367,7 +17429,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.18.0", @@ -18199,6 +18262,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" } @@ -18297,7 +18361,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", @@ -18757,6 +18822,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" } @@ -18789,7 +18855,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.7.0", diff --git a/package.json b/package.json index 52afc0f..fbb42b7 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "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": { + "@ali-tas/htmldiff-js": "^1.1.3", "core-js": "^3.22.7", "npm": "^8.11.0", "react": "^16.14.0", diff --git a/src/pages/common/Post.js b/src/pages/common/Post.js index c3e2fda..90d2943 100644 --- a/src/pages/common/Post.js +++ b/src/pages/common/Post.js @@ -1,6 +1,8 @@ import React, { useState } from 'react' import { Link } from 'react-router-dom' -import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, redditThumbnails, isDeleted, isRemoved } from '../../utils' +import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, redditThumbnails, + isDeleted, isRemoved, editedModes, editedTitles } from '../../utils' +import { Diff } from '@ali-tas/htmldiff-js' export default (props) => { if (!props.title) { @@ -55,31 +57,37 @@ export default (props) => { }, Thumbnail) } - let innerHTML, editedInnerHTML; + const innerHTML = Array(editedModes.length) if (props.removed && isRemoved(props.selftext)) { if (!props.hasOwnProperty('retrieved_utc') && !props.hasOwnProperty('retrieved_on') || !props.hasOwnProperty('created_utc')) { - innerHTML = '

[removed too quickly to be archived]

' + innerHTML[editedModes.orig] = '

[removed too quickly to be archived]

' } else { const retrieved = props.hasOwnProperty('retrieved_utc') ? props.retrieved_utc : props.retrieved_on; - innerHTML = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` + innerHTML[editedModes.orig] = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` } } else if (props.selftext && (props.is_self || !isDeleted(props.selftext))) { - innerHTML = parse(props.selftext) - if (props.hasOwnProperty('edited_selftext')) - editedInnerHTML = parse(props.edited_selftext) + innerHTML[editedModes.orig] = parse(props.selftext) + if (props.hasOwnProperty('edited_selftext')) { + innerHTML[editedModes.edited] = parse(props.edited_selftext) + innerHTML[editedModes.rich] = Diff.execute(innerHTML[editedModes.orig], innerHTML[editedModes.edited]) + } } - const [showEdited, setShowEdited] = useState(false) + let editedMode, setEditedMode + if (innerHTML[editedModes.rich]) + [editedMode, setEditedMode] = useState(editedModes.rich) + else + editedMode = editedModes.orig const totalComments =
{props.num_comments} comments  reddit  reveddit {props.hasOwnProperty('edited_selftext') && - setShowEdited(!showEdited)} - onKeyDown={e => e.key == 'Enter' && setShowEdited(!showEdited)} + setEditedMode((editedMode + 1) % editedModes.length)} + onKeyDown={e => e.key == 'Enter' && setEditedMode((editedMode + 1) % editedModes.length)} 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'} + title= {editedTitles[editedMode]} >*edited}
@@ -110,12 +118,12 @@ export default (props) => { }  by {props.author} to /r/{props.subreddit} - {innerHTML === undefined && totalComments} + {innerHTML[editedModes.orig] === undefined && totalComments} - {innerHTML !== undefined && + {innerHTML[editedModes.orig] !== undefined &&
-
+
{totalComments}
} diff --git a/src/pages/thread/Comment.js b/src/pages/thread/Comment.js index 108abab..aaf5559 100644 --- a/src/pages/thread/Comment.js +++ b/src/pages/thread/Comment.js @@ -1,6 +1,8 @@ import React, { useState } from 'react' import { Link, NavLink } from 'react-router-dom' -import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, parse, isRemoved } from '../../utils' +import { prettyScore, prettyDate, prettyTimeDiff, exactDateTime, + parse, isRemoved, editedModes, editedTitles } from '../../utils' +import { Diff } from '@ali-tas/htmldiff-js' const Comment = (props) => { let commentStyle = 'comment ' @@ -16,30 +18,36 @@ const Comment = (props) => { commentStyle += ' highlighted' } - let innerHTML, editedInnerHTML; + const innerHTML = Array(editedModes.length) if (props.removed && isRemoved(props.body)) { if (!props.hasOwnProperty('retrieved_utc') && !props.hasOwnProperty('retrieved_on') || !props.hasOwnProperty('created_utc')) { - innerHTML = '

[removed too quickly to be archived]

' + innerHTML[editedModes.orig] = '

[removed too quickly to be archived]

' } else if (props.created_utc < 1627776000) { // Aug 1 2021 const retrieved = props.hasOwnProperty('retrieved_utc') ? props.retrieved_utc : props.retrieved_on; - innerHTML = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` + innerHTML[editedModes.orig] = `

[removed within ${prettyTimeDiff(retrieved - props.created_utc)}]

` } // After around Aug 1 2021, Pushshift began updating comments from Reddit after around // 24-48 hours, including removing(?) comments that were removed from Reddit. The presence // of either retrieved_utc or retrieved_on can currently be used to test for this behaviour. else if (props.hasOwnProperty('retrieved_utc')) { - innerHTML = `

[removed within ${prettyTimeDiff(props.retrieved_utc - props.created_utc)}]

` + innerHTML[editedModes.orig] = `

[removed within ${prettyTimeDiff(props.retrieved_utc - props.created_utc)}]

` } else { - innerHTML = `

[either removed too quickly, or removed(?) from archive after ${prettyTimeDiff(props.retrieved_on - props.created_utc, true)}]

` + innerHTML[editedModes.orig] = `

[either removed too quickly, or removed(?) from archive after ${prettyTimeDiff(props.retrieved_on - props.created_utc, true)}]

` } } else { - innerHTML = parse(props.body) - if (props.hasOwnProperty('edited_body')) - editedInnerHTML = parse(props.edited_body) + innerHTML[editedModes.orig] = parse(props.body) + if (props.hasOwnProperty('edited_body')) { + innerHTML[editedModes.edited] = parse(props.edited_body) + innerHTML[editedModes.rich] = Diff.execute(innerHTML[editedModes.orig], innerHTML[editedModes.edited]) + } } const [collapsed, setCollapsed] = useState(false) - const [showEdited, setShowEdited] = useState(false) + let editedMode, setEditedMode + if (innerHTML[editedModes.rich]) + [editedMode, setEditedMode] = useState(editedModes.rich) + else + editedMode = editedModes.orig const permalink = `/r/${props.subreddit}/comments/${props.link_id}/_/${props.id}/` const parentlink = props.parent_id == props.link_id ? undefined : ( props.depth == 0 ? @@ -77,17 +85,17 @@ const Comment = (props) => { >* (last edited {prettyDate(props.edited ? props.edited : props.created_utc)})}
-
+
({pathname: permalink, hash: '#comment-info', state: {scrollBehavior: 'auto'}})}>permalink reddit reveddit {parentlink} {props.hasOwnProperty('edited_body') && - setShowEdited(!showEdited)} - onKeyDown={e => e.key == "Enter" && setShowEdited(!showEdited)} + setEditedMode((editedMode + 1) % editedModes.length)} + onKeyDown={e => e.key == "Enter" && setEditedMode((editedMode + 1) % editedModes.length)} 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'} + title= {editedTitles[editedMode]} >*edited}
diff --git a/src/sass/colors.sass b/src/sass/colors.sass index fb68aa6..d07b5f3 100644 --- a/src/sass/colors.sass +++ b/src/sass/colors.sass @@ -20,6 +20,10 @@ $even-bg: #161616 $comment-brd: #333 $tooltip-bg: #121212 +$diff-ins: #050 +$diff-del: #800 +$diff-mod: #770 + $thread-title: #a6a6a6 $thread-score: #646464 $thread-domain: #888 @@ -55,6 +59,10 @@ $l-even-bg: white $l-comment-brd: #ccc $l-tooltip-bg: white +$l-diff-ins: #afa +$l-diff-del: #faa +$l-diff-mod: #ff9 + $l-thread-title: #4d4d4d $l-thread-score: #878787 $l-thread-domain: #777 @@ -92,6 +100,10 @@ $l-about-q: #522719 --comment-brd: #{$comment-brd} --tooltip-bg: #{$tooltip-bg} + --diff-ins: #{$diff-ins} + --diff-del: #{$diff-del} + --diff-mod: #{$diff-mod} + --thread-title: #{$thread-title} --thread-score: #{$thread-score} --thread-domain: #{$thread-domain} @@ -126,6 +138,10 @@ $l-about-q: #522719 --l-comment-brd: #{$comment-brd} --l-tooltip-bg: #{$tooltip-bg} + --l-diff-ins: #{$diff-ins} + --l-diff-del: #{$diff-del} + --l-diff-mod: #{$diff-mod} + --l-thread-title: #{$thread-title} --l-thread-score: #{$thread-score} --l-thread-domain: #{$thread-domain} @@ -163,6 +179,10 @@ $l-about-q: #522719 --comment-brd: #{$l-comment-brd} --tooltip-bg: #{$l-tooltip-bg} + --diff-ins: #{$l-diff-ins} + --diff-del: #{$l-diff-del} + --diff-mod: #{$l-diff-mod} + --thread-title: #{$l-thread-title} --thread-score: #{$l-thread-score} --thread-domain: #{$l-thread-domain} @@ -200,6 +220,10 @@ $l-about-q: #522719 --l-comment-brd: #{$l-comment-brd} --l-tooltip-bg: #{$l-tooltip-bg} + --l-diff-ins: #{$l-diff-ins} + --l-diff-del: #{$l-diff-del} + --l-diff-mod: #{$l-diff-mod} + --l-thread-title: #{$l-thread-title} --l-thread-score: #{$l-thread-score} --l-thread-domain: #{$l-thread-domain} diff --git a/src/sass/common.sass b/src/sass/common.sass index 053a32b..895eed9 100644 --- a/src/sass/common.sass +++ b/src/sass/common.sass @@ -115,7 +115,7 @@ select top: 95% z-index: 1 padding: 3px - min-width: 125px + min-width: 132px font-weight: normal text-align: center color: var(--white) diff --git a/src/sass/thread.sass b/src/sass/thread.sass index 7d63975..2a8f46a 100644 --- a/src/sass/thread.sass +++ b/src/sass/thread.sass @@ -151,6 +151,26 @@ cursor: pointer +.thread-selftext, .comment + + ins.diffins, ins.diffmod + text-decoration: none + background-color: var(--diff-ins) + @media (prefers-color-scheme: light) + background-color: var(--l-diff-ins) + + ins.mod + text-decoration: none + background-color: var(--diff-mod) + @media (prefers-color-scheme: light) + background-color: var(--l-diff-mod) + + del.diffdel, del.diffmod + background-color: var(--diff-del) + @media (prefers-color-scheme: light) + background-color: var(--l-diff-del) + + .view-rest-of-comment background-color: var(--thread-rest-bg) border-color: var(--thread-rest-brd) diff --git a/src/utils.js b/src/utils.js index 338c327..cc4dbf0 100644 --- a/src/utils.js +++ b/src/utils.js @@ -108,3 +108,16 @@ export const oldSort = (commentA, commentB) => commentA.created_utc - commentB.c export const showRemoved = comment => comment.removed === true export const showDeleted = comment => comment.deleted === true export const showRemovedAndDeleted = comment => comment.removed === true || comment.deleted === true + +// Edited text display modes +export const editedModes = { + orig: 0, + edited: 1, + rich: 2, + length: 3 +} +export const editedTitles = [ + 'The first archived edit is shown; click to change', + 'The most recent edit is shown; click to change', + 'Edits are highlighted; click to change' +]