fix chrome button outline

chem/index.html

@@ -27,12 +27,12 @@
         .btn-default:focus,
         .btn-default:focus-visible,
         .btn-default:focus-within,
-        .btn-default:active {
-            outline: 10px double rgba(59, 86, 100, 0.5);
+        .btn-default:active:focus {
+            outline: 4px dashed rgba(59, 86, 100, 0.5);
         }
 
         .btn-default:hover {
-            outline: 4px dashed rgba(59, 86, 100, 0.5);
+            outline: 10px double rgba(59, 86, 100, 0.5);
         }
 
         .btn.disabled {

chess/index.html

@@ -85,7 +85,7 @@
             vertical-align: middle;
         }
 
-        .red{
+        .red {
             filter: drop-shadow(0 0 2px red);
             outline: 5px dashed rgba(234, 71, 71, 0.5);
         }
@@ -121,11 +121,17 @@
             background: radial-gradient(transparent, rgb(15 15 15 / 25%));
         }
 
-        .word:focus:not(:focus-visible) {
+        .word:focus:not(:focus-visible):not(.red),
+        .word:active:not(:focus-visible):not(.red),
+        .word:hover:not(.red) {
             background: radial-gradient(transparent, rgb(15 15 15 / 25%));
             outline: 0;
         }
 
+        .red:focus {
+            outline: 5px dashed rgba(234, 71, 71, 0.5);
+        }
+
         .tables {
             top: 0;
             left: 0;

css/style.css

@@ -63,23 +63,31 @@ h4 {
     filter: none;
 }
 
+.btn:focus:active,.btn:focus {
+    outline: 0;
+}
+
 .btn-info:focus,
-.btn-info:focus-visible {
+.btn-info:focus-visible,
+.btn-info:active:focus {
     outline: 5px dashed rgba(95, 177, 221, 0.5);
 }
 
 .btn-primary:focus,
-.btn-primary:focus-visible {
+.btn-primary:focus-visible,
+.btn-primary:active:focus {
     outline: 5px dashed rgba(46, 109, 164, 0.5);
 }
 
 .btn-warning:focus,
-.btn-warning:focus-visible {
+.btn-warning:focus-visible,
+.btn-warning:active:focus {
     outline: 5px dashed rgba(200, 157, 39, 0.5);
 }
 
 .btn-danger:focus,
-.btn-danger:focus-visible {
+.btn-danger:focus-visible,
+.btn-danger:active:focus {
     outline: 5px dashed rgba(234, 71, 71, 0.5);
 }
 

js/chem.js

@@ -108,9 +108,9 @@ function weigh(hash, mode = 0) {
     return parseInt(ans * 10000) / 10000;
 }
 function weighEquation(str, mode = 0) {
-    str = str.replace(/<\d*e[\+\-]>*/g, "").replace(/[^\dA-Za-z<>\(\)\+\-=\.]/g, "");
-    var q = str.split(/[=\+\-\.]/g)
-    var p = str.replace(/[^=\+\-\.]/g, "").replace('.', '*')
+    str = str.replace(/<\d*e[\+\-]>*/g, "").replace(/[^\dA-Za-z<>\(\)\+\-=\.;]/g, "");
+    var q = str.split(/[=\+\-\.;]/g)
+    var p = str.replace(/[^=\+\-\.;]/g, "").replace(/\./g, '*')
     var ans = ""
     if (str == "") return ""
     var n = p.length, sum = 0, gsum = "";
@@ -121,7 +121,7 @@ function weighEquation(str, mode = 0) {
         ans = ans + k + p.charAt(i)
     }
     if (n) ans += '\\)<br>\\(' + gsum + parseInt(sum * 10000) / 10000
-    return ans.replace('\*', "\\cdot");
+    return ans.replace(/\*/g, "\\cdot");
 }
 
 function parseEquation(str) {
@@ -142,12 +142,12 @@ function parseEquation(str) {
 
 function renderEquation(str) {
     str = str.replace(/[\[{]/g, "(").replace(/[\]}]/g, ")");
-    str = str.replace(/[^\dA-Za-z<>\(\)\+\-=\.]/g, "");
+    str = str.replace(/[^\dA-Za-z<>\(\)\+\-=\.;]/g, "");
     // console.log('Rendering equation', str)
     str = str.replace(/([A-Za-z]+)/g, "\\text{$1}");
     str = str.replace(/<(\d*)\\text\{e\}([\+\-])>/g, "^{$1$2}");
     str = str.replace(/([\}\)])(\d+)/g, "$1_{$2}");
-    str = str.replace('.', "\\cdot");
+    str = str.replace(/\./g, "\\cdot");
     // console.log(str)
     return str
 }
@@ -213,6 +213,7 @@ function balance() {
     if (running) return;
     $('#balBtn').text('配平...')
     $('#balBtn').addClass('disabled')
+    $('#frame').addClass('text-muted')
     running = 1;
     $.get('/chem?' + ((inputText == '') ? 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O' : inputText), function (e) {
         $('#frame')[0].innerHTML = (e.charAt(0) == '!') ? ('<pre class="text-danger bg-danger">' + e.slice(1, e.length) + '</pre>') : ('\\(' + renderEquation((inputText == '') ? 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O' : inputText)
@@ -221,6 +222,7 @@ function balance() {
         MathJax.typeset()
         $('#balBtn').text('配平')
         $('#balBtn').removeClass('disabled')
+        $('#frame').removeClass('text-muted')
         running = 0;
     })
 }

log/index.html

@@ -16,7 +16,8 @@
             text-shadow: rgb(85, 85, 85) 3px 2px 4px;
             display: inline-block;
         }
-        .noshadow{
+
+        .noshadow {
             text-shadow: none;
         }
     </style>
@@ -29,6 +30,21 @@
         <h1>网站日志</h1>
     </div>
 
+    <h3>
+        2022.12.3
+        <small><a href="/chem">chem</a></small>
+    </h3>
+    <p>把化学式配平、相对质量计算的网页实现出来了，接下来还要加上 MySQL 的上传。</p>
+    <p>为所有按钮加上了好玩的悬浮样式。这可真不容易，为了去掉浏览器自带的丑陋黑色边框，我进行了不懈的斗争，最后发现是除了 <code>:focus</code> 和 <code>:active</code> 选择器，还得写上
+        <code>:focus:active</code> 。
+    </p>
+    <button class="btn btn-info">看看</button>&nbsp;&nbsp;&nbsp;&nbsp;
+    <button class="btn btn-info"
+        style="outline: 10px double rgba(95, 177, 221, 0.5);">悬浮</button>&nbsp;&nbsp;&nbsp;&nbsp;
+    <button class="btn btn-info" style="outline: 5px dashed rgba(95, 177, 221, 0.5);">聚焦</button>
+
+    <hr>
+
     <h3>
         2022.12.2
         <small>MySQL</small>
@@ -42,7 +58,8 @@
         <small>WebSocket</small>
     </h3>
     <p>有了小崔给的主机，开辟了很多新领域。</p>
-    <p>不用暴力地琢磨纯静态页面了，可以开始自己开发网页后端。刚起步，先用 Node.js+Express 做后端。写了个配平化学式的接口（<a class="btn-xs btn-default noshadow" href="/chem?H2+O2=H2O">/chem?H2+O2=H2O</a>）。</p>
+    <p>不用暴力地琢磨纯静态页面了，可以开始自己开发网页后端。刚起步，先用 Node.js+Express 做后端。写了个配平化学式的接口（<a class="btn-xs btn-default noshadow"
+            href="/chem?H2+O2=H2O">/chem?H2+O2=H2O</a>）。</p>
     <p>用 WebSocket 可以实现服务器与客户端的即时通讯，原先搭载在 LeanCloud 上的五子棋计算部分可以迁移到本地了。</p>
 
     <hr>