notion.so - sawa's style by sawa

/* ==UserStyle==
@name           notion.so - 2024年5月
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("notion.so") {
    :root {
        --rateFontSize: 1.4;
        /* ここを調整 */
        --h1FontSize: 28;
        --h2FontSize: 24;
        --h3FontSize: 20;
        --baseFontSize: 16;
        --smFontSize: 12;
    }

    /* プレーンテキスト */
    .notion-text-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 2 !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    /* h1 */
    .notion-header-block {
        [placeholder="Heading 1"],
        [placeholder="見出し1"] {
            background-color: rgb(20, 58, 78) !important;
            font-size: var(--h1FontSize * --rateFontSize)px !important;
        }
    }

    /* h2 */
    .notion-sub_header-block {
        [placeholder="Heading 2"],
        [placeholder="見出し2"] {
            font-size: var(--h2FontSize * --rateFontSize)px !important;
            padding-bottom: 4px !important;
            margin-bottom: 12px !important;
            border-bottom: 4px solid rgb(20, 58, 78) !important;
        }
    }


    /* h3 */
    .notion-sub_sub_header-block {
        [placeholder="Heading 3"],
        [placeholder="見出し3"] {
            color: rgb(34, 135, 189) !important;
            font-size: var(--h3FontSize * --rateFontSize)px !important;
            margin: 0px 0px 10px 0px !important;
            padding-bottom: 10px !important;
        }
    }


    /* 箇条書きリスト */
    .notion-bulleted_list-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
    }

    /* 数字リスト */
    .notion-numbered_list-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* ToDoリスト */
    .notion-to_do-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* トグルリスト */
    .notion-toggle-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* コード */
    .notion-code-block {
        font-size: var(--smFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* コールアウト */
    .notion-callout-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* 引用 */
    .notion-quote-block {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* 見出し */
    .notion-table_of_contents-block {
        background-color: rgba(62, 106, 99, 1);
        border-radius: 8px;
    }
    .notion-table_of_contents-block .notranslate {
        font-size: var(--baseFontSize * --rateFontSize)px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* イメージ */
    .notion-image-block img {
        margin-top: 14px !important;
        margin-bottom: 30px !important;
    }

    /* 分割線 */
    .notion-divider-block .notion-cursor-default {
        border-bottom: 3px solid #ffffff !important;
        margin-bottom: 15px !important;
        *[role="separator"] {
            border: none;
        }
    }

    /* --------ガントチャート-------- */
    /* メイン */
    .notion-timeline-item > a > div[role] {
        background-color: #008b8b !important;
    }

    /* 始点・終点 */
    .notion-timeline-item > div {
        background-color: #5f9ea0 !important;
        opacity: 0.3 !important;
    }

    /* 文字色 */
    .notion-timeline-item-properties .notranslate {
        color: #fff8dc !important;
    }

    /* テーブルビュー(カレンダー) */
    .notion-table-view .notion-collection-item:first-child {
        /*(上手く機能してない)親のみの変更*/
        background-color: red !important;
    }
}