app.todoist.com/app/project/- 2024年2月 by masaya-oops

/* ==UserStyle==
@name         app.todoist.com/app/project/- 2024年2月
@version      20240212.13.16
@namespace    https://userstyles.world/user/masaya-oops
@description  creat by m-osada
@author       masaya-oops
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://app.todoist.com/app/") {

/* --------------------
レイアウト系
-------------------- */
:root{ 
    --backDropFilter-blur: blur(10px);
    
    --body-bg-color: rgb(243, 243, 243);
    --content-bg: rgb(245, 245, 245);
    --section-header-box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.1);
    --section-list-bg : rgb(255, 255, 255);
    --section-list-border: rgba(0, 0, 0, 0.1);
    --section-header-bg: rgba(0, 0, 0, .01) !important;

    --section-addTask-bg: rgb(0, 0, 0, .01);
    
        /* ダークモード時のスタイル */
    @media (prefers-color-scheme: dark) {
        --body-bg-color: rgb(79, 79, 79);
        --content-bg: rgb(45, 45, 45);
        --section-list-bg : rgba(0, 0, 0, .5);
        --section-header-bg: rgba(255, 255, 255, 0.1) !important;
        --section-list-border: rgba(255, 255, 255, 0.1);
        --section-addTask-bg: rgb(255, 255, 255, .05);
    }
    
    --info-margin-right: 8px;
}

body {
    background-color: var(--body-bg-color) !important;
    background-size: cover;
}

#content {
    background-color: var(--content-bg);
}

header > div {
    /*ヘッダー 背景*/
}

.section header {
    /* セクションのタイトル部分 */
    padding: 8px 16px;
    border-radius: 8px;
    
    box-shadow: var(--section-header-box-shadow);    
    background-color: var(--section-header-bg);
    backdrop-filter: var(--backDropFilter-blur);

}


.section_list > li {
    padding: 16px 32px;
    border-radius: 8px;
    border: 1px solid var(--section-list-border);
    background-color: var(--section-list-bg);
}

.task_list_item .task_list_item__content .task_list_item__content__wrapper {
    /*タイトルと詳細*/
    margin-bottom: 0;
}

.task_list_item {
    background-color: rgba(0,0,0,0);
}

.task_list_item .task_list_item__content {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.task_list_item__info_tags {
    order: 1;
    /* 最初に表示される */
    margin-bottom: 4px;
}

.task_list_item__info_tags .task_list_item__info_tags__subtasks--show-complete {
    /* サブタスク */
    order: 2;
    padding: 2px 4px;
    margin-right: 4px;
    border: 1px solid var(--section-list-border);
    /*background-color: var(--section-list-border);*/
}

.task_list_item__info_tags a,
.task_list_item__info_tags button {
    /*日付*/
    order: 3;
    margin-right: var(--info-margin-right);
}

.task_list_item__info_tags .date {
    /*日付 span*/
    padding: 4px 6px;
    border: 1px solid var(--section-list-border);
    border-radius: 4px;
    margin-right: var(--info-margin-right);
}

.task_list_item__info_tags .task_list_item__info_tags__label {
    /*ラベル - ラップ*/
    order: 1;
    padding: 2px 4px;
    border: 1px solid var(--section-list-border);
    margin-right: var(--info-margin-right);
}

.main-view-layout .controller {
    /*タスク追加*/
    position: sticky;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--section-list-border);
    background-color: var(--section-addTask-bg);
    backdrop-filter: var(--backDropFilter-blur);
    bottom: 10px;
    box-shadow: var(--section-header-box-shadow);
}

/*
モーダル
*/
[data-testid="modal-overlay"] {
    /* スタイル */
}

/*
メニューポップアップ
*/
.menu_list {
    /*全体メニューポップアップ*/
}

.reactist_menulist[role=menu],
.reactist_menulist[role=menubar] {
    /*タスク内メニューポップアップ*/
}

.dropdown_select--popup {
    /*タグ ポップアップ*/
}
.dropdown_select--popup li[role=option].dropdown_select__option--highlighted {
    /*ポップアップ セレクト背景*/
}
.scheduler_popper {
}
}

