titleproblems

Keep It Simple (v1.2) - Subreddit Theme

Jul 28th, 2013
566
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.04 KB | None | 0 0
  1. /*
  2. ==============================================================================================================
  3.         Welcome to /r/SUBREDDIT-NAME-HERE 's stylesheet.
  4. ==============================================================================================================
  5.         This subreddit is using the "Keep It Simple" theme written by /u/titleproblems
  6.         It can be found at /r/KeepItSimple
  7.         Development of the theme can be followed at /r/KeepItSimpleDev
  8.         Other themes, templated and other goods from titleproblems can be found on /r/titleproblems
  9. ==============================================================================================================
  10. */
  11.  
  12. /***** Body *****/
  13.  
  14. body {
  15.     font-family: arial, sans-serif;
  16.     background-color: #f8f8f8;
  17. }
  18.  
  19. /***** END of Body *****/
  20.  
  21.  
  22. /***** Header *****/
  23.  
  24. #header {
  25.     background-color: #9ad3ff;
  26.     border-bottom: 1px solid #87bbe5;
  27.     box-shadow: 0px 0px 10px #ccc;
  28.     z-index: 10001 !important;
  29. }
  30.  
  31. #header .pagename {
  32.     color: #474747;
  33.     border: 1px solid #f4f4f4;
  34.     background-color: #fbfbfb;
  35.     box-shadow: 0px 0px 1px #cbcaca;
  36.     padding: 5px;
  37.     font-size: 14px;
  38.     font-variant: normal;
  39. }
  40.  
  41. #header-bottom-right {
  42.     /*position: absolute;*/
  43.     /*margin-top: 5px;*/
  44.     right: 0px;
  45.     top: auto !important;
  46.     bottom: -6px !important;
  47.     border-bottom: 1px solid #f4f4f4;
  48.     background-color: #fbfbfb;
  49.     box-shadow: 0px 0px 1px #cbcaca;
  50.     vertical-align: bottom !important;
  51. }
  52.  
  53. #userbarToggle {
  54.     background-color: #fbfbfb !important;
  55.     background: #fbfbfb !important;
  56.     box-shadow: 0px 0px 1px #cbcaca;
  57.     border-radius: 0px !important;
  58.     border-bottom: 1px solid #f4f4f4;
  59.     border-left: 1px solid #f4f4f4;
  60.     border-right: 1px solid #f4f4f4 !important;
  61. }
  62.  
  63. #sr-header-area {
  64.     border-bottom: 1px solid #f4f4f4;
  65.     background-color: #fbfbfb;
  66.     box-shadow: 0px 0px 1px #cbcaca;
  67. }
  68.  
  69. /***** END of Header *****/
  70.  
  71. /***** Tabmenu *****/
  72.  
  73. #header .tabmenu {
  74.     border: 1px solid #f4f4f4;
  75.     background-color: #fbfbfb;
  76.     box-shadow: 0px 0px 1px #cbcaca;
  77.     padding: 5px;
  78.     padding-bottom: 6px;
  79.     margin: 0px 0px -6px;
  80. }
  81. #header .tabmenu li { margin: 0px 0px; }
  82. #header .tabmenu li a {
  83.     background: transparent;
  84.     border-right: 1px solid #f4f4f4;
  85.     border-left: 1px solid #f4f4f4;
  86.     color: #474747;
  87. }
  88.  
  89. #header .tabmenu li a:hover { background-color: transparent; }
  90.  
  91. #header .tabmenu li.selected a {
  92.     border-top: 0px;
  93.     border-bottom: 0px;
  94.     color: #000;
  95. }
  96.  
  97. /***** END of Tabmenu *****/
  98.  
  99. /***** Side *****/
  100.  
  101. .side {
  102.     margin-top: 50px;
  103.     margin-right: 15px;
  104.     padding-top: 25px;
  105.     padding-left: 10px;
  106.     padding-right: 10px;
  107.     border: 1px solid #f4f4f4;
  108.     background-color: #fbfbfb;
  109.     margin-left: 10px;
  110. }
  111.  
  112.     /* Credits goes to /u/cryptonaut, this is a modified version of what he has on /r/Naut (AMAZING theme, check it out!)*/
  113.         .titlebox blockquote h5:nth-of-type(1) {
  114.             position: fixed;
  115.             top: 0px;
  116.             right: 0px;
  117.             left: 0px;
  118.             z-index: 1000;
  119.             height: 29px;
  120.             background-color: #9ad3ff;
  121.             padding: 2px;
  122.             box-shadow: 0px 0px 2px #ccc;
  123.             color: #000;
  124.             text-align: center;
  125.             font-weight: normal;
  126.             font-size: 12px;
  127.             line-height: 30px;
  128.         }
  129.  
  130.             .titlebox blockquote h5:nth-of-type(1) a {
  131.                 margin: 0px 10px;
  132.                 padding-bottom: 4px;
  133.                 color: #f9f8f8;
  134.             }
  135.  
  136.                 .titlebox blockquote h5:nth-of-type(1) a:hover {
  137.                     color: #e5e0e0;
  138.                 }
  139.  
  140.  
  141. .titlebox h6:first-of-type {
  142.     position: absolute;
  143.     top: 75px;
  144.     left: 50px;
  145.     color: #474747;
  146. }
  147.  
  148.     .titlebox h6:first-of-type::before {
  149.         display: inline-block;
  150.         content: 'ⓘ';
  151.         font-size: 18px !important;
  152.         font-weight: bold !important;
  153.         font-family: Georgia;
  154.         color: #f1f1f1 !important;
  155.         background-color: #9ad3ff !important;
  156.         border-radius: 2px;
  157.         padding: 3px;
  158.         margin-right: 8px;
  159.     }
  160.  
  161. .sidebox.submit.submit-link {
  162.  
  163. }
  164.  
  165. .sidebox.submit.submit-text {
  166.  
  167. }
  168.  
  169. .morelink {
  170.     z-index: 50;
  171.     border: 1px solid #f4f4f4;
  172.     border-bottom: 2px solid #f4f4f4;
  173.     border-right: 2px solid #f4f4f4;
  174.     background: #fbfbfb;
  175.     box-shadow: 0px 0px 1px #cbcaca;
  176.     padding-top: 2px;
  177.     padding-bottom: 2px;
  178.     overflow: hidden;
  179. }
  180.  
  181. .morelink:hover {
  182.     background: none;
  183.     background-color: #eee !important;
  184.     color: #000;
  185.     border: 1px solid #e5e4e4;
  186.     border-bottom: 2px solid #e5e4e4;
  187.     border-right: 2px solid #e5e4e4;
  188. }
  189.  
  190. .morelink a {
  191.     color: #474747 !important;
  192.     font-size: 15px;
  193.     font-family: verdana, sans-serif;
  194. }
  195.  
  196. .morelink a:hover {
  197.     color: #000 !important;
  198. }
  199.  
  200. .morelink .nub { display: none; }
  201.  
  202. .sidecontentbox .content {
  203.     width: 290px;
  204. }
  205.  
  206. #search {
  207.     margin-top: -20px;
  208.     margin-bottom: 20px;
  209.     border: 1px solid #87bbe5;
  210.     background-color: #9ad3ff;
  211.     padding-top: 10px;
  212.     padding-bottom: 10px;
  213.     padding-left: 2px;
  214.     padding-right: 2px;
  215. }
  216.  
  217. #search input[type="text"] {
  218.     border-radius: 15px;
  219.     border: 1px solid #b0d6fd;
  220.     text-indent: 5px;
  221.     font-size: 15px;
  222.     width: 90%;
  223.     margin-left: 12px;
  224.     color: #696969;
  225. }
  226.  
  227. #searchexpando {
  228.     background: transparent !important;
  229.     border: none !important;
  230. }
  231.  
  232. h1.redditname { font-family: arial, sans-serif; }
  233.  
  234. .sidecontentbox .content { border: 0px !important; }
  235.  
  236. span.subscribers:before {
  237.     display: inline-block !important;
  238.     content: '🌎';
  239.     margin-right: 3px;
  240. }
  241.  
  242. /***** END of Side *****/
  243.  
  244. /***** Content *****/
  245.  
  246. .content {
  247.     overflow: hidden;
  248.     margin-left: 20px;
  249.     margin-top: 50px;
  250.     padding: 5px;
  251.     border: 1px solid #f4f4f4;
  252.     background-color: #fbfbfb;
  253. }
  254.  
  255. .link {
  256.     padding: 5px;
  257. }
  258.  
  259. .link.last-clicked { border: 0px !important; }
  260.  
  261. p.title { font-family: Georgia !important; }
  262.  
  263. .roundfield, #link-desc.infobar, #text-desc.infobar {
  264.     border: 1px solid #b0d6fd;
  265.     background-color: #cee3f8;
  266.     border-radius: 0px;
  267. }
  268.  
  269. .link .thumbnail.self {
  270.     line-height: 50px;
  271. }
  272.  
  273. span.rank { font-weight: bold; font-family: Georgia !important; }
  274.  
  275. /* New voting arrows */
  276.     .arrow.up {
  277.         background-image: none !important;
  278.         background: transparent !important;
  279.     }
  280.  
  281.         .arrow.up:after {
  282.             content: '▲' !important;
  283.             display: inline-block !important;
  284.             color: #c6c6c6 !important;
  285.             font-size: 15px;
  286.     }
  287.  
  288.     .arrow.upmod {
  289.         background-image: none !important;
  290.         background: transparent !important;
  291.     }
  292.  
  293.         .arrow.upmod:after {
  294.             content: '▲' !important;
  295.             display: inline-block !important;
  296.             color: #ff8b60 !important;
  297.             font-size: 15px;
  298.         }
  299.  
  300.     .arrow.down {
  301.         background-image: none !important;
  302.         background: transparent !important;
  303.     }
  304.  
  305.         .arrow.down:after {
  306.             content: '▼' !important;
  307.             display: inline-block !important;
  308.             color: #c6c6c6 !important;
  309.             font-size: 15px;
  310.         }
  311.  
  312.     .arrow.downmod {
  313.         background-image: none !important;
  314.         background: transparent !important;
  315.     }
  316.  
  317.  
  318.         .arrow.downmod:after {
  319.             content: '▼' !important;
  320.             display: inline-block !important;
  321.             color: #9494ff !important;
  322.             font-size: 15px;
  323.         }
  324.  
  325.     div.score.likes, div.score.unvoted, div.scores.dislikes {
  326.         margin-top: 5px;
  327.     }
  328.  
  329. /* END New voting arrows */
  330.  
  331. /* Custom thumbnails */
  332.     .link .thumbnail.self { background: transparent !important; }
  333.  
  334.     .link .thumbnail.self:after {
  335.         display: inline-block !important;
  336.         content: 'ⓘ!' !important;
  337.         font-size: 47px !important;
  338.         margin-left: 10px !important;
  339.         color: #e5e5e5 !important;
  340.     }
  341.  
  342.     .link .thumbnail.default { background: transparent !important; }
  343.  
  344.     .link .thumbnail.default:after {
  345.         display: inline-block !important;
  346.         content: '↳?' !important;
  347.         font-size: 40px !important;
  348.         margin-left: 10px !important;
  349.         color: #e5e5e5 !important;
  350.     }
  351. /* END Custom thumbnails */
  352.  
  353.  
  354. /* Comments button */
  355.     a.comments {
  356.             color: green !important;
  357.             padding: 3px !important;
  358.     }
  359.  
  360.     a.comments:before {
  361.         display: inline-block !important;
  362.         content: '✐';
  363.         color: green;
  364.         font-weight: bold;
  365.         font-size: 15px;
  366.         margin-right: 3px;
  367.     }
  368. /* END Comments button */
  369.  
  370. /* Share button */
  371.     span.share-button.toggle {
  372.         padding: 3px !important;
  373.     }
  374.  
  375.     span.share-button.toggle:before {
  376.         display: inline-block !important;
  377.         content: '⇥';
  378.         font-weight: bold;
  379.         font-size: 15px;
  380.         margin-right: 3px;
  381.         color: #777;
  382.     }
  383. /* END Share button */
  384.  
  385. /* Save button */
  386.     form.state-button.save-button {
  387.             padding: 3px !important;
  388.     }
  389.  
  390.     form.state-button.save-button:before {
  391.         display: inline-block !important;
  392.         content: '↴';
  393.         font-weight: bold;
  394.         font-size: 15px;
  395.         margin-right: 3px;
  396.         color: #777;
  397.     }
  398. /* END Save button */
  399.  
  400. /* Hide button */
  401.     form.state-button.hide-button {
  402.             padding: 3px !important;
  403.     }
  404.  
  405.     form.state-button.hide-button:before {
  406.         display: inline-block !important;
  407.         content: '⊗';
  408.         font-weight: bold;
  409.         font-size: 15px;
  410.         margin-right: 3px;
  411.         color: #777;
  412.     }
  413. /* END Hide button */
  414.  
  415. /* Delete button */
  416.     form.toggle.del-button, form.toggle.remove-button {
  417.         padding: 3px;
  418.     }
  419.  
  420.     form.toggle.del-button:before, form.toggle.remove-button:before {
  421.         display: inline-block !important;
  422.         content: '✕';
  423.         color: red;
  424.         font-weight: bold;
  425.         font-size: 15px;
  426.         margin-right: 3px;
  427.     }
  428. /* END Delete button */
  429.  
  430. /* Approve button */
  431.     FORM.state-button.approve-button {
  432.         padding: 3px;
  433.     }
  434.  
  435.     FORM.state-button.approve-button:before {
  436.         display: inline-block !important;
  437.         content: '✓';
  438.         color: green;
  439.         font-weight: bold;
  440.         font-size: 15px;
  441.         margin-right: 3px;
  442.     }
  443. /* END Approve button */
  444.  
  445. /* Report button */
  446.     FORM.toggle.report-button {
  447.         padding: 3px;
  448.     }
  449.  
  450.     FORM.toggle.report-button:before {
  451.         display: inline-block !important;
  452.         content: '⚑';
  453.         color: red;
  454.         font-size: 15px;
  455.         margin-right: 3px;
  456.     }
  457. /* END Report button */
  458.  
  459. /* NSFW button */
  460.     .nsfw-stamp acronym {
  461.         font-family: Georgia;
  462.         border-radius: 0px;
  463. }
  464. /* END NSFW button */
  465.  
  466. /* Show up on hover */
  467. /* === Taken from Cryptonauts theme /r/Naut === */
  468. .link .entry li .comments { visibility: visible !important; }
  469. #siteTable div.thing ul {visibility: hidden;}
  470. #siteTable div.thing:hover ul {visibility: visible !important;}
  471. #siteTable li.rounded.nsfw-stamp.stamp { visibility: visible !important; }
  472. /* END Show up on hover */
  473.  
  474. /***** END of Content *****/
  475.  
  476. /***** RES Stuff *****/
  477.  
  478. .RES-keyNav-activeElement, .commentarea .RES-keyNav-activeElement.entry .noncollapsed, .entry.likes.RES-keyNav-activeElement.lcTagged {
  479.     outline: 0px !important;
  480.     border-bottom: 1px solid #f4f4f4;
  481.     border-right: 1px solid #f4f4f4;
  482.     background-color: transparent !important;
  483.     background: transparent !important;
  484. }
  485.  
  486. body .beta-notice {
  487.     top: 18px!important;
  488. }
  489. body.res .beta-notice {
  490.     top: 18px!important;
  491. }
  492.  
  493. /***** END of RES Stuff *****/
  494.  
  495. /***** Link Flair Stuff *****/
  496.  
  497. .linkflairlabel {
  498.     background: transparent;
  499.     border: none;
  500. }
  501.  
  502. .flairoptionpane .linkflairlabel { display: inline-block !important; }
  503.  
  504. /* Mod Post flair */
  505. .linkflair-mod .linkflairlabel {
  506.     background-color: #9ad3ff !important;
  507.     font-weight: bold;
  508.     color: #fbfbfb;
  509.     font-size: 12px;
  510.     padding: 3px;
  511.     display: none !important;
  512. }
  513.  
  514. .flairoptionpane .linkflair-mod .linkflairlabel { display: inline-block !important; }
  515. .linkflair-mod span.rank { color: #9ad3ff !important; font-weight: bold; width: 80px !important; }
  516.  
  517. .linkflair-mod span.rank:after {
  518.     display: inline-block !important;
  519.     content: 'Mod Post';
  520.     background-color: #9ad3ff !important;
  521.     font-weight: bold !important;
  522.     color: #fbfbfb !important;
  523.     font-size: 12px;
  524.     padding: 3px;
  525.     margin-left: 5px;
  526.     font-family: Arial, sans-serif !important;
  527. }
  528.  
  529. .linkflair-mod p.title:first-letter {
  530.     font-weight: bold !important;
  531.     color: #9ad3ff !important;
  532.     font-size: 20px !important;
  533. }
  534.  
  535. .linkflair-mod .thumbnail { display: none !important; }
  536.  
  537. /* END Mod Post flair */
  538.  
  539. /* Announcement flair */
  540. .linkflair-announcement .linkflairlabel {
  541.     background-color: #97ee9a !important;
  542.     font-weight: bold;
  543.     color: #fbfbfb;
  544.     font-size: 12px;
  545.     padding: 3px;
  546.     display: none !important;
  547. }
  548.  
  549. .flairoptionpane .linkflair-announcement .linkflairlabel { display: inline-block !important; }
  550. .linkflair-announcement span.rank { color: #97ee9a !important; font-weight: bold; width: 120px !important; }
  551.  
  552. .linkflair-announcement span.rank:after {
  553.     display: inline-block !important;
  554.     content: 'Announcement';
  555.     background-color: #97ee9a !important;
  556.     font-weight: bold !important;
  557.     color: #fbfbfb !important;
  558.     font-size: 12px;
  559.     padding: 3px;
  560.     margin-left: 5px;
  561.     font-family: Arial, sans-serif !important;
  562. }
  563.  
  564. .linkflair-announcement p.title:first-letter {
  565.     font-weight: bold !important;
  566.     color: #97ee9a !important;
  567.     font-size: 20px !important;
  568. }
  569.  
  570. .linkflair-announcement .thumbnail { display: none !important; }
  571.  
  572. /* END Announcement flair */
  573.  
  574. /* Meta flair */
  575. .linkflair-meta .linkflairlabel {
  576.     background-color: #d3abf4 !important;
  577.     font-weight: bold;
  578.     color: #fbfbfb;
  579.     font-size: 12px;
  580.     padding: 3px;
  581.     display: none !important;
  582. }
  583.  
  584. .flairoptionpane .linkflair-meta .linkflairlabel { display: inline-block !important; }
  585. .linkflair-meta span.rank { color: #d3abf4 !important; font-weight: bold; width: 50px !important; }
  586.  
  587. .linkflair-meta span.rank:after {
  588.     display: inline-block !important;
  589.     content: 'Meta';
  590.     background-color: #d3abf4 !important;
  591.     font-weight: bold;
  592.     color: #fbfbfb !important;
  593.     font-size: 12px;
  594.     padding: 3px;
  595.     margin-left: 5px;
  596.     font-family: Arial, sans-serif !important;
  597. }
  598.  
  599. .linkflair-meta p.title:first-letter {
  600.     font-weight: bold !important;
  601.     color: #d3abf4 !important;
  602.     font-size: 20px !important;
  603. }
  604.  
  605. .linkflair-meta .thumbnail { display: none !important; }
  606.  
  607. /* END Meta flair */
  608.  
  609. /* Blue flair */
  610. .linkflair-blue .linkflairlabel {
  611.     background-color: #9ad3ff !important;
  612.     font-weight: bold;
  613.     color: #fbfbfb;
  614.     font-size: 12px;
  615.     padding: 3px;
  616.     display: inline-block !important;
  617. }
  618. /* END Blue flair */
  619.  
  620. /* Green flair */
  621. .linkflair-green .linkflairlabel {
  622.     background-color: #97ee9a !important;
  623.     font-weight: bold;
  624.     color: #fbfbfb;
  625.     font-size: 12px;
  626.     padding: 3px;
  627.     display: inline-block !important;
  628. }
  629. /* END Green flair */
  630.  
  631. /* Purple flair */
  632. .linkflair-purple .linkflairlabel {
  633.     background-color: #d3abf4 !important;
  634.     font-weight: bold;
  635.     color: #fbfbfb;
  636.     font-size: 12px;
  637.     padding: 3px;
  638.     display: inline-block !important;
  639. }
  640. /* END Purple flair */
  641.  
  642. /* Red flair */
  643. .linkflair-red .linkflairlabel {
  644.     background-color: #ff7676 !important;
  645.     font-weight: bold;
  646.     color: #fbfbfb;
  647.     font-size: 12px;
  648.     padding: 3px;
  649.     display: inline-block !important;
  650. }
  651. /* END Red flair */
  652.  
  653.  
  654. /***** END of Link Flair Stuff *****/
  655.  
  656. /***** User Flair Stuff *****/
  657.  
  658. .flair {
  659.     background: transparent !important;
  660.     border: none !important;
  661. }
  662.  
  663. /***** End of User Flair Stuff *****/
  664.  
  665. /***** Other *****/
  666.  
  667. /* stylesheet fix */
  668. #subreddit_stylesheet { display: block; overflow: hidden; }
  669. .sheets { margin: 0;}
  670. /* END stylesheet fix */
  671.  
  672. .footer.rounded {
  673.     border-radius: 0px;
  674.     border: 1px solid #f4f4f4;
  675.     background-color: #fbfbfb;
  676.     box-shadow: 0px 0px 1px #cbcaca;
  677. }
  678.  
  679. .footer.rounded:after {
  680.     display: inline-block;
  681.     content: 'Subreddit theme designed and coded by /u/titleproblems. Check out /r/titleroblems for more!';
  682.     width: 100px;
  683.     height: 100px;
  684.     margin-top: 10px;
  685.     border-left: 1px solid #ccc;
  686.     padding-left: 10px;
  687.     padding-right: 10px;
  688.     padding-bottom: 10px;
  689.     padding-top: 0px;
  690.     text-align: left;
  691. }
  692.  
  693. .footer.rounded:before {
  694.     display: block;
  695.     content: 'Subreddit theme: Keep It Simple (v1.2)';
  696.     font-size: 20px;
  697. }
  698.  
  699. /* Text Symbols */
  700.     /*
  701.         http://text-symbols.com/
  702.         ✓
  703.         ☇
  704.         ⌦
  705.         ⌫
  706.         ⇶
  707.         ⇵
  708.         ↺
  709.         ⇲
  710.         ▲ ▼
  711.         ⓘ
  712.     */
  713.  
  714. /***** END of Other *****/
Add Comment
Please, Sign In to add comment