Wanikani Dark Azure 2 Theme

actually I think I can make the box different. what colours would you like? it may not fit the theme well tho. but I can change it personally for you and you can just copy and paste the script?

Update I added some accent lines, changed colors and changed transparencies and added shadows etc…

2 Likes

Thanks for changing it! Don’t know if I’ll get used to the subtle difference between meaning/reading but what breeze dark does for example is allow users to set their own colour preferences. Might be a lot of work though?

Breeze dark somehow managed to change the text. No idea how though.


Also, c:
3

The Reading box is fine as is, but for the Meaning section could you use #ACB2B5 ? It is a light gray. Feel free to change the greyness if you think it needs tweaking. I think the reason why my muscle memory is off is because the box for meaning is typically white, but both are black. And in addition to the color, could you add that slight gradient/shine that you have in the reading box.

To clarify, by box I am referring to these long rectangular sections:

So for the meaning section just see what it looks like when it changes to that grey color I selected above?

And add the slight shine that the Reading box seems to have already:


If you click on the meaning pic I sent, you’ll notice that color is flat compared to the reading one. idk what the official term for that is.

Let me know how it goes! Thanks for working w me :slight_smile:

EDIT: While doing lessons, this grey color of the quiz button could also work for the color of the meaning box:
Gray example

Made more changes to review page added colors and other stuff

1 Like

just figured it out :slight_smile:

That’s the menu from the stylus menu. you can install this theme with stylus too and change the colors as well.

1 Like

Hellyeah! That looks awesome!

1
I did install it with stylus but I don’t see a little cog next to it?

1 Like

Ahh my bad. I didn’t realise that. I’m not sure how to add that :confused: I’m not a coder or anything I’m basicaly just editing the theme through trial and error… hence why the script is soo messy… but it works.
if you can find out how to get that gear to apear for this theme too let me know please.

Thank you

1 Like

lol ok, thanks for trying c:

1 Like

I don’t know how to do that either, but you can add settings through Userstyles.org. You just add a setting when editing the style (on Userstyles), then refer to it like this

div {
	property: "/*[[setting name]]*/";
}

To make it easier to add and change these settings you could also define CSS variables

:root {
   --foo: "/*[[setting name]]*/";
}
div {
    property: var(--foo);
}
2 Likes

Whooops I just relized the lesson screen was a blank screen. just fixed that.

Thanks :slight_smile: just added it. :+1:

1 Like

Changed the hint box color in reviews

Fixed white boarders around correct answer box.

1 Like

Not sure if I’m such a fan of the black outlines, could you remove them?

I like the black boxes tho :slight_smile: I’ll think about it. but if want to change it right away, you click the edit box on my post you can copy and paste the previews scripts before I added boxes.

Bruh, you could have at least told me which version. I went all the way back to 19 to finally get it but then I got the white box you just fixed and old timeline font. :c

1: Wading through this like molasses.
2: Got one! One left to go I think.
1

Here you go this is the latest version but with much smaller boxes.

