TrelloをChorome+Stylusでいい感じの見た目にする

2021/10/08 新しいスタイルに対応しました。

内容が Google に公開設定されていたことがやや問題になったのが関係するかわからないですが Trello に「ワークスペース」という機能が追加されました。従来のボードをまとめてワークスペースという場所に関連付けて一括で管理できる機能？みたいです。従来のボードは必ずどれかのワークスペースに設定しないといけないらしいので放っておくと勝手に移行される旨がメールできていました。

しかし、これを機に課金誘導のためのバナー大量表示しようというのはなかなか思うところがあります。もちろんネットサービスだから課金ユーザーが居ないと成り立たないのは理解していますが表示が目立つのでタイトルの組み合わせで見た目を対応しようと思います。Stylus の説明は省略します。

以下 Stylus の Trello サイト向けの CSS 欄に張り付けるだけです。

/* ★★カードの幅を広げる */
.window {
  width: 840px;
}
.window-main-col {
  width: 600px;
}
.window-sidebar {
    width: calc(94% - 600px); /* 2021/06/28 配置がおかしくなったので追加 */
    margin-bottom: 20px; /* 縦が短いと下が詰まるので伸ばす */
}
/* ★★ カードのカスタムフィールド, 広告, Power-up, 自動化 を削除 */
[title='カスタムフィールド'] {
    display: none;
}
.js-card-back-custom-fields-prompt{
    display: none;
}
.js-plugin-buttons{
    display: none;
}
.js-butler-card-buttons{
    display: none;
}

/* ★★チェックリストの余白の調整 */
.checklist {
    margin-bottom: 14px;
}
.checklist-list.window-module {
    margin: -20px 0 -10px 0;
}

/* ボード上部のボード名の非表示 */
.board-header-btn.board-header-btn-org-name.js-open-org-menu.board-header-btn-without-icon{
    display: none;
}
#content > div > div.board-main-content > div.board-header.u-clearfix.js-board-header.collapsed-workspace-nav > div.js-board-header-btn-org-wrapper.board-header-btn-org-wrapper > span:nth-child(1){
    display: none;
}
/* ボード上部のアイコンの横の「招待」ボタンを削除 */
.board-header-btn.board-header-btn-invite.board-header-btn-without-icon.js-open-manage-board-members{
    display: none;
}
/* ボード上部のアイコンの「ボード」トグルを削除 */
[data-test-id='board-views-switcher-button']{
    display: none;
}
/* 「自動化」ボタン削除 */
.js-butler-header-btns.board-header-btn-react-container{
    display: none;
}
/* Power-up*/
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > ul:nth-child(4){
    display: none;
}
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > div.js-power-up-slots-container{
    display: none;
}
/* 水平線 */
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > hr:nth-child(3){
    display: none;
}
/* ★★ボードメニュ0 > もっと見る... の内容を非表示化 */
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > ul:nth-child(1) > li.board-menu-navigation-item.disabled{
    display: none;
}
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > ul:nth-child(3) > li.board-menu-navigation-item.disabled{
    display: none;
}

/* ★★ボード右側の「ボードメニュー」の不要項目を削除 */
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > ul:nth-child(2) > li.board-menu-navigation-item.disabled {
    display: none; /* カスタムフィールド */
}
#content > div > div.board-menu.js-fill-board-menu > div > div > div.board-menu-content.u-fancy-scrollbar.js-board-menu-content-wrapper > div > ul:nth-child(2) > div{
    display: none; /* 自動化 */
}

/* ★★新しいサイドバーを消す */
[data-test-id='workspace-navigation-collapsed-container']{
    display: none;
    margin-left: -10px;
}
/* 上部のボタンを消した分左に積める */
.board-header.collapsed-workspace-nav {
    padding-left: 8px;
}

/*ボードをサイドバーを消した分左に詰める*/
#board.collapsed-workspace-nav{
    padding-left: initial;
}
/* スクロールバーを消した分左に詰める */
#board.collapsed-workspace-nav::-webkit-scrollbar-button{
    width: 4px;
}

/*ワークスペースの誘導を削除*/
.boards-page-layout-sidebar {
    visibility: hidden;
    flex: 0;
    padding-right: 0;
    padding-bottom: 0;
    margin-right: -40px;
    margin-top: -220px;
}

/*アップグレードボタンを削除*/
#content > div > div.js-boards-page > div > div:nth-child(1) > div > div > div.all-boards > div > div > div:nth-child(3) > div > div.boards-page-board-section-header > div.boards-page-board-section-header-options > div {
    display: none;
}
/*Trelloを始めましょうボタンをを削除*/
#content > div > div.js-boards-page > div > div:nth-child(1) > div > div > div:nth-child(1) > nav > div:nth-child(2) > div > ul > li > ul > li:nth-child(1) > a {
    display: none;
}
/*アップグレード通知を消去*/
._8f2Py_XJjrjz8Z {
    display: none;
    margin-top: -90px;
}

/* ★★画面最上部のメニューを削除 */
#header > div:nth-child(1) > div {
    display: none; /* 内容が無いハンバーガーボタン */
}
[aria-label='ワークスペース'] {
    display: none; /* ワークスペースボタン(展開しても無意味) */
}
[aria-label='最近使ったボード'] {
    display: none; /* ワークスペースボタン(展開しても無意味) */
}

/* スター付きのワークスペース名を削除 */
._21bPDKwArOTCVp{
    display: none;
}