☰

Material-CC98

Material Design风格的样式微调，借鉴了Material UI组件库

  1. /* ==UserStyle==
  2. @name         Material-CC98
  3. @namespace    github.com/CoolSpring8/userscript
  4. @version      0.1.2
  5. @description  Material Design风格的样式微调，借鉴了Material UI组件库
  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(98, 150, 211);
  13.     --color-main-transparent: rgba(235, 249, 251, 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 */
  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.   .topBarLogo,
  90.   .topBarCC98,
  91.   .topBarText,
  92.   .topBarUserName {
  93.     filter: invert(1);
  94.   }
  95.  
  96.   .topBarUserImg {
  97.     display: none;
  98.   }
  99.  
  100.   .topBarUserName {
  101.     font-size: 0;
  102.   }
  103.  
  104.   .topBarUserName::after {
  105.     font-size: 1rem;
  106.     content: "My CC98";
  107.   }
  108.  
  109.   .topBarUserCenter {
  110.     margin-left: 3rem;
  111.   }
  112.  
  113.   .topBarBell {
  114.     color: #000;
  115.     background-color: #fff;
  116.   }
  117. }
  118.  
  119. @-moz-document url("https://www.cc98.org/")
  120. {
  121.   .topBar-mainPage {
  122.     position: fixed;
  123.     top: 0;
  124.     background-color: var(--color-main-transparent);
  125.     backdrop-filter: saturate(180%) blur(5px);
  126.   }
  127.  
  128.   .announcementContent,
  129.   .recommendedReadingContent,
  130.   .mainPageListContent1,
  131.   .mainPageListContent2 {
  132.     border-width: 8px 0 0 0;
  133.   }
  134.  
  135.   .announcementContent,
  136.   .recommendedReadingContent,
  137.   .mainPageListContent1,
  138.   .mainPageListContent2,
  139.   .recommendedFunctionContent,
  140.   .schoolNewsContent,
  141.   .mainPageCountContent,
  142.   .ubb-editor,
  143.   .user-center-navigation,
  144.   .user-center-router {
  145.     border-radius: 4px;
  146.     box-shadow: var(--box-shadow-card);
  147.   }
  148.  
  149.   /* 粗略对齐“推荐阅读”与“推荐功能”底部高度 */
  150.   .recommendedFunctionContent {
  151.     height: 20.5rem;
  152.   }
  153.  
  154.   /* 对齐“学习园地”与“论坛统计”底部高度 */
  155.   .mainPageCountContent {
  156.     height: 11.25rem;
  157.   }
  158.  
  159.   /* 左对齐标题与卡片 */
  160.   .mainPageTitle1,
  161.   .mainPageTitle2 {
  162.     padding-left: 0;
  163.   }
  164.  
  165.   .topBarMessageDetails-mainPage > ul,
  166.   .topBarUserCenter-mainPage > ul {
  167.     border-radius: 0 0 4px 4px;
  168.     box-shadow: var(--box-shadow-card);
  169.   }
  170. }
  171.  
  172. @-moz-document url-prefix("https://www.cc98.org/newTopics"),
  173. url-prefix("https://www.cc98.org/focus"),
  174. url-prefix("https://www.cc98.org/search")
  175. {
  176.   .focus-topic .focus-topic-left .focus-topic-userName {
  177.     font-size: 15px;
  178.   }
  179.  
  180.   .focus-topic-topicArea {
  181.     border-radius: 4px;
  182.     box-shadow: var(--box-shadow-card);
  183.   }
  184.  
  185.   .focus-topic {
  186.     margin-top: 0;
  187.     border-top: var(--color-divider) solid 1px;
  188.     border-bottom: none;
  189.     border-left: none;
  190.     border-right: none;
  191.   }
  192.  
  193.   .focus-topic:first-child {
  194.     border-radius: 4px 4px 0 0;
  195.   }
  196.  
  197.   /* 重置“回到顶部”按钮大小 */
  198.   #scrollToTop {
  199.     width: unset;
  200.     height: unset;
  201.   }
  202. }
  203.  
  204. @-moz-document url-prefix("https://www.cc98.org/topic/")
  205. {
  206.   .topicInfo-info {
  207.     border: none;
  208.     border-radius: 4px;
  209.     background-color: #fff;
  210.     box-shadow: var(--box-shadow-card);
  211.   }
  212.  
  213.   .topicInfo-title {
  214.     border-radius: 4px;
  215.   }
  216.  
  217.   /* 让广告占满卡片右边小半部分 */
  218.   .topicInfo-ads img {
  219.     width: 19rem !important;
  220.     height: 6.5rem !important;
  221.     border-radius: 0 4px 4px 0;
  222.   }
  223.  
  224.   .page-goto > div > a {
  225.     border-radius: 4px;
  226.   }
  227.   .page-goto > div > a:hover {
  228.     background-color: rgba(0, 0, 0, 0.04);
  229.   }
  230.  
  231.   /* 对齐分页与面包屑导航的高度 */
  232.   ul.page-nav,
  233.   .page-goto {
  234.     margin-bottom: 1em;
  235.   }
  236.  
  237.   .followTopic,
  238.   .operation1,
  239.   .replierBtn {
  240.     border-radius: 4px;
  241.   }
  242.  
  243.   .followTopic:hover,
  244.   .operation1:hover {
  245.     background-color: rgba(0, 0, 0, 0.04);
  246.   }
  247.  
  248.   /* 为了避免页面内容覆盖顶端栏的一个dirty hack。然而没有解决.ubb-image-toolbox的问题 */
  249.   .userMessage-right div[style="z-index: 100;"],
  250.   .photoFrame > img {
  251.     z-index: auto !important;
  252.   }
  253.   .userGender {
  254.     z-index: auto;
  255.   }
  256.  
  257.   .userMessage {
  258.     border-radius: 4px 0 0 4px;
  259.   }
  260.  
  261.   .userMessage-userName,
  262.   .userMessage-left > div:not(.column) > div:first-child {
  263.     font-weight: normal !important;
  264.   }
  265.  
  266.   .reply {
  267.     margin-top: 12px;
  268.     border: none;
  269.     border-radius: 4px;
  270.     box-shadow: var(--box-shadow-card-light);
  271.   }
  272.  
  273.   .reply .reply-floor,
  274.   .reply .reply-floor-lz {
  275.     box-shadow: var(--box-shadow-floating-action-button-light);
  276.   }
  277.  
  278.   img[src^="/static/images/ac/"],
  279.   img[src^="/static/images/ms/"],
  280.   img[src^="/static/images/em/"],
  281.   img[src^="/static/images/CC98/"] {
  282.     width: 3rem;
  283.     height: auto;
  284.     margin-bottom: 1rem;
  285.   }
  286. }
  287.  
  288. @-moz-document url-prefix("https://www.cc98.org/boardList")
  289. {
  290.   .anArea > .column {
  291.     border: none !important;
  292.     border-radius: 4px;
  293.     box-shadow: var(--box-shadow-card);
  294.   }
  295.  
  296.   .boardListHead {
  297.     border-radius: 4px 4px 0 0;
  298.   }
  299.  
  300.   .expendBoardList {
  301.     border-radius: 4px;
  302.   }
  303.  
  304.   .expendBoardList:hover {
  305.     background-color: rgba(0, 0, 0, 0.04);
  306.   }
  307. }
  308.  
  309. @-moz-document url-prefix("https://www.cc98.org/board/")
  310. {
  311.   .board-list-body {
  312.     border: none;
  313.   }
  314.  
  315.   .board-list-body,
  316.   .ant-collapse-item {
  317.     border-radius: 4px;
  318.     box-shadow: var(--box-shadow-card);
  319.   }
  320.  
  321.   .ant-pagination-item {
  322.     margin: 0;
  323.     min-width: 48px;
  324.     box-sizing: border-box;
  325.   }
  326. }
  327.  
  328. @-moz-document url-prefix("https://www.cc98.org/usercenter"),
  329. url-prefix("https://www.cc98.org/user/")
  330. {
  331.   .user-center-navigation,
  332.   .user-center-router {
  333.     border-radius: 4px;
  334.     box-shadow: var(--box-shadow-card);
  335.   }
  336.  
  337.   .user-center-body .user-center-navigation,
  338.   .user-center-body .user-center-router {
  339.     border: none;
  340.   }
  341. }
  342.  
  343. @-moz-document url-prefix("https://www.cc98.org/message/")
  344. {
  345.   .message-nav,
  346.   .message-response,
  347.   .message-system,
  348.   .message-message,
  349.   .message-setting {
  350.     border: none;
  351.     border-radius: 4px;
  352.     box-shadow: var(--box-shadow-card);
  353.   }
  354.  
  355.   .message-message-pList {
  356.     border-radius: 4px 0 0 4px;
  357.   }
  358.  
  359.   .message-message-window {
  360.     border-radius: 0 4px 4px 0;
  361.   }
  362.  
  363.   .message-message-people {
  364.     border-top: none;
  365.     border-bottom: none;
  366.     border-left: none;
  367.   }
  368.  
  369.   .message-message-window .message-message-wContent {
  370.     border-right: none;
  371.   }
  372.  
  373.   .message-message-window .message-message-wHeader,
  374.   .message-message-window .message-message-wPost {
  375.     border: none;
  376.   }
  377.  
  378.   .message-message-people .message-message-pTitle {
  379.     border-radius: 4px 0 0 0;
  380.   }
  381.  
  382.   .message-message-wReport {
  383.     border-radius: 0 4px 0 0;
  384.   }
  385. }
  386.  
  387. @-moz-document url-prefix("https://www.cc98.org/signin")
  388. {
  389.   .sign-in {
  390.     border-radius: 4px;
  391.     box-shadow: var(--box-shadow-card);
  392.   }
  393.   .ubb-editor {
  394.     border: 1px solid #ccc;
  395.   }
  396. }