[Userstyle] Forum Transparency 2.0

WaniKani API And Third-Party Apps
1

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

Forum Transparency 2.0

What is it?

It’s the second version of my transparent theme for the forums. The old one wasn’t very well written since I was new to CSS, but it worked and people seemed to like it. At the time of writing it has 550 users. However, I always felt like it wasn’t good enough and soon started working on the second version. This is it.

Old vs new

chrome_2018-08-14_01-22-51

chrome_2018-08-14_01-22-38
chrome_2018-08-14_01-22-381426×700 644 KB

Screenshots

Categories

chrome_2018-08-14_01-25-59

Reading threads

chrome_2018-08-14_01-26-12

User summary

chrome_2018-08-14_01-26-24
chrome_2018-08-14_01-26-241426×700 679 KB

Replying

chrome_2018-08-14_01-27-11
chrome_2018-08-14_01-27-111426×700 618 KB

Notifications

image
image1426×700 722 KB

Different background

image
image1426×700 579 KB

There are settings?!

Yes! So many settings! I wrote the theme with the thought that people might want to change a few things, and as such I added a long list of settings. They are all explained here.

Settings

Image URL: A link to the image you want as your background.

Main text color: The color of most the text you’ll see. Default white.
Secondary text color: A color close to the main, but slightly different. Default very light grey.
Light grey text color: A greyer color used when you need just a bit more contrast.
Dark text color: A dark color for when text is displayed on light backgrounds.
Grey text color: A slightly less dark grey color for when less contrast is needed.
Link color: The color of most links. Default white.

Main transparent color: The base color of most transparent areas, in RGB. Default is 0,0,0 (black).
Light transparent color: The base color of light transparent areas, in RGB. Default is 255,255,255 (white).

Main alpha value: The alpha (transparency) value for the more opaque transparent areas, such as headers and menus.
Second alpha value: The alpha value for the less opaque transparent areas, such as posts in threads.
Third alpha value: Alpha value used for certain highlights.
Light alpha value: The alpha value of light transparent areas.

Heart color: The color of your heart!
Reply color: The color of reply symbols in notifications.
Quote color: The color of quote symbols in notifications.
Mention color: The color of @ symbols in notifications.
Edit color: The color of the pencil symbol in notifications.
PM color: The color of PM symbols in notifications.
Checkbox color: The color of checked boxes, although only where it makes sense.
Badge star color: The color of badge symbols.
Accent color: The accent color used all over the forums! Default is 213,128,255 (lifetime purple).

Posts margin: The space between posts.
Post padding: The padding around the edges of posts.
Slider padding: The padding around the edges of the navigation slider in threads.
Slider width: The width of the slider.
Suggested topics width: The width of the “Suggested Topics” bar at the bottom of threads.
Suggested topics height: The height of the “Suggested Topics” bar at the bottom of threads.
Avatar roundness: How round you want avatars to be. 0% is square, 50% is the normal circle.
List padding: The padding around the edges of lists.
Rounded corners: How rounded you want corners in general. Default is 0 for straight edges.
Glyph size: The size of the icons in the header menu.
Wide posts: Whether you want wide posts or now. Valid values are 1 and 0.
Default avatar: Here you can choose to pick a new image instead of the turtle shell for users without avatars.

Don't quite get what wide posts are? Here's an example.

Normal (not wide) posts

chrome_2018-08-14_02-02-24

Wide posts:

image
image1426×700 745 KB

I really like the wide posts, but normal will remain default.

For those of you who want to edit the theme directly, these are the default values with their respective usage areas.

