Dobbie03

Reddit

Jan 3rd, 2018
145
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.58 KB | None | 0 0
  1. /*
  2. Subreddit theme created by Unix121
  3. Github: github.com/unix121
  4. */
  5.  
  6. /* Basic Configuration */
  7. *, :before, :after {
  8. -webkit-box-sizing: border-box;
  9. -moz-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12.  
  13. body {
  14. overflow-x: hidden;
  15. background: #545252;
  16. min-width: 920px;
  17. }
  18.  
  19. /* User Bar */
  20. #header-bottom-right {
  21. position: absolute;
  22. top: 0;
  23. right: 0;
  24. width: auto;
  25. max-width: 340px;
  26. height: 24px;
  27. background: none;
  28. font-size: 11px;
  29. padding: 5px 8px 4px 2px;
  30. }
  31.  
  32. body:not(.loggedin) #header-bottom-right {
  33. max-width: 340px;
  34. }
  35.  
  36. #header-bottom-right a {
  37. color: rgba(255,255,255,0.7);
  38. }
  39.  
  40. #header-bottom-right a:hover {
  41. text-decoration: underline;
  42. }
  43.  
  44. .beta-hint a {
  45. margin-left: -16px;
  46. width: 16px;
  47. height: 16px;
  48. background: url(%%ArchLabs-logo-2%%) -48px -32px no-repeat;
  49. }
  50.  
  51. .user a {
  52. max-width: 120px;
  53. overflow: hidden;
  54. display: inline-block;
  55. text-overflow: ellipsis;
  56. }
  57.  
  58. .user .userkarma {
  59. font-weight: 400;
  60. color: rgba(255,255,255,0.4);
  61. border: none;
  62. font-size: 9px;
  63. transition: all .15s ease;
  64. }
  65.  
  66. .separator, .user {
  67. color: rgba(255,255,255,0.4);
  68. }
  69.  
  70. #mail, #modmail {
  71. width: 15px;
  72. height: 10px;
  73. background-image: url(%%ArchLabs-spritesheet%%) !important;
  74. background-repeat: no-repeat !important;
  75. background-color: transparent;
  76. transition: all .25s ease;
  77. }
  78.  
  79. #mail {
  80. top: -0px;
  81. overflow: visible;
  82. }
  83.  
  84. #mail.nohavemail {
  85. background-position: -48px -70px;
  86. }
  87.  
  88. #mail.havemail {
  89. background-position: -48px -80px;
  90. opacity: 1;
  91. }
  92.  
  93. .message-count {
  94. background: #f50;
  95. position: relative;
  96. top: -1px;
  97. color: #cbcbcb !important;
  98. }
  99.  
  100. #mail.havemail:before {
  101. position: fixed;
  102. padding: 16px 24px;
  103. bottom: 24px;
  104. z-index: 100;
  105. border-radius: 2px;
  106. box-shadow: 0 1px 5px rgba(0,0,0,0.24);
  107. color: #cbcbcb;
  108. width: 300px;
  109. height: 48px;
  110. left: 32px;
  111. content: "You have new messages!";
  112. text-indent: 0;
  113. font: 14px Lato,Arial,sans-serif;
  114. line-height: 1;
  115. -webkit-transform: translateY(112px);
  116. transform: translateY(112px);
  117. transition: background .25s ease,box-shadow .25s ease;
  118. }
  119.  
  120. #mail.havemail:hover:before {
  121. background-color: #ec5b5b;
  122. box-shadow: 0 3px 12px rgba(0,0,0,0.48);
  123. }
  124.  
  125. #mail.havemail:active:before {
  126. background-color: #c73d3d;
  127. box-shadow: 0 4px 14px rgba(0,0,0,0.76);
  128. }
  129.  
  130. .commentarea .panestack-title, .commentarea .menuarea {
  131. z-index: 0;
  132. }
  133.  
  134. #modmail {
  135. top: -5px;
  136. }
  137.  
  138. #modmail.nohavemail {
  139. background-position: -48px -70px;
  140. }
  141.  
  142. #modmail.havemail {
  143. background-position: -48px -70px;
  144. opacity: 1;
  145. }
  146.  
  147. #new_modmail {
  148. transform: scale(.85);
  149. }
  150.  
  151. /* Header */
  152. #header {
  153. margin: 0;
  154. height: 196px;
  155. border: none;
  156. background: url(%%ArchLabs-spritesheet-1%%) 50% 50% / cover no-repeat;
  157. z-index: 1;
  158. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  159. }
  160.  
  161. /* Bar */
  162. #sr-header-area {
  163. background: rgba(0,0,0,0.08);
  164. border: none;
  165. transition: all .15s ease;
  166. height: 24px;
  167. line-height: 23px;
  168. }
  169.  
  170. #sr-header-area .width-clip {
  171. right: 300px;
  172. }
  173.  
  174. body:not(.loggedin) #sr-header-area .width-clip {
  175. right: 340px;
  176. }
  177.  
  178. #sr-header-area .sr-list {
  179. margin-right: 48px;
  180. }
  181.  
  182. #sr-header-area .sr-bar a, #sr-more-link, #sr-header-area .separator, #sr-header-area .dropdown.srdrop .selected {
  183. background: none;
  184. color: rgba(255,255,255,0.4);
  185. transition: all .15s ease;
  186. }
  187.  
  188. #sr-header-area:hover .sr-bar a, #sr-header-area:hover #sr-more-link, #sr-header-area:hover .seperator, #sr-header-area:hover .dropdown.srdrop .selected {
  189. color: rgba(255,255,255,0.8);
  190. }
  191.  
  192. #sr-header-area .sr-bar a:hover, #sr-more-link:hover, #sr-header-area .dropdown.srdrop .selected:hover {
  193. background: none;
  194. border: none;
  195. transition: all .15s ease;
  196. }
  197.  
  198. a.random.choice {
  199. padding-top: 2px;
  200. position: relative;
  201. display: inline-block;
  202. margin-top: -2px;
  203. }
  204.  
  205. .sr-bar .separator {
  206. color: transparent !important;
  207. }
  208.  
  209. #sr-header-area .dropdown.srdrop .selected {
  210. margin: 0 12px 0 8px;
  211. padding: 0;
  212. background-image: none;
  213. }
  214.  
  215. #sr-header-area .dropdown.srdrop .selected:hover {
  216. text-decoration: underline;
  217. }
  218.  
  219. #sr-header-area .dropdown.srdrop .selected:after {
  220. display: inline-block;
  221. content: "▼";
  222. margin-left: 4px;
  223. font-size: 10px;
  224. }
  225.  
  226. #sr-header-area .dropdown.srdrop .selected:hover:after {
  227. text-decoration: none;
  228. }
  229.  
  230.  
  231. /* Subreddits Dropdown */
  232. #sr-header-area .drop-choices.srdrop {
  233. border-radius: 2px;
  234. box-shadow: 0 1px 4px rgba(0,0,0,.24);
  235. opacity: 0;
  236. top: 14px !important;
  237. transition: all .2s cubic-bezier(.4,0,.2,1);
  238. visibility: hidden;
  239. border: none;
  240. }
  241.  
  242. #sr-header-area .drop-choices.srdrop.inuse {
  243. opacity: 1;
  244. top: 23px !important;
  245. visibility: visible;
  246. }
  247.  
  248. #sr-header-area .drop-choices.srdrop.inuse a:first-child {
  249. border-radius: 2px 2px 0 0;
  250. }
  251.  
  252. #sr-header-area .drop-choices a.choice {
  253. border: 0;
  254. color: #a9a8a8;
  255. padding: 3px 12px;
  256. transition: none;
  257. }
  258.  
  259. #sr-header-area .drop-choices a.choice:hover {
  260. background: #666565;
  261. color: #a9a8a8;
  262. }
  263.  
  264. /* Clickables */
  265. a {
  266. color: #a9a8a8;
  267. transition: color .30s ease;
  268. }
  269.  
  270. ::-moz-selection {
  271. background: #545252;
  272. text-shadow: none;
  273. color: #a9a8a8;
  274. }
  275.  
  276. ::selection {
  277. background: #545252;
  278. text-shadow: none;
  279. color: #a9a8a8;
  280. }
  281.  
  282. :focus {
  283. outline: none !important;
  284. }
  285.  
  286. body .content .text, body .content textarea, body .content input[type=text], body .content input[type=password], .side .spacer input, body .content input[type=url] {
  287. background: #545252;
  288. border: 2px solid #cbcbcb;
  289. color: #DFE1E8;
  290. box-shadow: none;
  291. transition: border-color .15s ease,color .15s ease;
  292. padding: 6px 12px;
  293. }
  294.  
  295. body .content .text:hover, body .content textarea:hover, body .content input[type=text]:hover, body .content input[type=password]:hover, .side .spacer input:hover, body .content input[type=url]:hover {
  296. border-color: #cbcbcb;
  297. }
  298.  
  299. body .content .text:focus, body .content textarea:focus, body .content input[type=text]:focus, body .content input[type=password]:focus, .side .spacer input:active, body .content input[type=url]:focus {
  300. border-color: #cbcbcb;
  301. color: #DFE1E8;
  302. }
  303.  
  304. body .btn, body button, .c-btn-primary, .wiki-page .wiki-page-content .wiki_button {
  305. margin: 4px 16px 4px 0;
  306. padding: 0 16px;
  307. background: #545252;
  308. border: none;
  309. border-radius: 1px;
  310. color: #dfe1e8;
  311. text-transform: uppercase;
  312. font-weight: 700;
  313. height: 30px;
  314. line-height: 36px;
  315. font-size: 14px;
  316. font-family: Lato,Arial,sans-serif;
  317. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  318. transition: box-shadow .2s cubic-bezier(.4,0,1,1),background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
  319. }
  320.  
  321. .btn:hover, button:hover, .c-btn-primary:hover, .wiki-page .wiki-page-content .wiki_button {
  322. color: #DFE1E8;
  323. background: #545252;
  324. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  325. }
  326.  
  327. .btn:active, button:active, .c-btn-primary:active, .wiki-page .wiki-page-content .wiki_button {
  328. color: #DFE1E8;
  329. background: #545252;
  330. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  331. }
  332.  
  333. .c-btn-primary:active {
  334. margin-top: 4px;
  335. }
  336.  
  337. /* Header Start */
  338. #header-img.default-header, #header-img {
  339. z-index: 99;
  340. width: 0;
  341. padding-left: 50px;
  342. height: 50px;
  343. background: url(%%ArchLabs-logo-3%%) -0px 0;
  344. margin: 0 8px 0 0;
  345. vertical-align: top;
  346. font-size: 0;
  347. }
  348.  
  349. #header-img.default-header:hover, #header-img:hover {
  350. background-position: -0px 0;
  351. }
  352.  
  353. /* Reddit Name */
  354. #header .pagename {
  355. font-size: 0;
  356. }
  357.  
  358. #header .pagename a {
  359. display: inline-block;
  360. line-height: 20px;
  361. color: #DFE1E8;
  362. font: normal 700 42px/42px Lato,Arial,sans-serif;
  363. text-shadow: 0 1px 12px rgba(0,0,0,0.2);
  364. }
  365.  
  366. /* Tabmenu - Hot / New / Top */
  367. #header-bottom-left {
  368. position: absolute;
  369. top: 92px;
  370. left: 16px;
  371. right: 384px;
  372. }
  373.  
  374. #header .tabmenu {
  375. margin: 12px 0 0;
  376. display: block;
  377. height: 42px;
  378. line-height: 42px;
  379. border: none;
  380. }
  381.  
  382. #header .tabmenu:before {
  383. content: "";
  384. display: block;
  385. position: absolute;
  386. left: -16px;
  387. right: -384px;
  388. background: rgba(0,0,0,0.24);
  389. height: 42px;
  390. z-index: -1;
  391. }
  392.  
  393. #header .tabmenu li a {
  394. margin: 0 16px;
  395. padding: 0;
  396. text-transform: uppercase;
  397. font: 400 14px/32px Lato,Arial,sans-serif;
  398. color: rgba(255,255,255,0.7);
  399. display: inline-block;
  400. }
  401.  
  402. #header .tabmenu li a:hover {
  403. color: #cbcbcb;
  404. }
  405.  
  406. #header .tabmenu li:first-of-type a {
  407. margin-left: 0;
  408. }
  409.  
  410. #header .tabmenu li.selected a {
  411. padding-bottom: 4px;
  412. color: #cbcbcb;
  413. border-bottom: 2px solid;
  414. }
  415.  
  416. .listing-page .tabmenu li > a[href$="/controversial/"], .wiki-page .tabmenu li > a[href$="/controversial/"], .listing-page .tabmenu li > a[href$="/ads/"], .wiki-page .tabmenu li > a[href$="/ads/"] {
  417. display: none !important;
  418. }
  419.  
  420. /* Frontpage */
  421. body[class] > .content, body.listing-page[class] > .content {
  422. margin: 16px 352px 64px 16px;
  423. padding: 0;
  424. }
  425.  
  426. .link {
  427. margin: 0;
  428. padding: 16px;
  429. position: relative;
  430. }
  431.  
  432. /* Video Player */
  433. .pinnable-content.pinned .link {
  434. display: flex;
  435. }
  436.  
  437. .pinnable-content.pinned .link .midcol {
  438. align-self: center;
  439. }
  440.  
  441. .pinnable-content.pinned .link .entry {
  442. display: flex;
  443. max-width: initial;
  444. }
  445.  
  446. .pinnable-content.pinned .midcol, .pinnable-content.pinned .top-matter, .pinnable-content.pinned .reddit-video-player-root {
  447. position: initial;
  448. }
  449.  
  450. .pinnable-content.pinned .top-matter {
  451. order: 1;
  452. width: initial;
  453. align-self: center;
  454. }
  455.  
  456. .pinnable-content.pinned .expando {
  457. margin: 0 20px 0 0;
  458. }
  459.  
  460. .pinnable-content.pinned .invisible-when-pinned {
  461. display: none;
  462. }
  463.  
  464. #newlink-with-image-upload #new-link-video-preview {
  465. box-shadow: none !important;
  466. }
  467.  
  468. /* Link Objects */
  469. body > .content .link .rank, .rank-spacer {
  470. display: none;
  471. }
  472.  
  473. /* Thumbnails */
  474. .thumbnail {
  475. width: 48px;
  476. height: 40px;
  477. margin: 0 10px 0 0;
  478. }
  479.  
  480. .thumbnail img {
  481. min-height: 48px;
  482. min-width: 40px;
  483. max-width: none;
  484. position: relative;
  485. transform: translateY(-50%);
  486. top: 50%;
  487. }
  488.  
  489. .thumbnail.default, .thumbnail.self, .thumbnail.nsfw, .thumbnail.image, .thumbnail.spoiler, .thumbnail[data-href-url*="reddit.com"] {
  490. width: 48px;
  491. height: 40px;
  492. margin: 0 0 0 0;
  493. border-radius: 28px;
  494. }
  495.  
  496. .thumbnail.default {
  497. background: #413F3F url(%%ArchLabs-logo-4%%) 4px -2px;
  498. }
  499.  
  500. .thumbnail.self {
  501. background: #413F3F url(%%ArchLabs-logo-4%%) 4px -2px;
  502. }
  503.  
  504. .thumbnail.image {
  505. background: #413F3F url(%%ArchLabs-logo-4%%) 4px -2px;
  506. }
  507.  
  508. .thumbnail.nsfw {
  509. background: #413F3F url(%%ArchLabs-logo-4%%) 4px -2px;
  510. }
  511.  
  512. .thumbnail[data-href-url*="reddit.com"] {
  513. background: #413F3F url(%%ArchLabs-logo-4%%) 4px -2px;
  514. }
  515.  
  516. .thumbnail[data-href-url*="reddit.com"] img {
  517. display: none;
  518. }
  519.  
  520. .stickied .thumbnail {
  521. background-color: #413F3F;
  522. }
  523.  
  524. .thumbnail.spoiler {
  525. background: #545252;
  526. }
  527.  
  528. /* Inner Post Area */
  529. .link .entry {
  530. padding: 0;
  531. margin: 0;
  532. max-width: 960px;
  533. }
  534.  
  535. /* Submission Title */
  536. .link .title {
  537. margin: 0;
  538. font: 12.5pt Lato,Arial,sans-serif;
  539. transition: all .15s ease;
  540. overflow: visible;
  541. }
  542.  
  543. body .content .sitetable .link .title a:hover {
  544. color: #DFE1E8;
  545. }
  546.  
  547. /* Unvisited*/
  548. .thing .title.loggedin.click, .thing .title.click, .thing .title.loggedin, .thing .title {
  549. color: #DFE1E8;
  550. }
  551.  
  552. /* Visited */
  553. .content .thing .title:visited, .content .thing.visited .title {
  554. color: #b2b4b9;
  555. }
  556.  
  557. /* Clicking */
  558. .thing .title.loggedin.click:visited, .thing .title.click:visited {
  559. color: #9c9da2;
  560. }
  561.  
  562. /* Domain */
  563. .link .domain {
  564. visibility: hidden;
  565. }
  566.  
  567. .link .domain a {
  568. visibility: visible;
  569. position: relative;
  570. top: -1px;
  571. color: #98abba;
  572. transition: all .15s ease;
  573. }
  574.  
  575. .link .domain a:hover {
  576. color: #98abba;
  577. text-decoration: none;
  578. }
  579.  
  580. .approval-checkmark {
  581. cursor: default;
  582. margin-left: 4px;
  583. }
  584.  
  585. /* Expando Text */
  586. .link .usertext .md {
  587. margin-top: 12px;
  588. margin-bottom: -12px;
  589. padding-top: 12px;
  590. padding-left: 0;
  591. background-color: transparent;
  592. border: 0 solid;
  593. border-top: 1px solid #b2b4b9;
  594. border-radius: 0;
  595. color: #DFE1E8;
  596. }
  597.  
  598. /* Submission Flatlist */
  599. .link .flat-list {
  600. padding: 0;
  601. margin-top: 3px;
  602. }
  603.  
  604. .entry .buttons li {
  605. line-height: normal;
  606. }
  607.  
  608. .entry .buttons li a {
  609. padding: 0 1px;
  610. color: #b2b4b9;
  611. font-weight: 400;
  612. font: 10px Lato,Arial,sans-serif;
  613. transition: all .15s ease;
  614. }
  615.  
  616. .link .entry .buttons li a:hover {
  617. color: #b2b4b9;
  618. text-decoration: none;
  619. }
  620.  
  621. .entry .buttons li.nsfw-stamp, .entry .buttons li.spoiler-stamp {
  622. padding: 0;
  623. border-radius: 0;
  624. border: none !important;
  625. }
  626.  
  627. .nsfw-stamp, .spoiler-stamp {
  628. padding: 0;
  629. border-radius: 0;
  630. border: 0;
  631. }
  632.  
  633. .nsfw-stamp acronym, .spoiler-stamp {
  634. position: relative;
  635. top: -1px;
  636. padding: 2px 3px;
  637. background: #413F3F;
  638. border-radius: 0;
  639. color: #b2b4b9;
  640. cursor: help;
  641. }
  642.  
  643. .link .entry .buttons li a.comments {
  644. color: #b2b4b9;
  645. font-weight: 700 !important;
  646. transition: all .25s ease-in-out !important;
  647. }
  648.  
  649. .link .entry li .comments:hover {
  650. text-decoration: none;
  651. }
  652.  
  653. .post-sharing .c-close {
  654. padding: 15px;
  655. }
  656.  
  657. .post-sharing, .subreddit-report-form {
  658. border: none;
  659. margin: 15px 5px 5px;
  660. box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  661. }
  662.  
  663. .gold-payment .close-button {
  664. box-shadow: none;
  665. margin: 11px -9px 6px 8px;
  666. }
  667.  
  668. /* Report Comment */
  669. .action-form {
  670. position: fixed;
  671. top: 35%;
  672. left: 40%;
  673. margin: 0;
  674. padding: 24px;
  675. background: #545252;
  676. z-index: 100;
  677. box-shadow: 0 0 16px rgba(0,0,0,0.12);
  678. border: none;
  679. border-radius: 2px;
  680. }
  681.  
  682. .action-form .reason-prompt {
  683. font-size: 16px;
  684. color: #DFE1E8;
  685. padding-bottom: 8px;
  686. display: block;
  687. }
  688.  
  689. .action-form .reason-prompt:first-letter {
  690. text-transform: capitalize;
  691. }
  692.  
  693. .action-form .reason-prompt li {
  694. padding: 4px 4px 4px 0;
  695. display: block;
  696. }
  697.  
  698. .action-form li label {
  699. padding: 4px 4px 4px 0;
  700. cursor: pointer;
  701. display: block;
  702. color: #DFE1E8;
  703. text-transform: capitalize;
  704. }
  705.  
  706. .action-form li label:hover {
  707. background-color: rgba(0,0,0,0.05);
  708. }
  709.  
  710. .action-form input[name="other_reason"] {
  711. padding: 8px;
  712. }
  713.  
  714. /* Edit Flair */
  715. .side .titlebox .tagline a.flairselectbtn, .leavemoderator a {
  716. background: #545252;
  717. border-radius: 2px;
  718. color: #DFE1E8;
  719. font: bold 11px Lato,Arial,sans-serif;
  720. padding: 2px 8px;
  721. position: absolute;
  722. right: 32px;
  723. text-transform: capitalize;
  724. transition: opacity .09s ease-in-out;
  725. }
  726.  
  727. .side .titlebox .tagline a.flairselectbtn:hover, .leavemoderator a:hover {
  728. opacity: .7;
  729. text-decoration: none;
  730. }
  731.  
  732. .titlebox .tagline {
  733. font-size: 0;
  734. }
  735.  
  736. /*Top Sorting Menu */
  737. .content > .menuarea {
  738. margin: 0;
  739. padding: 0 20px;
  740. border: none;
  741. color: #cbcbcb;
  742. overflow: visible;
  743. line-height: 36px;
  744. border-bottom: 1px solid rgba(0,0,0,0.14);
  745. }
  746.  
  747. .dropdown.lightdrop .selected {
  748. display: inline-block;
  749. color: #9E9E9E;
  750. text-decoration: none;
  751. cursor: pointer;
  752. padding: 0 4px;
  753. background: 0;
  754. z-index: 2;
  755. }
  756.  
  757. .dropdown.lightdrop .selected:after {
  758. content: " ▼";
  759. }
  760.  
  761. .dropdown.lightdrop .selected:hover {
  762. color: #b2b4b9;
  763. }
  764.  
  765. .drop-choices.lightdrop {
  766. border: none;
  767. z-index: 1;
  768. box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
  769. border-radius: 2px;
  770. margin: -22px -20px 0;
  771. padding: 32px 0 8px;
  772. min-width: 156px;
  773. }
  774.  
  775. .drop-choices.lightdrop:before {
  776. display: block;
  777. content: '';
  778. border-bottom: 1px solid rgba(0,0,0,.14);
  779. }
  780.  
  781. .drop-choices a.choice {
  782. padding: 8px 24px;
  783. transition: all .1s ease;
  784. color: #323131;
  785. }
  786.  
  787.  
  788. /* Sidebar */
  789. .side {
  790. margin: 282px 16px 108px 0;
  791. padding: 0;
  792. background: none;
  793. width: 320px;
  794. }
  795.  
  796. .side .spacer {
  797. margin: 0 0 0;
  798. }
  799.  
  800. /* Subreddit Box */
  801. .side:before {
  802. background: #545252;
  803. content: "";
  804. display: block;
  805. position: absolute;
  806. z-index: 1;
  807. border-radius: 2px;
  808. 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);
  809. }
  810.  
  811. /* Subreddit Name / Subscibers / Online */
  812. .side .titlebox h1.redditname:before {
  813. content: " ";
  814. position: absolute;
  815. display: block;
  816. width: 320px;
  817. z-index: -1;
  818. height: 76px;
  819. margin-top: -16px;
  820. margin-left: -16px;
  821. background: #413F3F;
  822. border-radius: 0 0 2px 2px;
  823. box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  824. }
  825.  
  826. .side .titlebox h1.redditname {
  827. margin-bottom: 6px;
  828. position: absolute;
  829. top: 308px;
  830. z-index: 100;
  831. font-family: Lato,Arial,sans-serif;
  832. }
  833.  
  834. .side .titlebox h1.redditname a {
  835. color: #323131;
  836. }
  837.  
  838. .titlebox span.subscribers {
  839. position: absolute;
  840. z-index: 100;
  841. color: #DFE1E8;
  842. font-size: 12px;
  843. top: 336px;
  844. }
  845.  
  846. div.titlebox span.word {
  847. display: none;
  848. }
  849.  
  850. .titlebox .users-online {
  851. display: inline;
  852. }
  853.  
  854. .titlebox .users-online:before {
  855. display: none;
  856. }
  857.  
  858. div.titlebox span.number:after {
  859. content: " readers";
  860. }
  861.  
  862. .titlebox .users-online .number {
  863. font-style: italic;
  864. }
  865.  
  866. .titlebox .users-online .number:before {
  867. content: "";
  868. width: 16px;
  869. height: 9px;
  870. display: inline-block;
  871. margin-right: 8px;
  872. background-color: #545252;
  873. }
  874.  
  875. .titlebox .users-online .number:after {
  876. content: " currently online";
  877. }
  878.  
  879. .titlebox .word {
  880. display: none;
  881. }
  882.  
  883. .titlebox .users-online, .titlebox .number {
  884. cursor: text;
  885. }
  886.  
  887. .drop-choices a.choice:hover {
  888. background-color: #545252;
  889. }
  890.  
  891. /* Subscribe Button */
  892. .titlebox .fancy-toggle-button {
  893. margin: 0;
  894. position: absolute;
  895. margin-left: 208px;
  896. top: 314px;
  897. z-index: 100;
  898. }
  899.  
  900. .titlebox .fancy-toggle-button .active {
  901. display: block;
  902. border: none;
  903. height: 32px;
  904. border-radius: 2px;
  905. line-height: 30px;
  906. background-image: none !important;
  907. padding: 0 12px;
  908. text-transform: capitalize;
  909. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  910. transition: box-shadow .2s cubic-bezier(.4,0,1,1),background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),padding .2s ease,margin .2s ease;
  911. }
  912.  
  913. .titlebox .fancy-toggle-button .active:hover {
  914. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  915. }
  916.  
  917. .titlebox .fancy-toggle-button .active:active {
  918. box-shadow: 0 0 0 rgba(0,0,0,0.0);
  919. }
  920.  
  921. /* Subscribe */
  922. .titlebox .fancy-toggle-button .active.add {
  923. background: #545252;
  924. color: #bab9b9;
  925. }
  926.  
  927. .titlebox .fancy-toggle-button .active.add:hover {
  928. background: #878585;
  929. }
  930.  
  931. .titlebox .fancy-toggle-button .active.add:active {
  932. background: #cbcbcb;
  933. padding-left: 24px;
  934. margin-left: -13px;
  935. text-align: center;
  936. }
  937.  
  938. /* Unsubscribe */
  939. .titlebox .fancy-toggle-button .active.remove {
  940. background: rgba(0,0,0,0.24);
  941. color: #DFE1E8;
  942. margin-left: -14px;
  943. box-shadow: none;
  944. }
  945.  
  946. .titlebox .fancy-toggle-button .active.remove:hover {
  947. background: rgba(0,0,0,0.32);
  948. }
  949.  
  950. .titlebox .fancy-toggle-button .active.remove:active {
  951. background: rgba(0,0,0,0.4);
  952. }
  953.  
  954. .hover-bubble.multi-selector {
  955. right: 346px !important;
  956. margin-top: -56px;
  957. border: none;
  958. }
  959.  
  960. .hover-bubble.anchor-right:before {
  961. right: -19px;
  962. border-left-color: #CCC;
  963. }
  964.  
  965. .titlebox .bottom {
  966. padding-top: 10px;
  967. border-color: rgba(0,0,0,0.14);
  968. }
  969.  
  970. /* Search */
  971. #search {
  972. position: absolute;
  973. top: 384px;
  974. z-index: 1;
  975. width: 320px;
  976. }
  977.  
  978. #search input[type=text] {
  979. padding: 0 42px 0 16px;
  980. border: 0 solid;
  981. border-radius: 2px;
  982. width: 320px;
  983. height: 42px;
  984. line-height: 41px;
  985. background: #413F3F;
  986. box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  987. transition: box-shadow .2s cubic-bezier(.4,0,1,1),background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
  988. }
  989.  
  990. #search input[type=text]:hover {
  991. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  992. }
  993.  
  994. #search input[type=text]:focus {
  995. border-radius: 2px 2px 0 0;
  996. }
  997.  
  998. #search input[type=text]:focus:hover {
  999. box-shadow: 0 1px 5px rgba(0,0,0,0.24) !important;
  1000. }
  1001.  
  1002. #search input[type="text"]:-moz-placeholder {
  1003. font-size: 14px;
  1004. text-transform: capitalize;
  1005. top: 1px;
  1006. position: relative;
  1007. }
  1008.  
  1009. #search input[type="text"]::-webkit-input-placeholder {
  1010. font-size: 14px;
  1011. text-transform: capitalize;
  1012. top: 1px;
  1013. position: relative;
  1014. }
  1015.  
  1016. #search input[type="text"]:-ms-input-placeholder {
  1017. font-size: 14px;
  1018. text-transform: capitalize;
  1019. top: 1px;
  1020. position: relative;
  1021. }
  1022.  
  1023. #search input[type=text]::-webkit-input-placeholder {
  1024. color: #DFE1E8;
  1025. }
  1026.  
  1027. #search input[type=text]:-moz-placeholder {
  1028. color: #DFE1E8;
  1029. }
  1030.  
  1031. #search input[type=text]::-moz-placeholder {
  1032. color: #DFE1E8;
  1033. }
  1034.  
  1035. #search input[type=text]:-ms-input-placeholder {
  1036. color: #DFE1E8;
  1037. }
  1038.  
  1039. #search input[type=submit] {
  1040. border: none !important;
  1041. border-radius: 16px;
  1042. }
  1043.  
  1044. /* Expando */
  1045. #search #searchexpando {
  1046. background: #545252;
  1047. border: none;
  1048. border-radius: 0 0 2px 2px;
  1049. margin: 0;
  1050. padding: 4px;
  1051. height: 154px;
  1052. line-height: 50px;
  1053. box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  1054. }
  1055.  
  1056. #search #searchexpando label {
  1057. padding: 21px 8px 17px;
  1058. cursor: pointer;
  1059. transition: all .1s ease;
  1060. }
  1061.  
  1062. #search #searchexpando label:active {
  1063. background: rgba(0,0,0,0.06);
  1064. }
  1065.  
  1066. #search #searchexpando p {
  1067. display: none !important;
  1068. }
  1069.  
  1070.  
  1071. /* Search results page */
  1072. @media screen and (max-width: 1085px) {
  1073. .search-page #search {
  1074. left: 350px;
  1075. }
  1076. }
  1077.  
  1078. /* Submit Button */
  1079. .morelink {
  1080. background: #413F3F;
  1081. height: 36px;
  1082. border-radius: 2px;
  1083. font-size: 14px;
  1084. line-height: 36px;
  1085. border: none;
  1086. text-align: center;
  1087. padding: 0;
  1088. }
  1089.  
  1090. .morelink:hover {
  1091. background: #413F3F;
  1092. }
  1093.  
  1094. .morelink:active {
  1095. background: #413F3F;
  1096. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
  1097. }
  1098.  
  1099. .sidebox.submit.submit-text .morelink {
  1100. margin-left: 168px;
  1101. }
  1102.  
  1103. .morelink a {
  1104. color: #DFE1E8;
  1105. font-weight: 400;
  1106. letter-spacing: 0;
  1107. }
  1108.  
  1109. .submit-text .morelink a:before {
  1110. font-size: 14px;
  1111. content: "Submit Text";
  1112. }
  1113.  
  1114. .submit-link .morelink a:before {
  1115. font-size: 14px;
  1116. content: "Submit Link";
  1117. }
  1118.  
  1119. .submit-text .morelink:before, .submit-link .morelink:after {
  1120. content: "N/A";
  1121. position: absolute;
  1122. left: -168px;
  1123. top: 0;
  1124. width: 152px;
  1125. color: rgba(0,0,0,0.32);
  1126. border-radius: 2px;
  1127. background: rgba(0,0,0,0.08);
  1128. font-weight: 400;
  1129. z-index: -1;
  1130. }
  1131.  
  1132. .submit-link .morelink:after {
  1133. left: 168px;
  1134. }
  1135.  
  1136. /* Restricted Button */
  1137. .disabled .morelink {
  1138. box-shadow: none !important;
  1139. background: rgba(0,0,0,0.08);
  1140. width: 320px;
  1141. }
  1142.  
  1143. .disabled .morelink a {
  1144. color: rgba(0,0,0,0.32);
  1145. font-size: 14px;
  1146. }
  1147.  
  1148. .morelink .nub {
  1149. display: none;
  1150. }
  1151.  
  1152. .submit.mod-override .morelink a:after {
  1153. position: relative;
  1154. margin: 10px 10px 10px 0;
  1155. float: right;
  1156. margin-left: -16px;
  1157. }
  1158.  
  1159. /* Submit Links */
  1160. .submit .morelink {
  1161. position: absolute;
  1162. top: 442px;
  1163. font-size: 0;
  1164. width: 152px;
  1165. }
  1166.  
  1167. /* Wiki Talk Submit */
  1168. .wiki-page .wiki-page-content .discussionlink {
  1169. margin: 16px 0 0;
  1170. padding: 0;
  1171. }
  1172.  
  1173. wiki-page .wiki-page-content .discussionlink a {
  1174. padding: 0 16px;
  1175. }
  1176.  
  1177. /* Login Form */
  1178. .login-form-side {
  1179. border: none;
  1180. border-bottom: 1px solid #edf1f3;
  1181. padding-bottom: 8px;
  1182. }
  1183.  
  1184. .login-form-side input[type=text], .login-form-side input[type=password] {
  1185. width: 136px;
  1186. margin: 0;
  1187. }
  1188.  
  1189. .login-form-side input[type=text] {
  1190. margin-left: 0;
  1191. margin-right: 16px;
  1192. }
  1193.  
  1194. .login-form-side button.btn {
  1195. margin-right: -3px;
  1196. }
  1197.  
  1198. /* Titlebox Info */
  1199. .titlebox:before {
  1200. content: "Subreddit Info";
  1201. display: block;
  1202. background-color: #3a3838;
  1203. color: #DFE1E8;
  1204. font: 18px/24px Lato,Arial,sans-serif;
  1205. margin: 8px 0;
  1206. }
  1207.  
  1208. .titlebox .tagline {
  1209. margin: 0;
  1210. }
  1211.  
  1212. .titlebox .tagline:after {
  1213. content: "";
  1214. height: 2px;
  1215. background: #3a3838;
  1216. display: block;
  1217. margin-top: 16px;
  1218. }
  1219.  
  1220. .titlebox form.flairtoggle {
  1221. line-height: 2;
  1222. }
  1223.  
  1224. .titlebox form.toggle.sr_style_toggle {
  1225. padding-bottom: 0;
  1226. display: block;
  1227. background-color: transparent;
  1228. }
  1229.  
  1230. .titlebox form.toggle.sr_style_toggle label {
  1231. position: relative;
  1232. top: -3px;
  1233. }
  1234.  
  1235. /* Sidebar Description */
  1236. .side .md .-blocks, .side .md .-lists, .side .md pre, .side .md blockquote, .side .md table, .side .md p, .side .md ul, .side .md ol {
  1237. color: #DFE1E8;
  1238. font: 13px/1.45 Lato,Arial,sans-serif;
  1239. }
  1240.  
  1241. .side .titlebox .md h1 {
  1242. line-height: 18px;
  1243. margin: .5em 0 0 !important;
  1244. }
  1245.  
  1246. .side .titlebox .md h2 {
  1247. margin: 16px 0 2px;
  1248. }
  1249.  
  1250. /* Buttonstyle H3 */
  1251. .side .titlebox .md h3 a {
  1252. padding: 0 16px;
  1253. width: 100%;
  1254. border-radius: 2px;
  1255. background: #413F3F;
  1256. font: 12px/42px Lato,Arial,sans-serif;
  1257. color: #DFE1E8;
  1258. display: block;
  1259. margin: 1.5em 0;
  1260. text-align: center;
  1261. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  1262. transition: box-shadow .2s cubic-bezier(.4,0,1,1),background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
  1263. }
  1264.  
  1265. .side .titlebox .md h3 a:hover {
  1266. background: #413F3F;
  1267. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  1268. }
  1269.  
  1270. .side .titlebox .md h3 a:active {
  1271. background: #413F3F;
  1272. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  1273. }
  1274.  
  1275. .side .titlebox .md h4 a {
  1276. padding: 0 16px;
  1277. background: #413F3F;
  1278. border-radius: 2px;
  1279. color: #DFE1E8;
  1280. font-weight: 700;
  1281. display: block;
  1282. margin: 1.5em 0;
  1283. font-size: 12px;
  1284. line-height: 42px;
  1285. text-align: center;
  1286. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  1287. transition: box-shadow .2s cubic-bezier(.4,0,1,1),background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
  1288. }
  1289.  
  1290. .side .titlebox h4 a:hover {
  1291. box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
  1292. }
  1293.  
  1294. .side .titlebox h4 a:active {
  1295. background: #cbcbcb;
  1296. box-shadow: 0 2px 1.5px 0 rgba(0,0,0,.12),0 0 4px 0 rgba(0,0,0,.12);
  1297. }
  1298.  
  1299. .md hr {
  1300. border: solid 1px #cbcbcb;
  1301. }
  1302.  
  1303. /* Mod Box */
  1304. .side #moderation_tools .title h1 {
  1305. text-transform: capitalize;
  1306. color: #cbcbcb;
  1307. }
  1308.  
  1309. .side #moderation_tools .title .collapse-button {
  1310. color: #cbcbcb;
  1311. vertical-align: middle;
  1312. text-align: center;
  1313. border-radius: 1px;
  1314. border: 1px solid #DFE1E8;
  1315. }
  1316.  
  1317. .side .sidecontentbox .content {
  1318. border: none;
  1319. padding: 8px 0;
  1320. }
  1321.  
  1322. .icon-menu a {
  1323. background: none;
  1324. }
  1325.  
  1326. /* Create Community */
  1327. .create .morelink {
  1328. background: #3a3838;
  1329. }
  1330.  
  1331. .sidebox.create .morelink a {
  1332. font-size: 14px;
  1333. color: #DFE1E8;
  1334. }
  1335.  
  1336. .sidebox .spacer {
  1337. display: none;
  1338. }
  1339.  
  1340. /* Recently Viewed Links */
  1341. .gadget .midcol {
  1342. width: 38px;
  1343. }
  1344.  
  1345. .gadget .reddit-entry .linkflairlabel {
  1346. display: none;
  1347. }
  1348.  
  1349. .gadget .right {
  1350. text-transform: uppercase;
  1351. }
  1352.  
  1353. /* Account Activity */
  1354. .account-activity-box a {
  1355. text-transform: uppercase;
  1356. }
  1357.  
  1358. /* Pinheader */
  1359. .pinHeader-sub #sr-header-area, .pinHeader-subanduser #sr-header-area {
  1360. background-image: url(%%ArchLabs-header-1%%);
  1361. background-position: 50% 0;
  1362. }
  1363.  
  1364. .pinHeader-sub #header-bottom-left, .pinHeader-subanduser #header-bottom-left {
  1365. margin-top: 0;
  1366. }
  1367.  
  1368. .pinHeader-header:before {
  1369. display: none !important;
  1370. }
  1371.  
  1372. .pinHeader-header .content {
  1373. margin-top: 12px !important;
  1374. }
  1375.  
  1376. .pinHeader-header .side {
  1377. margin-top: 164px;
  1378. }
  1379.  
  1380. .pinHeader-header.res.comments-page .side {
  1381. margin-top: 290px;
  1382. }
  1383.  
  1384. .pinHeader-header #header {
  1385. top: 0;
  1386. background-image: url(%%ArchLabs-header-1%%);
  1387. height: 84px;
  1388. box-shadow: 0 1px 5px rgba(0,0,0,0.24);
  1389. }
  1390.  
  1391. .res.search-page #header .tabmenu {
  1392. display: none !important;
  1393. }
  1394.  
  1395. .res #header-bottom-right {
  1396. top: 1px;
  1397. border-radius: 0;
  1398. height: 18px;
  1399. padding: 0 8px 0 0;
  1400. }
  1401.  
  1402. .res #userbarToggle {
  1403. background-color: transparent;
  1404. color: rgba(255,255,255,0.45);
  1405. border-radius: 0;
  1406. border: none;
  1407. left: -32px;
  1408. }
  1409.  
  1410. .res a.beta-link {
  1411. left: -10px;
  1412. top: 4px;
  1413. }
  1414.  
  1415. .res #header-bottom-right .user .userkarma {
  1416. display: none;
  1417. }
  1418.  
  1419. .res #header-bottom-right .user {
  1420. font-size: 0 !important;
  1421. }
  1422.  
  1423. .res #header-bottom-right .user a {
  1424. font-size: 11px;
  1425. line-height: 9px;
  1426. }
  1427.  
  1428. .res #sr-header-area a.RESShortcutsCurrentSub, .res #RESSubredditGroupDropdown .RESShortcutsCurrentSub a {
  1429. color: #cbcbcb !important;
  1430. border-bottom: 2px solid #cbcbcb;
  1431. }
  1432.  
  1433. #RESAccountSwitcherIcon {
  1434. position: relative;
  1435. top: -4px;
  1436. }
  1437.  
  1438. .res #REScommentNavToggle {
  1439. max-width: 98px;
  1440. overflow: hidden;
  1441. max-height: 15px;
  1442. background-color: #dcdcdc;
  1443. transition: all .35s ease;
  1444. }
  1445.  
  1446. .res #REScommentNavToggle:hover {
  1447. max-width: 100%;
  1448. }
  1449.  
  1450. .res .commentarea > .usertext {
  1451. margin-top: -76px;
  1452. padding-top: 80px !important;
  1453. }
  1454.  
  1455. .res .content .RESBigEditorPop {
  1456. background-color: rgba(0,0,0,0);
  1457. line-height: inherit;
  1458. font: 11px Lato,Arial,sans-serif;
  1459. box-shadow: none;
  1460. font-weight: 400;
  1461. color: #323131;
  1462. border: none;
  1463. padding: 0;
  1464. height: inherit;
  1465. margin-left: 4px;
  1466. margin-top: 5px;
  1467. }
  1468.  
  1469. html.res-commentBoxes .comment {
  1470. margin-left: 0 !important;
  1471. margin-right: 0 !important;
  1472. }
  1473.  
  1474. .res .commentarea .thing {
  1475. border: none !important;
  1476. border-radius: 2px !important;
  1477. }
  1478.  
  1479. .res .titlebox .tagline {
  1480. margin-top: 6px;
  1481. }
  1482.  
  1483. .res .RESshortcutside, .res .RESDashboardToggle {
  1484. background-image: none !important;
  1485. border: none;
  1486. color: #3a3939;
  1487. text-transform: uppercase;
  1488. text-decoration: none;
  1489. border-radius: 0;
  1490. padding: 4px 6px 4px 0;
  1491. margin: 2px 6px 2px -4px;
  1492. text-align: left;
  1493. width: auto;
  1494. }
  1495.  
  1496. .res .RESshortcutside:hover, .res .RESDashboardToggle:hover {
  1497. background-color: transparent;
  1498. color: #98abba;
  1499. }
  1500.  
  1501. .res #progressIndicator {
  1502. width: inherit;
  1503. border-radius: 0;
  1504. border: none;
  1505. padding: 16px;
  1506. margin: 16px 0;
  1507. color: #b3b3b3;
  1508. background-color: #cbcbcb;
  1509. height: inherit;
  1510. }
  1511.  
  1512. .res #progressIndicator h2 {
  1513. color: #cbcbcb;
  1514. }
  1515.  
  1516. .res .NERPageMarker {
  1517. border-radius: 0;
  1518. border: none;
  1519. background-color: #cbcbcb;
  1520. padding: 16px 0;
  1521. margin: 0;
  1522. }
  1523.  
  1524. .res .sitetable .sitetable {
  1525. margin-right: 0;
  1526. }
  1527.  
  1528. .res #search #searchexpando {
  1529. box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  1530. height: auto;
  1531. }
  1532.  
  1533. .res #search #searchexpando label {
  1534. padding-top: 13px;
  1535. padding-bottom: 13px;
  1536. }
  1537.  
  1538. .res #searchexpando .searchexpando-submit {
  1539. display: none;
  1540. }
  1541.  
  1542. .res h1.hover.redditname {
  1543. overflow: visible !important;
  1544. }
  1545.  
  1546. .res .commentarea .panestack-title {
  1547. margin-top: 0;
  1548. padding-top: 12px;
  1549. padding-bottom: 8px;
  1550. }
  1551.  
  1552. .res .comment.collapsed a.expand:after {
  1553. display: none;
  1554. }
  1555.  
  1556. /* Gear Dropdown */
  1557. .gearIcon {
  1558. position: relative;
  1559. top: 2px;
  1560. transition: all .25s ease;
  1561. }
  1562.  
  1563. #RESMainGearOverlay {
  1564. background-color: #545252;
  1565. top: 0 !important;
  1566. height: 26px !important;
  1567. border-radius: 0 !important;
  1568. }
  1569.  
  1570. .RESDropdownList {
  1571. border-color: #545252;
  1572. box-shadow: 0 1px 5px rgba(0,0,0,0.24);
  1573. margin-top: 4px;
  1574. margin-right: 8px;
  1575. }
  1576.  
  1577. .RESDropdownList li {
  1578. background-color: #545252;
  1579. color: #cbcbcb;
  1580. border-color: #666565;
  1581. transition: all .15s ease;
  1582. }
  1583.  
  1584. .RESDropdownList li:first-letter {
  1585. text-transform: capitalize;
  1586. }
  1587.  
  1588. .RESDropdownList a, .RESDropdownList a:visited {
  1589. color: #cbcbcb;
  1590. }
  1591.  
  1592. .RESDropdownList li:hover, .RESDropdownList li a:hover {
  1593. color: #DFE1E8;
  1594. background-color: #545252;
  1595. }
  1596.  
  1597. #RESSearchMenuItem {
  1598. border: 1px solid #7a7878;
  1599. border-radius: 1px;
  1600. background-color: #666565;
  1601. }
  1602.  
  1603. #RESSearchMenuItem:hover {
  1604. background-color: #666565;
  1605. }
  1606.  
  1607. .toggleButton .toggleOn, .toggleButton .toggleOff {
  1608. text-transform: lowercase;
  1609. }
  1610.  
  1611. /* Toggle Off */
  1612. .moduleToggle:not(.enabled) .toggleOn, .toggleButton:not(.enabled) .toggleOn, .moduleToggle.enabled .toggleOff, .toggleButton.enabled .toggleOff {
  1613. background-color: transparent;
  1614. color: rgba(255,255,255,0.6);
  1615. border: 1px solid #7a7878;
  1616. transition: all .15s ease;
  1617. border-radius: 2px;
  1618. }
  1619.  
  1620. /* Toggle On */
  1621. .moduleToggle.enabled .toggleOn, .toggleButton.enabled .toggleOn, .moduleToggle:not(.enabled) .toggleOff, .toggleButton:not(.enabled) .toggleOff {
  1622. background-color: #666565;
  1623. color: #a9a8a8;
  1624. font-weight: bolder;
  1625. border: 1px solid #7a7878;
  1626. transition: all .15s ease;
  1627. border-radius: 2px;
  1628. }
  1629.  
  1630. .markdownEditor .edit-btn:not(.btn-macro) {
  1631. border: 0 solid !important;
  1632. border-radius: 1px;
  1633. box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  1634. }
  1635.  
  1636. /* Shadows and Cards */
  1637. body.listing-page > .content, body.other-discussions-page > .content, .comments-page .link, .commentarea > .sitetable > .comment, #bottom-comments:not(.child) > .sitetable > .comment, #images, .sponsorshipbox, .stylesheet-customize-container .pretty-form, .side .sidecontentbox, .account-activity-box, .side .titlebox, #previoussearch #moresearchinfo, #ad-frame, #ad_main, .wiki-page .wiki-page-content, .linefield, .submit-page .roundfield, .login-form-side, #ad_main_top, .search-result-subreddit, .search-result-listing + .search-result-listing .contents, [class] .searchfacets {
  1638. background: #413F3F;
  1639. padding: 16px;
  1640. border-radius: 2px;
  1641. box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
  1642. }
  1643.  
  1644. .commentarea > .sitetable > .comment, #bottom-comments > .sitetable > .comment {
  1645. padding-left: 10px;
  1646. }
  1647.  
  1648. /* Ads */
  1649. #ad-frame, #ad_main, #ad_main_top {
  1650. box-sizing: initial;
  1651. padding: 10px;
  1652. }
  1653.  
  1654. .sponsorshipbox {
  1655. max-width: 320px;
  1656. padding: 0;
  1657. }
  1658.  
  1659. #ad_sponsorship {
  1660. margin: 10px;
  1661. }
  1662.  
  1663. /* New Mail Toast Animation */
  1664. #mail.havemail:before {
  1665. animation-name: toast;
  1666. animation-duration: 8s;
  1667. animation-iteration-count: 1;
  1668. animation-timing-function: ease;
  1669. -webkit-animation-name: toast;
  1670. -webkit-animation-duration: 8s;
  1671. -webkit-animation-iteration-count: 1;
  1672. -webkit-animation-timing-function: ease;
  1673. }
  1674.  
  1675. #mail.havemail:hover:before {
  1676. -webkit-animation-play-state: paused;
  1677. -moz-animation-play-state: paused;
  1678. -o-animation-play-state: paused;
  1679. animation-play-state: paused;
  1680. }
  1681.  
  1682. @-webkit-keyframes toast {
  1683. 0% {
  1684. transform: translateY(76px);
  1685. -webkit-transform: translateY(76px);
  1686. opacity: 0;
  1687. }
  1688.  
  1689. 20% {
  1690. transform: translateY(76px);
  1691. -webkit-transform: translateY(76px);
  1692. opacity: 0;
  1693. }
  1694.  
  1695. 25% {
  1696. transform: translateY(-8px);
  1697. -webkit-transform: translateY(-8px);
  1698. opacity: 1;
  1699. }
  1700.  
  1701. 27% {
  1702. transform: translateY(00px);
  1703. -webkit-transform: translateY(00px);
  1704. opacity: 1;
  1705. }
  1706.  
  1707. 92% {
  1708. transform: translateY(00px);
  1709. -webkit-transform: translateY(00px);
  1710. opacity: 1;
  1711. }
  1712.  
  1713. 97% {
  1714. transform: translateY(16px);
  1715. -webkit-transform: translateY(16px);
  1716. opacity: 1;
  1717. }
  1718.  
  1719. 100% {
  1720. transform: translateY(76px);
  1721. -webkit-transform: translateY(76px);
  1722. opacity: 0;
  1723. }
  1724. }
  1725.  
  1726. @-o-keyframes toast {
  1727. 0% {
  1728. transform: translateY(76px);
  1729. -webkit-transform: translateY(76px);
  1730. opacity: 0;
  1731. }
  1732.  
  1733. 20% {
  1734. transform: translateY(76px);
  1735. -webkit-transform: translateY(76px);
  1736. opacity: 0;
  1737. }
  1738.  
  1739. 25% {
  1740. transform: translateY(-8px);
  1741. -webkit-transform: translateY(-8px);
  1742. opacity: 1;
  1743. }
  1744.  
  1745. 27% {
  1746. transform: translateY(00px);
  1747. -webkit-transform: translateY(00px);
  1748. opacity: 1;
  1749. }
  1750.  
  1751. 92% {
  1752. transform: translateY(00px);
  1753. -webkit-transform: translateY(00px);
  1754. opacity: 1;
  1755. }
  1756.  
  1757. 97% {
  1758. transform: translateY(16px);
  1759. -webkit-transform: translateY(16px);
  1760. opacity: 1;
  1761. }
  1762.  
  1763. 100% {
  1764. transform: translateY(76px);
  1765. -webkit-transform: translateY(76px);
  1766. opacity: 0;
  1767. }
  1768. }
  1769.  
  1770. @-moz-keyframes toast {
  1771. 0% {
  1772. transform: translateY(76px);
  1773. -webkit-transform: translateY(76px);
  1774. opacity: 0;
  1775. }
  1776.  
  1777. 20% {
  1778. transform: translateY(76px);
  1779. -webkit-transform: translateY(76px);
  1780. opacity: 0;
  1781. }
  1782.  
  1783. 25% {
  1784. transform: translateY(-8px);
  1785. -webkit-transform: translateY(-8px);
  1786. opacity: 1;
  1787. }
  1788.  
  1789. 27% {
  1790. transform: translateY(00px);
  1791. -webkit-transform: translateY(00px);
  1792. opacity: 1;
  1793. }
  1794.  
  1795. 92% {
  1796. transform: translateY(00px);
  1797. -webkit-transform: translateY(00px);
  1798. opacity: 1;
  1799. }
  1800.  
  1801. 97% {
  1802. transform: translateY(16px);
  1803. -webkit-transform: translateY(16px);
  1804. opacity: 1;
  1805. }
  1806.  
  1807. 100% {
  1808. transform: translateY(76px);
  1809. -webkit-transform: translateY(76px);
  1810. opacity: 0;
  1811. }
  1812. }
  1813.  
  1814. @keyframes toast {
  1815. 0% {
  1816. transform: translateY(76px);
  1817. -webkit-transform: translateY(76px);
  1818. opacity: 0;
  1819. }
  1820.  
  1821. 20% {
  1822. transform: translateY(76px);
  1823. -webkit-transform: translateY(76px);
  1824. opacity: 0;
  1825. }
  1826.  
  1827. 25% {
  1828. transform: translateY(-8px);
  1829. -webkit-transform: translateY(-8px);
  1830. opacity: 1;
  1831. }
  1832.  
  1833. 27% {
  1834. transform: translateY(00px);
  1835. -webkit-transform: translateY(00px);
  1836. opacity: 1;
  1837. }
  1838.  
  1839. 92% {
  1840. transform: translateY(00px);
  1841. -webkit-transform: translateY(00px);
  1842. opacity: 1;
  1843. }
  1844.  
  1845. 97% {
  1846. transform: translateY(16px);
  1847. -webkit-transform: translateY(16px);
  1848. opacity: 1;
  1849. }
  1850.  
  1851. 100% {
  1852. transform: translateY(76px);
  1853. -webkit-transform: translateY(76px);
  1854. opacity: 0;
  1855. }
  1856. }
  1857.  
  1858. @-webkit-keyframes upvote {
  1859. 0% {
  1860. transform: scale(0,0);
  1861. -webkit-transform: scale(0,0);
  1862. opacity: 1;
  1863. }
  1864.  
  1865. 45% {
  1866. opacity: 1;
  1867. }
  1868.  
  1869. 98% {
  1870. opacity: 0;
  1871. }
  1872.  
  1873. 100% {
  1874. transform: scale(1.5,1.5);
  1875. -webkit-transform: scale(1.5,1.5);
  1876. opacity: 0;
  1877. }
  1878. }
  1879.  
  1880. @-moz-keyframes upvote {
  1881. 0% {
  1882. transform: scale(0,0);
  1883. -webkit-transform: scale(0,0);
  1884. opacity: 1;
  1885. }
  1886.  
  1887. 45% {
  1888. opacity: 1;
  1889. }
  1890.  
  1891. 98% {
  1892. opacity: 0;
  1893. }
  1894.  
  1895. 100% {
  1896. transform: scale(1.5,1.5);
  1897. -webkit-transform: scale(1.5,1.5);
  1898. opacity: 0;
  1899. }
  1900. }
  1901.  
  1902. @-o-keyframes upvote {
  1903. 0% {
  1904. transform: scale(0,0);
  1905. -webkit-transform: scale(0,0);
  1906. opacity: 1;
  1907. }
  1908.  
  1909. 45% {
  1910. opacity: 1;
  1911. }
  1912.  
  1913. 98% {
  1914. opacity: 0;
  1915. }
  1916.  
  1917. 100% {
  1918. transform: scale(1.5,1.5);
  1919. -webkit-transform: scale(1.5,1.5);
  1920. opacity: 0;
  1921. }
  1922. }
  1923.  
  1924. @keyframes upvote {
  1925. 0% {
  1926. transform: scale(0,0);
  1927. -webkit-transform: scale(0,0);
  1928. opacity: 1;
  1929. }
  1930.  
  1931. 45% {
  1932. opacity: 1;
  1933. }
  1934.  
  1935. 98% {
  1936. opacity: 0;
  1937. }
  1938.  
  1939. 100% {
  1940. transform: scale(1.5,1.5);
  1941. -webkit-transform: scale(1.5,1.5);
  1942. opacity: 0;
  1943. }
  1944. }
  1945.  
  1946. /* More RES Fixes */
  1947. .res .link .tagline a.voteWeight {
  1948. background-color: transparent !important;
  1949. }
  1950.  
  1951. .res .thing .tagline .author.moderator {
  1952. background-color: #545252 !important;
  1953. color: #DFE1E8;
  1954. padding: 1px 4px;
  1955. border-radius: 1px;
  1956. }
  1957.  
  1958. #header-bottom-right #userbarToggle + * {
  1959. margin-left: 0 !important;
  1960. }
  1961.  
  1962. .res .srSep {
  1963. color: rgba(255,255,255,0.45);
  1964. }
  1965.  
  1966. .res #RESShortcutsViewport {
  1967. margin-right: 381px;
  1968. }
  1969.  
  1970. .res #RESShortcutsEditContainer {
  1971. margin-right: 312px;
  1972. }
  1973.  
  1974. .res #RESShortcutsEditContainer, #RESShortcutsSort, #RESShortcutsRight, #RESShortcutsLeft, #RESShortcutsAdd, #RESShortcutsTrash {
  1975. background-color: transparent !important;
  1976. color: rgba(255,255,255,0.45) !important;
  1977. top: 1px !important;
  1978. padding-right: 23px;
  1979. }
  1980.  
  1981. .res #RESShortcuts {
  1982. color: #DFE1E8;
  1983. }
  1984.  
  1985. /* Footer */
  1986. .footer-parent {
  1987. height: 800px;
  1988. margin-top: 192px;
  1989. padding: 528px 0 64px;
  1990. background: url(%%ArchLabs-header-1%%) 50% 0 / cover no-repeat;
  1991. }
  1992.  
  1993. .footer {
  1994. border: 0 solid;
  1995. border-radius: 2px;
  1996. background: rgba(43,51,58,0.64);
  1997. padding: 16px;
  1998. max-width: 640px;
  1999. }
  2000.  
  2001. .footer .col {
  2002. padding: 0 24px;
  2003. border: none;
  2004. }
  2005.  
  2006. .flat-vert.title, .bottommenu a {
  2007. color: rgba(255,255,255,0.7);
  2008. }
  2009.  
  2010. .bottommenu {
  2011. color: rgba(255,255,255,0.42);
  2012. }
  2013.  
  2014. .debuginfo, #hsts_pixel {
  2015. display: none;
  2016. }
  2017.  
  2018. /* Flairs */
  2019. .flair {
  2020. border: none;
  2021. border-radius: 0;
  2022. font: normal 12px Lato,Arial,sans-serif;
  2023. background: transparent;
  2024. color: #8d8b8b;
  2025. padding-left: 0;
  2026. margin-right: inherit;
  2027. }
  2028.  
  2029. .link .flair {
  2030. font-size: 12px;
  2031. }
  2032.  
  2033. .flair:before {
  2034. margin-right: 3px;
  2035. height: auto;
  2036. content: "- ";
  2037. margin-left: 4px;
  2038. }
  2039.  
  2040. .side .flair:before {
  2041. margin-left: 0;
  2042. }
  2043.  
  2044. /* Comments (/r/.../comments) */
  2045. .listing-page .comment {
  2046. margin-left: 0;
  2047. padding: 16px 16px 16px 8px;
  2048. }
  2049.  
  2050. .listing-page .comment .midcol {
  2051. width: 36px;
  2052. margin-right: 2px;
  2053. margin-top: 4px;
  2054. overflow: visible;
  2055. }
  2056.  
  2057. .listing-page .comment .parent {
  2058. margin-bottom: 4px;
  2059. }
  2060.  
  2061. .listing-page .comment .title {
  2062. font-size: 14px;
  2063. margin-left: 8px;
  2064. }
  2065.  
  2066. /* Subreddit Settings Page / Flair Page / Stylesheet Page / Rules Page */
  2067. .linefield, .linefield.mobile {
  2068. background: #cbcbcb;
  2069. color: #98abba;
  2070. margin: 0 0 16px;
  2071. width: 528px;
  2072. border: none;
  2073. }
  2074.  
  2075. .linefield .title {
  2076. color: #98abba;
  2077. text-transform: capitalize;
  2078. padding: 0;
  2079. }
  2080.  
  2081. .linefield .linefield-content {
  2082. padding: 0;
  2083. }
  2084.  
  2085. .linefield .title:first-letter, .linefield label:first-letter {
  2086. text-transform: capitalize;
  2087. }
  2088.  
  2089. .usertext .bottom-area a {
  2090. color: #DFE1E8;
  2091. }
  2092.  
  2093. .usertext .bottom-area a:hover {
  2094. color: #DFE1E8;
  2095. }
  2096.  
  2097. .pretty-form {
  2098. padding-top: 24px;
  2099. }
  2100.  
  2101. .fancy-settings h1, .create-promotion h1 {
  2102. color: rgba(255,255,255,.8);
  2103. }
  2104.  
  2105. .fancy-settings h1 strong {
  2106. color: rgba(255,255,255,1);
  2107. }
  2108.  
  2109. .tabmenu {
  2110. border-bottom: 1px solid #edf1f3;
  2111. margin-bottom: 12px;
  2112. }
  2113.  
  2114. .tabmenu li {
  2115. margin: 0 !important;
  2116. }
  2117.  
  2118. .tabmenu li a {
  2119. background: none;
  2120. color: #DFE1E8;
  2121. font-size: 14px;
  2122. }
  2123.  
  2124. .tabmenu li.selected a {
  2125. color: #DFE1E8;
  2126. background: none;
  2127. border: none;
  2128. }
  2129.  
  2130. .tabpane-content {
  2131. border: none;
  2132. }
  2133.  
  2134. .tabpane-content .flairrow a.author {
  2135. color: #DFE1E8;
  2136. }
  2137.  
  2138. .tabpane-content .tagline a {
  2139. color: #DFE1E8;
  2140. }
  2141.  
  2142. .tabpane-content .thing .title {
  2143. overflow: visible;
  2144. }
  2145.  
  2146. .fancy-settings .pretty-form {
  2147. padding-top: 0;
  2148. }
  2149.  
  2150. .fancy-settings h1, .fancy-settings h1 strong {
  2151. color: rgba(0,0,0,.87);
  2152. }
  2153.  
  2154. /* More subreddits */
  2155. [class] .searchfacets {
  2156. border: none;
  2157. margin: 0 0 8px;
  2158. width: 100%;
  2159. max-width: initial;
  2160. }
  2161.  
  2162. .searchfacets .title {
  2163. margin: 0;
  2164. }
  2165.  
  2166. .searchfacets h4.title {
  2167. color: #DFE1E8;
  2168. margin: 0 0 8px;
  2169. }
  2170.  
  2171. .searchfacets h4.title:first-letter {
  2172. text-transform: capitalize;
  2173. }
  2174.  
  2175. .searchfacets .list {
  2176. margin: 0;
  2177. }
  2178.  
  2179. .searchfacets .facet.count {
  2180. color: #DFE1E8;
  2181. font-weight: 400;
  2182. }
  2183.  
  2184. .searchfacets .facet.count:hover {
  2185. text-decoration: none;
  2186. }
  2187.  
  2188. .search-page .morelink {
  2189. top: 384px;
  2190. }
  2191.  
  2192. .search-page .side {
  2193. margin-top: 280px;
  2194. }
  2195.  
  2196. .search-summary {
  2197. display: none;
  2198. }
  2199.  
  2200. /* Item */
  2201. .search-result {
  2202. overflow: hidden;
  2203. width: 100%;
  2204. margin: 0;
  2205. padding: 16px;
  2206. }
  2207.  
  2208. .combined-search-page .search-result .search-result-header .search-title {
  2209. color: #DFE1E8;
  2210. }
  2211.  
  2212. .combined-search-page .search-result .search-result-meta {
  2213. color: #DFE1E8;
  2214. }
  2215.  
  2216. .combined-search-page .search-result a, .combined-search-page .search-result a > mark {
  2217. color: #DFE1E8;
  2218. }
  2219.  
  2220. .combined-search-page .search-result-subreddit .search-subscribe-button {
  2221. border-radius: 2px;
  2222. }
  2223.  
  2224. .combined-search-page .search-result-subreddit .search-subscribe-button .add, .combined-search-page .search-result-subreddit .search-subscribe-button .add:active {
  2225. background: #545252;
  2226. border: none;
  2227. border-radius: 2px;
  2228. }
  2229.  
  2230. /* Sidebar */
  2231. .comments-page .side,
  2232. .other-discussions-page .side {
  2233. margin-top: 400px;
  2234. }
  2235.  
  2236. .comments-page .side .linkinfo,
  2237. .other-discussions-page .side .linkinfo {
  2238. position: absolute;
  2239. top: 494px;
  2240. padding: 16px;
  2241. width: 320px;
  2242. height: 98px;
  2243. background: #cbcbcb;
  2244. border-radius: 2px;
  2245. box-shadow: 0 1px 5px rgba(0,0,0,0.16);
  2246. border: none;
  2247. }
  2248.  
  2249. .comments-page .side .linkinfo .date,
  2250. .other-discussions-page .side .linkinfo .date {
  2251. color: #98abba;
  2252. }
  2253.  
  2254. .comments-page .side .linkinfo .date:first-letter,
  2255. .other-discussions-page .side .linkinfo .date:first-letter {
  2256. text-transform: capitalize;
  2257. }
  2258.  
  2259. .comments-page .side .linkinfo .score,
  2260. .other-discussions-page .side .linkinfo .score {
  2261. color: #323131;
  2262. margin-top: 8px;
  2263. }
  2264.  
  2265. .linkinfo .score .number, .linkinfo .views .view-count,
  2266. .other-discussions-page .linkinfo .score .number,
  2267. .other-discussions-page .linkinfo .views .view-count {
  2268. font-size: 14px;
  2269. }
  2270.  
  2271. .linkinfo .score .word, .linkinfo .views .unit {
  2272. font-size: 14px;
  2273. }
  2274.  
  2275. .comments-page .side .linkinfo .shortlink,
  2276. .other-discussions-page .side .linkinfo .shortlink {
  2277. font-size: 90%;
  2278. margin-top: -2px;
  2279. visibility: hidden;
  2280. }
  2281.  
  2282. .comments-page .side .linkinfo .shortlink input,
  2283. .other-discussions-page .side .linkinfo .shortlink input {
  2284. background-color: #989797;
  2285. border: none;
  2286. border-radius: 0 0 2px 2px;
  2287. margin: 0 -16px;
  2288. padding: 10px 16px;
  2289. visibility: visible;
  2290. width: 320px;
  2291. }
  2292.  
  2293. .res.comments-page .side {
  2294. margin-top: 414px;
  2295. }
  2296.  
  2297. .combined-search-page .search-result-subreddit .search-subscribe-button .remove, .combined-search-page .search-result-subreddit .search-subscribe-button .remove:active {
  2298. background: transparent;
  2299. border: 1px solid #7a7878;
  2300. color: #DFE1E8;
  2301. }
  2302.  
  2303. .combined-search-page .search-result .search-comments {
  2304. color: #DFE1E8;
  2305. }
  2306.  
  2307. .search-result.has-thumbnail > .thumbnail {
  2308. margin-right: 16px;
  2309. flex: 0 0 80px;
  2310. }
  2311.  
  2312. .search-result.has-thumbnail > .thumbnail.self, .search-result.has-thumbnail > .thumbnail.default, .search-result.has-thumbnail > .thumbnail.nsfw, .search-result.has-thumbnail > .thumbnail.image {
  2313. margin-right: 28px;
  2314. flex: 0 0 56px;
  2315. }
  2316.  
  2317. .combined-search-page .search-result-group footer .nav-buttons {
  2318. margin: 0;
  2319. }
  2320.  
  2321. .link .entry .buttons li .redditSingleClick {
  2322. padding: 0 1px;
  2323. color: #98abba;
  2324. font: normal 13px Lato,Arial,sans-serif;
  2325. transition: all .15s ease;
  2326. }
  2327.  
  2328. .nextprev, .next-suggestions {
  2329. color: #DFE1E8;
  2330. }
  2331.  
  2332. .content .infobar {
  2333. margin: 0 0 16px;
  2334. padding: 8px 16px;
  2335. line-height: 26px;
  2336. border: none;
  2337. background-color: #9c9b9b;
  2338. color: #fff;
  2339. border-radius: 2px;
  2340. }
  2341.  
  2342. .infobar .md {
  2343. color: #fff;
  2344. }
  2345.  
  2346. .content .infobar:first-letter {
  2347. text-transform: capitalize;
  2348. }
  2349.  
  2350. .content .infobar.welcome {
  2351. line-height: inherit;
  2352. height: 86px;
  2353. }
  2354.  
  2355. .content .infobar.welcome h1 {
  2356. color: #4d5763;
  2357. }
  2358.  
  2359. .commentarea .infobar {
  2360. line-height: 18px;
  2361. margin: 0 0 16px;
  2362. }
  2363.  
  2364. .commentarea .infobar a {
  2365. color: rgba(0,0,0,0.64);
  2366. font-weight: 700;
  2367. }
  2368.  
  2369. .md a {
  2370. color: #cbcbcb;
  2371. text-decoration: none;
  2372. }
  2373.  
  2374. .tagline a, .search-result-meta a {
  2375. color: #cbcbcb;
  2376. text-decoration: none;
  2377. }
  2378.  
  2379. .new-comment .md :not(pre) > code, .link .md :not(pre) > code, .usertext.border .md :not(pre) > code, .new-comment .md pre, .link .md pre, .usertext.border .md pre {
  2380. background-color: #767474;
  2381. }
Add Comment
Please, Sign In to add comment