diff options
Diffstat (limited to 'modules_v3/tree/css/treeview.css')
| -rw-r--r-- | modules_v3/tree/css/treeview.css | 335 |
1 files changed, 335 insertions, 0 deletions
diff --git a/modules_v3/tree/css/treeview.css b/modules_v3/tree/css/treeview.css new file mode 100644 index 0000000000..14cbb8bb16 --- /dev/null +++ b/modules_v3/tree/css/treeview.css @@ -0,0 +1,335 @@ +/** CSS for TreeView module - Daniel Faivre, 2011 + * + * WARNING : DO NOT edit this file !!! To create a theme for the treeview module, + * just add in your theme's CSS file the properties you want to customize according to your theme + * All the properties that can be styled in your own theme are followed with the comment "customizable" + * CSS classes should allways be declared under their container to avoid unwanted side effects and speed-up CSS drawing. + * + * DO NOT change ANYTHING else : changing others parameters without extreme caution AND complete cross-browser validation DESTROY the tree design !!! + * + * Treeview styles: this module can print pretty big trees and offer different styles for the tree itself, for screen, printing, or both. + * Look at the embedded samples in the /treeview/css/styles directory to learn how to make your own tree styles. + */ + +.tv_out { + position: relative; + overflow: hidden; + height: 100%; + width: 100%; + border: thin solid #dfdfdf; /* customizable */ + min-height: 500px; /* customizable, not mandatory, but should be set to have allways something to display */ + max-height: 10000px; /* customizable, not mandatory, but should be set not too high to limit the size of ajax requests and not too low to enable whole big trees printing */ + /* background: #fffff8; /* customizable */ +} +.tv_out img { + border: 0; +} + +.tv_in { + clear: both; + position: relative; /* required for re-calculating size on ajax updates */ + left: 0; + top: 0; + cursor: move; + display: inline-block; /* prevent from blinking on IE */ +} +.tv_in table.tv_tree, .tv_in table.tv_tree tbody, .tv_in table.tv_tree tr, .tv_in table.tv_tree td { + border: 0 none; + padding: 0; + margin: 0; + background: none; +} +.tv_in table.tv_tree { + border-collapse: collapse; +} + +/* Border (also need, and have, class table.tv_tree) */ +table#tvTreeBorder td#tv_tree_topleft { + height: 50px; + width: 50px; + background: url(treetopleft.gif); /* customizable */ +} +table#tvTreeBorder td#tv_tree_top { + height: 50px; + text-align: center; + vertical-align: bottom; + background: url(treetop.gif) repeat-x; /* customizable */ +} +table#tvTreeBorder td#tv_tree_top div{ + font-family: Garamond, Times, serif; /* customizable */ + font-size: 16px; /* customizable */ +} +table#tvTreeBorder td#tv_tree_topright { + height: 50px; + width: 50px; + background: url(treetopright.gif); /* customizable */ +} +table#tvTreeBorder td#tv_tree_left { + width: 50px; + min-width: 50px; + background: url(treeleft.gif) repeat-y; /* customizable */ +} +table#tvTreeBorder td#tv_tree_right { + width: 50px; + min-width: 50px; + background: url(treeright.gif) repeat-y; /* customizable */ +} +table#tvTreeBorder td#tv_tree_bottomleft { + height: 50px; + width: 50px; + background: url(treebottomleft.gif); /* customizable */ +} +table#tvTreeBorder td#tv_tree_bottom { + height: 50px; + background: url(treebottom.gif) repeat-x; /* customizable */ +} +table#tvTreeBorder td#tv_tree_bottomright { + height: 50px; + width: 50px; + background: url(treebottomright.gif); /* customizable */ +} + +/* tree */ +#tv_tree { + background: url(tree.jpg); /* customizable */ +} +/* horizontal and vertical lines color */ +#tv_tree div.tv_vline, #tv_tree div.tv_hline { + background-color: #81A9CB; /* customizable : should be the same color than in background images of td.tv_vline_x */ +} + +/* TD container for a vertical line */ +#tv_tree table.tv_tree td.tv_vline { + width: 1px; + background-repeat: repeat-x; + background-position: 50% 50%; + height: 100%; /* required */ +} +#tv_tree table.tv_tree td.tv_vline_h { + background-image: url(vline.jpg); /* customizable : image color must be the same color than div.tv_vline and div.tv_hline */ +} +#tv_tree table.tv_tree td.tv_vline_t { + vertical-align: bottom; + background-image: url(vline_t.gif); /* customizable : image color must be the same color than div.tv_vline and div.tv_hline */ +} +#tv_tree table.tv_tree td.tv_vline_b { + vertical-align: top; + background-image: url(vline_b.gif); /* customizable : image color must be the same color than div.tv_vline and div.tv_hline */ +} +#tv_tree table.tv_tree td.tv_vline_c, .tv_in table.tv_tree td.tv_vline_h { + vertical-align: middle; +} +#tv_tree table.tv_tree td.tv_vline_c { + height: 1px; +} +/* vertical line drawing */ +#tv_tree table.tv_tree div.tv_vline { + width: 1px; +} +#tv_tree table.tv_tree div.tv_vline_t, #tv_tree table.tv_tree div.tv_vline_b { + height: 50%; +} +#tv_tree table.tv_tree div.tv_vline_c { + height: 1px; + overflow: hidden; /* required for IE */ +} +#tv_tree table.tv_tree div.tv_vline_h { + height: 100%; +} + +/* horizontal line drawing */ +#tv_tree td.tv_hline, #tv_tree div.tv_hline { + overflow: hidden; /* required for IE */ + width: 8px; /* customizable */ +} +#tv_tree div.tv_hline { + height: 1px; +} + +/* Person or couple(s) box style */ +#tv_tree div.tv_box { + border: thin outset #81A9CB; /* customizable */ + background: #fffdfd; /* customizable */ + margin-top: 2px; + margin-bottom: 2px; + padding: 0; + width: 180px; /* customizable: initial box width */ + cursor: help; /* customizable */ + border-collapse: collapse; /* required */ + border-radius: 4px; /* customizable */ + -moz-border-radius: 4px; /* customizable */ + -webkit-border-radius: 4px; /* customizable */ + -khtml-border-radius: 4px; /* customizable */ + box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -webkit-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -moz-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -khtml-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + filter: progid:DXImageTransform.Microsoft.dropShadow(color=#cfcfdf, offX=1, offY=1, positive=true); /* customizable */ +} +#tv_tree div.boxExpanded { + width: 250px; /* customizable: initial expanded box width */ +} +#tv_tree div.tv_box div.tvM { + background: #f5fdff; /* customizable */ + color: #220000; /* customizable */ +} +#tv_tree div.tv_box div.tvF { + background: #fff8f5; /* customizable */ + color: #000022; /* customizable */ +} +#tv_tree div.tv_box span.tvSexSymbol { + font-weight: bold; + font-family: x-large, serif; /*Arial Unicode MS, monospace; /* customizable, BUT test required for ALL browsers */ + vertical-align: top; + margin: 1px; +} +#tv_tree div.tv_box span.tvM { + color: #8f8fdf; /* customizable */ +} +#tv_tree div.tv_box span.tvF { + color: #df8f8f; /* customizable */ +} + +#tv_tree div.tv_box div.tvM, #tv_tree .tv_box div.tvF { + border: 0; + margin: 0; + padding: 1px; + padding-left: 4px; + padding-right: 4px; + border-radius: 4px; /* customizable */ + -moz-border-radius: 4px; /* customizable */ + -webkit-border-radius: 4px; /* customizable */ + -khtml-border-radius: 4px; /* customizable */ +} +#tv_tree div.tv_box i.dates { + float: right; + font-size: 75%; + margin-left: 4px; +} +#tv_tree div.tv_box img.tv_treelink { + height: 15px; + width: 15px; + float: right; +} +#tv_tree div.tv_box img.tv_box_loading { + height: 12px; + width: 12px; + margin: 2px; + float: right; +} +#tv_tree div.tv_box div.tv_person_expanded { + min-height: 50px; + padding: 2px; +} +#tv_tree div.tv_box img.pedigree_image_portrait, #tv_tree div.tv_box img.pedigree_image_landscape { + max-width: 50px; + _width: 50px; /* hack for IE versions that do not understand max-width */ + max-height: 50px; + margin: 2px; +} +#tv_tree div.tv_box div.tv_person_expanded a { + font-weight: bold; +} + +/* The toolbox style. Button's images come from the active theme */ +#tv_tools, #tvStylesSubmenu { + display: inline-block; + position: absolute; + left: 0; + top: 0; + padding: 0; + margin: 0; /* required */ + z-index: 90; /* should be < 100 because 100 is the z-index of WT menus */ + background-color: #efefef; /* customizable */ + border: 1px outset #dfdfdf; /* customizable */ + -moz-border-radius: 4px; /* customizable */ + -webkit-border-radius: 4px; /* customizable */ + -khtml-border-radius: 4px; /* customizable */ + border-radius: 4px; /* customizable */ + box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -webkit-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -moz-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + -khtml-box-shadow: 1px 1px 2px #cfcfdf; /* customizable */ + filter: progid:DXImageTransform.Microsoft.dropShadow(color=#cfcfdf, offX=1, offY=1, positive=true); /* customizable */ +} + +/* styles submenu */ +#tvStylesSubmenu { + display: none; + left: 0; + top: 0; + z-index: 91; /* just over tv_tools */ +} + +#tv_tools ul { + list-style: none; + margin: 0; + padding: 0; /* required */ +} +#tv_tools li.tv_button { + float: left; + position: relative; + padding: 0; /* required */ + margin: 0; + width: 24px; + height: 24px; + text-align: center; + vertical-align: middle; + border: thin solid #efefef; /* customizable */ + background-color: #efefef; /* customizable */ + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + -khtml-border-radius: 4px; + border-radius: 4px; +} +#tvStylesSubmenu li.tv_button { + float : none; +} +#tv_tools li.tv_button a { + margin: 0; + display: block; +} +#tv_tools li.tv_button:hover { + background: #fffdfd; /* customizable */ + border: thin outset #fdfffd; /* customizable */ + cursor: pointer; +} +.tv_button a:hover, a:active { + background: #fffdfd; /* customizable */ +} +#tv_tools li.tvPressed { + border: thin inset #ffffff; /* customizable */ +} +#tv_tools ul li img { + border: none; + margin: 0; + padding: 0; + max-width: 22px; + max-height: 22px; + _width: 22px; /* hack for ie */ + _height: 22px; /* hack for ie */ + cursor: pointer; + text-align: center; + vertical-align: middle; +} +#tv_tools ul li a.help img.icon { + margin: 0; + margin-top: 3px; + padding: 0; + width: 15px; + height: 15px; +} + +#tvToolsHandler { + float: left; + cursor: move; + height: 22px; + width: 2px; + border: thin inset #f6f6f6; /* customizable */ + margin: 2px; + overflow: hidden; /* required for IE */ +} + +#tvToolsHandler:hover { + border: thin outset #f6f6f6; /* customizable */ +} |