Open for CSS 
:root {
    /* BACKGROUND IMAGE */
    --background-image-url: url(https://i.imgur.com/JplJ4pL.jpg);
    
    /* TEXT */
    --main-text: #F0F0F0;		                    /* Main text color */
    --second-text: #C8C8C8;			                /* Slightly darker text, used when not much contrast is needed */
    --main-light-grey: #B4B4B4;		                /* Slightly darker than second text */
    --main-dark: #2A2A2A;					        /* Main dark text color */
    --main-grey: #545454;					        /* Main grey color. Used in mentions */
    --link-color: #FFFFFF;						    /* Default color of links */
    
    /* BACKGROUND COLORS */
    --main-trans: 0, 0, 0;							/* Main color of transparent areas */
    --main-light-trans: 255, 255, 255;				/* Color of light transparent areas */
    
    /* BACKGROUND ALPHAS */
    --main-alpha: 0.7; 								/* The darker alpha, for headers and menus and such */
    --second-alpha: 0.5;							/* Alpha value for threads and such */
    --third-alpha: 0.3;					            /* Alpha value of highlighted posts and some other things */
    --main-light-alpha: 0.2;						/* Alpha value of light transparent areas */
    
    /* BACKGROUNDS */
    --header-background: rgba(var(--main-trans), var(--main-alpha));                    /* Background for headers and stuff */
    --content-background: rgba(var(--main-trans), var(--second-alpha));                 /* Background for most content */
    --highlight-background: rgba(var(--main-light-trans), var(--main-light-alpha));     /* Background for highlights */
    
    /* SYMBOL COLORS */
    --fa-heart-color: #D580FF;	                    /* Color of hearts */
    --fa-reply-color: #EF6767;	                    /* Color of reply symbols */
    --fa-quote-color: #F0F0F0;			         	/* Color of quote symbols */
    --fa-mention-color: #58A2E4;	                /* Color of @ symbols */
    --fa-edit-color: #71C488;		                /* Color of pen symbols */
    --fa-pm-color: #F0F0F0;			            	/* Color of pm symbols */
    --fa-checked-box-color: #BBF1A5;	            /* Color of checked boxes */
    --fa-badge-star: #E8E86E;                       /* Color of badge symbol on user page */
    
    /* OTHER COLORS */
    --lifetime-purple: 213, 128, 255;				/* The color of lifetime subscriptions */
    --main-accent: 213, 128, 255;		          	/* Main accent color */
    --border-color: rgba(var(--main-light-trans), var(--second-alpha));     /* Color for various thin borders */
    --border-color-faint: rgba(var(--main-light-trans), 0.6);               /* Color for certain fainter border */
    
    /* THREAD VARIABLES */
    --posts-margin: 5px;							/* Margin between posts in threads, and some other things */
    --padding-post: 10px;					        /* Padding at edges of posts and related elements */
    --padding-slider: 15px;							/* Padding on the slider in threads */
    --slider-width: 132px;							/* Width of the slider in threads */
    --suggested-topics-width: 150px;				/* Width of the "Suggested Topics" title */
    --suggested-topics-height: 20px;				/* Height of the "Suggested Topics" title */
    --avatar-radius: 50%;                           /* The roundness of avatars */
    
    /* OTHER VARIABLES */
    --list-padding: 10px;							/* Padding around various lists */
    --border-radius: 0px;							/* If you want your edges a bit rounded */
    --glyph-size: 20px;								/* Size of the symbols in, for example, the header */
    --global-footer: none;							/* Use "none" to remove the footer or "block" if you want to keep it */
    --wide-posts: 0;                                /* Use 1 for yes, 0 for no. See forum post or userstyle's page to find out what this is */
}
    --default-avatar: url("https://global.discourse-cdn.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png");

Where can I get it?

→ From the best place ever ←

Bug reports and suggestions can be made right here in the thread, or at my email address kumi@kumirei.com.

27 Likes
2

it’s wonderful! i’ll play more with it tomorrow! :grin:

image
image1435×696 850 KB

4 Likes
3

v2.0.1 14-08-2018

Fixed a few things with the reply box that I missed at release

v2.0.2 30-08-2018

Fixed: group mentions, modal buttons, active buttons, reply cancel hover, share box, bookmarks, cakeday page.

v2.1.0 30-08-2018

Added: setting to change default image for users that don’t have one

1 Like
4

My Browser doesn’t let me to install the style, is it there another way to have it? :sweat: I use Firefox, I did install the previous one with TamperMonkey.

5

Yeah, I don’t know why that keeps happening…

For unknown reasons this can not be installed sometimes. Here is the raw code with my settings preloaded. Just paste it into a new style in your userstyle handler. 
/*__________________________________________*/
/* 			      THEME INFO
/*__________________________________________*/

/*

Name:           Forum Transparency 2.0
Author:         Kumirei
Version:        2.1.4
Total lines:    2833
Latest update:  13-01-2019

Forum post:     https://community.wanikani.com/t/userstyle-forum-transparency-20/32287
Theme link:     https://userstyles.org/styles/163317/wanikani-forum-transparency-2-0
Email address:  kumi@kumirei.com

For bug reports, suggestions, and everything else, you can reach me on the Wanikani forums or my email address.

Thank you for installing this theme.
Love, Kumirei.

*/



/*__________________________________________*/
/* 				   Variables
/*__________________________________________*/

:root {
    /* BACKGROUND IMAGE */
    --background-image-url: url(https://i.imgur.com/i5Ie3Vx.jpg);
    
    /* TEXT */
    --main-text: #F0F0F0;		                  /* Main text color */
    --second-text: #C8C8C8;			              /* Slightly darker text, used when not much contrast is needed */
    --main-light-grey: #B4B4B4;		              /* Slightly darker than second text */
    --main-dark: #2A2A2A;					      /* Main dark text color */
    --main-grey: #545454;					      /* Main grey color. Used in mentions */
    --link-color: #FFFFFF;						  /* Default color of links */
    
    /* BACKGROUND COLORS */
    --main-trans: 0, 0, 0;							/* Main color of transparent areas */
    --main-light-trans: 255, 255, 255;				/* Color of light transparent areas */
    
    /* BACKGROUND ALPHAS */
    --main-alpha: 0.7; 								/* The darker alpha, for headers and menus and such */
    --second-alpha: 0.5;							/* Alpha value for threads and such */
    --third-alpha: 0.3;					            /* Alpha value of highlighted posts and some other things */
    --main-light-alpha: 0.2;						/* Alpha value of light transparent areas */
    
    /* BACKGROUNDS */
    --header-background: rgba(var(--main-trans), var(--main-alpha));                    /* Background for headers and stuff */
    --content-background: rgba(var(--main-trans), var(--second-alpha));                 /* Background for most content */
    --highlight-background: rgba(var(--main-light-trans), var(--main-light-alpha));     /* Background for highlights */
    
    /* SYMBOL COLORS */
    --fa-heart-color: #D580FF;	                  /* Color of hearts */
    --fa-reply-color: #EF6767;	                  /* Color of reply symbols */
    --fa-quote-color: #F0F0F0;			          /* Color of quote symbols */
    --fa-mention-color: #58A2E4;	              /* Color of @ symbols */
    --fa-edit-color: #71C488;		              /* Color of pen symbols */
    --fa-pm-color: #F0F0F0;				          /* Color of pm symbols */
    --fa-checked-box-color: #BBF1A5;	          /* Color of checked boxes */
    --fa-badge-star: #E8E86E;                     /* Color of badge symbol on user page */
    
    /* OTHER COLORS */
    --lifetime-purple: 213, 128, 255;				/* The color of lifetime subscriptions */
    --main-accent: 213, 128, 255;			        /* Main accent color */
    --border-color: rgba(var(--main-light-trans), var(--second-alpha));     /* Color for various thin borders */
    --border-color-faint: rgba(var(--main-light-trans), 0.6);               /* Color for certain fainter border */
    
    /* THREAD VARIABLES */
    --posts-margin: 5px;							/* Margin between posts in threads, and some other things */
    --padding-post: 10px;					        /* Padding at edges of posts and related elements */
    --padding-slider: 15px;							/* Padding on the slider in threads */
    --slider-width: 132px;							/* Width of the slider in threads */
    --suggested-topics-width: 150px;				/* Width of the "Suggested Topics" title */
    --suggested-topics-height: 20px;				/* Height of the "Suggested Topics" title */
    --avatar-radius: 50%;                           /* The roundness of avatars */
    
    /* OTHER VARIABLES */
    --list-padding: 10px;							/* Padding around various lists */
    --border-radius: 0px;							/* If you want your edges a bit rounded */
    --glyph-size: 20px;								/* Size of the symbols in, for example, the header */
    --global-footer: none;							/* Use "none" to remove the footer or "block" if you want to keep it */
    --wide-posts: 0;                                /* Use 1 for yes, 0 for no. See forum post or userstyle's page to find out what this is */
    --default-avatar: url("https://discourse-cdn-sjc1.com/business5/uploads/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"); /* The avatar for people who has not chosen a personal avatar */
}



/*__________________________________________*/
/* 					INDEX
/*__________________________________________*/

/*

* [1] THEME INFO
* [26] VARIABLES
* [93] INDEX
* [164] GLOBAL
    * [168] Background
    * [180] Menus
    * [189] Links
    * [198] Global footer
    * [224] FA:s
    * [246] Hovering
    * [259] List borders
    * [271] Notifications
    * [287] Categories
    * [295] Buttons
    * [332] Lists
    * [439] Select kit
    * [447] Spinner
    * [471] Other
* [509] HEADER
    * [513] General
    * [543] Lesson and review count bar
    * [571] Notifications
* [691] HOMEPAGE
    * [695] General
    * [742] Categories
    * [814] Top
* [849] IN THREAD
    * [853] Title
    * [882] Post info
    * [1141] Post content
    * [1290] Slider
    * [1451] Foot
    * [1570] Reply box
* [1690] USER PAGE
    * [1694] General
    * [1734] About
    * [1769] Nav
    * [1799] FA:s
    * [1823] Activity
    * [1856] Summary
    * [1963] Notifications
    * [2017] Badges
    * [2057] Preferences
* [2173] SEARCH
    * [2177] General
    * [2194] Left
    * [2248] Right
    * [2314] Header search
* [2339] OTHER PAGES
    * [2343] Page not found
    * [2355] User card
    * [2384] Badges
    * [2404] Edit history
    * [2416] About, FAQ, TOS, Privacy
* [2498] CHANGE LOG
    * [2502] Version 1.0.0
    * [2512] Version 2.0.0
    * [2521] Version 2.0.1
    * [2557] Version 2.0.2
    * [2700] Version 2.1.0
    * [2700] Version 2.1.1
    * [2726] Version 2.1.2

*/



/*__________________________________________*/
/* 					Global
/*__________________________________________*/

/* Background
/*____________________*/

body {
    background: var(--background-image-url); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--main-text);
}


/* Menus
/*____________________*/

.menu-panel {
    border: none; 
    background-color: var(--header-background);
}


/* Links
/*____________________*/

p a {
    color: var(--main-text) !important;
    font-weight: bold;
}


/* Global Footer
/*____________________*/

#page-footer {
    border: none;
    max-width: 1110px;
    padding: 0;
    margin: var(--posts-margin) 8px var(--posts-margin) 8px;
    background-color: var(--content-background);
    display: var(--global-footer);
}

#page-footer a {
    color: var(--main-text);
}

#page-footer p {
    margin: 0;
    padding: var(--padding-post);
    display: inline-block}

#page-footer p:last-child {
    float: right;
}


/* FA:s
/*____________________*/

.fa {
    color: var(--main-text) !important;
}

.fa-exclamation-circle.d-watching,
.fa-exclamation-circle.watching,
.fa-exclamation-circle.d-icon-d-watching,
.fa-circle.d-icon-d-tracking,
.fa-circle.d-tracking,
.fa-circle.tracking {
    color: rgba(var(--main-accent)) !important;
}

.fa-check-square,
.topic-status .fa-check-square-o {
    color: var(--fa-checked-box-color) !important;
}


/* Hovering
/*____________________*/

.icon:active,
.icon:hover,
.user-menu .notifications li[class="read"]:hover,
.menu-links-header a:hover,
.menu-panel ul.menu-links li a:hover, 
.menu-panel ul li.heading a:hover {
    background-color: var(--highlight-background) !important;
}


/* List Borders
/*____________________*/

hr {
    border-color: var(--main-text);
}

.table-heading {
    border-bottom: 2px solid var(--border-color-faint) !important;
}


/* Notifications
/*____________________*/

.badge-notification {
    background-color: rgba(var(--main-accent)) !important;
}

.badge-notification.new-topic {
    background-color: transparent !important;
}

.badge-notification.unread {
    background-color: var(--main-light-grey) !important;
}


/* Categories
/*____________________*/

.badge-category {
    color: var(--second-text) !important;
}


/* Buttons
/*____________________*/


.btn,
.btn[href],
.bullet > a {
    border-radius: var(--border-radius);
    color: var(--main-text);
    background-color: var(--content-background) !important;
}

.btn:hover,
.bullet > a:hover {
    background-color: rgba(var(--main-trans), var(--third-alpha)) !important;
}

.btn-flat .d-icon,
.btn .d-icon {
    opacity: 1;
}

.d-button-label {
    color: var(--main-text);
}

button:hover,
button.d-hover {
    border-radius: var(--border-radius);
    background-color: var(--highlight-background) !important;
}

.btn[disabled]:hover {
    background-color: var(--content-background) !important;
}


/* Lists
/*____________________*/

.topic-list {
    margin-bottom: 0;
}

.topic-list > tbody {
    border-top: 3px solid var(--main-dark);
}

.topic-list th {
    color: var(--main-text);
    font-weight: bold;
}

.topic-list tr {
	border-color: var(--main-dark) !important;
}

.topic-list tr:hover {
    background-color: var(--highlight-background);
}

.topic-list thead tr:first-child:hover {
    background-color: transparent !important;
}

.topic-list .sortable:hover {
    background-color: var(--highlight-background);
}

.topic-list th:first-of-type,
.topic-list td:first-of-type {
    padding-left: var(--list-padding);
}

