はぬマーク+メモ

※Fedibird専用であり、現行バージョンのMastodon (4.2.x) 用ではありません

MastodonのBird UI/Tangerine UIっぽくナビゲーションを左側、投稿パネルを右側に移動してみた、各テーマ向けの調整を含みます。 Fedibirdの「モダン」テーマに対する調整用userstylesと併用できます。

※画面の幅が狭い時に

• 返信・引用しようとすると投稿画面が開かない
• 検索バーが表示されない

という問題があります。

2024-03-08 16:55更新

:root {
  --side-width: 285px; /* お好きな幅に */
}

.layout-single-column {
  /* ナビゲーション */
  .columns-area__panels__pane--navigational {
    order: 1;
  }

  /* メインカラム */
  .columns-area__panels__main {
    order: 2;
  }

  /* 投稿パネル */
  .columns-area__panels__pane--compositional {
    order: 3;
  }

  /* サイドカラムの最小幅 */
  .columns-area__panels__pane {
    min-width: var(--side-width);
  }

  /* カラム内部の幅 */
  .columns-area__panels__pane__inner, .compose-panel {
    width: var(--side-width);
  }

  /* メインカラムの幅を調整 */
  @media (min-width: 895px) and (max-width: 1190px) {
    .columns-area__panels__main {
      max-width: min(calc(100vw - 20px - (var(--side-width) + 20px)), 600px) !important;
    }
  }

  @media (min-width: 1190px) {
    .columns-area__panels__main {
      max-width: min(calc(100vw - 20px - ((var(--side-width) + 20px) * 2)), 600px) !important;
    }
  }

  /* 2カラムレイアウトで投稿パネルを隠し代わりにナビゲーションを表示 */
  @media screen and (min-width: 895px) and (max-width: 1190px) {
    .columns-area__panels__pane--compositional {
      display: none;
    }

    .columns-area__panels__pane--navigational {
      display: flex;
    }

    .floating-action-button {
      display: flex;
    }
  }
}

/* 不要になったタブバーを非表示 */
@media (min-width: 895px) {
  .tabs-bar__wrapper .tabs-bar {
    display: none;
  }

  .columns-area--mobile.bottom-bar {
    padding-bottom: 0;
  }
}

/* 投稿ボタンの位置を調整 */
@media (min-width: 895px) {
  #mastodon .floating-action-button {
    right: calc(max((100vw - 600px - var(--side-width)) / 2 + 10px, 0px) + 1.3125rem);
    bottom: 1.3125rem !important;
  }
  
  .layout-single-column[class*="theme-mastodon-material"] {
    #mastodon .floating-action-button {
      right: calc(max((100vw - 600px - var(--side-width)) / 2, 0px));
    }
  }
}

/* モダンテーマ向けの調整 */
@media (min-width: 1190px) {
  .layout-single-column:is(.theme-modern-dark, .theme-modern-light) {
    :is(#mastodon, .public-layout) .tabs-bar__wrapper {
      margin-left: calc(-25px - var(--side-width));
      width: var(--side-width);
    }
  }
}

/* 各テーマ固有の調整 */
@media screen and (max-width: 1190px) {
  /* モダンテーマのナビゲーションの位置を調整 */
  .layout-single-column:is(.theme-modern-dark, .theme-modern-light) {
    :is(#mastodon, .public-layout) .navigation-panel {
      padding-top: 0px;
    }
  }

  /* マテリアルテーマのタブバーの幅を調整 */
  .layout-single-column[class*="theme-mastodon-material"] {
    .tabs-bar__wrapper .tabs-bar.bottom-bar {
      max-width: 600px;
    }
  }
}

画面幅が狭い時に従来通りナビゲーションではなく投稿パネルを表示するバージョン

:root {
  --side-width: 285px; /* お好きな幅に */
}

.layout-single-column {
  /* ナビゲーション */
  .columns-area__panels__pane--navigational {
    order: 1;
  }

  /* メインカラム */
  .columns-area__panels__main {
    order: 2;
  }

  /* 投稿パネル */
  .columns-area__panels__pane--compositional {
    order: 3;
  }

  /* サイドカラムの最小幅 */
  .columns-area__panels__pane {
    min-width: var(--side-width);
  }

  /* カラム内部の幅 */
  .columns-area__panels__pane__inner, .compose-panel {
    width: var(--side-width);
  }

  /* メインカラムの幅を調整 */
  @media (min-width: 895px) and (max-width: 1190px) {
    .columns-area__panels__main {
      max-width: min(calc(100vw - 20px - (var(--side-width) + 20px)), 600px) !important;
    }
  }

  @media (min-width: 1190px) {
    .columns-area__panels__main {
      max-width: min(calc(100vw - 20px - ((var(--side-width) + 20px) * 2)), 600px) !important;
    }
  }
}

/* モダンテーマ向けの調整 */
@media (min-width: 1190px) {
  .layout-single-column:is(.theme-modern-dark, .theme-modern-light) {
    :is(#mastodon, .public-layout) .tabs-bar__wrapper {
      margin-left: calc(-25px - var(--side-width));
      width: var(--side-width);
    }
  }
}

/* 各テーマ固有の調整 */
@media screen and (max-width: 1190px) {
  /* マテリアルテーマのタブバーの幅を調整 */
  .layout-single-column[class*="theme-mastodon-material"] {
    .tabs-bar__wrapper .tabs-bar.bottom-bar {
      max-width: 600px;
    }
  }
}