Chrome拡張機能StylusやArc Boostsを使って、 Notionのカレンダービューとタイムラインビューの土日部分に背景色を付けるためのコードです。
参考: Stylusの使い方, Arc Boostsの使い方
.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(7),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(7){
background: #EBF3FE!important;
}
.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(1),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(1){
background: #FFEBE9!important;
}
.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(6),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(6){
background: #EBF3FE!important;
}
.notion-calendar-view > .notion-selectable.notion-collection_view_page-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view_page-block:nth-child(7),
.notion-calendar-view > .notion-collection_view-block > div:nth-child(3) > div > .notion-selectable.notion-collection_view-block:nth-child(7){
background: #FFEBE9!important;
}
参考: https://notion-lab.jp/2023-07-15-coloring-timeline/
.notion-timeline-view > .notion-selectable.notion-collection_view_page-block > div:first-child div,
.notion-timeline-view > .notion-selectable.notion-collection_view-block > div:first-child div {
background: linear-gradient(90deg, #EBF3FE 0%, #EBF3FE 50%, #FFEBE9 50%, #FFEBE9 100%)!important;
display: flex;
justify-content: center;
align-items: center;
}
※フルページ用のセレクターを追記しました。