update dist

immersive-translate · Mar 22, 2024 · 2850039 · 2850039
1 parent 25d9a10
commit 2850039
Show file tree

Hide file tree

Showing 4 changed files with 288 additions and 137 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -5,11 +5,11 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="immersive-translate-options" content="true" />
-    <link rel="stylesheet" href="styles/pico.css?v=1710945129" />
-    <link rel="stylesheet" href="styles/notie.css?v=1710945129" />
-    <link rel="stylesheet" href="styles/common.css?v=1710945129" />
-    <link rel="stylesheet" href="styles/options.css?v=1710945129" />
-    <link rel="stylesheet" href="styles/input.css?v=1710945129" />
+    <link rel="stylesheet" href="styles/pico.css?v=1711120101" />
+    <link rel="stylesheet" href="styles/notie.css?v=1711120101" />
+    <link rel="stylesheet" href="styles/common.css?v=1711120101" />
+    <link rel="stylesheet" href="styles/options.css?v=1711120101" />
+    <link rel="stylesheet" href="styles/input.css?v=1711120101" />
   </head>
   <body>
     <div id="immersive-translate-status">Loading...</div>
@@ -49,6 +49,6 @@
         value=""
       />
     </div>
-    <script src="./options.js?v=1710945129"></script>
+    <script src="./options.js?v=1711120101"></script>
   </body>
 </html>
diff --git a/dist/options.js b/dist/options.js
diff --git a/dist/styles/options.css b/dist/styles/options.css
@@ -25,6 +25,12 @@
   --modal-overlay-backdrop-filter: blur(0.25rem);
 }
 
+.header-right {
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+}
+
 .pro-input-radio {
   flex: 0 1 24px;
 }
@@ -89,6 +95,10 @@ body {
   box-shadow: 0px 1px 0 var(--nav-border-color);
 }
 
+main>aside>nav ul {
+  margin: 0 !important;
+}
+
 @media (min-width: 992px) {
   #mount>nav ul:first-of-type li:nth-of-type(2) {
     display: inline;
@@ -115,7 +125,7 @@ body {
   min-width: 0;
 }
 
-main>aside nav {
+.menu-nav {
   width: 100%;
   padding-bottom: var(--block-spacing-vertical);
 }
@@ -125,7 +135,7 @@ textarea::placeholder {
 }
 
 @media (min-width: 992px) {
-  main>aside nav {
+  .menu-nav {
     position: fixed;
     width: 250px;
     max-height: calc(100vh - 5.5rem);
@@ -651,6 +661,111 @@ article {
     margin-left: -2rem;
   }
 }
+
 .display-none {
   display: none;
 }
+
+
+.header-navbar {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-shadow: 0px 2px 2px 0px #0000000F;
+  padding: 22px 64px !important;
+  position: fixed;
+  background-color: var(--background-color);
+  display: flex;
+  z-index: 2147483647;
+}
+
+.header-navbar a:hover,
+.header-navbar a:focus {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+.header-navbar-height {
+  height: 80px;
+}
+
+.header-navbar-brand {
+  display: flex;
+  align-items: center;
+}
+
+.header-navbar-brand h1 {
+  color: var(--h1-color);
+  font-weight: bold;
+  font-size: 1rem;
+  line-height: 1rem;
+  margin: 0 0 0 8px;
+}
+
+.header-navbar-item {
+  display: flex;
+  align-items: center;
+}
+
+.header-navbar-item span {
+  margin-left: 4px;
+  color: var(--h3-color);
+}
+
+.header-navbar-item svg {
+  fill: var(--h3-color);
+}
+
+.menu-nav {
+  height: calc(100vh - 180px);
+  border-right: 1px solid var(--muted-border-color);
+  padding-top: 10px;
+}
+
+.version {
+  color: #999;
+  font-size: 0.85rem;
+  align-self: center;
+  margin-left: 12px;
+}
+
+@media screen and (max-width: 992px) {
+  .menu-nav {
+    height: unset;
+    border-right: none;
+  }
+}
+
+@media screen and (max-width: 820px) {
+  .header-navbar {
+    padding: 12px 16px !important;
+  }
+
+  .header-navbar-height {
+    height: 40px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .header {
+    padding: 12px 0.5rem !important;
+    font-size: 14px;
+  }
+
+  .header-brand {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .header-item {
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  .mobile-hidden {
+    display: none;
+  }
+}
diff --git a/dist/styles/pico.css b/dist/styles/pico.css
@@ -206,7 +206,7 @@ kbd {
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
   --background-color: #fff;
-  --background-light-green: #F5F7F9; 
+  --background-light-green: #F5F7F9;
   --color: hsl(205deg, 20%, 32%);
   --h1-color: hsl(205deg, 30%, 15%);
   --h2-color: #24333e;
@@ -307,13 +307,16 @@ kbd {
   --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA=");
+  --float-ball-more-button-border-color: #F6F6F6;
+  --float-ball-more-button-background-color: #FCFCFC;
+  --float-ball-more-button-svg-color: #6C6F73;
   color-scheme: light;
 }
 
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --background-color: #11191f;
-    --background-light-green: #141e26; 
+    --background-light-green: #141e26;
     --color: hsl(205deg, 16%, 77%);
     --h1-color: hsl(205deg, 20%, 94%);
     --h2-color: #e1e6eb;
@@ -421,7 +424,7 @@ kbd {
 }
 [data-theme="dark"] {
   --background-color: #11191f;
-  --background-light-green: #141e26; 
+  --background-light-green: #141e26;
   --color: hsl(205deg, 16%, 77%);
   --h1-color: hsl(205deg, 20%, 94%);
   --h2-color: #e1e6eb;