首頁 探索 說明
註冊 登入
night-cherry
/
wiki
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

theme design

night-cherry 3 周之前
父節點
a6983923e4
當前提交
c074f8430a
共有 4 個文件被更改，包括 89 次插入 和 89 次删除
分割檢視 顯示文件統計
  1. 1 1
      index.html
  2. 82 0
      style/common.css
  3. 5 9
      style/index.css
  4. 1 79
      style/sample.css

+ 1 - 1
index.html
查看文件 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en" data-theme="day">
 
+<html lang="en" data-theme="dark">
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

+ 82 - 0
style/common.css
查看文件 

@@ -0,0 +1,82 @@
 
+html[data-theme="light"]{
 
+  --body-background-color:rgba(255, 255, 255, 0.333);
 
+  --font-color:rgb(2, 2, 2);
 
+  --a-color:rgba(71, 220, 71, 0.133);
 
+  --a-link-color:rgba(71, 220, 71, 0.133);
 
+  --a-hover-color:rgba(71, 220, 71, 0.133);
 
+  --a-active-color:rgba(71, 220, 71, 0.133);  
+  --a-visited-color:rgba(71, 220, 71, 0.133);
 
+}
 
+html[data-theme="dark"]{
 
+  --body-background-color:#121929;
 
+  --font-color:#DED8D4;
 
+  --a-color:#DED8D4;
 
+  --a-link-color:rgba(71, 220, 71, 0.133);
 
+  --a-hover-color:#862930;
 
+  --a-active-color:#DED8D4;
 
+  --a-visited-color:#DED8D4;
 
+
 
+}
 
+:root{
 
+  --body-background-color:rgba(53, 139, 225, 0.333);
 
+  --background-color:rgba(53, 139, 225, 0.333);
 
+  --backdrop-color:rgba(94, 164, 235, 0.3);
 
+  --font-color:rgb(91, 158, 91);
 
+  --font-shadow-color:rgb(91, 158, 91);
 
+  --filter-color:rgb(91, 158, 91);
 
+  --filter-shadow-color:rgb(91, 158, 91);
 
+  --hover-color:rgba(71, 220, 71, 0.133);
 
+  --a-color:rgba(71, 220, 71, 0.133);
 
+  --a-link-color:rgba(71, 220, 71, 0.133);
 
+  --a-hover-color:rgba(71, 220, 71, 0.133);
 
+  --a-active-color:rgba(71, 220, 71, 0.133);  
+  --a-visited-color:rgba(71, 220, 71, 0.133);
 
+  --normal-color:rgba(190, 243, 238, 0.133);
 
+  --notice-color:rgba(88, 144, 235, 0.133);
 
+  --warming-color:rgba(240, 218, 75, 0.133);
 
+  --wrong-color:rgba(243, 31, 31, 0.133);
 
+  --red:#122;
 
+  --green:#122;
 
+  --blue:#122;
 
+  --black:#122;
 
+  --white:#122;
 
+  --gray:#122;
 
+  --yellow:#122;
 
+  --purple:#122;
 
+  --pink:#122;
 
+  --orange:#122;
 
+  --brown:#122;
 
+  --cyan:#122;
 
+  --magenta:#122;
 
+  --C:#122;
 
+  --M:#122;
 
+  --Y:#122;
 
+  --K:#122;
 
+  --plate-size-default:98%;
 
+  --font-size:12px;
 
+  --font-default-size:12px;
 
+  --font-scale-size:24px;
 
+  --font-scale-default-size:24px;
 
+  --title-size:18px;
 
+  --title-default-size:18px;
 
+  --content-size:12px;
 
+  --content-default-size:12px;
 
+  --button-text-size:15px;
 
+  --button-text-default-size:15px;
 
+  --test-border:2px solid black;
 
+  --production-border:2px solid black;
 
+}
 
+body{
 
+  background-color: var(--body-background-color);
 
+  color: var(--font-color);
 
+}
 
+body a{
 
+  color:var(--a-color);
 
+  text-decoration: none;
 
+}
 
+body a:hover{
 
+  color:var(--a-hover-color);
 
+}
 
+body a:visited{
 
+  color:var(--a-visited-color);
 
+}

+ 5 - 9
style/index.css
查看文件 

@@ -1,3 +1,4 @@
 