.topic-list th:last-of-type,
.topic-list td:last-of-type {
    padding-right: var(--list-padding);
}

.topic-list a,
.topic-list .num {
    color: var(--main-text) !important;
}

.topic-list .topic-excerpt,
.topic-list .visited .title {
    color: var(--second-text) !important;
}

.topic-list>tbody>tr.highlighted {
    animation-name: post-highlight;
}

#list-area {
    margin-bottom: 0;
}

#list-area .topic-list-bottom {
    margin: 0;
    padding-left: var(--list-padding);
}

#list-area .topic-list-bottom #dismiss-topics {
    transform: translate(0, -5px);
    margin-right: 5px;
}

#list-area .footer-message p {
    color: var(--main-text);
}

#list-area .footer-message .education {
    color: var(--main-text);
}

#list-area .footer-message h3 {
    margin-top: 10px;
}

#list-area .footer-message h3 a {
    color: rgba(var(--main-accent));
}

#list-area .footer-message .badge.new-topic {
    vertical-align: inherit !important;
    color: rgba(var(--main-accent));
}

.alert {
    color: var(--main-text) !important;
    background-color: var(--main-dark) !important;
}

#topic-entrance {
    border: 0;
    border-radius: var(--border-radius);
    background-color: var(--header-background);
}

#topic-entrance .full {
    background-color: var(--highlight-background) !important;
}


/* Select kit
/*____________________*/

.select-kit-header {
    border-radius: var(--border-radius);
}


/* Spinner
/*____________________*/

.spinner {
    width: 55px;
    height: 55px;
    border: 2px solid rgb(240,240,240);
    border-top-color: transparent;
    border-bottom-color: transparent;
    background-image: url(https://i.imgur.com/z0eMoXs.png) !important;
    background-color: rgba(0,0,0,0.7) !important;
    background: no-repeat center 10px;
    background-size: 40px;
    animation: rotate-forever 1s infinite;
}

.spinner.small {
  height: 15px;
  width: 15px;
  background-position: center center;
  background-size: 10px;
}


/* Other
/*____________________*/

img.avatar {
    border-radius: var(--avatar-radius);
}

.private-message_warning {
    display: none;
}

body.float_wkappnav #main-outlet {
    padding-top: calc(93px + var(--posts-margin)) !important;
}

body:not(.float_wkappnav) #main-outlet {
    padding-top: 4.85722em;
}

body:not(.float_wkappnav) .wanikani-app-nav {
    background-color: var(--header-background);
}

body:not(.float_wkappnav) .wanikani-app-nav ul {
    padding: 0.5em;
    border: none;
}

body:not(.float_wkappnav) .wanikani-app-nav li {
    color: var(--main-text);
}

body:not(.float_wkappnav) .wanikani-app-nav li a {
    color: var(--second-text);
}



/*__________________________________________*/
/* 					HEADER
/*__________________________________________*/

/* General
/*____________________*/

.d-header {
    background-color: var(--header-background);
}

.d-header .container,
.d-header .contents {
    padding: 0 var(--padding-post);
}

.d-header .title .logo-big {
    width: 398px;
	height: 60px;
	box-sizing: border-box;
	padding-left: 398px;
    background: url("https://i.imgur.com/te3wMyh.png") no-repeat;
	background-size: contain;
}

.d-header .active .icon {
    background-color: var(--highlight-background) !important;
}

.d-header .active .icon:after {
    border: none !important;
}


/* Lesson and Review count bar
/*____________________________*/

.float_wkappnav .wanikani-app-nav-container {
    border-color: var(--second-text);
}

.float_wkappnav .wanikani-app-nav li {
    color: var(--main-text) !important;
}

.float_wkappnav .wanikani-app-nav li a {
    color: var(--main-text) !important;
}

.float_wkappnav li[data-highlight="true"] .dashboard_bubble {
    background-color: rgba(var(--main-accent));
}

li[data-highlight="false"] .float_wkappnav .dashboard_bubble {
    background-color: var(--main-light-grey);
}

.float_wkappnav #next_review {
    background-color: rgba(var(--main-accent)) !important;
}


/* Notifications
/*____________________*/

.d-header .menu-panel {
    height: auto !important;
    padding-top: 0;
}

.d-header .menu-panel .notifications li {
    background-color: var(--highlight-background);
}

.d-header .menu-panel .notifications li div {
    color: var(--main-text) !important;
}

.d-header .menu-panel .notifications li div span {
    color: var(--main-text) !important;
}

.d-header .menu-panel .notifications .read {
    background-color: transparent;
}

.d-header .menu-panel .notifications .read div {
    color: var(--second-text) !important;
}

.d-header .menu-panel .notifications .fa-heart {
    color: var(--fa-heart-color) !important;
}

.d-header .menu-panel .notifications .fa-reply {
    color: var(--fa-reply-color) !important;
}

.d-header .menu-panel .notifications .fa-quote-right {
    color: var(--fa-quote-color) !important;
}

.d-header .menu-panel .notifications .fa-pencil {
    color: var(--fa-edit-color) !important;
}

.d-header .menu-panel .notifications .fa-envelope-o {
    color: var(--fa-pm-color) !important;
}

.d-header .menu-panel .notifications .fa-at {
    color: var(--fa-mention-color) !important;
}

.d-header .menu-panel a {
    color: var(--main-text);
}

.d-header .menu-panel .panel-body {
    width: 100%;
    position: relative;
}

.d-header .menu-links-header {
    border-spacing: 0;
}

.d-header .menu-panel .widget-link {
    display: inline-block;
}

.d-header .menu-panel .badge-notification {
    background-color: transparent !important;
    color: rgba(var(--main-accent)) !important;
    font-weight: bold;
    font-size: small;
}

.d-header .menu-panel .glyphs .widget-link {
    height: 10px;
    padding: calc(var(--glyph-size) - 10px);
}

.d-header .menu-panel .glyphs .widget-link .fa {
    font-size: calc(14px + var(--glyph-size) - 20px);
}

.d-header .menu-panel .glyphs .widget-link .fa {
    position: relative;
    vertical-align: middle;
    right: 50%;
    transform: translate(50%,-50%);
}

.drop-down-mode .d-header-icons .active .icon {
    border-color: transparent;
}

.d-header-icons .icon:hover, 
.d-header-icons .icon:focus {
    border-radius: var(--border-radius);
    background-color: var(--highlight-background) !important;
}

.menu-panel li a:hover {
    background-color: transparent;
}

.menu-panel li.heading a:focus {
    background-color: var(--highlight-background) !important;
}

.menu-panel li a:focus {
    background-color: transparent;
}

.d-header #current-user .unread-private-messages {
    right: initial;
}



/*__________________________________________*/
/* 					HOMEPAGE
/*__________________________________________*/

/* General
/*____________________*/

.list-controls .container {
    border-radius: var(--border-radius);
    margin-bottom: var(--posts-margin);
    padding: var(--list-padding);
    background-color: var(--content-background);
}

.list-controls .category-dropdown-menu {
    border: 0;
    padding: 0 1px 0 1px;
    background-color: var(--header-background);
}

.list-controls a {
    color: var(--main-text) !important;
}

.nav-pills .active a,
.list-controls a:hover {
    border-radius: var(--border-radius);
    background-color: var(--highlight-background) !important;
}

.list-controls .btn,
.list-controls .nav {
    margin-bottom: 0;
}

.topic-list-item-separator td {
    border-bottom: 1px solid var(--main-text) !important;
}

.topic-list-item-separator span {
    color: var(--main-dark) !important;
    border-radius: var(--border-raidus);
    background-color: var(--main-text) !important;
}

.list-container .row:nth-child(2) {
    border-radius: var(--border-radius);
    background-color: var(--content-background);
}


/* Categories
/*____________________*/

.categories-and-latest {
    padding-bottom: var(--list-padding);
    padding-right: var(--list-padding);
}

.categories-and-latest .new-topic,
.categories-and-latest .top-row a.new-topic,
.categories-and-latest .new-posts {
    color: rgba(var(--main-accent)) !important;
    background-color: transparent !important;
}

.categories-and-latest .topic-post-badges .new-posts {
    color: var(--main-text);
    background-color: rgba(var(--main-accent)) !important;
}

.latest-topic-list .table-heading,
.category-list th {
    color: var(--main-text);
}

.category-list .category-name {
    color: var(--main-text);
}

.category-list .category-description {
    color: var(--second-text);
}

.latest-topic-list .visited .top-row a {
    color: var(--second-text) !important;
}

.latest-topic-list .top-row a {
    color: var(--main-text) !important;
}

.latest-topic-list .topic-stats .posts-map,
.latest-topic-list .topic-stats .heatmap-high,
.latest-topic-list .topic-stats .relative-date,
.categories-and-latest .topics div {
    color: var(--second-text) !important;
}

.category-list .subcategories {
    border-radius: var(--border-radius);
    padding: var(--list-padding);
    padding-right: 0;
    background-color: var(--content-background);
}

