fix hover:active:focus

css/style.css

@@ -67,35 +67,35 @@ h4 {
     outline: 0;
 }
 
-.btn-info:is(:focus,:focus-visible,:active,:active:focus) {
+.btn-info:is(:not(:hover):focus,:active:focus,:active:hover:focus) {
     outline: 5px dashed rgba(95, 177, 221, 0.5);
 }
 
-.btn-primary:is(:focus,:focus-visible,:active,:active:focus) {
+.btn-primary:is(:not(:hover):focus,:active:focus,:active:hover:focus) {
     outline: 5px dashed rgba(46, 109, 164, 0.5);
 }
 
-.btn-warning:is(:focus,:focus-visible,:active,:active:focus) {
+.btn-warning:is(:not(:hover):focus,:active:focus,:active:hover:focus) {
     outline: 5px dashed rgba(200, 157, 39, 0.5);
 }
 
-.btn-danger:is(:focus,:focus-visible,:active,:active:focus) {
+.btn-danger:is(:not(:hover):focus,:active:focus,:active:hover:focus) {
     outline: 5px dashed rgba(234, 71, 71, 0.5);
 }
 
-.btn-info:is(:hover) {
+.btn-info:is(:hover,:focus:hover) {
     outline: 10px double rgba(95, 177, 221, 0.5);
 }
 
-.btn-primary:is(:hover) {
+.btn-primary:is(:hover,:focus:hover) {
     outline: 10px double rgba(46, 109, 164, 0.5);
 }
 
-.btn-warning:is(:hover) {
+.btn-warning:is(:hover,:focus:hover) {
     outline: 10px double rgba(200, 157, 39, 0.5);
 }
 
-.btn-danger:is(:hover) {
+.btn-danger:is(:hover,:focus:hover) {
     outline: 10px double rgba(234, 71, 71, 0.5);
 }
 

index.html

@@ -111,7 +111,7 @@
             outline: 50px solid rgba(202, 202, 202, 0.5)
         }
 
-        .btn-dang:is(:hover:active, :active) {
+        .btn-dang:is(:hover:active:focus, :active) {
             outline: 150px double rgba(162, 6, 6, 0.5)
         }
 
@@ -187,7 +187,8 @@
                                 aria-hidden="true"></span>&nbsp;&nbsp;sans</a></li>
                 </ul>
             </div>
-            <a class="btn btn-info" id="random" href="/random/">random</a>
+            <a class="btn btn-info" id="random" href="/random/"><span class="glyphicon glyphicon-random"
+                aria-hidden="true"></span>&nbsp;&nbsp;random</a>
             <a class="btn btn-info" id="paint" href="/paint/"><span class="glyphicon glyphicon-pencil"
                     aria-hidden="true"></span>&nbsp;&nbsp;绘画板</a>
             <a class="btn btn-info" id="chess" href="/chess/"><span class="glyphicon glyphicon-record"

log/index.html

@@ -53,18 +53,22 @@
         }
 
         .btn-dang {
-            transition-duration: 200ms;
+            transition-duration: 1000ms;
+        }
+
+        .btn-dang.gee {
+            outline: 10px transparent
         }
 
         .btn-dang:is(:hover, :hover:focus) {
-            outline: 50px solid rgba(58, 58, 58, 0.5)
+            outline: 15px solid rgba(58, 58, 58, 0.8)
         }
 
         .btn-dang.gee:hover {
-            outline: 50px solid rgba(202, 202, 202, 0.5)
+            outline: 4000px solid rgba(0, 0, 0, 0.1)
         }
 
-        .btn-dang:is(:hover:active, :active) {
+        .btn-dang:is(:hover:active:focus, :active) {
             scale: 80%;
             transform: translate(-7px, -7px);
             outline: 150px double rgba(162, 6, 6, 0.5)
@@ -86,6 +90,14 @@
         <h1>网站日志</h1>
     </div>
 
+    <h3>
+        2022.12.4
+        <small>dark</small>
+    </h3>
+    <p>在首页加上了黑暗模式，以及非常愚蠢的秘密消息。</p>
+    <p>进一步完善按钮样式。</p>
+    <hr>
+
     <h3>
         2022.12.3
         <small><a href="/chem">chem</a></small>
@@ -98,7 +110,6 @@
     <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>
@@ -115,7 +126,7 @@
     </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>
+            href="/chemist?H2+O2=H2O">/chemist?H2+O2=H2O</a>）。</p>
     <p>用 WebSocket 可以实现服务器与客户端的即时通讯，原先搭载在 LeanCloud 上的五子棋计算部分可以迁移到本地了。</p>
 
     <hr>