它的工作原理是从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帖子中的设计影响
#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
评论
从某种意义上说,您将打破代码审查的设计。我需要尝试看起来很棒的设计!@Quill会大大改变代码块/帖子的外观吗?也许值得发布第二张屏幕截图,也许是实际帖子的截图?干得好:)
它并没有特别触及内部内容,但是如果您喜欢我可以
绝对惊人的队友。我希望我可以为此+1。 :-)
@EthanBierlein,“为什么不呢?”实际上,这是我的道理。 Arqade有页脚,所以我只是模仿了样式并更改了图像位置