☰

Material-CC98

Material Design风格的样式微调～部分代码来自material-ui.com。

目前为 2021-03-12 提交的版本。查看 最新版本。

  1. /* ==UserStyle==
  2. @name         Material-CC98
  3. @namespace    github.com/CoolSpring8/userscript
  4. @version      0.1.1
  5. @description  Material Design风格的样式微调～部分代码来自material-ui.com。
  6. @author       CoolSpring
  7. @supportURL   https://github.com/CoolSpring8/userscript/issues
  8. @license      MIT
  9. ==/UserStyle== */
  10. @-moz-document domain("www.cc98.org") {
  11.   #root {
  12.     --color-main: rgb(177, 211, 150);
  13.     --color-main-transparent: rgba(177, 211, 150, 0.8);
  14.     --color-divider: rgba(0, 0, 0, 0.12);
  15.     --box-shadow-card: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
  16.       0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  17.     --box-shadow-card-light: 0px 1px 0.5px -0.5px rgba(0, 0, 0, 0.2),
  18.       0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.14),
  19.       0px 0.5px 1.5px 0px rgba(0, 0, 0, 0.12);
  20.     --box-shadow-floating-action-button-light: 0px 1.5px 2.5px -0.5px rgba(0, 0, 0, 0.2),
  21.       0px 3px 5px 0px rgba(0, 0, 0, 0.14), 0px 0.5px 9px 0px rgba(0, 0, 0, 0.12);
  22.   }
  23.  
  24.   #root {
  25.     font-size: 15px;
  26.   }
  27.  
  28.   button,
  29.   .button {
  30.     cursor: pointer;
  31.     border-radius: 4px;
  32.   }
  33.  
  34.   button:hover,
  35.   .button:hover {
  36.     background-color: rgba(0, 0, 0, 0.04);
  37.   }
  38.  
  39.   .ubb-editor,
  40.   .react-mde {
  41.     border: none;
  42.     border-radius: 4px;
  43.     box-shadow: var(--box-shadow-card);
  44.   }
  45.  
  46.   .react-mde > .grip {
  47.     border-top: none;
  48.   }
  49.  
  50.   /* 参考自https://vercel.com/blog。该网页的样式中的position是sticky，但我暂时没法在CC98页面上完成同样效果，就改成了fixed */
  51.   .topBar {
  52.     position: fixed;
  53.     top: 0;
  54.     background-color: var(--color-main-transparent);
  55.     backdrop-filter: saturate(180%) blur(5px);
  56.   }
  57.  
  58.   .topBarMessageDetails > ul,
  59.   .topBarUserCenter > ul {
  60.     border-radius: 0 0 4px 4px;
  61.     box-shadow: var(--box-shadow-card);
  62.   }
  63.  
  64.   .page-link {
  65.     margin: 0;
  66.     display: inline-flex;
  67.     align-items: center;
  68.     justify-content: center;
  69.     min-width: 42px;
  70.     box-sizing: border-box;
  71.     transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  72.       box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
  73.       border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  74.     border-radius: 4px;
  75.     border: 1px solid #ddd;
  76.   }
  77.  
  78.   .page-item:not(:last-child) > .page-link {
  79.     border-top-right-radius: 0;
  80.     border-bottom-right-radius: 0;
  81.   }
  82.  
  83.   .page-item:not(:first-child) > .page-link {
  84.     margin-left: -1px;
  85.     border-top-left-radius: 0;
  86.     border-bottom-left-radius: 0;
  87.   }
  88. }
  89.  
  90. @-moz-document url("https://www.cc98.org/")
  91. {
  92.   .topBar-mainPage {
  93.     position: fixed;
  94.     top: 0;
  95.     background-color: var(--color-main-transparent);
  96.     backdrop-filter: saturate(180%) blur(5px);
  97.   }
  98.  
  99.   .announcementContent,
  100.   .recommendedReadingContent,
  101.   .mainPageListContent1,
  102.   .mainPageListContent2 {
  103.     border-width: 8px 0 0 0;
  104.   }
  105.  
  106.   .announcementContent,
  107.   .recommendedReadingContent,
  108.   .mainPageListContent1,
  109.   .mainPageListContent2,
  110.   .recommendedFunctionContent,
  111.   .schoolNewsContent,
  112.   .mainPageCountContent,
  113.   .ubb-editor,
  114.   .user-center-navigation,
  115.   .user-center-router {
  116.     border-radius: 4px;
  117.     box-shadow: var(--box-shadow-card);
  118.   }
  119.  
  120.   /* 粗略对齐“推荐阅读”与“推荐功能”底部高度 */
  121.   .recommendedFunctionContent {
  122.     height: 20.5rem;
  123.   }
  124.  
  125.   /* 对齐“学习园地”与“论坛统计”底部高度 */
  126.   .mainPageCountContent {
  127.     height: 11.25rem;
  128.   }
  129.  
  130.   /* 左对齐标题与卡片 */
  131.   .mainPageTitle1,
  132.   .mainPageTitle2 {
  133.     padding-left: 0;
  134.   }
  135.  
  136.   .topBarMessageDetails-mainPage > ul,
  137.   .topBarUserCenter-mainPage > ul {
  138.     border-radius: 0 0 4px 4px;
  139.     box-shadow: var(--box-shadow-card);
  140.   }
  141. }
  142.  
  143. @-moz-document url-prefix("https://www.cc98.org/newTopics"),
  144. url-prefix("https://www.cc98.org/focus"),
  145. url-prefix("https://www.cc98.org/search")
  146. {
  147.   .focus-topic .focus-topic-left .focus-topic-userName {
  148.     font-size: 15px;
  149.   }
  150.  
  151.   .focus-topic-topicArea {
  152.     border-radius: 4px;
  153.     box-shadow: var(--box-shadow-card);
  154.   }
  155.  
  156.   .focus-topic {
  157.     margin-top: 0;
  158.     border-top: var(--color-divider) solid 1px;
  159.     border-bottom: none;
  160.     border-left: none;
  161.     border-right: none;
  162.   }
  163.  
  164.   .focus-topic:first-child {
  165.     border-radius: 4px 4px 0 0;
  166.   }
  167.  
  168.   /* 重置“回到顶部”按钮大小 */
  169.   #scrollToTop {
  170.     width: unset;
  171.     height: unset;
  172.   }
  173. }
  174.  
  175. @-moz-document url-prefix("https://www.cc98.org/topic/")
  176. {
  177.   .topicInfo-info {
  178.     border: none;
  179.     border-radius: 4px;
  180.     background-color: #fff;
  181.     box-shadow: var(--box-shadow-card);
  182.   }
  183.  
  184.   .topicInfo-title {
  185.     border-radius: 4px;
  186.   }
  187.  
  188.   /* 让广告占满卡片右边小半部分 */
  189.   .topicInfo-ads img {
  190.     width: 19rem !important;
  191.     height: 6.5rem !important;
  192.     border-radius: 0 4px 4px 0;
  193.   }
  194.  
  195.   .page-goto > div > a {
  196.     border-radius: 4px;
  197.   }
  198.   .page-goto > div > a:hover {
  199.     background-color: rgba(0, 0, 0, 0.04);
  200.   }
  201.  
  202.   /* 对齐分页与面包屑导航的高度 */
  203.   ul.page-nav,
  204.   .page-goto {
  205.     margin-bottom: 1em;
  206.   }
  207.  
  208.   .followTopic,
  209.   .operation1,
  210.   .replierBtn {
  211.     border-radius: 4px;
  212.   }
  213.  
  214.   .followTopic:hover,
  215.   .operation1:hover {
  216.     background-color: rgba(0, 0, 0, 0.04);
  217.   }
  218.  
  219.   /* 为了避免页面内容覆盖顶端栏的一个dirty hack。然而没有解决.ubb-image-toolbox的问题 */
  220.   .userMessage-right div[style="z-index: 100;"],
  221.   .photoFrame > img {
  222.     z-index: auto !important;
  223.   }
  224.   .userGender {
  225.     z-index: auto;
  226.   }
  227.  
  228.   .userMessage {
  229.     border-radius: 4px 0 0 4px;
  230.   }
  231.  
  232.   .userMessage-userName, .userMessage-left > div:not(.column) > div:first-child {
  233.     font-weight: normal !important;
  234.   }
  235.  
  236.   .reply {
  237.     margin-top: 12px;
  238.     border: none;
  239.     border-radius: 4px;
  240.     box-shadow: var(--box-shadow-card-light);
  241.   }
  242.  
  243.   .reply .reply-floor,
  244.   .reply .reply-floor-lz {
  245.     box-shadow: var(--box-shadow-floating-action-button-light);
  246.   }
  247.  
  248.   img[src^="/static/images/ac/"],
  249.   img[src^="/static/images/ms/"],
  250.   img[src^="/static/images/em/"] {
  251.     width: 3rem;
  252.     height: auto;
  253.     margin-bottom: 1rem;
  254.   }
  255. }
  256.  
  257. @-moz-document url-prefix("https://www.cc98.org/boardList")
  258. {
  259.   .anArea > .column {
  260.     border: none !important;
  261.     border-radius: 4px;
  262.     box-shadow: var(--box-shadow-card);
  263.   }
  264.  
  265.   .boardListHead {
  266.     border-radius: 4px 4px 0 0;
  267.   }
  268.  
  269.   .expendBoardList {
  270.     border-radius: 4px;
  271.   }
  272.  
  273.   .expendBoardList:hover {
  274.     background-color: rgba(0, 0, 0, 0.04);
  275.   }
  276. }
  277.  
  278. @-moz-document url-prefix("https://www.cc98.org/board/")
  279. {
  280.   .board-list-body {
  281.     border: none;
  282.   }
  283.  
  284.   .board-list-body,
  285.   .ant-collapse-item {
  286.     border-radius: 4px;
  287.     box-shadow: var(--box-shadow-card);
  288.   }
  289.  
  290.   .ant-pagination-item {
  291.     margin: 0;
  292.     min-width: 48px;
  293.     box-sizing: border-box;
  294.   }
  295. }
  296.  
  297. @-moz-document url-prefix("https://www.cc98.org/usercenter"),
  298. url-prefix("https://www.cc98.org/user/")
  299. {
  300.   .user-center-navigation,
  301.   .user-center-router {
  302.     border-radius: 4px;
  303.     box-shadow: var(--box-shadow-card);
  304.   }
  305.  
  306.   .user-center-body .user-center-navigation,
  307.   .user-center-body .user-center-router {
  308.     border: none;
  309.   }
  310. }
  311.  
  312. @-moz-document url-prefix("https://www.cc98.org/message/")
  313. {
  314.   .message-nav,
  315.   .message-response,
  316.   .message-system,
  317.   .message-message,
  318.   .message-setting {
  319.     border: none;
  320.     border-radius: 4px;
  321.     box-shadow: var(--box-shadow-card);
  322.   }
  323.  
  324.   .message-message-pList {
  325.     border-radius: 4px 0 0 4px;
  326.   }
  327.  
  328.   .message-message-window {
  329.     border-radius: 0 4px 4px 0;
  330.   }
  331.  
  332.   .message-message-people {
  333.     border-top: none;
  334.     border-bottom: none;
  335.     border-left: none;
  336.   }
  337.  
  338.   .message-message-window .message-message-wContent {
  339.     border-right: none;
  340.   }
  341.  
  342.   .message-message-window .message-message-wHeader,
  343.   .message-message-window .message-message-wPost {
  344.     border: none;
  345.   }
  346.  
  347.   .message-message-people .message-message-pTitle {
  348.     border-radius: 4px 0 0 0;
  349.   }
  350.  
  351.   .message-message-wReport {
  352.     border-radius: 0 4px 0 0;
  353.   }
  354. }
  355.  
  356. @-moz-document url-prefix("https://www.cc98.org/signin")
  357. {
  358.   .sign-in {
  359.     border-radius: 4px;
  360.     box-shadow: var(--box-shadow-card);
  361.   }
  362.   .ubb-editor {
  363.     border: 1px solid #ccc;
  364.   }
  365. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址