noname/layout/default/menu.css

769 lines
16 KiB
CSS

.menu-container{
z-index:8;
}
.menu-container div{
position: relative;
}
.menu-container.hidden{
pointer-events: none;
}
#menu-button{
z-index:6;
}
.popup-container{
z-index:10;
}
.menu-container,.popup-container{
width:100%;
height:100%;
left:0;
top:0;
position: absolute;
}
.menu-buttons,.menu-sym{
padding-bottom: 5px !important;
width: calc(100% - 10px) !important;
padding-right: 5px !important;
}
.menu-buttons div{
position: absolute;
}
.menu-buttons>.glow{
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 15px !important;
}
.menu-cheat>div{
margin:5px;
}
.menu-cheat>.selecting{
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(255, 0, 0, 0.8) 0 0 5px, rgba(255, 0, 0, 0.8) 0 0 5px !important
}
.menu-cheat.config>.menubutton{
height:16px;
line-height: 16px;
transform: translateY(-10px);
}
.menu-cheat.config{
transition-property: opacity;
}
.menu-buttons>.toggle,
.menu-buttons>.config.more{
position:relative;
margin-bottom: 10px !important;
margin-left: 10px !important;
margin-right: 10px !important;
width: calc(100% - 25px) !important;
display: inline-block;
}
.menu-buttons>.config.more,
.menu-buttons>.toggle.cardpilecfg{
margin-bottom: 0 !important;
display: block;
}
.menu-buttons>.toggle.cardpilecfgadd:not(.hidden){
margin-top: 0 !important;
}
.menu-buttons>.toggle.cardpilecfg:not(.nomarginleft){
margin-left: 20px !important;
width: calc(100% - 35px) !important;
}
.menu-buttons>.config.more *{
position: relative;
}
.menu-buttons>.button{
zoom:0.75;
}
.menu-buttons .cardpiledelete,
.toggle>.cardpiledelete{
display: inline-block;
position: relative;
float: right;
margin-right: 4px;
}
.menu-help{
width: calc(100% - 30px) !important;
text-align: left !important;
}
.menu-help li{
margin-bottom: 10px !important;
}
.menu-container>.menu.main{
left: 15px;
top: 52px;
}
.menu-container>.menu.main.center{
left:calc(50% - 200px);
top:calc(50% - 150px);
}
.menu-container.hidden>.menu.main{
transform:scale(0.5);
transform-origin:2px -35px;
opacity:0;
}
.menu-container>.menu.main{
transition: all 0.3s;
transform-origin:2px -35px;
}
.menu-container.hidden>.menu.main.center{
/*transform:translateY(300px);*/
transform-origin: center center;
}
.menu-container>.menu.main.center{
transform-origin: center center;
}
.menu.main{
width: 400px;
height:300px;
position: absolute;
overflow:hidden;
padding:0;
}
.menu.main>.menu-tab{
height:37px;
text-align:center;
width:calc(100% - 30px);
padding-left:15px;
padding-right:15px;
position:relative;
text-align:center;
border-width: 0 0 1px;
border-style:solid;
border-image:linear-gradient(to right, transparent,rgba(0,0,0,0.2) 10%,rgba(0,0,0,0.2) 90%,transparent) 0 1 100%;
}
.menu.main>.menu-tab-bar{
width:45px;
height:2px;
top:35px;
position:absolute;
background-color:rgb(0, 133, 255);
transition:left 0.3s;
}
.menu.main>.menu-tab>div{
display:inline-block;
height:32px;
line-height:30px;
padding-top:5px;
width:45px;
margin-left:5px;
margin-right:5px;
transition:color 0.5s;
}
.menu.main>.menu-tab>div:not(.active):not(*:hover),
.menu.main>.menu-tab>.disabled{
color:rgba(255,255,255,0.6);
}
.menu.main>.menu-content{
height:calc(100% - 38px);
position:relative;
width:100%;
}
.menu.main>.menu-content>div{
width:100%;
height:100%;
}
.menu.main>.menu-content>div>.pane{
position:absolute;
display:inline-block;
height:100%;
}
.menu.main>.menu-content>div>.left.pane{
width:34%;
left:0;
overflow: scroll;
}
.menu.main>.menu-content>div>.left.pane>div{
width:calc(100% - 30px);
margin-top:9px;
margin-left:10px;
transition:all 0.3s;
height: 23px;
font-size: 26px;
line-height: 26px;
white-space: nowrap;
}
.menu.main>.menu-content>div>.left.pane>.menubutton.off{
opacity: 0.5;
}
.menu.main>.menu-content>div>.left.pane>.lefttext{
font-family: 'xinwei';
font-size: 20px;
}
.menu.main>.menu-content>div>.left.pane>div:last-child{
margin-bottom: 9px;
}
.menu.main>.menu-content>div>.left.pane.dim>div:not(.active){
color:rgba(255,255,255,0.5);
}
.menu.main>.menu-content>div>.right.pane{
left:34%;
width:66%;
overflow:scroll;
}
.menu.main>.menu-content>div>.right.pane>div{
width:calc(100% - 5px);
position:absolute;
top:0;
left:0;
padding-left:5px;
padding-top:5px;
}
.menu.main>.menu-content>div>.right.pane>.expanded{
padding-bottom:80px;
}
.menu.main>.menu-content>div>.right.pane>.expanded.expanded2{
padding-bottom:12px;
}
.menu.main>.menu-content>div>.right.pane>.morenodes{
padding-bottom:10px;
}
.menu.main>.menu-content>div>.right.pane>div>.config{
left:2px;
margin-top:10px;
margin-left: 3px;
transition:all 0.3s;
width:calc(100% - 20px);
overflow: visible;
}
.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd{
height: 50px;
transition: all 0s;
}
.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd.hidden{
margin-top: -50px;
}
.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd:not(.hidden),
.menu.main>.menu-content>div>.right.pane>div>.config.cardpileadd:not(.hidden){
margin-top:0;
}
.menu.main>.menu-content>div>.right.pane>div>.config.banskilladd>select{
margin-right: 3px;
}
.menu.main>.menu-content>div>.right.pane>div>.config.toggle{
left:2px !important;
text-align: left !important;
}
.menu.main>.menu-content>div>.right.pane>div>.config.indent,
.menu.main>.menu-content>div>.right.pane>div>.config.toggle.indent{
left:12px !important;
width: calc(100% - 32px) !important;
}
.menu.main>.menu-content>div>.right.pane>div:not(.expanded)>.config.auto-hide,
.menu.main>.menu-content>div>.right.pane>div>.config.hidden{
margin-top:-25px;
opacity:0;
z-index:-1;
}
.menu.main>.menu-content>div>.menubutton.round{
left:335px;
top:197px;
z-index:3;
transition-property: color, box-shadow;
transition-duration:0.3s;
position:absolute;
}
.menu.main>.menu-content>div>.menubutton.round.glowing{
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 133, 255, 0.8) 0 0 10px, rgba(0, 133, 255, 0.8) 0 0 15px !important;
}
.popup-container.hidden{
pointer-events:none;
}
.popup-container>.menu{
position:absolute;
overflow:scroll;
max-height: 400px;
transition-property: opacity;
}
.popup-container>.menu>div{
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
padding-right:10px;
position: relative;
display: block;
transition: all 0s;
}
.popup-container>.menu>div:first-child{
margin-top:5px;
}
.popup-container>.menu>div:last-child{
margin-bottom:5px;
}
.config{
height:25px;
line-height:25px;
position:relative;
}
.config.switcher>div,
.config.toggle>div{
position:absolute;
right:0;
left:auto;
display:inline-block;
transition:all 0.3s;
height:25px;
}
.config.switcher>div{
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:transparent;
margin-right: 4px;
}
.config.switcher.on>div{
border-bottom-color:rgb(0, 133, 255);
}
.config.toggle>div{
width:60px;
}
.config.toggle>div>div{
display:inline-block;
position:relative;
width:25px;
height:25px;
top:0;
left:0;
transition:all 0.3s;
padding: 0;
}
.config.toggle.on>div>div{
left:calc(100% - 25px);
}
.config.more{
z-index:1;
}
.config.more>div{
display:inline-block;
transition:transform 0.3s
}
.config.more>div{
transform:translateY(-2px);
font-family: 'huangcao','xinwei';
}
.config.more.on>div{
transform:rotate(90deg) translateX(-2px);
}
.menubutton{
text-align:center;
display:inline-block;
padding:5px;
}
.menubutton.large{
font-size:30px;
line-height:30px;
font-family:'STXinwei','xinwei';
}
.menubutton.round{
width:40px;
height:40px;
border-radius:100%;
font-size:36px;
line-height:40px;
font-family:'xinwei'
}
.menubutton.left{
float:left;
}
.menubutton.right{
float:right;
}
.menubutton.search{
text-align:left;
}
.menubutton.search:not(.focus){
color:rgba(255,255,255,0.5);
}
.menubutton.dim{
color:rgba(255,255,255,0.5);
}
@keyframes fadein{from{opacity:0}}
@-webkit-keyframes fadein{from{opacity:0}}
@keyframes menuslideup{from{top:100%}}
@-webkit-keyframes menuslideup{from{top:100%}}
@keyframes menuslidedown{to{top:100%}}
@-webkit-keyframes menuslidedown{to{top:100%}}
@keyframes menuzoomin{from{transform:scale(0.5);opacity:0;transform-origin:2px -35px}to{transform-origin:2px -35px}}
@-webkit-keyframes menuzoomin{from{transform:scale(0.5);opacity:0;transform-origin:2px -35px}to{transform-origin:2px -35px}}
@keyframes menuzoomout{from{transform-origin:2px -35px}to{transform:scale(0.5);opacity:0;transform-origin:2px -35px}}
@-webkit-keyframes menuzoomout{from{transform-origin:2px -35px}to{transform:scale(0.5);opacity:0;transform-origin:2px -35px}}
.menu-buttons>.new_character{
display: block;
position: relative;
width: 100%;
}
.menu-buttons>.new_character>.avatar{
top:8px;
left:12px;
position: absolute;
width: 100px;
height: 120px;
background-size: cover;
}
.menu-buttons>.new_character>.avatar>input{
z-index: 3;
border-radius: 8px;
opacity: 0;
width: 100%;
height: 100%;
left:0;
top:0;
position: absolute;
}
#window.reduce_radius .menu-buttons>.new_character>.avatar>input{
border-radius: 4px;
}
.menu-buttons>.new_character>.avatar>.select_avatar{
font-family: 'xinwei';
font-size: 20px;
width: 100%;
height: 20px;
line-height: 20px;
top:50px;
left:0;
text-align: center;
}
.menu-buttons>.new_character>.avatar.inited>.select_avatar{
display: none;
}
.menu-buttons>.new_character>.indent{
display: block;
margin-left: 123px;
width: calc(100% - 135px);
position: relative;
padding-top: 7px;
text-align: left;
white-space: nowrap;
}
.menu-buttons>.new_character>.indent>input{
width: 60px;
}
.menu-buttons>.new_character>div>select{
margin-right: 3px;
}
.menu-buttons>.new_character>.add_skill{
position: absolute;
left: 12px;
top:170px;
text-align: left;
line-height: 20px;
white-space: nowrap;
}
.menu-buttons>.new_character>.add_skill.options{
top:145px;
}
.menu-buttons>.new_character>.add_skill.options>span{
margin-right: 10px;
}
.menu-buttons>.new_character>.add_skill.create{
top: 220px;
}
.menu-buttons>.new_character>.add_skill.create>div{
position: relative;
}
.menu-buttons>.new_character>.add_skill.create>div.hidden{
display: none;
}
.menu-buttons>.new_character>.add_skill.create>div>textarea{
resize: none;
width: 200px;
height: 100px;
margin-top: 5px;
}
.menu-buttons>.new_character>.add_skill.create>div>div{
position: relative;
margin-top: 5px;
}
.menu-buttons>.new_character>.add_skill.create>div>div>input{
width: 120px;
}
.menu-buttons>.new_character>.skill_list{
position: absolute;
left: 12px;
top: 240px;
text-align: left;
height: auto;
width: calc(100% - 20px);
padding-bottom: 30px;
transition: all 0s;
}
.menu-buttons>.new_character>.skill_list>div{
position: relative;
width: 100%;
margin: 0;
padding: 0;
height: auto;
}
.menu-buttons>.new_character>.skill_list>div>div{
position: relative;
}
.menu-buttons>.new_character>.skill_list>div:first-child{
margin-bottom: 10px;
}
.menu-buttons>.new_character>.skill_list>div:first-child>div{
width: calc(50% - 10px);
margin-right: 10px;
margin-top: 6px;
}
.menu-buttons>.new_character>.skill_list>div:first-child>div>div{
position: relative;
}
.menu-buttons>.new_character>.skill_list>div:first-child>div>div:last-child{
float: right;
}
.menu-buttons>.new_character.export{
text-align: left;
}
.menu-buttons>.new_character.export>div{
position: relative;
margin-left: 12px;
margin-top: 5px;
}
.menu-buttons>.new_character.export>div>input{
width: 100px;
margin-right: 5px;
}
.menu-buttons>.new_character.export.import>div>input{
width: 153px;
}
.menubutton{
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px;
border-radius:4px;
background-image: linear-gradient(rgba(75,75,75,1), rgba(70,70,70,1));
}
.menubutton.large.blue,
.menubutton.large.red{
color:white !important;
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 10px !important;
}
.menubutton.active,
.menubutton.blue{
background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1));
}
#system>div>.pressdown{
transform: scale(0.97);
}
.controlpressdownx{
transition: all 0.1s;
}
#system>div>.pressdown2{
background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1));
}
.menubutton.highlight,
.menubutton.red{
background-image: linear-gradient(rgba(150, 47, 47, 1), rgba(132, 43, 43, 1));
}
.menubutton.large.active,
.menubutton.large.lighlight{
box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.3) 0 3px 10px;
}
.config.toggle>div{
border-radius:25px;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 0 10px inset;
}
.config.toggle.on>div{
background-color:rgba(47,101,150,1);
}
.config.toggle>div>div{
border-radius:25px;
background-image: linear-gradient(rgba(75,75,75,1), rgba(70,70,70,1));
box-shadow: rgba(51, 51, 51, 1) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px;
}
.popup-container>.menu>div:hover{
color:white;
background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1));
box-shadow: rgba(0,0,0,0.2) 0 0 0 1px;
}
.videonode.menubutton{
width: calc(100% - 50px);
height: 70px;
margin-bottom: 6px;
margin-left: -10px;
margin-top: 6px;
overflow: hidden;
}
.videonode.menubutton.extension{
text-align: left;
height: auto;
max-height: 90px;
}
.videonode.menubutton.extension.active{
max-height: 200px;
}
.videonode.menubutton>div{
position: absolute;
}
.videonode.menubutton.extension>div{
position: relative;
display: block;
}
.videonode.menubutton.extension>.caption>.menubutton{
position: relative;
float: right;
font-size: 16px;
padding: 0;
text-align: center;
width: 80px;
font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif;
}
.videonode.menubutton>.videoavatar{
width: 56px;
height: 56px;
top:7px;
left:7px;
background-size: cover;
}
.videonode.menubutton>.videoavatar2{
width: 20px;
height: 20px;
top:47px;
left:3px;
background-size: cover;
border-radius: 100%;
}
.videonode.menubutton>.caption{
display: inline-block;
left: 84px;
top: 6px;
padding-top: 0;
white-space: nowrap;
}
.videonode.menubutton.extension>.caption{
left: 0;
top: 0;
margin-left: 2px;
}
.videonode.menubutton>.text{
font-size: 14px;
left: 85px;
top: 35px;
line-height: 20px;
text-align: left;
font-family:'STHeiti','SimHei','Microsoft JhengHei','Microsoft YaHei','WenQuanYi Micro Hei',Helvetica,Arial,sans-serif
}
.videonode.menubutton.extension>.text{
left: 0;
top: 0;
margin-left: 5px;
}
.videonode.menubutton>.victory{
font-family: 'huangcao','xinwei';
font-size: 25px;
text-shadow: black 0 0 1px,rgba(255, 203, 0,1) 0 0 2px,rgba(255, 203, 0,1) 0 0 5px,rgba(255, 203, 0,1) 0 0 5px,
rgba(255, 203, 0,1) 0 0 5px,black 0 0 1px;
color:white;
position: absolute;
left: 48px;
top: 48px;
}
.videonode>.video_star{
opacity: 0;
position: absolute;
left: 196px;
top: 4px;
font-size: 16px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.videonode:not(.starred):hover>.video_star{
opacity: 0.5;
}
.videonode.starred>.video_star{
opacity: 1
}
.button-downloading>.button-progress{
width: 0;
border-radius: 4px;
background: linear-gradient(rgb(29,206,68),rgb(1,148,46));
z-index: 1;
}
.button-downloading>div:not(.button-progress){
width: 100% !important;
z-index: 2;
}
.button-downloading>span{
opacity: 0;
}
.button-downloading>div{
height: 100%;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
left: 0 !important;
top:0;
}
#extension-dashboard>.menubutton.large{
width: 80px;
height: 80px;
margin: 6px;
}
#extension-dashboard>.menubutton.large>div:first-child{
font-family: 'lishu','xiaozhuan';
font-size: 60px;
line-height: 60px;
position: absolute;
left: 0;
top: 10px;
width: 100%;
height: 60px;
}
#extension-dashboard>.menubutton.large>div:last-child{
font-size: 18px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
#create-extension{
height: calc(100% - 5px);
}
#create-extension>div{
position: absolute;
width: 100%;
height: 100%;
overflow: scroll;
left: 0;
top: 0;
}
#create-extension>.menu-buttons{
left:10px;
height: calc(100% - 5px);
}
#create-extension>.menu-buttons>.config.more{
margin-left: 0px !important;
margin-top: 10px !important;
}
#create-extension>.hidden{
pointer-events: none;
}
#create-extension>div:not(*:first-child).hidden{
transform: translateX(200px);
}
#create-extension>.menu-buttons>.new_character>.skill_list{
top: 210px;
}
#create-extension>.menu-buttons>.new_character>.skill_list>div:first-child:not(*:empty){
margin-top: 10px;
margin-bottom: 17px;
}
#create-extension>.menu-buttons>.new_character>.skill_list>div:first-child>button{
margin-right: 3px;
margin-bottom: 3px;
}