@-moz-document regexp("https:\\/\\/www.wanikani.com.*") {
.login input, .signup input {
    color: black;
}
.login button, .signup button {
    background-color: #393e4e;
    border: none;
    color: rgb(225, 225, 225);
}
.login button:hover, .signup button:hover {
    background-color: rgb(80, 85, 101);
    color: rgb(225, 225, 225);
    border: none;
}
body {
    background-color: rgb(67, 72, 88);
    background-image: none !important;
    color: white;
}
.forum header h1 {
    color: #333333 !important;
}
.review-status, header p, .standard p, .standard ol, :not(.span6) > .forum-topics-list table td, :not(.span6) > .forum-topics-list a, .span6 .small-caps:not(.see-more), .topic-title:not(.forum-topics-list):not(.dashboard-sub-section), .icon-pushpin, br + a:not(.forum-topics-list):not(.dashboard-sub-section), .timeago:not(.forum-topics-list):not(.dashboard-sub-section) {
    color: rgb(225, 225, 225) !important;
    text-shadow: 0 1px 0 rgb(57, 62, 78) !important;
}
#chat p {
    color: #666 !important;
    text-shadow: 0 1px 0 #fff, 0 0 10px #fff !important;
}
.dashboard section.review-status ul li {
    border-left-color: rgb(47, 52, 68) !important;
}
.dashboard section.srs-progress {
    color: rgb(225, 225, 225) !important;
    box-shadow: inset 1px 10px 9px 0px rgba(0, 0, 0, 0.3) !important;
}
.account-settings-form .control-group input[class^="span6"] {
    color: rgb(225, 225, 225) !important;
}
.top-list ol a {
    color: #e1e1e1;
}
code {
    text-shadow: 0 1px 0 #fff !important;
}
.page-list, .forum-topics-list:not(.dashboard-sub-section) table tbody tr:hover {
    background-color: rgb(67, 72, 88) !important;
}
.page-list ul > li > a, .page-list ul > li > span, .account-billing-payment-information .account-subscription-payment-submit button {
    border: 1px solid rgb(67, 72, 88) !important;
    border-radius: 3px;
    background-color: #393e4e;
    text-shadow: none;
}
.page-list ul > li > a:hover, .account-billing-payment-information .account-subscription-payment-submit button:hover {
    background-color: #4f5464;
}
.page-list-header span {
    text-shadow: 0 1px 0 rgb(57, 62, 78) !important;
}
.navbar-inner {
    background-image: linear-gradient(to bottom, rgb(82, 87, 103), rgb(77, 82, 98)) !important;
    border-bottom-color: rgb(77, 82, 98) !important;
}
.navbar .nav > li > a {
    text-shadow: 0 1px 0 rgb(57, 62, 78);
    color: rgb(225, 225, 225) !important;
}
html#main .navbar .nav > li:not(.lessons):not(.reviews) > a > span:first-child, html#public-profile .navbar .nav > li:not(.lessons):not(.reviews) > a > span:first-child {
    box-shadow: 0 1px 0 rgb(57, 62, 78), inset -2px 2px 0 rgba(0, 0, 0, 0.15);
}
header nav #back-dashboard {
    box-shadow: 0 1px 0 rgb(57, 62, 78), inset -2px 2px 0 rgba(0, 0, 0, 0.15) !important;
}
#lesson #batch-items ul li span, #reviews-summary #incorrect .apprentice > ul > li, #reviews-summary #incorrect .guru > ul > li, #reviews-summary #incorrect .master > ul > li, #reviews-summary #incorrect .enlightened > ul > li, #reviews-summary #incorrect .burned > ul > li, #reviews-summary #correct .apprentice > ul > li, #reviews-summary #correct .guru > ul > li, #reviews-summary #correct .master > ul > li, #reviews-summary #correct .enlightened > ul > li, #reviews-summary #correct .burned > ul > li, #reviews-summary #review-stats[id*="review-stats-"], #lessons-summary #radicals > div > ul > li, #lessons-summary #kanji > div > ul > li, #lessons-summary #vocabulary > div > ul > li {
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
}
#lesson #batch-items ul li[data-index=quiz] span {
    background-color: #848484 !important;
}
footer:not(.pure-u-1):not(#copyright):not(#last-session-date) {
    background-image: url("https://raw.githubusercontent.com/misabiko/Wanikani-Grayish-Blueish-Dark/master/Assets/footer-bg-invert.gif");
}
#supplement-info, div #correct, div #incorrect, div #radicals, div #kanji, div #vocabulary, div #review-stats-radicals, div #review-stats-kanji, div #review-stats-vocabulary {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    border-top: 1px solid rgb(57, 62, 78);
    border-bottom: 1px solid rgb(57, 62, 78);
    border-left: 1px solid rgb(57, 62, 78);
    border-right: 1px solid rgb(57, 62, 78);
}
#item-info #all-info {
    background-color: rgb(67, 72, 88) !important;
}
#reviews-summary #incorrect .apprentice h3 span, #reviews-summary #incorrect .guru h3 span, #reviews-summary #incorrect .master h3 span, #reviews-summary #incorrect .enlightened h3 span, #reviews-summary #incorrect .burned h3 span, #reviews-summary #correct .apprentice h3 span, #reviews-summary #correct .guru h3 span, #reviews-summary #correct .master h3 span, #reviews-summary #correct .enlightened h3 span, #reviews-summary #correct .burned h3 span, #loading {
    background-color: rgb(77, 82, 98) !important;
}
#supplement-voc-breakdown ul li a, #item-info #related-items a, #item-info #related-items a:active, #item-info #related-items a:hover, #item-info #related-items a:visited, #item-info h2, #item-info #all-info:hover, .active, #kana-chart ul li span {
    color: white !important;
}
#lesson #supplement-info .radical, #lesson #supplement-info .kanji, #lesson #supplement-info .vocabulary, #item-info #related-items ul span {
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(27, 27, 27, 0.5) !important;
}
#next-btn:hover, #prev-btn:hover {
    background-color: rgba(104, 111, 125, 1) !important;
}
#kana-chart ul li:not(.empty):hover {
    background-color: rgb(87, 92, 108) !important;
    box-shadow: 3px 3px 0 rgb(67, 72, 88) !important;
}
#kana-chart ul li {
    border-right: 1px solid rgb(57, 62, 78);
}
#kana-chart ol {
    border-bottom: 1px solid rgb(57, 62, 78);
}
.forum-post-controls .pull-left, .forum-post-controls .pull-left .timeago:not(.forum-topics-list):not(.dashboard-sub-section) {
    color: #999 !important;
}
#kana-chart ol li.active {
    border-bottom: 3px solid white;
}
#kana-chart ol li:not(.active):not(.backspace):hover {
    border-bottom: 3px solid #333;
}
#additional-content ul .wrap-up-selected span, #additional-content ul .wrap-up-selected span:hover:before {
    background-color: rgb(117, 122, 138) !important;
}
.highlight-kanji {
    background-color: #dd0093 !important;
}
.highlight-radical {
    background-color: #0af !important;
}
.highlight-vocabulary {
    background-color: #9300dd !important;
}
.highlight-reading {
    background-color: #8e8e8e !important;
}
#lesson #supplement-info {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
}
#lesson #supplement-info #supplement-rad-related-kanji ul li a, #lesson #supplement-info #supplement-kan-breakdown ul li a, #lesson #supplement-info #supplement-kan-related-vocabulary ul li a, #lesson #supplement-info #supplement-voc-breakdown ul li a {
    color: white !important;
}
#lesson #supplement-info blockquote {
    background-color: rgb(81, 86, 104) !important;
    color: #EAEAEA !important;
}
#quiz #question-type.meaning {
    background-image: linear-gradient(rgb(60, 65, 81), rgb(77, 82, 98)) !important;
    border-top: 1px solid rgb(50, 55, 71) !important;
    border-bottom: 1px solid rgb(67, 72, 88) !important;
    color: rgb(255, 255, 255) !important;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1) !important;
}
#answer-form input[type=text] {
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
}
#additional-content ul li span {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    color: white !important;
}
#additional-content ul li:not(#option-audio) span:hover:before {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    color: white !important;
}
#information {
    background-color: rgb(77, 82, 98);
    box-shadow: 3px 3px 0 rgb(57, 62, 78);
}
.remove-margin-bottom {
    background: none !important;
    box-shadow: none !important;
}
#reviews #information {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
}
section[id|=level] header {
    background-color: #4d5262;
}
section[id|=level] header h2 {
    color: #eee;
}
#progress {
    background-color: rgb(77, 82, 98) !important;
}
h2, h3, li {
    text-shadow: none;
}
[class^="note-"] {
    text-shadow: none;
}
#progress time, #progress .unlocked-date span {
    text-shadow: none;
}
div.chart {
    text-shadow: none;
    color: #e1e1e1;
}
.pager li > span, .pager li > a {
    text-shadow: none;
}
[class*="-icon"] {
    box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(67, 72, 88, 0.5);
}
:not(.span6) > .forum-topics-list table td, :not(.span6) > .forum-topics-list a, .span6 .small-caps:not(.see-more), .topic-title:not(.forum-topics-list):not(.dashboard-sub-section), .icon-pushpin, br + a:not(.forum-topics-list):not(.dashboard-sub-section), .timeago:not(.forum-topics-list):not(.dashboard-sub-section) {
    text-shadow: none !important;
}
.dashboard section.review-status ul li {
    border-right: 1px solid rgb(57, 62, 78);
    border-left: 1px solid rgb(57, 62, 78);
}
.dashboard section.review-status ul li {
    border-left-color: rgb(97, 97, 97) !important;
}
.dashboard section.review-status {
    border-bottom: 1px solid rgba(79, 84, 100, 0.75);
}
html#main .additional-info, html#public-profile .additional-info {
    background-color: rgb(77, 82, 98) !important;
    color: #666666;
}
.additional-info > h3 {
    color: rgb(225, 225, 225) !important;
    text-shadow: none;
}
ul.alt-character-list li {
    text-shadow: none;
}
ul.alt-character-list a {
    color: rgb(225, 225, 225);
}
a[class*="-icon"]:hover, a:hover span[class*="-icon"] {
    text-shadow: none;
}
/* audio button */
 .audio-btn.audio-idle:before {
    color: rgb(225, 225, 225) !important;
}
.audio-btn.audio-play:before {
    color: rgb(225, 225, 225) !important;
}
/* header tab colour */
 .dropdown.levels.open > a {
    background-color: #505565 !important;
}
.dropdown.levels.open > .dropdown-menu {
    background-color: #393e4e !important;
}
.dropdown.levels.open > .dropdown-toggle {
    background-color: #505565 !important;
}
.dropdown.account.open > .dropdown-menu {
    background-color: #393e4e !important;
}
.dropdown.account.open > a {
    background-color: #505565 !important;
}
.navbar .nav li.levels.dropdown.open > .dropdown-toggle {
    background-color: #505565 !important;
}
html#main .navbar .nav li.levels.dropdown > .dropdown-toggle:hover > span:first-child {
    border-color: #d5d5d5;
}
html#main .navbar .nav li.levels.dropdown.open > .dropdown-toggle > span:first-child {
    border-color: #fff;
}
h1, h2, h3 {
    text-shadow: none;
}
/* loadingscreen lesson */
 #loading-screen {
    background-color: rgb(77, 82, 98) !important;
}
.blog.dashboard-sub-section > .see-more > a {
    color: rgb(85, 85, 85) !important;
    text-shadow: none;
}
.popover-inner {
    color: rgb(225, 225, 225);
}
#search.in .search-heading {
    text-shadow: none !important;
}
/* lesson arror */
 #lesson #supplement-nav ul li.active:before {
    border-color: transparent transparent #4d5262 transparent;
}
/* lesson arror */
 #additional-content ul li.active:before {
    border-color: transparent transparent #4d5262 transparent;
}
html#main .navbar li .dropdown-menu li > a:hover, html#main .navbar li .dropdown-menu li > a:focus, html#public-profile .navbar li .dropdown-menu li > a:hover, html#public-profile .navbar li .dropdown-menu li > a:focus {
    background-color: #505565;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #505565;
}
.table th, .table td {
    border-top: 1px solid #505565;
}
sup {
    text-shadow: none;
}
.account-subscription form .control-group input[type=text] {
    background-color: #4f5464;
    box-shadow: 2px 2px 0 #3f4453;
    color: rgb(225, 225, 225);
}
.account-subscription .account-subscription-promo button[type=submit]:hover {
    color: rgb(225, 225, 225);
    border-color: rgb(225, 225, 225);
}
.community .top-users a {
    color: rgb(225, 225, 225);
}
.community .top-users.additional-info span {
    color: #eeece7;
}
:not(.span6) > .forum-topics-list table td, :not(.span6) > .forum-topics-list a {
    color: rgb(255, 255, 255) !important;
}
html#main .additional-info, html#public-profile .additional-info {
    color: #ffffff;
}
.forum-topics-list a.topic-title, .forum-topics-list[class*="icon-"]:before {
    color: #f9fffa;
}
.dashboard section.dashboard-sub-section.forum-topics-list table tr {
    background-color: #505565;
}
.popover.review-time {
    background-color: #393e4e
}
.popover.review-time.bottom .arrow {
    border-bottom-color: #393e4e
}
.small-caps {
    text-shadow: none;
}
/* other meanings button */
 .wki_cinza {
    background-color: #4d5262;
}
.wki_button_item_label {
    opacity: 1.0;
}
.wki_item_wrapper {
    background-color: rgb(77, 82, 98);
}
#wki_mimic_button {
    background-color: rgb(67, 72, 88) !important;
    box-shadow: 3px 3px 0px rgb(57, 62, 78);
    color: rgb(255, 255, 255);
}
.wki_start_message {
    color: white;
}
.additional-info.legend span {
    -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgb(77, 82, 98);
}
/* inline frame */
 p, ol, figcaption {
    text-shadow: none !important;
}
.qtip-bootstrap {
    background-color: #434858;
}
.qtip-bootstrap .qtip-titlebar {
    border-bottom: 1px solid #393e4e;
    background-color: #434858;
}
.qtip-bootstrap {
    color: #fff;
}
.dashboard section.system-alert {
    box-shadow: 0 1px 0 #434858;
}
#additional-content-load {
    background-color: rgb(77, 82, 98);
}
ul.alt-character-list li:after {
    text-shadow: none !important;
}
/* sub */
 .account-subscription .account-subscription-plans .account-subscription-plan {
    background-color: #505565;
    border: 3px solid #393e4e;
}
.account-subscription .account-subscription-plans .account-subscription-plan .account-subscription-plan-select button[type=button].btn {
    background: #393e4e !important;
}
html#public-profile div.wall-of-shame {
    background-color: #434858;
}
html#public-profile div.wall-of-shame ul li > span:first-child {
    text-shadow: none;
}
/* profile */
 #edit_user input[type="email"], #edit_user textarea, #edit_user select {
    color: #f6f6f6;
}
#edit_user select {
    background-color: #4d5262 !important;
    border: 1px solid rgb(57, 62, 78) !important;
}
/* buttons */

