diff --git a/extension/css/popup-black.css b/extension/css/popup-black.css deleted file mode 100644 index 7477b0e1b..000000000 --- a/extension/css/popup-black.css +++ /dev/null @@ -1,218 +0,0 @@ -/* this is to reset almost everything under the popup to a sane value */ - -#rikaichan-window, -#rikaichan-window * { - background: transparent; - border: none !important; - border-spacing: 0; - color: #fff; - font: normal 14px sans-serif; - height: auto; - letter-spacing: normal; - margin: 0; - padding: 0; - text-align: left; - text-decoration: none; - text-indent: 0; - text-transform: none; - visibility: visible; - white-space: normal; - width: auto; - word-spacing: normal; -} - -#rikaichan-window { - background: #000; - border: 1px solid #d0d0d0 !important; - border-radius: 5px; - left: 5px; - min-width: 100px; - padding: 4px; - position: absolute; - top: 5px; - z-index: 99992; -} - -/* used for word definitions */ - -#rikaichan-window .w-kanji { - color: #7070e0; - font-size: 18px; - margin-right: 0.7em; -} - -#rikaichan-window .w-kana { - color: #20a020; - font-size: 18px; -} - -#rikaichan-window .w-conj { - color: #a0a0a0; - font-size: 12px; -} - -#rikaichan-window .w-def { - font-size: 13px; -} - -#rikaichan-window .w-title { - background: #303030; - color: #e0e0e0; - font-size: 10px; - padding: 2px; -} - -#rikaichan-window .w-na-tb td { - padding-right: 0.8em; - vertical-align: top; -} - -/* used for kanji information */ - -#rikaichan-window .k-main-tb { - width: 300px; -} - -#rikaichan-window .k-kanji { - color: #fff; - font-family: serif; - font-size: 48px; -} - -#rikaichan-window .k-eigo { - font-size: 12px; -} - -/* kanji: readings */ - -#rikaichan-window .k-yomi { - color: #20a020; - font-size: 14px; - margin: 4px 0; -} - -#rikaichan-window .k-yomi-hi { - border: 1px solid red; - color: #7070e0; -} - -#rikaichan-window .k-yomi-ti { - color: #e0e0e0; - font-size: 11px; -} - -/* kanji radical, grade, freq, strokes box */ - -#rikaichan-window .k-abox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-abox-r { - background: #505050; - color: #e0e0e0; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-g { - background: #303030; - color: #f0f0f0; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-f { - background: #303030; - color: #f0f0f0; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-s { - background: #505050; - color: #e0e0e0; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -/* kanji components box */ - -#rikaichan-window .k-bbox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-bbox-0a { - background: #505050; - color: #e0e0e0; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-0b { - background: #505050; - color: #e0e0e0; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1a { - background: #303030; - color: #f0f0f0; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1b { - background: #303030; - color: #f0f0f0; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -/* kanji: misc index */ - -#rikaichan-window .k-mix-tb { - width: 100%; -} - -#rikaichan-window .k-mix-td0 { - background: #505050; - color: #f0f0f0; - font-size: 12px; -} - -#rikaichan-window .k-mix-td1 { - background: #303030; - color: #e0e0e0; - font-size: 12px; -} - -#rikaichan-window .q-w { - border-right: 1px dotted #b0b0b0 !important; - min-width: 300px; - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .q-k { - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .small-info { - font: small-caption; -} diff --git a/extension/css/popup-blue.css b/extension/css/popup-blue.css deleted file mode 100644 index f04780fca..000000000 --- a/extension/css/popup-blue.css +++ /dev/null @@ -1,218 +0,0 @@ -/* this is to reset almost everything under the popup to a sane value */ - -#rikaichan-window, -#rikaichan-window * { - background: transparent; - border: none !important; - border-spacing: 0; - color: #fff; - font: normal 14px sans-serif; - height: auto; - letter-spacing: normal; - margin: 0; - padding: 0; - text-align: left; - text-decoration: none; - text-indent: 0; - text-transform: none; - visibility: visible; - white-space: normal; - width: auto; - word-spacing: normal; -} - -#rikaichan-window { - background: #5c73b8; - border: 1px solid #d0d0d0 !important; - border-radius: 5px; - left: 5px; - min-width: 100px; - padding: 4px; - position: absolute; - top: 5px; - z-index: 99992; -} - -/* used for word definitions */ - -#rikaichan-window .w-kanji { - color: #b7e7ff; - font-size: 18px; - margin-right: 0.7em; -} - -#rikaichan-window .w-kana { - color: #c0ffc0; - font-size: 18px; -} - -#rikaichan-window .w-conj { - color: #ffe0a0; - font-size: 12px; -} - -#rikaichan-window .w-def { - font-size: 13px; -} - -#rikaichan-window .w-title { - background: #4c63a8; - color: #fff; - font-size: 10px; - padding: 2px; -} - -#rikaichan-window .w-na-tb td { - padding-right: 0.8em; - vertical-align: top; -} - -/* used for kanji information */ - -#rikaichan-window .k-main-tb { - width: 300px; -} - -#rikaichan-window .k-kanji { - color: #b7e7ff; - font-family: serif; - font-size: 48px; -} - -#rikaichan-window .k-eigo { - font-size: 12px; -} - -/* kanji: readings */ - -#rikaichan-window .k-yomi { - color: #c0ffc0; - font-size: 14px; - margin: 4px 0; -} - -#rikaichan-window .k-yomi-hi { - border: 1px solid red; - color: #a0d0ff; -} - -#rikaichan-window .k-yomi-ti { - color: #e7ffe7; - font-size: 11px; -} - -/* kanji radical, grade, freq, strokes box */ - -#rikaichan-window .k-abox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-abox-r { - background: #5a70b5; - color: #fff; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-g { - background: #4c63a8; - color: #b7e7ff; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-f { - background: #4c63a8; - color: #b7e7ff; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-s { - background: #5a70b5; - color: #fff; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -/* kanji components box */ - -#rikaichan-window .k-bbox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-bbox-0a { - background: #5a70b5; - color: #fff; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-0b { - background: #5a70b5; - color: #fff; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1a { - background: #4c63a8; - color: #b7e7ff; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1b { - background: #4c63a8; - color: #b7e7ff; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -/* kanji: misc index */ - -#rikaichan-window .k-mix-tb { - width: 100%; -} - -#rikaichan-window .k-mix-td0 { - background: #5a70b5; - color: #b7e7ff; - font-size: 12px; -} - -#rikaichan-window .k-mix-td1 { - background: #4c63a8; - color: #fff; - font-size: 12px; -} - -#rikaichan-window .q-w { - border-right: 1px dotted #b0b0b0 !important; - min-width: 300px; - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .q-k { - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .small-info { - font: small-caption; -} diff --git a/extension/css/popup-lightblue.css b/extension/css/popup-lightblue.css deleted file mode 100644 index 5fcee70f2..000000000 --- a/extension/css/popup-lightblue.css +++ /dev/null @@ -1,218 +0,0 @@ -/* this is to reset almost everything under the popup to a sane value */ - -#rikaichan-window, -#rikaichan-window * { - background: transparent; - border: none !important; - border-spacing: 0; - color: #000; - font: normal 14px sans-serif; - height: auto; - letter-spacing: normal; - margin: 0; - padding: 0; - text-align: left; - text-decoration: none; - text-indent: 0; - text-transform: none; - visibility: visible; - white-space: normal; - width: auto; - word-spacing: normal; -} - -#rikaichan-window { - background: #e6f4ff; - border: 1px solid #d0d0d0 !important; - border-radius: 5px; - left: 5px; - min-width: 100px; - padding: 4px; - position: absolute; - top: 5px; - z-index: 99992; -} - -/* used for word definitions */ - -#rikaichan-window .w-kanji { - color: #3082bf; - font-size: 18px; - margin-right: 0.7em; -} - -#rikaichan-window .w-kana { - color: #00b366; - font-size: 18px; -} - -#rikaichan-window .w-conj { - color: #808080; - font-size: 12px; -} - -#rikaichan-window .w-def { - font-size: 13px; -} - -#rikaichan-window .w-title { - background: #bfe4ff; - color: #000; - font-size: 10px; - padding: 2px; -} - -#rikaichan-window .w-na-tb td { - padding-right: 0.8em; - vertical-align: top; -} - -/* used for kanji information */ - -#rikaichan-window .k-main-tb { - width: 300px; -} - -#rikaichan-window .k-kanji { - color: #000; - font-family: serif; - font-size: 48px; -} - -#rikaichan-window .k-eigo { - font-size: 12px; -} - -/* kanji: readings */ - -#rikaichan-window .k-yomi { - color: #00b366; - font-size: 14px; - margin: 4px 0; -} - -#rikaichan-window .k-yomi-hi { - border: 1px solid red; - color: #00868b; -} - -#rikaichan-window .k-yomi-ti { - color: #000; - font-size: 11px; -} - -/* kanji radical, grade, freq, strokes box */ - -#rikaichan-window .k-abox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-abox-r { - background: #dff1ff; - color: #003d6b; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-g { - background: #fff; - color: #003d6b; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-f { - background: #fff; - color: #003d6b; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-s { - background: #dff1ff; - color: #003d6b; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -/* kanji components box */ - -#rikaichan-window .k-bbox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-bbox-0a { - background: #dff1ff; - color: #003d6b; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-0b { - background: #dff1ff; - color: #003d6b; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1a { - background: #fff; - color: #003d6b; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1b { - background: #fff; - color: #003d6b; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -/* kanji: misc index */ - -#rikaichan-window .k-mix-tb { - width: 100%; -} - -#rikaichan-window .k-mix-td0 { - background: #dff1ff; - color: #003d6b; - font-size: 12px; -} - -#rikaichan-window .k-mix-td1 { - background: #fff; - color: #003d6b; - font-size: 12px; -} - -#rikaichan-window .q-w { - border-right: 1px dotted #b0b0b0 !important; - min-width: 300px; - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .q-k { - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .small-info { - font: small-caption; -} diff --git a/extension/css/popup-yellow.css b/extension/css/popup-yellow.css deleted file mode 100644 index d317b6cda..000000000 --- a/extension/css/popup-yellow.css +++ /dev/null @@ -1,218 +0,0 @@ -/* this is to reset almost everything under the popup to a sane value */ - -#rikaichan-window, -#rikaichan-window * { - background: transparent; - border: none !important; - border-spacing: 0; - color: #000; - font: normal 14px sans-serif; - height: auto; - letter-spacing: normal; - margin: 0; - padding: 0; - text-align: left; - text-decoration: none; - text-indent: 0; - text-transform: none; - visibility: visible; - white-space: normal; - width: auto; - word-spacing: normal; -} - -#rikaichan-window { - background: #ffffbf; - border: 1px solid #d0d0d0 !important; - border-radius: 5px; - left: 5px; - min-width: 100px; - padding: 4px; - position: absolute; - top: 5px; - z-index: 99992; -} - -/* used for word definitions */ - -#rikaichan-window .w-kanji { - color: #7070e0; - font-size: 18px; - margin-right: 0.7em; -} - -#rikaichan-window .w-kana { - color: #20a020; - font-size: 18px; -} - -#rikaichan-window .w-conj { - color: #a0a0a0; - font-size: 12px; -} - -#rikaichan-window .w-def { - font-size: 13px; -} - -#rikaichan-window .w-title { - background: #f0f0b0; - color: #000; - font-size: 10px; - padding: 2px; -} - -#rikaichan-window .w-na-tb td { - padding-right: 0.8em; - vertical-align: top; -} - -/* used for kanji information */ - -#rikaichan-window .k-main-tb { - width: 300px; -} - -#rikaichan-window .k-kanji { - color: #000; - font-family: serif; - font-size: 48px; -} - -#rikaichan-window .k-eigo { - font-size: 12px; -} - -/* kanji: readings */ - -#rikaichan-window .k-yomi { - color: #20a020; - font-size: 14px; - margin: 4px 0; -} - -#rikaichan-window .k-yomi-hi { - border: 1px solid red; - color: #cd5c5c; -} - -#rikaichan-window .k-yomi-ti { - color: #000; - font-size: 11px; -} - -/* kanji radical, grade, freq, strokes box */ - -#rikaichan-window .k-abox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-abox-r { - background: #ffffe6; - color: #000; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-g { - background: #f7f7d0; - color: #000; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-f { - background: #f7f7d0; - color: #000; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -#rikaichan-window .k-abox-s { - background: #ffffe6; - color: #000; - font-size: 12px; - padding: 1px 4px; - text-align: center; -} - -/* kanji components box */ - -#rikaichan-window .k-bbox-tb { - clear: right; - float: right; - margin-bottom: 4px; - width: 120px; -} - -#rikaichan-window .k-bbox-0a { - background: #ffffe6; - color: #000; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-0b { - background: #ffffe6; - color: #000; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1a { - background: #f7f7d0; - color: #000; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -#rikaichan-window .k-bbox-1b { - background: #f7f7d0; - color: #000; - font-size: 11px; - padding: 1px 3px; - vertical-align: top; -} - -/* kanji: misc index */ - -#rikaichan-window .k-mix-tb { - width: 100%; -} - -#rikaichan-window .k-mix-td0 { - background: #ffffe6; - color: #000; - font-size: 12px; -} - -#rikaichan-window .k-mix-td1 { - background: #f7f7d0; - color: #000; - font-size: 12px; -} - -#rikaichan-window .q-w { - border-right: 1px dotted #b0b0b0 !important; - min-width: 300px; - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .q-k { - padding: 0 2px; - vertical-align: top; -} - -#rikaichan-window .small-info { - font: small-caption; -} diff --git a/extension/css/popup.css b/extension/css/popup.css new file mode 100644 index 000000000..ca4ef2565 --- /dev/null +++ b/extension/css/popup.css @@ -0,0 +1,250 @@ +/* Theme definitions */ +#rikaichan-window[data-theme='blue'] { + --primary-color: #fff; + --primary-background-color: #5c73b8; + --kanji-color: #b7e7ff; + --kana-color: #c0ffc0; + --kanji-readings-highlight-color: #a0d0ff; + --conjugation-color: #ffe0a0; + --title-background-color: #4c63a8; + --data-background-color: #5a70b5; + --data-background-alternate-color: #4c63a8; + --data-color: #fff; + --data-alternate-color: #b7e7ff; +} + +#rikaichan-window[data-theme='lightblue'] { + --primary-color: #000; + --primary-background-color: #e6f4ff; + --kanji-color: #3082bf; + --kana-color: #00b366; + --kanji-readings-highlight-color: #00868b; + --conjugation-color: #808080; + --title-background-color: #bfe4ff; + --data-background-color: #dff1ff; + --data-background-alternate-color: #fff; + --data-color: #003d6b; + --data-alternate-color: #003d6b; +} + +#rikaichan-window[data-theme='black'] { + --primary-color: #fff; + --primary-background-color: #000; + --kanji-color: #7070e0; + --kana-color: #20a020; + --kanji-readings-highlight-color: #7070e0; + --conjugation-color: #a0a0a0; + --title-background-color: #303030; + --data-background-color: #505050; + --data-background-alternate-color: #303030; + --data-color: #e0e0e0; + --data-alternate-color: #f0f0f0; +} + +#rikaichan-window[data-theme='yellow'] { + --primary-color: #000; + --primary-background-color: #ffffbf; + --kanji-color: #7070e0; + --kana-color: #20a020; + --kanji-readings-highlight-color: #cd5c5c; + --conjugation-color: #a0a0a0; + --title-background-color: #f0f0b0; + --data-background-color: #ffffe6; + --data-background-alternate-color: #f7f7d0; + --data-color: #000; + --data-alternate-color: #000; +} + +/* End theme definitions */ + +/* this is to reset almost everything under the popup to a sane value */ +#rikaichan-window, +#rikaichan-window * { + background: transparent; + border: none !important; + border-spacing: 0; + color: var(--primary-color); + font: normal 14px sans-serif; + height: auto; + letter-spacing: normal; + margin: 0; + padding: 0; + text-align: left; + text-decoration: none; + text-indent: 0; + text-transform: none; + visibility: visible; + white-space: normal; + width: auto; + word-spacing: normal; +} + +#rikaichan-window { + background: var(--primary-background-color); + border: 1px solid #d0d0d0 !important; + border-radius: 5px; + left: 5px; + min-width: 100px; + padding: 4px; + position: absolute; + top: 5px; + z-index: 99992; +} + +/* used for word definitions */ + +#rikaichan-window .w-kanji { + color: var(--kanji-color); + font-size: 18px; + margin-right: 0.7em; +} + +#rikaichan-window .w-kana { + color: var(--kana-color); + font-size: 18px; +} + +#rikaichan-window .w-conj { + color: var(--conjugation-color); + font-size: 12px; +} + +#rikaichan-window .w-def { + font-size: 13px; +} + +#rikaichan-window .w-title { + background: var(--title-background-color); + color: var(--primary-color); + font-size: 10px; + padding: 2px; +} + +#rikaichan-window .w-na-tb td { + padding-right: 0.8em; + vertical-align: top; +} + +/* used for kanji information */ + +#rikaichan-window .k-main-tb { + width: 300px; +} + +#rikaichan-window .k-kanji { + color: var(--kanji-color); + font-family: serif; + font-size: 48px; +} + +#rikaichan-window .k-eigo { + font-size: 12px; +} + +/* kanji: readings */ + +#rikaichan-window .k-yomi { + color: var(--kana-color); + font-size: 14px; + margin: 4px 0; +} + +#rikaichan-window .k-yomi-hi { + border: 1px solid red; + color: var(--kanji-readings-highlight-color); +} + +#rikaichan-window .k-yomi-ti { + color: var(--primary-color); + font-size: 11px; +} + +/* kanji radical, grade, freq, strokes box */ + +#rikaichan-window .k-abox-tb { + clear: right; + float: right; + margin-bottom: 4px; + width: 120px; +} + +#rikaichan-window .k-abox-r, +#rikaichan-window .k-abox-s { + background: var(--data-background-color); + color: var(--data-color); + font-size: 12px; + padding: 1px 4px; + text-align: center; +} + +#rikaichan-window .k-abox-g, +#rikaichan-window .k-abox-f { + background: var(--data-background-alternate-color); + color: var(--data-alternate-color); + font-size: 12px; + padding: 1px 4px; + text-align: center; +} + +/* kanji components box */ + +#rikaichan-window .k-bbox-tb { + clear: right; + float: right; + margin-bottom: 4px; + width: 120px; +} + +/* Two sets of colors for separating rows */ +#rikaichan-window .k-bbox-0a, +#rikaichan-window .k-bbox-0b { + background: var(--data-background-color); + color: var(--data-color); + font-size: 11px; + padding: 1px 3px; + vertical-align: top; +} + +#rikaichan-window .k-bbox-1a, +#rikaichan-window .k-bbox-1b { + background: var(--data-background-alternate-color); + color: var(--data-alternate-color); + font-size: 11px; + padding: 1px 3px; + vertical-align: top; +} + +/* kanji: misc index */ + +#rikaichan-window .k-mix-tb { + width: 100%; +} + +#rikaichan-window .k-mix-td0 { + background: var(--data-background-color); + color: var(--data-color); + font-size: 12px; +} + +#rikaichan-window .k-mix-td1 { + background: var(--data-background-alternate-color); + color: var(--data-alternate-color); + font-size: 12px; +} + +#rikaichan-window .q-w { + /* unused */ + border-right: 1px dotted #b0b0b0 !important; + min-width: 300px; + padding: 0 2px; + vertical-align: top; +} + +#rikaichan-window .q-k { + padding: 0 2px; + vertical-align: top; +} + +#rikaichan-window .small-info { + font: small-caption; +} diff --git a/extension/manifest.json b/extension/manifest.json index f5fa14ee4..19fa27c5a 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -35,10 +35,5 @@ "all_frames": true } ], - "web_accessible_resources": [ - "css/popup-black.css", - "css/popup-blue.css", - "css/popup-lightblue.css", - "css/popup-yellow.css" - ] + "web_accessible_resources": ["css/popup.css"] } diff --git a/extension/rikaicontent.ts b/extension/rikaicontent.ts index ca670c801..216d07ba4 100644 --- a/extension/rikaicontent.ts +++ b/extension/rikaicontent.ts @@ -143,11 +143,7 @@ class RcxContent { ); css.setAttribute('rel', 'stylesheet'); css.setAttribute('type', 'text/css'); - const color = window.rikaichan!.config!.popupcolor; - css.setAttribute( - 'href', - chrome.extension.getURL('css/popup-' + color + '.css') - ); + css.setAttribute('href', chrome.extension.getURL('css/popup.css')); css.setAttribute('id', 'rikaichan-css'); topdoc.getElementsByTagName('head')[0].appendChild(css); @@ -165,6 +161,7 @@ class RcxContent { true ); } + popup.setAttribute('data-theme', window.rikaichan!.config!.popupcolor); popup.style.width = 'auto'; popup.style.height = 'auto'; diff --git a/extension/test/rikaicontent_test.ts b/extension/test/rikaicontent_test.ts index ab2a1846c..4126089ea 100644 --- a/extension/test/rikaicontent_test.ts +++ b/extension/test/rikaicontent_test.ts @@ -100,6 +100,36 @@ describe('RcxContent', () => { }); }); }); + + describe('showPopup', () => { + afterEach(() => { + rcxContent.disableTab(); + }); + + it('sets data-theme attribute of rikaikun window to config popupcolor value', () => { + rcxContent.enableTab({ popupcolor: 'redtest' } as Config); + + rcxContent.showPopup(''); + + // expect rikaikun window to have data-theme attribute set to config popupcolor value + expect( + document.querySelector('#rikaichan-window')!.dataset + .theme + ).to.equal('redtest'); + }); + + it('adds link tag pointing to "css/popup.css" to ', () => { + chrome.extension.getURL.callsFake((path: string) => { + return `http://fakebaseurl/${path}`; + }); + + rcxContent.showPopup(''); + + expect( + document.querySelector('head link')!.href + ).to.equal('http://fakebaseurl/css/popup.css'); + }); + }); }); function insertHtmlIntoDomAndReturnFirstTextNode(htmlString: string): Node {