API tools faq
paste
Advertisement
KumikoOumae

Wanikani Forums Transparent Theme 2.0

KumikoOumae
Sep 12th, 2019
263
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 67.13 KB | None | 0 0
raw download clone embed print report
  1. /*__________________________________________*/
  2. /*                THEME INFO
  3. /*__________________________________________*/
  4.  
  5. /*
  6.  
  7. Name:           Forum Transparency 2.0
  8. Author:         Kumirei
  9. Version:        2.1.7
  10. Total lines:    3051
  11. Latest update:  12-09-2019
  12.  
  13. Forum post:     https://community.wanikani.com/t/userstyle-forum-transparency-20/32287
  14. Theme link:     https://userstyles.org/styles/163317/wanikani-forum-transparency-2-0
  15. Email address:  kumi@kumirei.com
  16.  
  17. For bug reports, suggestions, and everything else, you can reach me on the Wanikani forums or my email address.
  18.  
  19. Thank you for installing this theme.
  20. Love, Kumirei.
  21.  
  22. */
  23.  
  24.  
  25.  
  26. /*__________________________________________*/
  27. /*                 Variables
  28. /*__________________________________________*/
  29.  
  30. :root {
  31.     /* BACKGROUND IMAGE */
  32.     --background-image-url: url(https://i.imgur.com/idxX0V5.png);
  33.    
  34.     /* TEXT */
  35.     --main-text: #F0F0F0;                         /* Main text color */
  36.     --second-text: #C8C8C8;                       /* Slightly darker text, used when not much contrast is needed */
  37.     --main-light-grey: #B4B4B4;                   /* Slightly darker than second text */
  38.     --main-dark: #2A2A2A;                         /* Main dark text color */
  39.     --main-grey: #545454;                         /* Main grey color. Used in mentions */
  40.     --link-color: #FFFFFF;                        /* Default color of links */
  41.    
  42.     /* BACKGROUND COLORS */
  43.     --main-trans: 0, 0, 0;                          /* Main color of transparent areas */
  44.     --main-light-trans: 255, 255, 255;              /* Color of light transparent areas */
  45.    
  46.     /* BACKGROUND ALPHAS */
  47.     --main-alpha: 0.7;                              /* The darker alpha, for headers and menus and such */
  48.     --second-alpha: 0.5;                            /* Alpha value for threads and such */
  49.     --third-alpha: 0.3;                             /* Alpha value of highlighted posts and some other things */
  50.     --main-light-alpha: 0.2;                        /* Alpha value of light transparent areas */
  51.    
  52.     /* BACKGROUNDS */
  53.     --header-background: rgba(var(--main-trans), var(--main-alpha));                    /* Background for headers and stuff */
  54.     --content-background: rgba(var(--main-trans), var(--second-alpha));                 /* Background for most content */
  55.     --highlight-background: rgba(var(--main-light-trans), var(--main-light-alpha));     /* Background for highlights */
  56.    
  57.     /* SYMBOL COLORS */
  58.     --fa-heart-color: #D580FF;                    /* Color of hearts */
  59.     --fa-reply-color: #EF6767;                    /* Color of reply symbols */
  60.     --fa-quote-color: #F0F0F0;                    /* Color of quote symbols */
  61.     --fa-mention-color: #58A2E4;                  /* Color of @ symbols */
  62.     --fa-edit-color: #71C488;                     /* Color of pen symbols */
  63.     --fa-pm-color: #F0F0F0;                       /* Color of pm symbols */
  64.     --fa-checked-box-color: #BBF1A5;              /* Color of checked boxes */
  65.     --fa-badge-star: #E8E86E;                     /* Color of badge symbol on user page */
  66.    
  67.     /* OTHER COLORS */
  68.     --lifetime-purple: 213, 128, 255;               /* The color of lifetime subscriptions */
  69.     --main-accent: 213, 128, 255;                   /* Main accent color */
  70.     --border-color: rgba(var(--main-light-trans), var(--second-alpha));     /* Color for various thin borders */
  71.     --border-color-faint: rgba(var(--main-light-trans), 0.6);               /* Color for certain fainter border */
  72.    
  73.     /* THREAD VARIABLES */
  74.     --posts-margin: 5px;                            /* Margin between posts in threads, and some other things */
  75.     --padding-post: 10px;                           /* Padding at edges of posts and related elements */
  76.     --padding-slider: 15px;                         /* Padding on the slider in threads */
  77.     --slider-width: 132px;                          /* Width of the slider in threads */
  78.     --suggested-topics-width: 150px;                /* Width of the "Suggested Topics" title */
  79.     --suggested-topics-height: 20px;                /* Height of the "Suggested Topics" title */
  80.     --avatar-radius: 50%;                           /* The roundness of avatars */
  81.    
  82.     /* OTHER VARIABLES */
  83.     --list-padding: 10px;                           /* Padding around various lists */
  84.     --border-radius: 0px;                           /* If you want your edges a bit rounded */
  85.     --glyph-size: 20px;                             /* Size of the symbols in, for example, the header */
  86.     --global-footer: none;                          /* Use "none" to remove the footer or "block" if you want to keep it */
  87.     --wide-posts: 0;                                /* Use 1 for yes, 0 for no. See forum post or userstyle's page to find out what this is */
  88.     --default-avatar: url("https://discourse-cdn-sjc1.com/business5/uploads/wanikani_community/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"); /* The avatar for people who has not chosen a personal avatar */
  89. }
  90.  
  91.  
  92.  
  93. /*__________________________________________*/
  94. /*                  INDEX
  95. /*__________________________________________*/
  96.  
  97. /*
  98.  
  99. * [1] THEME INFO
  100. * [26] VARIABLES
  101. * [93] INDEX
  102. * [171] GLOBAL
  103.     * [175] Background
  104.     * [187] Menus
  105.     * [196] Links
  106.     * [205] Global footer
  107.     * [231] FA:s
  108.     * [253] Hovering
  109.     * [266] List borders
  110.     * [278] Notifications
  111.     * [294] Categories
  112.     * [302] Buttons
  113.     * [339] Lists
  114.     * [446] Select kit
  115.     * [454] Spinner
  116.     * [478] Other
  117. * [516] HEADER
  118.     * [519] General
  119.     * [550] Lesson and review count bar
  120.     * [578] Notifications
  121. * [698] HOMEPAGE
  122.     * [702] General
  123.     * [749] Categories
  124.     * [821] Top
  125. * [856] IN THREAD
  126.     * [860] Title
  127.     * [889] Post info
  128.     * [1148] Post content
  129.     * [1297] Slider
  130.     * [1458] Foot
  131.     * [1577] Reply box
  132. * [1697] USER PAGE
  133.     * [1701] General
  134.     * [1741] About
  135.     * [1776] Nav
  136.     * [1806] FA:s
  137.     * [1830] Activity
  138.     * [1863] Summary
  139.     * [1970] Notifications
  140.     * [2024] Badges
  141.     * [2064] Preferences
  142. * [2180] SEARCH
  143.     * [2184] General
  144.     * [2201] Left
  145.     * [2255] Right
  146.     * [2321] Header search
  147. * [2346] OTHER PAGES
  148.     * [2350] Page not found
  149.     * [2362] User card
  150.     * [2391] Badges
  151.     * [2411] Edit history
  152.     * [2423] About, FAQ, TOS, Privacy
  153. * [2505] CHANGE LOG
  154.     * [2509] Version 1.0.0
  155.     * [2519] Version 2.0.0
  156.     * [2528] Version 2.0.1
  157.     * [2564] Version 2.0.2
  158.     * [2708] Version 2.1.0
  159.     * [2721] Version 2.1.1
  160.     * [2731] Version 2.1.2
  161.     * [2741] Version 2.1.3
  162.     * [2777] Version 2.1.4
  163.     * [2790] Version 2.1.5
  164.     * [2900] Version 2.1.6
  165.     * [2986] Version 2.1.7
  166.  
  167. */
  168.  
  169.  
  170.  
  171. /*__________________________________________*/
  172. /*                  Global
  173. /*__________________________________________*/
  174.  
  175. /* Background
  176. /*____________________*/
  177.  
  178. body {
  179.     background: var(--background-image-url);
  180.     background-size: cover;
  181.     background-position: center;
  182.     background-attachment: fixed;
  183.     color: var(--main-text);
  184. }
  185.  
  186.  
  187. /* Menus
  188. /*____________________*/
  189.  
  190. .menu-panel {
  191.     border: none;
  192.     background-color: var(--header-background);
  193. }
  194.  
  195.  
  196. /* Links
  197. /*____________________*/
  198.  
  199. p a {
  200.     color: var(--main-text) !important;
  201.     font-weight: bold;
  202. }
  203.  
  204.  
  205. /* Global Footer
  206. /*____________________*/
  207.  
  208. #page-footer {
  209.     border: none;
  210.     max-width: 1110px;
  211.     padding: 0;
  212.     margin: var(--posts-margin) 8px var(--posts-margin) 8px;
  213.     background-color: var(--content-background);
  214.     display: var(--global-footer);
  215. }
  216.  
  217. #page-footer a {
  218.     color: var(--main-text);
  219. }
  220.  
  221. #page-footer p {
  222.     margin: 0;
  223.     padding: var(--padding-post);
  224.     display: inline-block}
  225.  
  226. #page-footer p:last-child {
  227.     float: right;
  228. }
  229.  
  230.  
  231. /* FA:s
  232. /*____________________*/
  233.  
  234. .fa {
  235.     color: var(--main-text) !important;
  236. }
  237.  
  238. .fa-exclamation-circle.d-watching,
  239. .fa-exclamation-circle.watching,
  240. .fa-exclamation-circle.d-icon-d-watching,
  241. .fa-circle.d-icon-d-tracking,
  242. .fa-circle.d-tracking,
  243. .fa-circle.tracking {
  244.     color: rgba(var(--main-accent)) !important;
  245. }
  246.  
  247. .fa-check-square,
  248. .topic-status .fa-check-square-o {
  249.     color: var(--fa-checked-box-color) !important;
  250. }
  251.  
  252.  
  253. /* Hovering
  254. /*____________________*/
  255.  
  256. .icon:active,
  257. .icon:hover,
  258. .user-menu .notifications li[class="read"]:hover,
  259. .menu-links-header a:hover,
  260. .menu-panel ul.menu-links li a:hover,
  261. .menu-panel ul li.heading a:hover {
  262.     background-color: var(--highlight-background) !important;
  263. }
  264.  
  265.  
  266. /* List Borders
  267. /*____________________*/
  268.  
  269. hr {
  270.     border-color: var(--main-text);
  271. }
  272.  
  273. .table-heading {
  274.     border-bottom: 2px solid var(--border-color-faint) !important;
  275. }
  276.  
  277.  
  278. /* Notifications
  279. /*____________________*/
  280.  
  281. .badge-notification {
  282.     background-color: rgba(var(--main-accent)) !important;
  283. }
  284.  
  285. .badge-notification.new-topic {
  286.     background-color: transparent !important;
  287. }
  288.  
  289. .badge-notification.unread {
  290.     background-color: var(--main-light-grey) !important;
  291. }
  292.  
  293.  
  294. /* Categories
  295. /*____________________*/
  296.  
  297. .badge-category {
  298.     color: var(--second-text) !important;
  299. }
  300.  
  301.  
  302. /* Buttons
  303. /*____________________*/
  304.  
  305.  
  306. .btn,
  307. .btn[href],
  308. .bullet > a {
  309.     border-radius: var(--border-radius);
  310.     color: var(--main-text);
  311.     background-color: var(--content-background) !important;
  312. }
  313.  
  314. .btn:hover,
  315. .bullet > a:hover {
  316.     background-color: rgba(var(--main-trans), var(--third-alpha)) !important;
  317. }
  318.  
  319. .btn-flat .d-icon,
  320. .btn .d-icon {
  321.     opacity: 1;
  322. }
  323.  
  324. .d-button-label {
  325.     color: var(--main-text);
  326. }
  327.  
  328. button:hover,
  329. button.d-hover {
  330.     border-radius: var(--border-radius);
  331.     background-color: var(--highlight-background) !important;
  332. }
  333.  
  334. .btn[disabled]:hover {
  335.     background-color: var(--content-background) !important;
  336. }
  337.  
  338.  
  339. /* Lists
  340. /*____________________*/
  341.  
  342. .topic-list {
  343.     margin-bottom: 0;
  344. }
  345.  
  346. .topic-list > tbody {
  347.     border-top: 3px solid var(--main-dark);
  348. }
  349.  
  350. .topic-list th {
  351.     color: var(--main-text);
  352.     font-weight: bold;
  353. }
  354.  
  355. .topic-list tr {
  356.     border-color: var(--main-dark) !important;
  357. }
  358.  
  359. .topic-list tr:hover {
  360.     background-color: var(--highlight-background);
  361. }
  362.  
  363. .topic-list thead tr:first-child:hover {
  364.     background-color: transparent !important;
  365. }
  366.  
  367. .topic-list .sortable:hover {
  368.     background-color: var(--highlight-background);
  369. }
  370.  
  371. .topic-list th:first-of-type,
  372. .topic-list td:first-of-type {
  373.     padding-left: var(--list-padding);
  374. }
  375.  
  376. .topic-list th:last-of-type,
  377. .topic-list td:last-of-type {
  378.     padding-right: var(--list-padding);
  379. }
  380.  
  381. .topic-list a,
  382. .topic-list .num {
  383.     color: var(--main-text) !important;
  384. }
  385.  
  386. .topic-list .topic-excerpt,
  387. .topic-list .visited .title {
  388.     color: var(--second-text) !important;
  389. }
  390.  
  391. .topic-list>tbody>tr.highlighted {
  392.     animation-name: post-highlight;
  393. }
  394.  
  395. #list-area {
  396.     margin-bottom: 0;
  397. }
  398.  
  399. #list-area .topic-list-bottom {
  400.     margin: 0;
  401.     padding-left: var(--list-padding);
  402. }
  403.  
  404. #list-area .topic-list-bottom #dismiss-topics {
  405.     transform: translate(0, -5px);
  406.     margin-right: 5px;
  407. }
  408.  
  409. #list-area .footer-message p {
  410.     color: var(--main-text);
  411. }
  412.  
  413. #list-area .footer-message .education {
  414.     color: var(--main-text);
  415. }
  416.  
  417. #list-area .footer-message h3 {
  418.     margin-top: 10px;
  419. }
  420.  
  421. #list-area .footer-message h3 a {
  422.     color: rgba(var(--main-accent));
  423. }
  424.  
  425. #list-area .footer-message .badge.new-topic {
  426.     vertical-align: inherit !important;
  427.     color: rgba(var(--main-accent));
  428. }
  429.  
  430. .alert {
  431.     color: var(--main-text) !important;
  432.     background-color: var(--main-dark) !important;
  433. }
  434.  
  435. #topic-entrance {
  436.     border: 0;
  437.     border-radius: var(--border-radius);
  438.     background-color: var(--header-background);
  439. }
  440.  
  441. #topic-entrance .full {
  442.     background-color: var(--highlight-background) !important;
  443. }
  444.  
  445.  
  446. /* Select kit
  447. /*____________________*/
  448.  
  449. .select-kit-header {
  450.     border-radius: var(--border-radius);
  451. }
  452.  
  453.  
  454. /* Spinner
  455. /*____________________*/
  456.  
  457. .spinner {
  458.     width: 55px;
  459.     height: 55px;
  460.     border: 2px solid rgb(240,240,240);
  461.     border-top-color: transparent;
  462.     border-bottom-color: transparent;
  463.     background-image: url(https://i.imgur.com/z0eMoXs.png) !important;
  464.     background-color: rgba(0,0,0,0.7) !important;
  465.     background: no-repeat center 10px;
  466.     background-size: 40px;
  467.     animation: rotate-forever 1s infinite;
  468. }
  469.  
  470. .spinner.small {
  471.   height: 15px;
  472.   width: 15px;
  473.   background-position: center center;
  474.   background-size: 10px;
  475. }
  476.  
  477.  
  478. /* Other
  479. /*____________________*/
  480.  
  481. img.avatar {
  482.     border-radius: var(--avatar-radius);
  483. }
  484.  
  485. .private-message_warning {
  486.     display: none;
  487. }
  488.  
  489. body.float_wkappnav #main-outlet {
  490.     padding-top: calc(93px + var(--posts-margin)) !important;
  491. }
  492.  
  493. body:not(.float_wkappnav) #main-outlet {
  494.     padding-top: 4.85722em;
  495. }
  496.  
  497. body:not(.float_wkappnav) .wanikani-app-nav {
  498.     background-color: var(--header-background);
  499. }
  500.  
  501. body:not(.float_wkappnav) .wanikani-app-nav ul {
  502.     padding: 0.5em;
  503.     border: none;
  504. }
  505.  
  506. body:not(.float_wkappnav) .wanikani-app-nav li {
  507.     color: var(--main-text);
  508. }
  509.  
  510. body:not(.float_wkappnav) .wanikani-app-nav li a {
  511.     color: var(--second-text);
  512. }
  513.  
  514.  
  515.  
  516. /*__________________________________________*/
  517. /*                  HEADER
  518. /*__________________________________________*/
  519.  
  520. /* General
  521. /*____________________*/
  522.  
  523. .d-header {
  524.     background-color: var(--header-background);
  525. }
  526.  
  527. .d-header .container,
  528. .d-header .contents {
  529.     padding: 0 var(--padding-post);
  530. }
  531.  
  532. .d-header .title .logo-big {
  533.     width: 398px;
  534.     height: 60px;
  535.     box-sizing: border-box;
  536.     padding-left: 398px;
  537.     background: url("https://i.imgur.com/te3wMyh.png") no-repeat;
  538.     background-size: contain;
  539. }
  540.  
  541. .d-header .active .icon {
  542.     background-color: var(--highlight-background) !important;
  543. }
  544.  
  545. .d-header .active .icon:after {
  546.     border: none !important;
  547. }
  548.  
  549.  
  550. /* Lesson and Review count bar
  551. /*____________________________*/
  552.  
  553. .float_wkappnav .wanikani-app-nav-container {
  554.     border-color: var(--second-text);
  555. }
  556.  
  557. .float_wkappnav .wanikani-app-nav li {
  558.     color: var(--main-text) !important;
  559. }
  560.  
  561. .float_wkappnav .wanikani-app-nav li a {
  562.     color: var(--main-text) !important;
  563. }
  564.  
  565. .float_wkappnav li[data-highlight="true"] .dashboard_bubble {
  566.     background-color: rgba(var(--main-accent));
  567. }
  568.  
  569. li[data-highlight="false"] .float_wkappnav .dashboard_bubble {
  570.     background-color: var(--main-light-grey);
  571. }
  572.  
  573. .float_wkappnav #next_review {
  574.     background-color: rgba(var(--main-accent)) !important;
  575. }
  576.  
  577.  
  578. /* Notifications
  579. /*____________________*/
  580.  
  581. .d-header .menu-panel {
  582.     height: auto !important;
  583.     padding-top: 0;
  584. }
  585.  
  586. .d-header .menu-panel .notifications li {
  587.     background-color: var(--highlight-background);
  588. }
  589.  
  590. .d-header .menu-panel .notifications li div {
  591.     color: var(--main-text) !important;
  592. }
  593.  
  594. .d-header .menu-panel .notifications li div span {
  595.     color: var(--main-text) !important;
  596. }
  597.  
  598. .d-header .menu-panel .notifications .read {
  599.     background-color: transparent;
  600. }
  601.  
  602. .d-header .menu-panel .notifications .read div {
  603.     color: var(--second-text) !important;
  604. }
  605.  
  606. .d-header .menu-panel .notifications .fa-heart {
  607.     color: var(--fa-heart-color) !important;
  608. }
  609.  
  610. .d-header .menu-panel .notifications .fa-reply {
  611.     color: var(--fa-reply-color) !important;
  612. }
  613.  
  614. .d-header .menu-panel .notifications .fa-quote-right {
  615.     color: var(--fa-quote-color) !important;
  616. }
  617.  
  618. .d-header .menu-panel .notifications .fa-pencil {
  619.     color: var(--fa-edit-color) !important;
  620. }
  621.  
  622. .d-header .menu-panel .notifications .fa-envelope-o {
  623.     color: var(--fa-pm-color) !important;
  624. }
  625.  
  626. .d-header .menu-panel .notifications .fa-at {
  627.     color: var(--fa-mention-color) !important;
  628. }
  629.  
  630. .d-header .menu-panel a {
  631.     color: var(--main-text);
  632. }
  633.  
  634. .d-header .menu-panel .panel-body {
  635.     width: 100%;
  636.     position: relative;
  637. }
  638.  
  639. .d-header .menu-links-header {
  640.     border-spacing: 0;
  641. }
  642.  
  643. .d-header .menu-panel .widget-link {
  644.     display: inline-block;
  645. }
  646.  
  647. .d-header .menu-panel .badge-notification {
  648.     background-color: transparent !important;
  649.     color: rgba(var(--main-accent)) !important;
  650.     font-weight: bold;
  651.     font-size: small;
  652. }
  653.  
  654. .d-header .menu-panel .glyphs .widget-link {
  655.     height: 10px;
  656.     padding: calc(var(--glyph-size) - 10px);
  657. }
  658.  
  659. .d-header .menu-panel .glyphs .widget-link .fa {
  660.     font-size: calc(14px + var(--glyph-size) - 20px);
  661. }
  662.  
  663. .d-header .menu-panel .glyphs .widget-link .fa {
  664.     position: relative;
  665.     vertical-align: middle;
  666.     right: 50%;
  667.     transform: translate(50%,-50%);
  668. }
  669.  
  670. .drop-down-mode .d-header-icons .active .icon {
  671.     border-color: transparent;
  672. }
  673.  
  674. .d-header-icons .icon:hover,
  675. .d-header-icons .icon:focus {
  676.     border-radius: var(--border-radius);
  677.     background-color: var(--highlight-background) !important;
  678. }
  679.  
  680. .menu-panel li a:hover {
  681.     background-color: transparent;
  682. }
  683.  
  684. .menu-panel li.heading a:focus {
  685.     background-color: var(--highlight-background) !important;
  686. }
  687.  
  688. .menu-panel li a:focus {
  689.     background-color: transparent;
  690. }
  691.  
  692. .d-header #current-user .unread-private-messages {
  693.     right: initial;
  694. }
  695.  
  696.  
  697.  
  698. /*__________________________________________*/
  699. /*                  HOMEPAGE
  700. /*__________________________________________*/
  701.  
  702. /* General
  703. /*____________________*/
  704.  
  705. .list-controls .container {
  706.     border-radius: var(--border-radius);
  707.     margin-bottom: var(--posts-margin);
  708.     padding: var(--list-padding);
  709.     background-color: var(--content-background);
  710. }
  711.  
  712. .list-controls .category-dropdown-menu {
  713.     border: 0;
  714.     padding: 0 1px 0 1px;
  715.     background-color: var(--header-background);
  716. }
  717.  
  718. .list-controls a {
  719.     color: var(--main-text) !important;
  720. }
  721.  
  722. .nav-pills .active a,
  723. .list-controls a:hover {
  724.     border-radius: var(--border-radius);
  725.     background-color: var(--highlight-background) !important;
  726. }
  727.  
  728. .list-controls .btn,
  729. .list-controls .nav {
  730.     margin-bottom: 0;
  731. }
  732.  
  733. .topic-list-item-separator td {
  734.     border-bottom: 1px solid var(--main-text) !important;
  735. }
  736.  
  737. .topic-list-item-separator span {
  738.     color: var(--main-dark) !important;
  739.     border-radius: var(--border-raidus);
  740.     background-color: var(--main-text) !important;
  741. }
  742.  
  743. .list-container .row:nth-child(2) {
  744.     border-radius: var(--border-radius);
  745.     background-color: var(--content-background);
  746. }
  747.  
  748.  
  749. /* Categories
  750. /*____________________*/
  751.  
  752. .categories-and-latest {
  753.     padding-bottom: var(--list-padding);
  754.     padding-right: var(--list-padding);
  755. }
  756.  
  757. .categories-and-latest .new-topic,
  758. .categories-and-latest .top-row a.new-topic,
  759. .categories-and-latest .new-posts {
  760.     color: rgba(var(--main-accent)) !important;
  761.     background-color: transparent !important;
  762. }
  763.  
  764. .categories-and-latest .topic-post-badges .new-posts {
  765.     color: var(--main-text);
  766.     background-color: rgba(var(--main-accent)) !important;
  767. }
  768.  
  769. .latest-topic-list .table-heading,
  770. .category-list th {
  771.     color: var(--main-text);
  772. }
  773.  
  774. .category-list .category-name {
  775.     color: var(--main-text);
  776. }
  777.  
  778. .category-list .category-description {
  779.     color: var(--second-text);
  780. }
  781.  
  782. .latest-topic-list .visited .top-row a {
  783.     color: var(--second-text) !important;
  784. }
  785.  
  786. .latest-topic-list .top-row a {
  787.     color: var(--main-text) !important;
  788. }
  789.  
  790. .latest-topic-list .topic-stats .posts-map,
  791. .latest-topic-list .topic-stats .heatmap-high,
  792. .latest-topic-list .topic-stats .relative-date,
  793. .categories-and-latest .topics div {
  794.     color: var(--second-text) !important;
  795. }
  796.  
  797. .category-list .subcategories {
  798.     border-radius: var(--border-radius);
  799.     padding: var(--list-padding);
  800.     padding-right: 0;
  801.     background-color: var(--content-background);
  802. }
  803.  
  804. .latest-topic-list > div {
  805.     border-bottom-color: var(--border-color-faint);
  806. }
  807.  
  808. .category-list tbody tr:first-of-type {
  809.     border-top-color: var(--border-color-faint);
  810. }
  811.  
  812. .category-list tbody tr {
  813.     border-bottom-color: var(--border-color-faint);
  814. }
  815.  
  816. .topic-list a[title="new topic"] {
  817.     color: rgba(var(--main-accent)) !important;
  818. }
  819.  
  820.  
  821. /* Top
  822. /*____________________*/
  823.  
  824. .top-lists {
  825.     padding-top: var(--list-padding);    
  826.     padding-left: var(--list-padding);
  827. }
  828.  
  829. .top-lists h2 {
  830.     margin-top: 0 !important;
  831. }
  832.  
  833. .top-lists .top-date-string {
  834.     color: var(--main-text);
  835. }
  836.  
  837. .top-lists .period-popup {
  838.     border: 0 !important;
  839.     background-color: var(--header-background) !important;
  840. }
  841.  
  842. .top-lists .period-popup a {
  843.     color: var(--main-text) !important;
  844. }
  845.  
  846. .top-lists .period-popup .top-date-string {
  847.     color: var(--second-text) !important;
  848. }
  849.  
  850. .top-lists .period-popup li:hover {
  851.     background-color: var(--highlight-background) !important;
  852. }
  853.  
  854.  
  855.  
  856. /*__________________________________________*/
  857. /*                IN THREAD
  858. /*__________________________________________*/
  859.  
  860. /* Title
  861. /*____________________*/
  862.  
  863. .d-header .topic-link span {
  864.     color: var(--main-text);
  865. }
  866.  
  867. #topic-title {
  868.     padding: var(--padding-post);
  869.     padding-bottom: calc(var(--padding-post) - 5px);
  870.     border-radius: var(--border-radius);
  871.     background-color: var(--header-background);
  872.     margin-bottom: var(--posts-margin);
  873. }
  874.  
  875. #topic-title a {
  876.     color: var(--main-text) !important;
  877. }
  878.  
  879. #topic-title .badge-category {
  880.     color: var(--main-text);
  881. }
  882.  
  883. .container.posts::before,
  884. .container.posts .row::before {
  885.     display: none;
  886. }
  887.  
  888.  
  889. /* Post info
  890. /*____________________*/
  891.  
  892. .topic-post {
  893.     border-radius: var(--border-radius);
  894.     padding-left: var(--padding-post);
  895.     border: 0;
  896.     margin-top: var(--posts-margin);
  897.     background-color: var(--content-background);
  898. }
  899.  
  900. .topic-post .post-info.post-date {
  901.     padding-right: 10px;
  902. }
  903.  
  904. @media (min-width: 976px) {
  905.     .gap,
  906.     .time-gap,
  907.     .topic-post,
  908.     .small-action,
  909.     .small-action .small-action-desc,
  910.     .loading-container .presence-users {
  911.         width: calc(100% - 162px) !important;
  912.     }
  913. }
  914.  
  915. .topic-body {
  916.     width: calc(100% - 65px - 2 * (var(--padding-post) - 10px));
  917.     padding: var(--padding-post) var(--padding-post) 0 var(--padding-post);
  918. }
  919.  
  920. .topic-body .cooked {
  921.     width: calc(100% - 45px - var(--padding-post));
  922. }
  923.  
  924. .topic-avatar {
  925.     padding-top: var(--padding-post);
  926. }
  927.  
  928. .topic-avatar,
  929. .topic-body {
  930.     border: 0;
  931. }
  932.  
  933. .topic-meta-data a {
  934.     color: var(--main-text) !important;
  935. }
  936.  
  937. .topic-meta-data .user-title,
  938. .topic-meta-data .user-title a {
  939.     color: var(--second-text) !important;
  940. }
  941.  
  942. @keyframes post-highlight {
  943.     from {background-color: rgba(var(--main-accent), var(--third-alpha));
  944.     }
  945.     to {background-color: transparent;
  946.     }
  947. }
  948.  
  949. .topic-body.highlighted {
  950.     animation-name: post-highlight;
  951. }
  952.  
  953. .topic-body .read-state {
  954.     right: calc(var(--padding-post) / 2);
  955.     transform: translate(50%,0);
  956.     top: 11px;
  957. }
  958.  
  959. .topic-post .read-state .fa-circle {
  960.     color: rgba(var(--main-accent)) !important
  961. }
  962.  
  963. .post-controls .like-count {
  964.     color: var(--main-text) !important;
  965. }
  966.  
  967. .post-controls .reply {
  968.     color: var(--main-text) !important;
  969. }
  970.  
  971. .discourse-no-touch .topic-body .actions .fade-out {
  972.     opacity: initial;
  973.     transition: none;
  974. }
  975.  
  976. .post-controls .has-like .fa-heart {
  977.     color: var(--fa-heart-color) !important;
  978. }
  979.  
  980. .time-gap {
  981.     padding: 0.5em calc(var(--padding-post) / 2);
  982.     background-color: var(--content-background);
  983.     max-width: unset;
  984.     margin-top: var(--posts-margin);
  985.     border: none;
  986.     text-align: center;
  987. }
  988.  
  989. .time-gap .topic-avatar {
  990.     display: none;
  991. }
  992.  
  993. .time-gap .small-action-desc {
  994.     display: inline;
  995.     padding: 0;
  996.     color: var(--main-text) !important;
  997. }
  998.  
  999. .gap {
  1000.     width: calc(100% - 10px);
  1001.     color: var(--main-text);
  1002.     text-align: center;
  1003.     padding: 0.5em calc(var(--padding-post) / 2);
  1004.     margin-top: var(--posts-margin);
  1005.     background-color: var(--content-background);
  1006. }
  1007.    
  1008. .small-action {
  1009.     max-width: unset;
  1010.     border: 0;
  1011. }
  1012.  
  1013. div[id].small-action .small-action-desc {
  1014.     padding-bottom: var(--padding-post); /* might be removed */
  1015.     padding-left: var(--padding-post);
  1016.     padding-top: var(--padding-post);
  1017.     margin-top: var(--posts-margin);
  1018.     background-color: var(--content-background);
  1019.     color: var(--main-text);
  1020. }
  1021.  
  1022. div[id].small-action .btn {
  1023.     transform: translate(0,4px);
  1024. }
  1025.  
  1026. .topic-post .post-links-container ul {
  1027.     border-top: 1px solid var(--main-light-grey);
  1028. }
  1029.    
  1030. .topic-post .post-links-container span {
  1031.     color: var(--main-text);
  1032. }
  1033.  
  1034. .quote-button {
  1035.     background-color: rgba(var(--main-accent));
  1036.     opacity: 1;
  1037. }
  1038.  
  1039. .quote-button:hover {
  1040.     background-color: rgba(var(--main-accent), var(--main-alpha));
  1041. }
  1042.  
  1043. #topic .like-button:hover {
  1044.     background-color: transparent !important;
  1045. }
  1046.  
  1047. #topic .like-count {
  1048.     font-size: 1em !important;
  1049.     margin-right: 2px !important;
  1050. }
  1051.  
  1052. #topic .like-count[title*="1 person"]:after,
  1053. #topic .like-count[title="you liked this post"]:after {
  1054.     content: ' Like';
  1055. }
  1056.  
  1057. #topic .like-count:after {
  1058.     content: ' Likes';
  1059. }
  1060.  
  1061. #topic .toggle-like {
  1062.     padding: 8px 10px !important;
  1063. }
  1064.  
  1065. #topic .my-likes i {
  1066.     display: none !important;
  1067. }
  1068.  
  1069. #topic .fa-heart-o:before {
  1070.     content: "";
  1071. }
  1072.  
  1073. nav.post-controls .like-button:active {
  1074.     box-shadow: none;
  1075. }
  1076.  
  1077. .small-action {
  1078.     padding-left: var(--padding-post);
  1079.     padding-right: 0;
  1080. }
  1081.  
  1082. .small-action .topic-avatar {
  1083.     background-color: var(--content-background);
  1084.     padding: 8px 0px;
  1085.     margin: var(--posts-margin) calc(0px - var(--posts-margin)) 0 0;
  1086.     position: relative;
  1087.     left: calc(0px - var(--padding-post));
  1088. }
  1089.  
  1090. .topic-map {
  1091.     background-color: var(--header-background);
  1092.     border: none;
  1093. }
  1094.  
  1095. .topic-map section {
  1096.     border-color: var(--border-color);
  1097. }
  1098.  
  1099. .topic-map .map {
  1100.     border-top: none;
  1101. }
  1102.  
  1103. .topic-map .buttons .btn {
  1104.     background-color: transparent !important;
  1105.     border-left: none;
  1106. }
  1107.  
  1108. .topic-map .information,
  1109. .topic-map h3,
  1110. .topic-map h4 {
  1111.     color: var(--second-text);
  1112. }
  1113.  
  1114. .topic-map .number {
  1115.     color: var(--main-text) !important;
  1116. }
  1117.  
  1118. .topic-map a {
  1119.     color: var(--link-color);
  1120. }
  1121.  
  1122. .topic-map .link-summary .btn {
  1123.     background-color: transparent !important;
  1124. }
  1125.  
  1126. .post-links a {
  1127.     color: var(--link-color);
  1128.     font-weight: bold;
  1129. }
  1130.  
  1131. .post-links .expand-links {
  1132.     font-weight: normal;
  1133. }
  1134.  
  1135. .topic-body .post-info.edits .heatmap-high .fa-pencil {
  1136.    color: var(--fa-reply-color) !important;
  1137. }
  1138.  
  1139. .embedded-posts .collapse-down,
  1140. .embedded-posts .collapse-up {
  1141.     border: none;
  1142. }
  1143.  
  1144. .user-tag input {
  1145.     color: var(--main-text);
  1146. }
  1147.  
  1148.  
  1149. /* Post Content
  1150. /*____________________*/
  1151.  
  1152. .topic-post .topic-body .contents {
  1153.     margin-top: calc(15px + var(--wide-posts) * 25px);
  1154.     width: calc(100% + var(--wide-posts) * (45px + var(--padding-post)));
  1155.     left: calc(0px + var(--wide-posts) * (-45px - var(--padding-post)));
  1156. }
  1157.  
  1158. blockquote,
  1159. .quote .title {
  1160.     color: var(--main-text) !important;
  1161.     border-left-color: var(--main-text) !important;
  1162.     background-color: var(--highlight-background) !important;
  1163. }
  1164.  
  1165. .quote .quote .quote {
  1166.     background-color: inherit;
  1167. }
  1168.  
  1169. .topic-post .badge-notification.clicks {
  1170.     color: var(--main-dark) !important;
  1171.     background-color: var(--main-text) !important;
  1172. }
  1173.  
  1174. .spoiled {
  1175.     padding: 0 2px;
  1176.     text-shadow: none !important;
  1177.     background-color: rgba(var(--main-light-trans), var(--third-alpha)) !important;
  1178. }
  1179.  
  1180. .spoiled[style*=" 0px;"],
  1181. .spoiled:hover {
  1182.     color: var(--main-text) !important;
  1183. }
  1184.  
  1185. .spoiled[style*=" 5px;"] image {
  1186.     filter: none !important;
  1187. }
  1188.  
  1189. .spoiled code,
  1190. .spoiled .mention {
  1191.     opacity: 0;
  1192. }
  1193.  
  1194. .spoiled:hover code,
  1195. .spoiled[style*=" 0px;"] code,
  1196. .spoiled[style*=" 0px;"] .mention,
  1197. .spoiled:hover .mention {
  1198.     filter: none !important;
  1199.     opacity: 1;
  1200. }
  1201.  
  1202. .mention {
  1203.     color: var(--main-grey) !important;
  1204.     background-color: var(--main-text) !important;
  1205. }
  1206.  
  1207. .poll {
  1208.     background-color: var(--highlight-background);
  1209. }
  1210.  
  1211. .poll,
  1212. .poll .poll-info,
  1213. .poll .poll-buttons {
  1214.     border-color: rgba(var(--main-light-trans), var(--third-alpha)) !important;
  1215. }
  1216.  
  1217. .poll p,
  1218. .poll span {
  1219.     color: var(--main-text) !important;
  1220. }
  1221.  
  1222. .poll .bar-back div {
  1223.     background-color: var(--main-dark) !important;
  1224. }
  1225.  
  1226. .poll .results .bar-back {
  1227.     background-color: rgba(var(--main-light-trans), var(--second-alpha)) !important;
  1228. }
  1229.  
  1230. .poll .chosen .bar-back div {
  1231.     background-color: var(--fa-checked-box-color) !important;
  1232. }
  1233.  
  1234. code {
  1235.     color: var(--main-text) !important;
  1236.     background-color: var(--highlight-background) !important;
  1237. }
  1238.  
  1239. .post-controls .accepted-text {
  1240.     color: var(--fa-checked-box-color);
  1241. }
  1242.  
  1243. .topic-post .contents a {
  1244.     color: var(--link-color);
  1245.     font-weight: bold;
  1246. }
  1247.  
  1248. .onebox {
  1249.     border: none !important;
  1250.     background-color: var(--highlight-background);
  1251. }
  1252.  
  1253. aside.onebox a[href] {
  1254.     color: var(--main-text) !important;
  1255. }
  1256.  
  1257. .hljs-title,
  1258. .hljs-name,
  1259. .coffeescript .hljs-params,
  1260. .scss .hljs-meta {
  1261.     color: #ff7b9c;
  1262. }
  1263.  
  1264. .hljs-keyword,
  1265. .javascript .hljs-title,
  1266. .nginx .hljs-title,
  1267. .hljs-subst,
  1268. .hljs-request,
  1269. .hljs-status {
  1270.     color: #000;
  1271. }
  1272.  
  1273. .hljs-comment,
  1274. .hljs-doctag {
  1275.     color: #ecec95
  1276. }
  1277.  
  1278. .hljs-number,
  1279. .ruby .hljs-constant {
  1280.     color: #00c7c7;
  1281. }
  1282.  
  1283. .cooked del,
  1284. .d-editor-preview del {
  1285.     background-color: #f58b8b8f;
  1286. }
  1287.  
  1288. blockquote blockquote blockquote blockquote blockquote {
  1289.     border: 1px solid var(--border-color);
  1290.     background-color: transparent !important;
  1291. }
  1292.  
  1293. aside.quote {
  1294.     background-color: transparent !important;
  1295. }
  1296.  
  1297.  
  1298. /* Slider
  1299. /*____________________*/
  1300.  
  1301. .timeline-container {
  1302.     margin-left: calc(100% - 182px - 28px + var(--posts-margin) + 3em);
  1303. }
  1304.  
  1305. @media (min-width: 1146px) {
  1306.     .timeline-container {
  1307.         margin-left: calc(1110px - 182px - 12px + var(--posts-margin) + 3em);
  1308.     }
  1309. }
  1310.  
  1311. .timeline-container .topic-timeline {
  1312.     margin-left: 0;
  1313.     width: calc(152px - var(--posts-margin));
  1314. }
  1315.  
  1316. .timeline-container a,
  1317. .timeline-container div {
  1318.     color: var(--main-text) !important;
  1319. }
  1320.  
  1321. .timeline-scrollarea {
  1322.     border-color: var(--main-text) !important;
  1323. }
  1324.  
  1325. .timeline-handle {
  1326.     background-color: var(--main-text) !important;
  1327. }
  1328.  
  1329. .timeline-container.timeline-docked:not(.timeline-docked-bottom) {
  1330.     transform: translate(0, -14px) !important;
  1331. }
  1332.  
  1333. .timeline-container.timeline-docked .timeline-scrollarea-wrapper {
  1334.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  1335. }
  1336.  
  1337. .timeline-container.timeline-docked-bottom .timeline-scrollarea-wrapper{
  1338.     border-radius: var(--border-radius);
  1339. }
  1340.  
  1341. .timeline-container.timeline-docked-bottom .timeline-footer-controls {
  1342.     opacity: 0;
  1343. }
  1344.  
  1345. .timeline-container .timeline-footer-controls {
  1346.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  1347.     transition: opacity 0.2s !important;
  1348. }
  1349.  
  1350. .timeline-container .timeline-footer-controls,
  1351. .timeline-container .timeline-scrollarea-wrapper {
  1352.     background-color: var(--content-background);
  1353. }
  1354.  
  1355. .timeline-container .timeline-footer-controls {
  1356.     text-align: center;
  1357.     padding: calc(var(--padding-slider) / 2) 0 var(--padding-slider) 0;
  1358.     margin-top: 0px !important;
  1359. }
  1360.  
  1361. .timeline-container .timeline-scrollarea-wrapper {
  1362.     width: var(--slider-width);
  1363. }
  1364.  
  1365. .timeline-container .timeline-footer-controls {
  1366.     width: calc(var(--slider-width) + 15px);
  1367. }
  1368.  
  1369. .timeline-container .timeline-footer-controls > button:first-child {
  1370.     margin-right: calc((var(--slider-width) - 2 * 38px) / 3);
  1371. }
  1372.  
  1373. .timeline-container .timeline-footer-controls div button {
  1374.     margin-right: 0 !important;
  1375. }
  1376.  
  1377. .timeline-container .timeline-scrollarea-wrapper {
  1378.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  1379.     padding: var(--padding-slider) 0 calc(var(--padding-slider) / 2) var(--padding-slider);
  1380. }
  1381.  
  1382. #topic-progress-wrapper {
  1383.     right: 6px !important;
  1384. }
  1385.  
  1386. #topic-progress {
  1387.     background-color: var(--header-background);
  1388.     color: var(--main-text);
  1389.     border: none;
  1390. }
  1391.  
  1392. #topic-progress .bg {
  1393.     border: none;
  1394.     background-color: rgba(var(--main-accent));
  1395. }
  1396.  
  1397. .timeline-fullscreen {
  1398.     background-color: var(--header-background) !important;
  1399.     border: none !important;
  1400. }
  1401.  
  1402. .timeline-fullscreen .topic-category {
  1403.     border-bottom: 1px solid var(--border-color);
  1404.     margin-bottom: 5px;
  1405. }
  1406.  
  1407. .timeline-fullscreen .username {
  1408.     color: var(--main-text) !important;
  1409. }
  1410.  
  1411.  
  1412. .timeline-fullscreen .post-excerpt {
  1413.     color: var(--second-text) !important;
  1414. }
  1415.  
  1416. .timeline-fullscreen .timeline-scrollarea-wrapper {
  1417.     border-left: 1px solid var(--border-color);
  1418.     background-color: transparent;
  1419. }
  1420.  
  1421. .timeline-fullscreen .timeline-footer-controls .btn:hover {
  1422.     background-color: var(--highlight-background) !important;
  1423. }
  1424.  
  1425. .timeline-fullscreen .timeline-footer-controls .btn,
  1426. .timeline-fullscreen .timeline-footer-controls {
  1427.     background-color: transparent !important;
  1428. }
  1429.  
  1430. .posts .select-kit-body {
  1431.     z-index: 0 !important;
  1432.     border: none !important;
  1433.     background-color: rgba(var(--main-trans), 0.9) !important;
  1434. }
  1435.  
  1436. .posts .select-kit-collection {
  1437.     background-color: transparent;
  1438. }
  1439.  
  1440. .posts .select-kit .select-kit-row.is-selected,
  1441. .posts .select-kit .select-kit-row.is-highlighted {
  1442.     background-color: rgba(var(--main-light-trans), var(--main-light-alpha));
  1443. }
  1444.  
  1445. .posts .select-kit .name {
  1446.     color: var(--main-text) !important;
  1447. }
  1448.  
  1449. .posts .select-kit .desc {
  1450.     color: var(--second-text) !important;
  1451. }
  1452.  
  1453. .timeline-container.timeline-docked .timeline-date-wrapper {
  1454.     position: relative;
  1455.     z-index: 10002;
  1456. }
  1457.  
  1458.  
  1459. /* Foot
  1460. /*____________________*/
  1461.  
  1462. .topic-status-info {
  1463.     display: none;
  1464.     border-top: 0;
  1465. }
  1466.  
  1467. .topic-above-footer-buttons-outlet .presence-users {
  1468.     color: var(--main-text);
  1469.     margin-top: var(--posts-margin);
  1470.     padding: var(--padding-post);
  1471.     padding-right: 0;
  1472.     background-color: var(--content-background);
  1473.     justify-content: center;
  1474. }
  1475.  
  1476. #topic-footer-buttons {
  1477.     margin-top: 10px;
  1478.     margin-bottom: 0px;
  1479.     padding-left: var(--padding-post);
  1480.     border-radius: var(--border-radius);
  1481.     background-color: var(--content-background);
  1482. }
  1483.  
  1484. #topic-footer-buttons .reason {
  1485.     color: var(--main-text);
  1486. }
  1487.  
  1488. #suggested-topics {
  1489.     padding-top: 0px;
  1490.     padding-bottom: 0px;
  1491. }
  1492.  
  1493. #suggested-topics .topics {
  1494.     border-radius: var(--border-radius);
  1495.     padding-bottom: 0 !important;
  1496.     background-color: var(--content-background);
  1497. }
  1498.  
  1499. #suggested-topics h3:first-child {
  1500.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  1501.     width: var(--suggested-topics-width);
  1502.     height: var(--suggested-topics-height);
  1503.     justify-content: center;
  1504.     margin-bottom: 0;
  1505.     color: var(--main-text);
  1506.     transform: translate(0, 10px);
  1507.     padding: var(--list-padding) calc(var(--list-padding) - 4px) var(--list-padding) calc(var(--list-padding) - 5px);
  1508.     padding-bottom: 0;
  1509.     background-color: var(--content-background);
  1510. }
  1511.  
  1512. #suggested-topics .topics {
  1513.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  1514.     border-top-left-radius: 0;
  1515. }
  1516.  
  1517. #suggested-topics a,
  1518. #suggested-topics td,
  1519. #suggested-topics th {
  1520.     color: var(--main-text) !important;
  1521. }
  1522.  
  1523. #suggested-topics th {
  1524.     font-weight: bold;
  1525. }
  1526.  
  1527. #suggested-topics .visited .title {
  1528.     color: var(--second-text) !important;
  1529. }
  1530.  
  1531. #suggested-topics tr {
  1532.     border-color: var(--main-dark) !important;
  1533. }
  1534.  
  1535. #suggested-topics .topic-post-badges .new-topic {
  1536.     color: rgba(var(--main-accent)) !important;
  1537. }
  1538.  
  1539. #suggested-topics .suggested-topics-message {
  1540.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  1541.     margin-bottom: var(--posts-margin);
  1542.     padding: var(--padding-post);
  1543.     background-color: var(--content-background);
  1544. }
  1545.  
  1546. #suggested-topics .suggested-topics-message a {
  1547.     color: rgba(var(--main-accent)) !important;
  1548. }
  1549.  
  1550. #suggested-topics .suggested-topics-message .badge-category-bg {
  1551.     line-height: 1 !important;
  1552. }
  1553.  
  1554. #suggested-topics .suggested-topics-message .badge-category {
  1555.     color: var(--main-text) !important;
  1556. }
  1557.  
  1558. .private_message #suggested-topics h3:first-child {
  1559.     width: calc(var(--suggested-topics-width) + 50px);
  1560. }
  1561.  
  1562. .private_message #suggested-topics h3:first-child .fa {
  1563.     margin-right: 0;
  1564.     float: initial;
  1565. }
  1566.  
  1567. .private_message #suggested-topics .suggested-topics-message {
  1568.     height: 0px;
  1569.     padding: 0;
  1570.     opacity: 0;
  1571. }
  1572.  
  1573. .private_message #suggested-topics .topic-list-item:last-child {
  1574.     border-bottom: 0;
  1575. }
  1576.  
  1577.  
  1578. /* Reply Box
  1579. /*____________________*/
  1580.  
  1581. #reply-control .fa-mail-forward {
  1582.     border: none;
  1583. }
  1584.  
  1585. #reply-control .reply-details button {
  1586.     background-color: transparent !important;
  1587. }
  1588.  
  1589. #reply-control {
  1590.     border-top: none;
  1591.     background-color: var(--header-background);
  1592. }
  1593.  
  1594. #reply-control .d-editor-input,
  1595. #reply-control .d-editor-preview,
  1596. #reply-control .d-editor-preview-wrapper,
  1597. #reply-control .d-editor-textarea-wrapper {
  1598.     background-color: transparent;
  1599. }
  1600.  
  1601. #reply-control .submit-panel {
  1602.     border-top: 0px solid;
  1603. }
  1604.  
  1605. s#reply-control .composer-fields {
  1606.     border-bottom: 1px solid;
  1607. }
  1608.  
  1609. #reply-control .d-editor-preview-wrapper {
  1610.     margin-left: 0;
  1611. }
  1612.  
  1613. #reply-control .d-editor-preview {
  1614.     padding: 10px 0 0 15px;
  1615.     border: none;
  1616.     border-left: 1px solid;
  1617. }
  1618.  
  1619. #reply-control .submit-panel,
  1620. #reply-control .composer-fields,
  1621. #reply-control .d-editor-preview,
  1622. #reply-control .d-editor-button-bar {
  1623.     border-color: var(--border-color);
  1624. }
  1625.  
  1626. #reply-control .d-editor-spacer {
  1627.     background-color: var(--border-color);
  1628. }
  1629.  
  1630. #reply-control textarea {
  1631.     color: var(--main-text);
  1632. }
  1633.  
  1634. #reply-control textarea::placeholder {
  1635.     color: var(--second-text);
  1636. }
  1637.  
  1638. #reply-control .popup-tip {
  1639.     background-color: rgba(var(--main-accent));
  1640. }
  1641.  
  1642. #reply-control .d-editor-button-bar .btn {
  1643.     background-color: transparent !important;
  1644. }
  1645.  
  1646. #reply-control .reply-to a {
  1647.     color: var(--main-text);
  1648. }
  1649.  
  1650. #reply-control .submit-panel a {
  1651.     color: var(--second-text);
  1652. }
  1653.  
  1654. #reply-control .submit-panel .btn {
  1655.     background-color: transparent !important;
  1656. }
  1657.  
  1658. #reply-control .fa {
  1659.     color: var(--second-text) !important;
  1660. }
  1661.  
  1662. #reply-control .grippie:before {
  1663.     border-color: var(--main-light-grey);
  1664. }
  1665.  
  1666. #reply-control .presence-users {
  1667.     position: fixed;
  1668.     top: unset;
  1669.     bottom: 10px;
  1670.     right: 50%;
  1671.     transform: translate(50%,0);
  1672.     color: var(--main-text);
  1673.     background-color: transparent;
  1674. }
  1675.  
  1676. #reply-control #draft-status {
  1677.     margin-left: 17px !important;
  1678.     text-align: left;
  1679. }
  1680.  
  1681. .d-editor-textarea-wrapper {
  1682.     border: 0;
  1683. }
  1684.  
  1685. #reply-control .reply-to {
  1686.     padding: 2px;
  1687.     padding-left: 5px;
  1688.     border-radius: 3px;
  1689.     background-color: var(--highlight-background);
  1690. }
  1691.  
  1692. #reply-control .grippie {
  1693.     background-color: transparent;
  1694. }
  1695.  
  1696.  
  1697.  
  1698. /*__________________________________________*/
  1699. /*                  USER PAGE
  1700. /*__________________________________________*/
  1701.  
  1702. /* General
  1703. /*____________________*/
  1704.  
  1705. .user-main .user-table {
  1706.     margin-top: 0 !important;
  1707. }
  1708.  
  1709. .user-main .user-archive {
  1710.     background-color: transparent !important;
  1711. }
  1712.  
  1713. .user-main .user-archive .btn {
  1714.     background-color: var(--header-background) !important;
  1715. }
  1716.  
  1717. .user-main .user-stream {
  1718.     border-top: 1px solid var(--border-color);
  1719. }
  1720.  
  1721. .user-main .user-stream-item {
  1722.     background-color: var(--content-background);
  1723.     border-color: 1px solid var(--border-color);
  1724. }
  1725.  
  1726. .user-table .wrapper > section > ul {
  1727.     border-radius: 0 0 0 var(--border-radius);
  1728.     margin-bottom: 5px;
  1729.     background-color: var(--header-background);
  1730. }
  1731.  
  1732. .user-main .user-stream-item .title a {
  1733.     color: var(--main-text);
  1734. }
  1735.  
  1736. .user-main .user-stream-item .excerpt,
  1737. .user-main .user-stream-item .relative-date {
  1738.     color: var(--second-text) !important;
  1739. }
  1740.  
  1741.  
  1742. /* About
  1743. /*____________________*/
  1744.  
  1745. .user-main .about .details {
  1746.     border: none !important;
  1747.     background-color: var(--header-background) !important;
  1748. }
  1749.  
  1750. .user-main .details .btn {
  1751.     background-color: var(--highlight-background) !important;
  1752. }
  1753.  
  1754. .user-main .details a {
  1755.     color: var(--link-color);
  1756. }
  1757.  
  1758. .user-main .bio {
  1759.     color: var(--second-text);
  1760. }
  1761.  
  1762. .user-main .about .secondary {
  1763.     border: none;
  1764.     border-top: 1px solid var(--border-color);
  1765.     background-color: var(--header-background);
  1766. }
  1767.  
  1768. .user-main .about dt {
  1769.     color: var(--main-text) !important;
  1770. }
  1771.  
  1772. .user-main .about dd {
  1773.     color: var(--main-light-grey) !important;
  1774. }
  1775.  
  1776.  
  1777. /* Nav
  1778. /*____________________*/
  1779.  
  1780. .user-main .main-nav {
  1781.     margin-bottom: 0 !important;
  1782. }
  1783.  
  1784. .user-main .main-nav a {
  1785.     color: var(--main-text);
  1786. }
  1787.  
  1788. .user-main .main-nav li:first-child {
  1789.     width: 91px;
  1790. }
  1791.  
  1792. .user-nav {
  1793.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  1794.     background-color: var(--header-background);
  1795. }
  1796.  
  1797. .user-main .main-nav .active {
  1798.     background-color: rgba(var(--main-accent), var(--main-alpha));
  1799. }
  1800.  
  1801. .user-main .main-nav > li > a:hover {
  1802.     color: var(--main-text);
  1803.     background-color: rgba(var(--main-accent), var(--second-alpha));
  1804. }
  1805.  
  1806.  
  1807. /* FA:s
  1808. /*____________________*/
  1809.  
  1810. .user-main .fa-comment {
  1811.     color: var(--fa-reply-color) !important;
  1812. }
  1813.  
  1814. .user-main .fa-certificate {
  1815.     color: var(--fa-badge-star) !important;  
  1816. }
  1817.  
  1818. .user-main .fa {
  1819.     opacity: 1 !important;
  1820. }
  1821.  
  1822. .user-main .fa-reply {
  1823.     color: var(--fa-reply-color) !important;
  1824. }
  1825.  
  1826. .user-main .fa-heart {
  1827.     color: var(--fa-heart-color) !important;
  1828. }
  1829.  
  1830.  
  1831. /* Activity
  1832. /*____________________*/
  1833.  
  1834. .user-main .activity-nav {
  1835.     border-top: 1px solid var(--border-color);
  1836. }
  1837.  
  1838. .user-main .activity-nav li:first-child a {
  1839.     color: var(--main-text);
  1840. }
  1841.  
  1842. .user-main .activity-nav li a {
  1843.     color: var(--second-text);
  1844. }
  1845.  
  1846. .user-main .activity-nav li li a {
  1847.     color: var(--second-text) !important;
  1848. }
  1849.  
  1850. .user-main .activity-nav .fa-heart {
  1851.     color: var(--fa-heart-color) !important;
  1852. }
  1853.  
  1854. .user-activity-page .topic-list {
  1855.     background-color: var(--content-background);
  1856. }
  1857.  
  1858. .user-activity-page .alert-info {
  1859.     margin: 0 !important;
  1860.     background-color: var(--content-background) !important;
  1861. }
  1862.  
  1863.  
  1864. /* Summary
  1865. /*____________________*/
  1866.  
  1867. .user-main .top-section {
  1868.     background-color: var(--content-background);
  1869.     margin-bottom: var(--list-padding);
  1870.     padding-top: 10px;
  1871. }
  1872.  
  1873. .user-main .stats-title {
  1874.     padding-left: 8px;
  1875.     margin-bottom: 0 !important;
  1876. }
  1877.  
  1878. .user-main .stats-section ul {
  1879.     margin-top: 0;
  1880. }
  1881.  
  1882. .user-main .stats-section .stats-title {
  1883.     padding-left: 14px;
  1884. }
  1885.  
  1886. .user-main .user-stat .label {
  1887.     color: var(--second-text);
  1888. }
  1889.  
  1890. .user-main .number {
  1891.     color: var(--main-text);
  1892. }
  1893.  
  1894. .user-main .stats-section li {
  1895.     margin-bottom: 0;
  1896.     padding-bottom: 0 !important;
  1897. }
  1898.  
  1899. .stats-section li.linked-stat a {
  1900.     padding-bottom: 0;
  1901. }
  1902.  
  1903. .user-main .collapsed-info {
  1904.     margin-bottom: var(--list-padding);
  1905. }
  1906.  
  1907. .user-main .top-section {
  1908.     border-radius: var(--border-radius);
  1909. }
  1910.  
  1911. .user-main .top-section:first-child {
  1912.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  1913. }
  1914.  
  1915. .user-main .top-section .relative-date {
  1916.     color: var(--main-text);
  1917. }
  1918.  
  1919. .user-main .top-section .like-count {
  1920.     color: var(--second-text);
  1921. }
  1922.  
  1923. .user-main .top-section a {
  1924.     color: var(--second-text);
  1925. }
  1926.  
  1927. .user-main .top-section .more {
  1928.     padding-left: 14px;
  1929. }
  1930.  
  1931. .user-main .top-sub-section li {
  1932.     border-radius: 0 var(--border-radius) var(--border-radius) 0;
  1933.     min-height: 45px;
  1934.     border-color: var(--main-text);
  1935.     background-color: rgba(var(--main-trans), var(--third-alpha));
  1936. }
  1937.  
  1938. .user-main .top-section .domain {
  1939.     color: var(--link-color);
  1940.     font-weight: bold;
  1941. }
  1942.  
  1943. .user-main .top-section .username a {
  1944.     color: var(--main-text);
  1945. }
  1946.  
  1947. .user-main .details {
  1948.     background-color: transparent !important;
  1949. }
  1950.  
  1951. .user-main .details .replies .number {
  1952.     color: var(--second-text) !important;
  1953. }
  1954. .user-main .badge-notification.clicks {
  1955.     background-color: var(--main-text) !important;
  1956. }
  1957.  
  1958. .user-main .badge-notification .number {
  1959.     color: var(--main-dark);
  1960. }
  1961.  
  1962. .user-main .summary-category-list table {
  1963.     margin-left: 8px;
  1964. }
  1965.  
  1966. .user-main .badges-section .stats-title {
  1967.     margin-bottom: 10px !important;
  1968. }
  1969.  
  1970.  
  1971. /* Notifications
  1972. /*____________________*/
  1973.  
  1974. .user-notifications-page .user-right .large-notification {
  1975.     background-color: var(--content-background);
  1976. }
  1977.  
  1978. .user-notifications-page .user-right .large-notification.unread {
  1979.     background-color: rgba(var(--main-trans), calc(var(--second-alpha) + 0.2));
  1980. }
  1981.  
  1982. .notification-list .active {
  1983.     color: var(--main-text) !important;
  1984. }
  1985.  
  1986. .user-navigation .nav-stacked a {
  1987.     color: var(--second-text);
  1988. }
  1989.  
  1990. .user-navigation .dismiss-notifications {
  1991.     background-color: var(--header-background) !important;
  1992. }
  1993.  
  1994. .user-main .about {
  1995.     border-radius: var(--border-radius);
  1996.     margin-bottom: var(--list-padding);
  1997. }
  1998.  
  1999. .notifications-nav {
  2000.     border-top: 1px solid var(--border-color);
  2001.     border-right: 1px solid var(--border-color);
  2002. }
  2003.  
  2004. .user-notifications-page .user-right .large-notification > li > a > div {
  2005.     color: var(--second-text);
  2006. }
  2007.  
  2008. .user-notifications-page .user-right .large-notification > li > a > div span {
  2009.     color: var(--main-text);
  2010. }
  2011.  
  2012. .user-notifications-page .relative-date {
  2013.     color: var(--second-text);
  2014. }
  2015.  
  2016. .user-stream .item {
  2017.     border-color: var(--border-color);
  2018. }
  2019.  
  2020. .user-stream .fa-at {
  2021.     color: var(--fa-mention-color) !important;
  2022. }
  2023.  
  2024.  
  2025. /* Badges
  2026. /*____________________*/
  2027.  
  2028. .top-section.badges-section {
  2029.     padding-left: 8px;
  2030.     padding-right: 8px;
  2031. }
  2032.  
  2033. .badge-card {
  2034.     border-radius: var(--border-radius);
  2035. }
  2036.  
  2037. .badge-card.medium {
  2038.     border: none;
  2039.     flex: 0 calc(32% + 2px);
  2040.     background-color: var(--content-background);
  2041. }
  2042.  
  2043. .badge-card .badge-info-item > h3 {
  2044.     color: var(--main-text);
  2045. }
  2046.  
  2047. .badge-card .badge-info-item a {
  2048.     color: var(--link-color);
  2049.     font-weight: bold;
  2050. }
  2051.  
  2052. .badge-card .badge-info-item .badge-summary {
  2053.     color: var(--second-text);
  2054. }
  2055.  
  2056. .user-badges-list {
  2057.     background-color: var(--content-background);
  2058. }
  2059.  
  2060. .badge-card .grant-count {
  2061.     color: var(--second-text);
  2062. }
  2063.  
  2064.  
  2065. /* Preferences
  2066. /*____________________*/
  2067.  
  2068. .user-right.user-preferences {
  2069.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  2070.     background-color: var(--content-background);
  2071. }
  2072.  
  2073. .nav-account a {
  2074.     color: var(--main-text) !important;
  2075. }
  2076.  
  2077. .nav-stacked a.active {
  2078.     color: var(--main-text) !important;
  2079. }
  2080.  
  2081. .show-badge {
  2082.     background-color: var(--content-background);
  2083.     padding: var(--list-padding);
  2084. }
  2085.  
  2086. .show-badge h1 a {
  2087.     color: var(--main-text);
  2088. }
  2089.  
  2090. .badge-card.large {
  2091.     background-color: var(--content-background);
  2092.     border: none;
  2093. }
  2094.  
  2095. .check-display.status-checked {
  2096.     background-color: var(--fa-checked-box-color);
  2097. }
  2098.  
  2099. .check-display.status-checked i {
  2100.     color: var(--main-dark) !important;
  2101. }
  2102.  
  2103. .show-badge .name-line a {
  2104.     color: var(--main-text) !important;
  2105. }
  2106.  
  2107. .user-info.medium.badge-info .granted-on {
  2108.     color: var(--second-text);
  2109. }
  2110.  
  2111. .badges-granted .user-info {
  2112.     background-color: var(--content-background);
  2113.     border-left: 2px solid var(--main-text);
  2114.     padding-top: var(--padding-post);
  2115.     padding-left: var(--padding-post);
  2116.     margin: 0 1% 1em 0;
  2117.     flex: 0 0 31%;
  2118. }
  2119.  
  2120. .user-preferences span {
  2121.     color: var(--main-text) !important;
  2122. }
  2123.  
  2124. .user-preferences .instructions {
  2125.     color: var(--second-text);
  2126. }
  2127.  
  2128. #discourse-modal .title h3 {
  2129.     color: var(--main-dark);
  2130. }
  2131.  
  2132. #discourse-modal .btn {
  2133.     background-color: var(--header-background) !important;
  2134.     color: var(--main-text);
  2135. }
  2136.  
  2137. .d-modal-cancel {
  2138.     color: var(--main-dark);
  2139. }
  2140.  
  2141. #discourse-modal .close .fa {
  2142.     color: var(--main-dark) !important;
  2143. }
  2144.  
  2145. .user-preferences .select-kit-header {
  2146.     border: none !important;
  2147.     background-color: var(--header-background) !important;
  2148. }
  2149.  
  2150. .user-preferences .select-kit .select-kit-body {
  2151.     background-color: transparent;
  2152. }
  2153.  
  2154. .user-preferences .select-kit .select-kit-collection {
  2155.     background-color: var(--header-background);
  2156. }
  2157.  
  2158. .user-preferences .select-kit .select-kit-row.is-highlighted {
  2159.     background-color: var(--highlight-background);
  2160. }
  2161.  
  2162. .user-preferences {
  2163.     background-color: var(--content-background);
  2164. }
  2165.  
  2166. .user-preferences .category-controls .select-kit-header {
  2167.     background-color: #fff !important;
  2168. }
  2169.  
  2170. .user-preferences span.category-name {
  2171.     color: var(--main-dark) !important;
  2172. }
  2173.  
  2174. .user-preferences .category-notifications .controls a {
  2175.     color: var(--link-text);
  2176.     font-weight: bold;
  2177. }
  2178.  
  2179.  
  2180.  
  2181. /*__________________________________________*/
  2182. /*                  SEARCH
  2183. /*__________________________________________*/
  2184.  
  2185. /* General
  2186. /*____________________*/
  2187.  
  2188. .search-page .select-kit .select-kit-body {
  2189.     background-color: transparent;
  2190. }
  2191.  
  2192. .search-page .select-kit .select-kit-collection {
  2193.     background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
  2194. }
  2195.  
  2196. .search-page .select-kit .select-kit-row.is-selected,
  2197. .search-page .select-kit .select-kit-row.is-highlighted {
  2198.     background-color: var(--highlight-background);
  2199. }
  2200.  
  2201.  
  2202. /* Left
  2203. /*____________________*/
  2204.  
  2205. .search-page .search-advanced {
  2206.     border-radius: var(--border-radius);
  2207.     background-color: var(--content-background);
  2208.     padding: var(--list-padding);
  2209. }
  2210.  
  2211. .search-page .search-notice > div {
  2212.     background-color: rgba(var(--main-accent), var(--main-alpha)) !important;
  2213.     color: var(--main-text) !important;
  2214.     border: none !important;
  2215. }
  2216.  
  2217. .search-page .search-advanced .select-kit-header {
  2218.     border: none !important;
  2219.     background-color: var(--header-background) !important;
  2220. }
  2221.  
  2222. .search-page .no-results-suggestion a {
  2223.     color: var(--link-color);
  2224.     font-weight: bold;
  2225. }
  2226.  
  2227. .search-page .search-advanced .search-info {
  2228.     border-color: var(--border-color);
  2229. }
  2230.  
  2231. .search-page .menu-panel {
  2232.     background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
  2233. }
  2234.  
  2235. .search-page .search-results .search-highlight {
  2236.     color: rgba(var(--main-accent));
  2237. }
  2238.  
  2239. .search-page .search-results .search-link .topic-title {
  2240.     color: var(--main-text);
  2241. }
  2242.  
  2243. .search-page .search-results .search-link:visited .topic-title {
  2244.     color: var(--second-text);
  2245. }
  2246.  
  2247. .search-page .search-results .relative-date {
  2248.     color: var(--main-text);
  2249. }
  2250.  
  2251. .search-page .search-results .blurb {
  2252.     color: var(--second-text);
  2253. }
  2254.  
  2255.  
  2256. /* Right
  2257. /*____________________*/
  2258.  
  2259. .search-page .search-advanced-sidebar .search-advanced-title,
  2260. .search-page .search-advanced-sidebar .search-advanced-filters {
  2261.     background-color: var(--header-background);
  2262. }
  2263.  
  2264. .search-page .search-advanced-sidebar .search-advanced-title {
  2265.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  2266. }
  2267.  
  2268. .search-page .search-advanced-sidebar .search-advanced-filters {
  2269.     border-radius: 0 0 var(--border-radius) var(--border-radius)
  2270. }
  2271.  
  2272. .search-page .search-advanced-sidebar .selected-name {
  2273.     color: var(--main-dark);
  2274. }
  2275.  
  2276. .search-page .category-controls .select-kit-header {
  2277.     background-color: #fff !important;
  2278. }
  2279.  
  2280. .search-page .pika-single {
  2281.     border: none;
  2282.     background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
  2283. }
  2284.  
  2285. .search-page .pika-label {
  2286.     background-color: transparent;
  2287.     color: var(--main-text);
  2288. }
  2289.  
  2290. .search-page tbody,
  2291. .search-page .pika-table tr {
  2292.     border-color: var(--border-color);
  2293. }
  2294.  
  2295. .search-page .pika-table th {
  2296.     color: var(--main-text);
  2297. }
  2298.  
  2299. .search-page .pika-button {
  2300.     color: var(--second-text);
  2301.     background-color: transparent;
  2302.     text-align: center;
  2303. }
  2304.  
  2305. .search-page .pika-table .is-selected .pika-button {
  2306.     color: var(--main-text);
  2307.     box-shadow: none !important;
  2308.     background-color: var(--highlight-background);
  2309. }
  2310.  
  2311. .search-page .pika-next:hover,
  2312. .search-page .pika-next {
  2313.     background: url(https://i.imgur.com/scWW4yN.png) !important;
  2314. }
  2315.  
  2316. .search-page .pika-prev:hover,
  2317. .search-page .pika-prev {
  2318.     background: url(https://i.imgur.com/gwvQaN9.png) !important;
  2319. }
  2320.  
  2321.  
  2322. /* Header search
  2323. /*____________________*/
  2324.  
  2325. .search-menu li:not(.category):not(.heading):hover a:not(.badge-notification) {
  2326.     background-color: var(--highlight-background);
  2327. }
  2328.  
  2329. .search-menu .relative-date {
  2330.     color: var(--main-text);
  2331. }
  2332.  
  2333. .search-menu .search-highlight {
  2334.     color: rgba(var(--main-accent)) !important;
  2335. }
  2336.  
  2337. .search-menu .blurb {
  2338.     color: var(--second-text);
  2339. }
  2340.  
  2341. .search-menu .user-results {
  2342.     color: var(--main-text) !important;
  2343. }
  2344.  
  2345.  
  2346.  
  2347. /*__________________________________________*/
  2348. /*                OTHER PAGES
  2349. /*__________________________________________*/
  2350.  
  2351. /* Page not found
  2352. /*____________________*/
  2353.  
  2354. .not-found-container {
  2355.     background-color: var(--header-background)
  2356. }
  2357.  
  2358. .not-found-container a {
  2359.     color: var(--main-text);
  2360. }
  2361.  
  2362.  
  2363. /* User card
  2364. /*____________________*/
  2365.  
  2366. #user-card .card-content {
  2367.     background-color: var(--header-background);
  2368.     color: var(--second-text);
  2369. }
  2370.  
  2371. #user-card .username a,
  2372. #user-card .location-and-website span,
  2373. #user-card .location-and-website a,
  2374. #user-card .desc {
  2375.     color: var(--main-text) !important;
  2376. }
  2377.  
  2378. #user-card .date,
  2379. #user-card h3 {
  2380.     color: var(--second-text);
  2381. }
  2382.  
  2383. #user-card button,
  2384. #user-card .user-badge,
  2385. #user-card .btn {
  2386.     border: none !important;
  2387.     color: var(--main-text) !important;
  2388.     background-color: var(--highlight-background) !important;
  2389. }
  2390.  
  2391.  
  2392. /* Badges
  2393. /*____________________*/
  2394.  
  2395. .badges-page .badges {
  2396.     padding: var(--list-padding);
  2397.     background-color: var(--content-background);
  2398. }
  2399.  
  2400. .badges-page .badges > h1 {
  2401.     text-align: center;
  2402.     font-size: 2em;
  2403. }
  2404.  
  2405. .badges-page .badge-grouping .title {
  2406.     color: var(--main-text);
  2407.     text-align: center;
  2408.     font-size: 1.5em;
  2409. }
  2410.  
  2411.  
  2412. /* Edit history
  2413. /*____________________*/
  2414.  
  2415. .modal {
  2416.     color: #222;
  2417. }
  2418.  
  2419. .modal #revision-details .fa-pencil {
  2420.     color: #222 !important;
  2421. }
  2422.  
  2423.  
  2424. /* About, FAQ, TOS, Privacy
  2425. /*_________________________*/
  2426.  
  2427. .static-privacy .nav-pills,
  2428. .static-tos .nav-pills,
  2429. .static-faq .nav-pills,
  2430. .about-page .nav-pills {
  2431.     border-radius: var(--border-radius) var(--border-radius) 0 0;
  2432.     background-color: var(--header-background);
  2433.     padding: var(--list-padding);
  2434.     padding-bottom: 0;
  2435.     margin: 0;
  2436. }
  2437.  
  2438. .static-privacy .nav-pills a.active,
  2439. .static-tos .nav-pills a.active,
  2440. .static-faq .nav-pills a.active,
  2441. .about-page .nav-pills a.active {
  2442.     background-color: rgba(var(--main-accent), var(--main-alpha));
  2443. }
  2444.  
  2445. .static-privacy .nav-pills a,
  2446. .static-privacy .nav-pills a:hover,
  2447. .static-tos .nav-pills a,
  2448. .static-tos .nav-pills a:hover,
  2449. .static-faq .nav-pills a,
  2450. .static-faq .nav-pills a:hover,
  2451. .about-page .nav-pills a,
  2452. .about-page .nav-pills a:hover {
  2453.     border-radius: var(--border-radius);
  2454.     color: var(--main-text);
  2455. }
  2456.  
  2457. .static-privacy .nav-pills a:hover,
  2458. .static-tos .nav-pills a:hover,
  2459. .static-faq .nav-pills a:hover,
  2460. .about-page .nav-pills a:hover {
  2461.     background-color: var(--highlight-background);
  2462. }
  2463.  
  2464. .about-page .about {
  2465.     border-radius: var(--border-radius);
  2466.     padding: var(--list-padding);
  2467.     margin: var(--posts-margin) 0;
  2468.     max-width: 100% !important;
  2469.     background-color: var(--content-background);
  2470. }
  2471.  
  2472. .about-page .about:nth-child(2) {
  2473.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  2474.     margin-top: 0;
  2475. }
  2476.  
  2477. .about-page .username a {
  2478.     color: var(--main-text) !important;
  2479. }
  2480.  
  2481. .about-page .title {
  2482.     color: var(--second-text) !important;
  2483. }
  2484.  
  2485. .static-privacy .body-page,
  2486. .static-tos .body-page,
  2487. .static-faq .body-page {
  2488.     max-width: unset;
  2489. }
  2490.  
  2491. .static-privacy div[itemprop="mainContentOfPage"],
  2492. .static-tos div[itemprop="mainContentOfPage"],
  2493. .static-faq div[itemprop="mainContentOfPage"] {
  2494.     padding: var(--list-padding);
  2495.     background-color: var(--content-background);
  2496.     color: var(--main-text);
  2497.     border-radius: 0 0 var(--border-radius) var(--border-radius);
  2498. }
  2499.  
  2500. .static-faq h2 > a {
  2501.     color: var(--main-text);
  2502. }
  2503.  
  2504.  
  2505.  
  2506. /*__________________________________________*/
  2507. /*                CHANGE LOG
  2508. /*__________________________________________*/
  2509.  
  2510. /* Version 1.0.0 - 1.2.22
  2511. /*____________________
  2512.  
  2513. This was the original theme which I made in the summer of 2017. I was new to CSS and it was, quite frankly an amateurish mess. You can find it on its forum post or on its userstyles.org page.
  2514.  
  2515. Forum post: https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973?u=kumirei
  2516. Theme link: https://userstyles.org/styles/142733/wanikani-forums-transparent-theme
  2517.  
  2518. */
  2519.  
  2520.  
  2521. /* Version 2.0.0
  2522. /*____________________
  2523.  
  2524. This is the start of the new version of the theme. All changes to the theme will be added below this line.
  2525.  
  2526. */
  2527.  
  2528.  
  2529. /* Version 2.0.1
  2530. /*____________________
  2531.  
  2532. Missed a few reply things at release
  2533. */
  2534.  
  2535. #reply-control .reply-to {
  2536.     color: var(--main-text) !important;
  2537. }
  2538.  
  2539. .reply-area .select-kit-header {
  2540.     border: none !important;
  2541.     background-color: var(--header-background) !important;
  2542. }
  2543.  
  2544. .reply-area .select-kit .select-kit-body {
  2545.     background-color: transparent;
  2546. }
  2547.  
  2548. .reply-area .select-kit .select-kit-collection {
  2549.     background-color: var(--header-background);
  2550. }
  2551.  
  2552. .reply-area .select-kit .select-kit-row.is-highlighted {
  2553.     background-color: var(--highlight-background);
  2554. }
  2555.  
  2556. .composer-popup-container {
  2557.     display: none;
  2558. }
  2559.  
  2560. #reply-control.draft {
  2561.     background-color: var(--header-background);
  2562. }
  2563.  
  2564.  
  2565. /* Version 2.0.2
  2566. /*____________________
  2567.  
  2568. Fixed: group mentions, modal buttons, active buttons, reply cancel hover, share box, bookmarks, cakeday page.*/
  2569.  
  2570. .spoiled .mention-group {
  2571.     opacity: 0;
  2572. }
  2573.  
  2574. .spoiled[style*=" 0px;"] .mention-group,
  2575. .spoiled:hover .mention-group {
  2576.     filter: none !important;
  2577.     opacity: 1;
  2578. }
  2579.  
  2580. .mention-group {
  2581.     color: var(--main-grey) !important;
  2582.     background-color: var(--main-text) !important;
  2583. }
  2584.  
  2585. .modal .btn {
  2586.     background-color: var(--main-dark) !important;
  2587. }
  2588.  
  2589. .btn-primary:active,
  2590. .btn-primary.btn-active,
  2591. .btn-danger:active {
  2592.     background-color: rgba(var(--main-trans), var(--third-alpha)) !important;
  2593.     background-image: none;
  2594. }
  2595.  
  2596. #reply-control .save-or-cancel .cancel {
  2597.     color: var(--main-grey);
  2598. }
  2599.  
  2600. #reply-control .save-or-cancel .cancel:hover {
  2601.     color: rgba(var(--main-accent));
  2602.     opacity: 0.9;
  2603. }
  2604.  
  2605. #share-link {
  2606.     background-color: var(--header-background);
  2607. }
  2608.  
  2609. #share-link .reply-as-new-topic a {
  2610.     color: var(--link-color);
  2611. }
  2612.  
  2613. .posts .select-kit-body {
  2614.     background-color: var(--header-background) !important;
  2615. }
  2616.  
  2617. .bookmarked .fa-bookmark {
  2618.     color: rgba(var(--main-accent)) !important;
  2619. }
  2620.  
  2621. .cakeday > .nav-pills,
  2622. .cakeday > div > .nav-pills {
  2623.     background-color: var(--header-background);
  2624.     margin-bottom: 0;
  2625.     padding: var(--list-padding);
  2626. }
  2627.  
  2628. .cakeday .nav-pills > li a {
  2629.     color: var(--main-text);
  2630. }
  2631.  
  2632. .cakeday .nav-pills > li > a:hover {
  2633.     background-color: rgba(var(--main-accent), var(--second-alpha));
  2634. }
  2635.  
  2636. .cakeday .nav-pills > li > a.active {
  2637.     background-color: rgba(var(--main-accent), var(--main-alpha));
  2638. }
  2639.  
  2640. .cakeday.container > div > h2,
  2641. .cakeday.container > div .cakeday-months {
  2642.     margin-top: var(--list-padding);
  2643.     padding: var(--list-padding);
  2644.     margin-bottom: 0;
  2645. }
  2646.  
  2647. .cakeday > div > h2,
  2648. .cakeday .user-info-list,
  2649. .cakeday > div > div > .cakeday-months {
  2650.     background-color: var(--content-background);
  2651. }
  2652.  
  2653. .cakeday .user-info-list {
  2654.     padding: var(--list-padding);
  2655. }
  2656.  
  2657. .cakeday .user-info.small {
  2658.     background-color: var(--content-background);
  2659.     border-left: 2px solid var(--main-text);
  2660.     margin-right: var(--list-padding);
  2661.     padding-top: var(--padding-post);
  2662.     padding-left: var(--padding-post);
  2663. }
  2664.  
  2665. .cakeday .user-detail .name-line span * {
  2666.     color: var(--main-text);
  2667. }
  2668.  
  2669. .cakeday .user-info .user-detail .title {
  2670.     color: var(--second-text);
  2671. }
  2672.  
  2673. .cakeday .user-detail .details div {
  2674.     color: var(--second-text);
  2675. }
  2676.  
  2677. .cakeday .select-kit-header {
  2678.     border: none !important;
  2679.     background-color: var(--header-background) !important;
  2680. }
  2681.  
  2682. .cakeday .select-kit .select-kit-body {
  2683.     background-color: transparent;
  2684. }
  2685.  
  2686. .cakeday .select-kit .select-kit-collection {
  2687.     background-color: var(--header-background);
  2688. }
  2689.  
  2690. .cakeday .select-kit .select-kit-row.is-highlighted {
  2691.     background-color: var(--highlight-background);
  2692. }
  2693.  
  2694. .cakeday .select-kit .select-kit-row.is-selected {
  2695.     background-color: var(--highlight-background);
  2696. }
  2697.  
  2698. .cakeday .select-kit {
  2699.     vertical-align: top;
  2700.     margin-left: 10px;
  2701. }
  2702.  
  2703. .cakeday .cakeday-months .cakeday-header {
  2704.     margin-bottom: var(--list-padding);
  2705. }
  2706.  
  2707.  
  2708. /* Version 2.1.0
  2709. /*____________________
  2710.  
  2711. Added: way to change default image for users that don't have one */
  2712.  
  2713. img[width="45"][src="https://discourse-cdn-sjc1.com/business5/uploads/wanikani_community/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"].avatar {
  2714.     background-image: var(--default-avatar);
  2715.     padding-left: 45px;
  2716.     box-sizing: border-box;
  2717.     background-size: 45px;
  2718. }
  2719.  
  2720.  
  2721. /* Version 2.1.1
  2722. /*____________________
  2723.  
  2724. Fixed: default avatar image sizing */
  2725.  
  2726. img[width="45"][src="https://discourse-cdn-sjc1.com/business5/uploads/wanikani_community/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"].avatar {
  2727.     background-size: cover;
  2728. }
  2729.  
  2730.  
  2731. /* Version 2.1.2
  2732. /*____________________
  2733.  
  2734. Fixed: Header, symbols, slider, badges */
  2735.  
  2736. #site-logo.logo-big {
  2737.     width: 398px;
  2738.     overflow: hidden;
  2739. }
  2740.  
  2741. .d-header .menu-panel .notifications .fa.d-icon-heart {
  2742.     color: var(--fa-heart-color) !important;
  2743. }
  2744.  
  2745. .d-header .menu-panel .notifications .fa.d-icon-reply {
  2746.     color: var(--fa-reply-color) !important;
  2747. }
  2748.  
  2749. .d-header .menu-panel .notifications .fa.d-icon-quote-right {
  2750.     color: var(--fa-quote-color) !important;
  2751. }
  2752.  
  2753. .d-header .menu-panel .notifications .fa.d-icon-pencil {
  2754.     color: var(--fa-edit-color) !important;
  2755. }
  2756.  
  2757. .d-header .menu-panel .notifications .fa.d-icon-envelope-o {
  2758.     color: var(--fa-pm-color) !important;
  2759. }
  2760.  
  2761. .d-header .menu-panel .notifications .fa.d-icon-at {
  2762.     color: var(--fa-mention-color) !important;
  2763. }
  2764.  
  2765. .d-header .menu-panel .notifications .fa.d-icon-certificate {
  2766.     color: var(--fa-badge-star) !important;
  2767. }
  2768.  
  2769. .topic-body .post-info.edits .heatmap-high .fa.d-icon-pencil {
  2770.    color: var(--fa-reply-color) !important;
  2771. }
  2772.  
  2773. .user-main .fa.d-icon-comment {
  2774.     color: var(--fa-reply-color) !important;
  2775. }
  2776.  
  2777. .user-main .fa.d-icon-certificate {
  2778.     color: var(--fa-badge-star) !important;  
  2779. }
  2780.  
  2781. .user-main .fa.d-icon-reply {
  2782.     color: var(--fa-reply-color) !important;
  2783. }
  2784.  
  2785. .user-main .fa.d-icon-heart {
  2786.     color: var(--fa-heart-color) !important;
  2787. }
  2788.  
  2789. .user-stream .fa.d-icon-at {
  2790.     color: var(--fa-mention-color) !important;
  2791. }
  2792.  
  2793. .fa.d-icon-check-square,
  2794. .topic-status .fa.d-icon-check-square-o {
  2795.     color: var(--fa-checked-box-color) !important;
  2796. }
  2797.  
  2798. .post-controls .has-like .fa.d-icon-d-liked {
  2799.     color: var(--fa-heart-color) !important;
  2800. }
  2801.  
  2802. .user-main .activity-nav .fa.d-icon-heart {
  2803.     color: var(--fa-heart-color) !important;
  2804. }
  2805.  
  2806. .topic-post .read-state .fa.d-icon-circle {
  2807.     color: rgba(var(--main-accent)) !important
  2808. }
  2809.  
  2810. .fa.d-icon-d-watching,
  2811. .fa.d-icon-d-tracking,
  2812. .fa.d-icon-d-tracking {
  2813.     color: rgba(var(--main-accent)) !important;
  2814. }
  2815.  
  2816. .timeline-footer-controls .fa.d-icon-reply {
  2817.     color: var(--fa-reply-color) !important;
  2818. }
  2819.  
  2820. .timeline-container .timeline-footer-controls > button:first-child {
  2821.     margin: 0 calc((var(--slider-width) - 2 * 38px + 15px) / 3);
  2822. }
  2823.  
  2824. #topic .my-likes svg {
  2825.     display: none !important;
  2826. }
  2827.  
  2828. .lightbox-wrapper .lightbox {
  2829.     background-color: transparent;
  2830. }
  2831.  
  2832. .onebox {
  2833.     background-color: transparent !important;
  2834. }
  2835.  
  2836. .user-info.medium.badge-info .post-link {
  2837.     color: var(--main-text);
  2838. }
  2839.  
  2840.  
  2841. /* Version 2.1.3
  2842. /*____________________
  2843.  
  2844. Fixed: Filled empty hearts */
  2845.  
  2846. .like-button .like {
  2847.     width: 36.08px;
  2848.     transform: translate(0, -2px);
  2849. }
  2850.  
  2851. .like-button:hover .like svg.d-icon-d-unliked,
  2852. .like-button .like svg.d-icon-d-unliked,
  2853. .like-button .like.d-hover svg.d-icon-d-unliked {
  2854.     background: var(--main-text);
  2855.     transform: rotate(-45deg) !important;
  2856.     width: 9px;
  2857.     height: 9px;
  2858. }
  2859.  
  2860. .like-button .like:before,
  2861. .like-button .like:after {
  2862.     content: "";
  2863.     background-color: var(--main-text);
  2864.     border-radius: 50%;
  2865.     position: absolute;
  2866.     transform: translate(-5px, 2.5px);
  2867.     width: 9px;
  2868.     height: 9px;
  2869.    
  2870. }
  2871.  
  2872. .like-button .like:before {
  2873.     transform: translate(-4px, 2.5px);
  2874. }
  2875.  
  2876.  
  2877. /* Version 2.1.4
  2878. /*____________________
  2879.  
  2880. Fixed: Fixed category names being cut short for no reason... */
  2881.  
  2882. .suggested-topics .badge-wrapper.bullet span.badge-category, .suggested-topics .badge-wrapper.bar span.badge-category {
  2883.     max-width: unset;
  2884. }
  2885.  
  2886. .badge-wrapper .badge-category .category-name {
  2887.     overflow: visible;
  2888. }
  2889.  
  2890. /* Version 2.1.5
  2891. /*_____________________
  2892.  
  2893. Fixed: Code block backgrounds */
  2894.  
  2895. code {
  2896.     color: #333 !important;
  2897.     background: #f8f8f8 !important;
  2898. }
  2899.  
  2900. /* Version 2.1.6
  2901. /*_____________________
  2902.  
  2903. Fixed: Mark post as solution button, hovering like button, long time since user has been seen message,
  2904.        border on embedded replies, user summary page,  table headers, badge names, notifications page*/
  2905.  
  2906. button.unaccepted span {
  2907.     display: none;
  2908. }
  2909.  
  2910. button.unaccepted svg {
  2911.     margin-right: 0 !important;
  2912. }
  2913.  
  2914. nav.post-controls .double-button:hover button {
  2915.     background: none;
  2916. }
  2917.  
  2918. .topic-post .post-notice {
  2919.     transform: translateX(calc(-50% - var(--padding-post) / 2));
  2920.     border: 0;
  2921.     left: 50%;
  2922.     position: relative;
  2923.     width: calc(100% - var(--padding-post) - 5px);
  2924.     max-width: calc(100% - var(--padding-post));
  2925.     background: var(--content-background);
  2926. }
  2927.  
  2928. .embedded-posts.top .row .topic-avatar,
  2929. .embedded-posts.top .row .topic-body {
  2930.     border: 0;
  2931. }
  2932.  
  2933. .user-content {
  2934.     background-color: transparent;
  2935. }
  2936.  
  2937. .user-content .top-section.stats-section > ul {
  2938.     padding-left: 14px;
  2939. }
  2940.  
  2941. table thead th {
  2942.     color: rgb(240, 240, 240) !important;
  2943. }
  2944.  
  2945. .badge-card .badge-info-item a {
  2946.     color: rgb(240, 240, 240) !important;
  2947. }
  2948.  
  2949. .about .primary {
  2950.     padding-left: 14px;
  2951.     padding-top: 14px;
  2952. }
  2953.  
  2954. .user-notifications-page .notifications-nav {
  2955.     background-color: var(--header-background);
  2956.     border: 0;
  2957. }
  2958.  
  2959. .user-stream .notification.unread {
  2960.     background-color: var(--content-background);
  2961. }
  2962.  
  2963. .user-stream .notification a {
  2964.     color: var(--main-text);
  2965. }
  2966.  
  2967. .large-notification a span:first-child {
  2968.     color: var(--link-color);
  2969. }
  2970.  
  2971. .user-stream .item,
  2972. .user-stream .user-stream-item {
  2973.     background-color: transparent;
  2974. }
  2975.  
  2976. .notification-history.user-stream {
  2977.     background-color: var(--content-background);
  2978.     border: 0;
  2979. }
  2980.  
  2981. .user-stream .item {
  2982.     border: 0;
  2983. }
  2984.  
  2985.  
  2986. /* Version 2.1.7
  2987. /*_____________________
  2988.  
  2989. Fixed: Fixed notifications tray*/
  2990.  
  2991. .user-menu .quick-access-panel li {
  2992.     background-color: var(--highlight-background);
  2993. }
  2994.  
  2995. .user-menu .quick-access-panel li:hover {
  2996.     background-color: var(--highlight-background);
  2997. }
  2998.  
  2999. .user-menu .quick-access-panel .read {
  3000.     background: transparent;
  3001. }
  3002.  
  3003. .user-menu .quick-access-panel .show-all a {
  3004.     background: transparent;
  3005. }
  3006.  
  3007.  
  3008. .user-menu .quick-access-panel .d-icon-heart {
  3009.     color: var(--fa-heart-color) !important;
  3010. }
  3011.  
  3012. .user-menu .quick-access-panel .d-icon-reply {
  3013.     color: var(--fa-reply-color) !important;
  3014. }
  3015.  
  3016. .user-menu .quick-access-panel .d-icon-quote-right {
  3017.     color: var(--fa-quote-color) !important;
  3018. }
  3019.  
  3020. .user-menu .quick-access-panel .d-icon-pencil {
  3021.     color: var(--fa-edit-color) !important;
  3022. }
  3023.  
  3024. .user-menu .quick-access-panel .d-icon-envelope-o {
  3025.     color: var(--fa-pm-color) !important;
  3026. }
  3027.  
  3028. .user-menu .quick-access-panel .d-icon-at {
  3029.     color: var(--fa-mention-color) !important;
  3030. }
  3031.  
  3032. .user-menu .quick-access-panel li span:first-child {
  3033.     color: var(--main-text);
  3034. }
  3035.  
  3036. div.menu-links-header .menu-links-row li a.active {
  3037.     border: none !important;
  3038. }
  3039.  
  3040. div.menu-links-header .menu-links-row li a.active:after {
  3041.     display: none;
  3042. }
  3043.  
  3044. div.menu-links-header a.user-activity-link span.d-label {
  3045.     display: inline-block;
  3046.     vertical-align: bottom;
  3047. }
  3048.  
  3049. .user-menu .quick-access-panel .d-icon-certificate {
  3050.     color: var(--fa-badge-star) !important;  
  3051. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!