☰

cc98.org responsive

Responsive design for cc98.org

  1. /* ==UserStyle==
  2. @name           cc98.org responsive
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.0.1
  5. @description    Responsive design for cc98.org
  6. @author         ml98
  7. @license        MIT
  8. ==/UserStyle== */
  9. @-moz-document url-prefix("https://www.cc98.org")
  10. {
  11.   @media (min-width: 0px)
  12.   {
  13.  
  14.     .main-container,
  15.     .headerWithoutImage,
  16.     .header
  17.     {
  18.       min-width: auto;
  19.     }
  20.  
  21.     .header,
  22.     .headerWithoutImage
  23.     {
  24.  
  25.       .topBarRow
  26.       {
  27.         max-width: 900px;
  28.         & > .row
  29.         {
  30.           width: 100%;
  31.           & > .topBarCC98
  32.           {
  33.             display: none;
  34.           }
  35.           & > #search
  36.           {
  37.             width: 20%;
  38.             flex-grow: 1;
  39.             & > .box
  40.             {
  41.               width: 100%;
  42.               padding: 0rem;
  43.               margin-left: 0rem;
  44.               & > .searchBoxSelect
  45.               {
  46.                 flex-shrink: 0;
  47.               }
  48.               & > #searchText
  49.               {
  50.                 width: 100%;
  51.               }
  52.               & > .searchIco
  53.               {
  54.                 margin: 6px;
  55.               }
  56.             }
  57.           }
  58.         }
  59.       }
  60.       .topBarText
  61.       {
  62.         margin-right: 0.5rem;
  63.       }
  64.  
  65.       .topBarUserName
  66.       {
  67.         display: none !important;
  68.       }
  69.       .topBarUserCenter,
  70.       .topBarUserCenter-mainPage
  71.       {
  72.         margin-left: 0;
  73.       }
  74.     }
  75.  
  76.     .main-container
  77.     {
  78.       & > .footer
  79.       {
  80.         min-width: 100% !important;
  81.       }
  82.       .footerRow {
  83.         flex-wrap: wrap;
  84.       }
  85.     }
  86.   }
  87. }
  88.  
  89. @-moz-document url("https://www.cc98.org/")
  90. {
  91.   @media (min-width: 0px)
  92.   {
  93.     .mainPage
  94.     {
  95.       min-width: auto;
  96.       width: 100%;
  97.       flex-direction: column;
  98.       align-items: center;
  99.       & > .leftPart
  100.       {
  101.         width: 90%;
  102.         margin: 1em;
  103.         & > .announcement
  104.         {
  105.           width: auto;
  106.         }
  107.         & > .recommendedReading
  108.         {
  109.           width: auto;
  110.           .recommendedReadingContent
  111.           {
  112.             height: 10em !important;
  113.             padding-bottom: 1em;
  114.             & > .column
  115.             {
  116.               .recommendedReadingButtons
  117.               {
  118.                 margin-top: auto;
  119.               }
  120.               & > div
  121.               {
  122.                 white-space: normal;
  123.               }
  124.             }
  125.           }
  126.         }
  127.         & > .row
  128.         {
  129.           flex-direction: row;
  130.           & > .mainPageList
  131.           {
  132.             width: calc(50% - 1em);
  133.             & > [class^="mainPageTitle"]
  134.             {
  135.               flex-wrap: wrap;
  136.             }
  137.           }
  138.         }
  139.       }
  140.  
  141.       & > .rightPart
  142.       {
  143.         width: 90%;
  144.         flex-wrap: wrap;
  145.         flex-direction: column;
  146.         width: 90%;
  147.         flex-wrap: wrap;
  148.         height: 55em;
  149.         justify-content: flex-start;
  150.         align-content: space-around;
  151.         & > div
  152.         {
  153.           width: auto;
  154.           max-width: calc(min(240px, 45%));
  155.           margin-top: 0em !important;
  156.           margin-bottom: 1em !important;
  157.  
  158.           &:nth-child(2) img
  159.           {
  160.             width: 100% !important;
  161.             height: auto !important;
  162.           }
  163.           &:nth-last-child(-n + 3)
  164.           {
  165.             order: 0;
  166.             max-width: 180px;
  167.           }
  168.         }
  169.       }
  170.  
  171.       .announcementContent,
  172.       .recommendedReadingContent,
  173.       .mainPageListContent1,
  174.       .mainPageListContent2,
  175.       _
  176.       {
  177.         border-radius: 4px;
  178.       }
  179.     }
  180.   }
  181. }
  182.  
  183. @-moz-document url-prefix("https://www.cc98.org/topic/")
  184. {
  185.   @media (min-width: 0px)
  186.   {
  187.     .main-container
  188.     {
  189.       & > .center
  190.       {
  191.         width: calc(62.5% + 240px) !important;
  192.         & > .topicInfo-info
  193.         {
  194.           width: 100% !important;
  195.           border-radius: 6px;
  196.  
  197.           & > .topicInfo-title
  198.           {
  199.             width: 100% !important;
  200.             border-radius: 6px;
  201.  
  202.             & > .column
  203.             {
  204.               width: 100% !important;
  205.               & > .row
  206.               {
  207.                 flex-wrap: wrap;
  208.               }
  209.             }
  210.             & > .topicInfo-boardMessage
  211.             {
  212.               display: none;
  213.             }
  214.           }
  215.  
  216.           .topicInfo-ads
  217.           {
  218.             display: none;
  219.           }
  220.         }
  221.  
  222.         & .center
  223.         {
  224.           width: 100% !important;
  225.         }
  226.  
  227.         /* & > .column > .row */
  228.         & .row:has( > .pagination)
  229.         {
  230.           padding-bottom: 1em;
  231.           flex-direction: row;
  232.           & > .row
  233.           {
  234.             margin-bottom: 0 !important;
  235.             & > :nth-child(-n+4) {
  236.               display: none;
  237.             }
  238.           }
  239.           & > .pagination
  240.           {
  241.             & > ul
  242.             {
  243.               margin: 0;
  244.               padding: 0;
  245.               & a
  246.               {
  247.                 margin: 0;
  248.                 border-right-width: 0;
  249.               }
  250.               & > li.page-item:first-child > a
  251.               {
  252.                 border-top-left-radius: 6px;
  253.                 border-bottom-left-radius: 6px;
  254.               }
  255.               & > li.page-item:last-child > a
  256.               {
  257.                 border-right-width: 1px;
  258.                 border-top-right-radius: 6px;
  259.                 border-bottom-right-radius: 6px;
  260.               }
  261.             }
  262.           }
  263.         }
  264.       }
  265.  
  266.       .reply
  267.       {
  268.         width: 100% !important;
  269.         border-radius: 6px;
  270.         flex-direction: column;
  271.         border: none;
  272.         box-shadow: 0 0 3px #0003;
  273.  
  274.         & > .userMessage
  275.         {
  276.           width: 100% !important;
  277.           border-radius: 6px 6px 0 0;
  278.           display: flex;
  279.           flex-direction: row-reverse !important;
  280.           align-items: center;
  281.           padding-top: 0.5rem;
  282.           padding-bottom: 0.5rem;
  283.  
  284.           & > .userMessage-left
  285.           {
  286.             width: 100%;
  287.             padding-top: 0em !important;
  288.             padding-right: 1em !important;
  289.             & > .column
  290.             {
  291.               width: auto !important;
  292.               flex-direction: row !important;
  293.               padding-left: 0 !important;
  294.               margin-top: 0.5rem !important;
  295.               & > .userMessageOpt
  296.               {
  297.                 padding-right: 1rem;
  298.               }
  299.             }
  300.  
  301.             & > .userMessage-userName
  302.             {
  303.               margin-left: 0;
  304.               margin-right: auto;
  305.               text-align: left !important;
  306.             }
  307.  
  308.             & > div:has( > .userMessageAnonymous)
  309.             {
  310.               flex-direction: row !important;
  311.               & > :first-child
  312.               {
  313.                 margin-top: 0 !important;
  314.               }
  315.               & > .userMessageAnonymous
  316.               {
  317.                 margin-top: 0 !important;
  318.               }
  319.             }
  320.           }
  321.  
  322.           & > .userMessage-right
  323.           {
  324.             width: 4rem;
  325.             flex-direction: row !important;
  326.             padding-left: 1rem !important;
  327.             & > .userMessageBtn
  328.             {
  329.               margin-top: 0;
  330.               margin-left: 10em;
  331.               align-items: flex-start;
  332.             }
  333.             & > div > div .userPortrait
  334.             {
  335.               width: 4em;
  336.               height: 4em;
  337.             }
  338.           }
  339.         }
  340.  
  341.         & > div:last-child
  342.         {
  343.           position: absolute;
  344.           top: 6rem;
  345.           align-self: flex-end;
  346.         }
  347.         & .reply-floor,
  348.         .reply-floor-lz
  349.         {
  350.           top: 0rem;
  351.           right: -20px !important;
  352.         }
  353.  
  354.         & > .column
  355.         {
  356.           width: 100% !important;
  357.           & > .reply-content > .substance
  358.           {
  359.             width: auto;
  360.             margin-right: 1.5rem;
  361.             & > article
  362.             {
  363.               & iframe[src*="bilibili.com"]
  364.               {
  365.                 width: 480px;
  366.                 height: 270px;
  367.               }
  368.             }
  369.             & > .markdown-container {
  370.               max-width: none;
  371.             }
  372.           }
  373.  
  374.           & > .column
  375.           {
  376.             width: auto !important;
  377.  
  378.             & > .comment1
  379.             {
  380.               flex-wrap: wrap;
  381.               & > div
  382.               {
  383.                 width: auto !important;
  384.               }
  385.               & > div:last-child
  386.               {
  387.                 margin-left: auto;
  388.               }
  389.               & > .row
  390.               {
  391.                 margin-right: 1.2rem;
  392.               }
  393.             }
  394.  
  395.             & > .row > .signature
  396.             {
  397.               display: none;
  398.             }
  399.  
  400.             & > .good
  401.             {
  402.               width: auto !important;
  403.             }
  404.           }
  405.         }
  406.       }
  407.     }
  408.   }
  409.   @media (max-width: 800px)
  410.   {
  411.     .main-container
  412.     {
  413.       & > .center
  414.       {
  415.         width: calc(100% - 60px) !important;
  416.       }
  417.     }
  418.   }
  419. }
  420.  
  421. @-moz-document url-prefix("https://www.cc98.org/editor/"),
  422. url-prefix("https://www.cc98.org/topic/")
  423. {
  424.   @media (min-width: 0px)
  425.   {
  426.     .createTopic
  427.     {
  428.       width: 96%;
  429.     }
  430.     .createTopic,
  431.     #sendTopicInfo
  432.     {
  433.       & .ubb-editor
  434.       {
  435.         border-radius: 6px;
  436.         & > textarea
  437.         {
  438.           border-bottom-left-radius: 6px;
  439.           border-bottom-right-radius: 6px;
  440.         }
  441.         & > .ubb-buttons
  442.         {
  443.           flex-wrap: wrap;
  444.           & > .ubb-button
  445.           {
  446.             margin: 0;
  447.             border-radius: 6px;
  448.           }
  449.         }
  450.       }
  451.       & .react-mde
  452.       {
  453.         border-radius: 6px;
  454.         & > .mde-header
  455.         {
  456.           border-top-left-radius: 6px;
  457.           border-top-right-radius: 6px;
  458.         }
  459.         & > .grip
  460.         {
  461.           border-bottom-left-radius: 6px;
  462.           border-bottom-right-radius: 6px;
  463.         }
  464.       }
  465.     }
  466.   }
  467. }
  468.  
  469. @-moz-document url-prefix("https://www.cc98.org/user")
  470. {
  471.   @media (min-width: 0px)
  472.   {
  473.     .main-container
  474.     {
  475.       & > .user-center
  476.       {
  477.         width: 96%;
  478.         min-width: auto;
  479.         & > .user-center-content
  480.         {
  481.           width: 100% !important;
  482.           & > .user-center-body
  483.           {
  484.             flex-direction: column;
  485.             & > .user-center-router
  486.             {
  487.               width: auto !important;
  488.               border-radius: 6px;
  489.               padding: 2em;
  490.               & > .user-center-exact
  491.               {
  492.                 & > .user-avatar
  493.                 {
  494.                   align-items: flex-start;
  495.                   width: 100%;
  496.                   height: 20px;
  497.                   & > img
  498.                   {
  499.                     width: 10%;
  500.                     height: auto;
  501.                     margin-left: 25%;
  502.                     border-radius: 50%;
  503.                   }
  504.                 }
  505.  
  506.                 & > .user-profile
  507.                 {
  508.                   padding: 0;
  509.                   & > #userId > #userId
  510.                   {
  511.                     flex-wrap: wrap;
  512.                     & > p
  513.                     {
  514.                       width: 100%;
  515.                     }
  516.                   }
  517.                 }
  518.               }
  519.             }
  520.  
  521.             & > .user-center-navigation
  522.             {
  523.               width: auto !important;
  524.               height: auto;
  525.               border-radius: 6px;
  526.               padding: 1em;
  527.               & > ul
  528.               {
  529.                 & > li
  530.                 {
  531.                   display: inline;
  532.                   padding: 1em;
  533.                   line-height: 2;
  534.                 }
  535.                 & > hr
  536.                 {
  537.                   display: none;
  538.                 }
  539.               }
  540.             }
  541.           }
  542.         }
  543.       }
  544.     }
  545.   }
  546. }
  547.  
  548. @-moz-document url-prefix("https://www.cc98.org/message")
  549. {
  550.   @media (min-width: 0px)
  551.   {
  552.     .main-container
  553.     {
  554.       .message-root
  555.       {
  556.         width: 96%;
  557.         min-width: auto;
  558.         & > .message
  559.         {
  560.           width: 100% !important;
  561.           & > .message-content
  562.           {
  563.             flex-direction: column;
  564.             & > .message-right
  565.             {
  566.               width: auto !important;
  567.               border-radius: 6px;
  568.               margin-top: 1em;
  569.               & > .message-response,
  570.               & > .message-system
  571.               {
  572.                 border-radius: 6px;
  573.                 & .message-response-box-middle
  574.                 {
  575.                   flex-shrink: unset;
  576.                   & .message-response-box-middle-content
  577.                   {
  578.                     height: auto;
  579.                   }
  580.                 }
  581.                 & > div:last-child
  582.                 {
  583.                   border-bottom: none;
  584.                 }
  585.               }
  586.             }
  587.             & > .message-message
  588.             {
  589.               height: auto;
  590.               margin-top: 1em;
  591.               flex-direction: column;
  592.               & > .message-message-people
  593.               {
  594.                 width: auto !important;
  595.                 & > .message-message-pTitle
  596.                 {
  597.                   border-radius: 6px 6px 0 0;
  598.                   height: auto;
  599.                   padding: 1em;
  600.                 }
  601.                 & > .message-message-pList
  602.                 {
  603.                   flex-direction: row;
  604.                 }
  605.               }
  606.               & > .message-message-window
  607.               {
  608.                 height: 100%;
  609.                 border-radius: 0 0 6px 6px;
  610.                 & .message-message-wContent
  611.                 {
  612.                   flex-basis: 50vh;
  613.                   flex-shrink: 0;
  614.                   & .message-message-wcReceiver
  615.                   {
  616.                     padding: 10px;
  617.                     & > a > img
  618.                     {
  619.                       padding: 0;
  620.                       margin: 0;
  621.                     }
  622.                     & > .message-message-wcContent
  623.                     {
  624.                       margin: 0;
  625.                       margin-left: 10px;
  626.                       &:before
  627.                       {
  628.                         left: 55px;
  629.                       }
  630.                       &:after
  631.                       {
  632.                         left: 59px;
  633.                       }
  634.                     }
  635.                   }
  636.                   & .message-message-wcSender
  637.                   {
  638.                     padding: 10px;
  639.                     & > a > img
  640.                     {
  641.                       padding: 0;
  642.                       margin: 0;
  643.                     }
  644.                     & > .message-message-wcContent
  645.                     {
  646.                       margin: 0;
  647.                       margin-right: 10px;
  648.                       &:before
  649.                       {
  650.                         right: 55px;
  651.                       }
  652.                       &:after
  653.                       {
  654.                         right: 59px;
  655.                       }
  656.                     }
  657.                   }
  658.                 }
  659.                 & .message-message-wPost
  660.                 {
  661.                   border-radius: 0 0 6px 6px;
  662.                   background: none;
  663.                   & > .message-message-wPostArea
  664.                   {
  665.                     width: auto;
  666.                     height: 6em;
  667.                     flex-basis: unset;
  668.                     background: none;
  669.                   }
  670.                   & > .message-message-wPostBtn
  671.                   {
  672.                     margin: auto;
  673.                     margin-bottom: 10px;
  674.                   }
  675.                 }
  676.               }
  677.             }
  678.  
  679.             & > .message-nav
  680.             {
  681.               width: auto;
  682.               height: auto;
  683.               margin: 0;
  684.               border-radius: 6px;
  685.               flex-direction: row;
  686.  
  687.               & > a > div
  688.               {
  689.                 padding: 1em;
  690.                 line-height: 1;
  691.               }
  692.               & > hr
  693.               {
  694.                 display: none;
  695.               }
  696.             }
  697.           }
  698.         }
  699.       }
  700.     }
  701.   }
  702. }
  703.  
  704. @-moz-document url-prefix("https://www.cc98.org/newTopics"),
  705. url-prefix("https://www.cc98.org/focus"),
  706. url-prefix("https://www.cc98.org/recommendedTopics"),
  707. url-prefix("https://www.cc98.org/search"), url-prefix("https://www.cc98.org/topic/hot-")
  708. {
  709.   @media (min-width: 0px)
  710.   {
  711.     .main-container
  712.     {
  713.       & > .focus-root
  714.       {
  715.         width: calc(37.5% + 480px);
  716.         & > .focus
  717.         {
  718.           width: 100%;
  719.  
  720.           .focus-board-area
  721.           {
  722.             & > .focus-boardTip
  723.             {
  724.               display: none;
  725.             }
  726.           }
  727.  
  728.           .focus-topic
  729.           {
  730.             width: 100%;
  731.             margin-top: 2px;
  732.  
  733.             & > .focus-topic-left
  734.             {
  735.               flex-direction: column;
  736.               flex-basis: 100px;
  737.               width: 100px;
  738.               align-items: center;
  739.  
  740.               & > .focus-topic-portraitUrl
  741.               {
  742.                 width: 48px;
  743.                 height: 48px;
  744.                 flex-shrink: 0;
  745.               }
  746.               & > .focus-topic-userName
  747.               {
  748.                 margin-right: 0;
  749.                 font-size: 12px;
  750.                 line-height: 1;
  751.                 height: 100%;
  752.                 text-align: center;
  753.               }
  754.             }
  755.  
  756.             & > .focus-topic-middle
  757.             {
  758.               flex-basis: 0;
  759.               overflow: hidden;
  760.               justify-content: space-around;
  761.  
  762.               .focus-topic-title
  763.               {
  764.                 width: fit-content;
  765.                 min-width: 10px;
  766.                 height: auto;
  767.                 min-height: 10px;
  768.                 white-space: initial;
  769.                 margin: 10px;
  770.                 margin-bottom: 0;
  771.               }
  772.  
  773.               .focus-topic-info
  774.               {
  775.                 margin: 10px;
  776.               }
  777.             }
  778.  
  779.             & > .focus-topic-rightBar
  780.             {
  781.               height: auto;
  782.               margin-top: 0;
  783.               border-left-color: #79b8caa9;
  784.             }
  785.  
  786.             .focus-topic-right
  787.             {
  788.               height: auto;
  789.               flex-basis: 2em;
  790.             }
  791.           }
  792.         }
  793.       }
  794.     }
  795.   }
  796.   @media (max-width: 800px)
  797.   {
  798.     .main-container
  799.     {
  800.       & > .focus-root
  801.       {
  802.         width: calc(100% - 20px);
  803.       }
  804.     }
  805.   }
  806. }
  807.  
  808. @-moz-document url-prefix("https://www.cc98.org/boardList")
  809. {
  810.   @media (min-width: 0px)
  811.   {
  812.     .main-container
  813.     {
  814.       & > .row
  815.       {
  816.         width: 100% !important;
  817.         & > .boardList
  818.         {
  819.           padding: 0 2em 0 2em;
  820.           width: 100% !important;
  821.           & > .anArea
  822.           {
  823.             margin-bottom: 1em;
  824.             border-radius: 12px;
  825.             width: 100% !important;
  826.             .boardContent
  827.             {
  828.               width: auto !important;
  829.             }
  830.             .noImgBoardContent
  831.             {
  832.               width: 25%;
  833.             }
  834.             .boardListHead
  835.             {
  836.               border-radius: 6px 6px 0 0;
  837.             }
  838.             .boardListHead:has( + .hiddenContent[ style*="none"])
  839.             {
  840.               border-radius: 6px;
  841.             }
  842.           }
  843.         }
  844.       }
  845.     }
  846.   }
  847. }
  848.  
  849. @-moz-document url-prefix("https://www.cc98.org/board/")
  850. {
  851.   @media (min-width: 0px)
  852.   {
  853.     .main-container
  854.     {
  855.       & > .board-body
  856.       {
  857.         width: 96%;
  858.         & > .board-head-body
  859.         {
  860.           .ant-collapse-header > .row
  861.           {
  862.             height: auto !important;
  863.             flex-wrap: wrap;
  864.             & > .row
  865.             {
  866.               justify-content: unset !important;
  867.               & > .column
  868.               {
  869.                 flex-direction: row;
  870.               }
  871.             }
  872.           }
  873.  
  874.           & > .board-head-bar > div:nth-child(2)
  875.           {
  876.             display: none;
  877.           }
  878.         }
  879.         & > .board-postItem-head
  880.         {
  881.           border-radius: 6px 6px 0 0;
  882.           & > .board-postItem-head-right
  883.           {
  884.             width: calc(max(40%, 15em));
  885.             justify-content: space-between;
  886.             & > div
  887.             {
  888.               width: auto;
  889.               margin: auto;
  890.             }
  891.           }
  892.         }
  893.         & > .board-list-body
  894.         {
  895.           border-radius: 0 0 6px 6px;
  896.           & > .board-postItem-body
  897.           {
  898.             &:last-child
  899.             {
  900.               border-radius: 0 0 6px 6px;
  901.             }
  902.             & > .board-postItem-right
  903.             {
  904.               width: calc(max(40%, 15em));
  905.               flex-wrap: wrap;
  906.               flex-shrink: 0;
  907.               justify-content: space-between;
  908.               & > .board-postItem-userName
  909.               {
  910.                 width: auto;
  911.               }
  912.               & > .board-postItem-tags
  913.               {
  914.                 width: auto;
  915.                 & > .board-postItem-tag
  916.                 {
  917.                   width: auto;
  918.                   & > span
  919.                   {
  920.                     width: 3.2em !important;
  921.                   }
  922.                 }
  923.               }
  924.               & > a:last-child
  925.               {
  926.                 & > div
  927.                 {
  928.                   white-space: normal;
  929.                   width: auto;
  930.                   & > span {}
  931.                 }
  932.               }
  933.             }
  934.           }
  935.         }
  936.       }
  937.     }
  938.  
  939.     .ant-modal
  940.     {
  941.       max-width: calc(100vw - 32px);
  942.     }
  943.   }
  944. }
  945.  
  946. @-moz-document url-prefix("https://www.cc98.org/signin")
  947. {
  948.   @media (min-width: 0px)
  949.   {
  950.     .main-container
  951.     {
  952.       & > .sign-in
  953.       {
  954.         width: calc(100% - 80px);
  955.         border-radius: 12px;
  956.       }
  957.     }
  958.   }
  959. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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