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

f:id:Takachan:20210603212700p:plain

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

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

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

/*カードの幅を広げる*/
.window {
  width: 840px;
}
.window-main-col {
  width: 600px;
}

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

/*作成、情報、通知を削除*/
#header > div._3L7haCtpIGF1G_ > button:nth-child(1) {
    visibility: hidden;
}
#header > div._3L7haCtpIGF1G_ > button:nth-child(2) {
    visibility: hidden;
}

#header > div._3L7haCtpIGF1G_ > button:nth-child(3) {
    visibility: hidden;
}

/*誘導部分を非表示*/
#chrome-container > div.window-overlay > div > div > div > div.window-sidebar > div.js-plugin-buttons {
    visibility: hidden;
}
#chrome-container > div.window-overlay > div > div > div > div.window-sidebar > div.js-butler-card-buttons {
    visibility: hidden;
}
/* 非表示にした分位置を調整 */
#chrome-container > div.window-overlay > div > div > div > div.window-sidebar > div:nth-child(5) {
    /*margin: -250px 0 0 0;*/
    /*環境による?ボードリストで見切れてたり余白が大きければ調整する*/
    margin-top: -160px;
}

/* ボード一覧の誘導を削除 */
.js-butler-header-btns.board-header-btn-react-container{
    visibility: hidden;
}
button[data-test-id='board-views-switcher-button']{
    visibility: hidden;
}
.board-header-btn.mod-board-name.inline-rename-board.js-rename-board{
    margin: 0 10px 0 -102px;
}
#chrome-container > div.pop-over.is-shown > div > div:nth-child(2) > div > div > div > ul > li.divide {
    visibility: hidden;    
}


/*スター付きボードを非表示*/
div > div._8zoru7m55IFS3 > div:nth-child(1) {
    visibility: hidden;
}
div._8zoru7m55IFS3 > div:nth-child(1) > div._1UEokeCjuviR-r._1MDNc70JaeovY1 > button > span:nth-child(1) > span {
    visibility: hidden;
}
/*最近使ったボードを非表示*/
div > div._2dA6diQikiz6RG > div > div._8zoru7m55IFS3 > div:nth-child(2) {
    visibility: hidden;
}
div > div._8zoru7m55IFS3 > div:nth-child(2) > div._1UEokeCjuviR-r._1MDNc70JaeovY1 > button > span:nth-child(1) > span {
    visibility: hidden;
}
/*ボード一覧の位置を調整*/
div > div._2dA6diQikiz6RG > div > div._8zoru7m55IFS3 > div:nth-child(3) {
    margin-top: -246px
}

/*招待ボタンを非表示*/
#workspaces-preamble-invite-button{
    visibility: hidden;
}

/*ボードメニューの誘導を削除*/
.js-butler-button{
    visibility: hidden;
}
.js-open-power-ups {
    visibility: hidden;
}
.js-power-up-slots-container {
    visibility: hidden;
}
.board-menu-content-frame > hr:nth-child(3) {
    visibility: hidden;
}
.board-menu-content-frame > hr:nth-child(6) {
    visibility: hidden;
}
/*削除した分の位置調整*/
.js-menu-action-list {
    margin-top: -430px;
}

.board-menu-navigation-item.disabled{
    visibility: hidden;
}

/*ワークスペースの誘導を削除*/
.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 {
    visibility: collapse;
}
/*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 {
    visibility: hidden;
}