muzi
/
macUI
mirror of https://github.com/1099438829/macUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

暂存

This commit is contained in:
昱墨 2022-09-26 20:04:45 +08:00
parent b4ee90c8b0
commit 64f691c665
3 changed files with 1731 additions and 1624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
css/index.css
View File

@ -13,6 +13,7 @@ ul{
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -111,7 +112,13 @@ body {
scrollbar-base-color: #5e6a5c; /*滚动条的基本颜色*/ scrollbar-base-color: #5e6a5c; /*滚动条的基本颜色*/
} }
#mac hr { height:0; border-top:1px solid #999; border-right:0; border-bottom:0; border-left:0; } #mac hr {
height: 0;
border-top: 1px solid #999;
border-right: 0;
border-bottom: 0;
border-left: 0;
}
#mac .desktop { #mac .desktop {
width: 100%; width: 100%;
@ -222,6 +229,7 @@ body {
font-size: 14px; font-size: 14px;
/*line-height: 30px !important */ /*line-height: 30px !important */
} }
#mac-menu { #mac-menu {
position: fixed; position: fixed;
top: 24px; top: 24px;
@ -368,7 +376,9 @@ body {
z-index: 100; z-index: 100;
} }
#mac-shortcuts .shortcuts-hidden .shortcut{display: none} #mac-shortcuts .shortcuts-hidden .shortcut {
display: none
}
#mac-shortcuts .shortcut { #mac-shortcuts .shortcut {
width: 80px; width: 80px;
@ -383,7 +393,7 @@ body {
background-color: rgba(255, 255, 255, 0.11); background-color: rgba(255, 255, 255, 0.11);
} }
#mac-shortcuts .shortcut>.icon { #mac .shortcut > .icon {
width: 50px; width: 50px;
height: 50px; height: 50px;
overflow: hidden; overflow: hidden;
@ -399,7 +409,7 @@ body {
line-height: 50px; line-height: 50px;
} }
#mac-shortcuts .shortcut .title { #mac .shortcut .title {
color: white; color: white;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
@ -591,6 +601,7 @@ body {
#mac_btn_group_right #mac_btn_command { #mac_btn_group_right #mac_btn_command {
font-size: 14px; font-size: 14px;
} }
#mac_btn_command .msgNof { #mac_btn_command .msgNof {
position: fixed; position: fixed;
right: 0; right: 0;
@ -600,6 +611,7 @@ body {
color: white; color: white;
border-radius: 3px; border-radius: 3px;
} }
#mac_btn_command_center_clean_all { #mac_btn_command_center_clean_all {
color: #777; color: #777;
text-align: right; text-align: right;
@ -707,19 +719,30 @@ body {
color: #333; color: #333;
text-align: center; text-align: center;
} }
.mac-open-iframe.hide { .mac-open-iframe.hide {
display: none; display: none;
} }
.mac-btn_refresh { .mac-btn_refresh {
float: right; float: right;
} }
#mac .img-loader { #mac .img-loader {
display: none; display: none;
} }
.mac-open-iframe .layui-layer-min cite{display: none;} .mac-open-iframe .layui-layer-min cite {
.mac-open-iframe .layui-layer-max:hover{background-image:none} display: none;
.mac-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none} }
.mac-open-iframe .layui-layer-max:hover {
background-image: none
}
.mac-open-iframe .layui-layer-max, .layui-layer-maxmin {
background: none
}
.mac-open-iframe .layui-layer-setwin a::before { .mac-open-iframe .layui-layer-setwin a::before {
display: inline-block; display: inline-block;
@ -799,6 +822,7 @@ body {
.mac-open-iframe .layui-layer-min, .layui-layer-close, .layui-layer-max { .mac-open-iframe .layui-layer-min, .layui-layer-close, .layui-layer-max {
text-decoration: none; text-decoration: none;
} }
.mac-btn-refresh, .mac-btn-change-url, .mac-btn-refresh:hover, .mac-btn-change-url:hover { .mac-btn-refresh, .mac-btn-change-url, .mac-btn-refresh:hover, .mac-btn-change-url:hover {
text-decoration: none; text-decoration: none;
} }
@ -816,15 +840,60 @@ body {
} }
/*右键菜单*/ /*右键菜单*/
#mac .mac-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.45); display: block; border-radius: 5px; z-index: 99999999; } #mac .mac-context-menu {
#mac .mac-context-menu ul { margin: 0; padding: 0; } left: 0;
#mac .mac-context-menu ul li {transition: background-color 0.5s;cursor: default;padding: 0 1em; list-style: none; line-height: 25px; height: 25px; margin: 3px 0; font-size: 13px; } top: 0;
#mac .mac-context-menu ul li:hover { background-color: rgba(49,156,241,0.71);cursor: pointer; } position: fixed;
#mac .mac-context-menu ul li a {text-decoration: none; display: block; height: 100%; color: #333; outline: none; } width: 150px;
#mac .mac-context-menu ul hr { margin: 0; height: 0; border: 0; border-bottom: rgba(121, 121, 121, 0.24) 1px solid;border-top: none } height: auto;
background-color: rgba(255, 255, 255, 0.45);
display: block;
border-radius: 5px;
z-index: 99999999;
}
#mac .mac-context-menu ul {
margin: 0;
padding: 0;
}
#mac .mac-context-menu ul li {
transition: background-color 0.5s;
cursor: default;
padding: 0 1em;
list-style: none;
line-height: 25px;
height: 25px;
margin: 3px 0;
font-size: 13px;
}
#mac .mac-context-menu ul li:hover {
background-color: rgba(49, 156, 241, 0.71);
cursor: pointer;
}
#mac .mac-context-menu ul li a {
text-decoration: none;
display: block;
height: 100%;
color: #333;
outline: none;
}
#mac .mac-context-menu ul hr {
margin: 0;
height: 0;
border: 0;
border-bottom: rgba(121, 121, 121, 0.24) 1px solid;
border-top: none
}
/*块级按钮*/ /*块级按钮*/
.mac-open-iframe .layui-layer-ico{background-image:none;} .mac-open-iframe .layui-layer-ico {
background-image: none;
}
.mac-open-iframe .layui-layer-setwin { .mac-open-iframe .layui-layer-setwin {
position: absolute; position: absolute;
left: 0; left: 0;
@ -833,6 +902,7 @@ body {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.mac-open-iframe .layui-layer-setwin a { .mac-open-iframe .layui-layer-setwin a {
position: relative; position: relative;
width: 30px; width: 30px;
@ -842,6 +912,7 @@ body {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
} }
.mac-open-iframe .layui-layer-title { .mac-open-iframe .layui-layer-title {
line-height: 30px; line-height: 30px;
height: 30px; height: 30px;
@ -857,6 +928,7 @@ body {
border-radius: 3px; border-radius: 3px;
text-align: center; text-align: center;
} }
.mac-open-iframe .layui-layer-title img.icon, #mac_btn_group_middle .btn_title img.icon { .mac-open-iframe .layui-layer-title img.icon, #mac_btn_group_middle .btn_title img.icon {
width: 20px; width: 20px;
position: relative; position: relative;
@ -883,6 +955,7 @@ body {
z-index: 0; z-index: 0;
background-color: transparent; background-color: transparent;
} }
/*--------------尾部--------------------*/ /*--------------尾部--------------------*/
.dock { .dock {
@ -894,12 +967,22 @@ body {
text-align: center; text-align: center;
z-index: 1003; z-index: 1003;
} }
.dock-container { .dock-container {
position: absolute; width: 100%;
height: 60px; height: 60px;
flex-flow: row nowrap;
place-content: stretch center;
align-items: center;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
background-color: rgba(255, 255, 255, 0.45); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ background-color: rgba(255, 255, 255, 0.45); /* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
padding: 0 5px; padding: 0 5px;
margin: 0 auto;
} }
.dock a.dock-item { .dock a.dock-item {
@ -911,13 +994,18 @@ body {
position: absolute; position: absolute;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
align-self: auto;
flex-basis: auto;
flex-grow: 0;
} }
.dock-item span { .dock-item span {
display: none; display: none;
padding: 3px 0; padding: 3px 0;
border-radius: 5px; border-radius: 5px;
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
.dock-item img { .dock-item img {
border: none; border: none;
margin: 5px; margin: 5px;
@ -943,7 +1031,6 @@ body {
margin: 3vh auto 20px; margin: 3vh auto 20px;
height: 1.75rem; height: 1.75rem;
width: 16rem; width: 16rem;
color: var(--d-main);
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
@ -953,6 +1040,7 @@ body {
position: relative; position: relative;
background-color: rgba(229, 231, 235, 0.1); background-color: rgba(229, 231, 235, 0.1);
} }
.search label { .search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////t5hynAAAADt0Uk5TABqT4f/1u0487ui5zf6bARv6agInexLmEOPqeVS+THTz02JntjPAKkLZHoS18pFzyhXnq9wEW1Ecxze6XPngAAAAhUlEQVR4nE2MWRKCUAwEAw4C+hAEcVcEdxH3/f4HMxCknI+e6lQSItL0Goy6SRLLRqOpHLTc3Dy77QdEHYUwVx1+sdTtGX2uwTCQoxHGTEzKH1NEzFlcaoI5c4Gl6Apr5gbbHZebYl9MU2SH5HgC4rMcXQA419vP79bjqdGrcgn7m/5dfb4TpgmCJFVbRAAAAABJRU5ErkJggg==) no-repeat 0 50%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////t5hynAAAADt0Uk5TABqT4f/1u0487ui5zf6bARv6agInexLmEOPqeVS+THTz02JntjPAKkLZHoS18pFzyhXnq9wEW1Ecxze6XPngAAAAhUlEQVR4nE2MWRKCUAwEAw4C+hAEcVcEdxH3/f4HMxCknI+e6lQSItL0Goy6SRLLRqOpHLTc3Dy77QdEHYUwVx1+sdTtGX2uwTCQoxHGTEzKH1NEzFlcaoI5c4Gl6Apr5gbbHZebYl9MU2SH5HgC4rMcXQA419vP79bjqdGrcgn7m/5dfb4TpgmCJFVbRAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #fff; color: #fff;
@ -963,6 +1051,7 @@ body {
transition: left .4s, transform .4s; transition: left .4s, transform .4s;
padding-left: 1.25em; padding-left: 1.25em;
} }
.search .input-search { .search .input-search {
-webkit-appearance: textfield; -webkit-appearance: textfield;
background-color: rgba(229, 231, 235, 0.1); background-color: rgba(229, 231, 235, 0.1);
@ -975,11 +1064,13 @@ body {
width: 100%; width: 100%;
outline: none; /*点击之后。不出现边框*/ outline: none; /*点击之后。不出现边框*/
} }
.search .input-search:focus + label, .search .input-search:focus + label,
.search .input-search:valid + label { .search .input-search:valid + label {
left: .5em; left: .5em;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.search .input-search:valid + label { .search .input-search:valid + label {
text-indent: -9999px; text-indent: -9999px;
} }
@ -1021,40 +1112,39 @@ body {
flex-shrink: 1; flex-shrink: 1;
} }
#launchpad .shortcut>.icon {
width: 50px;
height: 50px;
overflow: hidden;
color: white;
box-sizing: border-box;
margin: 5px auto;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
font-size: 37px;
line-height: 50px;
}
#launchpad .shortcut .title {
color: white;
font-size: 12px;
text-align: center;
line-height: 18px;
margin-bottom: 5px;
}
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/ /*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
.mac-open-iframe .black-green, #mac .black-green{background:#009688!important;} .mac-open-iframe .black-green, #mac .black-green {
.mac-open-iframe .green,#mac .green{background:#5FB878!important;} background: #009688 !important;
.mac-open-iframe .black,#mac .black{background:#393D49!important;} }
.mac-open-iframe .blue,#mac .blue{background:#1E9FFF!important;}
.mac-open-iframe .orange,#mac .orange{background:#F7B824!important;} .mac-open-iframe .green, #mac .green {
.mac-open-iframe .red,#mac .red{background:#FF5722!important;} background: #5FB878 !important;
.mac-open-iframe .dark,#mac .dark{background:#2F4056!important;} }
.mac-open-iframe .purple,#mac .purple{background:#b074e6!important;}
.mac-open-iframe .black, #mac .black {
background: #393D49 !important;
}
.mac-open-iframe .blue, #mac .blue {
background: #1E9FFF !important;
}
.mac-open-iframe .orange, #mac .orange {
background: #F7B824 !important;
}
.mac-open-iframe .red, #mac .red {
background: #FF5722 !important;
}
.mac-open-iframe .dark, #mac .dark {
background: #2F4056 !important;
}
.mac-open-iframe .purple, #mac .purple {
background: #b074e6 !important;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
#mac-menu { #mac-menu {
width: 100%; width: 100%;
@ -1063,40 +1153,49 @@ body {
height: calc(100% - 25px); height: calc(100% - 25px);
border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px;
} }
#mac-menu.hidden { #mac-menu.hidden {
top: calc(-100% + 25px); top: calc(-100% + 25px);
} }
#mac_command_center { #mac_command_center {
top: 24px; top: 24px;
width: 100%; width: 100%;
} }
#mac_command_center.hidden_right { #mac_command_center.hidden_right {
right: -100%; right: -100%;
} }
.layui-layer-setwin .layui-layer-max { .layui-layer-setwin .layui-layer-max {
display: none; display: none;
} }
#mac_btn_group_left .btn { #mac_btn_group_left .btn {
height: 100%; height: 100%;
width: 40px; width: 40px;
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
} }
#mac_btn_group_right .btn { #mac_btn_group_right .btn {
height: 100%; height: 100%;
min-width: 4px; min-width: 4px;
padding: 0 10px; padding: 0 10px;
font-size: 16px !important; font-size: 16px !important;
} }
#mac_btn_show_desktop { #mac_btn_show_desktop {
border-left: grey 1px solid; border-left: grey 1px solid;
width: 15px; width: 15px;
margin-left: 3px; margin-left: 3px;
padding: 0 !important padding: 0 !important
} }
#mac_btn_group_left { #mac_btn_group_left {
max-width: 100px; max-width: 100px;
} }
#mac_btn_group_middle { #mac_btn_group_middle {
width: calc(100% - 160px); width: calc(100% - 160px);
} }
@ -1104,6 +1203,7 @@ body {
#mac_btn_group_right { #mac_btn_group_right {
max-width: 150px; max-width: 150px;
} }
#mac-menu .list { #mac-menu .list {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1123,33 +1223,43 @@ body {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
#mac_btn_time{display: none} #mac_btn_time {
display: none
}
#mac-menu-switcher { #mac-menu-switcher {
display: none; display: none;
} }
#mac-menu > .mac-menu-hidden { #mac-menu > .mac-menu-hidden {
display: block; display: block;
} }
#mac_btn_group_middle .btn_close { #mac_btn_group_middle .btn_close {
display: none; display: none;
} }
.mac-open-iframe .layui-layer-setwin a { .mac-open-iframe .layui-layer-setwin a {
width: 32px; width: 32px;
} }
.dock{ #dock {
width: 100%; width: 100%;
height: 60px; height: 60px;
border-radius: 0; border-radius: 0;
} }
.dock .dock-container{
#dock .dock-container {
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
flex-flow: row nowrap;
place-content: stretch center;
align-items: center;
left: 0;
} }
.dock a.dock-item{ #dock a.dock-item {
width: 100%; width: 100%;
margin-left: 25px;
float: left; float: left;
position: static; position: static;
} }

4
index.html
View File

@ -11,7 +11,7 @@
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'> <link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
<link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/animate.css/4.1.1/animate.min.css"> <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/index.min.css"> <link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css"> <link rel="stylesheet" href="./plugins/shortcut-drawer/shortcut-drawer.min.css">
</head> </head>
@ -154,7 +154,7 @@
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script> src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js"></script> <script type="text/javascript" src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/layer/3.5.1/layer.min.js"></script>
<script type="text/javascript" src="./js/interface.min.js"></script> <script type="text/javascript" src="./js/interface.min.js"></script>
<script type="text/javascript" src="./js/index.min.js"></script> <script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script> <script type="text/javascript" src="./plugins/shortcut-drawer/shortcut-drawer.min.js"></script>
<script> <script>
Macui.onReady(function () { Macui.onReady(function () {

11
js/index.js
View File

@ -976,7 +976,7 @@ window.Macui = {
let cell_width = 50; let cell_width = 50;
let width = document.body.clientWidth; let width = document.body.clientWidth;
let docks = $(".dock .dock-container a"); let docks = $(".dock .dock-container a");
let max_num = parseInt((width - 40) / (cell_width + 25)) - 1; let max_num = width / cell_width - 1;
for (let i = 0; i <= docks.length; i++) { for (let i = 0; i <= docks.length; i++) {
if (i >= max_num) { if (i >= max_num) {
docks.eq(i).hide(); docks.eq(i).hide();
@ -997,11 +997,7 @@ window.Macui = {
halign: 'center' halign: 'center'
}) })
} else { } else {
$('.dock-container').css({ for (let i = 0; i <= max_num; i++) {
'width': width
});
for (let i = 0; i < max_num; i++) {
docks.on('mouseover', function (e) { docks.on('mouseover', function (e) {
e.preventDefault(); e.preventDefault();
}); });
@ -1266,7 +1262,8 @@ window.Macui = {
icon: 3, icon: 3,
title: Macui.lang('提示', 'Prompt') title: Macui.lang('提示', 'Prompt')
}, function (index) { }, function (index) {
document.body.onbeforeunload = function() {}; document.body.onbeforeunload = function () {
};
window.location.href = "about:blank"; window.location.href = "about:blank";
window.close(); window.close();
layer.close(index); layer.close(index);