Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WaniKani: Enhanced Mobile CSS userscript
// ==UserScript==
// @name WaniKani: Enhanced Mobile CSS
// @namespace http://tryforceful.com/
// @version 0.3
// @description WaniKani: Enhanced Mobile CSS
// @author tryforceful
// @match http://www.wanikani.com/review
// @match https://www.wanikani.com/review
// @match http://www.wanikani.com/review/*
// @match https://www.wanikani.com/review/*
// @match http://www.wanikani.com/lesson
// @match https://www.wanikani.com/lesson
// @match http://www.wanikani.com/lesson/*
// @match https://www.wanikani.com/lesson/*
// @grant GM_addStyle
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(`
@media (max-width:767px) {
body {
font-size: 100%;
}
.audio-btn {
font-size: 26px;
}
#summary-button {
display: none;
top: 10px;
left: 20px;
font-size: 100%
}
#skip-button {
font-size: 1.5em;
}
#additional-content ul li:not(#option-audio) span:hover:before {
content: none /*attr(title)*/
}
#additional-content ul li span {
padding: 20px 10px;
font-size: 120%
}
#item-info {
font-size: 100%
}
#item-info #item-info-col1 section, #item-info #item-info-col2 section {
margin-bottom: 1.5em /*changed*/
}
#item-info #item-info-col1 {
padding-bottom: 1.5em /*changed*/
}
#item-info #item-info-col2 {
padding-left: 0 /*changed*/
}
#answer-form button {
font-size: 1.5em
}
#answer-form fieldset.correct button,
#answer-form fieldset.correct input[type=text],
#answer-form fieldset.correct input[type=text]:disabled,
#answer-form fieldset.incorrect button,
#answer-form fieldset.incorrect input[type=text],
#answer-form fieldset.incorrect input[type=text]:disabled {
text-shadow: 2px 2px 0 rgba(0, 0, 0, .2)
}
#answer-form input[type=text] {
font-size: 1.5em
}
#answer-exception {
top: 3.5em; /*changed*/
font-size: 1em; /*changed*/
}
#kana-chart {
font-size: 100%
}
#last-items {
font-size: 100%
}
#last-items #last-items-list>ul>li {
margin: 0 6.6666666667px 6.6666666667px 0
}
.screen-overlay .btn-set li:not(:last-child) {
margin-right: 0;
margin-bottom: 0.5em;
}
.screen-overlay .btn-set li {
display: block;
}
.screen-overlay .btn-set {
font-size: 1.3em;
text-align: center;
}
#reviews #question #character,
#lessons #quiz #character,
#lessons header #main-info.vocabulary #character {
font-size: 15vw;
padding-top: 2vw;
font-weight: 400;
line-height: 25vw
}
#question #character.kanji,
#quiz #character.kanji {
text-shadow: 5px 5px 0 #dd0093
}
#question #character.radical,
#quiz #character.radical {
text-shadow: 5px 5px 0 #0093dd
}
#question #character.radical img,
#quiz #character.radical img {
width: 15vw;
height: 15vw
}
#question #character.vocabulary,
#quiz #character.vocabulary {
font-size: 15vw;
line-height: 25vw;
text-shadow: 5px 5px 0 #9300dd
}
#question #question-type h1,
#quiz #question-type h1 {
font-size: 1.3em
}
#reviews footer #hotkeys,
#reviews footer #report-errors
#lessons footer #hotkeys,
#lessons footer #report-errors
{
display: none
}
#additional-content ul .wrap-up-selected span,
#additional-content ul .wrap-up-selected span:hover:before {
background-color: #3c3c3c !important;
color: #eee;
}
#reviews-summary,
#lessons-summary {
font-size: 100%
}
#reviews-summary header h1,
#lessons-summary header h1 {
margin: 20px 0 0;
padding-top: 0px
}
#reviews-summary header nav,
#lessons-summary header nav {
position: relative
}
#reviews-summary header nav #start-session,
#lessons-summary header nav #start-session {
float: right
}
#reviews-summary #correct h2,
#lessons-summary #correct h2,
#reviews-summary #correct>div,
#lessons-summary #correct>div,
#reviews-summary #incorrect h2,
#lessons-summary #incorrect h2,
#reviews-summary #incorrect>div,
#lessons-summary #incorrect>div {
padding: 10px
}
#reviews-summary #review-stats [class*=pure-u-]:first-child [id*=review-stats-]:after,
#lessons-summary #lesson-stats [class*=pure-u-]:first-child [id*=lesson-stats-]:after {
top: 20%;
right: -1.4em;
border-width: 1.5em 0 1.5em 1.5em
}
#reviews-summary #review-stats [class*=pure-u-]:first-child [id*=review-stats-] .review-stats-value,
#lessons-summary #lesson-stats [class*=pure-u-]:first-child [id*=lesson-stats-] .lesson-stats-value {
font-size: 1.5em;
line-height: 1em
}
#reviews-summary #review-stats [id*=review-stats-] div,
#lessons-summary #lesson-stats [id*=lesson-stats-] div {
padding-left: 10px;
padding-right: 10px
}
#reviews-summary #review-stats [id*=review-stats-] div:first-child,
#lessons-summary #lesson-stats [id*=lesson-stats-] div:first-child {
padding: 10px 10px 0
}
#reviews-summary #review-stats [id*=review-stats-] div:last-child,
#lessons-summary #lesson-stats [id*=lesson-stats-] div:last-child {
padding: 0 10px 10px
}
#reviews-summary #review-stats .review-stats-value,
#lessons-summary #lesson-stats .lesson-stats-value {
font-size: 1.5em
}
#header-buttons {
font-size: 16px;
}
#lessons #stats {
font-size: 16px; /*changed*/
}
#lesson #supplement-nav ul li {
font-size: 20px;
}
#lessons > div
{
height: 100vh;
}
#lessons > div,
#lessons #lesson {
display: flex;
flex-direction: column;
}
#lessons #lesson,
#lessons #lesson #supplement-info {
flex: 1;
}
#supplement-voc-reading div[lang=ja]:first-of-type {
font-size: 22px;
}
#supplement-voc-synonyms {
font-size: 20px;
}
#supplement-voc-context-sentence .context-sentence-group p[lang=ja] {
font-size: 20px;
color: #a0f;
}
#lessons #batch-items ul li span,
#lessons #batch-items ul li[data-index=quiz] span i {
line-height: 2em;
}
#stats {
padding: 5px 10px;
font-size: 16px /*changed*/
}
#stats i {
margin-right: .25em;
margin-left: .4em
}
.srs {
font-size: 1.5em;
top: 0.55em;
text-align: left;
left: 0.3em;
position: fixed;
}
.srs > div {
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
/*.srs-down {
border: 1px solid #99001f;
}
.srs-up {
border: 1px solid #99001f;
}*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
`);
})();
@media (max-width:767px) {
body {
font-size: 100%;
}
.audio-btn {
font-size: 26px;
}
#summary-button {
display: none;
top: 10px;
left: 20px;
font-size: 100%
}
#skip-button {
font-size: 1.5em;
}
#additional-content ul li:not(#option-audio) span:hover:before {
content: none /*attr(title)*/
}
#additional-content ul li span {
padding: 20px 10px;
font-size: 120%
}
#item-info {
font-size: 100%
}
#item-info #item-info-col1 section, #item-info #item-info-col2 section {
margin-bottom: 1.5em /*changed*/
}
#item-info #item-info-col1 {
padding-bottom: 1.5em /*changed*/
}
#item-info #item-info-col2 {
padding-left: 0 /*changed*/
}
#answer-form button {
font-size: 1.5em
}
#answer-form fieldset.correct button,
#answer-form fieldset.correct input[type=text],
#answer-form fieldset.correct input[type=text]:disabled,
#answer-form fieldset.incorrect button,
#answer-form fieldset.incorrect input[type=text],
#answer-form fieldset.incorrect input[type=text]:disabled {
text-shadow: 2px 2px 0 rgba(0, 0, 0, .2)
}
#answer-form input[type=text] {
font-size: 1.5em
}
#answer-exception {
top: 3.5em; /*changed*/
font-size: 1em; /*changed*/
}
#kana-chart {
font-size: 100%
}
#last-items {
font-size: 100%
}
#last-items #last-items-list>ul>li {
margin: 0 6.6666666667px 6.6666666667px 0
}
.screen-overlay .btn-set li:not(:last-child) {
margin-right: 0;
margin-bottom: 0.5em;
}
.screen-overlay .btn-set li {
display: block;
}
.screen-overlay .btn-set {
font-size: 1.3em;
text-align: center;
}
#reviews #question #character,
#lessons #quiz #character,
#lessons header #main-info.vocabulary #character {
font-size: 15vw !important;
padding-top: 2vw !important;
font-weight: 400 !important;
line-height: 25vw !important;
}
#lessons header #main-info.vocabulary #character {
padding-top: 4vw;
}
#question #character.kanji,
#quiz #character.kanji {
text-shadow: 5px 5px 0 #dd0093
}
#question #character.radical,
#quiz #character.radical {
text-shadow: 5px 5px 0 #0093dd
}
#question #character.radical img,
#quiz #character.radical img {
width: 15vw;
height: 15vw
}
#question #character.vocabulary,
#quiz #character.vocabulary {
font-size: 15vw;
line-height: 25vw;
text-shadow: 5px 5px 0 #9300dd
}
#question #question-type h1,
#quiz #question-type h1 {
font-size: 1.3em
}
#reviews footer #hotkeys,
#reviews footer #report-errors
#lessons footer #hotkeys,
#lessons footer #report-errors
{
display: none
}
#additional-content ul .wrap-up-selected span,
#additional-content ul .wrap-up-selected span:hover:before {
background-color: #3c3c3c !important;
color: #eee;
}
#reviews-summary,
#lessons-summary {
font-size: 100%
}
#reviews-summary header h1,
#lessons-summary header h1 {
margin: 20px 0 0;
padding-top: 0px
}
#reviews-summary header nav,
#lessons-summary header nav {
position: relative
}
#reviews-summary header nav #start-session,
#lessons-summary header nav #start-session {
float: right
}
#reviews-summary #correct h2,
#lessons-summary #correct h2,
#reviews-summary #correct>div,
#lessons-summary #correct>div,
#reviews-summary #incorrect h2,
#lessons-summary #incorrect h2,
#reviews-summary #incorrect>div,
#lessons-summary #incorrect>div {
padding: 10px
}
#reviews-summary #review-stats [class*=pure-u-]:first-child [id*=review-stats-]:after,
#lessons-summary #lesson-stats [class*=pure-u-]:first-child [id*=lesson-stats-]:after {
top: 20%;
right: -1.4em;
border-width: 1.5em 0 1.5em 1.5em
}
#reviews-summary #review-stats [class*=pure-u-]:first-child [id*=review-stats-] .review-stats-value,
#lessons-summary #lesson-stats [class*=pure-u-]:first-child [id*=lesson-stats-] .lesson-stats-value {
font-size: 1.5em;
line-height: 1em
}
#reviews-summary #review-stats [id*=review-stats-] div,
#lessons-summary #lesson-stats [id*=lesson-stats-] div {
padding-left: 10px;
padding-right: 10px
}
#reviews-summary #review-stats [id*=review-stats-] div:first-child,
#lessons-summary #lesson-stats [id*=lesson-stats-] div:first-child {
padding: 10px 10px 0
}
#reviews-summary #review-stats [id*=review-stats-] div:last-child,
#lessons-summary #lesson-stats [id*=lesson-stats-] div:last-child {
padding: 0 10px 10px
}
#reviews-summary #review-stats .review-stats-value,
#lessons-summary #lesson-stats .lesson-stats-value {
font-size: 1.5em
}
#header-buttons {
font-size: 16px;
}
#lessons #stats {
font-size: 16px; /*changed*/
}
#lesson #supplement-nav ul li {
font-size: 20px;
}
#lessons > div
{
height: 100vh;
}
#lessons > div,
#lessons #lesson {
display: flex;
flex-direction: column;
}
#lessons #lesson,
#lessons #lesson #supplement-info {
flex: 1;
}
#supplement-voc-reading div[lang=ja]:first-of-type {
font-size: 22px;
}
#supplement-voc-synonyms {
font-size: 20px;
}
#supplement-voc-context-sentence .context-sentence-group p[lang=ja] {
font-size: 20px;
color: #a0f;
}
#lessons #batch-items ul li span,
#lessons #batch-items ul li[data-index=quiz] span i {
line-height: 2em;
}
#stats {
padding: 5px 10px;
font-size: 16px /*changed*/
}
#stats i {
margin-right: .25em;
margin-left: .4em
}
.srs {
font-size: 1.5em;
top: 0.55em;
text-align: left;
left: 0.3em;
position: fixed;
}
.srs > div {
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
/*.srs-down {
border: 1px solid #99001f;
}
.srs-up {
border: 1px solid #99001f;
}*/
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
.deprecated-content-switch {
display: block;
position: absolute;
top: 4px;
right: 0;
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
color: #999;
text-decoration: none;
line-height: 15px;
padding-right: 60px
}
@media (min-width: 481px) {
.deprecated-content-switch+h2 {
margin-top: 0 !important
}
}
@media (max-width: 767px) {
.deprecated-content-switch {
top: 0
}
}
@media (max-width: 480px) {
.deprecated-content-switch {
position: relative;
margin-bottom: 2em;
padding-bottom: 10px;
border-bottom: 1px solid #eee
}
}
.deprecated-content-switch__track {
vertical-align: middle;
display: block;
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
width: 50px;
height: 16px;
border-radius: 3px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
background: #93dd00;
transition: background-color 0.2s ease-out
}
@media (max-width: 480px) {
.deprecated-content-switch__track {
margin-top: -13px
}
}
.deprecated-content-switch__toggle {
position: absolute;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
height: 19px;
width: 19px;
top: -3px;
left: 32px;
transition: left 0.2s ease-out
}
.deprecated-content-switch--off .deprecated-content-switch__track {
background: #ccc
}
.deprecated-content-switch--off .deprecated-content-switch__toggle {
right: auto;
left: -3px
}
@media (max-width: 480px) {
.col2 .deprecated-content-switch {
margin-top: 3em
}
}
.highlight-kanji {
background-color: #ffd6f1
}
.highlight-radical {
background-color: #d6f1ff
}
.highlight-vocabulary {
background-color: #f1d6ff
}
.highlight-reading {
background-color: #555;
color: #fff;
text-shadow: 0 1px 0 #000
}
.highlight-meaning {
background-color: #eee
}
[class^="note-"] {
cursor: pointer;
position: relative
}
[class^="note-"] form {
cursor: text;
position: relative
}
[class^="note-"] form fieldset {
margin: 0;
padding: 0;
background-color: #f6f6f6;
border: none
}
[class^="note-"] form fieldset button {
cursor: pointer;
float: right;
margin: 0.5em;
padding: 0.5em;
background-color: #a2a2a2;
color: #f6f6f6;
font-size: 15px;
border: none
}
[class^="note-"] form fieldset button:disabled {
cursor: not-allowed;
opacity: 0.5;
filter: alpha(opacity=50)
}
[class^="note-"] form fieldset button[type=submit] {
margin-right: 0
}
[class^="note-"] form fieldset textarea {
-webkit-appearance: none;
-webkit-text-fill-color: #a2a2a2;
display: block;
width: 100%;
padding: 0.5em;
background-color: transparent;
font-size: 15px;
font-family: "Source Sans Pro", sans-serif;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
resize: none;
opacity: 1 !important;
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
-o-transition: height 0.2s;
transition: height 0.2s
}
[class^="note-"] form fieldset textarea:focus {
outline: none
}
.error-note-button {
background-color: #cc0029 !important;
color: #fff !important
}
.processing-note {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
background-image: url("https://cdn.wanikani.com/assets/v03/loading-100x100-3f623bf48901ac45b1f40168644dbc901efd41b633b9f6d95a5d3ecda3f2111d.gif");
background-position: center center;
background-repeat: no-repeat;
background-size: auto 50%;
z-index: 100
}
.counter-note {
float: right;
margin: 0.5em;
padding: 0.5em;
font-family: "Source Sans Pro", sans-serif;
font-size: 15px;
line-height: 1em
}
.counter-note i {
margin-left: 0.25em
}
#timeout {
display: none;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
overflow: hidden;
z-index: 1000
}
#timeout a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
color: #fff;
text-decoration: none;
text-shadow: 2px 2px 0 #000
}
#timeout #timeout-idle, #timeout #timeout-session-end {
display: none
}
#timeout #timeout-idle i, #timeout #timeout-session-end i {
font-size: 192px;
text-shadow: 5px 5px 0 #000
}
[lang=ja] {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif
}
body {
background-color: #eee;
font-family: "Source Sans Pro", sans-serif
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll !important
}
#lessons {
position: relative
}
#header-buttons {
position: absolute;
top: 13.3333333333px;
left: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
z-index: 100
}
#header-buttons a, #header-buttons a:hover {
padding: 0 0.25em;
color: #fff;
text-decoration: none;
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s
}
#header-buttons a:hover {
opacity: 1;
filter: alpha(opacity=100)
}
#header-buttons ul, #header-buttons li {
margin: 0;
padding: 0;
display: inline-block
}
#header-buttons li:last-child .icon-angle-right {
margin-left: 0.5em
}
.disable-scrolling {
overflow: hidden !important;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.radical {
background-color: #0af
}
.kanji {
background-color: #f0a
}
.vocabulary {
background-color: #a0f
}
#additional-content {
position: relative;
margin: 0 10px;
z-index: 10
}
#additional-content ul {
margin: 0 0 5px;
padding: 0
}
#additional-content ul li {
position: relative;
display: inline-block;
width: 33.3%;
text-align: center
}
#additional-content ul li:last-child span {
margin-right: 0
}
#additional-content ul li.active:before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -10px;
left: 50%;
margin-left: -21px;
border-style: solid;
border-width: 0 16px 16px 16px;
border-color: transparent transparent #fff transparent;
z-index: 10
}
#additional-content ul li.active span:hover:before {
color: #000
}
#additional-content ul li.active i {
color: #000
}
#additional-content ul li.disabled {
opacity: 0.5;
filter: alpha(opacity=50)
}
#additional-content ul li.disabled span {
cursor: default
}
#additional-content ul li span {
cursor: pointer;
position: relative;
display: block;
margin-right: 10px;
padding: 10px;
background-color: #fbfbfb;
color: #888888;
text-decoration: none;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#additional-content ul li:not(#option-audio) span:hover:before {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
content: attr(title);
background-color: #fbfbfb;
letter-spacing: -1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#additional-content .icon-hkana-list:before {
content: "\3072";
font-weight: bold;
line-height: 1em
}
#answer-exception {
position: absolute;
width: 100%;
top: 2.9em;
left: 0;
text-align: center;
z-index: 100
}
#answer-exception.answer-exception-form {
top: auto;
bottom: -2em
}
#answer-exception span {
display: inline-block;
padding: 0.5em 0.7em 0.6em;
background-color: #a2a2a2;
color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#answer-exception span:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -7px;
left: 50%;
margin-left: -13px;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #a2a2a2 transparent
}
#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
}
#information #information-offline {
display: none;
text-align: center
}
#information #information-offline i {
margin-right: 0.2em
}
#item-info blockquote {
margin: 1em 0 0;
padding: 10px;
background-color: #fbfbfb;
color: #888888
}
#item-info h2 {
margin: 0 0 0.5em;
padding-bottom: 0.5em;
color: #888888;
font-size: 1.125em;
font-weight: normal;
letter-spacing: -1px;
line-height: 1em;
border-bottom: 1px solid #eee;
-webkit-box-shadow: 1px 10px 9px -6px rgba(0, 0, 0, 0.025);
-moz-box-shadow: 1px 10px 9px -6px rgba(0, 0, 0, 0.025);
box-shadow: 1px 10px 9px -6px rgba(0, 0, 0, 0.025)
}
#item-info h3 {
margin: 0;
padding: 0 0 1em;
font-size: 0.8125em;
line-height: 1em
}
#item-info #item-info-col1, #item-info #item-info-col2 {
font-weight: 400
}
#item-info #item-info-col1 section, #item-info #item-info-col2 section {
margin-bottom: 40px
}
#item-info #item-info-col1 section:last-child, #item-info #item-info-col2 section:last-child {
margin-bottom: 0
}
#item-info #item-info-col2 {
position: relative;
padding-left: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#item-info [class*="highlight-"] {
padding: 0 0.3em 0.15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
#item-info #item-info-context-sentences {
display: none
}
#item-info #all-info {
cursor: pointer;
display: none;
margin-top: 20px;
padding: 10px;
background-color: #fbfbfb;
color: #888888;
text-align: center
}
#item-info #all-info:hover {
color: #000
}
#item-info #all-info i {
margin-right: 0.3em
}
#item-info #related-items a, #item-info #related-items a:active, #item-info #related-items a:hover, #item-info #related-items a:visited {
color: #000;
font-weight: 400;
text-decoration: none
}
#item-info #related-items ul {
margin: 0;
padding: 0
}
#item-info #related-items ul img {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: baseline;
margin-bottom: -0.1em;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2))
}
#item-info #related-items ul span {
display: inline-block;
margin-right: 0.3em;
width: 1.8em;
height: 1.8em;
color: #fff;
line-height: 1.7em;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5)
}
#item-info #related-items ul li {
display: inline-block;
position: relative;
margin-bottom: 0.5em;
font-weight: 300
}
#item-info #related-items ul li:after {
content: "+";
margin: 0 0.8em;
color: #d5d5d5;
font-weight: bold
}
#item-info #related-items ul li:last-child:after {
content: none
}
#item-info .context-sentence-group {
margin-bottom: 1rem
}
#item-info .context-sentence-group p {
margin: 0;
padding: 0;
line-height: 1.6em
}
#answer-exception {
position: absolute;
width: 100%;
top: 2.9em;
left: 0;
text-align: center;
z-index: 100
}
#answer-exception span {
display: inline-block;
padding: 0.5em 0.7em 0.6em;
background-color: #a2a2a2;
color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#answer-exception span:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -7px;
left: 50%;
margin-left: -13px;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #a2a2a2 transparent
}
.audio-btn {
margin: 0 0 0 0.5em;
padding: 0;
background-color: transparent;
font-family: FontAwesome;
border: none;
outline: none
}
.audio-btn.audio-play:before {
content: '\f028';
color: #000
}
.audio-btn.audio-idle:before {
content: '\f026';
color: #a2a2a2
}
#option-audio .audio-btn {
cursor: default;
margin: 0;
padding: 0
}
footer#lessons-hotkey-footer {
position: fixed;
bottom: 0;
right: 0;
z-index: 0
}
footer#lessons-hotkey-footer #hotkeys, footer#lessons-hotkey-footer #report-errors {
cursor: pointer;
display: inline-block;
padding: 10px;
color: #888888;
font-size: 0.8125em;
vertical-align: bottom
}
footer#lessons-hotkey-footer #hotkeys a, footer#lessons-hotkey-footer #report-errors a {
color: #888888;
text-decoration: none;
-webkit-transition: color 0.15s linear;
-moz-transition: color 0.15s linear;
-o-transition: color 0.15s linear;
transition: color 0.15s linear
}
footer#lessons-hotkey-footer #hotkeys a:hover, footer#lessons-hotkey-footer #report-errors a:hover {
color: #000
}
#answer-form {
z-index: 10
}
#answer-form form {
position: relative
}
#answer-form button {
position: absolute;
padding: 0 20px;
top: 10px;
right: 10px;
height: 3em;
background-color: #fff;
font-size: 1.5em;
line-height: 1em;
border: none
}
#answer-form fieldset {
position: relative;
margin: 0;
padding: 10px;
border: none
}
#answer-form fieldset.correct button, #answer-form fieldset.correct input[type=text], #answer-form fieldset.correct input[type=text]:disabled, #answer-form fieldset.incorrect button, #answer-form fieldset.incorrect input[type=text], #answer-form fieldset.incorrect input[type=text]:disabled {
color: #fff;
-webkit-text-fill-color: #fff;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: background-color 0.1s ease-in;
-moz-transition: background-color 0.1s ease-in;
-o-transition: background-color 0.1s ease-in;
transition: background-color 0.1s ease-in;
opacity: 1 !important
}
#answer-form fieldset.correct input[type=text]:-moz-placeholder, #answer-form fieldset.incorrect input[type=text]:-moz-placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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 fieldset.correct input[type=text]::-moz-placeholder, #answer-form fieldset.incorrect input[type=text]::-moz-placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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 fieldset.correct input[type=text]:-ms-input-placeholder, #answer-form fieldset.incorrect input[type=text]:-ms-input-placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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 fieldset.correct input[type=text]::-webkit-input-placeholder, #answer-form fieldset.incorrect input[type=text]::-webkit-input-placeholder {
color: #fff;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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 fieldset.correct input[type=text][lang=ja]:-moz-placeholder, #answer-form fieldset.incorrect input[type=text][lang=ja]:-moz-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form fieldset.correct input[type=text][lang=ja]:-ms-input-placeholder, #answer-form fieldset.incorrect input[type=text][lang=ja]:-ms-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form fieldset.correct input[type=text][lang=ja]::-webkit-input-placeholder, #answer-form fieldset.incorrect input[type=text][lang=ja]::-webkit-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form fieldset.correct button, #answer-form fieldset.correct input[type=text], #answer-form fieldset.correct input[type=text]:disabled {
background-color: #88cc00 !important
}
#answer-form fieldset.incorrect button, #answer-form fieldset.incorrect input[type=text], #answer-form fieldset.incorrect input[type=text]:disabled {
background-color: #f03 !important
}
#answer-form input[type=text] {
-webkit-appearance: none;
border-radius: 0;
display: block;
width: 100%;
height: 3em;
font-size: 1.5em;
line-height: 1em;
text-align: center;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#answer-form input[type=text]:-moz-placeholder {
color: #ccc;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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]::-moz-placeholder {
color: #ccc;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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]:-ms-input-placeholder {
color: #ccc;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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]::-webkit-input-placeholder {
color: #ccc;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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][lang=ja]:-moz-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form input[type=text][lang=ja]:-ms-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form input[type=text][lang=ja]::-webkit-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form input[type=text]:focus {
outline: none
}
#answer-form input[type=text]:focus:-moz-placeholder {
color: #a2a2a2;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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::-moz-placeholder {
color: #a2a2a2;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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:-ms-input-placeholder {
color: #a2a2a2;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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::-webkit-input-placeholder {
color: #a2a2a2;
font-family: "Source Sans Pro", sans-serif;
font-weight: 300;
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[lang=ja]:-moz-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form input[type=text]:focus[lang=ja]:-ms-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
#answer-form input[type=text]:focus[lang=ja]::-webkit-input-placeholder {
font-family: "Hiragino Kaku Gothic Pro", "Meiryo", "Source Han Sans Japanese", "NotoSansCJK", "TakaoPGothic", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "メイリオ", "Osaka", "MS PGothic", "MS Pゴシック", sans-serif;
line-height: 1.5em
}
header {
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
header #main-info {
color: #fff;
text-align: center;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25)
}
header #main-info #character {
padding: 20px 20px 0;
font-size: 6em;
line-height: 1.2em
}
header #main-info #character img {
width: 0.9em;
height: 0.9em;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2))
}
header #main-info #meaning {
padding: 0 20px 20px;
font-size: 2em;
font-weight: 300;
letter-spacing: -0.05em
}
header #main-info.kanji {
background-color: #f100a1;
background-image: -moz-linear-gradient(top, #f0a, #dd0093);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f0a), to(#dd0093));
background-image: -webkit-linear-gradient(top, #f0a, #dd0093);
background-image: -o-linear-gradient(top, #f0a, #dd0093);
background-image: linear-gradient(to bottom, #f0a, #dd0093);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFF00AA, endColorstr=#FFDD0093, GradientType=0)
}
header #main-info.kanji #character {
text-shadow: 5px 5px 0 #dd0093
}
header #main-info.kanji #meaning {
text-shadow: 3px 3px 0 #dd0093
}
header #main-info.radical {
background-color: #00a1f1;
background-image: -moz-linear-gradient(top, #0af, #0093dd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0af), to(#0093dd));
background-image: -webkit-linear-gradient(top, #0af, #0093dd);
background-image: -o-linear-gradient(top, #0af, #0093dd);
background-image: linear-gradient(to bottom, #0af, #0093dd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF00AAFF, endColorstr=#FF0093DD, GradientType=0)
}
header #main-info.radical #character {
text-shadow: 5px 5px 0 #0093dd
}
header #main-info.radical #meaning {
text-shadow: 3px 3px 0 #0093dd
}
header #main-info.vocabulary {
background-color: #a100f1;
background-image: -moz-linear-gradient(top, #a0f, #9300dd);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a0f), to(#9300dd));
background-image: -webkit-linear-gradient(top, #a0f, #9300dd);
background-image: -o-linear-gradient(top, #a0f, #9300dd);
background-image: linear-gradient(to bottom, #a0f, #9300dd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFAA00FF, endColorstr=#FF9300DD, GradientType=0)
}
header #main-info.vocabulary #character {
font-size: 4em;
line-height: 1.8em;
text-shadow: 5px 5px 0 #9300dd
}
header #main-info.vocabulary #meaning {
text-shadow: 3px 3px 0 #9300dd
}
#hotkeys {
background-color: #e1e1e1;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0
}
#hotkeys table {
display: none;
margin-top: 1em;
color: #3c3c3c;
font-size: 11px
}
#hotkeys table tr td:first-child {
padding-right: 20px;
text-align: right
}
#hotkeys table tr:not(:last-child) td {
padding-bottom: 0.5em
}
#hotkeys table span {
display: inline-block;
padding: 1px 4px;
border: 1px solid #3c3c3c;
border-radius: 1px;
-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1)
}
#hotkeys #hotkeys-header span {
display: none;
margin-left: 0.4em
}
#hotkeys .hotkey-header-sub:first-child {
padding-bottom: 1em;
color: #a2a2a2;
font-size: 1.25em;
text-align: left
}
.icon-keyboard:before {
content: "\f11c"
}
#kana-chart {
display: none
}
#kana-chart ol, #kana-chart ul {
position: relative;
margin: 0;
padding: 0;
text-align: center
}
#kana-chart ol li, #kana-chart ul li {
display: inline-block;
color: #a2a2a2;
-webkit-transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear;
-moz-transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear;
-o-transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear;
transition: background-color 0.15s linear, border-color 0.15s linear, box-shadow 0.15s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none
}
#kana-chart ol li:not(.empty), #kana-chart ul li:not(.empty) {
cursor: pointer
}
#kana-chart ol {
border-bottom: 1px solid #eee;
z-index: 2
}
#kana-chart ol li {
width: 10%;
padding: 0.6em 0 0.4em;
color: #bbbbbb;
border-bottom: 3px solid transparent
}
#kana-chart ol li.active {
color: #000;
border-bottom: 3px solid #000
}
#kana-chart ol li:not(.active):not(.backspace):hover {
border-bottom: 3px solid #333333
}
#kana-chart ul {
z-index: 0
}
#kana-chart ul:not(#chart-a) {
display: none
}
#kana-chart ul li {
width: 12.5%;
padding: 0.6em 0 0.7em;
border-right: 1px solid #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
#kana-chart ul li:nth-child(8n) {
border-right: 0
}
#kana-chart ul li:not(.empty):hover {
background-color: #fbfbfb;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#kana-chart ul li:not(.empty):active {
color: #fff;
background-color: #f0a
}
#kana-chart ul li:not(.empty):active span {
color: #fff
}
#kana-chart ul li span {
display: block;
margin-bottom: 0.1em;
color: #000
}
#lesson #batch-items {
margin: 10px
}
#lesson #batch-items.fixed {
position: fixed;
bottom: 0;
width: 100%
}
#lesson #batch-items ul {
margin: 0;
padding: 0;
text-align: center
}
#lesson #batch-items ul li {
display: inline-block;
margin-bottom: 0.5em;
vertical-align: top
}
#lesson #batch-items ul li:after {
content: '\F10C';
display: block;
margin-top: 0.5em;
margin-left: -0.25em;
color: #c8c8c8;
font-family: FontAwesome;
font-size: 0.5em;
-webkit-transition: color 0.15s linear;
-moz-transition: color 0.15s linear;
-o-transition: color 0.15s linear;
transition: color 0.15s linear
}
#lesson #batch-items ul li:hover:after {
color: #a2a2a2
}
#lesson #batch-items ul li[data-index=quiz]:after {
content: ''
}
#lesson #batch-items ul li[data-index=quiz] span {
cursor: not-allowed;
background-color: #c8c8c8;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1)
}
#lesson #batch-items ul li[data-index=quiz] span i {
margin-left: 0.4em
}
#lesson #batch-items ul li[data-index=quiz] span i:before {
font-size: 0.9em;
vertical-align: top
}
#lesson #batch-items ul li span {
cursor: pointer;
position: relative;
display: inline-block;
margin-right: 0.25em;
margin-bottom: 0.25em;
padding: 0.4em 0.4em 0.3em;
color: #fff;
line-height: 1em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 2px 2px 0 #d5d5d5;
-moz-box-shadow: 2px 2px 0 #d5d5d5;
box-shadow: 2px 2px 0 #d5d5d5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#lesson #batch-items ul li span img {
width: 0.9em;
height: 0.9em
}
#lesson #batch-items ul li.read:after {
content: '\F111'
}
#lesson #supplement-nav {
padding: 20px;
background-color: #252A3A;
font-weight: 300
}
#lesson #supplement-nav ul {
counter-reset: menuItem;
margin: 0;
padding: 0;
color: #fff;
text-align: center
}
#lesson #supplement-nav ul li {
position: relative;
counter-increment: menuItem;
cursor: pointer;
display: inline-block;
margin-right: 2em;
text-transform: capitalize
}
#lesson #supplement-nav ul li:before {
font-size: 0.8em
}
#lesson #supplement-nav ul li:hover:not(.active):before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -30px;
left: 50%;
margin-left: -22px;
border-style: solid;
border-width: 0 22px 22px 22px;
border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
z-index: 10
}
#lesson #supplement-nav ul li:last-child {
margin-right: 0
}
#lesson #supplement-nav ul li.active:before {
content: '';
position: absolute;
width: 0;
height: 0;
bottom: -30px;
left: 50%;
margin-left: -22px;
border-style: solid;
border-width: 0 22px 22px 22px;
border-color: transparent transparent #fff transparent;
z-index: 10
}
#lesson .context-sentence-group {
margin-bottom: 1rem
}
#lesson .context-sentence-group p {
margin: 0;
padding: 0;
line-height: 1.6em
}
#loading-screen {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #eee;
background-image: url("https://cdn.wanikani.com/assets/v03/loading-600x600-9128029328e2c56ccaae51976da8050e0b185d9ca13beab0f5b94e573a8267fa.gif");
background-repeat: no-repeat;
background-size: 30% auto;
background-position: 50% 50%;
z-index: 1000
}
.hover {
position: absolute;
top: 0;
padding: 5px 6.6666666667px;
max-width: 200px;
background-color: black;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
white-space: nowrap;
z-index: 10
}
.hover ul {
margin: 0;
padding: 0
}
.hover ul li {
display: block;
font-size: 0.8em
}
.hover ul li:before {
margin-right: 0.4em;
color: #a2a2a2
}
.hover ul li:first-child:before {
content: "EN"
}
.hover ul li:nth-child(2):before {
content: "JA"
}
.hover ul li:nth-child(3):before {
content: 'MC'
}
.hover ul li:last-child:before {
content: 'RC'
}
.hover ul li:nth-child(3):after, .hover ul li:last-child:after {
content: '%'
}
.hover ul li:empty {
display: none
}
.hover.up-arrow:before {
top: -8px;
border-style: solid;
border-width: 0 8px 8px 8px;
border-color: transparent transparent #000 transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent
}
.hover.down-arrow:before {
bottom: -8px;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #000 transparent transparent transparent;
border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent
}
.hover.left-side:before, .hover.right-side:before {
content: '';
position: absolute;
width: 0;
height: 0
}
.hover.left-side:before {
left: 0.5em
}
.hover.right-side:before {
right: 0.5em
}
#progress-bar {
background-color: #25293a;
height: 5px;
overflow: hidden;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3)
}
#progress-bar #bar {
width: 0%;
background-color: #fff
}
.hidden {
display: none !important
}
.screen-overlay {
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
z-index: 100
}
.screen-overlay>div {
display: table-cell;
vertical-align: middle
}
.screen-overlay>div>div {
margin: 0 auto;
width: 75%
}
.screen-overlay h1 {
font-weight: 300;
text-shadow: 2px 2px 0 #000
}
.screen-overlay .btn-set {
margin: 0;
padding: 0
}
.screen-overlay .btn-set li {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0.75em;
border: solid 2px #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em
}
.screen-overlay .btn-set li:first-child i {
margin-right: 0.5em
}
.screen-overlay .btn-set li:last-child i {
margin-left: 0.5em
}
.screen-overlay .btn-set li:not(:last-child) {
margin-right: 0.5em
}
.screen-overlay .btn-set li.dominant {
background-color: #fff;
color: #000
}
.screen-overlay .btn-set li a {
color: #000;
text-decoration: none
}
#lessons #stats {
position: absolute;
top: 13.3333333333px;
right: 20px;
text-align: right
}
#lessons #stats ul {
margin: 0;
padding: 0;
color: #fff
}
#lessons #stats ul li {
display: inline-block;
padding-right: 1em
}
#lessons #stats ul li:last-child {
padding-right: 0
}
#lessons #stats ul li:last-child:before {
content: '\F00C';
margin-right: 0.5em;
font-family: FontAwesome
}
#lessons #stats ul li:not(:last-child) {
opacity: 0.75;
filter: alpha(opacity=75)
}
#lessons #stats ul li span {
display: inline-block;
margin-left: 0.5em;
padding: 0 0.25em;
background-color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
#lessons #stats ul li span:before {
content: '\F01C';
margin-right: 0.25em;
font-family: FontAwesome
}
#lessons #stats ul li span.radical {
color: #0af
}
#lessons #stats ul li span.kanji {
color: #f0a
}
#lessons #stats ul li span.vocabulary {
color: #a0f
}
#lessons-summary .pure-g>div, #lessons-summary .pure-g-r>div, #lessons-summary .pure-g-r>header {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#lessons-summary .pure-g, #lessons-summary .pure-g-r {
padding: 10px 20px
}
#lessons-summary header {
position: relative;
padding: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
#lessons-summary header h1 {
margin: 0;
padding-top: 40px;
font-weight: 400;
letter-spacing: -1px;
line-height: 1em
}
#lessons-summary header h1 i {
margin-right: 0.25em
}
#lessons-summary header nav {
position: absolute;
top: 0;
right: 0;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #d5d5d5
}
#lessons-summary header nav #back-dashboard, #lessons-summary header nav #lesson-queue-count, #lessons-summary header nav #start-session a {
display: inline-block;
height: 3em;
line-height: 3em;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top
}
#lessons-summary header nav #back-dashboard {
background-color: #f0a;
background-image: url("https://cdn.wanikani.com/assets/v03/logo-no-color-81615ff42ed0bcc9ad97ab294d073dd88f3899c6357f4e817815058f94baf2a8.png");
background-size: contain;
width: 3em;
margin-right: 0.5em;
-webkit-transition: background-color ease-in 0.3s;
-moz-transition: background-color ease-in 0.3s;
-o-transition: background-color ease-in 0.3s;
transition: background-color ease-in 0.3s;
-webkit-box-shadow: 0 1px 0 #fff, inset -2px 2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 0 #fff, inset -2px 2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 0 #fff, inset -2px 2px 0 rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px
}
#lessons-summary header nav #back-dashboard:active {
background-color: #0af
}
#lessons-summary header nav #back-dashboard:hover {
background-color: #a0f
}
#lessons-summary header nav #lesson-queue-count {
display: inline-block;
padding: 0 1em;
height: 3em;
background-color: black;
color: #fff;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0
}
#lessons-summary header nav #lesson-queue-count:before {
content: '\F01C';
margin-right: 0.5em;
font-family: FontAwesome
}
#lessons-summary header nav #start-session {
display: inline-block
}
#lessons-summary header nav #start-session a {
display: inline-block;
padding: 0 1em;
background-color: #0af;
color: #fff;
letter-spacing: -1px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
-webkit-transition: background-color 0.1s ease-in;
-moz-transition: background-color 0.1s ease-in;
-o-transition: background-color 0.1s ease-in;
transition: background-color 0.1s ease-in
}
#lessons-summary header nav #start-session a:hover {
background-color: #0093dd
}
#lessons-summary header nav #start-session a.disabled {
cursor: not-allowed;
background-color: #c8c8c8
}
#lessons-summary #radicals, #lessons-summary #kanji, #lessons-summary #vocabulary {
background-color: #fff;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#lessons-summary #radicals h2, #lessons-summary #radicals>div, #lessons-summary #kanji h2, #lessons-summary #kanji>div, #lessons-summary #vocabulary h2, #lessons-summary #vocabulary>div {
padding: 20px
}
#lessons-summary #radicals h2, #lessons-summary #kanji h2, #lessons-summary #vocabulary h2 {
margin: 0;
color: #fff;
font-weight: 400;
letter-spacing: -1px;
line-height: 1em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1)
}
#lessons-summary #radicals h2 strong:after, #lessons-summary #kanji h2 strong:after, #lessons-summary #vocabulary h2 strong:after {
content: '\f00c';
margin-left: 0.25em;
margin-right: 0.2em;
font-family: FontAwesome
}
#lessons-summary #radicals>div>ul, #lessons-summary #kanji>div>ul, #lessons-summary #vocabulary>div>ul {
margin: 0;
padding: 0
}
#lessons-summary #radicals>div>ul>li, #lessons-summary #kanji>div>ul>li, #lessons-summary #vocabulary>div>ul>li {
position: relative;
display: inline-block;
margin-right: 0.25em;
margin-bottom: 0.25em;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 2px 2px 0 #e1e1e1;
-moz-box-shadow: 2px 2px 0 #e1e1e1;
box-shadow: 2px 2px 0 #e1e1e1
}
#lessons-summary #radicals>div>ul>li.radicals, #lessons-summary #kanji>div>ul>li.radicals, #lessons-summary #vocabulary>div>ul>li.radicals {
background-color: #0af
}
#lessons-summary #radicals>div>ul>li.radicals img, #lessons-summary #kanji>div>ul>li.radicals img, #lessons-summary #vocabulary>div>ul>li.radicals img {
width: 0.8em;
height: 0.8em
}
#lessons-summary #radicals>div>ul>li.kanji, #lessons-summary #kanji>div>ul>li.kanji, #lessons-summary #vocabulary>div>ul>li.kanji {
background-color: #f0a
}
#lessons-summary #radicals>div>ul>li.vocabulary, #lessons-summary #kanji>div>ul>li.vocabulary, #lessons-summary #vocabulary>div>ul>li.vocabulary {
background-color: #a0f
}
#lessons-summary #radicals>div>ul>li a, #lessons-summary #kanji>div>ul>li a, #lessons-summary #vocabulary>div>ul>li a {
display: inline-block;
padding: 0.4em 0.4em 0.3em;
width: 100%;
height: 100%;
color: #fff;
line-height: 1em;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#lessons-summary #radicals h2 {
background-color: #0af
}
#lessons-summary #kanji h2 {
background-color: #f0a
}
#lessons-summary #vocabulary h2 {
background-color: #a0f
}
#lessons-summary footer {
letter-spacing: -1px;
text-align: center
}
#lessons-summary footer #last-session-date {
color: #a2a2a2
}
#lessons-summary footer #copyright {
color: #d5d5d5
}
#lesson #supplement-info {
position: relative;
margin: 10px 10px 20px;
padding: 20px 3.5em;
background-color: #fff;
-webkit-box-shadow: 3px 3px 0 #e1e1e1;
-moz-box-shadow: 3px 3px 0 #e1e1e1;
box-shadow: 3px 3px 0 #e1e1e1
}
#lesson #supplement-info blockquote {
margin: 1em 0 0;
padding: 10px;
background-color: #fbfbfb;
color: #888888
}
#lesson #supplement-info blockquote h3 {
margin: 0;
padding: 0 0 1em;
font-size: 0.8125em;
line-height: 1em
}
#lesson #supplement-info h2 {
margin: 0 0 0.5em;
padding-bottom: 0.25em;
font-weight: 300;
line-height: 1em;
border-bottom: 1px solid #eee
}
#lesson #supplement-info #prev-btn, #lesson #supplement-info #next-btn {
position: absolute;
cursor: pointer;
top: 0;
padding: 2em 1em 1em;
height: 100%;
color: #a2a2a2;
font-family: FontAwesome;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color 0.15s linear;
-moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear;
transition: background-color 0.15s linear
}
#lesson #supplement-info #prev-btn:hover, #lesson #supplement-info #next-btn:hover {
background-color: #e9e9e9
}
#lesson #supplement-info #prev-btn.inactive, #lesson #supplement-info #next-btn.inactive {
cursor: default;
opacity: 0.2;
filter: alpha(opacity=20)
}
#lesson #supplement-info #prev-btn.inactive:hover, #lesson #supplement-info #next-btn.inactive:hover {
background-color: #fff
}
#lesson #supplement-info #prev-btn {
left: 0
}
#lesson #supplement-info #prev-btn:before {
content: '\F053'
}
#lesson #supplement-info #next-btn {
right: 0
}
#lesson #supplement-info #next-btn:before {
content: '\F054'
}
#lesson #supplement-info #supplement-rad, #lesson #supplement-info #supplement-kan, #lesson #supplement-info #supplement-voc {
display: none
}
#lesson #supplement-info #supplement-rad>div, #lesson #supplement-info #supplement-kan>div, #lesson #supplement-info #supplement-voc>div {
display: none
}
#lesson #supplement-info #supplement-rad h2:not(:first-child), #lesson #supplement-info #supplement-kan h2:not(:first-child), #lesson #supplement-info #supplement-voc h2:not(:first-child) {
margin-top: 1.25em
}
#lesson #supplement-info #supplement-rad-related-kanji ul, #lesson #supplement-info #supplement-kan-breakdown ul, #lesson #supplement-info #supplement-kan-related-vocabulary ul, #lesson #supplement-info #supplement-voc-breakdown ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
padding-left: 0;
text-align: center
}
#lesson #supplement-info #supplement-rad-related-kanji ul li, #lesson #supplement-info #supplement-kan-breakdown ul li, #lesson #supplement-info #supplement-kan-related-vocabulary ul li, #lesson #supplement-info #supplement-voc-breakdown ul li {
flex: auto;
text-align: center
}
#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: #000;
text-decoration: none;
white-space: nowrap
}
#lesson #supplement-info #supplement-rad-related-kanji ul li div, #lesson #supplement-info #supplement-kan-breakdown ul li div, #lesson #supplement-info #supplement-kan-related-vocabulary ul li div, #lesson #supplement-info #supplement-voc-breakdown ul li div {
margin-top: 0.5em
}
#lesson #supplement-info #supplement-kan-related-vocabulary ul li span {
padding-left: 0.5em;
padding-right: 0.5em;
width: auto
}
#lesson #supplement-info .col1, #lesson #supplement-info .col2 {
font-weight: 300;
line-height: 1.5;
position: relative
}
#lesson #supplement-info .pure-g-r>.pure-u-1-4 {
padding-right: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
#lesson #supplement-info .radical, #lesson #supplement-info .kanji, #lesson #supplement-info .vocabulary {
display: inline-block;
width: 1.8em;
height: 1.8em;
color: #fff;
font-size: 2em;
line-height: 1.7em;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transition: text-shadow 0.15s linear;
-moz-transition: text-shadow 0.15s linear;
-o-transition: text-shadow 0.15s linear;
transition: text-shadow 0.15s linear
}
#lesson #supplement-info .radical:active, #lesson #supplement-info .kanji:active, #lesson #supplement-info .vocabulary:active {
text-shadow: 0 0 20px #fff, 0 -1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5);
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) inset, 0 0 10px rgba(255, 255, 255, 0.5)
}
#lesson #supplement-info .radical:hover, #lesson #supplement-info .kanji:hover, #lesson #supplement-info .vocabulary:hover {
text-shadow: 0 0 20px #fff, 0 1px 0 rgba(0, 0, 0, 0.3)
}
#lesson #supplement-info .radical:active {
background-color: #00a7fa
}
#lesson #supplement-info .radical img {
width: 0.9em;
height: 0.9em;
filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2))
}
#lesson #supplement-info .kanji:active {
background-color: #fa00a7
}
#lesson #supplement-info .vocabulary:active {
background-color: #a700fa
}
#quiz {
display: none
}
#quiz #question-type {
text-align: center
}
#quiz #question-type h1 {
font-weight: normal;
letter-spacing: -1px;
text-transform: capitalize
}
#quiz #question-type.meaning {
color: #555;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.1);
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #c8c8c8;
background-color: #e9e9e9;
background-image: -moz-linear-gradient(top, #eee, #e1e1e1);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#e1e1e1));
background-image: -webkit-linear-gradient(top, #eee, #e1e1e1);
background-image: -o-linear-gradient(top, #eee, #e1e1e1);
background-image: linear-gradient(to bottom, #eee, #e1e1e1);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFEEEEEE, endColorstr=#FFE1E1E1, GradientType=0)
}
#quiz #question-type.reading {
color: #fff;
text-shadow: -1px -1px 0 #000;
border-top: 1px solid #555;
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(#3c3c3c), to(#1a1a1a));
background-image: -webkit-linear-gradient(top, #3c3c3c, #1a1a1a);
background-image: -o-linear-gradient(top, #3c3c3c, #1a1a1a);
background-image: linear-gradient(to bottom, #3c3c3c, #1a1a1a);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF3C3C3C, endColorstr=#FF1A1A1A, GradientType=0)
}
header.quiz #main-info #character {
font-size: 12.25em;
font-weight: normal;
line-height: 1.6em
}
header.quiz #main-info #character img {
width: 180px;
height: 180px
}
header.quiz #main-info.vocabulary #character {
font-size: 6.125em !important;
line-height: 3.21em !important;
text-shadow: 5px 5px 0 #9300dd
}
@media (max-width: 767px) {
body {
font-size: 0.8em
}
#header-buttons {
top: 10px;
left: 10px;
font-size: 0.8em
}
#lesson header #supplement-nav ul li {
margin-right: 1em
}
#lesson #supplement-info #supplement-rad-related-kanji ul, #lesson #supplement-info #supplement-kan-breakdown ul, #lesson #supplement-info #supplement-kan-related-vocabulary ul, #lesson #supplement-info #supplement-voc-breakdown ul {
text-align: left
}
#lesson #supplement-info #supplement-rad-related-kanji ul li, #lesson #supplement-info #supplement-kan-breakdown ul li, #lesson #supplement-info #supplement-kan-related-vocabulary ul li, #lesson #supplement-info #supplement-voc-breakdown ul li {
display: inline-block;
width: auto
}
#lesson #supplement-info #supplement-rad-related-kanji ul li:not(:last-child):not(:nth-last-child(2)), #lesson #supplement-info #supplement-kan-breakdown ul li:not(:last-child):not(:nth-last-child(2)), #lesson #supplement-info #supplement-kan-related-vocabulary ul li:not(:last-child):not(:nth-last-child(2)), #lesson #supplement-info #supplement-voc-breakdown ul li:not(:last-child):not(:nth-last-child(2)) {
margin-bottom: 1em
}
#lesson #supplement-info .col1 {
padding-right: 0 !important
}
#lesson #supplement-info .col2 h2 {
margin-top: 1.25em
}
#lessons #stats {
top: 10px;
right: 10px;
font-size: 0.8em
}
.screen-overlay .btn-set {
font-size: 0.8em
}
header.quiz #main-info #character {
font-size: 3.0625em;
font-weight: normal;
line-height: 2.4em
}
header.quiz #main-info.kanji #character {
text-shadow: 2px 2px 0 #dd0093
}
header.quiz #main-info.radical #character {
text-shadow: 2px 2px 0 #0093dd
}
header.quiz #main-info.radical #character img {
width: 45px;
height: 45px
}
header.quiz #main-info.vocabulary #character {
font-size: 1.53125em !important;
line-height: 4.85em;
text-shadow: 2px 2px 0 #9300dd
}
#quiz #question-type h1 {
font-size: 1em
}
footer #hotkeys, footer #report-errors {
display: none
}
#answer-form button {
font-size: 1em
}
#answer-form fieldset.correct button, #answer-form fieldset.correct input[type=text], #answer-form fieldset.correct input[type=text]:disabled, #answer-form fieldset.incorrect button, #answer-form fieldset.incorrect input[type=text], #answer-form fieldset.incorrect input[type=text]:disabled {
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2)
}
#answer-form input[type=text] {
font-size: 1em
}
#additional-content ul li:not(#option-audio) span:hover:before {
content: none
}
#additional-content ul li span {
padding: 5px;
font-size: 0.75em
}
#answer-exception {
top: 2.5em;
font-size: 0.75em
}
#item-info {
font-size: 13px
}
#item-info #item-info-col1 section, #item-info #item-info-col2 section {
margin-bottom: 1.5em
}
#item-info #item-info-col1 {
padding-bottom: 1.5em
}
#item-info #item-info-col2 {
padding-left: 0
}
#kana-chart {
font-size: 0.75em
}
#lessons-summary {
font-size: 11px
}
#lessons-summary header h1 {
margin: 20px 0 0;
padding-top: 0
}
#lessons-summary header nav {
position: relative
}
#lessons-summary header nav #start-session {
float: right
}
#lessons-summary #radicals h2, #lessons-summary #radicals>div, #lessons-summary #kanji h2, #lessons-summary #kanji>div, #lessons-summary #vocabulary h2, #lessons-summary #vocabulary>div {
padding: 10px
}
}
Sign up for free to join this conversation on GitHub. Already have an account?