@-moz-document url-prefix("https://app.todoist.com/app/bk-2024-02-12") {


/* --------------------
カラー系
-------------------- */
:root {

    --primary-light-color: #9af3f3;
    --primary-second-color: rgba(7, 228, 228, .4);
    --primary-divider-color: rgba(7, 228, 228, .2);

    --body-bg-color: #033131;

    --product-library-background-base-primary: --body-bg-color !important;
    --product-library-display-primary-idle-tint: var(--primary-light-color) !important;    /* テキスト(ページタイトル、タスクテキスト) */
    --product-library-navbar-idle-fill: rgba(255, 255, 255, 1);    /* タスクモーダル > オプションバー 背景 */
    --product-library-navbar-selected-fill: rgba(255, 255, 255, 0.1) !important;    /* ナビバー > 選択中リストの背景 */
    --product-library-selectable-background: none !important;    /* メニュ > ビューの変更部分 背景 */
    --product-library-selectable-tertiary-selected-fill: var(--primary-second-color) !important;    /* ビュー変更 > 選択中 */
    --product-library-display-secondary-idle-tint:var(--primary-second-color) !important;
    
    --reactist-bg-default: rgba(255, 255, 255, 0.1);    /*ヘッダー + タスクモーダル > バックグラウンドカラー*/
    --reactist-content-primary: var(--primary-light-color);
    --reactist-content-secondary: var(--primary-second-color) !important;    /* ヘッダー > パンくず > スラッシュカラーやアイコンなど */
    --reactist-divider-primary: var(--primary-divider-color) !important;    /*ボダー (オプションナビのリスト下線、)*/
    --reactist-actionable-quaternary-idle-tint: var(--primary-second-color) !important;    /* ヘッダー > パンくず > トーンダウン テキストカラー */
    --reactist-actionable-quaternary-hover-tint: var(--primary-light-color) !important;    /* ボタン系 明るい色 */
    --reactist-actionable-quaternary-hover-fill: var(--primary-second-color) !important;    /* ボタン系 > ホバー背景 */
    --reactist-actionable-quaternary-disabled-tint: var(--body-bg-color) !important;    /* ボタン系 > 非活性*/
    --reactist-bg-menu: var(--reactist-bg-default) !important;    /* メニューポップアップ > 背景色 */
    
    
}

:root {

    --product-library-background-base-secondary: rgba(0, 0, 0, 0.5);
    --body-bg-image: none !important;
    --info-margin-right: 8px;
    --section-header-text-color: var(--primary-light-color);

    /* ライトモード時のスタイル */
    --content-bg: rgba(0, 0, 0, .1);
    --section-list-bg: rgba(255, 255, 255, 0.9);
    --product-library-divider-primary: rgba(0, 0, 0, 0.1) !important;
    --section-header-bg: rgba(241, 241, 241, .75) !important;
    --section-header-box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.1);
    --section-list-border: rgba(0, 0, 0, 0.1);


    --backDropFilter-blur: blur(10px);

    /* ダークモード時のスタイル */
    @media (prefers-color-scheme: dark) {
        --product-library-display-primary-idle-tint:rgba(255, 255, 255, 1) !important;
        /* テキスト(ページタイトル、タスクテキスト) */
        /* タスクテキストカラー */
        --product-library-navbar-idle-fill: rgba(0, 0, 0, .15) !important;
        /* ナビバー、タスクモーダル > オプションバー 背景 */
        --reactist-bg-default: rgba(255, 255, 255, 0.05);
        /*ヘッダー + タスクモーダル > バックグラウンドカラー*/
        --content-bg: rgba(0, 0, 0, .0);
        --section-list-bg: rgba(255, 255, 255, 0.03);
        --product-library-divider-primary: rgba(255, 255, 255, 0.1) !important;
        --section-header-bg: rgba(0, 0, 0, 0.3) !important;
        --section-list-border: rgba(255, 255, 255, 0.1);
    }
}

/* --------------------
レイアウト系
-------------------- */
body {
    background-color: var(--body-bg-color) !important;
    background-image: var(--body-bg-image);
    background-size: cover;
}

#content {
    background: none;
    background-color: var(--content-bg);
}

header > div {
    /*ヘッダー 背景*/
    background-color: var(--reactist-bg-default);
    backdrop-filter: var(--backDropFilter-blur);
}

.section header {
    /* セクションのタイトル部分 */
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: var(--section-header-box-shadow);
    background-color: var(--section-header-bg);
    backdrop-filter: var(--backDropFilter-blur);
    border: 1px solid var(--section-list-border);
}

.section header .section_head__overflow_actions--wide {
    /*左に出る トグルスペース*/
    background-color: initial;
}

.section header button.section_head__title,
.section header h2,
.section header.section_head .section_head__title {
    color: var(--section-header-text-color);
}

.section_head__title_box {
    /*セクションタイトルのインナー部分*/
    backdrop-filter : none;
}

.section_list > li {
    background-color: var(--section-list-bg);
    padding: 16px 32px;
    border-radius: 8px;
    border: 1px solid var(--section-list-border);
    /*backdrop-filter: blur(15px);*/
}

.task_list_item .task_list_item__content .task_list_item__content__wrapper {
    /*タイトルと詳細*/
    margin-bottom: 0;
}

.task_list_item {
    background-color: rgba(0, 0, 0, 0);
}

.task_list_item .task_list_item__content {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.task_list_item__info_tags {
    order: 1;
    /* 最初に表示される */
    margin-bottom: 4px;
}

.task_list_item__info_tags .task_list_item__info_tags__subtasks--show-complete {
    /* サブタスク */
    order: 2;
    padding: 2px 4px;
    margin-right: 4px;
    border: 1px solid var(--section-list-border);
    background-color: var(--section-list-border);
}

.task_list_item__info_tags a,
.task_list_item__info_tags button {
    /*日付*/
    order: 3;
    margin-right: var(--info-margin-right);
}

.task_list_item__info_tags .date {
    /*日付 span*/
    padding: 4px 6px;
    border: 1px solid var(--section-list-border);
    border-radius: 4px;
    margin-right: var(--info-margin-right);
}

.task_list_item__info_tags .task_list_item__info_tags__label {
    /*ラベル - ラップ*/
    order: 1;
    padding: 2px 4px;
    border: 1px solid var(--section-list-border);
    margin-right: var(--info-margin-right);
}

.main-view-layout .controller {
    /*タスク追加*/
    position: sticky;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--section-list-border);
    background-color: var(--section-header-bg);
    backdrop-filter: var(--backDropFilter-blur);
    bottom: 10px;
}

/*
モーダル
*/
[data-testid="modal-overlay"] {
    /* スタイル */
    backdrop-filter: var(--backDropFilter-blur);
}

/*
メニューポップアップ
*/
.menu_list {
    /*全体メニューポップアップ*/
    backdrop-filter: var(--backDropFilter-blur);
}

.reactist_menulist[role=menu],
.reactist_menulist[role=menubar] {
    /*タスク内メニューポップアップ*/
    backdrop-filter:...