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();