import win.ui;
/*DSG{{*/
var winform = win.form(text="一组按钮配色CSS";right=599;bottom=399)
/*}}*/
import web.layout;
var wbLayout = web.layout( winform );
wbLayout.html = /**
html,body{ height:100%; margin:20;}
/* General */
.button {
border-radius: 8px;
border: 1px solid;
padding: 8px 12px;
color: #fff;
font-family: "Myriad Pro", Arial, Tahoma, sans-serif;
font-size: 1.4em;
font-weight: bold;
white-space: nowrap;
background: #777;
border-color: #777;
text-decoration: none;
font-style: normal;
text-transform: none;
}
.button:hover > *{
outline:8px glow lightyellow 2px;
}
.button:hover,
.button:focus {
bottom: 1px;
outline:2px glow rgba(0,0,0,0.2) 3px;
background: #999;
border-color: #999;
}
.button:active {
top: 1px;
outline:2px glow rgba(0,0,0,0.2) 1px;
}
/* Shape */
.default {
border-radius: 8px;
}
.square {
border-radius: 2px;
}
.bubble {
border-radius: 12px;
}
/* Colors */
.blue {
background: #166ba9;
border-color: #166ba9;
}
.blue:hover,
.blue:focus {
background: #3390CF;
border-color: #3390CF;
}
.red {
background: #D81204;
border-color: #D81204;
}
.red:hover,
.red:focus {
background: #FF2F1F;
border-color: #FF2F1F;
}
.green {
background: #95A006;
border-color: #95A006;
}
.green:hover,
.green:focus {
background: #B2BF17;
border-color: #B2BF17;
}
.yellow {
background: #FFAF09;
border-color: #FFAF09;
}
.yellow:hover,
.yellow:focus {
background: #FFCF09;
border-color: #FFCF09;
}
.purple {
background: #9F1D78;
border-color: #9F1D78;
}
.purple:hover,
.purple:focus {
background: #CF33A0;
border-color: #CF33A0;
}
.orange {
background: #FF5F09;
border-color: #FF5F09;
}
.orange:hover,
.orange:focus {
background: #FF7F09;
border-color: #FF7F09;
}
.gray {
background: #777;
border-color: #777;
}
.gray:hover,
.gray:focus {
background: #999;
border-color: #999;
}
lucky ~
lucky ~
lucky ~
**/
winform.show()
win.loopMessage();
