Popup style updates (#1066)

* Replace compactGlossaries option with new glossaryLayoutMode option

* Update attributes

* Update attributes

* Update color definitions

* Fix default theme scrollbar

2 files changed, 37 insertions, 30 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index f9d5c25e..edd1b3d7 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -72,8 +72,10 @@
     --default-text-color: #333333;
     --light-text-color: #777777;
     --very-light-text-color: #999999;
-    --popuplar-kanji-text-color: var(--accent-color);
-
+    --kanji-text-color: var(--default-text-color);
+    --kanji-popular-text-color: var(--accent-color);
+    --kanji-rare-text-color: var(--very-light-text-color);
+    --kanji-furigana-text-color: inherit;
     --reason-text-color: var(--light-text-color);
 
     --light-border-color: #eeeeee;
@@ -115,7 +117,7 @@
     --progress-bar-indicator-color: var(--accent-color);
     --entry-current-indicator-color: var(--accent-color);
 }
-:root[data-yomichan-theme=dark] {
+:root[data-theme=dark] {
     /* Colors */
     --background-color: #1e1e1e;
     --glossary-image-background-color: #2f2f2f;
@@ -126,8 +128,10 @@
     --default-text-color: #d4d4d4;
     --light-text-color: #888888;
     --very-light-text-color: #666666;
-    --popuplar-kanji-text-color: var(--accent-color);
-
+    --kanji-text-color: var(--default-text-color);
+    --kanji-popular-text-color: var(--accent-color);
+    --kanji-rare-text-color: var(--very-light-text-color);
+    --kanji-furigana-text-color: inherit;
     --reason-text-color: var(--light-text-color);
 
     --light-border-color: #2f2f2f;
@@ -179,8 +183,8 @@
 
 
 /* General */
-:root[data-yomichan-page=float]:not([data-yomichan-theme]),
-:root[data-yomichan-page=float]:not([data-yomichan-theme]) body {
+:root[data-page-type=popup]:not([data-theme]),
+:root[data-page-type=popup]:not([data-theme]) body {
     background-color: transparent;
 }
 :root {
@@ -227,25 +231,25 @@ a {
 
 
 /* Scrollbars */
-:root:not([data-yomichan-theme=light]) .scrollbar {
+:root:not([data-theme=default]) .scrollbar {
     scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar {
     width: auto;
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-button {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button {
     height: 0;
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-thumb {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb {
     background-color: var(--scrollbar-thumb-color);
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track {
     background-color: var(--scrollbar-thumb-color);
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track-piece {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece {
     background-color: var(--scrollbar-track-color);
 }
-:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-corner {
+:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner {
     background-color: var(--scrollbar-track-color);
 }
 
@@ -586,17 +590,20 @@ button.action-button {
 }
 .term-expression .kanji-link {
     border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color);
-    color: var(--default-text-color);
+    color: var(--kanji-text-color);
     text-decoration: none;
     cursor: pointer;
 }
 .term-expression[data-frequency=popular] .term-expression-text,
 .term-expression[data-frequency=popular] .term-expression-text .kanji-link {
-    color: var(--popuplar-kanji-text-color);
+    color: var(--kanji-popular-text-color);
 }
 .term-expression[data-frequency=rare] .term-expression-text,
 .term-expression[data-frequency=rare] .term-expression-text .kanji-link {
-    color: var(--very-light-text-color);
+    color: var(--kanji-rare-text-color);
+}
+.term-expression-text>ruby>rt {
+    color: var(--kanji-furigana-text-color);
 }
 .entry-header2,
 .entry-header3 {
@@ -770,19 +777,19 @@ button.action-button {
 :root[data-audio-enabled=false] .action-play-audio {
     display: none;
 }
-:root[data-compact-glossaries=true] .term-definition-tag-list,
-:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) {
+:root[data-glossary-layout-mode=compact] .term-definition-tag-list,
+:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) {
     display: inline;
 }
-:root[data-compact-glossaries=true] .term-glossary-list {
+:root[data-glossary-layout-mode=compact] .term-glossary-list {
     display: inline;
     list-style: none;
     padding-left: 0;
 }
-:root[data-compact-glossaries=true] .term-glossary-list>li {
+:root[data-glossary-layout-mode=compact] .term-glossary-list>li {
     display: inline;
 }
-:root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child)::before {
+:root[data-glossary-layout-mode=compact] .term-glossary-list>li:not(:first-child)::before {
     white-space: pre-wrap;
     content: " | ";
     display: inline;
@@ -1022,29 +1029,29 @@ button.action-button {
     content: "]";
 }
 
-:root[data-compact-glossaries=true] .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-container {
     display: none;
     position: absolute;
     left: 0;
     top: 100%;
     z-index: 1;
 }
-:root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container {
     bottom: 100%;
     top: auto;
 }
-:root[data-compact-glossaries=true] .term-glossary-image-link {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link {
     position: relative;
     display: inline-block;
 }
-:root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container,
-:root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container {
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container,
+:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container {
     display: block;
 }
-:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text {
+:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text {
     display: none;
 }
-:root:not([data-compact-glossaries=true]) .term-glossary-image-description {
+:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description {
     display: block;
 }
 
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index d9024172..8c8f77e6 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -59,7 +59,7 @@
 :root[data-loaded=true] {
     --animation-duration: 0.125s;
 }
-:root[data-yomichan-theme=dark] {
+:root[data-theme=dark] {
     --text-color-default: #d8d8d8;
     --background-color: #1e1e1e;
     --shadow-color: rgba(255, 255, 255, 0.185);