#WorkFlowy で期限タグごとに色分けさせるCSS

前のメモ「#WorkFlowy のタグと検索の振る舞い - #ToDo 関連のメモ ( #sorashima )」で書いた期限別のタグを、色分けして表示するCSSを、他の方々のCSSを参考に書いてみた。

#header{
    background:#FFFFF0 !important; /* ヘッダーの背景色は仄かにアイボリー */
}

#documentView{
    background:#FFFFF0 !important;
}

.page{
    color:#333;
    background:#FFFFF0;
    border-radius:5px;
}

/* リンクは青色 */
a.contentLink{
    color:blue !important;
}

/* 最上位トピックは太字 */
.project.selected >.children>div>.name .content{
    font-weight: bold !important;
}

/* 子要素の有るトピックは太字 */
.project.open>.name{
    font-weight: bold !important;
}

/* ノートは暗い青色で全行表示する */
.noted > .notes > .content {
    color:navy !important;
    background-color:#DDD !important;
    height:auto !important;
    min-height:20px !important;
    overflow:visible !important;
    line-height:20px !important;
    display:block !important;
    -webkit-box-orient:inherit !important;
    -webkit-line-clamp:inherit !important;
    white-space:pre !important;
}

/* パン屑リストは紫 */
.parent>.name>.content{
    color:fuchsia;
}

.highlighted>.highlight{
    background:silver;
}

.moving>.highlight{
    background:gray;
}

.corner,.edge{
    display:none;
}

/* タグの背景色は基本的に青 */
.contentTag{
    color:black !important;
    background-color:aqua !important;
}

/* 年内タグの背景色は緑 */
.contentTag[title="Filter @y"] {
    color:black !important;
    background-color:lime !important;
}

/* 月内タグの背景色は黄色 */
.contentTag[title="Filter @y-m"] {
    color:black !important;
    background-color:yellow !important;
}

/* 週内タグの背景色はオレンジ */
.contentTag[title="Filter @y-m-w"] {
    color:black !important;
    background-color:#FF8556 !important;
}

/* 日内タグの背景色は赤 */
.contentTag[title="Filter @y-m-w-d"] {
    color:black !important;
    background-color:#FF82B2 !important;
}

この様に表示される。