※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;
}
}
}
You must log in or register to comment.
おまけ:検索バーを投稿パネルからナビゲーションに移動するuserscript諸事情によりuserscriptは公開停止しました。