我已经使用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