.latest-topic-list > div {
    border-bottom-color: var(--border-color-faint);
}

.category-list tbody tr:first-of-type {
    border-top-color: var(--border-color-faint);
}

.category-list tbody tr {
	border-bottom-color: var(--border-color-faint);
}

.topic-list a[title="new topic"] {
    color: rgba(var(--main-accent)) !important;
}


/* Top
/*____________________*/

.top-lists {
	padding-top: var(--list-padding);    
    padding-left: var(--list-padding);
}

.top-lists h2 {
    margin-top: 0 !important;
}

.top-lists .top-date-string {
    color: var(--main-text);
}

.top-lists .period-popup {
    border: 0 !important;
    background-color: var(--header-background) !important;
}

.top-lists .period-popup a {
    color: var(--main-text) !important;
}

.top-lists .period-popup .top-date-string {
    color: var(--second-text) !important;
}

.top-lists .period-popup li:hover {
    background-color: var(--highlight-background) !important;
}



/*__________________________________________*/
/* 			   	  IN THREAD
/*__________________________________________*/

/* Title
/*____________________*/

.d-header .topic-link span {
    color: var(--main-text);
}

#topic-title {
    padding: var(--padding-post);
    padding-bottom: calc(var(--padding-post) - 5px);
    border-radius: var(--border-radius);
    background-color: var(--header-background);
    margin-bottom: var(--posts-margin);
}

#topic-title a {
    color: var(--main-text) !important;
}

#topic-title .badge-category {
    color: var(--main-text);
}

.container.posts::before,
.container.posts .row::before {
    display: none;
}


/* Post info
/*____________________*/

.topic-post {
    border-radius: var(--border-radius);
    padding-left: var(--padding-post);
    border: 0;
    margin-top: var(--posts-margin);
    background-color: var(--content-background);
}

.topic-post .post-info.post-date {
    padding-right: 10px;
}

@media (min-width: 976px) { 
    .gap,
    .time-gap,
    .topic-post,
    .small-action,
    .small-action .small-action-desc,
    .loading-container .presence-users {
		width: calc(100% - 162px) !important;
    }
}

.topic-body {
    width: calc(100% - 65px - 2 * (var(--padding-post) - 10px));
    padding: var(--padding-post) var(--padding-post) 0 var(--padding-post);
}

.topic-body .cooked {
    width: calc(100% - 45px - var(--padding-post));
}

.topic-avatar {
    padding-top: var(--padding-post);
}

.topic-avatar,
.topic-body {
    border: 0;
}

.topic-meta-data a {
    color: var(--main-text) !important;
}

.topic-meta-data .user-title,
.topic-meta-data .user-title a {
    color: var(--second-text) !important;
}

@keyframes post-highlight {
    from {background-color: rgba(var(--main-accent), var(--third-alpha));
    }
    to {background-color: transparent;
    }
}

.topic-body.highlighted {
    animation-name: post-highlight;
}

.topic-body .read-state {
    right: calc(var(--padding-post) / 2);
    transform: translate(50%,0);
    top: 11px;
}

.topic-post .read-state .fa-circle {
    color: rgba(var(--main-accent)) !important
}

.post-controls .like-count {
    color: var(--main-text) !important;
}

.post-controls .reply {
    color: var(--main-text) !important;
}

.discourse-no-touch .topic-body .actions .fade-out {
    opacity: initial;
    transition: none;
}

.post-controls .has-like .fa-heart {
    color: var(--fa-heart-color) !important;
}

.time-gap {
    padding: 0.5em calc(var(--padding-post) / 2);
    background-color: var(--content-background);
    max-width: unset;
    margin-top: var(--posts-margin);
    border: none;
    text-align: center;
}

.time-gap .topic-avatar {
    display: none;
}

.time-gap .small-action-desc {
    display: inline;
    padding: 0;
    color: var(--main-text) !important;
}

.gap {
    width: calc(100% - 10px);
    color: var(--main-text);
    text-align: center;
    padding: 0.5em calc(var(--padding-post) / 2);
    margin-top: var(--posts-margin);
    background-color: var(--content-background);
}
    
.small-action {
    max-width: unset;
    border: 0;
}

div[id].small-action .small-action-desc {
    padding-bottom: var(--padding-post); /* might be removed */
    padding-left: var(--padding-post);
    padding-top: var(--padding-post);
    margin-top: var(--posts-margin);
    background-color: var(--content-background);
    color: var(--main-text);
}

div[id].small-action .btn {
    transform: translate(0,4px);
}

.topic-post .post-links-container ul {
    border-top: 1px solid var(--main-light-grey);
}
    
.topic-post .post-links-container span {
    color: var(--main-text);
}

.quote-button {
    background-color: rgba(var(--main-accent));
    opacity: 1;
}

.quote-button:hover {
    background-color: rgba(var(--main-accent), var(--main-alpha));
}

#topic .like-button:hover {
    background-color: transparent !important;
}

#topic .like-count {
    font-size: 1em !important;
    margin-right: 2px !important;
}

#topic .like-count[title*="1 person"]:after,
#topic .like-count[title="you liked this post"]:after {
    content: ' Like';
}

#topic .like-count:after {
    content: ' Likes';
}

#topic .toggle-like {
    padding: 8px 10px !important;
}

#topic .my-likes i {
    display: none !important;
}

#topic .fa-heart-o:before {
    content: "";
}

nav.post-controls .like-button:active {
    box-shadow: none;
}

.small-action {
    padding-left: var(--padding-post);
    padding-right: 0;
}

.small-action .topic-avatar {
    background-color: var(--content-background);
    padding: 8px 0px;
    margin: var(--posts-margin) calc(0px - var(--posts-margin)) 0 0;
    position: relative;
    left: calc(0px - var(--padding-post));
}

.topic-map {
    background-color: var(--header-background);
    border: none;
}

.topic-map section {
    border-color: var(--border-color);
}

.topic-map .map {
    border-top: none;
}

.topic-map .buttons .btn {
    background-color: transparent !important;
    border-left: none;
}

.topic-map .information,
.topic-map h3,
.topic-map h4 {
    color: var(--second-text);
}

.topic-map .number {
    color: var(--main-text) !important;
}

.topic-map a {
    color: var(--link-color);
}

.topic-map .link-summary .btn {
    background-color: transparent !important;
}

.post-links a {
    color: var(--link-color);
    font-weight: bold;
}

.post-links .expand-links {
    font-weight: normal;
}

.topic-body .post-info.edits .heatmap-high .fa-pencil {
   color: var(--fa-reply-color) !important; 
}

.embedded-posts .collapse-down,
.embedded-posts .collapse-up {
    border: none;
}

.user-tag input {
    color: var(--main-text);
}


/* Post Content
/*____________________*/

.topic-post .topic-body .contents {
    margin-top: calc(15px + var(--wide-posts) * 25px);
    width: calc(100% + var(--wide-posts) * (45px + var(--padding-post)));
    left: calc(0px + var(--wide-posts) * (-45px - var(--padding-post)));
}

blockquote,
.quote .title {
    color: var(--main-text) !important;
    border-left-color: var(--main-text) !important;
    background-color: var(--highlight-background) !important;
}

.quote .quote .quote {
    background-color: inherit;
}

.topic-post .badge-notification.clicks {
    color: var(--main-dark) !important;
    background-color: var(--main-text) !important;
}

.spoiled {
    padding: 0 2px;
    text-shadow: none !important;
	background-color: rgba(var(--main-light-trans), var(--third-alpha)) !important;
}

.spoiled[style*=" 0px;"],
.spoiled:hover {
    color: var(--main-text) !important;
}

.spoiled[style*=" 5px;"] image {
    filter: none !important;
}

.spoiled code,
.spoiled .mention {
    opacity: 0;
}

.spoiled:hover code,
.spoiled[style*=" 0px;"] code,
.spoiled[style*=" 0px;"] .mention,
.spoiled:hover .mention {
    filter: none !important;
    opacity: 1;
}

.mention {
    color: var(--main-grey) !important;
    background-color: var(--main-text) !important;
}

.poll {
    background-color: var(--highlight-background);
}

.poll,
.poll .poll-info,
.poll .poll-buttons {
    border-color: rgba(var(--main-light-trans), var(--third-alpha)) !important;
}

.poll p,
.poll span {
    color: var(--main-text) !important;
}

.poll .bar-back div {
    background-color: var(--main-dark) !important;
}

.poll .results .bar-back {
    background-color: rgba(var(--main-light-trans), var(--second-alpha)) !important;
}

.poll .chosen .bar-back div {
    background-color: var(--fa-checked-box-color) !important;
}

code {
    color: var(--main-text) !important;
    background-color: var(--highlight-background) !important;
}

.post-controls .accepted-text {
    color: var(--fa-checked-box-color);
}

.topic-post .contents a {
    color: var(--link-color);
    font-weight: bold;
}

