API tools faq
paste
Riyyi

4chan Material Design

Riyyi
Oct 28th, 2018
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.04 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. Edited by zcyzcy88
  3. Fork from https://userstyles.org/styles/126278
  4. Fix some bugs
  5. */
  6.  
  7. @-moz-document domain("boards.4chan.org")
  8. {
  9.     /* Font */
  10.     @  font-face
  11.   {
  12.     font-family: 'Roboto';
  13.     src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  14.     unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
  15.   }
  16.     @  font-face
  17.   {
  18.     font-family: 'Roboto';
  19.     src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  20.     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
  21.   }
  22.     /* md2016.css */
  23.   body
  24.   {
  25.     background: #f5f5f5;
  26.     color: #000;
  27.     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  28.     font-size: 14px;
  29.     font-weight: 400;
  30.     line-height: 20px;
  31.     padding: 0;
  32.     margin: 0;
  33.   }
  34.  
  35.   .board
  36.   {
  37.     background: #e5e5e5;
  38.     border-top: 1px solid #ccc;
  39.     margin-bottom: 50px;
  40.     padding-bottom: 25px;
  41.   }
  42.  
  43.   .is_index .board
  44.   {
  45.     padding-bottom: 50px;
  46.   }
  47.  
  48.   a, a:visited, .quoteLink, .quotelink, .deadlink, div#boardNavMobile .pageJump a, .persistentNav .pageJump a, .summary a.replylink, div.post div.postInfo span.postNum a:visited, div.post div.postInfo span.postNum a.replylink, #totop span, #tobottom span
  49.   {
  50.     color: rgb(83, 109, 254) !important;
  51.     text-decoration: none !important;
  52.   }
  53.  
  54.   a:hover, .quoteLink:hover, .quotelink:hover, .deadlink:hover, .summary a.replylink:hover, .persistentNav .pageJump a:hover, div#boardNavMobile .pageJump a:hover, div.post div.postInfo span.postNum a:hover, .posteruid .hand:hover, #totop span:hover, #tobottom span:hover
  55.   {
  56.     color: rgb(83, 109, 254) !important;
  57.     text-decoration: underline !important;
  58.   }
  59.  
  60.   .postInfo a.postMenuBtn, .postInfo a.postMenuBtn:hover
  61.   {
  62.     color: rgb(83, 109, 254) !important;
  63.     text-decoration: none !important;
  64.   }
  65.  
  66.   div.postContainer
  67.   {
  68.     display: block;
  69.     width: 80%;
  70.     margin: 15px auto 0 auto;
  71.   }
  72.  
  73.   .image-expanded
  74.   {
  75.     display: block !important;
  76.   }
  77.  
  78.   .thread
  79.   {
  80.     margin-top: 30px !important;
  81.     padding-top: 15px;
  82.     border-top: 1px solid #ccc;
  83.   }
  84.  
  85.   .thread:first-child
  86.   {
  87.     padding-top: 0;
  88.     border-top: none;
  89.   }
  90.  
  91.   .md-plus-btn
  92.   {
  93.     border-radius: 50%;
  94.     font-size: 24px;
  95.     height: 56px;
  96.     margin: auto;
  97.     min-width: 56px;
  98.     width: 56px;
  99.     padding: 0;
  100.     overflow: hidden;
  101.     box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  102.     line-height: normal;
  103.     position: fixed;
  104.     right: 25px;
  105.     bottom: 25px;
  106.   }
  107.  
  108.   div.boardBanner > div.boardTitle
  109.   {
  110.     margin-top: 40px;
  111.     font-size: 36px;
  112.     color: #676767;
  113.     margin-bottom: 40px;
  114.     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  115.     font-weight: normal;
  116.     letter-spacing: 0;
  117.   }
  118.  
  119.   :-ms-input-placeholder
  120.   {
  121.     color: rgba(0, 0, 0, .35);
  122.   }
  123.  
  124.   ::-webkit-input-placeholder
  125.   {
  126.     color: rgba(0, 0, 0, .35);
  127.   }
  128.  
  129.   :-moz-placeholder
  130.   {
  131.     color: rgba(0, 0, 0, .35);
  132.   }
  133.  
  134.   ::-moz-placeholder
  135.   {
  136.     color: rgba(0, 0, 0, .35);
  137.   }
  138.  
  139.   #togglePostFormLink, .ad-plea, #blotter tfoot td, #ctrl-top, div.post div.postInfo span.postNum, div.pagelist div.pages
  140.   {
  141.     color: transparent;
  142.   }
  143.  
  144.   table.postForm > tbody > tr > td:first-child, .thread-stats
  145.   {
  146.     color: #000;
  147.   }
  148.  
  149.   .postInfo .backlink a.quotelink, .postInfo .backlink a.quotelink:hover
  150.   {
  151.     color: rgb(83, 109, 254) !important;
  152.   }
  153.  
  154.   input[type="text"]
  155.   {
  156.     border: none !important;
  157.     border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
  158.     font-size: 14px !important;
  159.     font-family: "Helvetica", "Arial", sans-serif;
  160.     padding: 4px !important;
  161.     -webkit-transition: border-bottom-color 0.2s;
  162.     transition: border-bottom-color 0.2s;
  163.   }
  164.  
  165.   input[type="text"]:focus, #quickReply input[type="submit"]:focus
  166.   {
  167.     border: 0 !important;
  168.     border-bottom: 1px solid rgb(83, 109, 254) !important;
  169.   }
  170.  
  171.   .tomorrow .extPanel, .recaptcha_input_area #recaptcha_response_field
  172.   {
  173.     border: 0 !important;
  174.   }
  175.  
  176.   input[type="submit"], button
  177.   {
  178.     border: none;
  179.     border-radius: 2px;
  180.     position: relative;
  181.     height: 28px;
  182.     min-width: 64px;
  183.     display: inline-block;
  184.     text-transform: uppercase;
  185.     outline: none;
  186.     cursor: pointer;
  187.     background: rgb(83, 109, 254);
  188.     color: #fff;
  189.     font-size: 14px;
  190.     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  191.     line-height: 28px;
  192.     margin-left: 8px;
  193.   }
  194.  
  195.   #qrCaptchaContainerAlt
  196.   {
  197.     margin-bottom: 8px;
  198.   }
  199.  
  200.   #postForm input[type="text"]
  201.   {
  202.     margin: 4px 0;
  203.   }
  204.  
  205.   #postForm td:first-child
  206.   {
  207.     text-align: right;
  208.     padding-right: 10px;
  209.   }
  210.  
  211.   textarea
  212.   {
  213.     border: 0 !important;
  214.   }
  215.  
  216.   textarea:focus
  217.   {
  218.     border: 0 !important;
  219.   }
  220.  
  221.   table#postForm td
  222.   {
  223.     background: transparent;
  224.     border: 0;
  225.     font-weight: normal;
  226.   }
  227.  
  228.   #toggleMsgBtn
  229.   {
  230.     margin-left: 5px !important;
  231.   }
  232.  
  233.   .rules
  234.   {
  235.     text-align: center;
  236.   }
  237.  
  238.   #qrHeader
  239.   {
  240.     background: #676767 !important;
  241.     color: #fff !important;
  242.   }
  243.  
  244.   #qrHeader a
  245.   {
  246.     color: #fff !important;
  247.   }
  248.  
  249.   #search-box
  250.   {
  251.     height: inherit;
  252.     line-height: inherit;
  253.     margin: 0;
  254.     padding: inherit;
  255.   }
  256.  
  257.   #ctrl-top
  258.   {
  259.     padding-bottom: 10px;
  260.     border-top: 1px solid #ddd;
  261.     padding-top: 10px;
  262.     text-align: center;
  263.   }
  264.  
  265.   .reply:target, .reply.highlight
  266.   {
  267.     background: #eee !important;
  268.     padding: 10px !important;
  269.     border: 0 !important;
  270.   }
  271.  
  272.   .navLinks + hr, .open-qr-wrap, .board hr, #bannerCnt, #ctrl-top + hr, #ctrl-top > hr
  273.   {
  274.     display: none;
  275.   }
  276.  
  277.   .navLinks
  278.   {
  279.     padding-bottom: 8px;
  280.     color: transparent;
  281.     width: 80%;
  282.     margin: auto;
  283.   }
  284.  
  285.   .navLinks label
  286.   {
  287.     color: rgb(83, 109, 254);
  288.   }
  289.  
  290.   .navLinks label + span
  291.   {
  292.     color: #000;
  293.   }
  294.  
  295.   .navLinksBot
  296.   {
  297.     margin-top: 30px;
  298.     text-align: left;
  299.   }
  300.  
  301.   div#boardNavDesktop, div#boardNavDesktopFoot, div#boardNavMobile
  302.   {
  303.     background: #fff;
  304.     padding: 5px 10px;
  305.     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .08), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .04);
  306.     margin-bottom: 25px;
  307.     color: transparent;
  308.     font-size: 14px;
  309.   }
  310.  
  311.   div#boardNavMobile
  312.   {
  313.     color: #000;
  314.     border: 0;
  315.   }
  316.  
  317.   div#boardNavDesktopFoot
  318.   {
  319.     margin-bottom: 0;
  320.     margin-top: 25px;
  321.     padding-top: 25px;
  322.     padding-bottom: 25px;
  323.   }
  324.  
  325.   div#boardNavDesktop a, div#boardNavDesktopFoot a
  326.   {
  327.     margin-left: -3px;
  328.     margin-right: -3px;
  329.     padding: 0;
  330.   }
  331.  
  332.   .persistentNav .pageJump a
  333.   {
  334.     margin: 0;
  335.     padding-right: 5px;
  336.   }
  337.  
  338.   div.pagelist
  339.   {
  340.     background: #fff;
  341.     margin-top: 25px;
  342.     margin-bottom: 25px;
  343.     border: 0;
  344.     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  345.     margin-left: 25px;
  346.     padding: 8px;
  347.     border-radius: 2px;
  348.   }
  349.  
  350.   div#absbot
  351.   {
  352.     background: #fff;
  353.     color: #999;
  354.   }
  355.  
  356.   div#absbot #footer-links a
  357.   {
  358.     text-decoration: none !important;
  359.     color: rgb(83, 109, 254) !important;
  360.   }
  361.  
  362.   div#absbot #footer-links a:hover
  363.   {
  364.     text-decoration: underline !important;
  365.   }
  366.  
  367.   .bottomCtrl
  368.   {
  369.     display: none;
  370.   }
  371.  
  372.   .ad-plea-bottom + hr
  373.   {
  374.     display: none;
  375.   }
  376.  
  377.   div#boardNavDesktopFoot
  378.   {
  379.     margin-bottom: 0;
  380.   }
  381.  
  382.   div.post, .extPanel, div.reply, .dd-menu ul
  383.   {
  384.     background: #fff;
  385.     border-radius: 2px;
  386.     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  387.     border: none;
  388.   }
  389.  
  390.   div.pagelist div.cataloglink
  391.   {
  392.     border: 0;
  393.   }
  394.  
  395.   div.post
  396.   {
  397.     margin: 0;
  398.     padding: 10px;
  399.   }
  400.  
  401.   .replyContainer .post
  402.   {
  403.     margin-left: 15% !important;
  404.     width: 70%;
  405.   }
  406.  
  407.   .dd-menu li
  408.   {
  409.     padding: 6px 10px !important;
  410.     border: 0 !important;
  411.   }
  412.  
  413.   .dd-menu li:hover
  414.   {
  415.     background-color: #eee !important;
  416.   }
  417.  
  418.   #quote-preview
  419.   {
  420.     border: 0 !important;
  421.     padding: 10px !important;
  422.   }
  423.  
  424.   div.op
  425.   {
  426.     display: block;
  427.     max-width: none;
  428.   }
  429.  
  430.   .fileText
  431.   {
  432.     color: #999;
  433.     font-size: 12px;
  434.     margin-top: 2px;
  435.   }
  436.  
  437.   .op .fileText
  438.   {
  439.     margin-top: -5px;
  440.     margin-bottom: 5px;
  441.   }
  442.  
  443.   .fileText a
  444.   {
  445.     color: #999 !important;
  446.     text-decoration: none;
  447.   }
  448.  
  449.   .posteruid, .dateTime
  450.   {
  451.     color: #999;
  452.   }
  453.  
  454.   .postInfo input[type="checkbox"]
  455.   {
  456.     display: none;
  457.   }
  458.  
  459.   div.sideArrows
  460.   {
  461.     display: none;
  462.   }
  463.  
  464.   hr
  465.   {
  466.     border: 0;
  467.     border-bottom: 1px solid #ddd;
  468.   }
  469.  
  470.   div.post:after
  471.   {
  472.     display: block;
  473.     content: ' ';
  474.     clear: both;
  475.   }
  476.  
  477.   div.post div.file .fileThumb
  478.   {
  479.     float: right !important;
  480.   }
  481.  
  482.   div.post div.file .fileThumb img
  483.   {
  484.     object-fit: cover;
  485.   }
  486.  
  487.   div.reply div.file .fileThumb img:not(.expanded-thumb)
  488.   {
  489.     border-radius: 2px;
  490.     width: auto !important;
  491.     max-width: 300px !important;
  492.     max-height: 100px !important;
  493.   }
  494.  
  495.   div.op div.file .fileThumb img:not(.expanded-thumb)
  496.   {
  497.     border-radius: 2px;
  498.     width: auto !important;
  499.     max-width: 400px !important;
  500.     max-height: 200px !important;
  501.   }
  502.  
  503.   .postMessage
  504.   {
  505.     margin-left: 20px;
  506.     margin-top: 5px;
  507.   }
  508.  
  509.   #boardNavDesktop::after
  510.   {
  511.     content: ' ';
  512.     display: block;
  513.     clear: both;
  514.   }
  515.  
  516.   span.summary
  517.   {
  518.     border-radius: 0 0 2px 2px;
  519.     background-color: #f5f5f5;
  520.     width: 80%;
  521.     display: block;
  522.     margin: -1px auto 0 auto;
  523.     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  524.     border-top: 1px solid rgba(0, 0, 0, 0.1);
  525.     text-indent: 10px;
  526.     padding: 10px 0;
  527.   }
  528.     /* Fixes */
  529.   video
  530.   {
  531.     float: right !important;
  532.     max-width: 94% !important;
  533.     max-width: calc(100% - 40px) !important;
  534.   }
  535.  
  536.   input:focus, textarea:focus
  537.   {
  538.     border: 0 !important;
  539.   }
  540.  
  541.   #togglePostFormLink a::after, .navLinksBot [href="#top"]::after, #totop::after
  542.   {
  543.     background: rgb(83, 109, 254);
  544.     box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);
  545.     position: fixed;
  546.     right: 25px;
  547.     bottom: 25px;
  548.     display: inline-block;
  549.     font-size: 24px;
  550.     color: #fff;
  551.     content: '+';
  552.     width: 56px;
  553.     height: 56px;
  554.     line-height: 56px;
  555.     vertical-align: middle;
  556.     border-radius: 50%;
  557.     font-weight: normal;
  558.     text-align: center;
  559.     cursor: pointer;
  560.   }
  561.  
  562.   #togglePostFormLink a::after
  563.   {
  564.     z-index: 1;
  565.     box-shadow: none;
  566.   }
  567.  
  568.   .boardList
  569.   {
  570.     font-size: 0;
  571.   }
  572.  
  573.   .boardList a
  574.   {
  575.     font-size: 14px;
  576.     display: inline-block;
  577.     padding: 0 3px !important;
  578.     margin: 0 !important;
  579.   }
  580.  
  581.   .postMenuBtn:hover
  582.   {
  583.     text-decoration: none !important;
  584.   }
  585. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!