/tryf-wk-enhnaced-mobile-css.userscript.js
Last active Aug 4, 2019
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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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", "ＭＳ Ｐゴシック", 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?
Sign in to comment