Public Pastes
Pastebin PRO Accounts EASTER SPECIAL! For a limited time only get 40% discount on a LIFETIME PRO account! Offer Ends April 2nd!
SHARE
TWEET

TPB new design

a guest Mar 30th, 2016 964 in 4 days
  1. /*
  2. The Pirate Bay - main style sheet for new thepiratebay.se design. Version March 2016. Projected release: April 11
  3. */
  4.  
  5. /* HTML5 - set default style to new HTML5 elements (for compability with older browsers) */
  6. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  7. { display: block;  color: #33FE33; }
  8.  
  9.  
  10. /* GLOBAL
  11. ***************************************************/
  12. body {
  13.     background: #0A0D09;
  14.     margin: 10px;
  15.     font: 1.2em/1.3em VT323;
  16. }
  17.  
  18. /* sprites */
  19. .sp {
  20.     background: url('static/img/latest.png') no-repeat;
  21.     display: inline-block;
  22.     height: 12px;
  23.     width: 11px;
  24.     margin: 0 0 -3px 0;
  25. }
  26. .dl-torrent {
  27.     background-position: -36px -111px;
  28.     margin: 0 3px -3px 0;
  29. }
  30. .dl-magnet {
  31.     background-position: -46px -111px;
  32.     margin: 0 3px -1px 0;
  33.     width: 13px;
  34. }
  35. .vip { background-position: -13px -99px; }
  36. .trus { background-position: -1px -99px; }
  37. .help { background-position: -25px -99px; }
  38. .admin, .mod, .smod {
  39.     height: 11px;
  40.     width: 28px;
  41. }
  42. .admin { background-position: 0 -87px; }
  43. .smod { background-position: -27px -87px; }
  44. .mod { background-position: -54px -87px; }
  45. .twitter {
  46.     background-position: -44px -123px;
  47.     height: 16px;
  48.     width: 16px;
  49. }
  50. #write_comment {
  51.     background-position: -25px -110px;
  52.     height: 10px;
  53.     margin: 0 4px -1px 0;
  54. }
  55.  
  56. #tools {
  57.     max-width: 728px;
  58.     margin: 1em auto -1em auto;
  59.     text-align: right;
  60.     line-height: 30px;
  61.     clear: both;
  62.     overflow: hidden;
  63. }
  64. #tools form {
  65.     float: left;
  66.     background: #0A0D09;
  67.     padding: 0px 5px;
  68. }
  69. #delete a { color: #f00; }
  70. #check a { color: #33FE33; }
  71. #check a:hover, #checked { color: #090; }
  72.  
  73. /* links */
  74. a, a:link, a:visited, a:focus {
  75.     color: #33FE33;
  76.     text-decoration: none;
  77.     border-bottom: 1px none #33FE33;
  78. }
  79. a:hover { border-bottom: 1px solid #33FE33; } /* default link hover style */
  80. #icons a, h1 a:hover, .sp, tr a, #logo a { border-bottom: 0 !important } /* however, we dont want none links here.. */
  81. table a:hover { text-decoration: underline; }
  82. .download a:hover { text-decoration: none !important; border-color: #090; }
  83.  
  84. img, img:hover { border-bottom: 0 !important; }
  85. /* tables */
  86. table {
  87.     border-collapse: collapse;
  88.     empty-cells: show
  89. }
  90. th {
  91.     border-right: 1px solid #0A0D09;
  92.     padding: 4px;
  93. }
  94. td { padding: 4px; }
  95.  
  96.  
  97. /* lists */
  98. ul { list-style:none; }
  99.  
  100. /* misc */
  101. hr {
  102.     border: 0;
  103.     border-top: 1px solid #ddd;
  104. }
  105.  
  106. /* forms */
  107. fieldset { border:0; }
  108. legend { display:none; }
  109.  
  110. /* messages */
  111. #error {
  112.     border: 1px solid #0A0D09;
  113.     border-width: 1px 0 1px 0;
  114.     color: #c00;
  115.     margin: 2em auto;
  116.     padding: 9px 20px;
  117.     color:#444;
  118. }
  119. #error span {
  120.     display:block;
  121.     font-weight: normal;
  122.     margin:3px 0 5px 0;
  123.     color: #a00;
  124. }
  125. #info {}
  126.  
  127. /* headings */
  128. h1 {}
  129. h2 {
  130.     width: 98%;
  131.     background: #0A0D09;
  132.     border-bottom: 1px solid #33FE33;
  133.     padding: 4px 0.5%;
  134.     clear: both;
  135.     font-size: 125%;
  136. }
  137.  
  138. /* top navigation */
  139. #logo a
  140. {
  141.     background: url('static/img/latest.png') 0px 0px no-repeat;
  142.     height: 86px;
  143.     width: 82px;
  144.     margin: -12px 10px 0 0;
  145.     float: left;
  146. }
  147. #logo span { display: none; }
  148. header nav
  149. {
  150.     margin: -5px 0 0 -8px;
  151.     padding: 0;
  152.     float: left;
  153. }
  154. header nav ul
  155. {
  156.     padding: 0;
  157.     margin: 0;
  158. }
  159. header nav ul li
  160. {
  161.     float: left;
  162.     padding: 0 9px;
  163.     line-height: 11px;
  164.     border-right: 1px solid #333;
  165. }
  166. header nav ul li:last-child { border: 0; }
  167.  
  168. /* top search */
  169. #topsearch
  170. {
  171.     margin: 0;
  172.     padding: 0;
  173.     float: left;
  174. }
  175. #topsearch form>input { margin-bottom: 5px; }
  176. #topsearch label {
  177.     padding: 0;
  178.     margin: 0 5px 0 0;
  179. }
  180. #topsearch label input {
  181.     position: relative;
  182.     top: 5px;
  183.     margin: 0 3px 0 0;
  184.     vertical-align: top;
  185. }
  186.  
  187. /* ads */
  188. .ads,
  189. .ads iframe {
  190.     padding: 0;
  191.     margin: 0;
  192.     overflow: hidden;
  193.     z-index: -999;
  194. }
  195. #top468 {
  196.     float: right;
  197.     margin: -15px 1em -25px 0;
  198.     width: 468px;
  199. }
  200. #right-sky,
  201. #left-sky {
  202.     margin-top: 2em;
  203.     width: 180px;
  204. }
  205. #right-sky { float: right; }
  206. #left-sky { float: left; }
  207. #right-sky iframe {
  208.     margin-left: 20px;
  209.     text-align: left;
  210. }
  211. #left-sky iframe {
  212.     margin-right: 20px;
  213.     text-align: right;
  214.     float: right;
  215. }
  216. #bottom728,
  217. #top728 {
  218.     margin: auto;
  219.     width: 728px;
  220. }
  221.  
  222. /* footer */
  223. footer {
  224.     margin: 0em auto;
  225.     text-align: center;
  226. }
  227. footer #stats {
  228.     color: #666;
  229.     font-size: .9em;
  230.     clear: both;
  231.     margin: 2em 0;
  232. }
  233. .rss span, .kopimi span { display: none; }
  234. .rss {
  235.     background-position: 0px -124px;
  236.     width:16px;
  237.     height: 16px;
  238. }
  239. .kopimi {
  240.     background-position: -60px -111px;
  241.     width:21px;
  242.     height: 21px;
  243.     margin: 1em 0 0 0;
  244. }
  245.  
  246. /* PAGE SPECIFIC
  247. ***************************************************/
  248.  
  249. /* front page */
  250. #fp {
  251.     display: block;
  252.     margin: 0 auto 20px auto;
  253.     text-align: center;
  254.     color: #33FE33;
  255. }
  256. #fp h1 a {
  257.     background: url('static/img/tpb.png') no-repeat;
  258.     margin: 0 auto;
  259.     display: block;
  260.     border: 0;
  261.     width: 275px;
  262.     height: 295px;
  263.     outline: none !important;
  264. }
  265. #fp h1 a span { visibility: hidden; }
  266.  
  267. #fp #bnr a {
  268.     height:205px;
  269.     width:205px;
  270.     position: absolute;
  271.     top:0;
  272.     right:0;
  273.     border: 0;
  274. }
  275. #fp #bnr img { border: 0; }
  276. #fp #navlinks { white-space: nowrap; }
  277. #fp #navlinks a { margin: 0 2px; }
  278.  
  279. #fp #inp input {
  280.     padding: 3px;
  281.     width: 390px;
  282. }
  283. .https_form { background: url('static/img/icon-https.gif') no-repeat 100% 50% #0A0D09; }
  284.  
  285. #fp #inp span {
  286.     width: 1em;
  287.     line-height:12px;
  288.     float:right;
  289.     font-size:9px;
  290.     position: absolute;
  291.     padding: 0 15px;
  292. }
  293. #fp #howdl a {
  294.     font-size: 13px;
  295.     line-height: 20px;
  296.     border: 0;
  297. }
  298.  
  299.  
  300.  
  301. /* details & upload */
  302. #details,
  303. #upload {
  304.     background: #0A0D09;
  305.     margin: 2em auto;
  306.     padding: 0 1.5em 0.5em 1.5em;
  307.     max-width: 625px;
  308.     /*max-width: 694px;*/
  309.     overflow: hidden;
  310. }
  311. #details h1, #upload h1 {
  312.     margin: 0 -1.5em;
  313.     padding: .4em 1em .6em 1.5em;
  314.     font-size: 1.2em;
  315.     font-weight: normal;
  316.     letter-spacing: 0.07em;
  317.     background: #33FE33;
  318.     border-bottom: 1px solid #0A0D09;
  319. }
  320. #details h1 span { float: right; }
  321. #details dl {
  322.     float: left;
  323.     margin: .9em 3%;
  324.     width: 43%;
  325.     clear: right;
  326.     line-height: 140%;
  327. }
  328. #details dt {
  329.     float: left;
  330.     font-weight: normal;
  331.     color: #33FE33;
  332. }
  333. #details #col1 dd { padding: 0 0 0 20%; }
  334. #details #col2 dd { padding: 0 0 0 30%; }
  335. #delete a, #check a, #checked, #edit a {
  336.     font-weight: normal;
  337.     padding: 3px 9px;
  338.     background: #33FE33;
  339. }
  340. #details #write_comment_div {
  341.     display: none;
  342.     text-align: right;
  343.     padding: 2em 0 0 0;
  344.     clear: both;
  345. }
  346. #details #write_comment_div textarea { resize: both; }
  347. #social {
  348.     padding: 10px 0;
  349.     float: left;
  350.     line-height:12px;
  351. }
  352. #social * {
  353.     float: left;
  354.     margin-right: 5px;
  355.     border: 0;
  356. }
  357. #social .flattr { float: right; }
  358. #details .download, #details #social {
  359.     clear: both;
  360.     width: 460px;
  361. }
  362. #details .download a {
  363.     font: normal 1em/2.5em VT323;
  364.     color: #090;
  365.     margin-right: 10px;
  366.     text-transform: uppercase;
  367. }
  368. #details .download a:hover { text-decoration: underline; }
  369. #details .download a.dl-torrent { background-position: 0 -398px; }
  370. #details .download a.dl-magnet {
  371.     background-position: 0 -421px;
  372.     margin-left: 1em;
  373. }
  374. #details #nfo pre, #upload .nfo {
  375.     margin: 0;
  376.     padding: 10px;
  377.     border: 1px solid #33FE33;
  378.     background: #0A0D09;
  379.     width: 600px;
  380.     min-height: 50px;
  381.     font-family: 'VT323', ;
  382.     font-size: 20px;
  383.     line-height: .9em;
  384.     white-space: pre-wrap;
  385.     /*word-wrap: break-word; # works with most browsers, but is not valid anymore */
  386.     overflow-wrap: break-word;
  387. }
  388. #torrentpic {
  389.     float: right;
  390.     margin: 1em 1em 0 0;
  391. }
  392. #comments { font-size: 0.9em; }
  393. #comments header { margin: 1.5em 0 .3em 0; }
  394. #details #comments time { color: #33FE33; }
  395. #details #comments time:before { content: 'at '; }
  396. #details #comments time:after { content: ':'; }
  397. #details #comments div { background: #0A0D09; }
  398. #comments h2 {
  399.     color: #33FE33;
  400.     background: none;
  401.     padding: 0;
  402.     border: 0;
  403.     margin: 1em 0;
  404. }
  405.  
  406. /* upload */
  407. #upload table { width: 100%; }
  408. #upload td {
  409.     border-bottom: 1px dashed #33FE33;
  410.     padding: 0.7em 1em 0.9em 0;
  411.     width: 20%;
  412. }
  413. #upload tr:nth-last-child(-n+2) td { border:0; } /* no borders between and after descripton and submit on upload page */
  414. #upload td+td {
  415.     width: 70%;
  416.     border-color: #Efe3D9;
  417. }
  418. #upload label {
  419.     font-weight: normal;
  420.     color: #33FE33;
  421. }
  422. #upload #tname, #upload #torrent { width: 83.5%; }
  423. #upload .moreinfo {
  424.     font-size: 80%;
  425.     display: block;
  426.     position: absolute;
  427. }
  428. #upload select { width:200px; }
  429. #upload input#torrent  { width:300px; }
  430. #upload textarea.nfo {
  431.     overflow: auto;
  432.     resize: vertical;
  433.     margin-top: 10px;
  434.     min-height: 300px;
  435. }
  436.  
  437. /* browse table */
  438. table#list {
  439.     width: 100%;
  440.     margin: 2em auto;
  441.     max-width: 999px;
  442. }
  443. table#list th {
  444.     background: #33FE33;
  445.     text-align: left;
  446.     height: 1em;
  447.     white-space: nowrap;
  448. }
  449. table#list th a { color: #33FE33; }
  450. table#list tr { background: #0A0D09; }
  451. table#list tr:hover { background: #0A0D09; }
  452. .tar { text-align: right; } /* what's this again? */
  453. .tal { text-align: right; } /* what's this again? */
  454. #viewswitch { font-weight: normal; }
  455. #viewswitch a { font-weight: normal; }
  456.  
  457. table#list span.has-cover {
  458.     background-position: 0 -111px;
  459.     width: 12px;
  460. }
  461. table#list span.has-comment { background-position: -13px -111px; }
  462. table#list a.dl-torrent span,
  463. table#list a.dl-magnet span,
  464. table#list span.has-comment span,
  465. table#list span.has-cover span { display: none; }
  466. table#list .dl-torrent { margin: 0 -1px -3px 0; }
  467. table#list .dl-magnet { margin: 0 -0px -2px 0; }
  468.  
  469.  
  470.  
  471. /* forms */
  472. #login, #register, #recover {
  473.     margin: 0 auto 3em auto;
  474.     max-width: 330px;
  475. }
  476. .form input {
  477.     float: right;
  478. }
  479. .form input[type="submit"] {
  480.     margin-top: 0.5em;
  481. }
  482. .form_msg {
  483.     text-align: right;
  484. }
  485.  
  486. /* settings (profile) */
  487. #settings table {
  488.     margin: 0 auto 3em auto;
  489.     border: 0px solid #333;
  490. }
  491. #settings table tr > * {
  492.     text-align: left;
  493.     padding: 0.2em 1em;
  494. }
  495.  
  496.  
  497. /* public profile */
  498. #pubpro {
  499.     border: 1px solid #333;
  500.     min-height: 300px;
  501. }
  502. #pubpro ul {
  503.     text-align: center;
  504. }
  505. #pubpro ul li {
  506.     float: left;
  507.     padding: 0 5px;
  508. }
  509. #pubpro #pic {
  510.     padding: 5px;
  511.     border: 1px solid #f4f4f4;
  512.     float: left;
  513.     clear: both;
  514. }
  515.  
  516.  .css-input { border-width:2px; border-style:solid; background-color:#33fe33; border-color:#33fe33; color:#0a0d09; font-size:20px; padding:2px; border-radius:0px; box-shadow: 0px 0px 0px 0px rgba(42,42,42,.0); font-family:VT323;  }
  517.          .css-input:focus { outline:none; }
  518. ::-webkit-input-placeholder {
  519.     color:    #0a0d09;
  520. }
  521. :-moz-placeholder {
  522.     color:    #0a0d09;
  523. }
  524. ::-moz-placeholder {
  525.     color:    #0a0d09;
  526. }
  527. :-ms-input-placeholder {
  528.     color:    #0a0d09;
  529. }
  530.  
  531. /* Different color for some fields */
  532.  
  533. #name_2::-webkit-input-placeholder,
  534. #textarea_2::-webkit-input-placeholder
  535. {
  536.   color:    #0a0d09;
  537. }
  538.  
  539. #name_2:-moz-placeholder,
  540. #textarea_2:-moz-placeholder
  541. {
  542.   color:    #0a0d09;
  543. }
  544.  
  545. #name_2::-moz-placeholder,
  546. #textarea_2::-moz-placeholder
  547. {
  548.   color:    #0a0d09;
  549. }
  550.  
  551. #name_2:-ms-input-placeholder,
  552. #textarea_2:-ms-input-placeholder
  553. {
  554.   color:    #0a0d09;
  555. }
  556.  
  557. .btn {
  558.   -webkit-border-radius: 0;
  559.   -moz-border-radius: 0;
  560.   border-radius: 0px;
  561.   font-family: VT323;
  562.   color: #33FE33;
  563.   font-size: 16px;
  564.   background: #0A0D09;
  565.   padding: 5px 10px 5px 10px;
  566.   border: solid #33FE33 2px;
  567.   text-decoration: none;
  568. }
  569.  
  570. .btn:hover {
  571.   text-decoration: none;
  572. }
  573.  
  574. @-webkit-keyframes typing {
  575.     from { width: 0 }
  576.     to { width:7.8em }
  577. }
  578.  
  579. @-moz-keyframes typing {
  580.     from { width: 0 }
  581.     to { width:7.8em }
  582. }
  583.  
  584. @-webkit-keyframes blink-caret {
  585.     from, to { border-color: transparent }
  586.     50% { border-color: #33FE33 }
  587. }
  588.  
  589. @-moz-keyframes blink-caret {
  590.     from, to { border-color: transparent }
  591.     50% { border-color: #33FE33 }
  592. }
  593.  
  594. body { font-family: VT323; }
  595.  
  596. h3 {
  597.     text-align: center;
  598.     font-size:150%;
  599.     width:7.8em;
  600.     white-space:nowrap;
  601.     overflow:hidden;
  602.     border-right: .1em solid #33FE33;
  603.    
  604.     -webkit-animation: typing 8s steps(19, end), /* # of steps = # of characters */
  605.                         blink-caret 1s step-end infinite;
  606.     -moz-animation: typing 8s steps(19, end), /* # of steps = # of characters */
  607.                         blink-caret 1s step-end infinite;
  608. }
  609.  
  610. input[type=checkbox] {
  611.     width: 15px;
  612.     height: 15px;
  613.     background-repeat: no-repeat;
  614.     background-position: center center;
  615.     background-size: contain;
  616.     -webkit-appearance: none;
  617.     outline: 0;
  618. }
  619. input[type=checkbox]:checked {
  620.     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#33FE33" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
  621. }
  622. input[type=checkbox]:not(:checked) {
  623.     background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" fill="#33FE33" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
  624. }
RAW Paste Data
Top