/* progress fix */
 #main .progress .bar span {
    margin-right: -17px;
}
#public-profile .progress .bar span {
    margin-right: -13px;
}
#public-profile .progress .bar span:after {
    left: 100%;
    margin-left: -24px;
}
html#public-profile div.wall-of-shame h3 span {
    background-color: #4f5464;
    box-shadow: none;
}
html#public-profile header div.avatar {
    background-color: #434858;
}
.srs-levels ul li span {
    box-shadow: none;
    text-shadow: none;
}
html#public-profile header div.user-info h3.small-caps {
    text-shadow: none;
}
.additional-info h3, .small-caps {
    color: rgb(255, 255, 255);
}
/* bars */
 #public-profile .progress {
    background-color: #505565;
}
#main .progress {
    background-color: rgba(67, 72, 88, 0.46);
}
html#public-profile div.wall-of-shame .progress {
    background-image: linear-gradient(to bottom, #505565, #505565);
}
.progress .threshold {
    text-shadow: none;
    border-right: 1px solid rgb(57, 62, 78);
    box-shadow: 1px 0 0 #626980;
}
.dashboard .lattice-single-character, .dashboard section.blog a.small-caps, .dashboard section.dashboard-sub-section.forum-topics-list a.small-caps {
    background-image: none;
}
/* bar main */
 .progress .bar span.dark {
    background-color: #93dd00;
    box-shadow: 1px 1px 0 #71aa00;
    text-shadow: none;
}
.progress .bar span.dark:after {
    border-top-color: #93dd00;
}
/* search */
 #search form .search-query {
    background-color: #494d5d;
    color: #e1e1e1;
    border: 1px solid #494d5d;
    text-shadow: none;
}
#search form .search-query:focus, #search form .search-query.focused {
    border-color: #393e4e;
    box-shadow: none;
}
.icon-search {
    color: #e1e1e1;
}
/* main board */
 .dashboard section.progression {
    background-color: rgb(77, 82, 98);
}
.dashboard section.progression {
    box-shadow: 0 1px 0 #393e4e;
}
.progression h3 {
    color: #e1e1e1;
}
.dashboard section.progression hr {
    border-top-color: #4c5161;
}
hr {
    border-top: 1px solid #4c5161;
    border-bottom: 1px solid #616161;
}
.blog.dashboard-sub-section > .see-more > a {
    color: rgb(225, 225, 225) !important;
}
.popover-inner {
    color: rgb(225, 225, 225);
}
.popover .popover-title {
    background-color: rgb(57, 62, 78);
}
.popover.lattice.right .arrow {
    border-right-color: rgba(67, 72, 88, 0.55);
}
.popover.lattice {
    border: 5px solid rgba(67, 72, 88, 0.8);
}
.dashboard-sub-section h3 {
    background-color: rgba(91, 96, 113, 0.82);
}
.kotoba-table-list table tr.none-available div, .dashboard h3.small-caps.invert div.heading-symbol {
    border: 5px solid #e1e1e1;
    box-shadow: none;
}
.dashboard div.heading-symbol {
    box-shadow: none;
}
.kotoba-table-list table tr.none-available {
    background-color: #4d5262;
    color: #e1e1e1;
    text-shadow: none;
}
.dashboard section.dashboard-sub-section div.see-more {
    background-color: #4d5262;
    box-shadow: 0 1px 0 #393e4e;
}
.small-caps.invert {
    background-color: #575c6d;
    background-image: none;
}
/* wall of shame */
 .popover.srs {
    border: 5px solid rgb(97, 97, 97);
}
.popover.srs.right .arrow {
    border-right-color: rgb(97, 97, 97);
}
.progression h3 {
    color: #e1e1e1;
}
.dashboard .lattice-single-character div span {
    color: #e1e1e1;
}
/* forum */
 .forum .forum-topics-list {
    padding-top: 16px;
    background-color: #505565;
    border-radius: 3px;
    /*box-shadow: 1px 1px 0px rgb(57, 62, 78);*/
}
.forum-topics-list table th {
    text-shadow: none;
}
.forum-topics-list table {
    color: #ffffff;
}
.dashboard section.dashboard-sub-section.forum-topics-list table tr:hover {
    background-color: rgb(67, 72, 88);
}
.settings-section {
    box-shadow: none;
    background-color: rgba(80, 85, 101, 1);
}
.account-settings hr {
    border-top: 1px solid #494d5d;
}
header.global-header {
    background: #505565;
    border: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 2px 2px rgba(0, 0, 0, .25);
}
header.global-header a {
    color: #BCBCBC !important;
}
.sitemap__page–lessons span, .sitemap__page–reviews span {
    background-color: #434858 !important;
}
.sitemap–divider {
    border-color: #bcbcbc;
}
/* Levels, Radicals, Kanji, Vocabulary, Account colour */
 h1, html#public-profile div.wall-of-shame div.title, h2, h3 {
    text-shadow: none;
    color: #aaa
}
.sitemap {
    -webkit-overflow-scrolling: touch;
    background-color: #505565;
    box-sizing: border-box;
}
.sitemap--divider {
    border-top: 1px #bcbcbc50;
}
.sitemap__expandable-chunk--radicals {
    background: #00AAFF;
}
.sitemap__expandable-chunk--kanji {
    background: #FF00AA;
}
.sitemap__expandable-chunk--vocabulary {
    background: #AA00FF;
}
header.global-header a {
    color: #e1e1e1 !important;
}
header.global-header a {
    color: #aaaaaa00 !important;
}
.level-duration {
    color: #9990 !important;
    text-shadow: 0 1px 0 #ffffff;
    margin-top: -7px;
    font-size: 14px;
}
.sitemap__page--subject .sitemap__page-subtitle {
    color: rgb(255, 255, 255);
    display: inline-block;
}
header.global-header a {
    color: #e1e1e1 !important;
}
.level-duration {
    color: #9990 !important;
    text-shadow: 0 1px 0 #ffffff;
    margin-top: -7px;
    font-size: 14px;
}
.navigation-shortcut a {
    align-items: center;
    background: transparent;
    border-radius: 4px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    color: #333;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 0.875rem;
    font-weight: 300;
    justify-content: flex-start;
    line-height: 28px;
    margin: 0;
    padding: 0 14px 0 0;
    text-decoration: none;
    text-shadow: 0 1px 0 #fff0;
    transition: border-color 0.2s, background 0.2s;
}
.navigation-shortcut a span {
    background: #a0f;
    border-radius: 4px 0 0 4px;
    color: #fff;
    display: block;
    float: left;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 32px;
    margin: -2px 12px -2px -2px;
    min-width: 16px;
    padding: 0 8px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0);
}
.logo__link {
    margin: -2px 0 0;
    display: block;
    height: 46px;
    overflow: hidden;
    background: center/contain no-repeat url(https://aws1.discourse-cdn.com/wanikanicommunity/original/3X/f/b/fbf554d332d7868b4bfb73a26e42647f4fb44a2f.png);
}
.global-header {
    padding-bottom: 2px;
}
.global-header {
    padding-bottom: 2px;
}
.sitemap__pages--levels .sitemap__page--current-level a {
    border: 2px solid #0af;
    line-height: 40px;
}
h1, html#public-profile div.wall-of-shame div.title, h2, h3 {
    text-shadow: none;
    color: #0af;
}
#question #question-type.meaning {
    color: #fff;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #2e2e2e;
    background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#505565), to(#494D5D));
    background-image: -webkit-linear-gradient(top, #505565, #494D5D);
    background-image: -o-linear-gradient(top, #3c3c3c, #1a1a1a);
    background-image: linear-gradient(to bottom, #505565, #494D5D);
    background-repeat: repeat-x;
}
#question #question-type.reading {
    color: #fff;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgb(57, 62, 78);
    border-bottom: 1px solid rgb(57, 62, 78);
    border-left: 1px solid rgb(57, 62, 78);
    border-right: 1px solid rgb(57, 62, 78);
    background-color: #2e2e2e;
    background-image: -moz-linear-gradient(top, #3c3c3c, #1a1a1a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#505565), to(#494D5D));
    background-image: -webkit-linear-gradient(top, #505565, #494D5D);
    background-image: -o-linear-gradient(top, #3c3c3c, #1a1a1a);
    background-image: linear-gradient(to bottom, #505565, #494D5D);
    background-repeat: repeat-x;
}
.ui, .ui-small {
    list-style: none;
    color: rgb(255, 255, 255);
    border-radius: 6px;
    margin: 5px;
    padding: 5px;
    min-height: 30px;
    background: rgba(85, 85, 85, 0);
}
.sitemap__section-header {
    color: #0af;
}
.sitemap__expandable-chunk:before {
    background: #505565;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    content:'';
    display: block;
    height: 12px;
    left: 50%;
    margin-left: -6px;
    position: absolute;
    top: -6px;
    transform: rotate(45deg);
    width: 12px;
    z-index: -1;
}
.sitemap__expandable-chunk {
    background: #505565;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
header.global-header a {
    color: #0af !important;
}
.sitemap__section-header--subsection {
    color: #999;
    cursor: default;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: normal;
    margin: 8px 0 13px;
    padding: 0;
    text-shadow: none;
}
header.global-header a {
    color: #e1e1e1 !important;
}
.dashboard section.forecast {
    position: relative;
    padding: 15px 30px;
    background-color: #505565;
    padding: 16px 24px 24px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.dashboard section.dashboard-progress {
    padding: 15px 30px;
    background-color: #505565;
    padding: 16px 24px 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.bg-white {
    background-color: #575C6D;
}
.border-gray-100 {
    border-color: #575C6D;
}
.text-black {
    color: #00AAFF;
}
.review-forecast__day-header:after {
    position: absolute;
    margin-left: 12px;
    margin-right: 12px;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid #575C6D;
    border-width: 0 0 1px;
    content:"";
}
section.heatmaps {
    margin-top: 3px;
    padding: 15px 30px;
    background-color: #505565;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7), 2px 2px 2px rgba(0, 0, 0, 0.7) !important;
}
rect[class=" graph-rect"], rect[class=" graph-rect hover_cursor"] {
    fill: #575C6D;
}
section.heatmaps {
    margin-top: 3px;
    padding: 15px 30px;
    background-color: #505565;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 2px 2px 2px rgba(0, 0, 0, 0) !important;
}
.progress_percentages > div {
    background: #505565 !important;
}
.progress_percentages {
    display: flex;
    height: 28px;
    background: #434343;
    color: #00AAFF;
    line-height: 28px;
    margin-bottom: 0;
    border-radius: 5px;
    text-align: center;
    grid-row: 1;
    grid-column: 1 / span 3;
    margin-top: 15px;
}
.sitemap__expandable-chunk--radicals {
    background: #00AAFF;
}
.sitemap__expandable-chunk--kanji {
    background: #FF00AA;
}
.sitemap__expandable-chunk--vocabulary {
    background: #AA00FF;
}
body {
    background-color: rgb(67, 72, 88);
    background-image: none !important;
    color: #0af;
}
.additional-info h3, .small-caps {
    color: #0af;
}
.audiopronunciations-component {
    font-family: Ubuntu, Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #0af;
}
body {
    background-color: rgb(67, 72, 88);
    background-image: none !important;
    color: white;
}
.bg-gray-300 {
    background-color: #494D5D;
}
.review-forecast__bar {
    background: #0af;
}
.dashboard section.dashboard-progress, .dashboard section.forecast, .dashboard section.newbie, .dashboard section.upgrade, .dashboard section.system-alert, .dashboard section.alert-where-user-scripts-cant-ignore {
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #50556f;
    box-shadow: 0 1px 0 #505565;
}
.-mt-2 {
    margin-top: -11px;
}
.dashboard section.srs-progress {
    color: rgb(225, 225, 225) !important;
    box-shadow: inset 0px 10px 0px 0px rgba(0, 0, 0, 0.0) !important;
}
#reviews-summary #incorrect h2 {
    background-color: #FF007B;
}
#reviews-summary #correct h2 {
    background-color: #00AAFF;
}
.progress-entry.pct90 {
    background: #575C6D;
    border-radius: 0;
    border-color: #777;
    border-style: solid;
    border-width: 1px 0;
    padding-top: 3px;
    padding-bottom: 3px;
}
.popover {
    padding: 0;
    width: 236px;
    background-color: #424242;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.popover .arrow, .popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: none;
}
#timeline svg .bkgd {
    fill: #505565;
}
#lesson #supplement-nav {
    padding: 20px;
    background-color:#505565;
    font-weight: 300;
    border-top: 1px solid rgb(57, 62, 78);
    border-bottom: 1px solid rgb(57, 62, 78);
    border-left: 1px solid rgb(57, 62, 78);
    border-right: 1px solid rgb(57, 62, 78);
}
#lesson #supplement-nav ul li.active:before {
    border-color: #9300dd00 #9300dd00 rgba(0, 0, 0, 0.29) rgba(255, 255, 255, 0);
}
#additional-content ul li.active:before {
    border-color: #9300dd00 #9300dd00 rgba(0, 0, 0, 0.29) rgba(255, 255, 255, 0);
}
#additional-content ul li.active i {
    color: #393e4e;
}
#information {
    position: relative;
    display: none;
    margin: 10px;
    padding: 20px;
    background-color: #fff;
    -webkit-box-shadow: 3px 3px 0 #e1e1e1;
    -moz-box-shadow: 3px 3px 0 #e1e1e1;
    box-shadow: 3px 3px 0 #e1e1e1;
    z-index: 10;
    border-top: 1px solid rgb(57, 62, 78);
    border-bottom: 1px solid rgb(57, 62, 78);
    border-left: 1px solid rgb(57, 62, 78);
    border-right: 1px solid rgb(57, 62, 78);
}
#lesson #supplement-nav ul {
    counter-reset: menuItem;
    margin: 0;
    padding: 0;
    color:#0af;
    text-align: center;
}
#supplement-voc-breakdown ul li a, #item-info #related-items a, #item-info #related-items a:active, #item-info #related-items a:hover, #item-info #related-items a:visited, #item-info h2, #item-info #all-info:hover, .active, #kana-chart ul li span {
    color: #0af !important;
}
#additional-content ul li span {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    color: #0af !important;
}
.audio-btn.audio-idle:before {
    color: #0af !important;
}
.audio-btn.audio-idle:after {
    color: #0af !important;
}
#additional-content ul li:not(#option-audio) span:hover:before {
    background-color: rgb(77, 82, 98) !important;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    color: #0af !important;
}
#supplement-voc-breakdown ul li a, #item-info #related-items a, #item-info #related-items a:active, #item-info #related-items a:hover, #item-info #related-items a:visited, #item-info h2, #item-info #all-info:hover, .active, #kana-chart ul li span {
    color: #0af !important;
}
#kana-chart ol li {
    width: 10%;
    padding: 0.6em 0 0.4em;
    color: #0af;
    border-bottom: 3px solid transparent;
}
#kana-chart ol li, #kana-chart ul li {
    display: inline-block;
    color: #0af;
}
#kana-chart ol li.active {
border-bottom: 3px solid #393e4e;
}
#timeline {
fill:  #0af
}
#information {
   
