匹配的豆瓣页面:小组主页讨论/小组详情/帖子内容
豆瓣—小组主页/帖子页面—圆角样式 by r4bbitgd
Details
Authorr4bbitgd
LicenseNo License
Categorydouban.com
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
自用样式
只写了chrome的,没有适配firefox。
背景的渐变色 来自:https://webgradients.com/
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.@charset "UTF-8";
/* ==UserStyle==
@name 豆瓣-我的小组/帖子 圆角样式
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author Rabbitgd
==/UserStyle== */
/* =========所有页面通用=========== */
@-moz-document url-prefix("https://www.douban.com/group/") {
body {
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}
#wrapper {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap column;
padding: 2.5rem;
border-radius: 15px;
background-color: #fff;
box-shadow: 0px 0 35px 5px rgba(104, 211, 45, 0.26);
}
/* 侧边 */
.aside .mod {
background: #4994310d;
padding: 17px;
border-radius: 4px;
}
html h2 {
font-size: 18px;
font-weight: 600;
}
/* 头像 */
.pic a img {
clip-path: circle(50%);
}
.pic a:hover {
opacity: 0.8;
background-color: transparent !important;
}
}
/* =========小组主页=========== */
@-moz-document url-prefix("https://www.douban.com/group/"),
regexp(".*://www.douban.com/group/?start=\\d+") {
/* 首页帖子内容 */
#wrapper {
width: 1000px;
}
.olt td {
padding: 13px 0;
position: relative;
left: 2px;
}
/* 每个内容标题 */
.td-subject a {
color: #333a40;
text-decoration: none;
font-size: 15.4px !important;
}
.td-subject a:hover {
color: #86b2ff;
background-color: transparent !important;
}
.td-subject a:visited {
color: grey;
}
/* 来源小组 */
.td-group a {
padding: 4px 10px;
color: white;
border-radius: 50px;
}
.td-group a:hover {
opacity: 0.7;
}
/* 颜色每6个依次来 */
.pl:nth-child(6n+1) .td-group > a {
background-color: #ffb286;
}
.pl:nth-child(6n+2) .td-group > a {
background-color: #ff8e86;
}
.pl:nth-child(6n+3) .td-group > a {
background-color: #86b2ff;
}
.pl:nth-child(6n+4) .td-group > a {
background-color: #7cdf60;
}
.pl:nth-child(6n+5) .td-group > a {
background-color: #60df8a;
}
.pl:nth-child(6n+6) .td-group > a {
background-color: #ad73cd;
}
.olt .td-group {
width: auto !important;
}
#g-reguler-groups, .aside .mod,
#g-side-info-member,
#g-side-info {
background-color: #9b9b9b0d;
}
/* 常去小组 */
.aside .mod,
#g-side-info-member,
#g-side-info {
margin-bottom: 35px;
position: relative;
left: 15px;
}
#g-reguler-groups {
padding: 15px 12px;
border-radius: 5px;
}
/* 常去小组 组头像 */
#g-reguler-groups li img {
border: solid 3px #e2e2e2;
border-radius: 50%;
margin: 0.5px 0;
width: 40px;
height: auto;
}
#g-reguler-groups li img:hover {
opacity: 0.5;
}
/* 首页个人头像 | 我的小组主页 */
/* 侧边联系邮箱 */
.feed-back {
background-image: none !important;
}
.feed-back span:after {
content: " / groups@douban.com";
}
}
/* =========帖子内容=========== */
@-moz-document url-prefix("https://www.douban.com/group/topic/") {
#wrapper {
width: 1040px !important;
}
#topic-content > div.user-face,
.info,
.update-item .content,
.comment-item .content,
.bg-img-green h4 .pubtime,
.bg-img-green h4 {
overflow: visible !important;
}
.info > .title > a:hover,
.group-item .pic a:hover,
.user-face > a:hover {
background-color: transparent !important;
}
.nlst,
.nlst h3,
.bg-img-green h4,
.bg-img-green {
background-color: transparent !important;
}
span.create-time.color-green {
color: #888 !important;
}
#content > div > div.article > h1 {
font-size: 1.7rem;
text-align: center;
border-bottom: solid 1px #f6f6f6;
margin-bottom: 1.5rem;
}
/* 帖子内容 */
#link-report > div > div > p {
font-size: 1.2rem;
line-height: 2.1;
}
/* 发帖人用户头像 */
#topic-content > div.user-face > a > img {
border-radius: 50%;
}
/* 发帖人头像 & ID & 帖子内按钮按钮 一起放大 */
#topic-content > div.user-face > a > img,
#topic-content > div.topic-doc > h3,
.sns-bar {
zoom: 1.2;
}
/* 隐藏帖子内底部空白距离 */
#topic-content > div.topic-doc > div.topic-opt.clearfix {
display: none !important;
}
/* 帖子转发区 hover */
.topic-rec-list p a:active,
.topic-rec-list p a:hover {
background-color: #eaeff6 !important;
}
/* 帖子转发区 样式 */
.pic a:hover {
opacity: 0.8;
background-color: transparent !important;
}
.pic a img {
clip-path: circle(50%);
}
/* 让没有转发内容的排班居中 */
.topic-rec-list ul li:not(.content):not(:has(p)) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.topic-fav-list ul li {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.collect-list ul li {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.list .pic {
zoom: 1.8;
position: relative;
left: 4px;
}
/* =========topic-comment 帖子内评论区=========== */
/* 评论区字体大小 */
div.reply-doc.content > p {
font-size: 1.1rem;
}
/* 帖子点赞收藏等按钮 */
a.react-like.react-btn, .action-collect .collect-add, .sharing-button {
border-radius: 100px;
}
/* 评论区点赞等按钮 */
.operation-div a:active,
.operation-div a:hover,
.operation-div span:active,
.operation-div span:hover {
background-color: #5ec874 !important;
padding: 0 10px;
border-radius: 11px;
}
/* 评论区投诉按钮 */
span[class=report]:hover {
padding: 0.6px 12px;
display: block;
background-color: #7b7b7b !important;
border-radius: 50px;
}
/* 删除评论按钮 */
a.lnk-delete-comment:hover {
background-color: #ff8e86 !important;
padding: 2.8px 12px;
}
.lnk-opt-line:hover {
background-color: #0000;
padding: 0;
border-radius: 0;
}
.comment-report-wrapper {
display: inline-block !important;
}
.operation-div a:link,
.operation-div a:visited,
span[class=report]:hover {
transition: 0.3s;
}
/* 文本框 发表评论 textarea样式 */
.comment-wrapper {
border: 1px solid #618cff;
box-shadow: 0 0 5px #00000036;
}
/* 来源小组 组名称居中 */
.info:not(.member-info1) .title > a {
position: relative;
top: 10px;
font-size: 1rem;
color: #353535;
}
.info:has(.member-info1) .title a {
position: static !important;
}
.info > .title > a:hover {
color: #37a;
}
/* 调整来源小组名称高度 */
.info {
line-height: normal !important;
}
/* 来源组名 超出省略 */
.info > .title > a {
width: 190px;
overflow: hidden;
text-wrap: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
/* 转发 点赞 */
div[class=tabs] a {
font-size: 16px;
padding: 5px 20px;
border-radius: 100px;
}
/* 只有成员才能发言 */
p[class="group-tip pl"] {
display: flex;
align-items: center;
justify-content: center;
margin: 1rem;
background-color: #f2f2f2;
border-radius: 5px;
padding: 10px;
}
/* 评论区样式 */
.topic-reply li {
background-color: #fff;
border-top: none;
border-bottom: solid 1px #e8e8e8;
padding: 20px 0 0 20px;
}
/* 去除overflow hidden */
#comments {
padding: 0;
overflow: visible !important;
}
/* 评论点赞按钮 */
.operation-div {
padding: 10px;
}
/* 评论区用户头像 */
.pil,
.group-item .pic img {
border-radius: 50%;
}
.group-item .pic a:hover {
opacity: 0.5;
}
/* 调整边距等 与用户头像平行 */
.topic-reply li .reply-doc {
margin-top: 10px;
}
.topic-reply .user-face {
width: 60px;
margin-right: 0 !important;
}
.user-face > a:hover {
opacity: 0.7;
}
/* 评论区用户ID */
.bg-img-green h4 a {
display: flex;
align-items: center;
justify-content: center;
flex-flow: wrap column;
color: #000000;
font-size: 17px;
font-weight: 600;
padding-right: 10px;
position: relative;
top: -3px;
}
.bg-img-green h4 a:hover {
opacity: 0.5;
background-color: transparent !important;
border-radius: 0;
}
.bg-img-green h4 {
line-height: 18px !important;
}
.bg-img-green {
display: flex;
position: relative;
bottom: 5px;
flex-direction: column;
justify-content: center;
border-radius: 50px;
margin-bottom: 18px;
margin-right: 30px;
}
.topic-reply li .reply-doc h4 {
padding: 0;
}
h4 {
display: flex;
justify-content: flex-start;
flex-direction: row;
}
.bg-img-green h4 .pubtime {
margin: 2px 0;
margin-left: 10px;
position: absolute;
top: 23px;
left: -5px;
}
/* 回复内容 */
.reply-quote {
width: auto;
background: #f5f8f7;
padding: 13px 19px;
border: none;
border-radius: 8px;
margin: 21px 4px;
font-size: 17px;
}
/* 评论区文本之间的高度 */
.topic-reply li .reply-doc p {
margin-right: 25px;
line-height: 2.1;
position: relative;
left: 4px;
}
.pubdate a {
color: #29a229;
background-color: #68e36247;
text-align: center;
position: relative;
top: -1.5px;
padding: 5px 9px;
border-radius: 6px;
font-size: 13px;
}
.pubdate a:hover {
opacity: 0.8;
}
.pubdate a::before {
content: "回复:";
opacity: 0.6;
}
.pubdate {
margin: 0;
}
/* 热门回复/最赞回复 */
#popular-comments li {
padding-top: 50px;
margin-bottom: 0;
}
#popular-comments li::before {
content: "热门回复";
display: inline-block;
position: absolute;
z-index: 9999;
top: 0;
color: #FFF;
font-size: 14px;
left: 0;
border-radius: 0 10px;
padding: 2px 10px;
font-weight: bolder;
background-color: #f17c7c;
}
/* 隐藏原本的热门回复边框和样式 */
#popular-comments li {
visibility: visible;
}
#content > div > div.article > h3 {
display: none;
}
#popular-comments {
visibility: hidden !important;
}
.popular-bd {
border: 1px solid #e3e3e3;
border-top: none;
padding: 0;
}
/* 组长 */
.owner-icon {
padding: 2px 10px;
font-size: 13px;
border-radius: 50px;
position: relative;
top: -3px;
}
/* 楼主 */
.topic-author-icon {
...