.onebox {
    border: none !important;
    background-color: var(--highlight-background);
}

aside.onebox a[href] {
    color: var(--main-text) !important;
}

.hljs-title,
.hljs-name,
.coffeescript .hljs-params,
.scss .hljs-meta {
    color: #ff7b9c;
}

.hljs-keyword,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
    color: #000;
}

.hljs-comment,
.hljs-doctag {
    color: #ecec95
}

.hljs-number,
.ruby .hljs-constant {
    color: #00c7c7;
}

.cooked del,
.d-editor-preview del {
    background-color: #f58b8b8f;
}

blockquote blockquote blockquote blockquote blockquote {
    border: 1px solid var(--border-color);
    background-color: transparent !important;
}

aside.quote {
    background-color: transparent !important;
}


/* Slider
/*____________________*/

.timeline-container {
    margin-left: calc(100% - 182px - 28px + var(--posts-margin) + 3em);
}

@media (min-width: 1146px) {
    .timeline-container {
        margin-left: calc(1110px - 182px - 12px + var(--posts-margin) + 3em);
    }
}

.timeline-container .topic-timeline {
    margin-left: 0;
    width: calc(152px - var(--posts-margin));
}

.timeline-container a,
.timeline-container div {
    color: var(--main-text) !important;
}

.timeline-scrollarea { 
    border-color: var(--main-text) !important;
}

.timeline-handle {
    background-color: var(--main-text) !important;
}

.timeline-container.timeline-docked:not(.timeline-docked-bottom) {
    transform: translate(0, -14px) !important;
}

.timeline-container.timeline-docked .timeline-scrollarea-wrapper {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.timeline-container.timeline-docked-bottom .timeline-scrollarea-wrapper{
	border-radius: var(--border-radius);
}

.timeline-container.timeline-docked-bottom .timeline-footer-controls {
    opacity: 0;
}

.timeline-container .timeline-footer-controls {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    transition: opacity 0.2s !important;
}

.timeline-container .timeline-footer-controls,
.timeline-container .timeline-scrollarea-wrapper {
    background-color: var(--content-background);
}

.timeline-container .timeline-footer-controls {
    text-align: center;
    padding: calc(var(--padding-slider) / 2) 0 var(--padding-slider) 0;
    margin-top: 0px !important;
}

.timeline-container .timeline-scrollarea-wrapper {
    width: var(--slider-width);
}

.timeline-container .timeline-footer-controls {
    width: calc(var(--slider-width) + 15px);
}

.timeline-container .timeline-footer-controls > button:first-child {
    margin-right: calc((var(--slider-width) - 2 * 38px) / 3);
}

.timeline-container .timeline-footer-controls div button {
    margin-right: 0 !important;
}

.timeline-container .timeline-scrollarea-wrapper {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    padding: var(--padding-slider) 0 calc(var(--padding-slider) / 2) var(--padding-slider);
}

#topic-progress-wrapper {
    right: 6px !important;
}

#topic-progress {
    background-color: var(--header-background);
    color: var(--main-text);
    border: none;
}

#topic-progress .bg {
    border: none;
    background-color: rgba(var(--main-accent));
}

.timeline-fullscreen {
    background-color: var(--header-background) !important;
    border: none !important;
}

.timeline-fullscreen .topic-category {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 5px;
}

.timeline-fullscreen .username {
    color: var(--main-text) !important;
}


.timeline-fullscreen .post-excerpt {
    color: var(--second-text) !important;
}

.timeline-fullscreen .timeline-scrollarea-wrapper {
    border-left: 1px solid var(--border-color);
    background-color: transparent;
}

.timeline-fullscreen .timeline-footer-controls .btn:hover {
    background-color: var(--highlight-background) !important;
}

.timeline-fullscreen .timeline-footer-controls .btn,
.timeline-fullscreen .timeline-footer-controls {
    background-color: transparent !important;
}

.posts .select-kit-body {
    z-index: 0 !important;
    border: none !important;
    background-color: rgba(var(--main-trans), 0.9) !important;
}

.posts .select-kit-collection {
    background-color: transparent;
}

.posts .select-kit .select-kit-row.is-selected,
.posts .select-kit .select-kit-row.is-highlighted {
    background-color: rgba(var(--main-light-trans), var(--main-light-alpha));
}

.posts .select-kit .name {
    color: var(--main-text) !important;
}

.posts .select-kit .desc {
    color: var(--second-text) !important;
}

.timeline-container.timeline-docked .timeline-date-wrapper {
    position: relative;
    z-index: 10002;
}


/* Foot
/*____________________*/

.topic-status-info {
    display: none;
    border-top: 0;
}

.topic-above-footer-buttons-outlet .presence-users {
    color: var(--main-text);
    margin-top: var(--posts-margin);
    padding: var(--padding-post);
    padding-right: 0;
    background-color: var(--content-background);
    justify-content: center;
}

#topic-footer-buttons {
    margin-top: 10px;
    margin-bottom: 0px;
    padding-left: var(--padding-post); 
    border-radius: var(--border-radius);
    background-color: var(--content-background);
}

#topic-footer-buttons .reason {
    color: var(--main-text);
}

#suggested-topics {
    padding-top: 0px;
    padding-bottom: 0px;
}

#suggested-topics .topics {
    border-radius: var(--border-radius);
    padding-bottom: 0 !important;
    background-color: var(--content-background);
}

#suggested-topics h3:first-child {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    width: var(--suggested-topics-width);
    height: var(--suggested-topics-height);
    justify-content: center;
    margin-bottom: 0;
    color: var(--main-text);
    transform: translate(0, 10px);
    padding: var(--list-padding) calc(var(--list-padding) - 4px) var(--list-padding) calc(var(--list-padding) - 5px);
    padding-bottom: 0;
    background-color: var(--content-background);
}

#suggested-topics .topics {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-top-left-radius: 0;
}

#suggested-topics a,
#suggested-topics td,
#suggested-topics th {
    color: var(--main-text) !important;
}

#suggested-topics th {
    font-weight: bold;
}

#suggested-topics .visited .title {
    color: var(--second-text) !important;
}

#suggested-topics tr {
    border-color: var(--main-dark) !important;
}

#suggested-topics .topic-post-badges .new-topic {
    color: rgba(var(--main-accent)) !important;
}

#suggested-topics .suggested-topics-message {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-bottom: var(--posts-margin);
    padding: var(--padding-post);
    background-color: var(--content-background);
}

#suggested-topics .suggested-topics-message a {
    color: rgba(var(--main-accent)) !important;
}

#suggested-topics .suggested-topics-message .badge-category-bg {
    line-height: 1 !important;
}

#suggested-topics .suggested-topics-message .badge-category {
    color: var(--main-text) !important;
}

.private_message #suggested-topics h3:first-child {
    width: calc(var(--suggested-topics-width) + 50px);
}

.private_message #suggested-topics h3:first-child .fa {
    margin-right: 0;
    float: initial;
}

.private_message #suggested-topics .suggested-topics-message {
    height: 0px;
    padding: 0;
    opacity: 0;
}

.private_message #suggested-topics .topic-list-item:last-child {
    border-bottom: 0;
}


/* Reply Box
/*____________________*/

#reply-control .fa-mail-forward {
    border: none;
}

#reply-control .reply-details button {
    background-color: transparent !important;
}

#reply-control {
    border-top: none;
    background-color: var(--header-background);
}

#reply-control .d-editor-input,
#reply-control .d-editor-preview,
#reply-control .d-editor-preview-wrapper,
#reply-control .d-editor-textarea-wrapper {
    background-color: transparent;
}

#reply-control .submit-panel {
    border-top: 0px solid;
}

s#reply-control .composer-fields {
    border-bottom: 1px solid;
}

#reply-control .d-editor-preview-wrapper {
    margin-left: 0;
}

#reply-control .d-editor-preview {
    padding: 10px 0 0 15px;
    border: none;
    border-left: 1px solid;
}

#reply-control .submit-panel,
#reply-control .composer-fields, 
#reply-control .d-editor-preview,
#reply-control .d-editor-button-bar {
	border-color: var(--border-color);
}

#reply-control .d-editor-spacer {
    background-color: var(--border-color);
}

#reply-control textarea {
    color: var(--main-text);
}

#reply-control textarea::placeholder {
    color: var(--second-text);
}

#reply-control .popup-tip {
    background-color: rgba(var(--main-accent));
}

#reply-control .d-editor-button-bar .btn {
    background-color: transparent !important;
}

#reply-control .reply-to a {
    color: var(--main-text);
}

#reply-control .submit-panel a {
    color: var(--second-text);
}

#reply-control .submit-panel .btn {
    background-color: transparent !important;
}

#reply-control .fa {
    color: var(--second-text) !important;
}

#reply-control .grippie:before {
    border-color: var(--main-light-grey);
}

