Begin UI updates

yomidevs · Jan 6, 2024 · 667a82c · 667a82c
1 parent 60276d4
commit 667a82c
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 23 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -261,6 +261,13 @@
 }
 body {
     overflow: hidden;
+    overflow-y: scroll;
+    padding: 1em 1em 200px 1em;
+    -ms-overflow-style: none;  /* Internet Explorer 10+ */
+    scrollbar-width: none;  /* Firefox */
+}
+body::-webkit-scrollbar {
+    display: none;  /* Safari and Chrome */
 }
 ol, ul {
     margin-top: 0;
@@ -374,8 +381,6 @@ a {
     bottom: 0;
     display: flex;
     flex-flow: column nowrap;
-    overflow-x: hidden;
-    overflow-y: scroll;
     align-items: stretch;
     justify-content: flex-start;
 }
@@ -420,7 +425,6 @@ a {
     height: 100%;
     display: flex;
     flex-flow: row nowrap;
-    overflow: hidden;
     align-items: stretch;
     align-content: stretch;
     justify-content: center;
@@ -716,6 +720,7 @@ button.action-button:active {
     padding: calc(2.5em / var(--font-size-no-units)) 0.375em calc(2.5em / var(--font-size-no-units)) 0.375em;
     color: var(--tag-text-color);
     cursor: pointer;
+    width: 100%;
 }
 .tag-label-content {
     display: block;
@@ -775,6 +780,7 @@ button.action-button:active {
 }
 .tag[data-category=dictionary] {
     --tag-color: var(--tag-dictionary-background-color);
+    flex-grow: 1;
 }
 .tag[data-category=frequency] {
     --tag-color: var(--tag-frequency-background-color);
@@ -792,21 +798,31 @@ button.action-button:active {
 
 /* Entries */
 .entry {
-    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+    padding: 0;
     position: relative;
+    background-color: color-mix(in oklab, var(--background-color), transparent 2%);
+    border-radius: 10px;
+    border: 1px solid color-mix(in oklab, var(--text-color), transparent 60%);
+    box-shadow: 0.1em 0.1em 1em color-mix(in oklab, var(--text-color), transparent 60%);
+    overflow: hidden;
 }
 .entry+.entry {
-    border-top: var(--thin-border-size) solid var(--light-border-color);
+    margin-top: 1em;
 }
 .entry-body {
     clear: both;
 }
+.entry-body-section {
+    padding: 0 10px;
+}
 .entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions],
 .entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies],
 .entry[data-pronunciation-count='0'] .entry-body-section[data-section-type=pronunciations] {
     display: none;
 }
-
+.entry-header {
+    padding: 0.75em 1em 0.25em 10px;
+}
 
 /* Inflections */
 .inflection-list {
@@ -1074,19 +1090,20 @@ button.action-button:active {
 
 /* Definitions */
 .definition-list {
-    margin: 0;
-    padding: 0 0 0 var(--list-padding1);
-    list-style-type: decimal;
+    margin: 0 -10px;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
 }
 .definition-list[data-count='0'],
 .definition-list[data-count='1'] {
     padding-left: 0;
-    list-style-type: none;
 }
 .gloss-list {
     margin: 0;
     padding: 0 0 0 var(--list-padding2);
     list-style-type: circle;
+    line-height: 1;
 }
 .gloss-list[data-count='0'],
 .gloss-list[data-count='1'] {
@@ -1100,6 +1117,12 @@ button.action-button:active {
 .gloss-content {
     display: block;
     white-space: pre-line;
+    line-height: 1.1;
+}
+.gloss-content br {
+    content: "";
+    display: block;
+    padding-top: 0.4em;
 }
 .definition-disambiguation-list {
     color: var(--text-color-light3);
@@ -1128,8 +1151,13 @@ button.action-button:active {
     display: none;
 }
 .definition-item {
-    display: list-item;
+    display: block;
     position: relative;
+    flex-basis: calc(100% / 4 - 2px);
+    margin: 1px;
+}
+.definition-list[data-count='1'] .definition-item, .definition-list[data-count='2'] .definition-item{
+    flex-grow: 1;
 }
 .definition-item-inner.collapsible.collapsed {
     max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
@@ -1142,6 +1170,7 @@ button.action-button:active {
 .definition-item-inner {
     display: flex;
     flex-flow: row nowrap;
+    padding: 0 10px;
 }
 .definition-item-content {
     width: 100%;
@@ -1196,7 +1225,9 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 .definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon {
     transform: rotate(180deg);
 }
-
+.definition-tag-list {
+    display: flex;
+}
 
 /* Frequencies */
 .frequency-group-item {

diff --git a/ext/css/material.css b/ext/css/material.css
@@ -199,7 +199,6 @@ body {
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-    background-color: var(--background-color);
     color: var(--text-color);
 }
 

diff --git a/ext/css/popup-outer.css b/ext/css/popup-outer.css
@@ -19,21 +19,13 @@
 iframe.yomitan-popup {
     all: initial;
     font-size: 1px;
-    background-color: #ffffff;
-    border: 1em solid #999999;
-    box-shadow: 0 0 10em rgba(0, 0, 0, 0.5);
     position: fixed;
     resize: none;
     visibility: hidden;
     z-index: 2147483647;
     box-sizing: border-box;
-}
-iframe.yomitan-popup[data-theme=dark] {
-    background-color: #1e1e1e;
-    border-color: #666666;
-}
-iframe.yomitan-popup[data-outer-theme=dark] {
-    box-shadow: 0 0 10em rgba(255, 255, 255, 0.5);
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
+    mask-image: linear-gradient(to bottom, black calc(100% - 50px), transparent 100%);
 }
 iframe.yomitan-popup[data-popup-display-mode=full-width] {
     border-left: none;

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
@@ -215,6 +215,9 @@
 
 
 /* Structured content glossary styles */
+.gloss-sc-div {
+    margin-bottom: 0.4em;
+}
 .gloss-sc-table-container {
     display: block;
 }