Beta-Blue B. Gone_编程黑洞网

我已经使用Userscripts和CSS编写了代码审查设计。

它的工作原理是从GitHub存储库中获取CSS，然后使用内置的gm_addStyle函数将其添加到页面中。

提取的CSS也要最小化。

看起来是这样的：

我在看一些其他Stack Exchange网站的灵感来源是Physics，Arqade，Stack Overflow和SciFi。

我在重构时遇到了一些问题，特别是：
/>
我滥用CSS选择器吗？
在CSS中提供图标作为Base64而不是图像链接会更好吗？
使用深色配色方案，是否在视觉上“工作吗？
我[ab | mis]使用@match方案吗？正则表达式@include会更好吗？
我让url检查明确输入了冒号，以检查该站点是否为Meta。我本来会使用.contains('meta')，但是在偶然的情况下，一个问题的标题中带有'meta'这个词，所以不会将其表示为元问题。例如，标题为“时间表生成器”。

这也可以在GitHub上使用。

JavaScript：

 // ==UserScript==
// @name        CodeReview dark theme
// @namespace   https://github.com/The-Quill/Code-Review-Design
// @version     1.0
// @description A new Code Review theme.
// @author      Quill
// @match       *://codereview.stackexchange.com
// @match       *://codereview.stackexchange.com/*
// @match       *://meta.codereview.stackexchange.com
// @match       *://meta.codereview.stackexchange.com/*
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @resource    theme     https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.design.css
// @resource    main_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.main.css
// @resource    meta_skin https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/min.meta.css
// ==/UserScript==

GM_addStyle(GM_getResourceText('theme'));

GM_addStyle(
    GM_getResourceText(
        (window.location.href.contains('://meta.codereview')
        ? 'meta'
        : 'main') + '_skin')
);

main.css：

 #hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/main-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: #FF6700;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: #FF6700;
    border-bottom: 2px solid #FF6700;
}

meta.css：

 #hlogo a {
    background: transparent url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/meta-logo.png) no-repeat left top;
    width: 400px;
    margin-top: 5px;
    height: 164px;
    background-size: 87% 50%;
    font-size: 0;
}
.youarehere {
    color: black;
}
#tabs a:hover,
.tabs a:hover,
.nav ul a:hover,
#tabs a.youarehere,
.tabs a.youarehere,
.nav li.youarehere a,
.nav ul .youarehere a {
    color: black;
    border-bottom: 2px solid black;
}

design.css：

 body {
    background-color: #5A5A5A;
}
#hlogo {
    margin: 0px 0 0 0;
}
#header {
    height: 165px;
}
.container {
    box-shadow: #404040 0 120px 0 inset;
}
#footer {
    background-color: #404040;
}
.tagged-interesting {
    background-color: rgba(255, 245, 222, 0.4);
}
.question-summary {
    border-bottom: 0px;
}
.footerwrap {
    padding: 15px 10px 70px 10px;
    background: rgba(0, 0, 0, 0) url(https://raw.githubusercontent.com/The-Quill/Code-Review-Design/master/resources/images/footer.png) no-repeat center bottom;
}
#tabs a.youarehere,
.tabs a.youarehere {
    font-weight: bold;
}

#svnrev,
#copyright,
#footer #svnrev,
#footer #copyright,
#footer #additional-notices {
    text-align: left;
    color: #FFF;
}

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

这受此Meta帖子中的设计影响

从某种意义上说，您将打破代码审查的设计。我需要尝试看起来很棒的设计！

@Quill会大大改变代码块/帖子的外观吗？也许值得发布第二张屏幕截图，也许是实际帖子的截图？干得好:)

它并没有特别触及内部内容，但是如果您喜欢我可以

绝对惊人的队友。我希望我可以为此+1。 :-)

@EthanBierlein，“为什么不呢？”实际上，这是我的道理。 Arqade有页脚，所以我只是模仿了样式并更改了图像位置

#1 楼

// @resource    theme     https://raw.githubusercontent.com

Github不是CDN，因此如果您想与他人共享它，可用性可能会成为问题。 Github可能会由于维护或攻击响应而随时停机。
建议您在某处拥有一台高可用性，低延迟的服务器。在每次更新代码时，都会启动CI服务构建。成功构建后，它将其部署到服务器，以供所有人使用。像Travis + Heroku之类的东西。
此外，您可能希望在每次更新后破坏缓存。不确定如何在用户脚本中执行此操作，但您的想法是要在没有更改的情况下缓存样式，而在没有更改时进行更新。

#footer,
.footer a,
#footer th,
#footer-sites a,
#footer #svnrev a,
.top-footer-links a,
#footer #copyright a,
#footer #footer-sites a,
#footer #svnrev a:visited,
.nav li:not(.youarehere) a,
#footer #copyright a:visited,
#footer #additional-notices a,
#footer #footer-sites a:visited,
#footer #additional-notices a:visited {
    color: #FFF;
}

可以使用CSS pre-借助mixin的处理器。您可以一次定义样式，并使所有这些锚点“包括”该白色样式。建议使用SCSS。进行编译时，一个构建步骤（上面建议）将为您完成。
另外，选择器上有两个ID。假定ID在页面上是唯一的。因此，您可以安全地将选择器“根”到该更高版本的ID。在这种情况下，您可以从上面的大多数选择器中删除#footer。
对于您的问题：

我滥用CSS选择器吗？

我相信是这样。但这可以通过SCSS解决，以减少您触摸的实际CSS。另外，我认为SE网站运行于同一框架。如果您能找到改变所有内容的正确选择器（例如使所有颜色变为桃红色的选择器），那将大大缩短您的样式。

最好在图标中将图标提供为Base64 CSS而不是图像链接？

Base64字符串通常比原始字符串大2-3倍。我认为额外的HTTP请求不会受到伤害。此外，如果您有多张图像，则可以使用sprite将其简化为一个HTTP请求。

使用深色配色方案，它在视觉上是否可以正常工作？

这只是“黑暗与黑暗与黑暗与光明”辩论中的另一场辩论。真的要看。是的，只要我仍然可以查看代码，就可以。

我使用@match方案是[ab | mis]吗？正则表达式@include会更好吗？
我让url检查明确输入了冒号，以检查该站点是否为Meta。用户脚本经验不多。
对于一般主题，由于Meta网站是在谈论它的父网站，因此该问题在Meta上更受关注。不确定网站毕业后，谁来决定主题。但是话又说回来，黑色的橙色...看起来不错。

\ $ \ begingroup \ $
实际上，根据Base64编码的定义，Base64字符串比原始字符串大了log（256）/ log（64）= 4/3。
\ $ \ endgroup \ $
– Benoit Esnard
16年1月6日在14:37

编程黑洞网

Beta-Blue B. Gone

评论

#1 楼

评论