Component Chat Discord Mở Rộng - Component-Backend
Chat Discord Mở Rộng » Component Chat Discord Mở Rộng - Component-Backend
LƯU Ý:
Đây là trang component được sử dụng nội bộ bởi Wiki SCP-VN. Trang này được tạo để sử dụng và thêm vào các trang khác.
/* ----------------------- 暗码版式 discord扩展 ------------------------ */ :root { --color-main: #36393e; --topbar-bg: #2f3136; --color-subtt: #3e565f; /* 内文次标题 */ --subtxt-basesize: 0.8rem; --subtxt-2size: calc(var(--subtxt-basesize) * 2); } #content-wrap { min-height: auto; } #page-title { display: none; } #main-content { margin: -1rem 0 0 0em; padding: 0; } #main-content, #page-content { min-height: 0; } #main-content .page-tags::before { content: "标签"; padding: 0.5em 0.25em 0.25em 0.25em; margin: 0; } #main-content .page-tags, #page-options-container { padding: 0.5rem 1rem; background-color: #1e1f26; margin-top: 0rem; } #action-area { margin: 0.5rem 0.5rem; width: 98%; } /*----------------原 Discord 组件适配 --------------------*/ .messages-group .messages { padding-top: 0; } .message .body .content br { display: block; } .message .body .content, .message .body p { white-space: normal; margin: 0.75em 0; } blockquote, div.blockquote { border: none; border-left: 4px solid #4f545c; margin: 1em 0; width: calc(100% - 5em); padding: 0.5em 1em; } /*-------------- discord 样式 ---------------*/ .discord { border-radius: 0rem; } .discord .content a:hover { text-decoration: none; } .discord-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; } .discord-main { overflow-y: scroll; height: 100vh; -ms-flex-preferred-size: 100%; flex-basis: 100%; } #login-status { display: none; } #page-options-container, .page-tags, .discord-main, .discord-userlist { -webkit-box-shadow: 0px 2px 2px #2f3136; box-shadow: 0px 2px 2px #2f3136; } /*-------------- 用户列表 ---------------*/ .discord-userlist { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; -ms-flex-preferred-size: 20%; flex-basis: 20%; padding: 0 0.5rem; background-color: #202225; overflow-y: scroll; } .discord-userlist>.userlist-reader>h1, .discord-userlist>h1 { color: #8e9297; font-size: 12px; line-height: 16px; } .discord-userlist>.userlist-reader>h1::after, .discord-userlist>h1::after { display: none; } /* 列表中的通常评分栏 */ @media (min-width: 1240px) { .discord-userlist h5, .discord-userlist h2, .discord-userlist h3, .discord-userlist h4{ clear: both; } } /* 用户块 */ .userlist-list, .userlist-div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 3px 2px; height: 2.5rem; overflow: hidden; } .userlist-list a { position: relative; margin-left: 0; width: auto; } .userlist-list a:not(.ds-userlink):before { content: ' '; display: block; position: absolute; height: 2.5rem; width: 20rem; } .userlist-list a.userlist-link:not([href="userlink-reader"])+a, .userlist-list a.userlist-link:not([href="userlink"])+a { display: none; } .userlist-list a.userlist-link[href="userlink-reader"], .userlist-list a.userlist-link[href="userlink"] { display: none; } .userlist-list a.userlist-link[href="userlink-reader"]+a, .userlist-list a.userlist-link[href="userlink"]+a { color: #84878d; display: block; } .userlist-list img { height: 2rem; width: 2rem; border-radius: 50%; border: 3.5px solid rgba(55, 55, 55, 0.8); margin-right: 0.35rem; } .userlist-list:hover { background-color: #34373c; } .userlist-list a:hover { background-color: transparent; } .userlist-list .user { font-family: 'Noto Sans SC', sans-serif; margin-top: -2px; overflow: hidden; } .userlist-list .user .username, .userlist-list .user .description { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .userlist-list .user .username { font-size: 16px; line-height: 20px; font-weight: bold; color: #8e9297; } .userlist-list .user .description { font-size: 12px; line-height: 16px; font-weight: thin; margin-top: -0.5px; color: #84878d; } .userlist-list .user .description[style*="{$description"] { display: none; } .userlist-list .user .description strong { color: #9ea9b7; } .userlist-reader+*:not(.userlist-list), .userlist-list+*:not(.userlist-list) { margin-top: 1rem; clear: both; } /* 通用 */ .set-name[style*="{$username"]{ display: none; } .set-name:not([style*="{$username"]) + .set-name{ display:none ; } .set-img a[href*="usericon"]{ display: none; } .set-img img:not([scr*="usericon"]) + img{ display: none; } .set-hidnext + .set-hidnext{ display: none; } /* 用户列表中的评分栏 */ .userlist-list .rate-btn .rate-points, .userlist-list .rate-num .btn{ display: none; } .userlist-list .rate-num .rate-points{ font-size: 0; } .userlist-list .rate-num .rate-points .number{ font-size: 1rem; } .rate-num .page-rate-widget-box *, .rate-btn .page-rate-widget-box *, .rate-btn .page-rate-widget-box , .rate-num .page-rate-widget-box { background: transparent !important; border: none !important; } .userlist-list .rate-num .page-rate-widget-box .rate-points, .userlist-list .rate-btn .page-rate-widget-box , .userlist-list .rate-num .page-rate-widget-box { padding: 0rem; margin: 0; float: none; } .userlist-list .rate-num { font-size: 1rem; letter-spacing: 1px; } .userlist-list .rateup , .userlist-list .ratedown , .userlist-list .cancel { font-size:0 ; font-family: 'FontAwesome', kaiti; } .userlist-list .rateup a:after , .userlist-list .ratedown a:after , .userlist-list .cancel a:after { content: '\f087'; margin-right: 0rem; font-size: 0.9rem; color: grey; } .userlist-list .btn a:hover:after { color:#7289da; } .userlist-list .rateup a:after { content: '\f164'; } .userlist-list .ratedown a:after { content: '\f165'; } .userlist-list .cancel a:after { content: '\f00d'; } /* 用户列表中的目录栏 */ .discord-userlist .userlist-toc>h1 { font-size: 12px; line-height: 16px; color: #8e9297; margin-top: 1rem; clear: both; } .discord-userlist #toc { margin: 0em auto 0em 0; padding: 0em 0em; border: none; background-color: transparent; } .discord-userlist #toc-action-bar, .discord-userlist #toc .title { display: none } .discord-userlist #toc-list { margin: -0.3rem 0 0 0; } .discord-userlist .page-rate-widget-box { margin: 1em 0 0 0; float: right; } .userlist-toc p { line-height: 1.3em; padding: 0; margin: 0; margin-left: 1em; font-size: 1rem; } .userlist-toc a { color: #8e9297; line-height: 1.3em; font-size: 1rem; } .userlist-toc a:hover { color: #e2e2e2; } .userlist-toc table+p { margin-top: -0.2rem; } .messages p:first-child { margin-top: 0; } .messages p:last-child { margin-bottom: 0; } /*------------ 用户列表其他 -----------------*/ .icon-hidborder img{ border-color: transparent; } .userlist-list[class*="noimgbd"] img{ border-color: transparent; } /*------------ 窄屏 -----------------*/ .mob-show{ display:none; } @media (min-width: 1240px) { #search-top-box { margin-top: -1rem; } #main-content { margin: 0 0 0 17em; padding: 0; width: 100%; } #page-content { padding: 0 0 0 0; margin-top: -0.88rem; } } @media (max-width: 1240px) { #top-bar { top: 18px; } #main-content { max-width: 100vw; } #extra-div-2::before { display: block; left: -1rem; } #extra-div-1::before { margin-top: 0.5rem; left: -1rem; } #top-bar { margin-top: -0.5rem; position: relative; float: right; width: auto; right: -5rem } div.blockquote, blockquote { margin: 0 auto; width: 86%; } .discord-userlist { -ms-flex-preferred-size: 30%; flex-basis: 30%; } .userlist-list { float: left; margin: 0 0rem 0.5rem 0rem !important; padding: 0px 0.6rem 0 0.3rem; } } @media (max-width: 774px) { #login-status { display: block; } #account-topbutton, #my-account { display: none } .discord-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .discord-userlist { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0 1rem; } .userlist-reader { display: none; } .discord-main { overflow-y: initial; height: auto; } .mobile-top-bar li { display: none; } #extra-div-2::before { display: block; left: -1rem; } #extra-div-1::before { margin-top: 0.5rem; left: -1rem; } #page-content div .userlist-list { clear: initial; } .mob-hid { display: none; } .mob-show{ display:block; } } /*-------------- 扩展 ----------------------*/ .ds-divider { -ms-flex-wrap: nowrap; flex-wrap: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 110%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #36393e; padding-top: 5px; margin-top: -5px; position: relative; padding: 0; } .ds-divider:after, .ds-divider:before { content: ' '; height: 0.06rem; background-color: rgba(240, 71, 71, .8); width: 100%; } .ds-divider>* { padding: 0 1rem; -ms-flex-negative: 0; flex-shrink: 0; color: rgba(240, 71, 71, .8); font-size: 1rem; margin: 0; font-weight: 400; } /* 与背景同色的,用以遮挡楼层下面的线的小块 */ .ds-bgblock { background: #36393e; padding-top: 0px; margin-top: -1px; position: relative; padding: 0; height: 1px } /* 楼层间的分割线 */ .ds-hr{ width: 100%; border-bottom: solid 0.063rem rgb(77, 82, 89); } /* 次标题 */ .discord .ds-subtt h2, .discord .ds-subtt p, .discord .ds-subtt .footnotes-footer .title { padding: 0rem 0 0rem 0.5rem; font-size: var(--subtxt-basesize); font-weight: 400; } .discord .ds-subtt { display: -webkit-box; display: -ms-flexbox; display: flex; background:var(--color-subtt); } .discord .ds-subtt:after, .discord .ds-subtt .footnotes-footer .title:after { content: ' '; background-image: -o-linear-gradient(var(--color-main) 88%, transparent 89%, transparent 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(88%, var(--color-main)), color-stop(89%, transparent), to(transparent)); background-image: linear-gradient(var(--color-main) 88%, transparent 89%, transparent 100%); height: initial; margin: 0rem auto 0rem 0.5rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* 标签形状次标题 */ .discord .ds-subtitle p, .discord .ds-subtitle h2, .discord .ds-subtitle .footnotes-footer .title { background-color: var(--color-subtt); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: var(--subtxt-2size); padding-left: 0.4rem; margin: 0; font-weight: 400; font-size: var(--subtxt-basesize); } .discord .ds-subtitle p::after, .discord .ds-subtitle h2::after, .discord .ds-subtitle .footnotes-footer .title:after { content: " "; width: 0; height: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; border-top: var(--subtxt-basesize) solid var(--color-main); border-left: 1rem solid var(--color-subtt); border-bottom: var(--subtxt-basesize) solid var(--color-main); } .ds-subtitle p::before, .ds-subtitle h2::before, .discord .ds-subtitle .footnotes-footer .title:before { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; content: " "; background-color: var(--color-subtt); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: var(--subtxt-2size); background-image: -o-linear-gradient(var(--color-main) 47%, transparent 49%, transparent 53%, var(--color-main) 54%, var(--color-main) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(47%, var(--color-main)), color-stop(49%, transparent), color-stop(53%, transparent), color-stop(54%, var(--color-main)), to(var(--color-main))); background-image: linear-gradient(var(--color-main) 47%, transparent 49%, transparent 53%, var(--color-main) 57%, var(--color-main) 100%); margin-left: -0.1rem; } .discord .ds-subtt .footnote-footer, .discord .ds-subtitle .footnote-footer { margin-top: 0.2rem; }
/* ========================= Discord 邀请链接 源代码 ========================= */ #page-content .discord-invite { margin: 0; background-color: #2f3136; color: #b9bab7; max-width: 30rem; } .discord-invite .invite-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 0; padding: 0% 4% 1% 4%; } .discord-invite .invite-img { -ms-flex-preferred-size: 10%; flex-basis: 10%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .discord-invite .invite-imgblock { width: 4rem; background-color: #36393f; border-radius: 20%; background-size: cover; background-repeat: no-repeat; height: 4rem; background-position: center; } .discord-invite .invite-head p { margin: 0; padding: 1% 4% 0% 4%; color: #b9bbbe; font-weight: bold; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; font-size: 12px; } .discord-invite .invite-main { -ms-flex-preferred-size: 90%; flex-basis: 90%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .discord-invite .invite-txt { padding: 0 3%; font-size: 140%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .discord-invite .invite-txt .invite-name { color: #e8e8e8; font-weight: bold; font-size: 16px; line-height: 20px; } .discord-invite .invite-txt a.invite-name:hover { background-color: transparent; text-decoration: underline; } .discord-invite .invite-txt .invite-description { color: #b9bbbe; font-weight: bold; font-size: 12px; } .discord-invite .invite-txt span tt { color: #3ba55d; font-size: initial; position: initial; } .discord-invite .invite-btn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-pack: distribute; justify-content: space-around; } #page-content .discord-invite .invite-btn a { background-color: #3ba55d; border-radius: 10%; color: #e8e8e8; padding: 0.8rem 1rem; float: right; margin: 0 0rem; right: 0rem; text-decoration: none; white-space: nowrap; text-align: center; } #page-content .discord-invite .invite-btn a:hover { background-color: #2d8449; } @media (max-width: 774px) { .discord-invite .invite-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } .discord-invite .invite-main { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .discord-invite .invite-txt .invite-name { font-weight: normal; font-size: 16px; } .discord-invite .invite-txt .invite-description { color: #b9bbbe; font-weight: normal; font-size: 10px; } .discord-invite .invite-btn { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #page-content .discord-invite .invite-btn a { border-radius: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } }
sửa đổi trang: 3, chỉnh sửa lần cuối: 12 Jan 2022 08:16
Chỉnh sửa Thành phần
Nối
Chỉnh sửa Meta
Người theo dõi
Backlink
Mã nguồn
Trang mẹ
Khóa bài
Đổi tên
Xóa