Wanikani screenshots 📸

WaniKani
2298

On the dashboard I have, from top to bottom I guess:

Breeze Dark theme
Real Numbers
Level Duration 2.0
Ultimate Timeline
Real Times
Expected Daily
SRS Grid
Levels by Stage
Condensed Progress Bars
Dashboard Progress Plus
Vocabulary For Wanikani

Then I also have a userstyle with superficial changes 
/* FONTS AND STUFF */
  .dashboard section.review-status ul li {
    padding: 7px !important;
    font-size: 14px !important;}
  
  .dashboard section.review-status ul li time {
    padding: 5px !important;
    font-size: 24px !important;}

  .dashboard section.review-status ul li span {
    padding: 5px !important;
    font-size: 24px !important;}

/* Vocabulary for wanikani */
.progression .lattice-single-character ul .pct90 {
    background-color: rgba(0,0,0,0) !important;}

.vocabulary-progress a[href^="/vocabulary/"] {
    color: #1cdc9a !important;}

.vocabulary-progress li {
    border-color: transparent !important;}

.vocabulary-progress ul li li[style*="border: 0px"] {
    background-color: rgba(194,111,220, 0.82) !important;}

.vocabulary-progress .lattice-multi-character li[style="height: auto;"] li[style*="border: 0px"] div:nth-child(2) {
    border-left: 1.5px solid rgba(35,38,41,1);
    border-radius: 0 !important;
}

.vocabulary-progress .lattice-multi-character li[style="height: auto;"] li div:nth-child(3)[style*="width: 50%;"] {
    border-left: 1.5px solid rgba(35,38,41,1);
    border-radius: 0 !important;
}

.vocabulary-progress .lattice-multi-character li[style="height: auto;"] li[style*="border: 0px"] div:nth-child(3)[style*="width: 100%;"] {
    border-left: 1.5px solid rgba(35,38,41,1);
    border-right: 3px solid rgba(35,38,41,1);
    border-radius: 0 !important;
    width: 93% !important;
}

/* Dashboard progress plus */
.kanji-progress li[id^="kanji"] > a.dpp-progress[data-srs-lvl="5"] {
    background-color: #d8bdef !important;}

.pct90_left {
    margin-left: 30px;
}

/* SRS grid */
.SRSGBsmall {
    display: inline !important;
    font-size: 10px !important;
}


/* TIMELINE FIX */

#timeline svg .bkgd {
    fill: #2c3136;
}

#timeline svg .grid path {
    stroke: white;
}

.review_info .inner div {
    color: rgb(240,240,240) !important;
}

#timeline svg .rad {
    fill: #53b5ee;
}

#timeline svg .kan {
    fill: #fac445;
}

#timeline svg .voc {
    fill: #43d473;
}

#timeline {
    border-bottom: none;
}

#timeline svg .resize_grip .light {
    display: none; 
}

#timeline .review_info .summary .tot {
    background-color: rgb(200,200,200);
    background-image: none; 
}
    

#timeline .review_info[data-mode="item_type"] .rad {
    background-color: #53b5ee;
    background-image: none; 
}

#timeline .review_info[data-mode="item_type"] .kan {
    background-color: #fac445;
    background-image: none; 
}

#timeline .review_info[data-mode="item_type"] .voc {
    background-color: #43d473;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp0,
#timeline .review_info[data-mode="srs_stage"] .appr {
    background-color: #1d99f3;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp1,
#timeline .review_info[data-mode="srs_stage"] .guru {
    background-color: #1cdc9a;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp2,
#timeline .review_info[data-mode="srs_stage"] .mast {
    background-color: #c9ce3b;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp3,
#timeline .review_info[data-mode="srs_stage"] .enli {
    background-color: #f67400;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp4 {
    background-color: #da4453;
    background-image: none; 
}

#timeline .review_info[data-mode="level"] .lvlgrp5 {
    background-color: #fac445;
    background-image: none; 
}

#timeline .summary div,
#timeline .summary div span,
#timeline .item_list li {
    color: black !important;
}

/* COMPACTING */

.footer-push {
    height: 0px;
}

.srs-progress {
    margin: 2px 0 !important;
}

.srs-progress:nth-last-child(5) {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.srs-progress:nth-last-child(4) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

footer,
#search,
.dashboard > .container > .row > .span12:nth-of-type(2),
.dashboard > .container > .row > .span12 > .row {
    display: none; 
}

.span12 .srs-progress:nth-last-child(4) span {
    font-size: 13px !important;
}

.span12 .srs-progress:nth-last-child(4) li {
    padding: 0 !important;
}

.span12 .srs-progress:nth-last-child(4) li br {
    display: none;
}

.span12 .srs-progress:nth-last-child(4) span:nth-of-type(1)::after {
    content: ": ";
}

.progression.dpp_compact {
    margin-top: 10px !important;
    margin-bottom: 5px !important;
}

.review-status {
    margin: 0 0 10px 0 !important;
}

.srs-progress > ul > li {
    padding-top: 7px !important;
}

.navbar-inner a {
    padding-top: 10px !important;
}

.dashboard section.review-status > ul > li {
    padding-top: 0 !important;
}

.span12 > header {
    height: 10px;
    margin: 0;
}

.vocabulary-progress h3 {
    display: none;
}

.vocabulary-progress .lattice-multi-character ul {
    margin-bottom: 0;
}

If you are actually interested in doing it yourself, then I must say that it would most likely take some fiddling, since I only bothered to make it work for my screen specifically.

5 Likes