|
rem ' CSS sampler
sysgui = unt
open (sysgui)"X0"
sysgui! = bbjapi().getSysGui()
window! = sysgui!.addWindow(50,50,325,350,"CSS Sampler",$00090003$)
window!.setCallback(window!.ON_CLOSE,"eoj")
getStyles! = window!.addButton(1,25,25,125,25,"getStyles",$$)
getStyles!.setCallback(getStyles!.ON_BUTTON_PUSH,"getStyles")
clearStyles! = window!.addButton(2,175,25,125,25,"clearStyles",$$)
clearStyles!.setCallback(clearStyles!.ON_BUTTON_PUSH,"clearStyles")
text$ = "The quick brown fox jumps over the lazy dog."
edit! = window!.addEditBox(100,25,75,275,50,text$,$$)
border! = window!.addCheckBox(101,25,150,275,25,"borderStyle",$$)
border!.setCallback(border!.ON_CHECK_ON,"addStyle")
border!.setCallback(border!.ON_CHECK_OFF,"removeStyle")
shadow! = window!.addCheckBox(102,25,175,275,25,"shadowStyle",$$)
shadow!.setCallback(shadow!.ON_CHECK_ON,"addStyle")
shadow!.setCallback(shadow!.ON_CHECK_OFF,"removeStyle")
background! = window!.addCheckBox(103,25,200,275,25,"backgroundStyle",$$)
background!.setCallback(background!.ON_CHECK_ON,"addStyle")
background!.setCallback(background!.ON_CHECK_OFF,"removeStyle")
another! = window!.addCheckBox(104,25,225,275,25,"anotherStyle",$$)
another!.setCallback(another!.ON_CHECK_ON,"addStyle")
another!.setCallback(another!.ON_CHECK_OFF,"removeStyle")
important! = window!.addCheckBox(105,25,250,275,25,"importantStyle",$$)
important!.setCallback(important!.ON_CHECK_ON,"addStyle")
important!.setCallback(important!.ON_CHECK_OFF,"removeStyle")
windowStyle! = window!.addCheckBox(106,25,275,275,25,"windowStyle",$$)
windowStyle!.setCallback(windowStyle!.ON_CHECK_ON,"addWindowStyle")
windowStyle!.setCallback(windowStyle!.ON_CHECK_OFF,"removeWindowStyle")
titlebarStyle! = window!.addCheckBox(107,25,300,275,25,"titleStyle",$$)
titlebarStyle!.setCallback(titlebarStyle!.ON_CHECK_ON,"addTitleBarStyle")
titlebarStyle!.setCallback(titlebarStyle!.ON_CHECK_OFF,"removeTitleBarStyle")
process_events
eoj:
release
getStyles:
i = msgbox(edit!.getStyles().toString(),0,"getStyles")
return
clearStyles:
border!.setSelected(0)
shadow!.setSelected(0)
background!.setSelected(0)
another!.setSelected(0)
important!.setSelected(0)
windowStyle!.setSelected(0)
titlebarStyle!.setSelected(0)
edit!.clearStyles()
window!.clearStyles()
window!.clearTitleBarStyles()
return
addStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
edit!.addStyle(style$)
print edit!.getStyles()
return
removeStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
edit!.removeStyle(style$)
print edit!.getStyles()
return
addWindowStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
window!.addStyle(style$)
print window!.getStyles()
return
removeWindowStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
window!.removeStyle(style$)
print window!.getStyles()
return
addTitleBarStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
window!.addTitleBarStyle(style$)
print window!.getTitleBarStyles()
return
removeTitleBarStyle:
event! = sysgui!.getLastEvent()
control! = event!.getControl()
style$ = control!.getText()
window!.removeTitleBarStyle(style$)
print window!.getTitleBarStyles()
return
CSS Example
.backgroundStyle,.windowStyle
{
background: rgb(242,245,246);
background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1)));
background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
}
.borderStyle
{
border-radius: 15px;
border-width: 2px;
}
.shadowStyle
{
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.5);
}
.anotherStyle
{
font-size:25px;
color: #FFF;
background: #000;
text-align:center;
opacity:0.6;
}
.importantStyle
{
font-size:25px !important;
color: #FFF;
background: #000;
text-align:center;
opacity:0.6;
}
.Caption.BBjTopLevelWindow-titleBar.titleStyle
{
background: #8195a9;
background: -moz-linear-gradient(top, #889db3, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #889db3), color-stop(49%, #8195a9), color-stop(50%, #7a8da0), color-stop(98%, #738596), color-stop(100%, #8195a9));
background: -webkit-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
background: -o-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
background: -ms-linear-gradient(top, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
background: linear-gradient(to bottom, #889db3 0%, #8195a9 49%, #7a8da0 50%, #738596 98%, #8195a9 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colorNew1', endColorstr='@colorNew5', GradientType=0);
color: #f8fafc;
text-shadow: 0 1px 4px #404040;
}
|