#reply-control .presence-users {
    position: fixed;
    top: unset;
    bottom: 10px;
    right: 50%;
    transform: translate(50%,0);
    color: var(--main-text);
    background-color: transparent;
}

#reply-control #draft-status {
    margin-left: 17px !important;
    text-align: left;
}

.d-editor-textarea-wrapper {
    border: 0;
}

#reply-control .reply-to {
    padding: 2px;
    padding-left: 5px;
    border-radius: 3px;
    background-color: var(--highlight-background);
}

#reply-control .grippie {
    background-color: transparent;
}



/*__________________________________________*/
/* 					USER PAGE
/*__________________________________________*/

/* General
/*____________________*/

.user-main .user-table {
    margin-top: 0 !important;
}

.user-main .user-archive {
    background-color: transparent !important;
}

.user-main .user-archive .btn {
    background-color: var(--header-background) !important;
}

.user-main .user-stream {
    border-top: 1px solid var(--border-color);
}

.user-main .user-stream-item {
    background-color: var(--content-background);
    border-color: 1px solid var(--border-color);
}

.user-table .wrapper > section > ul {
    border-radius: 0 0 0 var(--border-radius);
    margin-bottom: 5px;
    background-color: var(--header-background);
}

.user-main .user-stream-item .title a {
    color: var(--main-text);
}

.user-main .user-stream-item .excerpt,
.user-main .user-stream-item .relative-date {
    color: var(--second-text) !important;
}


/* About
/*____________________*/

.user-main .about .details {
    border: none !important;
    background-color: var(--header-background) !important;
}

.user-main .details .btn {
    background-color: var(--highlight-background) !important;
}

.user-main .details a {
    color: var(--link-color);
}

.user-main .bio {
    color: var(--second-text);
}

.user-main .about .secondary {
    border: none;
    border-top: 1px solid var(--border-color);
    background-color: var(--header-background);
}

.user-main .about dt {
    color: var(--main-text) !important;
}

.user-main .about dd {
    color: var(--main-light-grey) !important;
}


/* Nav
/*____________________*/

.user-main .main-nav {
    margin-bottom: 0 !important;
}

.user-main .main-nav a {
    color: var(--main-text);
}

.user-main .main-nav li:first-child {
    width: 91px;
}

.user-nav {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background-color: var(--header-background);
}

.user-main .main-nav .active {
    background-color: rgba(var(--main-accent), var(--main-alpha));
}

.user-main .main-nav > li > a:hover {
    color: var(--main-text);
    background-color: rgba(var(--main-accent), var(--second-alpha));
}


/* FA:s
/*____________________*/

.user-main .fa-comment {
    color: var(--fa-reply-color) !important;
}

.user-main .fa-certificate {
    color: var(--fa-badge-star) !important;  
}

.user-main .fa {
    opacity: 1 !important;
}

.user-main .fa-reply {
    color: var(--fa-reply-color) !important;
}

.user-main .fa-heart {
    color: var(--fa-heart-color) !important;
}


/* Activity
/*____________________*/

.user-main .activity-nav {
    border-top: 1px solid var(--border-color);
}

.user-main .activity-nav li:first-child a {
    color: var(--main-text);
}

.user-main .activity-nav li a {
    color: var(--second-text);
}

.user-main .activity-nav li li a {
    color: var(--second-text) !important;
}

.user-main .activity-nav .fa-heart {
    color: var(--fa-heart-color) !important;
}

.user-activity-page .topic-list {
    background-color: var(--content-background);
}

.user-activity-page .alert-info {
    margin: 0 !important;
    background-color: var(--content-background) !important;
}


/* Summary
/*____________________*/

.user-main .top-section {
    background-color: var(--content-background);
    margin-bottom: var(--list-padding);
    padding-top: 10px;
}

.user-main .stats-title {
    padding-left: 8px;
    margin-bottom: 0 !important;
}

.user-main .stats-section ul {
    margin-top: 0;
}

.user-main .stats-section .stats-title {
    padding-left: 14px;
}

.user-main .user-stat .label {
    color: var(--second-text);
}

.user-main .number {
    color: var(--main-text);
}

.user-main .stats-section li {
    margin-bottom: 0;
    padding-bottom: 0 !important;
}

.stats-section li.linked-stat a {
    padding-bottom: 0;
}

.user-main .collapsed-info {
    margin-bottom: var(--list-padding);
}

.user-main .top-section {
    border-radius: var(--border-radius);
}

.user-main .top-section:first-child {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.user-main .top-section .relative-date {
    color: var(--main-text);
}

.user-main .top-section .like-count {
    color: var(--second-text);
}

.user-main .top-section a {
    color: var(--second-text);
}

.user-main .top-section .more {
    padding-left: 14px;
}

.user-main .top-sub-section li {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    min-height: 45px;
    border-color: var(--main-text);
    background-color: rgba(var(--main-trans), var(--third-alpha));
}

.user-main .top-section .domain {
    color: var(--link-color);
    font-weight: bold;
}

.user-main .top-section .username a {
    color: var(--main-text);
}

.user-main .details {
    background-color: transparent !important;
}

.user-main .details .replies .number {
    color: var(--second-text) !important;
}
.user-main .badge-notification.clicks {
    background-color: var(--main-text) !important;
}

.user-main .badge-notification .number {
    color: var(--main-dark);
}

.user-main .summary-category-list table {
    margin-left: 8px;
}

.user-main .badges-section .stats-title {
    margin-bottom: 10px !important;
}


/* Notifications
/*____________________*/

.user-notifications-page .user-right .large-notification {
    background-color: var(--content-background);
}

.user-notifications-page .user-right .large-notification.unread {
    background-color: rgba(var(--main-trans), calc(var(--second-alpha) + 0.2));
}

.notification-list .active {
    color: var(--main-text) !important;
}

.user-navigation .nav-stacked a {
    color: var(--second-text);
}

.user-navigation .dismiss-notifications {
    background-color: var(--header-background) !important;
}

.user-main .about {
    border-radius: var(--border-radius);
    margin-bottom: var(--list-padding);
}

.notifications-nav {
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.user-notifications-page .user-right .large-notification > li > a > div {
    color: var(--second-text);
}

.user-notifications-page .user-right .large-notification > li > a > div span {
    color: var(--main-text);
}

.user-notifications-page .relative-date {
    color: var(--second-text);
}

.user-stream .item {
    border-color: var(--border-color);
}

.user-stream .fa-at {
    color: var(--fa-mention-color) !important;
}


/* Badges
/*____________________*/

.top-section.badges-section {
    padding-left: 8px;
    padding-right: 8px;
}

.badge-card {
    border-radius: var(--border-radius);
}

.badge-card.medium {
    border: none;
    flex: 0 calc(32% + 2px);
    background-color: var(--content-background);
}

.badge-card .badge-info-item > h3 {
    color: var(--main-text);
}

.badge-card .badge-info-item a {
    color: var(--link-color);
    font-weight: bold;
}

.badge-card .badge-info-item .badge-summary {
    color: var(--second-text);
}

.user-badges-list {
    background-color: var(--content-background);
}

.badge-card .grant-count {
    color: var(--second-text);
}


/* Preferences
/*____________________*/

.user-right.user-preferences {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background-color: var(--content-background);
}

.nav-account a {
    color: var(--main-text) !important;
}

.nav-stacked a.active {
    color: var(--main-text) !important;
}

.show-badge {
    background-color: var(--content-background);
    padding: var(--list-padding);
}

.show-badge h1 a {
    color: var(--main-text);
}

.badge-card.large {
    background-color: var(--content-background);
    border: none;
}

.check-display.status-checked {
    background-color: var(--fa-checked-box-color);
}

.check-display.status-checked i {
    color: var(--main-dark) !important;
}

.show-badge .name-line a {
    color: var(--main-text) !important;
}

.user-info.medium.badge-info .granted-on {
    color: var(--second-text);
}

.badges-granted .user-info {
    background-color: var(--content-background);
    border-left: 2px solid var(--main-text);
    padding-top: var(--padding-post);
    padding-left: var(--padding-post);
    margin: 0 1% 1em 0;
    flex: 0 0 31%;
}

.user-preferences span {
    color: var(--main-text) !important;
}

.user-preferences .instructions {
    color: var(--second-text);
}

#discourse-modal .title h3 {
    color: var(--main-dark);
}

#discourse-modal .btn {
    background-color: var(--header-background) !important;
    color: var(--main-text);
}

.d-modal-cancel {
    color: var(--main-dark);
}

#discourse-modal .close .fa {
    color: var(--main-dark) !important;
}

.user-preferences .select-kit-header {
    border: none !important;
    background-color: var(--header-background) !important;
}

.user-preferences .select-kit .select-kit-body {
    background-color: transparent;
}

.user-preferences .select-kit .select-kit-collection {
    background-color: var(--header-background);
}

.user-preferences .select-kit .select-kit-row.is-highlighted {
    background-color: var(--highlight-background);
}

