|
.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 |
