#ToDo 関連のメモ ( #sorashima )

「物の状態が最終的にこうなっていたら良いな一覧と、その為の手順を書き込む」アプリを使う上でのメモなど。(内容が古いまま、間違ったままもあるので注意。)広告が自動で挿入される無料版ブログサービスを利用しているので、PVが増えても一銭の得にもなりませぬ

[ 記事一覧へ ]

#WorkFlowy CSSで遊ぶ

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

f:id:sorashima:20160508004301p:plain

.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);
}

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

広告を非表示にする