+@import url('./common.css');
 
 div span{
 
     display: inline-block;
 
     width:auto;
 
@@ -9,26 +10,21 @@ div span{
 
 div span a{
 
     color:#862930;
 
     text-decoration: none;
 
-    
 }
 
-div span a::before{
 
-    color:#862930;
 
-}
 
-div span a::hover{
 
+div span a:hover{
 
     color:#121929;
 
 }
 
 /* div span a::linked{
 
     color:orange;
 
 } */
 
-div span a::after{
 
-    color:#862930;
 
-}
 
+
 
 dialog{
 
+    width: var(--plate-size-default);
 
     border-radius: 15px;
 
 
 }
 
 dialog::backdrop{
 
-    background-color: #121929;
 
+    /* background-color: #121929; */
 
     backdrop-filter: blur(10px);
 
     -webkit-backdrop-filter: blur(10px);
 
 }

+ 1 - 79
style/sample.css
查看文件 

@@ -1,3 +1,4 @@
 
+@import url('./common.css');
 
 h1 {
 
     color: hotpink;
 
     font-family: cursive;
 
@@ -11,25 +12,6 @@ canvas{
 
   align-items: center;
 
   border: 1px solid black;
 
 }
 
-html[data-theme="light"]{
 
-  --body-background-color:rgba(255, 255, 255, 0.333);
 
-  --font-color:rgb(2, 2, 2);
 
-  --a-color:rgba(71, 220, 71, 0.133);
 
-  --a-link-color:rgba(71, 220, 71, 0.133);
 
-  --a-hover-color:rgba(71, 220, 71, 0.133);
 
-  --a-active-color:rgba(71, 220, 71, 0.133);  
-  --a-visited-color:rgba(71, 220, 71, 0.133);
 
-}
 
-html[data-theme="dark"]{
 
-  --body-background-color:#121929;
 
-  --font-color:#DED8D4;
 
-  --a-color:#DED8D4;
 
-  --a-link-color:rgba(71, 220, 71, 0.133);
 
-  --a-hover-color:#862930;
 
-  --a-active-color:#DED8D4;
 
-  --a-visited-color:#DED8D4;
 
-
 
-}
 
 @property --vw{
 
   syntax: '<length>';
 
   inherits:true;
 
@@ -41,53 +23,6 @@ html[data-theme="dark"]{
 
   initial-value:100vh;
 
 }
 
 :root{
 
-  --body-background-color:rgba(53, 139, 225, 0.333);
 
-  --background-color:rgba(53, 139, 225, 0.333);
 
-  --backdrop-color:rgba(94, 164, 235, 0.3);
 
-  --font-color:rgb(91, 158, 91);
 
-  --font-shadow-color:rgb(91, 158, 91);
 
-  --filter-color:rgb(91, 158, 91);
 
-  --filter-shadow-color:rgb(91, 158, 91);
 
-  --hover-color:rgba(71, 220, 71, 0.133);
 
-  --a-color:rgba(71, 220, 71, 0.133);
 
-  --a-link-color:rgba(71, 220, 71, 0.133);
 
-  --a-hover-color:rgba(71, 220, 71, 0.133);
 
-  --a-active-color:rgba(71, 220, 71, 0.133);  
-  --a-visited-color:rgba(71, 220, 71, 0.133);
 
-  --normal-color:rgba(190, 243, 238, 0.133);
 
-  --notice-color:rgba(88, 144, 235, 0.133);
 
-  --warming-color:rgba(240, 218, 75, 0.133);
 
-  --wrong-color:rgba(243, 31, 31, 0.133);
 
-  --red:#122;
 
-  --green:#122;
 
-  --blue:#122;
 
-  --black:#122;
 
-  --white:#122;
 
-  --gray:#122;
 
-  --yellow:#122;
 
-  --purple:#122;
 
-  --pink:#122;
 
-  --orange:#122;
 
-  --brown:#122;
 
-  --cyan:#122;
 
-  --magenta:#122;
 
-  --C:#122;
 
-  --M:#122;
 
-  --Y:#122;
 
-  --K:#122;
 
-  --plate-size-default:98%;
 
-  --font-size:12px;
 
-  --font-default-size:12px;
 
-  --font-scale-size:24px;
 
-  --font-scale-default-size:24px;
 
-  --title-size:18px;
 
-  --title-default-size:18px;
 
-  --content-size:12px;
 
-  --content-default-size:12px;
 
-  --button-text-size:15px;
 
-  --button-text-default-size:15px;
 
-  --test-border:2px solid black;
 
-  --production-border:2px solid black;
 
   --w:tan(atan2(var(--vw),1px));
 
   --h:tan(atan2(var(--vh),1px));
 
 }
 
@@ -101,16 +36,3 @@ body::before{
 
   height:fit-content;
 
   margin:auto;
 
 }
 
-body{
 
-  background-color: var(--body-background-color);
 
-  color: var(--font-color);
 
-}
 
-body a{
 
-  color:var(--a-color);
 
-}
 
-body a:hover{
 
-  color:var(--a-hover-color);
 
-}
 
-body a:visited{
 
-  color:var(--a-visited-color);
 
-}