81 lines
2.0 KiB
Plaintext
81 lines
2.0 KiB
Plaintext
@menu_color:#333;
|
|
@menu_disablecolor:#999;
|
|
@menu_hover_color:#2F74EE;
|
|
|
|
.menu(){
|
|
padding:6px 0px;
|
|
border:1px solid #aaa;
|
|
box-shadow:0 10px 80px #555;
|
|
border-radius:4px;
|
|
background:#fff;
|
|
.box-shadow(0 10px 80px #555);
|
|
|
|
-webkit-animation-name: fadein;
|
|
-webkit-animation-duration: 0.2s;
|
|
-webkit-animation-timing-function: linear;
|
|
-webkit-animation-iteration-count: 0.6;
|
|
}
|
|
.menu_item(){
|
|
padding:0px 40px 0 20px;
|
|
border:none;color:@menu_color;
|
|
.transition(background-color .2s);
|
|
}
|
|
.menu_item_hover(){
|
|
color:#fff;
|
|
background:@menu_hover_color;
|
|
background-color:none~'\9';
|
|
}
|
|
|
|
|
|
@-webkit-keyframes fadein {
|
|
0% {opacity:0;}
|
|
50% {opacity: 0.4;}
|
|
}
|
|
/* 右键菜单样式 */
|
|
.playmusic-icon{display: none;}
|
|
.context-menu-list {
|
|
margin:0;margin-left:4px;margin-top:4px;
|
|
min-width: 120px;
|
|
max-width: 250px;
|
|
font-size:12px;
|
|
display: inline-block;
|
|
position: absolute;
|
|
list-style-type: none;
|
|
.selected{border-left:5px solid #666 !important;background:#eee;padding-left:15px !important;}
|
|
.menu;
|
|
.context-menu-submenu:after{
|
|
content: "\f0da";font-family:FontAwesome;
|
|
display: inline-block;float:right;margin-right: -30px;
|
|
}
|
|
.context-menu-item {
|
|
display:block;cursor:pointer;
|
|
white-space:nowrap;
|
|
color:#444;line-height:23px;height:23px;
|
|
position: relative;border: none;
|
|
.menu_item;
|
|
|
|
.font-icon{display: inline-block;width:25px;font-size: 1.2em;color: #888;}
|
|
&.disabled {color:@menu_disablecolor;}
|
|
&.disabled.hover{cursor: default;background-color: #EEE;}
|
|
&.hover {
|
|
cursor: pointer;
|
|
.menu_item_hover;
|
|
.font-icon{color: #fff;}
|
|
}
|
|
span i{float:right;text-align:right;font-style: normal;color: #888;}
|
|
/* 横线 */
|
|
&.context-menu-separator {
|
|
height:2px;line-height:0;
|
|
border-bottom:1px solid #ddd;
|
|
margin: 2px 0 2px;
|
|
}
|
|
& > .context-menu-list {display: none;right: -5px;top: 5px;}
|
|
&.hover > .context-menu-list {
|
|
display: block;
|
|
.font-icon{color: #888;}
|
|
.hover .font-icon{color: #fff;}
|
|
}
|
|
.context-menu-accesskey {text-decoration: underline;}
|
|
}
|
|
}
|