update dist

immersive-translate · Jun 21, 2023 · e641586 · e641586
1 parent 2bdef95
commit e641586
Show file tree

Hide file tree

Showing 21 changed files with 3,346 additions and 966 deletions.
diff --git a/dist/chrome/background.js b/dist/chrome/background.js
diff --git a/dist/chrome/content_script.js b/dist/chrome/content_script.js
diff --git a/dist/chrome/libs/foliate-js/make.js b/dist/chrome/libs/foliate-js/make.js
diff --git a/dist/chrome/libs/subtitle/subtitle.js b/dist/chrome/libs/subtitle/subtitle.js
diff --git a/dist/chrome/manifest.json b/dist/chrome/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_brandName__",
   "description": "__MSG_brandDescription__",
-  "version": "0.6.16",
+  "version": "0.6.17",
   "default_locale": "en",
   "background": {
     "service_worker": "background.js"

diff --git a/dist/chrome/options.js b/dist/chrome/options.js
diff --git a/dist/chrome/popup.js b/dist/chrome/popup.js
diff --git a/dist/chrome/styles/inject.css b/dist/chrome/styles/inject.css
@@ -55,7 +55,7 @@
 
 .immersive-translate-target-translation-block-wrapper {
   margin: 8px 0 !important;
-  display: block;
+  display: inline-block;
 }
 
 .immersive-translate-target-translation-pdf-block-wrapper {
@@ -281,34 +281,76 @@
   font-size: 15px !important;
 }
 
-.immersive-translate-error {
-  color: red;
+.immersive-translate-error-toast {
+  position: fixed;
+  top: 5%;
+  z-index: 99999999;
+  left: 0;
+  right: 0;
+  margin: auto;
+  max-width: 300px;
+  padding: 16px;
+  border-radius: 12px;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+@media all and (min-width: 750px) {
+  .immersive-translate-error-toast {
+    max-width: 400px;
+  }
 }
 
-.immersive-translate-clickable-button {
-  align-items: normal;
-  background-color: rgba(0, 0, 0, 0);
-  border-color: rgb(0, 0, 238);
-  border-style: none;
-  box-sizing: content-box;
-  color: rgb(0, 0, 238);
+.immersive-translate-error-toast>span {
+  font-size: 16px;
+  color: white;
+  text-align: center;
+  margin: 0 16px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.immersive-translate-error-toast :first-child {
+  width: 32px;
+  height: 32px;
+  background: center / contain url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAxlBMVEUAAADpTInqTIjpSofnSIfqS4nfS4XqS4nqTIjsTYnrTInqTIroS4jvQIDqTIn////+/v7rSYjpTIn8/v7uaZzrTIr9/f3wfansWJL88/b85e73qc39+/v3xNnylrvrVI/98fb62Obva5/8+fr76vH4y9zpSIj74e353Oj1ocTzm77xhK/veKbtYpjsXJTqU47oTInxjrXyh7L99fj40eH2ttH1udD3sc31ssz1rMnykLXucqPtbqD85e/1xdn2u9DzqcXrUY6FaJb8AAAADnRSTlMA34BgIM8Q37/fz7+/EGOHcVQAAAGhSURBVDjLhZPncuowEEZFTW7bXVU7xsYYTO/p7bb3f6lICIOYJOT4h7/VnFmvrBFjrF3/CR/SajBHswafctG0Qg3O8O0Xa8BZ6uw7eLjqr30SofCDVSkemMinfL1ecy20r5ygR5zz3ArcAqJExPTPKhDENEmS30Q9+yo4lEQkqVTiIEAHCT10xWERRdH0Bq0aCOPZNDV3s0xaYce1lHEoDHU8wEh3qRJypNcTAeKUIjgKMeGLDoRCLVLTVf+Ownj8Kk6H9HM6QXPgYjQSB0F00EJEu10ILQrs/QeP77BSSr0MzLOyuJJQbnUoOOIUI/A8EeJk9E4YUHUWiRyTVKGgQUB8/3e/NpdGlfI+FMQyWsCBWyz4A/ZyHXyiiz0Ne5aGZssoxRmcChw8/EFKQ5JwwkUo3FRT5yXS7q+Y/rHDZmFktzpGMvO+5QofA4FPpEmGw+EWRCFvnaof7Zhe8NuYSLR0xErKLThUSs8gnODh87ssy6438yzbLzxl012HS19vfCf3CNhnbWOL1eEsDda+gDPUvri8tSZzNFrwIZf1NmNvqC1I/t8j7nYAAAAASUVORK5CYII=');
+}
+
+.immersive-translate-error-toast :last-child {
+  background: #EA4C89;
+  border-radius: 8px;
+  padding: 6px 16px;
+  color: white;
+  font-size: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   cursor: pointer;
-  display: inline;
-  font: inherit;
-  height: auto;
+  height: fit-content;
+}
+
+.immersive-translate-error-toast :last-child > i {
+  width: 18px;
+  height: 18px;
   padding: 0;
-  perspective-origin: 0 0;
-  text-align: start;
-  transform-origin: 0 0;
-  width: auto;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-logical-height: 1em;
-  /* Chrome ignores auto, so we have to use this hack to set the correct height  */
-  -webkit-logical-width: auto;
-  /* Chrome ignores auto, but here for completeness */
+  display: inline-block;
+  margin-right: 4px;
+  background: center / contain no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzIyIDcuNmMuMjA2LjI4IDAgLjY3LS41MDcuNjdoLTEuNTM4YS40MTguNDE4IDAgMCAwLS40MjEuMzk3Yy0uMjM2IDIuNzc2LTIuNTg0IDQuOTE3LTUuNDEzIDQuOTMzYTUuMzE4IDUuMzE4IDAgMCAxLTEuMTY4LS4xMjdjMi4zMDQtLjUxNiA0LjAxMi0yLjQzIDQuMjM2LTQuNzQ3YS40Mi40MiAwIDAgMC0uMTE0LS4zMjEuNDMzLjQzMyAwIDAgMC0uMzE2LS4xMzZIOS40NjdhLjQ0LjQ0IDAgMCAxLS4zODEtLjIyOS40MjYuNDI2IDAgMCAxIC4wMi0uNDRsMi45NTYtNC4xN2EuNDMxLjQzMSAwIDAgMSAuNzEzIDBsMi45NDcgNC4xN1pNLjI1IDUuOTU4YS40My40MyAwIDAgMSAuMzc3LS4yMjZoMS43MThhLjQzNi40MzYgMCAwIDAgLjQ1NS0uMzk4QzMuMDI2IDIuNTczIDUuMzUuNDM1IDguMTYxLjRjLjM5My0uMDAxLjc4NS4wNDIgMS4xNjkuMTI3LTIuMzA4LjUxNy00LjAxNiAyLjQzNS00LjIzNiA0Ljc1NWEuNDEuNDEgMCAwIDAgLjExMy4zMTkuNDI0LjQyNCAwIDAgMCAuMzE3LjEzaDEuMDNhLjQyMi40MjIgMCAwIDEgLjM4LjIyNS40MS40MSAwIDAgMS0uMDM2LjQzNWwtMi45NjQgNC4xODhhLjQzMi40MzIgMCAwIDEtLjY5NiAwTC4yNzQgNi4zOTFhLjQxOC40MTggMCAwIDEtLjAyNC0uNDM0WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+);
+}
+
+.immersive-translate-error {}
+
+.immersive-translate-clickable-button {
+  cursor: pointer;
 }
 
+.immersive-translate-help-button {
+  cursor: help;
+}
 .immersive-translate-loading-spinner {
   vertical-align: middle !important;
   width: 10px !important;
@@ -339,26 +381,42 @@
   }
 }
 
+.immersive-translate-error-wrapper {
+  position: relative;
+  display: inline-flex;
+  padding: 6px;
+  margin: 0 12px;
+}
+
 .immersive-translate-tooltip {
   position: relative;
-  display: inline-block;
-  border-bottom: 1px dashed #000;
+  display: inline-flex;
   /* little indicater to indicate it's hoverable */
 }
 
-.immersive-translate-tooltip:before {
-  content: attr(data-immersive-translate-tooltip-text);
+.immersive-translate-tooltip:hover .immersive-translate-tooltip-content {
+  display: block;
+}
+
+.immersive-translate-tooltip:hover+.immersive-translate-tooltip-content {
+  display: block;
+}
+
+.immersive-translate-tooltip-content-table {
+  left: unset !important;
+  bottom: unset !important;
+  transform: translate(-10%, 50%) !important;
+}
+
+.immersive-translate-tooltip-content {
   /* here's the magic */
   position: absolute;
   z-index: 100000000000;
 
-  /* vertically center */
-  top: 50%;
-  transform: translateY(-50%);
-
-  /* move to right */
-  left: 100%;
-  margin-left: 15px;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 110%);
+  line-height: 1;
   /* and add a small left margin */
 
   /* basic styles */
@@ -368,10 +426,10 @@
   white-space: pre-line;
   padding: 10px;
   border-radius: 10px;
-  background: #000;
+  background: #000C;
   color: #fff;
   text-align: center;
-
+  font-size: 14px;
   display: none;
   /* hide by default */
 }
@@ -398,4 +456,94 @@
   to {
     transform: rotate(359deg);
   }
-}
+}
+
+.immersive-translate-modal {
+  display: none;
+  position: fixed;
+  z-index: 1000000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.immersive-translate-modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  border-radius: 10px;
+  width: 80%;
+  max-width: 500px;
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
+    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+}
+.immersive-translate-modal-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin-bottom: 20px;
+  color: hsl(205,20%,32%);
+}
+.immersive-translate-modal-body {
+  color:  hsl(205,20%,32%)
+}
+
+.immersive-translate-close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.immersive-translate-close:hover,
+.immersive-translate-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.immersive-translate-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+
+.immersive-translate-btn {
+  color: #fff;
+  background-color: #ea4c89;
+  border: none;
+  font-size: 14px;
+  margin: 5px;
+  padding: 10px 20px;
+  font-size: 1rem;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.immersive-translate-cancel-btn {
+  /* gray color */
+  background-color: rgb(89, 107, 120);
+}
+
+.immersive-translate-btn:hover {
+  background-color: #f082ac;
+}
+.immersive-translate-cancel-btn:hover {
+  background-color: hsl(205,20%,32%);
+}
+
+
+.immersive-translate-btn svg {
+  margin-right: 5px;
+}
+