.user-preferences {
    background-color: var(--content-background);
}

.user-preferences .category-controls .select-kit-header {
    background-color: #fff !important;
}

.user-preferences span.category-name {
    color: var(--main-dark) !important;
}

.user-preferences .category-notifications .controls a {
    color: var(--link-text);
    font-weight: bold;
}



/*__________________________________________*/
/* 					SEARCH
/*__________________________________________*/

/* General
/*____________________*/

.search-page .select-kit .select-kit-body {
    background-color: transparent;
}

.search-page .select-kit .select-kit-collection {
    background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
}

.search-page .select-kit .select-kit-row.is-selected,
.search-page .select-kit .select-kit-row.is-highlighted {
    background-color: var(--highlight-background);
}


/* Left
/*____________________*/

.search-page .search-advanced {
    border-radius: var(--border-radius);
    background-color: var(--content-background);
    padding: var(--list-padding);
}

.search-page .search-notice > div {
    background-color: rgba(var(--main-accent), var(--main-alpha)) !important;
    color: var(--main-text) !important;
    border: none !important;
}

.search-page .search-advanced .select-kit-header {
    border: none !important;
    background-color: var(--header-background) !important;
}

.search-page .no-results-suggestion a {
    color: var(--link-color);
    font-weight: bold;
}

.search-page .search-advanced .search-info {
    border-color: var(--border-color);
}

.search-page .menu-panel {
    background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
}

.search-page .search-results .search-highlight {
    color: rgba(var(--main-accent));
}

.search-page .search-results .search-link .topic-title {
    color: var(--main-text);
}

.search-page .search-results .search-link:visited .topic-title {
    color: var(--second-text);
}

.search-page .search-results .relative-date {
    color: var(--main-text);
}

.search-page .search-results .blurb {
    color: var(--second-text);
}


/* Right
/*____________________*/

.search-page .search-advanced-sidebar .search-advanced-title,
.search-page .search-advanced-sidebar .search-advanced-filters {
    background-color: var(--header-background);
}

.search-page .search-advanced-sidebar .search-advanced-title {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.search-page .search-advanced-sidebar .search-advanced-filters {
    border-radius: 0 0 var(--border-radius) var(--border-radius)
}

.search-page .search-advanced-sidebar .selected-name {
    color: var(--main-dark);
}

.search-page .category-controls .select-kit-header {
    background-color: #fff !important;
}

.search-page .pika-single {
    border: none;
    background-color: rgba(var(--main-trans), calc(var(--main-alpha) + 0.2));
}

.search-page .pika-label {
    background-color: transparent;
    color: var(--main-text);
}

.search-page tbody,
.search-page .pika-table tr {
    border-color: var(--border-color);
}

.search-page .pika-table th {
    color: var(--main-text);
}

.search-page .pika-button {
    color: var(--second-text);
    background-color: transparent;
    text-align: center;
}

.search-page .pika-table .is-selected .pika-button {
    color: var(--main-text);
    box-shadow: none !important;
    background-color: var(--highlight-background);
}

.search-page .pika-next:hover,
.search-page .pika-next {
    background: url(https://i.imgur.com/scWW4yN.png) !important;
}

.search-page .pika-prev:hover,
.search-page .pika-prev {
    background: url(https://i.imgur.com/gwvQaN9.png) !important;
}


/* Header search
/*____________________*/

.search-menu li:not(.category):not(.heading):hover a:not(.badge-notification) {
    background-color: var(--highlight-background);
}

.search-menu .relative-date {
    color: var(--main-text);
}

.search-menu .search-highlight {
    color: rgba(var(--main-accent)) !important;
}

.search-menu .blurb {
    color: var(--second-text);
}

.search-menu .user-results {
    color: var(--main-text) !important;
}



/*__________________________________________*/
/* 			      OTHER PAGES
/*__________________________________________*/

/* Page not found
/*____________________*/

.not-found-container {
    background-color: var(--header-background)
}

.not-found-container a {
    color: var(--main-text);
}


/* User card
/*____________________*/

#user-card .card-content {
    background-color: var(--header-background);
    color: var(--second-text);
}

#user-card .username a,
#user-card .location-and-website span,
#user-card .location-and-website a,
#user-card .desc {
    color: var(--main-text) !important;
}

#user-card .date,
#user-card h3 {
    color: var(--second-text);
}

#user-card button,
#user-card .user-badge,
#user-card .btn {
    border: none !important;
    color: var(--main-text) !important;
    background-color: var(--highlight-background) !important;
}


/* Badges
/*____________________*/

.badges-page .badges {
    padding: var(--list-padding);
    background-color: var(--content-background);
}

.badges-page .badges > h1 {
    text-align: center;
    font-size: 2em;
}

.badges-page .badge-grouping .title {
    color: var(--main-text);
    text-align: center;
    font-size: 1.5em;
}


/* Edit history
/*____________________*/

.modal {
    color: #222;
}

.modal #revision-details .fa-pencil {
    color: #222 !important;
}


/* About, FAQ, TOS, Privacy
/*_________________________*/

.static-privacy .nav-pills,
.static-tos .nav-pills,
.static-faq .nav-pills,
.about-page .nav-pills {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background-color: var(--header-background);
    padding: var(--list-padding);
    padding-bottom: 0;
    margin: 0;
}

.static-privacy .nav-pills a.active,
.static-tos .nav-pills a.active,
.static-faq .nav-pills a.active,
.about-page .nav-pills a.active {
    background-color: rgba(var(--main-accent), var(--main-alpha));
}

.static-privacy .nav-pills a,
.static-privacy .nav-pills a:hover,
.static-tos .nav-pills a,
.static-tos .nav-pills a:hover,
.static-faq .nav-pills a,
.static-faq .nav-pills a:hover,
.about-page .nav-pills a,
.about-page .nav-pills a:hover {
    border-radius: var(--border-radius);
    color: var(--main-text);
}

.static-privacy .nav-pills a:hover,
.static-tos .nav-pills a:hover,
.static-faq .nav-pills a:hover,
.about-page .nav-pills a:hover {
    background-color: var(--highlight-background);
}

.about-page .about {
    border-radius: var(--border-radius);
    padding: var(--list-padding);
    margin: var(--posts-margin) 0;
    max-width: 100% !important;
    background-color: var(--content-background);
}

.about-page .about:nth-child(2) {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-top: 0;
}

.about-page .username a {
    color: var(--main-text) !important;
}

.about-page .title {
    color: var(--second-text) !important;
}

.static-privacy .body-page,
.static-tos .body-page,
.static-faq .body-page {
    max-width: unset;
}

.static-privacy div[itemprop="mainContentOfPage"],
.static-tos div[itemprop="mainContentOfPage"],
.static-faq div[itemprop="mainContentOfPage"] {
    padding: var(--list-padding);
    background-color: var(--content-background);
    color: var(--main-text);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.static-faq h2 > a {
    color: var(--main-text);
}



/*__________________________________________*/
/* 				  CHANGE LOG
/*__________________________________________*/

/* Version 1.0.0 - 1.2.22
/*____________________

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. 

Forum post: https://community.wanikani.com/t/userstyle-transparent-theme-for-forums/17973?u=kumirei
Theme link: https://userstyles.org/styles/142733/wanikani-forums-transparent-theme

*/


/* Version 2.0.0
/*____________________

This is the start of the new version of the theme. All changes to the theme will be added below this line. 

*/


/* Version 2.0.1
/*____________________

Missed a few reply things at release
*/

#reply-control .reply-to {
    color: var(--main-text) !important;
}

.reply-area .select-kit-header {
    border: none !important;
    background-color: var(--header-background) !important;
}

.reply-area .select-kit .select-kit-body {
    background-color: transparent;
}

.reply-area .select-kit .select-kit-collection {
    background-color: var(--header-background);
}

.reply-area .select-kit .select-kit-row.is-highlighted {
    background-color: var(--highlight-background);
}

.composer-popup-container {
    display: none;
}

#reply-control.draft {
    background-color: var(--header-background);
}


/* Version 2.0.2
/*____________________

Fixed: group mentions, modal buttons, active buttons, reply cancel hover, share box, bookmarks, cakeday page.*/

.spoiled .mention-group {
    opacity: 0;
}

.spoiled[style*=" 0px;"] .mention-group,
.spoiled:hover .mention-group {
    filter: none !important;
    opacity: 1;
}

.mention-group {
    color: var(--main-grey) !important;
    background-color: var(--main-text) !important;
}

.modal .btn {
    background-color: var(--main-dark) !important;
}

.btn-primary:active,
.btn-primary.btn-active,
.btn-danger:active {
    background-color: rgba(var(--main-trans), var(--third-alpha)) !important;
    background-image: none;
}

#reply-control .save-or-cancel .cancel {
    color: var(--main-grey);
}

#reply-control .save-or-cancel .cancel:hover {
    color: rgba(var(--main-accent));
    opacity: 0.9;
}

