opensource/win12
3
0
Fork 0
mirror of https://github.com/tjy-gitnub/win12.git synced 2026-09-21 04:26:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

v4.2.0 外观整改

Browse Source 
-新的计算器外观
-卡片外观优化
-设置新增菜单前面的小竖线
-右键菜单阴影特效
-细节优化和修复
This commit is contained in:
tjy-gitnub
2023-02-26 13:36:50 +08:00
parent 06821947ec
commit 56c4637a57
7 changed files with 162 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/style/about.css
+2 -3
View File
@@ -6,7 +6,7 @@
#win-about>.menu{
height: 100%;
min-width: 200px;
padding: 3px;
padding: 5px;
}
#win-about>.menu>list>*{
@@ -20,8 +20,7 @@
#win-about>.cnt{
overflow: auto;
height: 100%;
transform: translate(0, 50%) scale(0.8);
transform: translate(0, 50%);
opacity: 0;
width: 0;
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms;
apps/style/calc.css
+22 -13
View File
@@ -9,36 +9,39 @@
border: none;
outline: none;
background-color: #00000000;
font-size: 50px;
font-size: 35px;
text-align: end;
color: var(--text);
}
#win-calc>.keyb{
flex-grow: 1;
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4,60px);
grid-template-rows: repeat(5,50px);
gap: 4px;
padding: 0 4px 4px;
width: 100%;
align-content: flex-start;
}
#win-calc>.keyb>.b{
width: 71px;
margin: 5px 5px;
height: 71px;
font-size: 40px;
width: 60px;
height: 50px;
font-size: 25px;
text-align: center;
transition: 80ms;
border-radius: 10px;
box-shadow: 2px 2px 4px var(--sd);
transition: 40ms;
border-radius: 7px;
border: 1.5px solid #63636330;
box-shadow: 0px 2px 2px var(--sd);
background: var(--card);
padding-top: 5px;
}
#win-calc>.keyb>.b.u{
padding-top: 3px;
padding-top: 5px;
}
#win-calc>.keyb>.b.ans{
background-image: linear-gradient(120deg, var(--theme-1), var(--theme-2));
border: none;
}
#win-calc>.keyb>.b.ans:hover{
backdrop-filter: brightness(0.8);
@@ -50,5 +53,11 @@
}
#win-calc>.keyb>.b:hover{
background-color: var(--mm);
background-color: var(--hover);
}
#win-calc>.keyb>.b:active{
opacity: 0.8;
transform: scale(0.94) translate(0,1px);
box-shadow: 0px 1px 1px var(--sd);
}
apps/style/explorer.css
+4
View File
@@ -13,6 +13,7 @@
background-color: var(--card);
padding: 3px;
box-shadow: 2px 2px 5px var(--sd);
border: 1.5px solid #6f6f6f30;
}
#win-explorer>.menu>.card>.title{
@@ -106,6 +107,7 @@
padding: 8px;
box-shadow: 3px 3px 8px var(--sd);
overflow-y: auto;
border: 1.5px solid #6f6f6f30;
}
#win-explorer>.main>.content>.tool{
@@ -188,6 +190,7 @@
padding: 2px 5px;
border-radius: 5px;
display: flex;
border: 1.5px solid transparent;
}
#win-explorer>.main>.content>.view>.item:active{
@@ -201,4 +204,5 @@
#win-explorer>.main>.content>.view>.item:hover{
background-color: var(--hover);
border: 1.5px solid #6f6f6f30;
}
apps/style/setting.css
+9 -7
View File
@@ -32,8 +32,8 @@ html {
#win-setting>.menu {
width: 25%;
min-width: 300px;
width: 20%;
min-width: 280px;
padding: 10px 5px 5px 10px;
}
@@ -114,15 +114,17 @@ html {
#win-setting>.page {
overflow: hidden;
padding-left: 10px;
margin: 2px 0 0 0;
}
#win-setting>.page>.cnt {
overflow: auto;
/* height: 100%; */
transform: translate(0, 50%) scale(0.8);
opacity: 0;
height: 0;
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms;
transition: transform 300ms cubic-bezier(0,0,0,1), opacity 300ms 50ms,height 0ms;
transform: translate(0, 50%);
}
#win-setting>.page>.cnt.show {
@@ -135,7 +137,7 @@ html {
.setting-list {
display: flex;
flex-direction: column;
padding: 0 5px;
padding: 0 5px 60px 5px;
margin-bottom: 0;
border-radius: 10px;
width: 100%;
@@ -147,7 +149,7 @@ html {
background: radial-gradient(circle, var(--card), var(--card));
margin-bottom: 5px;
border-radius: 10px;
border: 2px solid #7f7f7f30;
border: 1.5px solid #6f6f6f30;
text-decoration: none;
display: flex;
padding: 10px 15px;
@@ -204,7 +206,7 @@ html {
}
.setting-list>div.dp.show {
border: 2px solid #7f7f7f30;
border: 1.5px solid #6f6f6f30;
border-top: none;
max-height: 1000px;
padding: 10px 15px;
desktop.css
+80 -53
View File
@@ -11,7 +11,7 @@
--card: #efefef60;
--hover: #ffffff70;
--hover-half: #ffffff50;
--hover-b: #00000017;
--hover-b: #00000016;
--bggrey: #ddd;
--fill:#d3d3d370;
--bgul: url('bg.svg');
@@ -33,9 +33,9 @@
--bg70: #00000080;
--sd: #000000a0;
--card: #72727240;
--hover: #aaaaaa40;
--hover: #aaaaaa20;
--hover-half: #ffffff20;
--hover-b: #ffffff30;
--hover-b: #ffffff16;
--bggrey: #444;
--fill:#54545470;
--bgul: url('bg-dark.svg');
@@ -234,7 +234,6 @@ body {
.act,
list>a,
#cs>list>a,
#win-calc>.keyb>.b,
#datebox>.cont>.body>p,
.wg>.titbar>.more,
.wg.calc>.content>.b,
@@ -245,7 +244,6 @@ list>a,
.act:active,
list>a:active,
#cs>list>a:active,
#win-calc>.keyb>.b:active,
#datebox>.cont>.body>p:active,
.wg>.titbar>.more:active,
.wg.calc>.content>.b:active,
@@ -279,15 +277,16 @@ list>a:active,
border-radius: 7px;
height: 100%;
background-color: var(--bg70);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 3px 3px 6px 1px var(--sd);
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
box-shadow: 3px 3px 10px 1px var(--sd);
padding: 7px 6px;
margin: 0 3px;
display: flex;
transition: 200ms, transform 300ms cubic-bezier(0.14, 1.02, 0.17, 0.03),opacity 0ms;
bottom: 0;
transform: scale(1);
border: 1.5px solid #6f6f6f30;
}
.dock>* {
@@ -320,7 +319,7 @@ list>a:active,
}
.dock.about:hover {
background-color: var(--mm);
filter: opacity(0.8) brightness(1.2);
}
.dock.about:active>p {
@@ -328,8 +327,8 @@ list>a:active,
}
.dock.about:active {
transform: scale(0.92);
opacity: 0.75;
transform: scale(0.9);
filter: opacity(0.6)!important;
}
.dock.about.show {
@@ -346,7 +345,7 @@ list>a:active,
}
.dock.about.show:hover {
background-color: var(--bg70);
filter: opacity(0.9) brightness(1);
}
#taskbar {
@@ -470,11 +469,11 @@ list>a:active,
.dock.date:active {
transform: scale(0.9);
opacity: 0.75;
filter: opacity(0.6)!important;
}
.dock.date:hover {
background-color: var(--mm);
filter: opacity(0.8) brightness(1.2);
}
.dock.date>.date {
@@ -512,12 +511,12 @@ list>a:active,
}
.dock.theme:active {
transform: scale(0.84);
opacity: 0.75;
transform: scale(0.9);
filter: opacity(0.6)!important;
}
.dock.theme:hover {
background-color: var(--mm);
filter: opacity(0.8) brightness(1.2);
}
.dock.theme>.dark {
@@ -658,12 +657,12 @@ list>a:active,
left: calc(50% - 430px);
border-radius: 20px;
background: var(--bg50);
backdrop-filter: blur(80px) saturate(130%);
-webkit-backdrop-filter: blur(80px) saturate(130%);
backdrop-filter: blur(80px) saturate(1.3);
-webkit-backdrop-filter: blur(80px) saturate(1.3);
opacity: 0.5;
transition: 200ms;
box-shadow: 3px 3px 15px 1px var(--sd);
border: 2px solid #7f7f7f40;
border: 1.5px solid #6f6f6f30;
z-index: 99;
}
@@ -862,6 +861,7 @@ input-before {
border-radius: 10px;
background-color: var(--card);
flex-grow: 1;
border: 1.5px solid #6f6f6f30;
box-shadow: 3px 3px 6px var(--sd);
}
@@ -880,6 +880,7 @@ input-before {
transition: 300ms cubic-bezier(0.6, 0.6, 0.4, 1);
transition-delay: 300ms;
opacity: 0;
border: 1.5px solid #6f6f6f30;
}
#start-menu.show>#s-m-r>.pinned {
@@ -917,6 +918,7 @@ input-before {
transition: 300ms cubic-bezier(0.6, 0.6, 0.4, 1);
transition-delay: 450ms;
opacity: 0;
border: 1.5px solid #6f6f6f30;
}
#start-menu.show>#s-m-r>.tuijian {
@@ -977,12 +979,12 @@ input-before {
left: calc(50% - 300px);
border-radius: 20px;
background-color: var(--bg50);
backdrop-filter: blur(80px) saturate(130%);
-webkit-backdrop-filter: blur(80px) saturate(130%);
backdrop-filter: blur(80px) saturate(1.3);
-webkit-backdrop-filter: blur(80px) saturate(1.3);
opacity: 0.8;
transition: 200ms;
box-shadow: 3px 3px 15px 1px var(--sd);
border: 2px solid #7f7f7f40;
border: 1.5px solid #6f6f6f30;
z-index: 99;
padding: 10px;
}
@@ -1069,11 +1071,11 @@ input-before {
left: calc(50% - 500px);
border-radius: 20px;
background-color: var(--bg50);
backdrop-filter: blur(80px) saturate(130%);
-webkit-backdrop-filter: blur(80px) saturate(130%);
backdrop-filter: blur(80px) saturate(1.3);
-webkit-backdrop-filter: blur(80px) saturate(1.3);
transition: 200ms;
box-shadow: 3px 3px 15px 1px var(--sd);
border: 2px solid #7f7f7f40;
border: 1.5px solid #6f6f6f30;
z-index: 99;
padding: 10px 0;
}
@@ -1275,11 +1277,11 @@ input-before {
width: 350px;
border-radius: 20px;
background-color: var(--bg50);
backdrop-filter: blur(80px) saturate(130%);
-webkit-backdrop-filter: blur(80px) saturate(130%);
backdrop-filter: blur(80px) saturate(1.3);
-webkit-backdrop-filter: blur(80px) saturate(1.3);
transition: 200ms;
box-shadow: 3px 3px 15px 1px var(--sd);
border: 2px solid #7f7f7f10;
border: 1.5px solid #6f6f6f30;
z-index: 99;
padding: 10px;
}
@@ -1490,7 +1492,7 @@ input-before {
position: absolute;
z-index: 101;
border-radius: 10px;
border: 2px solid #7f7f7f40;
border: 1.5px solid #6f6f6f30;
background: var(--cm);
backdrop-filter: blur(25px) saturate(2);
min-width: 200px;
@@ -1563,7 +1565,7 @@ input-before {
box-shadow: 3px 3px 6px 1px var(--sd);
z-index: 101;
border-radius: 10px;
border: 2px solid #8f8f8f30;
border: 1.5px solid #6f6f6f30;
background: var(--cm);
backdrop-filter: blur(20px) saturate(2);
min-width: 200px;
@@ -1733,8 +1735,7 @@ input-before {
}
list {
display: flex;
flex-direction: column;
display: block;
padding-left: 0;
margin-bottom: 0;
border-radius: 10px;
@@ -1752,6 +1753,7 @@ list>* {
cursor: pointer;
}
list>*:hover {
color: var(--text);
background-color: var(--hover-half);
@@ -1781,6 +1783,35 @@ list>.text:hover {
background-color: unset;
}
list>span.focs{
display: block;
width: 4px;
height: 20px;
background: linear-gradient(0deg, var(--theme-1), var(--theme-2));
padding: 0;
border-radius: 2px;
position: relative;
margin: 7.5px 7px;
z-index: 1;
transition: 350ms cubic-bezier(0.8, 0, 0.2, 1);
}
list>span.focs.cl{
animation: fcl 150ms cubic-bezier(0.7,0,0.3,1) 100ms;
}
@keyframes fcl {
0%{
transform: none;
}
50%{
transform: scaleY(2.5);
}
100%{
transform: none;
}
}
.msg {
background-color: var(--bg50);
backdrop-filter: blur(50px) saturate(130%);
@@ -1797,7 +1828,7 @@ list>.text:hover {
display: flex;
transition: 400ms 200ms cubic-bezier(0.9, 0, 0.1, 1),transform 200ms;
cursor: pointer;
border: 2px solid #8f8f8f30;
border: 1.5px solid #6f6f6f30;
transform: scale(0.9);
}
@@ -1857,7 +1888,7 @@ list>.text:hover {
transform: scale(0.7);
background-color: var(--unfoc);
border-radius: 10px;
border: 2px solid #8f8f8f30;
border: 1.5px solid #6f6f6f30;
display: none;
opacity: 0;
transition: cubic-bezier(0.9, 0, 0.1, 1) 200ms;
@@ -1872,8 +1903,8 @@ list>.text:hover {
.window.foc {
background-color: var(--bg70);
backdrop-filter: blur(80px) saturate(1.5);
-webkit-backdrop-filter: blur(80px) saturate(1.5);
backdrop-filter: blur(80px) saturate(1.3);
-webkit-backdrop-filter: blur(80px) saturate(1.3);
box-shadow: 3px 3px 20px 3px var(--sd);
}
@@ -1915,17 +1946,13 @@ list>.text:hover {
}
.window.load>.content {
display: none !important;
}
.window.calc.show {
height: 540px;
width: 330px;
opacity: 0;
}
.window.calc {
height: 250px;
width: 66px;
height: 395px;
width: 262px;
}
.window.notepad-fonts {
@@ -1938,8 +1965,8 @@ list>.text:hover {
}
.window>.titbar {
height: 32px;
padding: 0 0 0 5px;
height: 35px;
padding: 0 0 0 8px;
display: flex;
position: initial;
color: var(--text);
@@ -1948,13 +1975,13 @@ list>.text:hover {
.window>.titbar>p {
font-size: 16px;
margin-top: 3px;
margin-top: 5px;
}
.window>.titbar>.icon {
margin: 6px 5px 0 0;
height: 20px;
width: 20px;
height: 22px;
width: 22px;
}
.window>.titbar>div {
@@ -1995,7 +2022,7 @@ list>.text:hover {
float: right;
width: 45px;
text-align: center;
padding-top: 5px;
padding-top: 7px;
font-size: 13px;
transition: 50ms;
border-radius: 3px;
@@ -2030,8 +2057,8 @@ list>.text:hover {
transition: all 200ms;
margin: 10px;
border-radius: 10px;
box-shadow: 0 0 5px 5px var(--sd);
/* border: 4px solid var(--bg30); */
box-shadow: 0 0 10px 1px var(--sd);
border: 1.5px solid #6f6f6f30;
}
#window-fill.top {
desktop.html
+12 -3
View File
@@ -264,7 +264,7 @@
</div>
<div class="content">
<div class="card" style="grid-column: 1/6;grid-row: 1/3;color: #fff;background: var(--bgul);background-position:-20px -280px;background-size: 170%;">
<p class="tit" style="font-size: 22px;margin: 100px 0 0 180px;text-shadow: 0 0 8px #000;">Windows12 v4.0.0 发布</p>
<p class="tit" style="font-size: 22px;margin: 100px 0 0 180px;text-shadow: 0 0 8px #000;">Windows12 v4.2.0 发布</p>
<a class="a" style="margin: 5px 0 0 250px;font-size: 17px;color: #9dd0fb;text-shadow: 0 0 3px #000;" onclick="hide_widgets();
openapp('about');if($('.window.about').hasClass('min'))minwin('about');
$('#win-about>.about').removeClass('show');$('#win-about>.update').addClass('show');
@@ -508,7 +508,7 @@
</a>
<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
<input-before class="bi bi-search"></input-before>
<list>
<list class="focs">
<a class="enable system check" onclick="apps.setting.page('system')"><img src="apps/icons/setting/system.png">系统</a>
<a><img src="apps/icons/setting/blueteeth.png">蓝牙和其他设备</a>
<a><img src="apps/icons/setting/network.png">网络和 Internet</a>
@@ -520,6 +520,7 @@
<a><img src="apps/icons/setting/help.png">辅助功能</a>
<a><img src="apps/icons/setting/safe.png">隐私和安全性</a>
<a><img src="apps/icons/setting/update.png">Windows 更新</a>
<span class="focs"></span>
</list>
</div>
<div class="page">
@@ -743,6 +744,14 @@
<div class="cnt update">
<h1 class="tit"><span></span>更新记录</h1>
<div style="margin-left: 20px;">
<details><summary><span>v4.2.0</span> 外观整改</summary><p>
<a href="https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAAO__SDw7SZUQ0xGSTFTSjBKMVY2SFM5U1ZWNFc5NkU3Ry4u" class="jump">参与小调查，帮助改进项目</a><br>
&emsp;&emsp;-新的计算器外观<br>
&emsp;&emsp;-卡片外观优化<br>
&emsp;&emsp;-设置新增菜单前面的小竖线<br>
&emsp;&emsp;-右键菜单阴影特效<br>
&emsp;&emsp;-细节优化和修复</p>
</details>
<details><summary><span>v4.1.0</span> 新的设置项，新背景</summary><p>
&emsp;&emsp;-在设置中添加开关特效的选项<br>
&emsp;&emsp;-背景添加阴影效果<br>
@@ -881,7 +890,7 @@
<a class="a" onmouseover="showdp(this,'notepad.edit',null)" onmouseleave="hidedp()">编辑</a>
<a class="a" onmouseover="showdp(this,'notepad.view',null)" onmouseleave="hidedp()">格式</a>
</div>
<textarea class="text-box"></textarea>
<div class="text-box" contenteditable="true"></div>
<a href="" download="未命名.txt" style="opacity: 0;" class="save">另存为</a>
</div>
</div>
desktop.js
+33 -6
View File
@@ -1,7 +1,6 @@
// 列表点击 + 边框发光
let lists = document.querySelectorAll(`#s-m-l>list>a,#win-setting>.menu>list>a`);
lists.forEach(la => {
la.addEventListener('mousemove', (e) => {
document.querySelectorAll(`#s-m-l>list>a,#win-setting>.menu>list>a`).forEach(la => {
la.addEventListener('mousemove', e => {
x = e.clientX - $(la).offset()['left'];
y = e.clientY - $(la).offset()['top'];
$(la).css('cssText', `background:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000) center;background-size:110% 100%;border-image:radial-gradient(circle at ${x}px ${y}px,var(--hover) 20px, #00000000 40px) 2;`)
@@ -10,6 +9,26 @@ lists.forEach(la => {
$(la).css('cssText', `background-image:radial-gradient(#00000000,#00000000),radial-gradient(#00000000,#00000000);`)
});
});
document.querySelectorAll(`list.focs`).forEach(li => {
// li.querySelectorAll(`a`).forEach(la => {
// la.addEventListener('click',e => {
// let _=li.querySelector('span.focs');
// $(_).addClass('cl');
// $(_).css('top',la.offsetTop-li.offsetTop);
// $(_).css('left',la.offsetLeft-li.offsetLeft);
// });
// });
li.addEventListener('click',e=>{
let _=li.querySelector('span.focs'),la=li.querySelector('a.check');
$(_).addClass('cl');
$(_).css('top',la.offsetTop-li.offsetTop-li.offsetHeight);
$(_).css('left',la.offsetLeft-li.offsetLeft);
setTimeout(() => {
$(_).removeClass('cl');
}, 200);
})
});
// 禁止拖拽图片
$('img').on('dragstart', () => { return false; });
// 右键菜单
@@ -19,7 +38,7 @@ $('html').on('contextmenu', () => {
function stop(e) {
e.stopPropagation();
}
$('input,textarea').on('contextmenu', (e) => {
$('input,textarea,*[contenteditable=true]').on('contextmenu', (e) => {
stop(e);
return true;
});
@@ -275,14 +294,22 @@ function hidedp(force = false) {
// 应用
let apps = {
setting: {
init: () => { },
init: () => {
$('#win-setting>.menu>list>a.system')[0].click();
// let _=$('#win-setting>.menu>list>span.focs'),
// la=$('#win-setting>.menu>list>a.system')[0],
// li=$('#win-setting>.menu>list')[0];
// console.log(la.offsetTop,li.offsetTop,li.offsetHeight);
// _.addClass('cl');
// _.css('top',la.offsetTop-li.offsetTop-li.offsetHeight);
// _.css('left',la.offsetLeft-li.offsetLeft);
},
page:(name)=>{
$('#win-setting>.page>.cnt.'+name).scrollTop(0);
$('#win-setting>.page>.cnt.show').removeClass('show');
$('#win-setting>.page>.cnt.'+name).addClass('show');
$('#win-setting>.menu>list>a.check').removeClass('check');
$('#win-setting>.menu>list>a.'+name).addClass('check');
}
},
explorer: {