#WorkFlowy CSSで遊ぶ

黒丸の代わりに第1章・第1節・第1項〜

.body {
    counter-reset: tp1 tp2 tp3 tp4 tp5;
}

.selected > .children > .project {
    counter-increment: tp1;
}

.selected > .children > .project > .children > .childrenEnd {
    counter-reset: tp1;
}

.selected > .children > .project > .children > .project {
    counter-increment: tp2;
}

.selected > .children > .project > .children > .project > .children > .childrenEnd  {
    counter-reset: tp2;
}

.selected > .children > .project > .children > .project > .children > .project {
    counter-increment: tp3;
}

.selected > .children > .project > .children > .project > .children > .project > .children > .childrenEnd  {
    counter-reset: tp3;
}

.selected > .children > .project > .children > .project > .children > .project > .children > .project {
    counter-increment: tp4;
}

.selected > .children > .project > .children > .project > .children > .project > .children > .project > .children > .childrenEnd  {
    counter-reset: tp4;
}

.selected > .children > .project > .children > .project > .children > .project > .children > .project > .children > .project {
    counter-increment: tp5;
}

.selected > .children > .project > .children > .project > .children > .project > .children > .project > .children > .project > .children > .childrenEnd  {
    counter-reset: tp5;
}

.bullet,
#bulletBucket .bulletBucketBullet {
    background-image: none;
    display: block !important;
    width: 75px !important;
}
 
.selected .children .bullet:before {
    content: counter(tp1) "." counter(tp2) "." counter(tp3) "." counter(tp4) "." counter(tp5);
}

.name .content {
    margin-left: 50px !important; 
}

力技で5階層ナンバリングしてみた。

CSSだけでは全アウトラインを考慮してのナンバリングは不可能なので、実用性は無いCSSを使ったお遊び。

---

トピックに連番

.body {
    counter-reset: tp;
}

.selected .project {
    counter-increment: tp;
}

.bullet {
    background-image: none;
}
 
.bullet:before {
    content: counter(tp);
}

これも実用性の無いお遊び。