Wiki source code of Css Buttons Icons
Last modified by Vincent Massol on 2024/11/19 16:15
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{velocity filter="none"}} | ||
| 2 | {{html clean="false" wiki="true"}} | ||
| 3 | <style> .imageless-button-container { display:inline-block; position:relative; } | ||
| 4 | .imageless-button { margin:0 10px 2px 2px; } | ||
| 5 | |||
| 6 | .imageless-button { -x-system-font:none; border:0 none; color:#000000; cursor:default; font-family:arial,sans-serif; font-size:70%; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0; outline-color:-moz-use-text-color; outline-style:none; outline-width:medium; padding:0; text-decoration:none; vertical-align:middle; } | ||
| 7 | |||
| 8 | .imageless-button-outer-box { border-width:1px 0; margin:0; } | ||
| 9 | |||
| 10 | .imageless-button-inner-box { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#E3E3E3 none repeat scroll 0 0; border-width:0 1px; cursor:pointer; margin:0 -1px; } | ||
| 11 | |||
| 12 | .imageless-button-outer-box, .imageless-button-inner-box { border-color:#BBBBBB; border-style:solid; padding:0; } | ||
| 13 | |||
| 14 | .imageless-button-pos { height:100%; position:relative; } | ||
| 15 | |||
| 16 | .imageless-button-top-shadow { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#F9F9F9 none repeat scroll 0 0; border-bottom:0.2em solid #EEEEEE; height:0.9em; left:0; overflow:hidden; position:absolute; right:0; top:0; } | ||
| 17 | |||
| 18 | .imageless-button-primary { font-weight: bold; } | ||
| 19 | |||
| 20 | .imageless-button-content { color:#000000; line-height:1.8em; padding:0 8px; position:relative; text-align:center; vertical-align:middle; white-space:nowrap; } | ||
| 21 | |||
| 22 | .imageless-button-arrow { background:transparent url($doc.getAttachmentURL("arrow.png")) no-repeat; font-size:0; height:6px; margin-left:3px; vertical-align:middle; width:7px; display:inline-block; position:relative; } | ||
| 23 | |||
| 24 | .imageless-button-withicon { background-position:4px 4px; background-repeat:no-repeat; color:#444444; font-size:1.2em; font-weight:bold; line-height:1.8em; padding-left:25px; padding-top:3px; } | ||
| 25 | |||
| 26 | .edit-icon-background { background-image: url($xwiki.getSkinFile("icons/silk/page_white_edit.gif")); } | ||
| 27 | |||
| 28 | .go-icon-background { background-image: url($xwiki.getSkinFile("icons/silk/page_white_go.gif")); } | ||
| 29 | |||
| 30 | .add-icon-background { background-image: url($xwiki.getSkinFile("icons/silk/ad.gif")); } | ||
| 31 | </style> #macro(button $text $classes $primary $isdropdown) | ||
| 32 | <div class="imageless-button imageless-button-container"> <div class="inline-block imageless-button-outer-box"> <div class="inline-block imageless-button-inner-box"> <div class="imageless-button-pos"> <div class="imageless-button-top-shadow"> </div> <div class="imageless-button-content $classes #if($primary == true) imageless-button-primary#end">$text #if ($isdropdown) | ||
| 33 | <div class="imageless-button-arrow"> </div> #end | ||
| 34 | </div> </div> </div> </div> </div> | ||
| 35 | #end | ||
| 36 | <div style="padding:10px;"> #button("Edit" "imageless-button-withicon edit-icon-background" true false) #button("Export" "imageless-button-withicon go-icon-background" false false) #button("More actions" "imageless-button-withicon add-icon-background" false true) </div> | ||
| 37 | {{/html}} | ||
| 38 | {{/velocity}} |
