:doge: 焕新颜, V2EX 扁平风自定义 CSS 主题

2018-11-13 11:20:39 +08:00
 jkjoke

LESS IS MORE

如果你追求更“轻”的体验,欢迎试用本主题

在之前的版本上做了一些修改(强迫症)

Code

  @import url("//jkjoke.b0.upaiyun.com/css/v2ex.css");

How to use

What's change

Qustions

在使用中有任何问题,欢迎反馈给我,可以在下面回复交流

14620 次点击
所在节点    分享创造
123 条回复
ceoimon
2018-11-13 12:29:13 +08:00
其实大部分的分割线都是不必要的,不妨试试:

#Main .box .cell,
#Rightbar .box .cell {
border-bottom: 0;
}
jkjoke
2018-11-13 12:33:04 +08:00
@ceoimon #21 右边舒服了,感谢建议,主题列表的话有分割线比较一点
lunatic5
2018-11-13 13:39:33 +08:00
7654
2018-11-13 13:47:23 +08:00
以前一位 V 友发的,
* {
font-family:Arial;
}

#Top {
background-color: #47536B;
border-bottom:none;
}
#Bottom {
background-color: #2C3E50;
}
#Wrapper {
background-color: #e3ecfd;
padding-top: 20px;
background-image:none;
}
a.top:link, a.top:visited {
color: #E1E1E1;
font-size: 12px;
border-radius: 5px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a.top:hover {
color:#FFF;
}
a.tab:hover {
background-color: rgba(0, 0, 0, 0.5);
color:#FFF;
-webkit-transition: all .1s;
-moz-transition: all .1s;
-o-transition: all .1s;
transition: all .1s;
}

.box {

border-radius: 4px;
min-height: 20px;
margin-bottom:20px;
box-shadow: none;
border-bottom: 1px solid rgba(255, 255, 255, 0);
}
.topic_buttons {
background: #DEDEDE;
}
a.item_node {
border: 1px solid #92B7DD;
color: #92B7DC;
padding: 5px 6px 3px 6px;
border-radius: 3px;
margin-left:3px;
margin-right:3px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
a.item_node:hover {
border:1px solid #2C3E50;
color:#555;
}
img.avatar {
width: 50px;
height: 50px;
max-width: 50px !important;
max-height: 50px !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 2px solid transparent;
-webkit-transition: .4s;
-moz-transition: .4s;
transition: .4s;
opacity: 0.8;
}
img.avatar:hover {
opacity: 1;
}
.topic_content, .reply_content {

}
/*右侧头像*/
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) {
text-align:center;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(2),
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(3) {
display:none;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) img.avatar {
width: 80px;
height: 80px;
max-width: 80px !important;
max-height: 80px !important;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-top: 15px;
margin-right: 10px;
}
#Rightbar div:nth-child(2) .cell:first-child table:nth-child(3) {
padding-bottom: 15px;
padding-top: 15px;
}
#Rightbar .box div:nth-child(1) {
border-bottom:0px;
}
/**/
.normal.button {
background-color: transparent;
color: #47536B;
text-shadow:none;
box-shadow: none;
background-image: none;
border: 1px solid #47536B;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.normal.button:hover {
background-color: #47536B;
color: #fff;
text-shadow:none;
box-shadow: none;
background-image: none;
border: 1px solid #000;
}
#reply_content {
box-shadow:none;
max-width: 650px;
border-color: rgba(187, 187, 187, 0.5);
border-width: 2px;
border-radius: 5px;
}
.mll:focus {
border: 2px solid #31b0d5;
box-shadow: none;
outline: none;
}
/**Money**/
a.balance_area:link, a.balance_area:visited, .balance_area {
background: -webkit-linear-gradient(top, #E9E9E9 0%,#E2E2E2 100%);
}
kslr
2018-11-13 14:11:18 +08:00
头像非常重要
jkjoke
2018-11-13 14:16:47 +08:00
@kslr #25 稍微调大一点
Kakarrot
2018-11-13 14:18:08 +08:00
列表头像大点 行间距离小点
newbieRenew
2018-11-13 14:21:58 +08:00
用 stylebot 解决吧
o00o
2018-11-13 14:32:15 +08:00
@jkjoke 可以
Steps
2018-11-13 14:40:02 +08:00
就算是复制 css 到框里,也是要闪一下!
chinafeng
2018-11-13 14:45:41 +08:00
更喜欢以下这两个主题,虽然我没感觉出什么太大的区别
https://github.com/zdhxiong/v2ex-material-theme
https://github.com/zdhxiong/v2ex-material-theme2
jkjoke
2018-11-13 14:53:35 +08:00
@Steps #30 自定义样式这里的加载顺序靠后,所以网络稍慢的时候会感觉到页面有变化
iqav
2018-11-13 14:56:27 +08:00
我喜欢你下面配图 “在使用中有任何问题,欢迎反馈给我,可以在下面回复交流”那张图的色彩方案,暗暗的
Stlin
2018-11-13 15:00:25 +08:00
jkjoke
2018-11-13 15:06:39 +08:00
@iqav #33 VSCode 的 Atom One Dark 主题
9simpsons
2018-11-13 15:43:40 +08:00
挺好的主题,看起来简洁漂亮,有两个地方能不能改进一下啊,1. 底色有点白,看着晃眼 2. 列表的行距是不是有点大了?感觉浏览器来比较累。。。1366*768 的低分屏路过。。。
jkjoke
2018-11-13 15:55:23 +08:00
@9simpsons #36 谢谢建议,考虑不周了
chaodada
2018-11-13 16:06:34 +08:00
@jkjoke 3q,表示非常喜欢😘
sh1t0nu
2018-11-13 16:22:07 +08:00
可以可以!
ifreego
2018-11-13 16:30:33 +08:00
切换标签会闪烁 估计和每次切换重新加载 css 有关

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/507314

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX