Home Explore Help
Register Sign In
schtonn
/
public
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add dark mode

schtonn 2 years ago
parent
b470ba1557
commit
d2928fb37e
4 changed files with 224 additions and 76 deletions
Split View Show Diff Stats
  1. 8 20
      css/style.css
  2. 147 44
      index.html
  3. 59 2
      log/index.html
  4. 10 10
      score/index.html

+ 8 - 20
css/style.css
View File 

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

+ 147 - 44
index.html
View File 

@@ -29,6 +29,10 @@
 
     <!-- <link rel="stylesheet" href="/css/style.css"> -->
 
     <title>schtonn</title>
 
     <style>
 
+        * {
 
+            transition-duration: 300ms;
 
+        }
 
+
 
         .btn {
 
             text-shadow: rgb(133, 133, 130) 1px 2px 3px;
 
             transition-duration: 100ms;
 
@@ -55,7 +59,86 @@
 
         #gravity:hover {
 
             text-shadow: seagreen -1px -2px 3px, grey 1px 2px 3px, whitesmoke -1px 2px 3px;
 
         }
 
+
 
+
 
+        #log:hover {
 
+            text-shadow: floralwhite -1px -2px 3px, grey 1px 2px 3px, black -1px 2px 2px;
 
+        }
 
+
 
+        #chem:hover {
 
+            text-shadow: red -1px -2px 3px, yellow 1px 2px 3px, green -1px 2px 3px;
 
+        }
 
+
 
+        .btn {
 
+            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
 
+            display: inline-block;
 
+        }
 
+
 
+        .btn-xs.gee {
 
+            background-color: rgb(70, 59, 150);
 
+            color: white;
 
+        }
 
+
 
+        code.gee {
 
+            background-color: rgb(70, 59, 150);
 
+        }
 
+
 
+        .noshadow {
 
+            text-shadow: none;
 
+        }
 
+
 
+        .gee ::selection {
 
+            color: white;
 
+            text-decoration: underline wavy #FF3028;
 
+            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
 
+            background-color: black;
 
+        }
 
+
 
+        .gee {
 
+            color: white;
 
+            background-color: black;
 
+        }
 
+
 
+        .btn-dang {
 
+            transition-duration: 200ms;
 
+        }
 
+
 
+        .btn-dang:is(:hover, :hover:focus) {
 
+            outline: 50px solid rgba(58, 58, 58, 0.5)
 
+        }
 
+
 
+        .btn-dang.gee:hover {
 
+            outline: 50px solid rgba(202, 202, 202, 0.5)
 
+        }
 
+
 
+        .btn-dang:is(:hover:active, :active) {
 
+            outline: 150px double rgba(162, 6, 6, 0.5)
 
+        }
 
+
 
+        .secret,
 
+        .secret>code {
 
+            z-index: -1;
 
+            scale: 0;
 
+            background-color: floralwhite;
 
+            color: floralwhite;
 
+        }
 
+
 
+        .secret.gee,
 
+        .secret>code.gee {
 
+            scale: 1;
 
+            display: inline-block;
 
+            background-color: black;
 
+            color: black
 
+        }
 
     </style>
 
+    <script>
 
+        $().ready(function () {
 
+            $('.btn-dang').on('click', function (e) {
 
+                $('body,.btn,.btn-xs,code,.secret').toggleClass('gee')
 
+                console.log(e)
 
+            })
 
+        })
 
+    </script>
 
 </head>
 
 
 <body itemscope itemtype="http://schema.org/WebPage" style="height:100vh">
 
@@ -68,52 +151,72 @@
 
             <small>yee</small>
 
         </h1>
 
     </div>
 
-    <h3>> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></h3>
 
-    <p><a class="btn btn-primary btn-lg" href="/blog" style="text-shadow: black 5px 3px 3px;">
 
-            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;Blog</a></p>
 
-    <p><a class="btn btn-primary" href="https://schtonn.github.io/" style="text-shadow: black 3px 2px 4px;">
 
-            <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;View on github</a>
 
-        <a class="btn btn-warning" href="https://schtonn.gitee.io/"
 
-            style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-thumbs-down"
 
-                aria-hidden="true"></span>&nbsp;<del>View on gitee</del>(outdated)</a>
 
-    </p>
 
-    <p><a class="btn btn-primary" href="https://github.com/schtonn/schtonn.github.io"
 
-            style="text-shadow: black 3px 2px 4px;"><span class="glyphicon glyphicon-folder-open"
 
-                aria-hidden="true"></span>&nbsp;&nbsp;Repo on github</a>
 
-        <a class="btn btn-warning" href="https://gitee.com/schtonn/schtonn"
 
-            style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-folder-close"
 
-                aria-hidden="true"></span>&nbsp;<del>Repo on gitee</del> (outdated)</a>
 
-    </p>
 
-    <h3>> 娱乐</h3>
 
-    <div>
 
-        <a class="btn btn-info" href="/core/">Core</a>
 
-        <div class="btn-group">
 
-            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">sans&nbsp;<span
 
-                    class="caret"></span></button>
 
-            <ul class="dropdown-menu">
 
-                <li><a href="/sans/">sans</a></li>
 
-                <li><a href="/sans-cheat/"><span class="glyphicon glyphicon-wrench"
 
-                            aria-hidden="true"></span>&nbsp;&nbsp;sans</a></li>
 
-            </ul>
 
+    <div class="col-md-10">
 
+        <h3>> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></h3>
 
+        <p><a class="btn btn-primary btn-lg" href="/blog" style="text-shadow: black 5px 3px 3px;">
 
+                <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;Blog</a></p>
 
+        <p><a class="btn btn-primary" href="https://schtonn.github.io/" style="text-shadow: black 3px 2px 4px;">
 
+                <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>&nbsp;View on github</a>
 
+            <a class="btn btn-warning" href="https://schtonn.gitee.io/"
 
+                style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-thumbs-down"
 
+                    aria-hidden="true"></span>&nbsp;<del>View on gitee</del>(outdated)</a>
 
+        </p>
 
+    </div>
 
+
 
+    <div class="col-md-10">
 
+        <p><a class="btn btn-primary" href="https://github.com/schtonn/schtonn.github.io"
 
+                style="text-shadow: black 3px 2px 4px;"><span class="glyphicon glyphicon-folder-open"
 
+                    aria-hidden="true"></span>&nbsp;&nbsp;Repo on github</a>
 
+            <a class="btn btn-warning" href="https://gitee.com/schtonn/schtonn"
 
+                style="text-shadow: rgb(155,55,55) 3px 2px 4px;"><span class="glyphicon glyphicon-folder-close"
 
+                    aria-hidden="true"></span>&nbsp;<del>Repo on gitee</del> (outdated)</a>
 
+        </p>
 
+    </div>
 
+
 
+    <div class="col-md-10">
 
+        <hr>
 
+        <h3>> 娱乐</h3>
 
+        <div>
 
+            <a class="btn btn-info" href="/core/">Core</a>
 
+            <div class="btn-group">
 
+                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">sans&nbsp;<span
 
+                        class="caret"></span></button>
 
+                <ul class="dropdown-menu">
 
+                    <li><a href="/sans/">sans</a></li>
 
+                    <li><a href="/sans-cheat/"><span class="glyphicon glyphicon-wrench"
 
+                                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="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"
 
+                    aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
 
+            <a class="btn btn-info" id="gravity" href="/gravity/"><span class="glyphicon glyphicon-magnet"
 
+                    aria-hidden="true"></span>&nbsp;&nbsp;引力</a>
 
         </div>
 
-        <a class="btn btn-info" id="random" href="/random/">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"
 
-                aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
 
-        <a class="btn btn-info" id="gravity" href="/gravity/"><span class="glyphicon glyphicon-magnet"
 
-                aria-hidden="true"></span>&nbsp;&nbsp;引力</a>
 
     </div>
 
-    <h3>> 小工具</h3>
 
-    <p>
 
-        <a class="btn btn-danger" href="/score/" style="text-shadow: rgb(13,13,10,0.5) 3px 2px 4px;"><span
 
-                class="glyphicon glyphicon-stats" aria-hidden="true"></span>&nbsp;&nbsp;成绩整理</a>
 
-        <a class="btn btn-info" href="/crypty/">Crypty</a>
 
-        <a class="btn btn-info" href="/log/"><span class="glyphicon glyphicon-list"
 
-                aria-hidden="true"></span>&nbsp;日志</a>
 
-        <a class="btn btn-warning" href="/chem/"><span class="glyphicon glyphicon-fire"
 
-                aria-hidden="true"></span>&nbsp;化学</a>
 
-    </p>
 
+
 
+    <div class="col-md-10">
 
+        <hr>
 
+        <h3>> 小工具</h3>
 
+        <p>
 
+            <a class="btn btn-danger" id="score" href="/score/"><span class="glyphicon glyphicon-stats"
 
+                    aria-hidden="true"></span>&nbsp;&nbsp;成绩整理</a>
 
+            <a class="btn btn-info" href="/crypty/">Crypty</a>
 
+            <a class="btn btn-info" id="log" href="/log/"><span class="glyphicon glyphicon-list"
 
+                    aria-hidden="true"></span>&nbsp;日志</a>
 
+            <a class="btn btn-warning" id="chem" href="/chem/"><span class="glyphicon glyphicon-fire"
 
