From infinitydev.org/kappa, 2 Years ago, written in CSS.
Embed
  1. main {
  2.     padding: 0;
  3. }
  4. main:not(.board-index) {
  5.     margin: 3em 0 0 0;
  6. }
  7.  
  8. /* Boardlist */
  9. header nav.boardlist {
  10.     overflow: hidden;
  11.     height: 16px;
  12.     display: block;
  13.     position: fixed;
  14.     width: 100%;
  15.     top: 0;
  16.     z-index: 999;
  17.     border-bottom: 1px solid rgba(52, 52, 92, 0.20);
  18.     padding: 0 5px;
  19. }
  20.     nav.boardlist .boardlist-row {
  21.         margin: 0;
  22.         display: inline;
  23.     }
  24.     nav.boardlist .boardlist-row li.boardlist-category:nth-of-type(2) {
  25.         display: none;
  26.     }
  27.     nav.boardlist .boardlist-item::after {
  28.         margin: 0 .1em;
  29.     }
  30.     .boardlist-item a[href$="infinitydev.org"],
  31.     .boardlist-item a[href$="/boards.html"],
  32.     .boardlist-item a[href$="/cp"],
  33.     .boardlist-item a[href$="/cp/boards/create"],
  34.     .boardlist-item a[href$="/cp/donate"],
  35.     .boardlist-item a[href$="/cp/adventure"],
  36.     .boardlist-item a[href$="/overboard.html"],
  37.     .boardlist-item a[href$="/contribute"] {
  38.         font-size: 0;
  39.     }
  40.     .boardlist-item a::before {
  41.         font: 9pt FontAwesome;
  42.     }
  43.         .boardlist-item a[href$="infinitydev.org"]::before {
  44.             content: "\f015";
  45.         }
  46.         .boardlist-item a[href$="/overboard.html"]::before {
  47.             content: "\f021";
  48.         }
  49.         .boardlist-item a[href$="/boards.html"]::before {
  50.             content: "\f02c";
  51.         }
  52.         .boardlist-item a[href$="/cp"]::before {
  53.             content: "\f013";
  54.         }
  55.         .boardlist-item a[href$="/cp/boards/create"]::before {
  56.             content: "\f067";
  57.         }
  58.         .boardlist-item a[href$="/contribute"]::before {
  59.             content: "\f113";
  60.         }
  61.         .boardlist-item a[href$="/cp/donate"]::before {
  62.             content: "\f155";
  63.         }
  64.         .boardlist-item a[href$="/cp/adventure"]::before {
  65.             content: "\f135";
  66.         }
  67.     .boardlist-item a:hover {
  68.         color: red !important;
  69.     }
  70.  
  71. nav.gnav {
  72.     display: none;
  73. }
  74. /**/
  75.  
  76. /* Header */
  77. figure.page-head {
  78.     margin: 3em auto 1em auto;
  79.     max-width: 480px;
  80. }
  81.     .view-board figcaption.page-details {
  82.         border-bottom: 1px solid #B7C5D9;
  83.         padding-bottom: 1em;
  84.     }
  85.         h1.page-title {
  86.             font-family: Tahoma, sans-serif;
  87.             font-size: 20pt;
  88.             color: #AF0A0F;
  89.             font-weight: bold;
  90.             letter-spacing: -2px;
  91.         }
  92.         h2.page-desc {
  93.             color: #AF0A0F;
  94.             font-size: 11px;
  95.             margin-top: -2px;
  96.         }
  97. /**/
  98.                
  99. /* Navigation Buttons */
  100. main.board-index nav.pagination {
  101.     margin: 0 15px;
  102.     border-bottom: 1px solid #B7C5D9;
  103. }
  104.     main.board-index .pagination-buttons {
  105.         float: left;
  106.         margin: 0;
  107.     }
  108.         div.pagination-buttons .pagination-button {
  109.             line-height: 1.5;
  110.             margin: 0;
  111.             padding: 2px 10px;
  112.         }
  113. main.mode-reply nav.pagination {
  114.     border-top: 1px solid #B7C5D9;
  115.     border-bottom: 1px solid #B7C5D9;
  116. }
  117.     ul.pagination-pages {
  118.         float: left;
  119.         margin: 0;
  120.     }
  121.         a.pagination-link {
  122.             padding: 4px;
  123.         }
  124. /**/
  125.  
  126. /* Post form */
  127. .mode-index section.index-form, .index-catalog section.index-form {
  128.     margin: 0 15px;
  129.     border-bottom: 1px solid #B7C5D9;
  130. }
  131.     html.js body.responsive form.form-post {
  132.         border: none;
  133.         background: none;
  134.         position: fixed;
  135.         z-index: 1000;
  136.         top: 30px;
  137.         right: 10px;
  138.         max-width: none;
  139.         margin: 0;
  140.     }
  141.     html.js body.responsive .mode-index section.index-form form.form-post, html.js body.responsive .index-catalog section.index-form form.form-post {
  142.         position: static;
  143.         margin: 0 auto;
  144.         padding: 0;
  145.         width: 100%;
  146.     }
  147.     .mode-index form.form-post, .index-catalog form.form-post {
  148.         padding: .75em;
  149.         margin: 0 1em 2em;
  150.         max-width: 100%;
  151.         box-sizing: border-box;
  152.         background: transparent;
  153.         border: none;
  154.     }
  155.         html.js body.responsive form.form-post .form-fields {
  156.             padding: 0;
  157.         }
  158.         html.js body.responsive .mode-index form.form-post fieldset.form-fields, html.js body.responsive .index-catalog form.form-post fieldset.form-fields {
  159.             border: none;
  160.             width: 428px;
  161.             padding: 0 0 1.5em;
  162.             margin-left: auto;
  163.             margin-right: auto;
  164.             border-bottom: none;
  165.         }
  166.             html.js body.responsive form.form-post .field {
  167.                 margin: 1px 0;
  168.             }
  169.             .mode-index form.form-post .field, .index-catalog form.form-post .field {
  170.                 margin-right: auto;
  171.                 margin-left: auto;
  172.             }
  173.                 html.js body.responsive form.form-post .field-control {
  174.                     padding: 2px 4px;
  175.                     border: 1px solid #AAAAAA;
  176.                 }
  177.                 .mode-index .row-subject .field-control, .mode-index .row-author .field-control, .mode-index .row-email .field-control, .index-catalog .row-subject .field-control, .index-catalog .row-author .field-control, .index-catalog .row-email .field-control {
  178.                     width: calc(100% - 90px);
  179.                 }
  180.                 html.js body.responsive .mode-reply form.form-post .row-author .field-control, html.js body.responsive .mode-reply form.form-post .row-subject .field-control, html.js body.responsive .mode-reply form.form-post .row-email .field-control {
  181.                     padding-left: 92px;
  182.                     height: 26px;
  183.                 }
  184.                 html.js body.responsive .mode-index form.form-post .row-author .field-control, html.js body.responsive .mode-index form.form-post .row-subject .field-control, html.js body.responsive .mode-index form.form-post .row-email .field-control, html.js body.responsive .index-catalog form.form-post .row-author .field-control, html.js body.responsive .index-catalog form.form-post .row-subject .field-control, html.js body.responsive .index-catalog form.form-post .row-email .field-control {
  185.                     margin-left: 90px;
  186.                     height: 26px;
  187.                 }
  188.             form.form-post .row-post {
  189.                 border: none;
  190.             }
  191.             .mode-index form.form-post .row-post, .index-catalog form.form-post .row-post {
  192.                 background: none;
  193.                 border: none;
  194.             }
  195.             .mode-reply form.form-post .row-post {
  196.                 background: none;
  197.             }
  198.                 .mode-index .row-post::before, .index-catalog .row-post::before {
  199.                     content: 'Comment *';
  200.                     background: #98E;
  201.                     padding: 2px 5px;
  202.                     color: #333 ;
  203.                     line-height: 5.2em;
  204.                     border: 1px solid #34345C;
  205.                     font-size: 10pt;
  206.                     font-weight: 700;
  207.                     position: absolute;
  208.                     box-sizing: border-box;
  209.                     width: 89px;
  210.                     height: 78px;
  211.                 }
  212.                 form.form-post .row-post #body {
  213.                     min-height: 78px !important;
  214.                     width: 100% !important;
  215.                     border: 1px solid #AAAAAA;
  216.                     resize: vertical !important;
  217.                 }
  218.                 .mode-index form.form-post .row-post #body, .index-catalog form.form-post .row-post #body {
  219.                     width: calc(100% - 90px) !important;
  220.                     padding: 4px;
  221.                     font-size: 100%;
  222.                     margin: 0 0 0 90px !important;
  223.                 }
  224.                 .mode-reply form.form-post .row-post #body {
  225.                     min-height: 108px!important;
  226.                 }
  227.             form.form-post div.row-file {
  228.                 box-sizing: border-box;
  229.                 padding: 0;
  230.                 margin: 0;
  231.                 width: auto;
  232.                 overflow: hidden;
  233.             }
  234.                 form.form-post .row-file .dz-container, form.form-post button.field-submit {
  235.                     border-bottom: 1px solid #AAAAAA;
  236.                 }
  237.             .board-index .row-email::before, .row-author::before, .row-subject::before {
  238.                 background: #98E;
  239.                 padding: 2px 5px;
  240.                 color: #333;
  241.                 line-height: 1.5em;
  242.                 border: 1px solid #34345C;
  243.                 font-size: 10pt;
  244.                 font-weight: 700;
  245.                 position: absolute;
  246.                 box-sizing: border-box;
  247.                 width: 89px;
  248.                 height: 26px;
  249.             }
  250.                 .board-index .row-email::before {
  251.                     content: 'Email';
  252.                 }
  253.                 .board-index .row-author::before {
  254.                     content: 'Author';
  255.                 }
  256.                 .board-index .row-subject::before {
  257.                     content: 'Subject';
  258.                 }
  259.             form.form-post .row-captcha {
  260.                 border: 1px solid #AAA !important;
  261.                 background: #FFF;
  262.                 width: auto;
  263.             }
  264.                 .board-index .row-captcha img.captcha {
  265.                     width: 50%;
  266.                     float: left;
  267.                     height: 59px;
  268.                     border-right: 1px solid #CCC;
  269.                 }
  270.                 .board-index form.form-post .row-captcha .captcha-loading {
  271.                     background: none;
  272.                     padding: 0;
  273.                 }
  274.                 .board-index form.form-post .row-captcha input#captcha {
  275.                     border: none;
  276.                     height: 59px;
  277.                     text-align: center;
  278.                     width: calc(50% - 2px);
  279.                     font-size: 30px;
  280.                     margin: 0;
  281.                 }
  282.                 .board-index .mode-reply form.form-post .row-captcha input#captcha {
  283.                     font-size: 22px;
  284.                 }
  285.  
  286. html.js form.form-post .form-legend, html.js form.form-post .post-menu {
  287.     display: none;
  288. }
  289.                                  
  290. html.js body.responsive form.form-post .field-control.field-capcode {
  291.     margin: 0;
  292.     height: 26px;
  293. }
  294.  
  295. .ui-wrapper {
  296.     overflow: auto !important;
  297.     background: none !important;
  298.     border: none !important;
  299.     position: initial !important;
  300.     width: auto !important;
  301.     height: auto !important;
  302.     top: auto !important;
  303.     left: auto !important;
  304.     margin: 0 !important;
  305.     padding-bottom: 0 !important;
  306. }
  307.     form.form-post .ui-resizable-handle {
  308.         display: none !important;
  309.     }
  310.                          
  311. input#email::-webkit-input-placeholder,
  312. input#subject::-webkit-input-placeholder,
  313. input#author::-webkit-input-placeholder {
  314.     font-size: 0;
  315. }
  316. input#email:-moz-placeholder,
  317. input#author:-moz-placeholder,
  318. input#subject:-moz-placeholder {
  319.     font-size: 0;
  320. }
  321. input#email::-moz-placeholder,
  322. input#author::-moz-placeholder,
  323. input#subject::-moz-placeholder {
  324.     font-size: 0;
  325. }
  326.  
  327. input:focus, textarea:focus {
  328.     outline: none;
  329. }
  330.  
  331. button, a.button {
  332.     background: #E4E4E4;
  333.     border: 1px solid #CCCCCC;
  334.     border-bottom: 1px solid #AAAAAA;
  335.     color: #222222;
  336. }
  337.     button:hover, a.button:hover {
  338.         background: #F1EFEF;
  339.         color: #222222;
  340.     }
  341. /**/
  342.  
  343. /* Page Layout */
  344. body.responsive .index-threaded {
  345.     margin: 0;
  346. }
  347.     body.responsive main.index-catalog .index-threads {
  348.         padding-right: 0 !important;
  349.     }
  350.         section.index-threads {
  351.             margin: 0;
  352.             min-height: initial;
  353.         }
  354.             ul.thread-list {
  355.                 padding: 0;
  356.                 margin: 0 15px;
  357.             }
  358.                 body.responsive .index-threaded .thread-item:not(:first-of-type) {
  359.                     border-top: 1px solid #B7C5D9;
  360.                 }
  361.                 body.responsive .thread-item {
  362.                     clear: both;
  363.                 }
  364.                     body.responsive .index-threaded.mode-reply section.index-threads .thread {
  365.                         padding: 7px 0 7px 0;
  366.                     }
  367.                     body.responsive .index-threaded.mode-index section.index-threads .thread {
  368.                         padding: 7px 0;
  369.                         clear: both;
  370.                     }
  371.                         ul.thread-replies {
  372.                             display: inline;
  373.                         }
  374.  
  375. aside.index-sidebar {
  376.     display: none;
  377. }
  378.  
  379. #autoupdater {
  380.     clear: both;
  381. }
  382. /**/
  383.  
  384. /* Post Layout */
  385. .post-content {
  386.     padding: 7px 7px 0 7px;
  387. }
  388.     .post-content::after {
  389.         display: inline;
  390.     }
  391.     main.index-threaded .post-container.op-container {
  392.         background: none;
  393.         border: none;
  394.         width: 100%;
  395.     }
  396.         .op-container {
  397.             display: inline;
  398.         }
  399.             .op-container .post-content {
  400.                 padding: 0;
  401.             }
  402.                 .op-container .post {
  403.                     margin: 8px 0 8px 5px;
  404.                 }
  405.     .reply {
  406.         overflow: hidden;
  407.         padding-left: 0;
  408.     }
  409.         .reply::before {
  410.             display: none;
  411.         }
  412.         .reply .attachment-container {
  413.             margin: 2px 1em 1em 5px;
  414.         }
  415.  
  416.  
  417. ul.attachments-single li.post-attachment {
  418.     padding: 0 1em 5px 0;
  419. }
  420.     .reply-container ul.post-attachments.attachments-multi {
  421.         background: none;
  422.         margin: 0;
  423.         padding: 0;
  424.     }
  425.         .reply-container ul.post-attachments.attachments-multi .post-attachment {
  426.             padding: 0;
  427.         }
  428. ul.attachments-single li.post-attachment.attachment-expanded {
  429.     padding: 0;
  430. }
  431.     li.post-attachment.attachment-expanded div.attachment-container {
  432.         background-color: transparent;
  433.     }
  434.         div.attachment-container {
  435.             margin: 3px 5px 0 0;
  436.             display: inline-block;
  437.         }
  438.             div.attachment-wrapper {
  439.                 width: 150px;
  440.                 height: 150px;
  441.                 line-height: inherit !important;
  442.                 display: inline;
  443.             }
  444.                 figure.attachment-type-audio {
  445.                     margin-right: 0;
  446.                 }      
  447.                 .post-content div.attachment-wrapper.thumbnail-content.attachment-type-audio::after {
  448.                     display: none;
  449.                 }
  450.                 figcaption.attachment-details {
  451.                     margin-top: 3px;
  452.                 }
  453.                     p.attachment-detail {
  454.                         height: 1.2em;
  455.                         line-height: 1.2em;
  456.                     }
  457.                     .detail-filename {
  458.                         overflow: hidden;
  459.                         line-height: 1.2em;
  460.                     }
  461.                     a.attachment-download {
  462.                         margin-top: 4px;
  463.                     }
  464.             a.attachment-link.attachment-canplay {
  465.                 margin: 0;
  466.             }
  467.  
  468. body.responsive .index-threaded section.index-threads .reply .post {
  469.     margin: 0.8em 1.8em 1em 1.8em;
  470. }
  471. body.responsive .index-threaded section.index-threads .post {
  472.     max-width: none;
  473.     word-wrap: break-word;
  474. }
  475.  
  476. blockquote.ugc blockquote {
  477.     margin: 0;
  478. }
  479.     blockquote.ugc p {
  480.         margin-top: 0;
  481.     }
  482.  
  483. .post-details {
  484.     margin: 0 9em 5px 0;
  485.     line-height: 1.4em;
  486.     font-size: 13px;
  487. }
  488.     .post-detail.post-logged {
  489.         display: none;
  490.     }
  491.     .post-detail-item.capcode {
  492.         color: #F00;
  493.         font-weight: normal;
  494.     }
  495.     li.post-country {
  496.         margin-top: -3px;
  497.     }
  498.  
  499. div.post-action-tab.action-tab-reply {
  500.     top: 0;
  501.     right: 0;
  502.     border: 1px solid #B7C5D9;
  503. }
  504. .multiboard-index div.post-action-tab.action-tab-reply {
  505.     top: .75em;
  506.     right: .75em;
  507. }
  508. .reply div.post-action-tab.action-tab-reply {
  509.     top: 8px;
  510.     right: 8px;
  511. }
  512. div.post-action-tab.action-tab-actions {
  513.     border: 1px solid #B7C5D9;
  514.     box-sizing: border-box;
  515.     height: 18px;
  516.     padding: 1px 4px;
  517.     vertical-align: top;
  518.     cursor: pointer;
  519. }
  520.     .post-action-label.post-action-open {
  521.         color: #34345C;
  522.         font-size: 11px;
  523.         line-height: 1.3em;
  524.     }
  525.         ul.post-actions {
  526.         display: block;
  527.         }
  528.                 ul.post-action-groups {
  529.             font-size: 11px;
  530.                 }
  531.             li.post-action-group {
  532.                 border: 1px solid #B7C5D9;
  533.             }
  534.                 li.post-action {
  535.                     border-bottom: 1px solid #B7C5D9;
  536.                 }
  537.                     a.post-action-link {
  538.                         padding: 1px 5px;
  539.                     }
  540.     ul.post-metas {
  541.         border: none;
  542.         margin: 0;
  543.     }
  544. /**/
  545.  
  546. /* Footer */
  547. footer {
  548.     margin: 10px 15px;
  549.     padding: 5px 0 0 0;
  550. }
  551.     footer nav.pagination, nav.pagination-automatic {
  552.         display: inline-block;
  553.         background-color: #D6DAF0;
  554.         border-bottom: 1px solid #B7C5D9;
  555.         border-right: 1px solid #B7C5D9;
  556.         border-top: 1px solid transparent;
  557.     }
  558.     footer .pagination-buttons {
  559.         float: left;
  560.         margin: 0 10px;
  561.     }
  562.         footer .pagination-buttons .pagination-first, footer .pagination-buttons .pagination-last {
  563.             display: none;
  564.         }
  565.         footer .pagination-buttons.buttons-pages {
  566.             float: right;
  567.         }
  568.     footer nav.boardlist {
  569.         background: none;
  570.         color: #34345C;
  571.         padding: 5px 0;
  572.     }
  573.         footer nav.boardlist .boardlist-link {
  574.             color: #34345C;
  575.         }
  576.     #footnotes {
  577.         background: none;
  578.         color: black;
  579.         font-size: 11px;
  580.         padding: 0;
  581.     }
  582.         #footnotes .agpl-compliance {
  583.             color: #34345C;
  584.             text-decoration: none;
  585.         }
  586.         #footnotes .agpl-compliance:hover {
  587.             color: #FF0000;
  588.         }
  589. /**/
  590.  
  591. @media (min-height: 480px) and (min-width: 1028px) {
  592.     html.js body.responsive form.form-post {
  593.         top: 30px;
  594.         padding: 0;
  595.         border-right: none;
  596.     }
  597. }
  598.  
  599. @media (max-width: 480px) {
  600.     form.form-post fieldset.form-fields {
  601.         width: 100% !important;
  602.     }
  603.     html.js body.responsive form.form-post .field-control {
  604.         margin: 0;
  605.     }
  606.     html.js body.responsive form.form-post .field {
  607.         margin: 1px 0;
  608.     }
  609.     form.form-post div.row-file {
  610.         margin: 0;
  611.     }
  612.     .post-details {
  613.         margin: 0 3em 5px 0;
  614.     }
  615.     .reply {
  616.         width: 100%;
  617.     }
  618.     ul.thread-list {
  619.         margin: 0 10px;
  620.     }
  621.     .mode-index section.index-form, .index-catalog section.index-form {
  622.         margin: 0 10px;
  623.     }
  624. }
  625.  
  626. nav.cp-side a.linkitem-name-createboard {
  627.     text-align: center;
  628.     border-radius: 5px;
  629.     border: 1px solid #E0E0E0;
  630. }
  631. a.linkitem-name.linkitem-name-createboard:hover {
  632.     background: #333;
  633.     color: #FFF;
  634.     border: 1px solid #333;
  635. }
  636. li.post-attachment.attachment-expanded, li.post-attachment.attachment-expanded figure.attachment, li.post-attachment.attachment-expanded div.attachment-wrapper, li.post-attachment.attachment-expanded img.attachment-img {
  637.     max-width: 100%;
  638. }
  639.  
  640. #instantclick-bar {
  641.         background: #34345C;
  642.     margin-top: 16px;
  643.     height: 1px !important;
  644. }

Replies to 8chan Classic Style for Next rss

Title Name Language When
Re: 8chan Classic Style for Next anonymous css 1 Year ago.
Re: 8chan Classic Style for Next anonymous css 1 Year ago.
Re: 8chan Classic Style for Next anonymous css 2 Years ago.