I modified the Dark Azure 2 Theme made by SARUOU. The link to of which the original you can find here: Wanikani Dark Azure 2 Theme
For context, originally I was just editing bits of Dark Azure 2 to suit what I wanted more, as that was the theme that I liked the most (I also liked the Breeze theme, but I didn’t like the colouring.)
DISCLAIMER: I AM NOT A CODER IM JUST A GUY, the code or whatever is messy, but works fine (i think)
Most of the changes kind of undo the ‘azure’ theme, as a lot of the text is coloured blue, and I was looking for just a somewhat standard dark mode. I also tried my best to fix some of the bits that looked off. Everything is subjective though, and it is not perfect by any standards. Still, here are some preview pictures.
Here is the code; I use the Stylus add-on on firefox. Once installed, just open it up, go to write new style, give it a name, and at the bottom, click the +, and from the drop down box, swap it from ‘URL’ to 'URLs on this domain, and set the domain to 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: #52596c;
text-shadow: none;
}
.page-list ul > li > a:hover, .account-billing-payment-information .account-subscription-payment-submit button:hover {
background-color: #555;
}
.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;
}
#main footer {
background-image: url(https://raw.githubusercontent.com/misabiko/Wanikani-Grayish-Blueish-Dark/master/Assets/footer-bg-invert.gif) !important;
background-position: top !important;
}
#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 #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#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(67, 72, 88);
}
#kana-chart ol {
border-bottom: 1px solid rgb(67, 72, 88);
}
.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(67, 72, 88) !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;
}
.remove-margin-bottom {
background: none !important;
box-shadow: none !important;
}
#reviews #information {
background-color: #434858 !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(79, 84, 100);
border-left: 1px solid rgb(79, 84, 100);
}
.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(77, 82, 98);
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: #918c7f;
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 */
.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);
}
.sitemap__pages--levels .sitemap__page--current-level a {
border: 2px solid #e6e6e6;
line-height: 40px;
}
#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: #ccc;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #434858;
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;
text-shadow: 0 1px 0 #000;
}
.sitemap__expandable-chunk:before {
display: block;
height: 12px;
left: 50%;
margin-left: -6px;
position: absolute;
top: -6px;
transform: rotate(45deg);
width: 12px;
z-index: -1;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.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: #fff !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: #0af;
}
.review-forecast__day-header:after {
position: absolute;
margin-left: 12px;
margin-right: 12px;
bottom: 0;
right: 0;
left: 0;
border:none;
border-width: 0 0 1px;
content:"";
}
.border-gray-200 {
border-color: #eeeeee4d;
}
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: #0af;
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: #59c274;
}
.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 #correct h2 {
background-color: #8c0;
}
.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 #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#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;
}
#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: #e6e6e6 !important;
}
#additional-content ul li span {
background-color: rgb(67, 72, 88) !important;
box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
color: #e6e6e6 !important;
}
.audio-btn.audio-idle:before {
color: #e6e6e6 !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: #e6e6e6 !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: #e6e6e6 !important;
}
#kana-chart ol li {
width: 10%;
padding: 0.6em 0 0.4em;
color: #e6e6e6;
border-bottom: 3px solid transparent;
}
#kana-chart ol li, #kana-chart ul li {
display: inline-block;
color: #e6e6e6;
}
#kana-chart ol li.active {
border-bottom: 3px solid #393e4e;
}
#timeline {
fill: #e6e6e6
}
: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 {
}
#progress-bar #bar {
background-color: #e6e6e6;
}
#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: #e6e6e6;
}
#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;
}
item[id^=level-] {
background: #494d5d;
color: #e6e6e6;
}
element.style {
border-radius: 6px;
padding: 5px;
color: #e6e6e6;
background: #494d5d;
}
form label {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #e6e6e6
}
#timeline > h4 {
color: #e6e6e6;
}
.forecast * {
color: #e6e6e6;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: #e6e6e6;
}
#timeline .bar_style select {
height: auto;
padding: 0;
width: auto;
vertical-align: baseline;
background-color: #494d5d;
border: 1px solid #515668;
border-radius: 2px;
}
#timeline .bar_style label {
color:#2f323d
}
.progress-bar__label {
color: #e6e6e6;
}
#timeline {
margin-bottom: 0px;
border-bottom: 0px solid #d4d4d4;
color: #e6e6e6;
}
.kotoba-table-list table tr.none-available div, .dashboard h3.small-caps.invert div.heading-symbol {
border: 5px solid #111;
}
.dashboard h3.small-caps.invert div.heading-symbol i:before {
color: #111;
}
.small-caps.invert {
padding-bottom: 15px;
color: #111;
}
:not(.span6) > .forum-topics-list table td, :not(.span6) > .forum-topics-list a {
color: #e6e6e6 !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: #e6e6e6 !important;
text-shadow: 0 1px 0 rgb(57, 62, 78) !important;
}
#reviews-summary #review-stats .review-stats-value {
color: #e6e6e6
}
#reviews-summary #incorrect .apprentice h3, #reviews-summary #incorrect .guru h3, #reviews-summary #incorrect .master h3, #reviews-summary #incorrect .enlightened h3, #reviews-summary #incorrect .burned h3, #reviews-summary #correct .apprentice h3, #reviews-summary #correct .guru h3, #reviews-summary #correct .master h3, #reviews-summary #correct .enlightened h3, #reviews-summary #correct .burned h3 {
margin: 0 0 1.5em;
color: #a2a2a2;
font-weight: 400;
line-height: 1em;
border-bottom: 2px solid rgb(57, 62, 78);
}
.heatmaps .stat {
color: #e6e6e6;
}
.heatmaps .year span {
color: #e6e6e6;
}
.heatmaps .graph-label {
fill: #e6e6e6 !important;
}
.dashboard section.dashboard-sub-section a.small-caps {
color: #e6e6e6;
}
.highlight-radical {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
}
.highlight-kanji {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
}
.highlight-vocabulary {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
}
body {
color: #e6e6e6;
}
#answer-exception span {
background-color: #494d5d;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 3px 3px 0 #393e4e;
}
#answer-exception span:before {
border-color: #9300dd00 #9300dd00 rgba(0, 0, 0, 0.29) rgba(255, 255, 255, 0);
}
.user-synonyms ul li.user-synonyms-add-btn:before {
content: '+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #a2a2a2;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 3px 3px 0 #393e4e;
}
.user-synonyms ul li.user-synonyms-add-btn:hover:before {
content: '+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 3px 3px 0 #393e4e;
}
.user-synonyms ul li.user-synonyms-add-form form input {
background-color: #515668;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li.user-synonyms-add-form form button {
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 3px 3px 0 #393e4e
}
footer ul li:last-child {
padding: 10px 15px;
background-color: rgba(0, 170, 255, 0.6);
text-align: right;
}
#item-info h2 {
border-bottom: 1px solid #eeeeee4d;
}
.wk_keisei .keisei_phonetic_grid {
border-bottom: 1px solid #eeeeee4d;
}
#item-info blockquote {
color: #e6e6e6;
}
#lesson #supplement-info blockquote {
background-color: rgb(81, 86, 104) !important;
color: #e6e6e6 !important;
}
#lesson #supplement-info h2 {
border-bottom: 1px solid #eeeeee4d;
}
.standard h2 {
padding-bottom: 0.25em;
border-bottom: 1px solid #eeeeee4d;
}
#progress div.srs {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: right;
text-shadow: 0 1px 0 #e6e6e6;
}
.dashboard section.dashboard-progress {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.dashboard section.forecast {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.lessons-and-reviews__button {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.dashboard section.srs-progress ul li {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
section.heatmaps {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.dashboard section.dashboard-sub-section div.see-more {
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.dashboard-sub-section h3 {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.forum-topics-list table tbody td:last-child {
border-right: 1px solid #000;
}
.forum-topics-list table tbody td:first-child, .forum-topics-list table tbody th:first-child {
border-left: 1px solid #000;
}
.sitemap__expandable-chunk {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.sitemap__expandable-chunk--levels:before {
background: #505565;
}
.sitemap__expandable-chunk--account:before {
background: #505565;
}
.forum-topics-list table tbody tr:nth-child(2n) td hr {
margin: 0;
border-top-color: #eeeeee4d;
}
.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 {
box-shadow:none;
}
.bg-green {
background-color: #08c66c;
}
.bg-gray-400 {
background-color: #bdbdbd;
}
#answer-form fieldset.correct button {
background-color: #4a4f5f !important;
}
#answer-form fieldset.correct input[type=text], #answer-form fieldset.correct input[type=text]:disabled {
background-color: #0af !important;
}
#answer-form fieldset.correct button {
color: #000;
-webkit-text-fill-color: #000;
}
#answer-form fieldset.incorrect button {
background-color: #4a4f5f !important;
}
#answer-form fieldset.incorrect input[type=text], #answer-form fieldset.incorrect input[type=text]:disabled {
background-color: #ff0058 !important;
}
#answer-form fieldset.incorrect button {
color: #000;
-webkit-text-fill-color: #000;
}
#answer-form input[type=text] {
background-color: #515668;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#answer-form button {
background-color: #4a4f5f;
color: #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li.user-synonyms-add-btn:before {
content:'+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #a2a2a2;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li.user-synonyms-add-btn:hover:before {
content:'+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li.user-synonyms-add-form form input {
background-color: #515668;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li.user-synonyms-add-form form button {
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #a2a2a2;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):not(.user-synonyms-read-only):after {
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.individual-item .user-synonyms ul li.user-synonyms-add-form form button:hover {
background-color: #4d5262;
color: #e6e6e6;
}
.individual-item .user-synonyms ul li.user-synonyms-add-form form button[type=button]:hover {
background-color: #fffaf0;
background-color: #4d5262;
}
.user-synonyms ul li.user-synonyms-add-btn:before {
content:'+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #a2a2a2;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li.user-synonyms-add-btn:hover:before {
content:'+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li.user-synonyms-add-form form input {
background-color: #515668;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li.user-synonyms-add-form form button {
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #a2a2a2;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):not(.user-synonyms-read-only):after {
color: #929395;
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):hover:after {
background-color: #4d5262;
color: #f04;
}
.user-synonyms ul li.user-synonyms-add-form form button[type=button]:hover {
background-color: #4d5262;
color: #f04;
}
.user-synonyms ul li.user-synonyms-add-form form button:hover {
background-color: #4d5262;
color: #fff;
}
.individual-item .user-synonyms ul li:not(.user-synonyms-add-btn):not(.user-synonyms-add-form):not(.user-synonyms-read-only):hover:after {
background-color: #4d5262;
color: #f04;
}
.individual-item .alternative-meaning {
color: #e6e6e6;
}
html#main .additional-info, html#public-profile .additional-info {
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
section[id|=level] header h2 {
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.page-list ul > li > a, .page-list ul > li > span, .account-billing-payment-information .account-subscription-payment-submit button {
border: 0px solid #000 !important;
}
.additional-info.legend span {
border: 1px solid #000 !important;
}
.progress .bar {
background-image: linear-gradient(to bottom, #e6e6e6, #333);
}
/* important bit */
.progress .bar span {
display: inline-block;
position: relative;
float: right;
margin-top: -2.3em;
margin-right: 5px;
padding: 2px 6px;
background-color: #93dd00;
color: #fff;
font-size: 11px;
line-height: 1.5em;
-webkit-box-shadow: 1px 1px 0 #71aa00;
-moz-box-shadow: 1px 1px 0 #71aa00;
/* box-shadow: 1px 1px 0 #71aa00; */
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
vertical-align: middle;
border: 1px solid #000 !important;
}
.progress .bar span:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #e6e6e6;
border: 1px solid #000 !important;
}
.progress .bar span {
-webkit-box-shadow: 0px 0px 0 #71aa00;
}
.character-item {
outline: 1px solid #000 !important;
}
#reviews #information {
padding: 20px;
background-color: #434858 !important;
font-weight: 300;
border: 1px solid #000 !important;
}
#kana-chart ol {
border-bottom: 1px solid #393e4e;
}
#kana-chart ul li {
border-right: 1px solid #393e4e;
}
#last-items #last-items-list>.pure-u-1>ul>li {
border: 1px solid #000 !important;
}
#last-items #last-items-list>.pure-u-1>ul>li ul {
margin: 0;
padding: 0;
background-color:#505565;
}
#last-items #last-items-list>.pure-u-1>ul>li ul li {
color: #eee;
}
#last-items #last-items-list>.pure-u-1>ul>li ul li:nth-child(2):before, #last-items #last-items-list>.pure-u-1>ul>li ul li:nth-child(3):before, #last-items #last-items-list>.pure-u-1>ul>li ul li:last-child:before {
margin-right: 0.5em;
color: #e6e6e6;
}
.page-list ul>li.page-list-header>span {
color: #e6e6e6;
}
.page-list ul > li > a, .page-list ul > li > span, .account-billing-payment-information .account-subscription-payment-submit button {
color: #808080;
}
.kotoba-table-list table td {
border: 1px solid #000 !important;
}
#item-info blockquote {
border: 1px solid #000 !important;
}
.progress-bar__label {
color: #fff;
}
#additional-content ul li span:hover:before {
outline: 1px solid #e6e6e6 !important;
}
#additional-content ul li.disabled span:hover:before {
outline: 1px solid #000 !important;
}
#additional-content ul li.disabled span {
outline: 1px solid #000 !important;
}
#additional-content ul li span {
background-color: rgb(67, 72, 88) !important;
outline: 1px solid #000 !important;
}
#additional-content ul li span:before {
outline: 1px solid #000 !important;
}
[class^="note-"] form fieldset {
outline: 1px solid #000 !important;
background-color: #434858;
}
[class^="note-"] form fieldset button {
outline: 1px solid #000 !important;
background-color: #434858;
color: #e6e6e6;
}
#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: #ccc !important;
}
#lesson #supplement-info blockquote {
outline: 1px solid #000 !important;
background-color: #4d5262;
}
#lesson #supplement-info h2 {
color: #ccc !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 #all-info:hover, .active, #kana-chart ul li span {
color: #e6e6e6 !important;
}
.wk_keisei ul.single-character-grid li.character-item a, .wk_keisei ul.multi-character-grid li.character-item a {
outline: 1px solid #000 !important;
}
.wk_keisei .btn-group>.btn, .wk_keisei .btn-group>.dropdown-menu, .wk_keisei .btn-group>.popover {
outline: 1px solid #000 !important;
}
ul.alt-character-list a {
color: #e6e6e6;
}
h3 {
color: #ccc;
}
#lessons #information {
background-color: #434858 !important;
box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
border: 1px solid #000 !important;
}
[class^="note-"] form fieldset textarea {
-webkit-text-fill-color: #ccc
}
[class^="note-"] {
color: #ccc
}
[class*="-icon"] {
outline: 1px solid #000 !important;
}
#quiz #question-type.reading {
color: #ccc;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #434858;
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;
}
.srs .srs-up {
background-color: #af0;
color: #7ab700;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.srs .srs-down {
background-color: #ff0058;
color: #960034;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#guesses > a > *, #guesses > a::after {
background-color: #434858;
color: #e6e6e6;
}
#guesses > a::before {
background-color: #434858;
color:#a2a2a2;
}
#guesses > a.show > *, #guesses > a.show::after {
background-color: #434858;
color: #e6e6e6;
}
#guesses > a.show > *, #guesses > a.show:before {
background-color: #434858;
}
#main .progress {
background-color: rgb(77, 82, 98);
border: 1px solid #000 !important;
}
#progress {
background-color: rgb(67, 72, 88) !important;
}
#question #character.kanji {
border-top: 1px solid #000;
}
#question #character.vocabulary {
border-top: 1px solid #000;
}
#question #character.Radical {
border-top: 1px solid #000;
}
#question #character.Radicals {
border-top: 1px solid #000;
}
/* the start of most of the edits from dark azure 2 */
.subject-hint {
background-color:#52596c;
color:#e6e6e6;
padding:20px;
font-family:"Ubuntu",Helvetica,Arial,sans-serif;
line-height:1.6;
font-size:16px;
text-shadow:0 1px 0 #fff
}
.subject-hint__title {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
line-height: 1.2;
font-size: 11px;
text-shadow: 0 1px 0 #434858;
text-transform: uppercase;
color: #e6e6e6;
}
[class*="-icon"] {
outline: 1px solid #02020200 !important;
}
.component-character__meaning {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
line-height: 1;
font-size: 20px;
text-shadow: 0 1px 0 #555;
color: #fff;
}
.page-nav__item-link {
display: block;
text-decoration: none;
padding: 5px 10px;
background-color: #52596c;
color: #e6e6e6;
border: 1px solid #52596c;
-webkit-transition: color ease-out .1s,background-color ease-out .1s;
-moz-transition: color ease-out .1s,background-color ease-out .1s;
-o-transition: color ease-out .1s,background-color ease-out .1s;
transition: color ease-out .1s,background-color ease-out .1s;
}
.subject-progress {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 1.4;
font-size: 14px;
text-shadow: 0 1px 0 #292c35;
}
.components-list__item::after {
content: "+";
margin: 0 16px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
line-height: 1;
font-size: 20px;
text-shadow: 0 1px 0 #555;
color: #fff;
}
.subject-legend {
padding: 20px;
background-color: #52596c;
color: #e6e6e6;
}
.subject-legend__title {
font-size: 11px;
font-weight: 700;
color: #e6e6e6;
text-transform: uppercase;
}
.character-grid__header {
padding: 20px;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 1.4;
font-size: 28px;
text-shadow: 0 1px 0 #fff;
text-transform: capitalize;
background-color: #52596c;
color: #999;
}
h2 {
text-shadow: none;
color: #e6e6e6;
}
.page-header__title-subtext {
color: #e6e6e6;
font-size: 24.5px;
margin: 0 0 1px 10px;
}
.page-header__title {
display: flex;
flex: 1 1 auto;
align-items: flex-end;
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
line-height: 1;
font-size: 38.5px;
text-shadow: 0 1px 0 #000;
letter-spacing: -1px;
}
.extra-study {
background-color: #505565;
padding: 16px 12px 12px;
border-radius: 5px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000
}
.small-caps.invert{
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff
}
.kotoba-table-list table td {
border: 0px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
}
.readings-component {
font-family: Ubuntu,Helvetica,Arial,sans-serif;
font-size: 16px;
color: #e6e6e6;
}
body {
color: #fff
}
.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: #fff !important;
text-shadow: 0 1px 0 rgb(57, 62, 78) !important;
}
.additional-info h3, .small-caps {
color: #e6e6e6;
}
.dashboard section.dashboard-sub-section a.small-caps {
color: #e6e6e6;
}
.dashboard section.dashboard-sub-section a.small-caps:hover {
color: #fff;
}
.small-caps.invert {
text-shadow: 0 1px 0 #ddd
}
.text-blue-500 {
color: #e6e6e6
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgba(255,255,255,var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(230,230,230,var(--tw-text-opacity));
}
.sitemap__section-header {
color: #e6e6e6;
text-shadow: 0 1px 0 #000;
}
#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: #e6e6e6 !important;
}
#additional-content ul li span:hover::before {
outline: 1px solid #e6e6e6 !important;
}
#additional-content ul li span {
background-color: rgb(67, 72, 88) !important;
box-shadow: 3px 3px 0 rgb(57, 62, 78) !important;
color: #e6e6e6 !important;
}
.audio-btn.audio-idle::after {
color: #e6e6e6 !important;
}
.audio-btn.audio-idle::before {
color: #e6e6e6 !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 #all-info:hover, .active, #kana-chart ul li span {
color: #e6e6e6 !important;
}
#item-info blockquote {
color: #e6e6e6;
}
[class^="note-"] form fieldset button {
outline: 1px solid #000 !important;
background-color: #434858;
color: #e6e6e6;
}
#reviews-summary #review-stats .review-stats-value {
color: #e6e6e6;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: #222;
}
#lesson #supplement-nav ul {
color: #e6e6e6;
text-align: center;
}
.text-black {
color: #e6e6e6;
}
.bg-gray-700 {
--tw-bg-opacity: 0.5;
background-color: rgba(120,120,120,var(--tw-bg-opacity));
}
#answer-form fieldset.correct input[type="text"], #answer-form fieldset.correct input[type="text"]:disabled {
background-color: #8c0 !important;
}
/* vocabulary backlight */
.bg-\[\#f1d6ff\] {
--tw-bg-opacity: 1;
background-color: rgba(200,81,251,var(--tw-bg-opacity));
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
color: #e6e6e6;
}
#answer-exception span {
background-color: #494d5d;
color: #e6e6e6;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
box-shadow: 3px 3px 0 #393e4e;
}
/* kanji backlight */
.bg-\[\#f8d8ef\] {
--tw-bg-opacity: 1;
background-color: rgba(225,0,140,var(--tw-bg-opacity));
}
#answer-form input[type="text"]::placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight:400;
text-shadow: none;
-webkit-transition: color 0.15s linear;
-moz-transition: color 0.15s linear;
-o-transition: color 0.15s linear;
transition: color 0.15s linear;
}
#answer-form input[type="text"]:focus::placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
text-shadow: none;
-webkit-transition: color 0.15s linear;
-moz-transition: color 0.15s linear;
-o-transition: color 0.15s linear;
transition: color 0.15s linear;
}
#quiz #question-type.reading {
color: #fff;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #434858;
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, #353535, #000);
background-repeat: repeat-x;
}
#lesson #supplement-nav {
padding: 20px;
background-color: #24293a;
font-weight: 300;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.bg-gray-300 {
background-color: #4d5262;
}
.bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgba(189,189,189,var(--tw-bg-opacity));
}
#quiz #question-type.meaning {
background-image: linear-gradient(rgb(238, 238, 238), rgb(225, 225, 225)) !important;
border-top: 1px solid rgb(50, 55, 71) !important;
border-bottom: 1px solid rgb(67, 72, 88) !important;
color: rgb(64, 64, 64) !important;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1) !important;
}
/* backlight vocabulary part 2 fuck you */
.highlight-vocabulary {
background-color: #C851FB !important;
}
.highlight-vocabulary {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 -0px 0 rgba(0,0,0,0.2) inset;
}
/* backlight kanji part 2 sussy balls */
.highlight-kanji {
background-color: #E1008C !important;
}
.highlight-kanji {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 0px 0 rgba(0,0,0,0.2) inset;
}
#lesson #supplement-info blockquote {
color: #e6e6e6 !important;
}
/* backlight radical part 2 */
.highlight-radical {
background-color: #0af !important;
}
.highlight-radical {
cursor: help;
padding: 1px 4px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
-moz-box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
box-shadow: 0 0px 0 rgba(0,0,0,0.2) inset;
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(255,255,255,var(--tw-text-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgba(150,150,150,var(--tw-bg-opacity));
}
.reading-highlight, .meaning-highlight, .vocabulary-highlight, .kanji-highlight, .radical-highlight {
cursor: help;
padding: 1px 4px;
color: #fff;
border-radius: 3px;
box-shadow: 0 0px 0 rgba(0,0,0,0.2) inset;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
white-space: nowrap;
position: relative;
}
.user-synonyms__form-input {
padding: 4px 6px;
color: #333;
background-color: #33323a;
border-radius: 4px;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear .2s,box-shadow linear .2s;
-moz-transition: border linear .2s,box-shadow linear .2s;
-o-transition: border linear .2s,box-shadow linear .2s;
transition: border linear .2s,box-shadow linear .2s;
outline: 0;
}
select {
width: 220px;
border: 1px solid #ccc;
background-color: #33323a;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: #33323a;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.user-note__link, .user-note__link:visited {
color: #a6a6a6;
}
.user-note__link:hover {
color: #e6e6e6;
}
.subject-progress__button {
color: #0000;
}
/* highlights part 3... why... */
.highlight-reading {
background-color: #35353a !important;
}
.reading-highlight {
background-color: #35353a;
background-image: linear-gradient(to bottom, #35353a, #35353a);
}
.kanji-highlight {
background-color: #E1008C;
background-image: linear-gradient(to bottom, #E1008C, #E1008C);
}
.radical-highlight {
background-color: #0af;
background-image: linear-gradient(to bottom, #0af, #0af);
}
.vocabulary-highlight {
background-color: #C851FB;
background-image: linear-gradient(to bottom, #C851FB, #C851FB);
}
.user-note__input {
width: 100%;
border: none;
background-color: #757479;
resize: none;
outline: none;
font-family: "Ubuntu",Helvetica,Arial,sans-serif;
line-height: 1.4;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
padding: 8px;
}
#question #question-type.reading {
color: #fff;
text-shadow: -1px -1px 0 rgba(255, 255, 255, .1);
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background-color: #434858;
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, #353535, #000);
background-repeat: repeat-x;
}
.user-synonyms ul li.user-synonyms-add-btn:hover::before {
content: '+ ADD SYNONYM';
margin-right: 0.5em;
padding: 0.15em 0.3em;
background-color: #4d5262;
color: #fff;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#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, #EEE, #E1E1E1);
background-repeat: repeat-x;
}
#question #question-type.reading {
color: #fff;
text-shadow: -1px -1px 0 #000;
}
#question #question-type.meaning {
color: #404040;
text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
}
/* progress bar stuff */
.progress .bar {
background-image: linear-gradient(to bottom, #555, #333);
}
#main .progress {
background-color: rgb(200, 200, 200);
border: 1px solid #000 !important;
}
.page-list ul > li.page-list-header > span {
color: #e6e6e6;
}
.bg-\[\#d6f1ff\] {
--tw-bg-opacity: 1;
background-color: rgba(0,170,255,var(--tw-bg-opacity));
}
/* bonus */
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(50,50,50,var(--tw-bg-opacity));
}
.community-banner {
background-color: #505565;
border: 1px solid #000
}
.community-banner__link {
color: #fff;
}
.community-banner__link:hover {
color: #fff
}
Note: it is unlikely I will be making any edits based on feedback unless I feel like making the said edit for myself. Hopefully it works well for you. Good luck all, and happy new year.
Edit - Updated to include community banner added to the bottom of the home page.
.
