当前位置: 首页 > >

Htmlayout

发布时间:

htmlayout和sciter 使用 h-smile 引擎来翻译?HTML/CSS . h-simle引擎支持 html4.1 和 css2.1, 同时支持少量css3.0.


下文仅展示对CSS扩展属性:




flow 属性 ?- 浮动




1.?vertical?????[default-value]??属于div的标准布局,?其容纳的各种块,?从顶到底顺序排列成单列.
2.?horizontal???水*排列模式
3.?h-flow????????多行水*排列
4.?v-flow????????多列垂直排列.

foreground属性 - 前景图



1.?foreground-attachment
2.?foreground-image
3.?foreground-position
4.?foreground-repeat
5.?foreground-image-cursor????当鼠标移动到图片时显示
6.?foreground-image-transformation???重点讲解
???其支持2个函数?contrast-brightness-gamma(contrast?=?0.5,?brightness?=?0.5,?gamma?=?1.0)
???????????????color-schema(?color1?[,?color2?,?color3?,?color4?,?color5?]?)



支持的CSS选择器


/*?CSS?2.1?Selectors?*/
*
E
E?F
E?>?F
E:first-child
E:last-child
E:link,?E:visited
E:active,?E:hover,?E:focus
E?+?F
E[foo]
E[foo="warning"]
E[foo~="warning"]
E[foo~="warning"]
E[lang|="en"]
DIV.warning
E#myid

/*CSS?3.0?Selectors?*/
E[foo^="val"]
E[foo$="val"]
E[foo*="val"]
E:nth-child(An+B)
E:nth-last-child(An+B)

/* H-SMILE?Specific?Selectors */
E:current????????选择select元素的当前option
E:checked????????选择当前check的input?type="checkbox"元素?或者?

?


同时还支持一些 ?behavior


