Template:Tree chart/start: Difference between revisions
m (1 revision imported) |
No edit summary |
||
| Line 1: | Line 1: | ||
< | <!-- Template:Tree chart/start --> | ||
<style> | |||
/* treechart core */ | |||
.treechart { border-collapse: separate; border-spacing: 0; margin: 0.4em 0; text-align: center; } | |||
.treechart td { width: 48px; height: 48px; vertical-align: middle; position: relative; padding: 0; } | |||
}} {{ | |||
/* visual pieces (draw with borders) */ | |||
.tc-piece { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; position: relative; } | |||
.tc-empty { /* blank cell */ } | |||
.tc-horiz { border-top: 4px solid #333; } | |||
.tc-vert { border-left: 4px solid #333; } | |||
.tc-down { border-left: 4px solid #333; border-bottom: 4px solid #333; } /* 'y' look */ | |||
.tc-plus { border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; border-bottom: 4px solid #333; border-radius: 3px; } | |||
.tc-dot::after { content: ""; width: 6px; height: 6px; display: block; border-radius: 50%; background: #333; margin: 18px auto 0; } | |||
.tc-lcorner { border-top:4px solid #333; border-right:4px solid transparent; border-left:4px solid #333; border-bottom:0; transform-origin: center; } | |||
.tc-rcorner { border-top:4px solid #333; border-left:4px solid #333; } | |||
.tc-vertline { border-left:4px solid #333; } | |||
.tc-text { padding:4px; font-size: 95%; white-space:nowrap; } | |||
/* label styling */ | |||
.tc-label { display:inline-block; padding:2px 6px; border-radius:4px; background:#f7f7f7; border:1px solid #ddd; font-size:90%; } | |||
</style> | |||
<table class="treechart" role="presentation"> | |||
<tbody> | |||
<!-- table opened by start; rows added by Template:Tree chart; closed by Template:Tree chart/end --> | |||
Latest revision as of 22:37, 6 October 2025
<style> /* treechart core */ .treechart { border-collapse: separate; border-spacing: 0; margin: 0.4em 0; text-align: center; } .treechart td { width: 48px; height: 48px; vertical-align: middle; position: relative; padding: 0; }
/* visual pieces (draw with borders) */ .tc-piece { display: inline-block; width: 100%; height: 100%; box-sizing: border-box; position: relative; } .tc-empty { /* blank cell */ } .tc-horiz { border-top: 4px solid #333; } .tc-vert { border-left: 4px solid #333; } .tc-down { border-left: 4px solid #333; border-bottom: 4px solid #333; } /* 'y' look */ .tc-plus { border-top: 4px solid #333; border-left: 4px solid #333; border-right: 4px solid #333; border-bottom: 4px solid #333; border-radius: 3px; } .tc-dot::after { content: ""; width: 6px; height: 6px; display: block; border-radius: 50%; background: #333; margin: 18px auto 0; } .tc-lcorner { border-top:4px solid #333; border-right:4px solid transparent; border-left:4px solid #333; border-bottom:0; transform-origin: center; } .tc-rcorner { border-top:4px solid #333; border-left:4px solid #333; } .tc-vertline { border-left:4px solid #333; } .tc-text { padding:4px; font-size: 95%; white-space:nowrap; }
/* label styling */ .tc-label { display:inline-block; padding:2px 6px; border-radius:4px; background:#f7f7f7; border:1px solid #ddd; font-size:90%; } </style>
<tbody>