+                    aria-hidden="true"></span>&nbsp;化学</a>
 
+        </p>
 
+    </div>
 
+    <div class="col-md-2">
 
+        <hr><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-heart"
 
+                aria-hidden="true"></span></button>
 
+    </div>
 
+    <div class="col-md-8 secret">
 
+        secret message: i love <code>regex</code>
 
+    </div>
 
 </body>
 
 
 </html>

+ 59 - 2
log/index.html
View File 

@@ -12,16 +12,72 @@
 
 &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
     <title>日志</title>
 
     <style>
 
+        * {
 
+            transition-duration: 300ms;
 
+        }
 
+
 
         .btn {
 
             text-shadow: rgb(85, 85, 85) 3px 2px 4px;
 
             display: inline-block;
 
         }
 
 
+        .btn-xs.gee {
 
+            background-color: rgb(70, 59, 150);
 
+            color: white;
 
+        }
 
+
 
+        .btn-info.gee {
 
+            color: #fff;
 
+            background-color: #027396;
 
+            border-color: #46b8da;
 
+        }
 
+
 
+        code.gee {
 
+            background-color: rgb(70, 59, 150);
 
+        }
 
+
 
         .noshadow {
 
             text-shadow: none;
 
         }
 
-    </style>
 
 
+        .gee ::selection {
 
+            color: white;
 
+            text-decoration: underline wavy #FF3028;
 
+            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
 
+            background-color: black;
 
+        }
 
+
 
+        .gee {
 
+            color: white;
 
+            background-color: black;
 
+        }
 
+
 
+        .btn-dang {
 
+            transition-duration: 200ms;
 
+        }
 
+
 
+        .btn-dang:is(:hover, :hover:focus) {
 
+            outline: 50px solid rgba(58, 58, 58, 0.5)
 
+        }
 
+
 
+        .btn-dang.gee:hover {
 
+            outline: 50px solid rgba(202, 202, 202, 0.5)
 
+        }
 
+
 
+        .btn-dang:is(:hover:active, :active) {
 
+            scale: 80%;
 
+            transform: translate(-7px, -7px);
 
+            outline: 150px double rgba(162, 6, 6, 0.5)
 
+        }
 
+    </style>
 
+    <script>
 
+        $().ready(function () {
 
+            $('.btn-danger').on('click', function (e) {
 
+                $('body,.btn,.btn-xs,code').toggleClass('gee')
 
+                console.log(e)
 
+            })
 
+        })
 
+    </script>
 
 </head>
 
 
 <body>
 
@@ -65,7 +121,8 @@
 
     <hr>
 
     <p>开始记录。</p>
 
     <hr>
 
-    <p>:-)</p>
 
+    <p><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
 
+    </p>
 
 </body>
 
 
 </html>

+ 10 - 10
score/index.html
View File 

@@ -38,7 +38,7 @@
 
             z-index: 1;
 
         }
 
 
-        .well{
 
+        .well {
 
             border-top-left-radius: 0;
 
             border-top-right-radius: 0;
 
             border-bottom-left-radius: 30px;
 
@@ -87,15 +87,15 @@
 
     </div>
 
     <div style="text-align: center;" class="hidable">
 
         <div class="btn-group">
 
-        <a tabindex="0" class="btn btn-default" href="tutor/"
 
-            style="text-shadow: rgb(185, 185, 185) 3px 2px 4px;display:inline-block;">
 
-            <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;<b>查看示例截图</b>
 
-        </a>
 
-        <a id="upbtn" tabindex="0" class="btn btn-info" onclick="document.getElementById('fileInput').click();"
 
-            style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;display:inline-block;">
 
-            <span id="upicon" class="glyphicon glyphicon-open" aria-hidden="true"></span> <b>打开文件</b><input
 
-                style="display: none;" id="fileInput" type="file" onchange="getFiles(event)">
 
-        </a>
 
+            <a tabindex="0" class="btn btn-default" href="tutor/"
 
+                style="text-shadow: rgb(185, 185, 185) 3px 2px 4px;display:inline-block;">
 
+                <span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>&nbsp;<b>查看示例截图</b>
 
+            </a>
 
+            <a id="upbtn" tabindex="0" class="btn btn-info" onclick="document.getElementById('fileInput').click();"
 
+                style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;display:inline-block;">
 
+                <span id="upicon" class="glyphicon glyphicon-open" aria-hidden="true"></span> <b>打开文件</b><input
 
+                    style="display: none;" id="fileInput" type="file" onchange="getFiles(event)">
 
+            </a>
 
         </div>
 
         <a tabindex="0" class="btn btn-warning toggleHide" onclick="toggleHide();"
 
             style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;display:inline-block;">