daily pastebin goal
34%
SHARE
TWEET

FringeMeta Fringe CSS 2.0

FringeMagick Sep 27th, 2017 94 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* FringeMeta CSS by Fringe Wizard (September 2017) */
  2.  
  3. /* Custom Fonts Used in this CSS */
  4.  
  5. @import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono|Black+Ops+One|Dancing+Script');
  6.  
  7. /* Hide Shit */
  8.  
  9. #s-bottom-ad, #new-bottom-ads, .watchThread, .showallThread, a.watchlist-toggle, #grab, #thread-catalog, #thread-top, #thread_stats, div.boardlist:nth-child(1) > span:nth-child(6), a.hash_unix, div.file p.fileinfo a:nth-child(2), a.video-pop, .board-settings, .centered, footer, .post-table-options span.unimportant.hint { display:none; }
  10.  
  11. /* Required Star */
  12. .required-star, .required-wrap  {
  13.   background: rgba(0,0,0,0);
  14.   text-align:right;
  15.   font-size: 0px;
  16.   color: transparent;
  17. }
  18.  
  19. /* Buttons */
  20. form table tr th {
  21.   background: rgba(0,0,0,0);
  22. }
  23.  
  24. /* Options */
  25. table tbody tr:nth-of-type(2n) {
  26.   background: rgba(0,0,0,0);
  27.   text-align:right;
  28. }
  29.  
  30. /* Name, Email, Subject, Comment, File, Embed, Options, Password, etc. */
  31. #post-form-outer .post-table tr th, .post-table-options tr th {
  32.   font-size: 14px;
  33.   color: black;
  34.   font-variant: small-caps;
  35.   background: rgba(0,0,0,0);
  36.   text-align:right;
  37.   width:10px;
  38.   border: 0;
  39. }
  40.  
  41. /* Submit & Flag Buttons */
  42.  
  43. input[type="submit"], #user_flag, .dropzone {
  44.   border: 1px solid #a9a9a9;
  45.   padding-bottom:1px;
  46. }
  47.  
  48. /* Input Fields, Text Area, Flag Button */
  49.  
  50. input, textarea, #user_flag, select {color:#eee; background:#111}
  51.  
  52. /* Board Background */
  53. body {
  54.   color: black;
  55.   background: #EEF2FF url('') repeat-x 50% 0%;
  56. }
  57.  
  58. /* Board List Site Navigation */
  59.  
  60. .desktop-style div.boardlist:not(.bottom) {
  61.   padding-top:4px;
  62.   padding-bottom:6px;
  63.   box-shadow: 0px 2px 0px rgba(0, 0, 0, .05);
  64.   font-size:11px;
  65.   background:#D6DAF0;
  66. }
  67.  
  68. /* Add a little extra space between the board banner and the top */
  69.  
  70. .desktop-style body {
  71.   padding-top: 24px;
  72. }
  73.  
  74. /* Posting Table */
  75.  
  76. .post-table {
  77.   background:#D6DAF0;
  78.   padding:10px;
  79.   border: 3px solid #D0DAF0;
  80. }
  81.  
  82. textarea#body {width:308px;}
  83. #user_flag {width:312px;}
  84.  
  85. .handle { background:#aaf; padding: 2px 0; margin-top:-2px; }
  86.  
  87. .dice-option table td, .dice-option table {
  88.   border: 0;
  89. }
  90.  
  91. #quick-reply th {
  92.   text-align: center;
  93.   padding: 2px 0;
  94.   border: 0px solid #222;
  95.   margin: 6px;
  96. }
  97.  
  98. /* Threads */
  99.  
  100. .thread {
  101.   margin: auto;
  102.   width: 98%;
  103.   padding: 10px;
  104.   padding-bottom:15px;
  105. }
  106.  
  107. .centered {
  108.   margin:20px;
  109. }
  110.  
  111. /* Posts */
  112.  
  113. div.post.op {
  114.   margin-right: 0px;
  115. }
  116.  
  117. div.post p { font-size: 14px; }
  118.  
  119. div.post.reply {
  120.   background: #D6DAF0
  121.   border-right:none;
  122.   border-color:white;
  123.   border:3px solid #D0DAF0;
  124.   margin-bottom:4px;
  125. }
  126.  
  127. div.post.reply.highlighted {
  128.   background: #faa;
  129. }
  130.  
  131. /* Thumbnails */
  132.  
  133. .post-image {
  134.   border:1px solid #B7C5D9;
  135.   border-radius: 9px 9px 9px 9px;
  136.   width: auto !important;
  137.   height: auto !important;
  138.   max-height: 240px;
  139.   max-width: 240px;
  140. }
  141.  
  142. .post.reply a:not([data-expanded="true"]) .post-image {
  143.   border:0px solid #fff;
  144.   width: auto !important;
  145.   height: auto !important;
  146.   max-height: 160px;
  147.   max-width: 160px;
  148. }
  149.  
  150. /* Links */
  151.  
  152. a { navy: olive; text-decoration:none; }
  153. a:hover { color: blue; }
  154.  
  155. /* Show/Hide Image Buttons */
  156.  
  157. a.hide-image-link:before {
  158.   font-size:16px;
  159.   content:"⊟ ";
  160. }
  161. a.hide-image-link {
  162.   font-size:0px;
  163. }
  164.  
  165. a.show-image-link:before {
  166.   font-size:16px;
  167.   content:"⊞ ";
  168. }
  169. a.show-image-link {
  170.   font-size:0px;
  171. }
  172.  
  173. /* File Info */
  174.  
  175. p.fileinfo span { font-size:0px; }
  176. div.file p.fileinfo a.show-image-link, div.file p.fileinfo a.hide-image-link { font-size:0px; }
  177. div.file p.fileinfo a { font-size:14px; line-height:2em; }
  178.  
  179. /* Show/Hide Thread Buttons */
  180.  
  181. .hide-thread-link:before {
  182.   font-size:16px;
  183.   content:"⊟ ";
  184. }
  185. .hide-thread-link {
  186.   font-size:0px;
  187. }
  188.  
  189. .show-thread-link:before {
  190.   font-size:16px;
  191.   content:"⊞ ";
  192. }
  193. .show-thread-link {
  194.   font-size:0px;
  195. }
  196.  
  197. /* Video loop and play once buttons. */
  198.  
  199. div.files div.file p.fileinfo span:nth-child(4):before {
  200.   color: red;
  201.   font-size:15px;
  202.   content:"▷";
  203.   padding-left: 6px;
  204. }
  205.  
  206. div.files div.file p.fileinfo span:nth-child(5):before {
  207.   color: red;
  208.   font-size:15px;
  209.   content:"↺";
  210. }
  211.  
  212. /* Regular Custom Text */
  213.  
  214. .quote {
  215.   color: #148800;
  216. }
  217.  
  218. .aa {
  219.   color: #fa0;
  220. }
  221.  
  222. h1, header div.subtitle {
  223.   color:olive;
  224.   font-size:24px;
  225.   font-family: 'Black Ops One', cursive;
  226.   font-weight: normal;
  227.   line-height: 1.2em;
  228. }
  229.  
  230. header div.subtitle {
  231.   font-size:16px;
  232. }
  233.  
  234. /* Super Secret Custom Text */
  235.  
  236. strong .aa {
  237.   color: white;
  238.   text-shadow: 1px 1px 0px black, -1px 1px 0px black, 1px -1px 0px black, -1px -1px 0px black, 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black, 0px 1px 9px #fff, 0px 3px 6px blue;
  239. }
  240.  
  241. .heading strong .aa  {
  242.   color: gold;
  243.   text-shadow: 1px 1px 0px red, -1px 1px 0px red, 1px -1px 0px red, -1px -1px 0px red, 0px 1px 0px red, 0px -1px 0px red, -1px 0px 0px red, 1px 0px 0px red, 0px 1px 9px #0ff, 0px 3px 6px red;
  244. }
  245.  
  246. em .aa {
  247.   color: white;
  248.   font-size:24px;
  249.   font-family: 'Dancing Script', cursive;
  250. }
  251.  
  252. .heading strong {
  253.   color:olive;
  254.   font-size:24px;
  255.   font-family: 'Black Ops One', cursive;
  256.   font-weight: normal;
  257.   line-height: 1.2em;
  258. }
  259.  
  260. /* Just /fringe/ my /fringemeta/ up. */
  261.  
  262. .post-table {
  263.     background: none;
  264.     border: none;
  265. }
  266.  
  267. #post-form-outer .post-table tr th, .post-table-options tr th {
  268.     color: lightblue;
  269. }
  270.  
  271. input, textarea, #user_flag {
  272.     color: #eee;
  273.     background: #111;
  274. }
  275.  
  276. div.blotter {
  277.     color: #A4C;
  278.     text-shadow: 1px 1px black;
  279.     font: orange;
  280.     font-weight: bold;
  281.     text-align: center;
  282.     background: rgba(1,1,1,.8);
  283.     padding: 10px;
  284.     width:60%;
  285.     margin-left: auto;
  286.     margin-right: auto;
  287.     border: 1px solid #373737;-webkit-border-radius:7px;-khtml-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
  288.     margin-top:6px;
  289. }
  290.  
  291. .blotter > b {color: crimson;}
  292.  
  293. body {
  294.   background: url('https://i.imgur.com/EPUIXAB.jpg') fixed;
  295.   margin: 0px;
  296.   padding: 0px;
  297.   color:gray;
  298.   background-attachment: fixed;
  299.   background-position: center;
  300.   background-size: cover;
  301. }
  302.  
  303. #post-form-inner {
  304.   background: rgba(1,1,1,.8);
  305.   border-radius: 7px;
  306. }
  307.  
  308. .flag_preview, .flag {
  309.   background: rgba(255,255,255,0.1);
  310.   border-radius: 4px;
  311.   padding: 0.07em;
  312. }
  313.  
  314. div.post.reply {
  315.     background:url("https://i.imgur.com/saWoraq.png") repeat-x scroll 0% 0% rgba(255, 255, 255, 0.6);
  316.     background-color: #0F1623;
  317.     border: 1px solid #373737;-webkit-border-radius:7px;-khtml-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
  318.     min-width: 16%;
  319. }
  320.  
  321. div.thread {
  322.   border-radius: 7px;
  323.   padding:10px;
  324.     background: url("https://i.imgur.com/GZiBIS0.png")
  325.     repeat-x scroll 0% 0% rgba(29, 33, 51, 0.9);
  326.     border-bottom: 1px dashed #444;
  327.     border-left: 1px dashed #444;
  328. }
  329.  
  330. div.post.reply.highlighted {
  331.     background:url("https://i.imgur.com/ajihro9.png") repeat-x scroll 0 0 #0F1623;
  332.     box-shadow: inset 0 0 10px #246;
  333. }
  334.  
  335. #expand-all-images, #gallery-view {
  336.   text-align: center !important;
  337. }
  338.  
  339. hr {
  340.   border: 0px solid #888;
  341.   width:100%;
  342.   height:38px;
  343.   margin-left: auto;
  344.   margin-right: auto;
  345.   text-align:center;
  346. }
  347.  
  348. hr:after {
  349.   color: silver;
  350.   font-size:32px;
  351.   content:"⊱ ☸ ⊰";
  352. }
  353.  
  354. hr:nth-child(14), hr:nth-child(16) {display: none;}
  355.  
  356. div.pages {
  357.     color: #89A;
  358.     background: none repeat scroll 0% 0% #111;
  359.     display: inline;
  360.     padding: 3px;
  361.     border-right: 1px solid #444;
  362.     border-bottom: 1px solid #555;
  363.     margin-left: 20px;
  364. }
  365.  
  366. form {
  367.     color: #D9E2FD;
  368.     margin-bottom: 20px;
  369.     margin-left: 0px;
  370.     padding: 10px;
  371.     margin-top: 0px;
  372. }
  373.  
  374. p.intro {
  375.     font-family: 'Courier New',Courier,Freemono,'Nimbus Mono L',monospace;
  376. }
  377.  
  378. p.intro span.name {
  379.     font-family: 'Courier New',Courier,Freemono,'Nimbus Mono L',monospace;
  380.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  381.     color: #CFD;
  382. }
  383.  
  384. p.intro span.subject {
  385.     font-family: 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif;
  386.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  387.     color: #0DF;
  388. }
  389.  
  390. p.intro time {
  391.     color: #FB8;
  392.     font-weight: bold;
  393.     padding-left: 0px;
  394.     padding-right: 0px;
  395.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  396. }
  397.  
  398. p.intro a.post_no {
  399.     color: #FFF;
  400.     font-weight: bold;
  401.     padding-left: 0px;
  402.     padding-right: 0px;
  403.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  404. }
  405.  
  406. .poster_id {
  407.     color: #CFF;
  408.     font-weight: bold;
  409.     background: transparent;
  410.     padding-left: 0px;
  411.     padding-right: 0px;
  412.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  413. }
  414.  
  415. a,a:visited {
  416.     text-decoration: none;
  417.     color: #FFBF00;
  418. }
  419.  
  420. a:hover,p.intro a.post_no:hover {
  421.     color: #fff;
  422.     text-shadow: 0px 0px 4px orange;
  423. }
  424.  
  425. /* Change the board list appearance. */
  426.  
  427. div.boardlist:not(.bottom){background-color:#FFFFFF!important;border-bottom:2px ridge #A6F!important;color:#707;text-align:center;padding:4px 96px;opacity:0.80;}
  428.  
  429. div.boardlist:not(.bottom){background-color:#000!important;border-bottom:2px solid #426!important;color:#f9f;text-align:center;padding:2px 96px;opacity:0.80;}
  430.  
  431. div.boardlist:not(.bottom) a{color:#4ff;}
  432. div.boardlist:not(.bottom) a:hover{color:#fff;}
  433.  
  434. /* Change the options and alerts appearances. */
  435.  
  436. #options_div, #alert_div {
  437.   color: #eee;
  438.   background-color: #111;
  439.   border: 1px solid white;
  440. }
  441.  
  442. .options_tab_icon {
  443.   color: #eee;
  444.   background-color: #111;
  445. }
  446.  
  447. #options_tablist {
  448.     border-right: 1px solid #222;
  449. }
  450.  
  451. /* Animations and other touch ups */
  452.  
  453. h1 {
  454.     font-family: URW Chancery L, Lucida Calligraphy;
  455.     letter-spacing: 3px;
  456.     font-size: 32pt;
  457.     margin: 0px;
  458.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000, 2px 2px 0px #000, -2px 2px 0px #000, 2px -2px 0px black, -2px -2px 0px black, 0px 2px 0px black, 0px -2px 0px black, -2px 0px 0px black, 2px 0px 0px black, 1px 2px 0px black, -1px 2px 0px black, 1px -2px 0px black, -1px -2px 0px black, 2px 1px 0px black, -2px 1px 0px black, 2px -1px 0px black, -2px -1px 0px black;
  459.     color:#0fffff;
  460. }
  461.  
  462. header div.subtitle {
  463.     font-family: "Bitstream Charter";
  464.     font-size: 16pt;
  465.     color:#0a5f94;
  466.     text-shadow: 1px 1px 0px #000, -1px 1px 0px #000, 1px -1px 0px #000, -1px -1px 0px #000, 0px 1px 0px #000, 0px -1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000;
  467. }
  468.  
  469. /* Spin Script that makes the flags spin when you hover over them. */
  470.  
  471. p.intro img.flag:hover, img.flag:focus, img.flag:active {
  472.     animation:flaghover 1.5s linear 0s infinite;
  473.     -o-animation:flaghover 1.5s linear 0s infinite;
  474.     -moz-animation:flaghover 1.5s linear 0s infinite;
  475.     -webkit-animation:flaghover 1.5s linear 0s infinite;
  476. }
  477.  
  478. @keyframes flaghover {
  479.     10% {
  480.         transform: translateZ(0);
  481.     }
  482.     20% {
  483.         transform: rotate(-360deg);
  484.     }
  485.     60% {
  486.         transform: rotate(-180deg);
  487.     }
  488. }
  489.  
  490. @-o-keyframes flaghover {
  491.     10% {
  492.         transform: translateZ(0);
  493.     }
  494.     20% {
  495.         transform: rotate(-360deg);
  496.     }
  497.     60% {
  498.         transform: rotate(-180deg);
  499.     }
  500. }
  501.  
  502. @-moz-keyframes flaghover {
  503.     10% {
  504.         transform: translateZ(0);
  505.     }
  506.     20% {
  507.         transform: rotate(-360deg);
  508.     }
  509.     60% {
  510.         transform: rotate(-180deg);
  511.     }
  512. }
  513.  
  514. @-webkit-keyframes flaghover {
  515.     10% {
  516.         transform: translateZ(0);
  517.     }
  518.     20% {
  519.         transform: rotate(-360deg);
  520.     }
  521.     60% {
  522.         transform: rotate(-180deg);
  523.     }
  524. }
  525.  
  526. /* Rainbow Color Rotation Script that makes the Board Title and Subtitle changes colours constantly */
  527.  
  528. h1,div.subtitle{
  529.     -webkit-animation:colorRotate 6s linear 0s infinite;
  530.     -moz-animation:colorRotate 6s linear 0s infinite;
  531.     -o-animation:colorRotate 6s linear 0s infinite;
  532.     animation:colorRotate 6s linear 0s infinite;
  533. }
  534.  
  535. @-webkit-keyframes colorRotate {
  536.     from {
  537.         color: rgb(255, 0, 0);
  538.     } 16.6% {
  539.         color: rgb(255, 0, 255);
  540.     }
  541.     33.3% {
  542.         color: rgb(0, 0, 255);
  543.     }
  544.     50% {
  545.         color: rgb(0, 255, 255);
  546.     }
  547.     66.6% {
  548.         color: rgb(0, 255, 0);
  549.     }
  550.     83.3% {
  551.         color: rgb(255, 255, 0);
  552.     }
  553.     to {
  554.         color: rgb(255, 0, 0);
  555.     }
  556. }
  557.  
  558. @-moz-keyframes colorRotate {
  559.     from {
  560.         color: rgb(255, 0, 0);
  561.     }
  562.     16.6% {
  563.         color: rgb(255, 0, 255);
  564.     }
  565.     33.3% {
  566.         color: rgb(0, 0, 255);
  567.     }
  568.     50% {
  569.         color: rgb(0, 255, 255);
  570.     }
  571.     66.6% {
  572.         color: rgb(0, 255, 0);
  573.     }
  574.     83.3% {
  575.         color: rgb(255, 255, 0);
  576.     }
  577.     to {
  578.         color: rgb(255, 0, 0);
  579.     }
  580. }
  581.  
  582. @-o-keyframes colorRotate {
  583.     from {
  584.         color: rgb(255, 0, 0);
  585.     }
  586.     16.6% {
  587.         color: rgb(255, 0, 255);
  588.     }
  589.     33.3% {
  590.         color: rgb(0, 0, 255);
  591.     }
  592.     50% {
  593.         color: rgb(0, 255, 255);
  594.     }
  595.     66.6% {
  596.         color: rgb(0, 255, 0);
  597.     }
  598.     83.3% {
  599.         color: rgb(255, 255, 0);
  600.     }
  601.     to {
  602.         color: rgb(255, 0, 0);
  603.     }
  604. }
  605.  
  606. @keyframes colorRotate {
  607.     from {
  608.         color: rgb(255, 0, 0);
  609.     }
  610.     16.6% {
  611.         color: rgb(255, 0, 255);
  612.     }
  613.     33.3% {
  614.         color: rgb(0, 0, 255);
  615.     }
  616.     50% {
  617.         color: rgb(0, 255, 255);
  618.     }
  619.     66.6% {
  620.         color: rgb(0, 255, 0);
  621.     }
  622.     83.3% {
  623.         color: rgb(255, 255, 0);
  624.     }
  625.     to {
  626.         color: rgb(255, 0, 0);
  627.     }
  628. }
  629.  
  630. /* Buzz Script that makes the board banner buzz when you hover over it. */
  631.  
  632. img.banner, img.board_image {
  633.     border: none;
  634.     -webkit-transform: translateZ(0);
  635.     transform: translateZ(0);
  636. }
  637.  
  638. img.banner:hover, img.board_image:hover {
  639.     -webkit-animation-name: buzz;
  640.     animation-name: buzz;
  641.     -webkit-animation-duration: 0.25s;
  642.     animation-duration: 0.25s;
  643.     -webkit-animation-timing-function: linear;
  644.     animation-timing-function: linear;
  645.     -webkit-animation-iteration-count: infinite;
  646.     animation-iteration-count: infinite;
  647. }
  648.  
  649. @keyframes buzz {
  650.     50% {
  651.         -webkit-transform: translateX(4px) rotate(3deg);
  652.         transform: translateX(4px) rotate(3deg);
  653.     }
  654.     100% {
  655.         -webkit-transform: translateX(-4px) rotate(-3deg);
  656.         transform: translateX(-4px) rotate(-3deg);
  657.     }
  658. }
  659.  
  660. @-webkit-keyframes buzz {
  661.     50% {
  662.         -webkit-transform: translateX(4px) rotate(3deg);
  663.         transform: translateX(4px) rotate(3deg);
  664.     }
  665.     100% {
  666.         -webkit-transform: translateX(-4px) rotate(-3deg);
  667.         transform: translateX(-4px) rotate(-3deg);
  668.     }
  669. }
RAW Paste Data
Top