html?{?behavior:?accesskeys;?}
form?{?behavior:form;?}
?
/*?hyperlinks?*/
a:link?{?text-decoration:underline;?color:blue;?cursor:pointer;?behavior:hyperlink;?}
a:link:focus?{?text-decoration:double-underline;?}
a:link:hover?{?color:red;?}
a:link:active?{?text-decoration:none;?}
a:link:tab-focus?{?outline-width:1px;?outline-offset:0px;?outline-style:dotted;?}
?
//popup[role="overflow-tooltip"]?{?white-space:nowrap;?overflow:none;?width:max-intrinsic;?height:max-intrinsic;}
?
/*?edit?box?and?numeric?input*/
?
/*?widget?{?color:windowtext;?}?*/
?
input[type="hidden"]?
{?
??display:none;?
}
?
fieldset?
{
??background-image:url(theme:groupbox-normal);?
??background-repeat:stretch;?
}
?
fieldset?>?legend?
{
??background-color:threedhighlight;?
??padding:?2px?4px;
}
?
widget[type="text"],
input[type="text"],
input[type="password"],
input[type="decimal"],
input[type="currency"],
input[type="url"],
input:not([type])
{
??style-set:?"std-edit";
}
?
@set?std-edit
??{
????:root?
????{
??????font:system;
??????color:windowtext;
??????padding:3px;?
??????height:1em;?
??????width:1em;?
??????background-image:url(theme:edit-normal);?
??????background-repeat:stretch;?
??????min-width:?min-intrinsic;
??????min-height:?min-intrinsic;
??????text-align:?left;
??????cursor:text;
??????overflow:hidden;
??????white-space:?nowrap;
??????behavior:edit;?
??????context-menu:url(res:behavior-edit-menu.htm);
}
????:root:disabled
????{?
??????background-image:url(theme:edit-disabled);?
??color:graytext;
??????/*cursor:default;*/
????}
????:root[type="password"]
????{?
??????behavior:password;?
????}
????:root[type="decimal"]
????{?
??????text-align:?right;
??????behavior:decimal;?
????}
????:root[type="currency"]
????{?
??????text-align:?right;
??????behavior:currency;?
????}
????:root[type="url"]
????{?
??????behavior:url;?
????}
?
????:root[invalid]
????{
??????color:red;
????}
??}
?
widget[type="number"],
input[type="number"]
{
style-set:?"std-number-edit";
}
?
@set?std-number-edit
??{
????:root
????{
??????text-align:?right;
??????behavior:number;?
??????font:system;
??????color:windowtext;
??padding:3px;?
??????height:1em;
??????width:1em;?
??????background-image:url(theme:edit-normal);?
??????background-repeat:stretch;?
??????min-width:?min-intrinsic;
??????min-height:?min-intrinsic;
??????cursor:text;
??????overflow:hidden;
??????white-space:?nowrap;
??flow:vertical;
????}
?
????:root:disabled
????{?
??????background-image:url(theme:edit-disabled);?
??color:graytext;
??????/*cursor:default;*/
????}
?
????:root[invalid]
????{
??????color:red;
????}
?
????:root?>?button.minus
????{
??????padding:0;
??????transition:none;
??????margin:?0?-2px?-2px?*;
??//margin-left:*;
??????background-image:url(theme:v-spin-minus-normal);?
??????background-repeat:stretch;?
??width:system-scrollbar-width;
??height:50%%;
????}
?
????:root?>?button.minus:hover
????{
??????background-image:url(theme:v-spin-minus-hover);?
????}
????:root?>?button.minus:active
????{
??????background-image:url(theme:v-spin-minus-pressed);?
????}
????:root?>?button.minus:disabled
????{
??????background-image:url(theme:v-spin-minus-disabled);?
????}
????:root?>?button.plus
????{
??????padding:0;
??????//margin:?system-border-width?system-border-width?0?*;
??//margin-left:*;
??margin:?-2px?-2px?0?*;
??????transition:none;
??????background-image:url(theme:v-spin-plus-normal);?
??????background-repeat:stretch;?
??width:system-scrollbar-width;
??height:50%%;
????}
????@media?handheld
{
??:root
??{
??????padding:3px;
??????flow:horizontal;
??}
??:root?>?button.plus
??{
??????height:100%%;
??????margin:?-3px?0px?-3px?*;
??}
??:root?>?button.minus
??{
??????height:100%%;
??????margin:?-3px?-3px?-3px?-1px;
??}
????}
?
????:root?>?button.plus:hover
????{
??????background-image:url(theme:v-spin-plus-hover);?
????}
????:root?>?button.plus:active
????{
??????background-image:url(theme:v-spin-plus-pressed);?
????}
????:root?>?button.plus:disabled
????{
??????background-image:url(theme:v-spin-plus-disabled);?
????}
??}
?
?
/*?text?button?*/
?
widget[type="button"],?
input[type="button"],?
input[type="reset"],?
input[type="submit"],?
button
{?
style-set:?"std-button";
}
?
@set?std-button
??{
????:root
????{?
??font:system;
??????color:windowtext;
??????padding:4px?8px;?
??????white-space:?nowrap;
??????behavior:button;?
??????background-repeat:stretch;?
??????background-image:url(theme:button-normal);?
??????cursor:default;
????}
????:root[role="default-button"]
????{?
??????background-image:url(theme:button-defaulted);?
????}
????:root:hover
????{?
??????background-image:url(theme:button-hover);??
??????transition:?blend;
????}
????:root:active?
????{?
??????background-image:url(theme:button-pressed);??
????}
????:root:active?>?*
????{?
??????position:relative;
??????left:1px;
??????top:1px;
????}
?
????:root:disabled
????{?
??????background-image:url(theme:button-disabled);
??color:graytext;
????}
????:root:tab-focus
????{
????????//outline:1px?dotted?invert?-4px;?/*?inside?*/
outline:1px?dotted?-4px;?/*?inside?*/
????}
????@media?handheld
????{
????????:root:tab-focus
????????{
??????????outline:1px?solid?-2px?highlight;
????????}
????????:root:hover
????????{?
??????transition:none;
??????color:highlighttext
????????}??????
????}????????
??}
?
/*?radio?button?*/
input[type="radio"],
button[type="radio"],
widget[type="radio"]
{?
style-set:"std-radio";
}
?
@set?std-radio
??{
????input:root
????{?
??????padding:0px;?
??????height:system-small-icon-height;?
??????width:system-small-icon-width;?
??vertical-align:middle;
??????behavior:radio;?
??????background-repeat:no-repeat;?
??????background-position:50%?50%;
??????background-image:url(theme:radio-normal);??
??????cursor:default;
????}
:root:not(input)
????{
??????padding:4px?4px?4px?system-small-icon-width;?
??????behavior:radio;?
??????background-repeat:no-repeat;?
??????background-position:1px?50%;
??????background-image:url(theme:radio-normal);??
??????//text-decoration:underline;
??vertical-align:baseline;
??text-align:left;
??white-space:nowrap;
??????cursor:pointer;
????}
????:root:not(input):rtl
????{
??????padding:4px?system-small-icon-width?4px?4px;?
??????background-position-right:1px;
??background-position-left:auto;
????}
?
????:root:hover
????{?
??????background-image:url(theme:radio-hover);??
????}
????:root:active
????{?
??????background-image:url(theme:radio-pressed);??
????}
????:root:disabled
????{?
??????background-image:url(theme:radio-disabled);??
??color:graytext;
????}
????:root:checked
????{?
??????background-image:url(theme:radio-checked-normal);??
????}
????:root:checked:hover
????{?
??????background-image:url(theme:radio-checked-hover);??
????}
????:root:checked:active
????{?
??????background-image:url(theme:radio-checked-pressed);??
????}
????:root:checked:disabled
????{?
??????background-image:url(theme:radio-checked-disabled);??
??color:graytext;
????}
????:root:tab-focus?
????{
??????outline:1px?dotted?invert?-1px;?/*?inside?*/
????}
????@media?handheld
????{
????????:root:tab-focus
????????{
????????????outline:1px?solid?-1px?highlight;
????????}
????}?????
??}
?
/*?checkbox?button?*/
input[type="checkbox"],
widget[type="checkbox"],
button[type="checkbox"]
{?
style-set:?"std-checkbox";
}
?
@set?std-checkbox
??{
????input:root
????{
??????padding:0px;?
??????height:system-small-icon-height;?
??????width:system-small-icon-width;?
??????behavior:check;?
??????background-repeat:no-repeat;?
??????background-position:50%?50%;
??????background-image:url(theme:check-normal);??
??????cursor:default;
??vertical-align:middle;
????}
:root:not(input)
????{
??????padding:4px?4px?4px?system-small-icon-width;?
??????behavior:check;?
??????background-repeat:no-repeat;?
??????background-position:1px?50%;
??????background-image:url(theme:check-normal);??
??????text-decoration:underline;
??????cursor:pointer;
??????white-space:nowrap;
??????style-set:?"std-checkbox";
??vertical-align:baseline;
????}
:root:not(input):rtl
????{
??????padding:4px?system-small-icon-width?4px?4px;?
??????background-position-right:1px;
??background-position-left:auto;
????}
????:root:hover
????{?
??????background-image:url(theme:check-hover);??
????}
????:root:active
????{?
??????background-image:url(theme:check-pressed);??
????}
????:root:disabled
????{?
??????background-image:url(theme:check-disabled);??
??color:graytext;
????}
????:root:checked
????{?
??????background-image:url(theme:check-checked-normal);??
????}
????:root:checked:hover
????{?
??????background-image:url(theme:check-checked-hover);??
????}
????:root:checked:active
????{?
??????background-image:url(theme:check-checked-pressed);??
????}
????:root:checked:disabled
????{?
??????background-image:url(theme:check-checked-disabled);??
??color:graytext;
????}
????:root:tab-focus
????{
??????outline:1px?dotted?invert?-1px;?
????}
????@media?handheld
????{
????????:root:tab-focus
????????{
????????????outline:1px?solid?-1px?highlight;
????????}
????widget:root,
????????button:root
????????{
????????????text-decoration:none;
????????}
????}?????
??}
?
?
button[type="selector"]
{
????style-set:?"std-selector";
}?
?
@set?std-selector???{
????:root
????{?
??????behavior:popup-selector;
??????padding-right:14px;?/*?room?for?the?arrow?*/
??????foreground-image:url(stock:arrow-down);?/*?that?arrow?*/
??????foreground-repeat:?no-repeat;
??????foreground-position-top:?50%;
??????foreground-position-right:?3px;
????}
????:root:active
????{?
??????padding:5px?13px?3px?9px;
??????foreground-position-top:?55%;
??????foreground-position-right:?2px;
????}
????:root?>?menu
????{?
??????display:none;?
????}
??}
?
input[type="progress"],
widget[type="progress"]
{
??behavior:progress;?
??background-repeat:stretch;?
??background-image:url(theme:h-progress-back);??
?
??height:?1.2em;
??width:?8em;
??padding:?3px;
?
??foreground-repeat:stretch;??
??foreground-image:url(theme:h-progress-chunk);??
}
?
/*?select?(not?dropdown)?*/
?
select[type="select"],?
widget[type="select"],
popup[type="select"]
{
??style-set:?"std-select";
}
?
@set?std-select
{
:root
{?
????font:system;
behavior:select;?
overflow-x:hidden;?
overflow-y:auto;?
padding:2px;?
background-repeat:stretch;?
background-image:url(theme:edit-normal);?
width:?max-intrinsic;
height:?max-intrinsic;
}
?
:root:disabled
{?
overflow:hidden;?
background-image:url(theme:edit-disabled);?
color:graytext;
}
?
optgroup?>?caption?
{?
padding:3px?3px;?
font-weight:bold;?
color:?graytext;?
}
?
option?
{?
padding:1px?1px?1px?3px;?
color:?windowtext;
min-height:1em;
width:?100%%;
white-space:?nowrap;
}
option:rtl?
{?
padding:1px?3px?1px?1px;?
}
?
option:checked?
{?
background-color:threedface;?color:windowtext;
}
?
:root:focus?option:current,
popup:root?option:current
{?
background-color:highlight;?color:highlighttext;?
}
?
optgroup?>?option
{?
padding-left:19px;?
}
optgroup?>?option:rtl
{?
padding-right:19px;?
padding-left:0;?
}
?
options
{
padding-left:32px;
foreground-repeat:?no-repeat;
foreground-position:?3px?3px;
width:?100%%;
min-height:1em;
}
options:rtl
{
????padding-right:32px;
padding-left:0;
foreground-position-right:?3px;
foreground-position-left:?auto;
}
?
options:has-children:collapsed?{ foreground-image:url(theme:tree-view-glyph-closed);?}
options:has-children:expanded??{ foreground-image:url(theme:tree-view-glyph-open);?}
/*?if?it?has?less?or?equal?to?one?child?(first?one?is?a?caption)?then?no?icon?shall?be?shown?*/
//options:not(:has-children):expanded?{?foreground-image:none;?}
?
/*?all?elements?in?the?options?by?default?are?non-visible?*/
options?>?* {?visibility:collapse;?}
?
/*?elements?in?open?options?are?visible?*/
options:expanded?>?*?{?visibility:visible;?}
?
/*?options?caption?element,?always?visible?*/
options?>?:first-child
{
??padding:1px?1px?1px?3px;
??visibility:visible;
??width:?100%%;
??white-space:?nowrap;
??margin-left:-16px;
}
options?>?:first-child:rtl
{
??padding:1px?3px?1px?1px;
??margin-right:-16px;
??margin-left:0;
}
?
options:current?>?:first-child
{?
??background-color:threedlight;?color:windowtext;?
}
?
:root:focus?options:current?>?:first-child
{?
??background-color:highlight;?color:highlighttext;?
}
}
?
/*?simple?multiselect?(without?check?boxes)?*/
?
select[type="select"][multiple=""],
widget[type="select"][multiple=""]
{
??style-set:?"std-select-multiple";
}
?
@set?std-select-multiple???{
????:root?
????{
??????background-color:transparent;?color:windowtext;
????}
????option
????{
??????padding:1px?1px?1px?3px;?
??????padding-left:1.6em;?
??????background-color:transparent;?color:windowtext;
????}
????option:rtl
????{
??????padding:1px?3px?1px?1px;?
??????padding-right:1.6em;?
??????background-color:transparent;?color:windowtext;
????}
????option:checked
????{
??????list-style-type:disc;
??????display:list-item;
??????background-color:threedface;?color:windowtext;
????}
????:root:focus?option:current
????{
??????background-color:highlight;?color:highlighttext;
????}
??}?
?
/*?multiselect?with?check?boxes?*/
?
select[type="select"][multiple="checks"],
widget[type="select"][multiple="checks"]
{
style-set:?"std-select-multiple-checkmarks";
}
?
@set?std-select-multiple-checkmarks???{
????option
????{
??????padding:?1px?1px?1px?system-small-icon-width;?
??????foreground-repeat:no-repeat;?
??????foreground-position:1px?50%;
??????foreground-image:url(theme:check-normal);??
??????background-color:transparent;?color:windowtext;
????}
????option:checked
????{
??????foreground-image:url(theme:check-checked-normal);??
??????background-color:transparent;?color:windowtext;
????}
????option:rtl
????{
??????padding:?1px?system-small-icon-width?1px?1px;?
??????foreground-position-right:1px;
??????foreground-position-left:auto;
????}
??}
?
?
/*?dropdown?combobox?*/
widget[type="select-dropdown"],
select[type="select-dropdown"]
{
style-set:?"std-select-dropdown";
}
?
@set?std-select-dropdown
??{
????:root
????{
??font:system;
??????behavior:dropdown-select;
??????padding:0;
??????flow:horizontal;??/*?caption,?button*/
??????background-repeat:stretch;?
??????background-image:url(theme:edit-normal);?
??????width:?max-intrinsic;
??????height:?max-intrinsic;
????}
?
????:root:disabled
????{?
??????background-image:url(theme:edit-disabled);?
??color:graytext;
????}
?
????/*?caption?portion?of?combobox?*/
????:root?>?caption
????{?
??????padding:1px;
??????margin:2px?1px?2px?2px;?
??????/*
????overflow:none;?
????min-width:max-intrinsic;
??????*/
??????overflow-x:hidden;?
??width:100%%;?/*?everything?left?from?button?*/
??????height:100%%;?/*?takes?full?height?*/
??min-height:1em;?
??min-width:?system-scrollbar-width;
??????vertical-align:middle;
??????white-space:?nowrap;
??????/*background-color:window;*/
??????color:windowtext;?
}
?
????/*?caption?portion?of?combobox?when?select?is?in?focus?*/
????:root:focus?>?caption
????{?
??????background-color:highlight;?color:highlighttext;?
????}
?
????/*?popup?select?element?*/
????:root?>?popup
????{?
??????overflow-x:hidden;?
??????overflow-y:auto;?
??????padding:2px;?
??????display:none;?/*?invisible?normally?*/
??????border:none;
??????behavior:select;?
??????min-width:?max-intrinsic;
??width:?*;
??????height:?max-intrinsic;
????}
?
:root?>?popup?option:current
{
background-color:highlight;?color:highlighttext;
????}
?
????/*?dropdown?button?of?the?combobox?*/
????:root?>?button
????{
??????width :system-scrollbar-width;
??????height :*;
??????margin :system-border-width;?/*1px?1px?1px?0px;*/?
??????padding :0;?
??????background-repeat :stretch;?
??????background-image :url(theme:combobox-button-normal);
??????transition :none;
??????behavior :button;?
??????white-space :nowrap;
????}
?
????:root?>?button:hover
????{
??????background-image:url(theme:combobox-button-hover);
????}
?
????:root?>?button:active
????{
??????background-image:url(theme:combobox-button-pressed);
????}
?
????:root:disabled?>?button
????{
??????background-image:url(theme:combobox-button-disabled);
??color:graytext;
????}
?
????:root[editable]?>?caption
????{?
??????behavior:edit;?
??????cursor:text;
??context-menu:url(res:behavior-edit-menu.htm);
????}
??}
?
textarea/*,?htmlarea,?richtext?*/
{
min-width:?min-intrinsic;
min-height:?min-intrinsic;
width:?min-intrinsic;
height:?min-intrinsic;
}
?
plaintext
{
????height:?min-intrinsic;
}
?
textarea,?widget[type="textarea"],?plaintext
{
??padding:3px;?
??background-image:url(theme:edit-normal);?
??background-repeat:stretch;?
??overflow-x:auto;?
??overflow-y:scroll;?
??cursor:text;
??white-space:prewrap;
??font:?system;
??behavior:plaintext;?
??context-menu:url(res:behavior-text-menu.htm);
??style-set:?"std-textarea";
}
?
textarea[wrap="off"],
plaintext[wrap="off"]
{
???overflow-x:scroll;?
???overflow-y:scroll;?
???white-space:pre;
}
?
richtext,?widget[type="richtext"]
{
padding:3px;?
background-image:url(theme:edit-normal);?
background-repeat:stretch;?
????overflow-x:auto;?
overflow-y:scroll;?
//cursor:text;
????behavior:richtext;
context-menu:url(res:behavior-richtext-menu.htm);
}
?
textarea:disabled,?richtext:disabled,
widget[type="textarea"]:disabled,?widget[type="richtext"]:disabled,
plaintext:disabled
{
background-image:url(theme:edit-disabled);?
????overflow:hidden;?
cursor:default;
}
?
/*@set?std-htmlarea
{
????p:empty?{?height:?1.2em;?border:1px?solid?blue;?}
text:empty?{?height:?1.2em;?}
}
?
@set?std-textarea
{
root:disabled
{
background-image:url(theme:edit-disabled);?
overflow:hidden;?
cursor:default;
}
}*/
?
?
?
popup
{?
??border:1px?solid?threedshadow;
background-color:?infobackground;
overflow:none;
text-overflow:none;
font:system;
color:infotext;
padding:1px?2px;?
display:none;?/*?invisible?normally?*/
width:?max-intrinsic;
height:?max-intrinsic;
}
?
widget[type="hslider"],
input[type="hslider"]
{?
style-set:"std-hslider";
}
?
@set?std-hslider
{
????:root?
{
????behavior:slider;
cursor:default;
padding:2px;?
height:min-intrinsic;?
width:100px;?
background-image:url(theme:h-trackbar-back);?
background-repeat:stretch;?
}
?
.slider
{?
foreground-image:url(theme:h-trackbar-thumb-normal);?
foreground-repeat:stretch;?
}
:root?>?.slider:hover
{?
foreground-image:url(theme:h-trackbar-thumb-hover);?
}
:root?>?.slider:active
{?
foreground-image:url(theme:h-trackbar-thumb-pressed);?
}
?
:root:disabled?>?.slider
{?
foreground-image:url(theme:h-trackbar-thumb-disabled);?
}
?
:root:focus?>?.slider
{?
foreground-image:url(theme:h-trackbar-thumb-focus);?
}
?
:root:tab-focus
{?
outline:1px?dotted?invert?-1px;?
}
????@media?handheld
????{
????????:root:tab-focus
????????{
????????????outline:1px?solid?-2px?highlight;
????????}
????}
}
?
widget[type="vslider"],
input[type="vslider"]
{?
style-set:?"std-vslider";
}
?
@set?std-vslider
{
????:root
{
behavior:slider;
cursor:default;
padding:2px;?
height:100px;
width:min-intrinsic;?
background-image:url(theme:v-trackbar-back);?
background-repeat:stretch;?
}
:root:tab-focus
{?
outline:1px?dotted?invert?-1px;?
}
?
:root?>?.slider
{?
foreground-image:url(theme:v-trackbar-thumb-normal);?
foreground-repeat:stretch;?
}
:root?>?.slider:hover
{?
foreground-image:url(theme:v-trackbar-thumb-hover);?
}
:root??>?.slider:active
{?
foreground-image:url(theme:v-trackbar-thumb-pressed);?
}
?
:root:disabled?>?.slider
{?
foreground-image:url(theme:v-trackbar-thumb-disabled);?
}
?
:root:focus?>?.slider
{?
foreground-image:url(theme:v-trackbar-thumb-focus);?
}
????@media?handheld
????{
????????:root:tab-focus
????????{
????????????outline:1px?solid?-2px?highlight;
????????}
????}
}
?
?
widget[type="vscrollbar"],
input[type="vscrollbar"]
{
??behavior:?scroll-bar;
??width:min-intrinsic;
??height:100%%;
}
?
widget[type="hscrollbar"],
input[type="hscrollbar"]
{
??behavior:?scroll-bar;
??width:100%%;
??height:min-intrinsic;
}
?
frame?
{?
??behavior:?frame;?
??width:*;?
??height:*;
}
?
frameset?
{?
??behavior:?frame-set;?
??width:*;?
??height:*;
??border-spacing:3px;
??background-color:threedface;
}
?
frameset[cols]?{?flow:horizontal;?}
?
frameset[cols]?>?div?{?height:*;?}
frameset[rows]?>?div?{?width:*;?}
?
menu:synthetic??/*?builtin?popup?menu?*/
{
??style-set:?"std-popup-menu";
}
?
@set?std-popup-menu
??{
????:root,?menu
????{
??????behavior:menu;?/*is?a?menu*/
??????flow:?vertical;
??????display:none;?
??????margin:0;??
??????padding:1px;
??????width:max-intrinsic;
??????border:1px?solid?threedshadow;
??????background-color:?window;
??????color:windowtext;
??????margin:0?1px;?/*?to?offset?it?from?parent?li?*/????
??????font:?system-menu;
????}
?
????/*?menu?item?in?popup?menus?*/
????li?
????{??
??????width:*;
??????padding-left:24px;?/*?room?for?icon?*/
??????padding-right:12px;?/*?room?for?the?arrow?*/
??????padding-top:4px;?
??????padding-bottom:4px;?
??????foreground-repeat:?no-repeat;
??????foreground-position:?2px?50%;
??????color:windowtext;
????}
?
????li:has-children
????{
??????background-image:url(stock:arrow-right);?/*?that?arrow?*/
??????background-repeat:?no-repeat;
??????background-position:?100%?50%;
????}
?
????li:disabled?
{?
???color:threedshadow;?font-weight:?normal;?
???foreground-image-transformation:?contrast-brightness-gamma(?0.15,0.75,1.0);
}
?
????/*?accesskey?label?(span)?*/
????li?span.accesskey
????{
??????display:inline-block;
??????margin-left:*;?/*?spring?to?attach?it?to?the?right?*/
??????padding-left:1em;
??????color:threeddarkshadow;
????}
?
????li:current?span.accesskey
????{
??????color:brown;
????}
?
????/*?current?menu?item?*/
????li:current
????{?
??????background-color:highlight;?
??????color:highlighttext;??
????}
?
????/*?menu?separator?*/
????hr?
????{
??????margin:2px;?
????}
caption
{
??margin:2px;?
??color:graytext;
}
img.hr
{
??display:inline-block;
??vertical-align:bottom;
??width:*;
??height:0;
??margin-bottom:0.4em;
??border-top:1px?solid?threedshadow;
??border-bottom:1px?solid?threedlight;
}
??}
?
widget[type="calendar"],
input[type="calendar"]
{
??style-set:?"std-calendar";
}
?
@set?std-calendar?/*?style?block?for?the?content?of?the?calendar?*/
??{
????:root
{
??????behavior:calendar;??????
??????width:max-intrinsic;??
??????height:min-intrinsic;??
??????font:system;
??????color:windowtext;
??????padding:3px;?
??border:1px?solid?threedshadow;
??????white-space:?nowrap;
??????cursor:default;
}
?
????:root:tab-focus?/*?:root?here?is?the?element?with?the?style-set?set?*/?
????{
??????outline:1px?dotted?invert?-4px;?/*?inside?*/
????}
?
????table
????{?
??????width:*;??
??????height:*;
??????border-spacing:0;
??????padding:2px;
????}
????td.prev-month?
????{
??????background-image:url(theme:h-scrollbar-minus-normal);
??????background-repeat:stretch;
????}
????td.prev-month:active
????{
??????background-image:url(theme:h-scrollbar-minus-pressed);
??????background-repeat:stretch;
????}
????td.next-month
????{
??????background-image:url(theme:h-scrollbar-plus-normal);
??????background-repeat:stretch;
????}
????td.next-month:active
????{
??????background-image:url(theme:h-scrollbar-plus-pressed);
??????background-repeat:stretch;
????}
????td.day
????{
??????text-align:center;
??????padding:2px;
??????width:1.6em;
????}
????td.weekday
????{
??????font-family:tahoma;?
??????font-size:6.5pt;
??????color:highlight;
??????text-align:center;
??????padding-top:4px;
??????border-bottom:1px?solid?threedshadow;
????}
????@media?handheld
????{
????????td.weekday
????????{
????????????font-size:8pt;
????????}
????}
????td.day.off
????{
??????color:?brown;
????}
????td.day.other-month
????{
??????color:?graytext;
????}
?
????td.day:current
????{
??????background-color:threedface;
????}
?
????:root:current?td.day:current,
????:root:focus?td.day:current
????{
??????background-color:highlight;
??????color:highlighttext;
????}
?
????td.day.today
????{
??????outline:1px?solid?red?-1px;
????}
?
????th?span.month,
????th?span.year
????{
??????display:inline-box;
??????padding:1px?2px;
????}
????th?span.month:hover,?/*?these?two?are?sensitive?to?the?mouse?wheel?*/
????th?span.year:hover
????{
??????background-color:infobackground;
????}
??}?
?
widget[type="date"],
input[type="date"]
{
????font:system;?
????style-set:?"std-date";
}
?
@set?std-date???{
????:root
????{?
??????behavior:date;
??????cursor:default;
??????padding:0;
??????flow:horizontal;
????}
????:root?>?popup?
????{
??????background-color:?window;
??????padding:0;
??????border:?none;
??//transition:none;
????}
????:root?>?caption?
????{?
??????height:*;?margin:3px;?
??????behavior:?masked-edit;
??cursor:text;
????}
????:root?>?button?
????{?
??????behavior:?none;
??????height:*;
??????width:?system-scrollbar-width;
??????margin:?system-border-width;?/*1px?1px?1px?0px;*/?
??????padding:0;?
??????background-repeat:stretch;?
??????background-image:url(theme:combobox-button-normal);
??????transition:none;
????}
????:root?>?button:hover?
????{?
??????background-image:url(theme:combobox-button-hover);
????}
????:root?>?button:active?
????{
??????background-image:url(theme:combobox-button-pressed);
????}
????:root?>?button:disabled?
????{
??????background-image:url(theme:combobox-button-disabled);
????}
??}?????
?
input[type="masked"]
{
style-set:?"std-masked-edit";
}
?
@set?std-masked-edit???{
????:root
????{?
??????behavior:masked-edit;
??????text-align:center;
????}
??}
?
/*legend?
{
??color:?highlight;
}*/




转载于:https://my.oschina.net/u/262502/blog/317428






相关资源:htmlayout sdk 下载



友情链接: