为品葱写了个清爽的主题(UI),欢迎使用

首先,你需要安装一个类似油猴的(Chrome)扩展,有两种选择
1:Stylus (开源的,不跟踪用户隐私)
2. Stylish (用的人多,且操作界面比1好看一点点,曾有记录上传用户隐私的黑历史)
个人推荐Stylus,顺便一提,Stylish商店的所有样式,都可以安装到Stylus里使用的。
安装好后,打开https://userstyles.org/styles/183159/beacutify-pincong 然后点击中间的Install即可。
然后打开品葱即可看到效果。
补充:
1. 只支持电脑浏览器
2. 只测试过Chrome,(Firefox不清楚),新版Edge很可能可以,但没测试过。(谁测试过后麻烦补充到评论区)
再次补充:出于一些用户可能出现的安全担忧,这里将样式代码放出来。
你可以不经过上面的链接安装主题。而是安装过Stylus后自行创建一个主题。(Google下教程即可)。
同时记得选择主题的应用对象为pincong.rocks。(否则会影响到其他网站)
https://i.imgur.com/Em7N4ir.jpg
代码中引用了一个外链:background: url(https://i.imgur.com/tz9qoJI.jpg) no-repeat !important;
但这是Imgur的域名,所以尽管放心。
.aw-top-menu-wrap, .navbar-collapse, .aw-top-nav>nav>ul>li>a.active, .aw-dropdown-found-content a, div.sceditor-toolbar, div.sceditor-group:first-child, div.sceditor-group {
background: #fff !important;
}
.aw-dropdown-found-content {
width: 120px;
}
a, #hqm_note,aw-footer {
color: #728297 !important;
}
.aw-nav-tabs>li.active a, .aw-nav-tabs>li.active a, .aw-nav-tabs>li>a:hover {
border-bottom-color: #728297;
}
#sort_control_hot {
color: #71c9ce !important;
}
#sort_control_hot:hover {
border-color: #71c9ce;
}
.aw-common-list .aw-question-content>span, .aw-common-list .aw-question-content p span {
color: #c5c9ce;
}
.aw-question-tags {
color: #f1f4f9;
}
.aw-top-nav>nav>ul>li>a:hover, .category .list>li.active, .category .list>li:hover {
color: black;
background: unset;
}
.category .list>li.active>a, .category .list>li:hover>a {
color: unset;
}
.category {
margin-bottom: 25px;
}
.aw-dropdown-found-content a:before {
margin-right: 5px;
}
.topic-tag .text, .aw-article-vote a:hover, .aw-article-vote a.active .aw-article-vote b {
color: #fff !important;
}
.aw-dropdown-found-content a:hover {
background: #f2f2f2 !important;
}
.aw-top-menu-wrap {
height: 60px;
border-bottom: 1px solid #e5ecf5;
}
.aw-nav-tabs, .aw-common-list>div+div,.aw-main-content {
border-color: #e5ecf5;
}
.navbar-collapse.collapse {
height: 59px !important;
}
body, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
background: #e5ecf5;
}
body[contenteditable="true"] {
background: #fff;
}
.pagination>li>a, .pagination>li>span {
border: none;
padding: 5px 10px;
}
.page-control .pagination {
float: unset;
}
.aw-content-wrap {
border-radius: .375rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
.sceditor-container {
border: 0 solid #e2e8f0;
}
.aw-container-wrap {
margin-top: 25px;
}
.category {
width:100% !important;
margin-top: -25px;
}
.category .list {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.category .list li {
float: none;
}
.category .col-sm-12 {
padding: 0;
background: #fff;
}
.aw-top-nav>nav>ul>li>a {
display: flex;
align-items: center;
height: 59px;
}
.aw-top-nav>nav>ul>li>a i {
position: static;
margin-right: 5px;
}
.category .list {
padding-top: 10px;
}
.aw-verified, .badge.badge-info {
padding: 3px 4px;
background-color: #71c9ce;
}
.btn-primary, .btn-success, .btn-gray.active, .topic-tag .text {
background-color: #71c9ce;
color: #fff !important;
}
.sceditor-button.active, .sceditor-button:hover {
background: #cbf1f5;
border: none;
height: 16px;
padding: 5px;
margin: 1px;
border-radius: 0;
background-clip: padding-box;
}
.btn-success:hover, .btn-gray.active:hover, .btn-primary:hover, .topic-tag .text:hover, .topic-tag .text:active, .topic-tag .close:hover, .topic-tag .close:active, .aw-article-vote a:hover, .aw-article-vote a.active {
background-color: #11999e !important;
}
#hqm_note {
margin: 10px 0 !important;
}
.aw-question-detail .mod-head h1 {
color: #4a5668;
}
strong {
margin: 0 3px;
}
div.sceditor-toolbar{
padding: 5px 0;
}
div.sceditor-toolbar,div.sceditor-toolbar * {
border: none;
}
.sceditor-container iframe {
width: calc(100% - 20px)!important;
border: 1px solid #dae4f1;
border-radius: 5px;
margin: 10px;
box-sizing: border-box;
padding: 6px .75rem;
margin-top: 0;
}
.sceditor-container iframe:focus{
border-color: #bacae3;
}
.aw-editor-box .mod-body label{
position: relative;
top: 5px;
}
#answer_form > div.mod-body > div > div.mod-body.clearfix > a:nth-child(4){
position: relative;
top: 3px;
}
body > div.aw-top-menu-wrap > div > div.aw-logo.hidden-xs > a{
background: url(https://i.imgur.com/tz9qoJI.jpg) no-repeat !important;
background-size: 100% 100% !important;
} 14 个评论
已转移水区,水区内容不会在首页出现。若您认为本次转移有误,请在本帖操作栏中选择「投诉 - 请求移出水区」;发帖投诉或直接回复管理员不会得到处理。
【理由】泄露个人信息:透漏贴身隐私,或者引诱他人透漏贴身隐私
【理由】泄露个人信息:透漏贴身隐私,或者引诱他人透漏贴身隐私
对了,或许有些人有安全顾虑,毕竟不确定安装样式代码是否有问题。
这里把完整主题CSS放出来,你可以不经过上面的链接安装主题。而是安装过Stylus后自行创建一个主题。(Google下教程即可)。
主题唯一用到的URL是一个网站的青色Logo:https://i.imgur.com/tz9qoJI.jpg (imgur的图床,可以放心使用)。
这里把完整主题CSS放出来,你可以不经过上面的链接安装主题。而是安装过Stylus后自行创建一个主题。(Google下教程即可)。
主题唯一用到的URL是一个网站的青色Logo:https://i.imgur.com/tz9qoJI.jpg (imgur的图床,可以放心使用)。
.aw-top-menu-wrap, .navbar-collapse, .aw-top-nav>nav>ul>li>a.active, .aw-dropdown-found-content a, div.sceditor-toolbar, div.sceditor-group:first-child, div.sceditor-group {
background: #fff !important;
}
.aw-dropdown-found-content {
width: 120px;
}
a, #hqm_note,aw-footer {
color: #728297 !important;
}
.aw-nav-tabs>li.active a, .aw-nav-tabs>li.active a, .aw-nav-tabs>li>a:hover {
border-bottom-color: #728297;
}
#sort_control_hot {
color: #71c9ce !important;
}
#sort_control_hot:hover {
border-color: #71c9ce;
}
.aw-common-list .aw-question-content>span, .aw-common-list .aw-question-content p span {
color: #c5c9ce;
}
.aw-question-tags {
color: #f1f4f9;
}
.aw-top-nav>nav>ul>li>a:hover, .category .list>li.active, .category .list>li:hover {
color: black;
background: unset;
}
.category .list>li.active>a, .category .list>li:hover>a {
color: unset;
}
.category {
margin-bottom: 25px;
}
.aw-dropdown-found-content a:before {
margin-right: 5px;
}
.topic-tag .text, .aw-article-vote a:hover, .aw-article-vote a.active .aw-article-vote b {
color: #fff !important;
}
.aw-dropdown-found-content a:hover {
background: #f2f2f2 !important;
}
.aw-top-menu-wrap {
height: 60px;
border-bottom: 1px solid #e5ecf5;
}
.aw-nav-tabs, .aw-common-list>div+div,.aw-main-content {
border-color: #e5ecf5;
}
.navbar-collapse.collapse {
height: 59px !important;
}
body, .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
background: #e5ecf5;
}
body[contenteditable="true"] {
background: #fff;
}
.pagination>li>a, .pagination>li>span {
border: none;
padding: 5px 10px;
}
.page-control .pagination {
float: unset;
}
.aw-content-wrap {
border-radius: .375rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
}
.sceditor-container {
border: 0 solid #e2e8f0;
}
.aw-container-wrap {
margin-top: 25px;
}
.category {
width:100% !important;
margin-top: -25px;
}
.category .list {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.category .list li {
float: none;
}
.category .col-sm-12 {
padding: 0;
background: #fff;
}
.aw-top-nav>nav>ul>li>a {
display: flex;
align-items: center;
height: 59px;
}
.aw-top-nav>nav>ul>li>a i {
position: static;
margin-right: 5px;
}
.category .list {
padding-top: 10px;
}
.aw-verified, .badge.badge-info {
padding: 3px 4px;
background-color: #71c9ce;
}
.btn-primary, .btn-success, .btn-gray.active, .topic-tag .text {
background-color: #71c9ce;
color: #fff !important;
}
.sceditor-button.active, .sceditor-button:hover {
background: #cbf1f5;
border: none;
height: 16px;
padding: 5px;
margin: 1px;
border-radius: 0;
background-clip: padding-box;
}
.btn-success:hover, .btn-gray.active:hover, .btn-primary:hover, .topic-tag .text:hover, .topic-tag .text:active, .topic-tag .close:hover, .topic-tag .close:active, .aw-article-vote a:hover, .aw-article-vote a.active {
background-color: #11999e !important;
}
#hqm_note {
margin: 10px 0 !important;
}
.aw-question-detail .mod-head h1 {
color: #4a5668;
}
strong {
margin: 0 3px;
}
div.sceditor-toolbar{
padding: 5px 0;
}
div.sceditor-toolbar,div.sceditor-toolbar * {
border: none;
}
.sceditor-container iframe {
width: calc(100% - 20px)!important;
border: 1px solid #dae4f1;
border-radius: 5px;
margin: 10px;
box-sizing: border-box;
padding: 6px .75rem;
margin-top: 0;
}
.sceditor-container iframe:focus{
border-color: #bacae3;
}
.aw-editor-box .mod-body label{
position: relative;
top: 5px;
}
#answer_form > div.mod-body > div > div.mod-body.clearfix > a:nth-child(4){
position: relative;
top: 3px;
}
body > div.aw-top-menu-wrap > div > div.aw-logo.hidden-xs > a{
background: url(https://i.imgur.com/tz9qoJI.jpg) no-repeat !important;
background-size: 100% 100% !important;
}
我説句公道話
這個既沒有泄露個人隱私,也沒有引誘別人泄露個人隱私
以這樣的理由轉水,估計要被投訴。。。
---
給樓主的建議:
青色 配色,很傷眼睛,建議別這樣。
試試米黃色,或者淡灰色。對眼睛友好很多。
少使用亮色
這個既沒有泄露個人隱私,也沒有引誘別人泄露個人隱私
以這樣的理由轉水,估計要被投訴。。。
---
給樓主的建議:
青色 配色,很傷眼睛,建議別這樣。
試試米黃色,或者淡灰色。對眼睛友好很多。
少使用亮色
我説句公道話這個既沒有泄露個人隱私,也沒有引誘別人泄露個人隱私以這樣的理由轉水,估計要被投訴。。。-...
品葱无法承担审计代码安全性的责任。
因此,网友自创代码、来路不明的分享,不论实际如何,一律转水。
我説句公道話這個既沒有泄露個人隱私,也沒有引誘別人泄露個人隱私以這樣的理由轉水,估計要被投訴。。。-...
也可以用“豆沙绿”或者淡蓝色。
品葱无法承担审计代码安全性的责任。因此,网友自创代码、来路不明的分享,不论实际如何,一律转水。
能理解,我考虑到了这个问题因此将源代码放了出来。
但没考虑到对于不懂CSS的人,CSS代码看起来也是有“风险”的。😂
回头我研究下有没有 在线的、有权威的 CSS代码审计网站,然后一并放过来,应该就能让大家放心了。
挺漂亮的
好看,很适合夏天使用,心中会感到沁凉
完全可以不用imgur或是任何外链
你是说图片转成base64吗?(懒得转了... 而且Imgur外链也没风险 )
看图片的用户的信息,Imgur还是会记录一些的。当然,品葱用的cloudflare也一样,不记IP恐怕没法防DDos。就看Imgur和cloudflare现在和未来的可信度了

