Publish 2024-10-24

Author: alexanderby

elements/mobile-side.js

@@ -18,19 +18,25 @@ const locales = {
         check_out_exclusive: '查看独家高级主题和自定义颜色',
         simply_scan: '只需扫描二维码即可在手机上安装',
         reduce_brightness: '降低手机屏幕亮度',
-        with_dark_mobile: '使用我们的手机应用'
+        with_dark_mobile: '使用我们的手机应用',
+        mobile_app: '移动应用',
     },
 };
 
 const htmlText = `
 <section class="mob">
     <div class="mob-picture">
-        <div class="mob-picture__text mob-picture__text-1" data-text="reduce_brightness">
-            Reduce your phone screen brightness
+        <div class="mob-picture__text mob-picture__text-1" data-text="dark_reader_mobile">
+            <span class="mob-picture__text--darkreader-mobile">
+                <span class="mob-picture__text--darkreader">Dark Reader</span>
+                <span class="mob-picture__text--mobile" data-text="mobile_app">Mobile</span>
+            </span>
         </div>
+        <!--
         <div class="mob-picture__text mob-picture__text-2" data-text="with_dark_mobile">
             with <strong>Dark Reader Mobile app</strong>
         </div>
+        -->
     </div>
     <div class="mob-subtitle" style="display: none;">
         <a class="mob-text-link" href="${edgeURL}" target="_blank" rel="noopener" data-s="drand-side-text">
@@ -295,7 +301,7 @@ section {
     left: 0;
     position: absolute;
     text-align: center;
-    text-shadow: 0 0 1rem black, 0 0 0.5rem black;
+    text-shadow: 0 0 1rem black, 0 0 0.5rem black, 0 0 0.25rem black;
     width: 100%;
 }
 .mob-picture__text-1 {
@@ -309,6 +315,25 @@ section {
     font-weight: 400;
     /* -webkit-text-stroke: 0.0625rem; */
 }
+.mob-picture__text--darkreader-mobile {
+    display: inline-block;
+    font-family: system-ui, sans-serif;
+    font-size: 1.3125rem;
+    font-weight: 900;
+    margin-top: 0.4375rem;
+    text-transform: uppercase;
+    -webkit-text-stroke: 0.0625rem;
+}
+.mob-picture__text--darkreader {
+    background-image: linear-gradient(to right, #e7573b, #af6ce9, #40a6e5);
+    background-clip: text;
+    color: transparent;
+    margin-top: 0.25rem;
+    text-shadow: none;
+}
+.mob-picture__text--mobile {
+    font-weight: 100;
+}
 
 /*
 @media (max-height: 50rem) {

help/en/index.html

@@ -70,6 +70,12 @@ <h1>Help — Dark Reader</h1>
 <li><a href="#contacts">Contacts</a></li>
 <li><a href="../../tips/">Tips for advanced users</a></li>
 </ul>
+<h2 id="options-icon">Toolbar Icon</h2>
+
+<img src="/images/help/darkreader-pin-toolbar-icon.png" alt="Options icon" style="width: 20rem;" loading="lazy" />
+
+<p>If the Dark Reader <strong>icon is hidden</strong> after installation,
+click the <strong>Extensions</strong> button next to the address bar and then another button next to Dark Reader.</p>
 <h2 id="video" class="text-highlight">1-Minute Video Guide</h2>
 
 <iframe width="560" height="320" src="https://www.youtube-nocookie.com/embed/849mznBKmIQ?si=QpEUoKvD1KwpdOqx" title="Dark Reader quick guide" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
@@ -95,12 +101,6 @@ <h2 id="mobile-video" class="text-highlight">30-Seconds Video Guide (mobile app)
 <iframe width="320" height="480" src="https://www.youtube-nocookie.com/embed/9nQjBBe8K44?si=QpEUoKvD1KwpdOqx" title="Dark Reader iOS" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"></iframe>
 
 <p><a data-s="drios-video-text" href="https://apps.apple.com/us/app/dark-reader-for-safari/id1438243180?platform=iphone" target="_blank" rel="noopener">Download on the App Store</a></p>
-<h2 id="options-icon">Toolbar Icon</h2>
-
-<img src="/images/help/darkreader-pin-toolbar-icon.png" alt="Options icon" style="width: 20rem;" loading="lazy" />
-
-<p>If the Dark Reader <strong>icon is hidden</strong> after installation,
-click the <strong>Extensions</strong> button next to the address bar and then another button next to Dark Reader.</p>
 <h2 id="top-section">Top Section</h2>
 
 <img src="/images/help/darkreader-top-section.png" alt="Top section" style="width: 15rem;" loading="lazy" />

styles/help-topic.css

@@ -454,3 +454,7 @@ html[data-p="p"] .page-grid-inside > darkreader-backers-top-short {
         width: 100%;
     }
 }
+
+html:not(.android) .intro {
+    display: none;
+}