特性：
- Material Design 风格：为帖子回复、首页话题等增加卡片的圆角和阴影；分页的按钮组
- 始终固定的半透明磨砂顶端栏
- 减小文字字号、表情大小，调整文字与表情相对位置
- 个人口味的许多细节调整（如首页左对齐标题与卡片）
Material-CC98 by coolspring8
Details
Authorcoolspring8
LicenseMIT
Categorycc98
Created
Updated
Size8.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Material-CC98
@namespace github.com/CoolSpring8/userscript
@version 0.1.2
@description Material Design风格的样式微调，借鉴了Material UI组件库
@author CoolSpring
@supportURL https://github.com/CoolSpring8/userscript/issues
@license MIT
==/UserStyle== */
@-moz-document domain("www.cc98.org") {
#root {
--color-main: rgb(98, 150, 211);
--color-main-transparent: rgba(235, 249, 251, 0.8);
--color-divider: rgba(0, 0, 0, 0.12);
--box-shadow-card: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--box-shadow-card-light: 0px 1px 0.5px -0.5px rgba(0, 0, 0, 0.2),
0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.14),
0px 0.5px 1.5px 0px rgba(0, 0, 0, 0.12);
--box-shadow-floating-action-button-light: 0px 1.5px 2.5px -0.5px rgba(0, 0, 0, 0.2),
0px 3px 5px 0px rgba(0, 0, 0, 0.14), 0px 0.5px 9px 0px rgba(0, 0, 0, 0.12);
}
#root {
font-size: 15px;
}
button,
.button {
cursor: pointer;
border-radius: 4px;
}
button:hover,
.button:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.ubb-editor,
.react-mde {
border: none;
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.react-mde > .grip {
border-top: none;
}
/* 参考自https://vercel.com/blog */
.topBar {
position: fixed;
top: 0;
background-color: var(--color-main-transparent);
backdrop-filter: saturate(180%) blur(5px);
}
.topBarMessageDetails > ul,
.topBarUserCenter > ul {
border-radius: 0 0 4px 4px;
box-shadow: var(--box-shadow-card);
}
.page-link {
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
box-sizing: border-box;
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 4px;
border: 1px solid #ddd;
}
.page-item:not(:last-child) > .page-link {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.page-item:not(:first-child) > .page-link {
margin-left: -1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.topBarLogo,
.topBarCC98,
.topBarText,
.topBarUserName {
filter: invert(1);
}
.topBarUserImg {
display: none;
}
.topBarUserName {
font-size: 0;
}
.topBarUserName::after {
font-size: 1rem;
content: "My CC98";
}
.topBarUserCenter {
margin-left: 3rem;
}
.topBarBell {
color: #000;
background-color: #fff;
}
}
@-moz-document url("https://www.cc98.org/")
{
.topBar-mainPage {
position: fixed;
top: 0;
background-color: var(--color-main-transparent);
backdrop-filter: saturate(180%) blur(5px);
}
.announcementContent,
.recommendedReadingContent,
.mainPageListContent1,
.mainPageListContent2 {
border-width: 8px 0 0 0;
}
.announcementContent,
.recommendedReadingContent,
.mainPageListContent1,
.mainPageListContent2,
.recommendedFunctionContent,
.schoolNewsContent,
.mainPageCountContent,
.ubb-editor,
.user-center-navigation,
.user-center-router {
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
/* 粗略对齐“推荐阅读”与“推荐功能”底部高度 */
.recommendedFunctionContent {
height: 20.5rem;
}
/* 对齐“学习园地”与“论坛统计”底部高度 */
.mainPageCountContent {
height: 11.25rem;
}
/* 左对齐标题与卡片 */
.mainPageTitle1,
.mainPageTitle2 {
padding-left: 0;
}
.topBarMessageDetails-mainPage > ul,
.topBarUserCenter-mainPage > ul {
border-radius: 0 0 4px 4px;
box-shadow: var(--box-shadow-card);
}
}
@-moz-document url-prefix("https://www.cc98.org/newTopics"),
url-prefix("https://www.cc98.org/focus"),
url-prefix("https://www.cc98.org/search")
{
.focus-topic .focus-topic-left .focus-topic-userName {
font-size: 15px;
}
.focus-topic-topicArea {
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.focus-topic {
margin-top: 0;
border-top: var(--color-divider) solid 1px;
border-bottom: none;
border-left: none;
border-right: none;
}
.focus-topic:first-child {
border-radius: 4px 4px 0 0;
}
/* 重置“回到顶部”按钮大小 */
#scrollToTop {
width: unset;
height: unset;
}
}
@-moz-document url-prefix("https://www.cc98.org/topic/")
{
.topicInfo-info {
border: none;
border-radius: 4px;
background-color: #fff;
box-shadow: var(--box-shadow-card);
}
.topicInfo-title {
border-radius: 4px;
}
/* 让广告占满卡片右边小半部分 */
.topicInfo-ads img {
width: 19rem !important;
height: 6.5rem !important;
border-radius: 0 4px 4px 0;
}
.page-goto > div > a {
border-radius: 4px;
}
.page-goto > div > a:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* 对齐分页与面包屑导航的高度 */
ul.page-nav,
.page-goto {
margin-bottom: 1em;
}
.followTopic,
.operation1,
.replierBtn {
border-radius: 4px;
}
.followTopic:hover,
.operation1:hover {
background-color: rgba(0, 0, 0, 0.04);
}
/* 为了避免页面内容覆盖顶端栏的一个dirty hack。然而没有解决.ubb-image-toolbox的问题 */
.userMessage-right div[style="z-index: 100;"],
.photoFrame > img {
z-index: auto !important;
}
.userGender {
z-index: auto;
}
.userMessage {
border-radius: 4px 0 0 4px;
}
.userMessage-userName,
.userMessage-left > div:not(.column) > div:first-child {
font-weight: normal !important;
}
.reply {
margin-top: 12px;
border: none;
border-radius: 4px;
box-shadow: var(--box-shadow-card-light);
}
.reply .reply-floor,
.reply .reply-floor-lz {
box-shadow: var(--box-shadow-floating-action-button-light);
}
img[src^="/static/images/ac/"],
img[src^="/static/images/ms/"],
img[src^="/static/images/em/"],
img[src^="/static/images/CC98/"] {
width: 3rem;
height: auto;
margin-bottom: 1rem;
}
}
@-moz-document url-prefix("https://www.cc98.org/boardList")
{
.anArea > .column {
border: none !important;
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.boardListHead {
border-radius: 4px 4px 0 0;
}
.expendBoardList {
border-radius: 4px;
}
.expendBoardList:hover {
background-color: rgba(0, 0, 0, 0.04);
}
}
@-moz-document url-prefix("https://www.cc98.org/board/")
{
.board-list-body {
border: none;
}
.board-list-body,
.ant-collapse-item {
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.ant-pagination-item {
margin: 0;
min-width: 48px;
box-sizing: border-box;
}
}
@-moz-document url-prefix("https://www.cc98.org/usercenter"),
url-prefix("https://www.cc98.org/user/")
{
.user-center-navigation,
.user-center-router {
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.user-center-body .user-center-navigation,
.user-center-body .user-center-router {
border: none;
}
}
@-moz-document url-prefix("https://www.cc98.org/message/")
{
.message-nav,
.message-response,
.message-system,
.message-message,
.message-setting {
border: none;
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.message-message-pList {
border-radius: 4px 0 0 4px;
}
.message-message-window {
border-radius: 0 4px 4px 0;
}
.message-message-people {
border-top: none;
border-bottom: none;
border-left: none;
}
.message-message-window .message-message-wContent {
border-right: none;
}
.message-message-window .message-message-wHeader,
.message-message-window .message-message-wPost {
border: none;
}
.message-message-people .message-message-pTitle {
border-radius: 4px 0 0 0;
}
.message-message-wReport {
border-radius: 0 4px 0 0;
}
}
@-moz-document url-prefix("https://www.cc98.org/signin")
{
.sign-in {
border-radius: 4px;
box-shadow: var(--box-shadow-card);
}
.ubb-editor {
border: 1px solid #ccc;
}
}