mirror of https://github.com/1099438829/macUI.git
943 lines
21 KiB
CSS
943 lines
21 KiB
CSS
@charset "utf-8";
|
|
body,a,h1,h2,h3,h4,h5,h6,p,div,em,ul,li {
|
|
font-family: PingFangSC-Ultralight, 'microsoft yahei';
|
|
}
|
|
* {
|
|
font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu
|
|
}
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
/*去除ul中li左边的圆点*/
|
|
ul{
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#win10 *{
|
|
-webkit-user-select:none;
|
|
-moz-user-select:none;
|
|
-ms-user-select:none;
|
|
user-select:none;
|
|
}
|
|
|
|
#win10-login{
|
|
background: black no-repeat fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
position: fixed;
|
|
z-index: -1;
|
|
top:0;
|
|
left:0;
|
|
}
|
|
|
|
#win10 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black no-repeat fixed;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#win10 .blur {
|
|
-webkit-filter: blur(8px); /* Chrome, Opera */
|
|
-moz-filter: blur(8px);
|
|
-ms-filter: blur(8px);
|
|
filter: blur(8px);
|
|
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=8, MakeShadow=false);
|
|
transition: filter 0.3s;
|
|
transition: -webkit-filter 0.3s;
|
|
transition: -moz-filter 0.3s;
|
|
transition: -ms-filter 0.3s;
|
|
}
|
|
|
|
#win10 .desktop .background {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -999;
|
|
transform: scale3d(1.1, 1.1, 1);
|
|
background-size: 100% 100%;
|
|
background-position: center center;
|
|
}
|
|
|
|
#win10 *{
|
|
scrollbar-arrow-color: #5e6a5c; /*图6,三角箭头的颜色*/
|
|
scrollbar-face-color: #5e6a5c; /*图5,立体滚动条的颜色*/
|
|
scrollbar-3dlight-color: #5e6a5c; /*图1,立体滚动条亮边的颜色*/
|
|
scrollbar-highlight-color: #5e6a5c; /*图2,滚动条空白部分的颜色*/
|
|
scrollbar-shadow-color: #5e6a5c; /*图3,立体滚动条阴影的颜色*/
|
|
scrollbar-darkshadow-color: #5e6a5c; /*图4,立体滚动条强阴影的颜色*/
|
|
scrollbar-track-color: rgba(74, 84, 78, 0.41); /*图7,立体滚动条背景颜色*/
|
|
scrollbar-base-color:#5e6a5c; /*滚动条的基本颜色*/
|
|
}
|
|
|
|
#win10 hr { height:0px; border-top:1px solid #999; border-right:0px; border-bottom:0px; border-left:0px; }
|
|
|
|
#win10 .desktop {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
}
|
|
|
|
#win10_task_bar {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
height: 30px;
|
|
line-height:30px;
|
|
/* IE9+ */
|
|
background-color:rgba(255,255,255,0.4);
|
|
/* IE6-IE8 */
|
|
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#68FFFFFF,endColorStr=#68FFFFFF);
|
|
z-index: 19930813;
|
|
}
|
|
|
|
#win10 .btn_group {
|
|
height: 100%;
|
|
}
|
|
|
|
#win10 .btn_group .btn {
|
|
float: left;
|
|
color:#333;
|
|
font-weight:bold;
|
|
text-align: center;
|
|
height: 100%;
|
|
line-height: 30px;
|
|
text-overflow:ellipsis;
|
|
overflow: hidden;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#win10 .btn_group .btn:hover {
|
|
color: white;
|
|
background-color: rgba(49,156,241,0.71);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#win10_btn_group_left{
|
|
float: left;
|
|
overflow: auto;
|
|
max-width:200px;
|
|
padding-left:0.5%;
|
|
}
|
|
|
|
#win10_btn_group_middle{
|
|
float: left;
|
|
overflow: auto;
|
|
display: inline-block;
|
|
}
|
|
#win10_btn_group_middle .btn_close{
|
|
position: absolute;
|
|
right: 0;
|
|
width: 20px;
|
|
text-align: center;
|
|
color: transparent;
|
|
}
|
|
#win10_btn_group_middle .btn:hover .btn_close{
|
|
color: rgba(131, 168, 157, 0.71);
|
|
}
|
|
#win10_btn_group_middle .btn:hover .btn_close:hover{
|
|
color: white;
|
|
}
|
|
|
|
#win10_btn_group_middle .btn_title{
|
|
float: left;
|
|
width: 100%;
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#win10_btn_group_middle::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
|
|
#win10_btn_group_middle::-webkit-scrollbar-track {
|
|
background-color: #808080;
|
|
}
|
|
|
|
#win10_btn_group_middle::-webkit-scrollbar-thumb {
|
|
background-color: rgba(30, 39, 34, 0.41);
|
|
}
|
|
|
|
#win10_btn_group_right{
|
|
float: right;
|
|
max-width:200px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#win10_btn_group_left .btn {
|
|
height: 100%;
|
|
width: 35px;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#win10_btn_group_right .btn {
|
|
height: 100%;
|
|
min-width: 4px;
|
|
padding: 0 10px;
|
|
font-size: 12px ;
|
|
}
|
|
|
|
#win10_btn_show_desktop {
|
|
border-left: grey 1px solid;
|
|
width: 4px;
|
|
margin-left: 3px;
|
|
padding: 0 !important
|
|
}
|
|
|
|
#win10_btn_time {
|
|
font-size: 12px;
|
|
/*line-height: 30px !important */
|
|
}
|
|
#win10-menu {
|
|
position: fixed;
|
|
top: 31px;
|
|
left: 0.5%;
|
|
background-color: rgba(255,255,255,0.55);
|
|
height: auto;
|
|
width: 10%;
|
|
max-width: 880px;
|
|
overflow: auto;
|
|
z-index: 1000;
|
|
overflow-y: hidden;
|
|
transition: bottom 0.5s;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#win10-menu.hidden {
|
|
top:-70%;
|
|
}
|
|
|
|
#win10-menu .list::-webkit-scrollbar,#win10_command_center::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
#win10-menu .list::-webkit-scrollbar-track,#win10_command_center::-webkit-scrollbar-track {
|
|
background-color: rgba(74, 84, 78, 0.41);
|
|
}
|
|
|
|
#win10-menu .list::-webkit-scrollbar-thumb,#win10_command_center::-webkit-scrollbar-thumb {
|
|
background-color: #6a6a6a;
|
|
}
|
|
|
|
#win10-menu .list::-webkit-scrollbar-button ,#win10_command_center::-webkit-scrollbar-button {
|
|
/*background-color: #6a6a6a;*/
|
|
}
|
|
|
|
#win10-menu .list{
|
|
float: left;
|
|
width: 180px;
|
|
height:100%;
|
|
overflow: auto;
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
#win10-menu .list{
|
|
width:100%;
|
|
padding:0;
|
|
padding-top: 5px;
|
|
font-size: 12px;
|
|
height: 100%;
|
|
}
|
|
|
|
#win10-menu .list .item.has-sub-down::after{
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
content:"\f107";
|
|
line-height: inherit;
|
|
float: right;
|
|
}
|
|
|
|
#win10-menu .list .item.has-sub-up::after{
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
content:"\f106";
|
|
line-height: inherit;
|
|
float: right;
|
|
}
|
|
|
|
#win10-menu .list .item,.sub-item{
|
|
color:#333;
|
|
margin: 1px 0;
|
|
line-height: 2em;
|
|
padding: 0 10px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
transition: background-color 0.3s;
|
|
position: relative;
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
#win10-menu .list .item>.icon,#win10-menu .list .sub-item>.icon,.sub-item>.icon{
|
|
line-height:2em;
|
|
font-size: 1.2em;
|
|
float: left;
|
|
margin-right: 0.5em;
|
|
/*width: 36px;*/
|
|
position: relative;
|
|
/*top:2px;*/
|
|
|
|
}
|
|
|
|
#win10-menu .list .sub-item{
|
|
padding-left:30px;
|
|
width: calc(100% - 40px);
|
|
}
|
|
|
|
#win10-menu .list .item:hover,.sub-item:hover{
|
|
background-color: rgba(49,156,241,0.71);
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
#win10-menu-switcher{
|
|
position: absolute;
|
|
height: 100%;
|
|
border-left: 1px solid grey;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
width: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#win10-menu-switcher:active{
|
|
background-color: rgba(92, 109, 92, 0.81);
|
|
}
|
|
|
|
#win10-menu .menu_group {
|
|
float: left;
|
|
width: 300px;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#win10-menu .menu_group .title {
|
|
padding: 5px;
|
|
padding-top: 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
#win10-menu .menu_group:hover .title::after{
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
content:"\f0c9";
|
|
line-height: inherit;
|
|
float: right;
|
|
margin-right: 17px;
|
|
color: grey;
|
|
}
|
|
|
|
#win10 #win10-shortcuts {
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
#win10 #win10-shortcuts.shortcuts-hidden .shortcut{display: none}
|
|
|
|
#win10 #win10-shortcuts .shortcut {
|
|
width: 80px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
position: absolute;
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
#win10 #win10-shortcuts .shortcut:hover {
|
|
background-color: rgba(255, 255, 255, 0.11);
|
|
}
|
|
|
|
#win10 #win10-shortcuts .shortcut>.icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
color: white;
|
|
box-sizing: border-box;
|
|
margin-bottom: 5px;
|
|
margin-top: 5px;
|
|
text-align: center;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
display: block;
|
|
font-size: 37px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
#win10-shortcuts .shortcut .title {
|
|
color: white;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#win10_command_center {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 31px;
|
|
width: 350px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
height: calc(100% - 32px);
|
|
transition: all 0.5s;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#win10_command_center.hidden_right {
|
|
right: -350px;
|
|
}
|
|
|
|
#win10_command_center > .title{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding-left: 10px;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
#win10_command_center > .title:hover{
|
|
background-color: rgba(255, 255, 255, 0.19);
|
|
}
|
|
|
|
#win10_btn_group_right #win10_btn_command{
|
|
font-size: 20px;
|
|
}
|
|
#win10_btn_command .msgNof{
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 20px;
|
|
border: 1px solid red;
|
|
background-color: red;
|
|
color: white;
|
|
border-radius: 3px;
|
|
}
|
|
#win10_btn_command_center_clean_all{
|
|
color:#777;
|
|
text-align: right;
|
|
font-size:12px;
|
|
float: right;
|
|
margin-top:40px;
|
|
margin-right:24px;
|
|
transition: color 0.5s;
|
|
}
|
|
|
|
#win10_btn_command_center_clean_all:hover{
|
|
cursor: pointer;
|
|
color:#333;
|
|
}
|
|
|
|
#win10_command_center .msgs{
|
|
position: absolute;
|
|
top:60px;
|
|
left: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
/*padding: 10px;*/
|
|
}
|
|
|
|
#win10_command_center .btn_close_msg{
|
|
line-height: inherit;
|
|
transition: color 0.5s ;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg{
|
|
width: calc(100% - 20px);
|
|
min-height: 40px;
|
|
padding:10px;
|
|
transition: background-color 0.5s;
|
|
position: relative;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg.animated{
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg:hover{
|
|
cursor: default;
|
|
background-color: rgba(255, 255, 255, 0.19);
|
|
}
|
|
#win10_command_center .msgs .msg:hover .title{
|
|
color: #333;
|
|
}
|
|
#win10_command_center .msgs .msg:hover>.btn_close_msg{
|
|
color: grey;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg:hover>.content{
|
|
color: #333;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg>.title{
|
|
color: #777;
|
|
font-size: 14px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg>.btn_close_msg{
|
|
cursor: pointer;
|
|
color: transparent;
|
|
padding: 3px;
|
|
position: absolute;
|
|
top: 11px;
|
|
right: 11px;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg>.btn_close_msg:hover{
|
|
color: white;
|
|
}
|
|
|
|
#win10_command_center .msgs .msg>.content{
|
|
font-size: 12px;
|
|
color: #777;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#win10_btn_group_middle .btn{
|
|
float: left;
|
|
box-sizing: border-box;
|
|
height: inherit;
|
|
max-width: 140px;
|
|
line-height: 40px;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
word-break: keep-all;
|
|
padding: 0 10px;
|
|
margin-right: 1px;
|
|
position: relative;
|
|
}
|
|
|
|
#win10_btn_group_middle .btn.active{
|
|
background: rgba(255,255,255,0.6);
|
|
}
|
|
|
|
#win10_btn_group_middle .btn:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.win10-open-iframe{
|
|
/*繁华年间许你一世安宁提供*/
|
|
background-color: transparent;
|
|
/* border: 1px solid #323232; */
|
|
border: #f0f6f6 solid 1px !important;
|
|
-webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
|
-moz-box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
|
box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.8);
|
|
border-radius: 6px;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-content{
|
|
background-color: white;
|
|
max-height: calc(100% - 30px);
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-title{
|
|
box-sizing: border-box;
|
|
background: rgba(250, 250, 250, 0.9);
|
|
padding-left: 120px;
|
|
border-radius:4px 4px 0px 0px;
|
|
color: #333;
|
|
text-align:center;
|
|
}
|
|
.win10-open-iframe.hide{
|
|
display: none;
|
|
}
|
|
.win10-btn_refresh{
|
|
float: right;
|
|
}
|
|
#win10 .img-loader{
|
|
display: none;
|
|
}
|
|
|
|
|
|
.win10-open-iframe .layui-layer-min cite{display: none;}
|
|
.win10-open-iframe .layui-layer-max:hover{background-image:none}
|
|
.win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none}
|
|
.win10-open-iframe .layui-layer-setwin a.layui-layer-close1:hover::before{
|
|
content:"\f057";
|
|
color: #FF6057;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-min::before{
|
|
content:"\f111";
|
|
color: #28CA40;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-min:hover::before{
|
|
content:"\f056";
|
|
color: #28CA40;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-max::before{
|
|
content:"\f111";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-max:hover::before{
|
|
content:"\f055";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-maxmin.layui-layer-max::before{
|
|
content:"\f111";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-maxmin.layui-layer-max:hover::before{
|
|
content:"\f055";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-close::before{
|
|
content:"\f111";
|
|
color: #FF6057;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
|
text-decoration: none;
|
|
}
|
|
.win10-btn-refresh,.win10-btn-change-url,.win10-btn-refresh:hover,.win10-btn-change-url:hover{
|
|
text-decoration:none;
|
|
}
|
|
|
|
.win10-open-iframe .win10-btn-refresh::before,.win10-btn-change-url::before{
|
|
content:"\f111";
|
|
color: #029FFF;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-open-iframe .win10-btn-refresh:hover::before,.win10-btn-change-url:hover::before{
|
|
content:"\f192";
|
|
color: #029FFF;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
|
text-decoration: none;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-ico{background-image:none;}
|
|
|
|
.win10-layer-open-browser textarea{
|
|
margin: 20px;
|
|
outline: none;
|
|
resize: none;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-min cite{display: none;}
|
|
.win10-layer-open-browser .layui-layer-max:hover{background-image:none}
|
|
.win10-layer-open-browser .layui-layer-max,.layui-layer-maxmin{background:none}
|
|
.win10-layer-open-browser .layui-layer-setwin a.layui-layer-close:hover::before{
|
|
content:"\f057";
|
|
color: #FF6057;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-min::before{
|
|
content:"\f111";
|
|
color: #28CA40;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-min:hover::before{
|
|
content:"\f056";
|
|
color: #28CA40;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-max::before{
|
|
content:"\f111";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-max:hover::before{
|
|
content:"\f055";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max::before{
|
|
content:"\f111";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max:hover::before{
|
|
content:"\f055";
|
|
color: #FFBD2E;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-close::before{
|
|
content:"\f111";
|
|
color: #FF6057;
|
|
font: normal normal normal 16px/1 FontAwesome;
|
|
}
|
|
|
|
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
|
|
text-decoration: none;
|
|
}
|
|
|
|
/*右键菜单*/
|
|
#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.75); border: #CCC 1px solid; display: block; border-radius: 5px; z-index: 99999999; }
|
|
#win10 .win10-context-menu ul { margin: 0px; padding: 0px; }
|
|
#win10 .win10-context-menu ul li {transition: background-color 0.5s;cursor: default;padding: 0px 1em; list-style: none; line-height: 30px; height: 30px; margin: 3px 0; font-size: 13px; }
|
|
#win10 .win10-context-menu ul li:hover { background-color: rgba(49,156,241,0.71);cursor: pointer; }
|
|
#win10 .win10-context-menu ul li a {text-decoration: none; display: block; height: 100%; color: #333; outline: none; }
|
|
#win10 .win10-context-menu ul hr { margin: 0; height: 0px; border: 0px; border-bottom: rgba(233,233,233) 1px solid;border-top: none }
|
|
|
|
/*块级按钮*/
|
|
.win10-open-iframe .layui-layer-ico{background-image:none;}
|
|
.win10-open-iframe .layui-layer-setwin {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
font-size: 0;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.win10-open-iframe .layui-layer-setwin a {
|
|
position: relative;
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
margin:0px;
|
|
}
|
|
.win10-open-iframe .layui-layer-title{
|
|
line-height:30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-title{
|
|
line-height:30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.win10-open-iframe .layui-layer-title .icon ,#win10_btn_group_middle .btn_title .icon{
|
|
font-size: 15px;
|
|
padding: 1px;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
text-align: center;
|
|
margin-right: 0.5em;
|
|
}
|
|
.win10-open-iframe .layui-layer-title img.icon,#win10_btn_group_middle .btn_title img.icon{
|
|
width: 20px;
|
|
position: relative;
|
|
top:5px ;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
#win10-menu>.list>.sub-item img.icon,#win10-menu>.list>.item img.icon{
|
|
width: 36px;
|
|
height:36px;
|
|
position: relative;
|
|
top:2px ;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
/*桌面舞台样式*/
|
|
#win10-desktop-scene{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
background-color: transparent;
|
|
}
|
|
/*--------------尾部--------------------*/
|
|
|
|
.dock {
|
|
width: 100%;
|
|
bottom: 0px;
|
|
position: absolute;
|
|
left: 0px;
|
|
height: 65px;
|
|
text-align: center;
|
|
z-index:1000;
|
|
}
|
|
.dock-container {
|
|
position: absolute;
|
|
height: 60px;
|
|
border-radius: 5px;
|
|
background-color: rgba(255,255,255,0.45) ;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
|
|
padding:0 20px;
|
|
}
|
|
|
|
.dock a.dock-item {
|
|
display: block;
|
|
font: bold 12px Arial, Helvetica, sans-serif;
|
|
width: 60px;
|
|
color: #fff;
|
|
bottom: 0px;
|
|
position: absolute;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
.dock-item span {
|
|
display: none;
|
|
padding:3px 0px;
|
|
border-radius: 5px;
|
|
background-color: rgba(0,0,0,0.45);
|
|
}
|
|
.dock-item img {
|
|
border: none;
|
|
margin: 5px;
|
|
width: 100%;
|
|
}
|
|
|
|
/*各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010*/
|
|
.win10-open-iframe .black-green, #win10 .black-green{background:#009688!important;}
|
|
.win10-open-iframe .green,#win10 .green{background:#5FB878!important;}
|
|
.win10-open-iframe .black,#win10 .black{background:#393D49!important;}
|
|
.win10-open-iframe .blue,#win10 .blue{background:#1E9FFF!important;}
|
|
.win10-open-iframe .orange,#win10 .orange{background:#F7B824!important;}
|
|
.win10-open-iframe .red,#win10 .red{background:#FF5722!important;}
|
|
.win10-open-iframe .dark,#win10 .dark{background:#2F4056!important;}
|
|
.win10-open-iframe .purple,#win10 .purple{background:#b074e6!important;}
|
|
@media screen and (max-width:768px){
|
|
#win10-menu{
|
|
width:100%;
|
|
height: calc(100% - 31px);
|
|
}
|
|
#win10-menu.hidden{
|
|
top: calc(-100% + 31px);
|
|
}
|
|
#win10_command_center{
|
|
width: 100%;
|
|
}
|
|
#win10_command_center.hidden_right {
|
|
right: -100%;
|
|
}
|
|
.layui-layer-setwin .layui-layer-max{
|
|
display: none;
|
|
}
|
|
#win10_btn_group_left .btn {
|
|
height: 100%;
|
|
width: 40px;
|
|
overflow: hidden;
|
|
font-size: 16px;
|
|
}
|
|
#win10_btn_group_right .btn {
|
|
height: 100%;
|
|
min-width: 4px;
|
|
padding: 0 10px;
|
|
font-size: 16px!important;
|
|
}
|
|
#win10_btn_show_desktop {
|
|
border-left: grey 1px solid;
|
|
width: 15px;
|
|
margin-left: 3px;
|
|
padding: 0 !important
|
|
}
|
|
#win10_btn_group_left{
|
|
max-width:100px;
|
|
}
|
|
#win10_btn_group_middle{
|
|
width:calc(100% - 160px);
|
|
}
|
|
#win10_btn_group_middle .btn{
|
|
padding: 0 3px;
|
|
}
|
|
#win10_btn_group_right{
|
|
max-width:150px;
|
|
}
|
|
#win10-menu .list{
|
|
position: absolute;
|
|
width:100%;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
}
|
|
|
|
#win10-menu .menu_group {
|
|
width: 90%;
|
|
float: none;
|
|
margin: 0 auto;
|
|
clear: both;
|
|
}
|
|
|
|
#win10-menu .list .item, .sub-item{
|
|
width: 100%;
|
|
}
|
|
|
|
#win10_btn_time{display: none}
|
|
#win10-menu-switcher{
|
|
display: none;
|
|
}
|
|
#win10-menu>.win10-menu-hidden{
|
|
display: block;
|
|
}
|
|
#win10_btn_group_middle .btn_close{
|
|
display: none;
|
|
}
|
|
.win10-open-iframe .layui-layer-setwin a {
|
|
width: 32px;
|
|
}
|
|
|
|
.dock{
|
|
width: 100%;
|
|
height:60px;
|
|
border-radius: 0px;
|
|
}
|
|
.dock .dock-container{
|
|
width: 100%;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.dock a.dock-item{
|
|
width: 100%;
|
|
margin-left: 25px;
|
|
float:left;
|
|
position: static;
|
|
}
|
|
|
|
} |