From c64c79742f79297e46d3f6ed6164c96c2153cc39 Mon Sep 17 00:00:00 2001
From: User782Tec <115236204+User782Tec@users.noreply.github.com>
Date: Sun, 30 Apr 2023 22:26:35 +0800
Subject: [PATCH] =?UTF-8?q?v5.2.1=20-=20=E7=BB=86=E8=8A=82=E6=9B=B4?=
=?UTF-8?q?=E6=94=B9=E4=B8=8E=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 为网站添加Favicon和标题
- Edge浏览器中，超出标签页范围的文字将会被隐藏以避免文字溢出的问题
- 微调Edge浏览器中加载动画的位置
- 新增了开机音效和登录界面
- 格式化部分文档
---
apps/style/edge.css | 114 ++++++++++++++++++++++++++-----------------
apps/style/login.css | 68 ++++++++++++++++++++++++++
desktop.html | 47 +++++++++++++++++-
desktop.js | 101 ++++++++++++++++++++------------------
favicon.ico | Bin 0 -> 269342 bytes
media/startup.mp3 | Bin 0 -> 97098 bytes
reload.html | 2 +-
7 files changed, 238 insertions(+), 94 deletions(-)
create mode 100644 apps/style/login.css
create mode 100644 favicon.ico
create mode 100644 media/startup.mp3
diff --git a/apps/style/edge.css b/apps/style/edge.css
index d00dd63..520ba7d 100644
--- a/apps/style/edge.css
+++ b/apps/style/edge.css
@@ -1,17 +1,17 @@
-.window.edge.max>#win-edge{
+.window.edge.max>#win-edge {
padding-bottom: 55px;
}
-.window.edge>.titbar>.tabs{
+.window.edge>.titbar>.tabs {
display: flex;
- flex-grow: 1!important;
+ flex-grow: 1 !important;
height: 100%;
padding: 2px 1px;
/* overflow-x:auto; */
overflow: hidden;
}
-.window.edge>.titbar>.tabs>.tab{
+.window.edge>.titbar>.tabs>.tab {
display: flex;
border-radius: 8px;
max-width: 200px;
@@ -25,7 +25,8 @@
overflow: hidden;
transition: 50ms;
}
-.window.edge>.titbar>.tabs>.tab::before{
+
+.window.edge>.titbar>.tabs>.tab::before {
content: '';
position: relative;
width: 1.5px;
@@ -36,47 +37,60 @@
transition: 50ms;
}
-.window.edge>.titbar>.tabs>.tab.show{
+.window.edge>.titbar>.tabs>.tab p {
+ overflow: hidden;
+ display: -webkit-box;
+ box-orient: vertical;
+ -webkit-box-orient: vertical;
+ line-clamp: 1;
+ -webkit-line-clamp: 1;
+}
+
+.window.edge>.titbar>.tabs>.tab.show {
background: var(--card) !important;
box-shadow: 0 1px 2px var(--sd);
}
-.window.edge>.titbar>.tabs>.tab.close{
+
+.window.edge>.titbar>.tabs>.tab.close {
transform: translateY(calc(100% + 5px)) !important;
opacity: 0.6;
transition: 150ms;
}
-.window.edge>.titbar>.tabs>.tab.left{
+
+.window.edge>.titbar>.tabs>.tab.left {
transform: translateX(-100%) !important;
transition: 150ms;
}
-.window.edge>.titbar>.tabs>.tab.right{
+
+.window.edge>.titbar>.tabs>.tab.right {
transform: translateX(100%) !important;
transition: 150ms;
}
-.window.edge>.titbar>.tabs>.tab.moving{
- background: var(--unfoc)!important;
+
+.window.edge>.titbar>.tabs>.tab.moving {
+ background: var(--unfoc) !important;
z-index: 1;
}
-.window.edge>.titbar>.tabs>.tab:hover{
+.window.edge>.titbar>.tabs>.tab:hover {
background: var(--hover-half);
}
.window.edge>.titbar>.tabs>.tab:hover::before,
.window.edge>.titbar>.tabs>.tab:hover+.tab::before,
.window.edge>.titbar>.tabs>.tab.show::before,
-.window.edge>.titbar>.tabs>.tab.show+.tab::before{
+.window.edge>.titbar>.tabs>.tab.show+.tab::before {
opacity: 0;
}
-.window.edge>.titbar>.tabs>.tab>p{
+.window.edge>.titbar>.tabs>.tab>p {
font-size: 15px;
margin-left: 7px;
margin-top: 1px;
flex-grow: 1;
}
-.window.edge>.titbar>.tabs>.tab>.clbtn{
+.window.edge>.titbar>.tabs>.tab>.clbtn {
border-radius: 4px;
display: block;
margin: 3px 5px 0 0;
@@ -84,17 +98,17 @@
height: 18px;
}
-.window.edge>.titbar>.tabs>.tab>.clbtn::before{
+.window.edge>.titbar>.tabs>.tab>.clbtn::before {
position: relative;
top: -3px;
left: 1px;
}
-.window.edge>.titbar>.tabs>.tab>.clbtn:hover{
+.window.edge>.titbar>.tabs>.tab>.clbtn:hover {
background: var(--hover);
}
-.window.edge>.titbar>.tabs>.new{
+.window.edge>.titbar>.tabs>.new {
border-radius: 7px;
margin: 3px 2px;
height: 25px;
@@ -103,26 +117,28 @@
text-align: center;
transition: 50ms;
}
-.window.edge>.titbar>.tabs>.new::before{
+
+.window.edge>.titbar>.tabs>.new::before {
position: relative;
top: -3px;
}
-.window.edge>.titbar>.tabs>.new:hover{
+.window.edge>.titbar>.tabs>.new:hover {
background-color: var(--hover-half);
}
-#win-edge{
+#win-edge {
display: flex;
flex-direction: column;
transition: 50ms;
}
-#win-edge>.tool{
+#win-edge>.tool {
display: flex;
padding: 2px 5px;
}
-#win-edge>.tool>.a{
+
+#win-edge>.tool>.a {
font-size: 20px;
border-radius: 7px;
width: 30px;
@@ -131,81 +147,91 @@
transition: 50ms;
margin: 0 1px;
}
-#win-edge>.tool>.a>.bi::before{
+
+#win-edge>.tool>.a>.bi::before {
position: relative;
top: var(--top);
}
-#win-edge>.tool>.a:hover{
+
+#win-edge>.tool>.a:hover {
background-color: var(--hover-half);
}
-#win-edge>.tool>input{
+#win-edge>.tool>input {
background-color: var(--hover-half);
border-radius: 50px;
border: 1.5px solid transparent;
padding: 3px 14px 4px 10px;
outline: medium;
color: var(--text);
- transition: 100ms,border 0s;
+ transition: 100ms, border 0s;
height: 30px;
margin: 0 2px;
}
-#win-edge>.tool>input.url{
+
+#win-edge>.tool>input.url {
flex-grow: 1;
}
-#win-edge>.tool>input.rename:not(.show){
+
+#win-edge>.tool>input.rename:not(.show) {
width: 0;
padding: 0;
border: none;
}
-#win-edge>.tool>input.rename.show{
+
+#win-edge>.tool>input.rename.show {
width: 200px;
}
-#win-edge>.tool>input:hover{
+
+#win-edge>.tool>input:hover {
border-color: #7f7f7f7f;
}
-#win-edge>.tool>input:focus{
+#win-edge>.tool>input:focus {
border-color: var(--href);
}
-#win-edge>iframe{
+#win-edge>iframe {
width: calc(100% - 4px);
flex-grow: 1;
margin: 2px;
border-radius: 10px;
- --bg:var(--bg);
- --text:var(--text);
+ --bg: var(--bg);
+ --text: var(--text);
display: none;
}
-#win-edge>iframe.show{
+#win-edge>iframe.show {
display: block;
}
-.reloading>svg{
- width: 27px;
+.reloading>svg {
+ width: 27px !important;
}
-.reloading{
+.reloading {
margin-right: -5px;
+ margin-bottom: -4px;
animation: reload 100ms;
}
@keyframes reload {
- 0%{
+ 0% {
margin-right: -27px;
}
- 100%{
+
+ 100% {
margin-right: -5px;
}
}
.reloading>svg>circle:first-child {
- stroke:#7f7f7f50;
- fill:none;stroke-width:2px;
+ stroke: #7f7f7f50;
+ fill: none;
+ stroke-width: 2px;
}
.reloading>svg>circle:last-child {
- stroke:#2983cc;stroke-width:2px;
+ stroke: #2983cc;
+ stroke-width: 2px;
}
\ No newline at end of file
diff --git a/apps/style/login.css b/apps/style/login.css
new file mode 100644
index 0000000..799047d
--- /dev/null
+++ b/apps/style/login.css
@@ -0,0 +1,68 @@
+div.login {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ background: linear-gradient(130deg, #ad6eca, #3b91d8);
+ transition: filter 500ms, background-color 500ms, opacity 1500ms ease-in-out;
+}
+
+#login {
+ padding: 4px 50px 4px 50px;
+ border: 2px solid #aaa;
+ background-color: #eaeaea;
+ color: #121212;
+ transition: background-color 300ms, transform cubic-bezier(0.14, 1.02, 0.17, 0.03) 300ms;
+ font-size: 18px;
+ border-radius: 10px;
+}
+
+#login:hover {
+ background-color: #fefefe;
+}
+
+#login:active {
+ transform: scale(0.95);
+}
+
+#login-after {
+ color: #fefefe;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 18px;
+ margin: 6px 0px 6px 0px;
+}
+
+.login>div.user {
+ width: 150px;
+ height: 150px;
+ border-radius: 100%;
+ background-image: url("../../icon/user.svg");
+ background-size: 65% 65%;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ margin-bottom: 20px;
+ background-color: #ddd;
+ transition: filter 500ms;
+}
+
+.login>div.name {
+ color: #fefefe;
+ font-size: 30px;
+ font-family: Arial, Helvetica, sans-serif;
+ margin-bottom: 20px;
+ transition: color 500ms;
+}
+
+div.login-close, div.login-close>div.user {
+ filter: brightness(0);
+}
+
+div.login-close>div.name, div.login-close #login-after {
+ color: #000 !important;
+}
+
+div.login-close {
+ background-color: black;
+}
\ No newline at end of file
diff --git a/desktop.html b/desktop.html
index 9a7b59a..0503e33 100644
--- a/desktop.html
+++ b/desktop.html
@@ -29,9 +29,14 @@
+
+
+
+ Windows 12 网页版
+