background-color: #4D5262;
  
}
:root {
   --foo: "/*[[setting name]]*/";
}
div {
    property: var(--foo);
}
#item-info blockquote {
    margin: 1em 0 0;
    padding: 10px;
    background-color: #515668;
    color: #eee;
}
#reviews-summary #review-stats [id*="review-stats-"] {
box-shadow: 3px 3px 0 rgb(57, 62, 78);
}
#reviews-summary #review-stats [class*="pure-u-"]:first-child [id*="review-stats-"]:after {
}
#answer-form fieldset.correct button, #answer-form fieldset.correct input[type=text], #answer-form fieldset.correct input[type=text]:disabled {
    background-color: #0af !important;
}

#answer-form fieldset.incorrect button, #answer-form fieldset.incorrect input[type=text], #answer-form fieldset.incorrect input[type=text]:disabled {
    background-color: #ff0058 !important;
}

#reviews-summary #incorrect h2 {
    background-color: #ff0058;
}
  }

  #search form .search-query
  {
    background-color: #494d5d;
    color: #e1e1e1;
    border: 1px solid #494d5d;
    text-shadow: none;
    box-sizing: border-box;
    border: 1px solid #d5d5d5;
    border-color: #515668;
  }

  .icon-search
  {
    color: #666;
   }

  #reviews-summary #review-stats [id*="review-stats-"]
  {
    position: relative;
    background-color: #fff;
    text-align: center;
    -webkit-box-shadow: 3px 3px 0 #e1e1e1;
    -moz-box-shadow: 3px 3px 0 #e1e1e1;
    box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
}

  }

Update again

1 Like

Ah I see, the edges are far less pronounced, I think I could live with this.

1: Now that I’ve edited the text will it still update automatically? Also, is the text in the original post always going to be the latest version? (what the style updates)

I just edited the one I made for you, so copy and paste that. I’m pretty much done now. only like 1 or 2 things I think I would change. but If I do I will update the one I made for you.