diff --git a/source/components/AttachDictionary.js b/source/components/AttachDictionary.js index 81e0d7f07..175491cf9 100644 --- a/source/components/AttachDictionary.js +++ b/source/components/AttachDictionary.js @@ -29,8 +29,8 @@ export let AttachDictionary = dictionary => Decorated =>
this.decorated = decorated} {...this.props} explain={this.explain}/> {explanation && -
this.setState({term: null, explanation: null})}> -
this.setState({term: null, explanation: null})}> +
{e.preventDefault(); e.stopPropagation()}} dangerouslySetInnerHTML={{__html: this.renderExplanationMarkdown(explanation, term)}}>
diff --git a/source/components/Dictionary.css b/source/components/Dictionary.css index 8ea3f586b..4fec5ce9d 100644 --- a/source/components/Dictionary.css +++ b/source/components/Dictionary.css @@ -1,5 +1,5 @@ -.dictionaryPanelWrapper { +#dictionaryPanelWrapper { position: fixed; top: 0; left: 0; @@ -8,32 +8,35 @@ background: rgba(255, 255, 255, 0.86); z-index: 1; } -.dictionaryPanel { +#dictionaryPanel { background: white; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); - width: 33%; + width: 70%; + max-width: 40em; border: 2px solid #333350; margin: 1em; padding: 0em 1.5em; min-height: 6em; border-radius: .3em; } -.dictionaryPanel h3 { - color: #333350 +#dictionaryPanel h3 { + color: #333350; + font-weight: bold; + font-size: 125%; } -.dictionaryPanel blockquote { +#dictionaryPanel blockquote { font-style: italic; border-left: 4px solid #eee; padding-left: 1em; margin-left: 0; } -.dictionaryPanel blockquote p { +#dictionaryPanel blockquote p { color: #666; } -.dictionaryPanel code { +#dictionaryPanel code { border: 1px solid #aaa; padding: .05em .3em; border-radius: .3em;