From ed5e599edb811a9d5faec24c53939258ff9dcc37 Mon Sep 17 00:00:00 2001
From: K1ngfish3r <trulyihu@gmail.com>
Date: Fri, 26 Apr 2024 01:16:46 +0800
Subject: [PATCH] add table style (#1020)

---
 android/app/src/main/assets/css/index.css | 513 +++++++++++-----------
 1 file changed, 267 insertions(+), 246 deletions(-)

diff --git a/android/app/src/main/assets/css/index.css b/android/app/src/main/assets/css/index.css
index d6c28298..8203a47b 100644
--- a/android/app/src/main/assets/css/index.css
+++ b/android/app/src/main/assets/css/index.css
@@ -1,113 +1,134 @@
 html {
-    scroll-behavior: smooth;
-    overflow-x: hidden;
-    padding-top: var(--StatusBar-currentHeight);
-    word-wrap: break-word;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+  padding-top: var(--StatusBar-currentHeight);
+  word-wrap: break-word;
 }
 
 ::selection {
-    color: var(--theme-onSecondary);
-    background-color: var(--theme-secondary);
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
 }
 
 ::-moz-selection {
-    color: var(--theme-onSecondary);
-    background-color: var(--theme-secondary);
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
 }
 
 body {
-    padding-left: var(--readerSettings-padding);
-    padding-right: var(--readerSettings-padding);
-    padding-bottom: 40px;
+  padding-left: var(--readerSettings-padding);
+  padding-right: var(--readerSettings-padding);
+  padding-bottom: 40px;
 
-    font-size: var(--readerSettings-textSize);
-    background-color: var(--readerSettings-theme);
-    color: var(--readerSettings-textColor);
-    text-align: var(--readerSettings-textAlign);
-    line-height: var(--readerSettings-lineHeight);
-    font-family: var(--readerSettings-fontFamily);
+  font-size: var(--readerSettings-textSize);
+  background-color: var(--readerSettings-theme);
+  color: var(--readerSettings-textColor);
+  text-align: var(--readerSettings-textAlign);
+  line-height: var(--readerSettings-lineHeight);
+  font-family: var(--readerSettings-fontFamily);
 }
 
 chapter {
-    display: block;
+  display: block;
 }
 
 hr {
-    margin-top: 20px;
-    margin-bottom: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 a {
-    color: var(--theme-primary);
+  color: var(--theme-primary);
 }
 
 img {
-    display: block;
-    width: auto;
-    height: auto;
-    max-width: 100%;
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+
+table {
+  background-color: var(--theme-onPrimary);
+  border-collapse: collapse;
+  color: var(--theme-primary);
+}
+
+th {
+  font-weight: bold;
+}
+
+td {
+  padding: 10px;
+  text-align: center;
+}
+
+table,
+th,
+td {
+  border: 1px solid var(--theme-outline);
 }
 
 .hidden {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .nextButton,
 .infoText {
-    width: 100%;
-    border-radius: 50px;
-    border-width: 1;
-    color: var(--theme-onPrimary);
-    background-color: var(--theme-primary);
-    font-family: var(--readerSettings-fontFamily);
-    font-size: 16px;
-    border-width: 0;
-    user-select: none;
+  width: 100%;
+  border-radius: 50px;
+  border-width: 1;
+  color: var(--theme-onPrimary);
+  background-color: var(--theme-primary);
+  font-family: var(--readerSettings-fontFamily);
+  font-size: 16px;
+  border-width: 0;
+  user-select: none;
 }
 
 .nextButton {
-    min-height: 40px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding: 0 16px;
+  min-height: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0 16px;
 }
 
 .infoText {
-    background-color: transparent;
-    text-align: center;
-    border: none;
-    margin: 0px;
-    color: inherit;
-    padding-top: 16px;
-    padding-bottom: 16px;
+  background-color: transparent;
+  text-align: center;
+  border: none;
+  margin: 0px;
+  color: inherit;
+  padding-top: 16px;
+  padding-bottom: 16px;
 }
 
 .chapterCtn {
-    min-height: var(--chapterCtn-height);
-    margin-bottom: auto;
+  min-height: var(--chapterCtn-height);
+  margin-bottom: auto;
 }
 
 .d-none {
-    display: none;
+  display: none;
 }
 
 #ToolWrapper {
-    position: fixed;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 5vw;
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 5vw;
 }
 
 #ToolWrapper.horizontal {
-    top: unset;
-    right: unset;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 120px;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
+  top: unset;
+  right: unset;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 120px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
 }
 
 @media only screen and (min-width: 500px) {
@@ -117,303 +138,303 @@ img {
 }
 
 #ToolWrapper.hidden {
-    opacity: 0;
-    right: 0;
+  opacity: 0;
+  right: 0;
 }
 
 #ToolWrapper.hidden.horizontal {
-    opacity: 0;
-    bottom: 0;
-    right: unset;
+  opacity: 0;
+  bottom: 0;
+  right: unset;
 }
 
 #TTS-Controller {
-    display: block;
+  display: block;
 }
 
 #ToolWrapper.horizontal > #TTS-Controller {
