QRious2 (#2156)

web/assets/css/custom.css

@@ -39,6 +39,42 @@
     --dark-color-tooltip: rgba(61, 76, 104, 0.9);
 }
 
+html[data-theme-animations='off'] {
+    .ant-menu,
+    .ant-layout-sider,
+    .ant-card,
+    .ant-tag,
+    .ant-progress-circle > *,
+    .ant-input,
+    .ant-table-row-expand-icon,
+    .ant-switch,
+    .ant-table-thead > tr > th,
+    .ant-select-selection,
+    .ant-btn,
+    .ant-input-number,
+    .ant-input-group-addon,
+    .ant-checkbox-inner,
+    .ant-progress-bg, .ant-progress-success-bg,
+    .ant-radio-button-wrapper:not(:first-child):before,
+    .ant-radio-button-wrapper,
+    #login {
+        transition: border 0s, background 0s !important;
+    }
+
+    .ant-menu-item, .ant-menu-submenu-title,
+    .ant-alert-close-icon .anticon-close,
+    .ant-tabs-nav .ant-tabs-tab,
+    .ant-input-number-input,
+    .ant-collapse>.ant-collapse-item>.ant-collapse-header,
+    .Line-Hover {
+        transition: color 0s !important;
+    }
+
+    .wave-btn-bg {
+        transition: width 0s !important;
+    }
+}
+
 html[data-theme='ultra-dark'] {
     --dark-color-background: #21242a;
     --dark-color-surface-100: #0c0e12;
@@ -1413,3 +1449,11 @@ b, strong {
     transition: transform 0.3s ease-out;
     content: "";
 }
+
+.ant-menu-item:active, .ant-menu-submenu-title:active {
+    background: transparent;
+}
+
+.ant-menu-theme-switch.ant-menu-item .ant-switch:not(.ant-switch-disabled):active:after, .ant-switch:not(.ant-switch-disabled):active:before {
+    width: 16px;
+}

web/html/common/qrcode_modal.html

@@ -78,10 +78,13 @@
             setQrCode(elmentId, content) {
                 new QRious({
                     element: document.querySelector('#' + elmentId),
-                    size: 300,
+                    size: 400,
                     value: content,
-                    background: 'transparent',
+                    background: 'white',
-                    foreground: 'black'
+                    backgroundAlpha: 0,
+                    foreground: 'black',
+                    padding: 2,
+                    level: 'L'
                 });
             },
             genSubLink(subID) {

web/html/xui/component/themeSwitch.html

@@ -1,6 +1,6 @@
 {{define "component/themeSwitchTemplate"}}
 <template>
-  <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
+  <a-menu class="change-theme" :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
     <a-menu-item mode="inline" class="ant-menu-theme-switch">
       <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
       <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
@@ -57,6 +57,13 @@
         getContainer: () => document.getElementById('message')
       });
       document.getElementById('message').className = themeSwitcher.currentTheme;
+      const themeAnimations = document.querySelector('.change-theme');
+      themeAnimations.addEventListener('mousedown', () => {
+        document.documentElement.setAttribute('data-theme-animations', 'off');
+      });
+      themeAnimations.addEventListener('mouseleave', () => {
+        document.documentElement.removeAttribute('data-theme-animations');
+      });
     }
   });
 </script>

web/html/xui/inbounds.html

@@ -458,7 +458,7 @@
 </a-layout>
 {{template "js" .}}
 <script src="{{ .base_path }}assets/base64/base64.min.js"></script>
-<script src="{{ .base_path }}assets/qrcode/qrious.min.js"></script>
+<script src="{{ .base_path }}assets/qrcode/qrious2.min.js"></script>
 <script src="{{ .base_path }}assets/clipboard/clipboard.min.js"></script>
 <script src="{{ .base_path }}assets/uri/URI.min.js"></script>
 <script src="{{ .base_path }}assets/js/model/xray.js?{{ .cur_ver }}"></script>