Pure CSDN - 重塑开发者社区
/* ==UserStyle==
@name Pure CSDN 社区
@namespace github.com/openstyles/stylus
@version 1.0.1
@description Pure CSDN - 重塑开发者社区
@author CWorld
@license GPL-3.0-only
@var select COLOR1 "主配色" {
"默认红": "#e33e33",
"浅草绿": "#00bb6a",
"梦析蓝": "#00b6ff",
"幻想紫": "#8a72ff",
}
@var select COLOR2 "次配色" {
"默认红": "#e33e3330",
"浅草绿": "#00bb6a30",
"梦析蓝": "#00b6ff30",
"幻想紫": "#8a72ff30",
}
@var select AN "动画特效" {
"非线性": ".3s ease-in-out",
"果冻弹": "cubic-bezier(0.68, -0.55, 0.27, 1.55)",
"直线型": ".3s",
}
==/UserStyle== */
@-moz-document domain("csdn.net") {
/* 定义变量 */
:root{
--AN: .3s ease-in-out;
--AN-APPE: AN-APPE .3s;
--COLOR1: #8a72ff;
--COLOR2: #8a72ff30;
--COLOR3: #efefef;
--COLOR4: #ddd;
--COLOR5: #0000007a;
}
@keyframes AN-APPE
{
from {transform: translatey(-10px)}
to {transform: translatey(0)}
}
/* 引入MD图标 */
@font-face {
font-weight: 400;
font-family: 'Material Icons';
font-style: normal;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/icons/material-icons/MaterialIcons-Regular.woff2) format('woff2'), url(https://cdn.jsdelivr.net/npm/[email protected]/dist/icons/material-icons/MaterialIcons-Regular.woff) format('woff');
}
/* 广告 */
.pulllog-box, #kp_box_476, .meau-gotop-box, .right-item,
.mb8, .t0, .blog_star_enter, .csdn-toolbar .container li.vip-caise,
a.btn-maimai.low-height.hover-box.btn-comments,
.banner-ad-box, .right_top, .indexSuperise,
main ul.feedlist_mod li[data-type="ad"],
.slide-outer.right_top,div#kp_box_434,
.right_extension.slide-outer,.other_company.clearfix,div#ad-div,
.csdn-toolbar .container .app-control .appControl {
display:none !important;
}
/* 自动展开文章 */
.comment-list-box,.article_content{height:100%!important;max-height:100% !important;}.opt-box.text-center{display:none;}
/* 最新文章 */
#asideNewArticle{
display:none !important;
}
/* 个人分类 */
#asideCategory{
display:none !important;
}
/* 热门文章 */
#asideHotArticle{
display:none !important;
}
/* 最新评论 */
#asideNewComments{
display:none !important;
}
/* 联系我们 */
#asideFooter{
display:none !important;
}
/* --顶栏-- */
/* 图标修正 */
.csdn-toolbar .container .pull-right .write-bolg-btn:before,
#csdn_tool_otherPlace .pull-right .gitChat.liCollection a:before,
.csdn-toolbar .container .pull-right .gitChat.liCollection a:before,
#csdn_tool_otherPlace .pull-right .gitChat a:before,
.csdn-toolbar .container .pull-right .gitChat a:before
{
/* stylelint-disable-next-line */
font-family: 'Material Icons';
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}
.csdn-toolbar .container .pull-right .write-bolg-btn:before {
content: 'edit';
font-size: 19px;
position: relative;
top: 0;
left: 34px;
color: var(--COLOR1);
}
#csdn_tool_otherPlace .pull-right .gitChat.liCollection a i.collection, .csdn-toolbar .container .pull-right .gitChat.liCollection a i.collection,
#csdn_tool_otherPlace .pull-right .gitChat a i.message, .csdn-toolbar .container .pull-right .gitChat a i.message {
opacity: 0;
}
#csdn_tool_otherPlace .pull-right .gitChat.liCollection a:before,
.csdn-toolbar .container .pull-right .gitChat.liCollection a:before {
content: 'star_border';
font-size: 20px;
position: absolute;
top: 0;
left: 8px;
color: #525252;
}
#csdn_tool_otherPlace .pull-right .gitChat a:before,
.csdn-toolbar .container .pull-right .gitChat a:before {
content: 'notifications_none';
font-size: 20px;
position: absolute;
top: 0;
left: 8px;
color: #525252;
}
/* 顶栏美化 */
body .csdn-toolbar .container .left-menu a[title="商城"],
body .csdn-toolbar .container .left-menu a[title="活动"],
body .csdn-toolbar .container .left-menu a[title="专题"],
body .csdn-toolbar .container .left-menu a[title="招聘"],
body .csdn-toolbar .container .left-menu a[title="直播"],
body .csdn-toolbar .container .left-menu a[title="VIP会员"]
{
transition: var(--AN);
opacity: 0;
}
body .csdn-toolbar .container .left-menu:hover a[title="商城"],
body .csdn-toolbar .container .left-menu:hover a[title="活动"],
body .csdn-toolbar .container .left-menu:hover a[title="专题"],
body .csdn-toolbar .container .left-menu:hover a[title="招聘"],
body .csdn-toolbar .container .left-menu:hover a[title="直播"],
body .csdn-toolbar .container .left-menu:hover a[title="VIP会员"] {
opacity: .2;
}
body .csdn-toolbar .container .left-menu li:hover a[title="商城"],
body .csdn-toolbar .container .left-menu li:hover a[title="活动"],
body .csdn-toolbar .container .left-menu li:hover a[title="专题"],
body .csdn-toolbar .container .left-menu li:hover a[title="招聘"],
body .csdn-toolbar .container .left-menu li:hover a[title="直播"],
body .csdn-toolbar .container .left-menu li:hover a[title="VIP会员"] {
opacity: 1;
}
#csdn_tool_otherPlace li, .csdn-toolbar .container li {
border-left: none;
border-right: none;
width: auto;
padding-left: 10px;
padding-right: 10px;
-webkit-transition: var(--AN);
transition: var(--AN);
}
.csdn-toolbar .container .left-menu li .active {
border-bottom: none;
}
.csdn-toolbar .container .left-menu li:not(.app-app) a:after {
transition: var(--AN);
content: '';
display: block;
height: 0;
background: var(--COLOR1);
width: 90%;
margin-left: 5%;
opacity: 0;
border-radius: 3px 3px 0 0;
}
.csdn-toolbar .container .left-menu li:not(.app-app) a:hover:after {
opacity: .4;
margin-top: -3px;
height: 3px !important;
}
.csdn-toolbar .container .left-menu li .active:after {
opacity: 1 !important;
margin-top: -3px;
height: 3px !important;
}
.csdn-toolbar {
background: #fff;
box-shadow: 0 4px 8px 0 #0001;
}
#csdn_tool_otherPlace .pull-right .write-bolg-btn #blogClick, .csdn-toolbar .container .pull-right .write-bolg-btn #blogClick {
height: 32px;
width: 92px;
margin-top: 6px;
border-radius: 50px;
color: var(--COLOR1);
background: var(--COLOR2);
padding: 0 7px;
}
#csdn_tool_otherPlace .pull-right .gitChat a span, #csdn_tool_otherPlace .pull-right .write-bolg-btn a span, .csdn-toolbar .container .pull-right .gitChat a span, .csdn-toolbar .container .pull-right .write-bolg-btn a span {
color: var(--COLOR1);
margin-left: 0;
}
#csdn_tool_otherPlace .pull-right .write-bolg-btn a i.csdn-write, .csdn-toolbar .container .pull-right .write-bolg-btn a i.csdn-write {
background: none;
}
#csdn_tool_otherPlace .search_bar, .csdn-toolbar .container .search_bar {
width: 320px;
height: 32px;
border-radius: 50px;
background-color: var(--COLOR3);
margin: 6px 8px;
}
#csdn_tool_otherPlace .search_bar .input_search, .csdn-toolbar .container .search_bar .input_search {
caret-color: #767676;
color: #767676;
width: 270px;
padding-left: 16px;
border: 0;
height: 32px;
border-radius: 0;
}
#csdn_tool_otherPlace .search_bar .btn-search, #csdn_tool_otherPlace .search_bar .btn_clear, .csdn-toolbar .container .search_bar .btn-search, .csdn-toolbar .container .search_bar .btn_clear {
transition: var(--AN);
background-color: var(--COLOR4) !important;
border-radius: 50px;
}
#csdn_tool_otherPlace .search_bar .btn-search, #csdn_tool_otherPlace .search_bar .btn_clear[style="background: rgb(227, 62, 51);"],.csdn-toolbar .container .search_bar .btn-search[style="background: rgb(227, 62, 51);"], .csdn-toolbar .container .search_bar .btn_clear[style="background: rgb(227, 62, 51);"] {
background-color: var(--COLOR1) !important;
}
#csdn_tool_otherPlace .search_bar .drop-down-menu, .csdn-toolbar .container .search_bar .drop-down-menu {
transition: var(--AN);
background: rgb(255, 255, 255);
box-shadow: 0 4px 8px 0 #0001;
position: absolute;
top: 39px;
width: 100%;
padding: 0;
display: block !important;
opacity: .5;
border-radius: 0 0 10px 10px;
height: 0;
overflow: hidden;
transform: translatey(-5px);
}
#csdn_tool_otherPlace .search_bar .drop-down-menu[style="display: block;"], .csdn-toolbar .container .search_bar .drop-down-menu[style="display: block;"] {
display: block !important;
opacity: 1;
height: 1100%;
padding: 8px 0 12px 0;
transform: translatey(0);
}
.csdn-toolbar .container .sub-menu-box .sub-menu {
background-color: rgb(255, 255, 255);
border-radius: 8px;
box-shadow: 0 4px 8px 0 #0001;
}
/* --修正-- */
ul.pub_recommend .pub_recom_item .pr_i_d em, ul.pub_recommend .pub_recom_item .pr_i_t em, .recommend-box .recommend-item-box h4 em, .article-list .recommend-item-box h4 em, .recommend-box .article-item-box h4 em, .article-list .article-item-box h4 em, .recommend-box .baiduSearch .desc a em, .article-list .baiduSearch .desc a em, .markdown_views a, .markdown_views a:visited, .resource_box .resource_box_info .resource_box_dl dd .resource_box_desc .resource_box_b .resource_tags a:hover, .recommend-box .type_blog .content .desc a em, .article-list .type_blog .content .desc a em {
color: var(--COLOR1);
}
.opt-letter-watch-box .personal-watch:hover, .download_box .download_content .resource_dl_btn .dl_btn:active, .download_box .download_content .resource_dl_btn .dl_btn:hover, .download_box .download_content .resource_dl_btn .dl_btnvisited, .resource_user .user_fn .attention:hover, .recommend-box-ident:before {
background-color: var(--COLOR1);
}
}
@-moz-document domain("www.csdn.net") {
/* --去除繁杂元素-- */
.right_box.csdn-tracking-statistics, .enterprise_blog,
.csdn-side-toolbar a.option-box[data-type="app"],
.csdn-side-toolbar a.option-box[data-type="cs"] {
display: none;
}
/* 卡片 */
aside .right_box, main ul.feedlist_mod, nav {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
/* --左侧栏-- */
nav div div ul li {
background-color: #fff0 !important;
}
nav div div ul .active a {
background-color: var(--COLOR1);
}
nav .clearfix .nav_com ul li a {
transition: var(--AN);
border-radius: 5px;
width: auto;
margin: 2px 6px;
}
nav .clearfix .nav_com ul li:hover a {
color: var(--COLOR1);
background-color: var(--COLOR2);
}
/* --主内容-- */
/* 滚动banner */
main .carousel .carousel-left {
position: relative;
width: 496px;
height: 216px;
}
main .carousel {
width: 760px;
height: 224px;
background: #fff0;
overflow: visible;
}
main .carousel .carousel-left .carousel-inner {
position: relative;
width: 97%;
margin-left: 3%;
border-radius: 8px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
main .carousel .carousel-left .carousel-inner .carousel-item {
height: 224px;
}
main .carousel .carousel-left .carousel-indicators {
display: list-item;
position: absolute;
right: auto;
bottom: 10px;
left: 0;
padding-left: 0;
margin-right: 0;
margin-left: -2px;
list-style: none;
top: 0;
width: 10px;
}
main .carousel .carousel-left .carousel-indicators li {
transition: var(--AN);
transition-delay: 0s;
display: list-item;
background-color: var(--COLOR2);
margin: 0;
margin-bottom: 8px;
width: 10px;
height: 30px;
border-radius: 10px;
}
main .carousel .carousel-left .carousel-indicators li.active {
margin-left: 0;
width: 10px;
height: 50px;
background-color: var(--COLOR1) !important;
}
main .carousel .carousel-left .carousel-control.left, main .carousel .carousel-left .carousel-control.right, main .carousel .carousel-left .carousel-inner .carousel-item .cover {
display: none;
}
main .carousel .carousel-left .carousel-inner .carousel-item img {
transition: var(--AN);
}
main .carousel .carousel-left .carousel-inner .carousel-item:hover img {
scale: 1.05;
}
main .carousel .carousel-left .carousel-inner .carousel-item .carousel-caption {
transition: var(--AN);
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
width: 100%;
height: 15px;
padding: 10px 0;
color: #fff;
font-size: 13px;
line-height: 13px;
text-align: center;
text-shadow: none;
background: var(--COLOR5);
box-sizing: content-box;
border-radius: 8px 8px 0 0;
opacity: 0;
}
main .carousel .carousel-left .carousel-inner .carousel-item:hover .carousel-caption {
opacity: 1;
}
main .carousel .carousel-right .carousel-right-u:first-child {
margin-bottom: 16px;
}
main .carousel .carousel-right .carousel-right-u {
border-radius: 8px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
/* 内容推荐 */
main .feed-fix-box {
height: 40px;
}
main .feed-fix-box .scroll-fixbar a {
transition: var(--AN);
width: auto;
margin: 0 36%;
color: var(--COLOR1);
border-radius: 50px;
background-color: var(--COLOR2);
}
main .feed-fix-box .scroll-fixbar a:hover {
background-color: var(--COLOR1);
}
main .feed-fix-box .fix-style-toolbar-suspension {
overflow: visible;
top: 61px;
}
main .feed-fix-box .fix-style-toolbar-suspension a {
transition: var(--AN);
width: auto;
margin: 0 36%;
color: var(--COLOR1);
border-radius: 50px;
background-color: #fff;
box-shadow: 0 4px 8px 0 #0001;
}
main ul.feedlist_mod {
overflow: hidden;
}
main ul.feedlist_mod li {
transition: var(--AN);
padding: 18px 24px;
background: #fff;
border-bottom: none;
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
}
main ul.feedlist_mod li:hover {
background: var(--COLOR3);
}
main ul.feedlist_mod li .list_con h2 a {
transition: var(--AN);
}
main ul.feedlist_mod li:hover .list_con h2 a {
color: var(--COLOR1);
}
main ul.feedlist_mod li .list_con h2 a span.recommend {
border-radius: 8px;
border: none;
background-color: var(--COLOR2);
color: var(--COLOR1);
}
/* --右侧栏-- */
aside .right_box {
margin-bottom: 16px;
}
h3.feed_new_tit .line {
transition: var(--AN);
width: 3px;
background: var(--COLOR1);
overflow: hidden;
margin-right: 5px;
border-radius: 50px;
}
h3.feed_new_tit:hover .line {
width: 16px;
height: 16px;
background: var(--COLOR2);
}
.feed_company ul.company_list li div.content h3.company_name a {
transition: var(--AN);
}
.feed_company ul.company_list li div.content h3.company_name a:hover {
color: var(--COLOR1);
}
.feed_company ul.company_list li div.img_box img {
border-radius: 8px;
}
/* --修复-- */
.container {
padding: 16px 0 0;
}
.csdn-side-toolbar a.option-box {
transition: var(--AN);
border: none;
-webkit-box-shadow: 0 4px 8px 0 #0001;
box-shadow: 0 4px 8px 0 #0001;
background-color: #fff;
height: 44px;
border-radius: 10px;
overflow: hidden;
}
.csdn-side-toolbar a.option-box:hover {
transition: var(--AN);
border: none;
-webkit-box-shadow: 0 0 #0000;
box-shadow: 0 0 #0000;
background-color: #fff;
height: 44px;
border-radius: 10px;
}
.csdn-side-toolbar a.option-box img {
transition: var(--AN);
opacity: 1;
}
.csdn-side-toolbar a.option-box.active img, .csdn-side-toolbar a.option-box:hover img {
display: block;
transform: translatey(-44px);
opacity: 0;
}
.csdn-side-toolbar a.option-box .show-txt {
transition: var(--AN);
color: var(--COLOR1);
background-color: var(--COLOR2);
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
transform: translatey(44px);
border-radius: 10px;
}
.csdn-side-toolbar a.option-box.active .show-txt, .csdn-side-toolbar a.option-box:hover .show-txt {
opacity: 1;
transform: translatey(0);
}
}
@-moz-document domain("blog.csdn.net") {
/*
----------
自建
----------
*/
/* --图标修正-- */
.more-toolbox .tool-active.is-like:before,
.more-toolbox .tool-active.tool-item-comment:before,
.more-toolbox .tool-active.tool-QRcode:before,
.more-toolbox .tool-active.is-collection:before,
.more-toolbox .tool-active.tool-more:before,
aside #asideSearchArticle .aside-search .btn-search-blog:before,
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box .comment-like:before
{
/* stylelint-disable-next-line */
font-family: 'Material Icons';
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
}
.more-toolbox .tool-active img, aside #asideSearchArticle .aside-search .btn-search-blog img, .comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box .comment-like img {
opacity: 0;
}
.more-toolbox .tool-active:before {
font-size: 21px;
position: absolute;
top: 2px;
left: 10px;
}
.more-toolbox .tool-active.is-like:before {
content: 'favorite_border';
}
.more-toolbox .tool-active.tool-item-comment:before {
content: 'message';
}
.more-toolbox .tool-active.tool-QRcode:before {
content: 'share';
}
.more-toolbox .tool-active.is-collection:before {
content: 'star_border';
}
.more-toolbox .tool-active.tool-more:before {
content: 'more_horiz';
}
aside #asideSearchArticle .aside-search .btn-search-blog:before {
content: 'search';
font-size: 21px;
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box .comment-like:before {
content: 'favorite_border';
font-size: 21px;
margin-right: -13px;
color: #999aaa;
}
/* 去除繁杂元素 */
.profile-intro-name-boxOpration>.opt-letter-watch-box:nth-child(1) .personal-letter,
aside #asideProfile>div:nth-child(2)>.text-center:nth-child(4),
.csdn-userTooltip-pos:after, aside #asideProfile .badge-box,
.person_deliver.person_deliver_letter_un, .more-toolbox .tool-phong,
.more-toolbox .tool-item a.tool-bt-attend,
.first-recommend-box, .second-recommend-box,
main div.blog-content-box .article-header-box .article-header div.article-info-box div.article-bar-top #blog_detail_zk_collection,
.nodata .recommend-right_aside .kind_person
{
display: none !important;
}
/* 隐藏某些博主的自定义图片背景 */
body {
background:#f4f4f4 !important;
}
/* 卡片 */
div.aside-box, main div.blog-content-box,
.more-toolbox .left-toolbox, .comment-box,
.recommend-box, .article-list, .filter-box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
aside div.aside-box {
margin-bottom: 18px;
}
aside div.aside-box h3.aside-title {
background: #00000003;
color: #000000c2;
}
#csdn-userTooltip {
background-color: #fff;
border: none;
border-radius: 10px;
-webkit-box-shadow: rgba(0,0,0,.2) 0 4px 8px 0;
box-shadow: rgba(0,0,0,.2) 0 4px 8px 0;
animation: var(--AN-APPE);
transition: var(--AN);
}
/* --左侧栏-- */
/* 个人信息 */
aside #asideProfile {
overflow: hidden;
}
aside #asideProfile .profile-intro .avatar-box {
position: absolute;
width: 100px;
height: 100px;
left: 0px;
top: 0px;
z-index: 2;
border-radius: 0 0 50% 0;
}
aside #asideProfile .profile-intro .avatar-box img.avatar_pic {
transition: var(--AN);
display: block;
width: 100px;
height: 100px;
border-radius: 0 0 80% 0;
position: relative;
z-index: 1;
}
aside #asideProfile .profile-intro .avatar-box:hover img.avatar_pic {
transform: translatex(-2px) translatey(-1px);
}
aside #asideProfile .profile-intro .avatar-box:before {
transition: var(--AN);
position: absolute;
display: block;
content:'';
width: 105px;
height: 135px;
background: #00000008;
border-radius: 0 0 80% 0;
z-index: 0;
}
aside #asideProfile .profile-intro .avatar-box:hover:before {
width: 130px;
height: 110px;
}
aside #asideProfile .profile-intro .avatar-box:after {
transition: var(--AN);
position: absolute;
display: block;
content:'';
width: 115px;
height: 110px;
background: #e33e330f;
border-radius: 0 0 80% 0;
z-index: 0;
}
aside #asideProfile .profile-intro .avatar-box:hover:after {
width: 105px;
height: 135px;
}
aside #asideProfile .data-info {
position: relative;
z-index: 1;
}
aside #asideProfile .profile-intro .user-info {
margin-left: 120px;
width: 156px;
position: relative;
z-index: 1;
}
aside #asideProfile>div:nth-child(2) {
padding-left: 70px;
}
.profile-intro-name-boxOpration {
margin-left: 60px;
}
.opt-letter-watch-box {
width: 60px;
}
.opt-letter-watch-box .personal-watch {
transition: var(--AN);
background: var(--COLOR2);
color: var(--COLOR1);
border-radius: 50px;
}
.opt-letter-watch-box .personal-letter {
transition: var(--AN);
border: none;
background: var(--COLOR3);
border-radius: 50px;
}
/* 搜索 */
aside #asideSearchArticle .search-comter {
padding: 0;
}
aside #asideSearchArticle .aside-search {
background: #fff0;
margin: 8px;
}
aside #asideSearchArticle .aside-search .btn-search-blog {
transition: var(--AN);
background-color: var(--COLOR3);
border-radius: 50px;
}
aside #asideSearchArticle .aside-search .btn-search-blog:before {
transition: var(--AN);
color: #7e7e7e;
}
aside #asideSearchArticle .aside-search .btn-search-blog-active {
background-color: var(--COLOR2);
}
aside #asideSearchArticle .aside-search .btn-search-blog-active:before {
color: var(--COLOR1);
}
/* --主内容-- */
/* 正文 */
main div.blog-content-box {
position: relative;
padding: 0 24px 16px;
background: #fff;
}
main div.blog-content-box .article-header-box .article-header div.article-info-box {
background-color: var(--COLOR3);
border-radius: 10px;
padding: 10px;
}
.htmledit_views pre code {
background-color: var(--COLOR3);
border-radius: 10px;
padding: 8px;
}
.hljs-button {
display: block;
right: 5px;
top: 5px;
background-color: white;
border-radius: 6px;
cursor: pointer;
box-shadow: none;
}
.markdown_views pre>code .hljs-button {
transition: var(--AN);
opacity: 0;
}
.markdown_views pre>code:hover .hljs-button {
opacity: 1;
}
main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box {
margin-bottom: 10px;
}
main div.blog-content-box .article-header-box .article-header div.article-info-box div.blog-tags-box .tags-box.artic-tag-box a.tag-link {
margin-right: 8px;
padding: 2px 10px 3px 10px;
background-color: #fff;
color: var(--COLOR1);
border: none;
height: 23px;
line-height: 17px;
border-radius: 50px;
}
.markdown_views blockquote {
border-left: 8px solid var(--COLOR4);
background: var(--COLOR3);
border-radius: 0 10px 10px 0;
}
.blogger-info-card {
padding: 16px;
border: none;
border-radius: 8px;
background-color: var(--COLOR3);
}
.blogger-info-card .card-rt .card-rt-header .tag {
color: var(--COLOR1);
padding: 2px 8px;
border: none;
border-radius: 50px;
background-color: var(--COLOR2);
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box div.info-box .is_bloger, .comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box div.new-info-box .is_bloger {
margin-bottom: 3px;
}
main div.blog-content-box article #content_views img {
border-radius: 10px;
}
/* 操作栏 */
.more-toolbox .left-toolbox {
transition: margin var(--AN);
background-color: #f7f7f7;
border-radius: 0 0 10px 10px !important;
margin: 0 20px;
margin-bottom: 8px;
}
.more-toolbox.more-toolbox-active .left-toolbox {
width: 770px !important;
margin: 20px;
background-color: var(--COLOR3);
border-radius: 10px !important;
}
.more-toolbox .toolbox-list {
padding-left: 20px;
}
.more-toolbox .tool-item {
background: none;
}
.more-toolbox .tool-item a {
border-radius: 50px;
height: 30px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 10px !important;
margin: 3px 0;
}
.more-toolbox .tool-active a {
transition: var(--AN);
border-radius: 50px;
}
.more-toolbox .tool-active a:hover {
background-color: var(--COLOR4);
}
/* 评论区 */
.comment-box {
margin-bottom: 15px;
padding-bottom: 20px;
}
.comment-box .comment-edit-box {
position: relative;
transition: var(--AN);
margin: 0 24px 24px 24px;
padding: 0;
transform: translatey(16px);
background-color: var(--COLOR3);
border-radius: 19px;
border: 1px solid #dadde0;
}
.comment-box .comment-edit-box form .comment-content {
transition: var(--AN);
padding: 6px;
border: none;
height: 36px;
background-color: #fff0;
}
.comment-box .comment-edit-box form .comment-content.open {
padding: 6px 8px;
height: 75px;
background-color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
border-radius: 10px;
margin: 10px 0;
transform: translatex(-10px);
}
.comment-box .comment-edit-box form .opt-box {
display: none;
margin: 10px 10px 10px 0;
transform: translatex(-10px);
}
.comment-box .comment-edit-box .user-img {
z-index: 1;
padding-left: 1px;
margin-right: 20px;
}
.comment-box .comment-edit-box .bt-comment-show {
background-color: var(--COLOR4);
border-radius: 50px;
color: #000;
border: none;
}
.comment-box .comment-edit-box form .comment-content.open + .opt-box .dropdown .dropdown-face {
transition: var(--AN);
-webkit-box-shadow: none;
box-shadow: none;
border: none;
background-color: var(--COLOR4);
border-radius: 16px;
width: 130px;
padding: 0 8px 0 16px;
}
.comment-box .comment-edit-box form .comment-content.open + .opt-box .dropdown .dropdown-face[aria-expanded="true"] {
background-color: var(--COLOR2);
border-radius: 16px 16px 0 0;
}
.dropdown-face > svg.icon {
transition: var(--AN);
}
.open > .dropdown-face > svg.icon {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
fill: var(--COLOR1);
}
.dropdown-menu {
transition: var(--AN);
display: block !important;
padding: 8px;
background-color: #fff;
border: none;
border-radius: 0 0 16px 16px;
-webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
opacity: 0;
height: 0;
transform: translatey(-3px);
overflow: hidden;
}
.open > .dropdown-menu {
display: block;
height: 192px;
opacity: 1;
transform: translatey(0);
}
.dropdown-menu::-webkit-scrollbar {
width : 8px;
height: 1px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: var(--COLOR2);
}
.dropdown-menu::-webkit-scrollbar-track {
background: var(--COLOR3);
border-radius: 0 0 16px 0;
}
.comment-box .comment-edit-box form .opt-box .right-box .btn-comment {
border: none;
background-color: var(--COLOR2);
color: var(--COLOR1);
transform: translatex(10px);
border-radius: 50px;
padding: 0 13px;
}
.comment-box .comment-list-container .comment-list-box>ul.comment-list {
margin-top: 10px;
padding: 15px;
border: none;
background-color: var(--COLOR3);
border-radius: 10px;
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box .comment-tag img.comment-tag-img {
display: none;
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box .comment-tag {
background-color: var(--COLOR2);
border-radius: 4px 0 0 4px;
padding: 3px 3px 3px 5px;
margin-right: 0;
color: var(--COLOR1);
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box div.new-info-box>a:nth-child(2) {
background-color: var(--COLOR2);
border-radius: 0 4px 4px 0;
padding: 0 3px 0 5px;
margin-right: 0;
}
.comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box div.info-box .new-opt-box-bg, .comment-box .comment-list-container .comment-list-box ul.comment-list li.comment-line-box div.right-box div.new-info-box .new-opt-box-bg {
right: -7px;
top: -9px;
background: rgba(255,255,255);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .08);
border-radius: 50px;
border: none;
padding: 0 5px;
}
/* 推荐图文列表 */
.recommend-box .recommend-item-box,
.article-list .recommend-item-box,
.recommend-box .article-item-box,
.article-list .article-item-box {
border-top: none;
padding: 15px 24px 15px 24px;
background-color: #fff0;
}
.recommend-box .recommend-item-box h4,
.article-list .recommend-item-box h4,
.recommend-box .article-item-box h4,
.article-list .article-item-box h4
{
overflow: visible;
}
.recommend-box .recommend-item-box h4 a,
.article-list .recommend-item-box h4 a,
.recommend-box .article-item-box h4 a,
.article-list .article-item-box h4 a {
position: relative;
transition: var(--AN);
}
.recommend-box .recommend-item-box h4 a:before,
.article-list .recommend-item-box h4 a:before,
.recommend-box .article-item-box h4 a:before,
.article-list .article-item-box h4 a:before {
position: absolute;
content: '';
width: 100%;
padding: 3px 12px;
transition: var(--AN);
height: 24px;
box-sizing: content-box;
margin-left: -12px;
margin-top: -3px;
border-radius: 50px;
}
.recommend-box .recommend-item-box h4:hover a,
.article-list .recommend-item-box h4:hover a,
.recommend-box .article-item-box h4:hover a,
.article-list .article-item-box h4:hover a {
color: var(--COLOR1);
}
.recommend-box .recommend-item-box h4:hover a:before,
.article-list .recommend-item-box h4:hover a:before,
.recommend-box .article-item-box h4:hover a:before,
.article-list .article-item-box h4:hover a:before {
background: var(--COLOR2);
}
.recommend-box .recommend-item-box h4 a:active:before,
.article-list .recommend-item-box h4 a:active:before,
.recommend-box .article-item-box h4 a:active:before,
.article-list .article-item-box h4 a:active:before {
background: var(--COLOR2);
height: 3px;
margin-top: 22px;
margin-left: -5px;
padding: 0 5px;
}
.recommend-box .type_blog .content .desc, .article-list .type_blog .content .desc, .recommend-box .baiduSearch .desc a, .article-list .baiduSearch .desc a {
margin-top: 7px;
}
/* --博客页面-- */
div#mainBox.container.clearfix.pt0 {
transform: translatey(-16px);
}
.filter-box {
margin-bottom: 16px;
}
.filter-box dl.filter-sort-box dd a:hover, .filter-box dl.filter-sort-box dd a.active {
color: var(--COLOR1);
}
/* --修复-- */
.main_father {
padding: 16px 0 0 0;
}
.blog_container_aside {
top: 60px !important;
transform: translatex(-10px);
}
.nodata .recommend-right {
margin-left: 18px;
}
.recommend-right .recommend-list-box, div#recommend-right {
top: 60px !important;
}
.article-list .article-item-box h4 a {
width: max-content;
}
}
@-moz-document domain("me.csdn.net") {
/* --去除繁杂元素-- */
.me_wrap .me_wrap_r>div.me_r[style="margin-top: 8px;"], .me_wrap .me_wrap_l .me_wrap_lt .lt_main .job .add_certification
{
display: none !important;
}
/* 卡片 */
.me_wrap .me_wrap_l .me_wrap_lt, .me_wrap .me_wrap_r .me_r,
.me_wrap .me_wrap_r .me_fans, .my_tab_page .my_tab_page_con {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
/* --主内容-- */
.me_wrap .me_wrap_l .me_chanel_bar, .me_wrap .me_wrap_l .me_chanel_det {
background-color: #fff0;
margin-bottom: 0;
}
.me_wrap .me_wrap_l .me_wrap_lt .lt_button .message, .me_wrap .me_wrap_l .me_wrap_lt .lt_button .watch_btn {
transition: var(--AN);
border: none !important;
border-radius: 50px;
color: var(--COLOR1);
background-color: var(--COLOR2);
}
.me_wrap .me_wrap_l .me_wrap_lt .lt_button .message, .me_wrap .me_wrap_l .me_wrap_lt .lt_button .watch_btn:hover {
border-radius: 50px;
color: #fff;
background-color: var(--COLOR1);
}
.me_wrap .me_wrap_l .me_wrap_lt .lt_button .watched:before {
border: none !important;
color: #fff !important;
}
.me_wrap .me_wrap_l .me_wrap_lt .lt_button .watched {
padding: 0 4px;
}
.me_wrap .me_wrap_l .me_wrap_lt .lt_button .watched span {
color: #a8a8a8;
}
.show_wrap .show_more {
transition: var(--AN);
background-color: var(--COLOR2);
color: var(--COLOR1);
border: none;
border-radius: 50px;
}
/* --右侧栏-- */
.me_wrap .me_wrap_r .me_r, .me_wrap .me_wrap_r .me_fans {
margin-bottom: 16px;
}
/* --修复-- */
.me_wrap {
width: 1216px;
}
.me_wrap .me_wrap_r {
margin-left: 16px;
}
.me_wrap .me_wrap_r .me_fans .att:hover span, .me_wrap .me_wrap_r .me_fans .fans:hover span, .me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item_click label, .me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item_click label .count, .me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item:hover label, .me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item:hover .count, .me_wrap .me_wrap_l .me_wrap_lt .lt_main .job .icon, .icon, .my_tab_page .my_tab_page_con .tab_page_list dt h3 a:hover {
color: var(--COLOR1);
}
.me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item_click label, .me_wrap .me_wrap_r .me_r .me_r_t, .me_wrap .me_wrap_l .me_chanel_bar .me_chanel_list .tab_item:hover label {
border-color: var(--COLOR1);
}
}
@-moz-document domain("download.csdn.net") {
/*
----------
自建
----------
*/
/* --图标修正-- */
/* 去除繁杂元素 */
.main_r .upload, .main_r .medal-box, .content_recom.right_plate_con,
.resource_box .resource_box_fn .left_fn .c_dl_btn.open_authentication {
display: none !important;
}
/* 卡片 */
.resource_user, .main .resource_box, .dl_comm, .resource_recommend, nav,
.alert-box, ul.pub_recommend {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
/* --左侧栏-- */
nav div div ul li {
background-color: #fff0 !important;
}
nav .clearfix .nav_com ul li a {
transition: var(--AN);
border-radius: 5px;
width: auto;
margin: 2px 6px;
}
nav .clearfix .nav_com ul li:hover a {
color: var(--COLOR1);
background-color: var(--COLOR2);
}
/* --主内容-- */
/* 资源详情 */
.main .resource_box {
margin-bottom: 16px;
}
.dl_bread_score {
background-color: var(--COLOR3);
border-radius: 10px;
padding: 6px 12px;
}
.resource_box .resource_box_fn .left_fn .c_dl_btn {
transition: var(--AN);
height: 32px;
line-height: 32px;
padding: 0 15px;
border-radius: 50px;
border: none;
margin-right: 10px;
color: var(--COLOR1);
background-color: var(--COLOR2);
}
.resource_box .resource_box_fn .left_fn .c_dl_btn:hover {
color: #fff;
background-color: var(--COLOR1);
}
.download_box .download_content .resource_img {
margin: -70px auto 0;
border-radius: 100%;
background-color: var(--COLOR3);
}
.download_box .download_content .pop_close {
border-radius: 50%;
top: 70px;
background-color: var(--COLOR3);
}
.download_box .download_content .pop_close:after {
transition: var(--AN);
content: '';
display: block;
width: 28px;
height: 28px;
background-color: #fff0;
border: 1px solid var(--COLOR3);
position: relative;
left: 0px;
top: 0px;
border-radius: 50%;
opacity: 1;
}
.download_box .download_content .pop_close:hover:after {
border-radius: 50%;
transform: scale(1.5);
opacity: 0;
border-color: var(--COLOR1);
}
.download_box .download_content .normal_tips ul {
background-color: var(--COLOR3);
margin: 0 40px 15px 40px;
padding: 10px 0;
border-radius: 10px;
}
.download_box .download_content .resource_dl_btn .dl_btn {
transition: var(--AN);
padding: 0 20px;
background: var(--COLOR2);
font-size: 16px;
color: var(--COLOR1);
border-radius: 50px;
}
/* 评论区 */
.dl_comm .comm_t .comm_list .comm_list_t .comm_list_t_l .dl_user {
font-size: 14px;
color: #fff0;
position: relative;
margin-right: 3px;
}
.dl_comm .comm_t .comm_list .comm_list_t .comm_list_t_l .dl_user span {
color: var(--COLOR1);
}
.dl_comm .comm_t .comm_list .comm_list_t .comm_list_t_l .dl_user span,
.dl_comm .comm_t .comm_list .comm_list_t .comm_list_t_l .comm_avatar {
position: relative;
z-index: 2;
}
.dl_comm .comm_t .comm_list .comm_list_t .comm_list_t_l .dl_user:after {
content: '';
display: block;
background-color: var(--COLOR2);
height: 24px;
width: 100%;
padding: 0 14px;
position: absolute;
margin-top: -24px;
margin-left: -32px;
z-index: 0;
box-sizing: content-box;
border-radius: 50px;
}
/* 推荐图文列表 */
ul.pub_recommend .pub_recom_item {
background-color: #fff0;
box-sizing: border-box;
padding: 14px 24px;
border: none;
}
/* --右侧栏-- */
.resource_user .user_fn .user_btn {
transition: var(--AN);
width: auto;
padding: 0 15px;
height: 28px;
border-radius: 50px;
border: none;
background: var(--COLOR3);
}
.resource_user .user_fn .attention {
transition: var(--AN);
background: var(--COLOR2);
color: var(--COLOR1);
}
.resource_user .user_fn .attention:hover {
color: #fff;
}
/* --修复-- */
.home_page_wrap, .resource_recommend {
margin-top: 16px;
}
.main {
width: 1210px;
}
.main .main_r {
transform: translatex(10px);
}
}
@-moz-document domain("so.csdn.net") {
/* 去除繁杂元素 */
。 {
display: none !important;
}
/* 卡片 */
.search-list-con, .business-sidebar, .left-nav, .relation-search, .search-result-pagination {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px 0 #0001 !important;
}
/* --左侧栏-- */
.left-nav li {
transition: var(--AN);
border-radius: 5px;
width: auto;
margin: 3px 6px;
}
.left-nav li:hover {
color: var(--COLOR1);
background-color: var(--COLOR2);
}
.left-nav li.active {
color: #fff;
background-color: var(--COLOR1);
}
/* --主内容-- */
.search-list-con, .relation-search, .search-result-pagination {
margin-bottom: 16px;
}
/* --右侧栏-- */
.business-sidebar {
margin-bottom: 16px;
}
/* --修复-- */
.main-container {
margin: 16px auto 0;
}
.main-container, .con-l {
overflow: visible;
}
.con-l-left {
transform: translatex(-8px);
}
.con-r {
transform: translatex(8px);
overflow: visible;
}
.business-sidebar .business-sidebar-item dt em, .business-sidebar .business-sidebar-item dd em, .search-list .search-detail em,
.search-list dt a em, .search-list dt:first-child a:hover, .relation-search ul li a {
color: var(--COLOR1);
}
}
@-moz-document domain("bbs.csdn.net") {
/*
----------
自建
----------
*/
a {
text-decoration: none !important;
}
::-webkit-scrollbar-button {
display: none;
height: 13px;
border-radius: 0px;
background-color: #AAA;
}
::-webkit-scrollbar-button:hover {
background-color: #808080cc;
}
::-webkit-scrollbar-thumb {
background-color: #a6a6a642;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #71717194;
}
::-webkit-scrollbar-track {
background-color: #fbfbfb0d;
border-radius: 10px;
}
::-webkit-scrollbar-track:hover {
background-color: #f5f5f517;
}
::-webkit-scrollbar {
width: 10px;
}
/*广告等元素*/
.advice, .honour_t.bbs_model, img.user-years,
.honour_list_wrap>.honour_c:nth-last-child(1)
{
display:none !important;
}
/*顶栏*/
.csdn-toolbar{
position: relative;
z-index: 999;
box-shadow: none;;
}
.news-nav {
position: relative;
z-index: 998;
background: #f9f9f9;
box-shadow: 0px 2px 10px 0px #00000029;
}
/*板块*/
.bbs_main_wrap {
overflow: visible;
}
.bbs_left_box,.fixed_dl {
position: relative;
transition: 0.5s;
background-color:#fdfdfd;
box-shadow: 0px 1rem 1rem 0px #30373814;
margin-bottom: 12px;
}
.bbs_left_box:hover,.fixed_dl:hover {
background-color:#fff;
box-shadow: 0px 1rem 2rem 0px rgba(48, 55, 66, 0.25);
transform: translate(0,-1px);
}
.bbs_left_box .com_title {
transition: .3s;
}
.bbs_left_box:hover .com_title {
background-color: #d92e2e3d;
}
/*正文*/
.bbs_left_box .bbs_cow_c .cow_c_list dt a img {
border-radius: 50%;
}
.bbs_left_box .bbs_cow_c .cow_c_list dd .att {
transition: .3s;
border-radius: 3px;
background: #d92e2e12;
color: #d92e2e;
border: none;
}
.bbs_left_box .bbs_cow_c .cow_c_list dd .att:hover {
background: #d92e2e;
color: #fff;
border: none;
}
/*侧栏*/
.left_menu .btn_toggle_hide, .left_menu .btn_toggle_show {
transition: .3s;
border-radius: 0 5px 5px 0;
background: #d92e2e12;
color: #d92e2e;
padding: 10px 3px;
position: absolute;
right: -26px;
}
.left_menu .btn_toggle_hide:hover, .left_menu .btn_toggle_show:hover {
transition: .3s;
background: #d92e2e;
color: #fff;
box-shadow: 0 0 15px 0 #f4444494;
}
.left_main {
overflow: hidden;
box-shadow: 0px 2px 10px 0px #00000029;
}
.left_side .tree {
padding: 10px 0 0 0;
}
.left_side .left_main .search_bbs {
transition: .3s;
border-radius: 100px;
background: #eee;
height: 32px;
border: none;
}
.left_side .left_main .search_bbs:hover,
.left_side .left_main .search_bbs:focus {
transition: .3s;
border-radius: 100px;
background: #fff;
height: 32px;
border: none;
box-shadow: 0 1px 4px 0 #00000029;
}
.left_main .tree .search_bbs .sear_input {
transition: .3s;
margin-left: 0.1px;
background: #fff0;
color: #4d4d4d;
}
.left_side #menu {
overflow: visible;
}
.left_side .tree .search_bbs_tree {
transition: .3s;
border-radius: 3px;
background: #fff;
box-shadow: 0 1px 4px 0 #00000029;
margin-top: 10px;
margin-bottom: 20px;
border: none;
border-top: 0;
padding: 5px 5px 5px;
}
.left_side .tree .curSelectedNode span {
background: #fff0;
}
.left_side #menu li {
transition: .3s;
position: relative;
left: -1px;
padding: 2px 0 2px 10px;
}
.left_side #menu li:hover {
transition: .3s;
padding: 2px 0 2px 15px;
background: #e6e6e6;
}
.left_side #menu li a {
color: #3e3e3e;
}
/*讨论*/
.hide_topic_box {
display: none;
}
div#bbs_detail_wrap{
max-height: 100% !important;
}
}
@-moz-document url-prefix("https://passport.csdn.net/login"), url-prefix("http://passport.csdn.net/login") {
#app {
background-image: url(http://wx3.sinaimg.cn/large/0065PkNmgy1ffm1ccv8scj31kw0zke82.jpg) !important;
background-size: cover;
}
.main-login {
float: right;
width: 450px;
height: 480px;
position: relative;
padding: 30px 0;
background-color: #ffffffad;
backdrop-filter: blur(7px);
border: none;
border-radius: 4px 4px;
box-shadow: none;
}
.dropdown-select .dropdown-text, .form-control {
background-color: #fff0;
}
.main-select {
position: absolute;
bottom: 80px;
width: 100%;
text-align: center;
}
.main-download-btn {
transition: .3s;
position: absolute;
bottom: 20px;
left: auto;
right: 20px;
display: block;
width: 150px;
height: 35px;
line-height: 40px;
color: #000;
background-color: #ffffffad;
}
.main-download-btn:hover {
color: #000;
background-color: #ca0c162e;
}
.main-qr-mark {
display: none;
}
.main-qr-mark.app-transition-move {
display: block;
}
.main-qr-mark:before,.main-qr-mark:after {
display:none;
}
.main-qr-mark {
background-color: #ffffffad;
backdrop-filter: blur(15px);
border-radius: 4px 4px;
transition: all .3s ease;
z-index: 10;
overflow: hidden;
opacity: 0;
}
.main-code .app-wrap {
background: #fff;
}
}
@-moz-document domain("mp.csdn.net") {
.navigation-bar__inner--edit-pagedownButtons .navigation-bar__button, .navigation-bar__inner--edit-pagedownButtons .navigation-bar__spacer
{
transition: .1s;
}
nav {
z-index: 99;
position: relative;
transition: 0.5s;
background-color: #fdfdfd;
box-shadow: 0px 0.25rem 0.25rem 0px #30373814;
margin-bottom: 2em;
}
nav:hover {
background-color: #fff;
box-shadow: 0px 0.25rem 0.5rem 0px rgba(48, 55, 66, 0.25);
transform: translate(0,-1px);
}
#labelTitle,.article-bar__user-box .user-box .user-option-box {
z-index: 999;
}
.side-title__button {
transition: .3s;
border-radius: 100%;
margin: 4px 0 0;
}
.side-title__button:hover {
opacity: 0.7;
}
.side-title__button:active {
opacity: 1;
}
.side-title__button .icon {
vertical-align: 0;
margin-right: 0;
}
.article-bar__input-box .article-bar__title--input {
background-color: #fff0;
}
.article-bar__input-box {
display: flex;
width: 40%;
margin: 8px 16px 8px 8px;
border: none;
border-radius: 4px;
background-color: #0000000f;
}
.article-bar__user-box {
position: absolute;
right: -20px;
}
.article-bar__user-box .btn-save {
transition: .3s;
background-color: #fde3e4;
color: #ca0c16;
border: 1px solid #fff0;
border-radius: 4px;
}
.article-bar__user-box .btn-save:hover {
border: 1px solid #ca0c162e;
}
.article-bar__user-box .btn-publish {
transition:.5s;
}
.article-bar__user-box .btn-publish:hover {
background-color: #ca0c16b0;
box-shadow: 0 2px 8px 0 #f4444494;
}
}