-    margin-left: 4px;
+  margin-left: 4px;
 }
 
-#TTS-Controller button{
-    background: var(--theme-surface-0-9);
-    border: 0;
+#TTS-Controller button {
+  background: var(--theme-surface-0-9);
+  border: 0;
 }
 
 #TTS-Controller svg {
-    fill: var(--theme-onSurface);
+  fill: var(--theme-onSurface);
 }
 
 #ToolWrapper > #ScrollBar {
-    margin-top: 8px;
-    width: 2.4rem;
-    height: 45vh;
-    min-height: 200px;
-    border-radius: 1.2rem;
-    background-color: var(--theme-surface-0-9);
-    touch-action: none;
-    font-size: 16px;
-    user-select: none;
+  margin-top: 8px;
+  width: 2.4rem;
+  height: 45vh;
+  min-height: 200px;
+  border-radius: 1.2rem;
+  background-color: var(--theme-surface-0-9);
+  touch-action: none;
+  font-size: 16px;
+  user-select: none;
 }
 
 #ScrollBar > .scrollbar-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--theme-onSurface);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--theme-onSurface);
 }
 
 #ScrollBar > .scrollbar-item.scrollbar-text {
-    height: 12.5%;
+  height: 12.5%;
 }
 
 #ScrollBar > .scrollbar-item#scrollbar-slider {
-    height: 75%;
-    align-items: unset;
+  height: 75%;
+  align-items: unset;
 }
 
 #ScrollBar #scrollbar-track {
-    width: 0.1rem;
-    height: 100%;
-    background-color: var(--theme-outline);
+  width: 0.1rem;
+  height: 100%;
+  background-color: var(--theme-outline);
 }
 
 #ScrollBar #scrollbar-progress {
-    width: 100%;
-    height: 0;
-    background-color: var(--theme-primary);
+  width: 100%;
+  height: 0;
+  background-color: var(--theme-primary);
 }
 
 #ScrollBar #scrollbar-thumb-wrapper {
-    position: relative;
-    top: 100%;
-    height: 2rem;
-    width: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-0.95rem, -1rem);
+  position: relative;
+  top: 100%;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-0.95rem, -1rem);
 }
 
 #ScrollBar #scrollbar-thumb {
-    top: 100%;
-    height: 1rem;
-    width: 1rem;
-    border-radius: 100%;
-    background-color: var(--theme-primary);
+  top: 100%;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100%;
+  background-color: var(--theme-primary);
 }
 
-#ToolWrapper.horizontal > #ScrollBar{
-    display: flex;
-    width: 80vw;
-    height: 2.4rem;
-    min-height: unset;
-    align-items: center;
-    margin-top: unset;
+#ToolWrapper.horizontal > #ScrollBar {
+  display: flex;
+  width: 80vw;
+  height: 2.4rem;
+  min-height: unset;
+  align-items: center;
+  margin-top: unset;
 }
 
 #ToolWrapper.horizontal > #ScrollBar > .scrollbar-item {
-    display: flex;
-    justify-content: center;
-    color: var(--theme-onSurface);
+  display: flex;
+  justify-content: center;
+  color: var(--theme-onSurface);
 }
 
 #ToolWrapper.horizontal > #ScrollBar > .scrollbar-item.scrollbar-text {
-    width: 12.5%;
+  width: 12.5%;
 }
 
 #ToolWrapper.horizontal > #ScrollBar > .scrollbar-item#scrollbar-slider {
-    width: 75%;
-    align-items: center;
+  width: 75%;
+  align-items: center;
 }
 
 #ToolWrapper.horizontal > #ScrollBar #scrollbar-track {
-    height: 0.1rem;
-    width: 100%;
-    background-color: var(--theme-outline);
+  height: 0.1rem;
+  width: 100%;
+  background-color: var(--theme-outline);
 }
 
 #ToolWrapper.horizontal > #ScrollBar #scrollbar-progress {
-    height: 100%;
-    width: 0;
-    background-color: var(--theme-primary);
+  height: 100%;
+  width: 0;
+  background-color: var(--theme-primary);
 }
 
 #ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb-wrapper {
-    position: relative;
-    left: 100%;
-    height: 2rem;
-    width: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-0.95rem, -1rem);
+  position: relative;
+  left: 100%;
+  height: 2rem;
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-0.95rem, -1rem);
 }
 
 #ToolWrapper.horizontal > #ScrollBar #scrollbar-thumb {
-    top: 100%;
-    height: 1rem;
-    width: 1rem;
-    border-radius: 100%;
-    background-color: var(--theme-primary);
+  top: 100%;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 100%;
+  background-color: var(--theme-primary);
 }
 
 #reader-footer-wrapper {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
 }
 
 #reader-footer {
