Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add table #1020

Merged
merged 1 commit into from
Apr 25, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
add table
K1ngfish3r authored Mar 31, 2024
commit 59208f00549a26512214d2e0118513ae9b87b8d1
513 changes: 267 additions & 246 deletions android/app/src/main/assets/css/index.css
Original file line number Diff line number Diff line change
@@ -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%;
}
display: block;
width: 100%;
}