#share-link {
    background-color: var(--header-background);
}

#share-link .reply-as-new-topic a {
    color: var(--link-color);
}

.posts .select-kit-body {
    background-color: var(--header-background) !important;
}

.bookmarked .fa-bookmark {
    color: rgba(var(--main-accent)) !important;
}

.cakeday > .nav-pills,
.cakeday > div > .nav-pills {
    background-color: var(--header-background);
    margin-bottom: 0;
    padding: var(--list-padding);
}

.cakeday .nav-pills > li a {
    color: var(--main-text);
}

.cakeday .nav-pills > li > a:hover {
    background-color: rgba(var(--main-accent), var(--second-alpha));
}

.cakeday .nav-pills > li > a.active {
    background-color: rgba(var(--main-accent), var(--main-alpha));
}

.cakeday.container > div > h2,
.cakeday.container > div .cakeday-months {
    margin-top: var(--list-padding);
    padding: var(--list-padding);
    margin-bottom: 0;
}

.cakeday > div > h2,
.cakeday .user-info-list,
.cakeday > div > div > .cakeday-months {
    background-color: var(--content-background);
}

.cakeday .user-info-list {
    padding: var(--list-padding);
}

.cakeday .user-info.small {
    background-color: var(--content-background);
    border-left: 2px solid var(--main-text);
    margin-right: var(--list-padding);
    padding-top: var(--padding-post);
    padding-left: var(--padding-post);
}

.cakeday .user-detail .name-line span * {
    color: var(--main-text);
}

.cakeday .user-info .user-detail .title {
    color: var(--second-text);
}

.cakeday .user-detail .details div {
    color: var(--second-text);
}

.cakeday .select-kit-header {
    border: none !important;
    background-color: var(--header-background) !important;
}

.cakeday .select-kit .select-kit-body {
    background-color: transparent;
}

.cakeday .select-kit .select-kit-collection {
    background-color: var(--header-background);
}

.cakeday .select-kit .select-kit-row.is-highlighted {
    background-color: var(--highlight-background);
}

.cakeday .select-kit .select-kit-row.is-selected {
    background-color: var(--highlight-background);
}

.cakeday .select-kit {
    vertical-align: top;
    margin-left: 10px;
}

.cakeday .cakeday-months .cakeday-header {
    margin-bottom: var(--list-padding);
}


/* Version 2.1.0
/*____________________

Added: way to change default image for users that don't have one */

img[width="45"][src="https://global.discourse-cdn.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"].avatar {
    background-image: var(--default-avatar);
    padding-left: 45px;
    box-sizing: border-box;
    background-size: 45px;
}


/* Version 2.1.1
/*____________________

Fixed: default avatar image sizing */

img[width="45"][src="https://global.discourse-cdn.com/wanikanicommunity/original/3X/f/d/fd4c154120954695f788402f3bcf4e616499bc2d.png"].avatar {
    background-size: cover;
}


/* Version 2.1.2
/*____________________

Fixed: Header, symbols, slider, badges */

#site-logo.logo-big {
    width: 398px;
    overflow: hidden;
}

.d-header .menu-panel .notifications .fa.d-icon-heart {
    color: var(--fa-heart-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-reply {
    color: var(--fa-reply-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-quote-right {
    color: var(--fa-quote-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-pencil {
    color: var(--fa-edit-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-envelope-o {
    color: var(--fa-pm-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-at {
    color: var(--fa-mention-color) !important;
}

.d-header .menu-panel .notifications .fa.d-icon-certificate {
    color: var(--fa-badge-star) !important;
}

.topic-body .post-info.edits .heatmap-high .fa.d-icon-pencil {
   color: var(--fa-reply-color) !important; 
}

.user-main .fa.d-icon-comment {
    color: var(--fa-reply-color) !important;
}

.user-main .fa.d-icon-certificate {
    color: var(--fa-badge-star) !important;  
}

.user-main .fa.d-icon-reply {
    color: var(--fa-reply-color) !important;
}

.user-main .fa.d-icon-heart {
    color: var(--fa-heart-color) !important;
}

.user-stream .fa.d-icon-at {
    color: var(--fa-mention-color) !important;
}

.fa.d-icon-check-square,
.topic-status .fa.d-icon-check-square-o {
    color: var(--fa-checked-box-color) !important;
}

.post-controls .has-like .fa.d-icon-d-liked {
    color: var(--fa-heart-color) !important;
}

.user-main .activity-nav .fa.d-icon-heart {
    color: var(--fa-heart-color) !important;
}

.topic-post .read-state .fa.d-icon-circle {
    color: rgba(var(--main-accent)) !important
}

.fa.d-icon-d-watching,
.fa.d-icon-d-tracking,
.fa.d-icon-d-tracking {
    color: rgba(var(--main-accent)) !important;
}

.timeline-footer-controls .fa.d-icon-reply {
    color: var(--fa-reply-color) !important;
}

.timeline-container .timeline-footer-controls > button:first-child {
    margin: 0 calc((var(--slider-width) - 2 * 38px + 15px) / 3);
}

#topic .my-likes svg {
    display: none !important;
}

.lightbox-wrapper .lightbox {
    background-color: transparent;
}

.onebox {
    background-color: transparent !important;
}

.user-info.medium.badge-info .post-link {
    color: var(--main-text);
}


/* Version 2.1.3
/*____________________

Fixed: Filled empty hearts */

.like-button .like {
    width: 36.08px;
    transform: translate(0, -2px);
}

.like-button:hover .like svg.d-icon-d-unliked,
.like-button .like svg.d-icon-d-unliked,
.like-button .like.d-hover svg.d-icon-d-unliked {
    background: var(--main-text);
    transform: rotate(-45deg) !important;
    width: 9px;
    height: 9px;
}

.like-button .like:before,
.like-button .like:after {
    content: "";
    background-color: var(--main-text);
    border-radius: 50%;
    position: absolute;
    transform: translate(-5px, 2.5px);
    width: 9px;
    height: 9px;
    
}

.like-button .like:before {
    transform: translate(-4px, 2.5px);
}


/* Version 2.1.4
/*____________________

Fixed: Fixed category names being cut short for no reason... */

.suggested-topics .badge-wrapper.bullet span.badge-category, .suggested-topics .badge-wrapper.bar span.badge-category {
    max-width: unset;
}

.badge-wrapper .badge-category .category-name {
    overflow: visible;
}

/* Version 2.1.5
/*_____________________

Fixed: Code block backgrounds */

code {
    color: #333 !important;
    background: #f8f8f8 !important;
}```
1 Like
6

OMG IT WORKS !!!:sob::sob: That sure took a while though :,D I used Stylus and did as you said…Thank you!!

WanakaniTheme
WanakaniTheme1354×691 106 KB

7

It wouldn’t install for me, so I did it manually, but how do I change the picture to Kumiko?

8

Change this URL here

image
image822×483 23.1 KB

If you want the image I have used previously then that’s this one
https://i.imgur.com/i5Ie3Vx.jpg

2 Likes
9

Since I can’t update either OP or the other post, here is the latest version.

https://pastebin.com/DiaSDjy5

2 Likes
10

The style on userstyles doesn’t work for chrome, and when I install it manually, the variable section gives me errors about a missing right bracket pretty much everywhere.

11

Yeah, I don’t know why it says that, it works just fine. That’s why I also post the CSS for people to copy.

Did you copy the CSS from the Userstyles page or the pastebin I posted? You can’t use the Userstyles CSS because it has the Userstyles.com variable placeholders instead of actual values. The pastebin in my post above is preloaded with the default values and should not throw any critical errors

1 Like
12

v2.1.8: Fixed suggested topics acting weird, the user activity page, and the user preferences page

1 Like
13

Somehow managed to fix the issue where it could not be installed on Chrome. yay

1 Like
14

I installed the style, but the sizing of the posts and headers has changed, and im not sure how to fix it. When i first installed it it went over to the side but now it’s only overlapping vertically (for want of a better word). Also installed: IME2Furigana, Wanikani Forums lessons/review status, Wanikani Forums: like counter.

image
image1306×725 1.14 MB

1 Like
15

Oh wow, that all looks really strange. Maybe it’s because I designed it on the light theme. Can you try switching to the light theme and see if that fixes it? If so I’ll have to do some work on the compatibility with other themes

1 Like
16

image
image1305×679 1.05 MB

Unfortunately that hasn’t fixed it. could it be to do with my screen resolution perhaps? i’m using chrome on a windows laptop

1 Like
17

What browser are you on? There are so many things wrong with the theme in that screenshot that I can’t help but to think that something bigger is going on

1 Like
18

Google chrome, most recent version.

1 Like
19

Ok, looks like something had happened on the userstyles site so that the settings weren’t applied correctly. Update and see if it looks better

2 Likes
20

image
image1304×682 963 KB

That Fixed it! Thank you so much, I love it!

1 Like