-    display: flex;
-    flex: 3;
-    padding: 0.2rem 2rem;
-    background-color: var(--readerSettings-theme);
-    color: var(--readerSettings-textColor);
-    font-size: 1rem;
-    text-align: center;
-    user-select: none;
+  display: flex;
+  flex: 3;
+  padding: 0.2rem 2rem;
+  background-color: var(--readerSettings-theme);
+  color: var(--readerSettings-textColor);
+  font-size: 1rem;
+  text-align: center;
+  user-select: none;
 }
 
 .reader-footer-item {
-    flex: 1;
+  flex: 1;
 }
 .reader-footer-item:first-child {
-    text-align: left;
+  text-align: left;
 }
 .reader-footer-item:last-child {
-    text-align: right;
+  text-align: right;
 }
 
 tts.highlight {
-    color: var(--theme-onSecondary);
-    background-color: var(--theme-secondary);
+  color: var(--theme-onSecondary);
+  background-color: var(--theme-secondary);
 }
 
 .contextMenu {
-    position: absolute;
-    height: 0;
-    overflow: hidden;
-    background: var(--theme-surface-0-9);
-    -webkit-backdrop-filter: blur(1px);
-    backdrop-filter: blur(1px);
-    position: fixed;
-    top: var(--top);
-    left: var(--left);
-    -webkit-animation: menuAnimation 0.4s 0s both;
-    animation: menuAnimation 0.4s 0s both;
-    transform-origin: left;
-    list-style: none;
-    margin: 4px;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    z-index: 999999999;
+  position: absolute;
+  height: 0;
+  overflow: hidden;
+  background: var(--theme-surface-0-9);
+  -webkit-backdrop-filter: blur(1px);
+  backdrop-filter: blur(1px);
+  position: fixed;
+  top: var(--top);
+  left: var(--left);
+  -webkit-animation: menuAnimation 0.4s 0s both;
+  animation: menuAnimation 0.4s 0s both;
+  transform-origin: left;
+  list-style: none;
+  margin: 4px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  z-index: 999999999;
 }
 
 .contextMenu-item {
-    padding: 4px,
+  padding: 4px;
 }
 
 .contextMenu-button {
-    color: var(--theme-onSurface);
-    background: 0;
-    border: 0;
-    white-space: nowrap;
-    width: 100%;
-    border-radius: 4px;
-    padding: 6px 24px 6px 7px;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    width: 100%;
-    -webkit-animation: menuItemAnimation 0.2s 0s both;
-    animation: menuItemAnimation 0.2s 0s both;
-    font-family: var(--readerSettings-fontFamily);
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: var(--theme-rippleColor);
+  color: var(--theme-onSurface);
+  background: 0;
+  border: 0;
+  white-space: nowrap;
+  width: 100%;
+  border-radius: 4px;
+  padding: 6px 24px 6px 7px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  width: 100%;
+  -webkit-animation: menuItemAnimation 0.2s 0s both;
+  animation: menuItemAnimation 0.2s 0s both;
+  font-family: var(--readerSettings-fontFamily);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: var(--theme-rippleColor);
 }
 
 .contextMenu-button svg {
-    fill: var(--theme-onSurface);
+  fill: var(--theme-onSurface);
 }
 .contextMenu-button span {
-    margin-left: 4px;
+  margin-left: 4px;
 }
 
 @-webkit-keyframes menuAnimation {
-    0% {
-        opacity: 0;
-        transform: scale(0.5);
-    }
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
 
-    100% {
-        height: var(--height);
-        opacity: 1;
-        border-radius: 8px;
-        transform: scale(1);
-    }
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
 }
 
 @keyframes menuAnimation {
-    0% {
-        opacity: 0;
-        transform: scale(0.5);
-    }
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
 
-    100% {
-        height: var(--height);
-        opacity: 1;
-        border-radius: 8px;
-        transform: scale(1);
-    }
+  100% {
+    height: var(--height);
+    opacity: 1;
+    border-radius: 8px;
+    transform: scale(1);
+  }
 }
 
 @-webkit-keyframes menuItemAnimation {
-    0% {
-        opacity: 0;
-        transform: translateX(-10px);
-    }
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
 
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes menuItemAnimation {
-    0% {
-        opacity: 0;
-        transform: translateX(-10px);
-    }
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
 
-    100% {
-        opacity: 1;
-        transform: translateX(0);
-    }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 #Image-Modal {
-    position: fixed;
-    left: 0;
-    top: 0;
-    user-select: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  user-select: none;
 }
 
 #Image-Modal.show {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    background-color: var(--theme-surface-0-9);
-    align-items: center;
-    justify-content: center;
-    overflow: scroll;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  background-color: var(--theme-surface-0-9);
+  align-items: center;
+  justify-content: center;
+  overflow: scroll;
 }
 
 #Image img {
-    display: block;
-    width: 100%;
-}
\ No newline at end of file
+  display: block;
+  width: 100%;
+}