WaniKani: Enhanced Mobile CSS userscript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==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; | |
| } | |
| } | |
| } | |
| `); | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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