見出し画像

旧版TweetDeckが復活記念にちょっと見やすくなるユーザーCSSを公開する

新版TweetDeckは大変使いづらく絶望していたのだが、いつの間にか旧版に戻せるようになっていたのでちょっとだけ見やすく・使いやすくなるユーザーCSSを公開する。
以前使っていたものは新版に切り替えられてしまった時に消してしまったので再度書き直した。
特に画像/動画サムネをクリックした際のポップアップが最大限大きく表示され、画像外をクリックすることでポップアップを閉じることができるあたりが便利。

CSSコード


/* 全体テキストサイズ 目の良い人には不要 */
.tweet-text{
    font-size: 18px !important;
}


/* 画像ポップアップ */
.gryphon-beta-btn-container{
    display: none !important;
}

html.dark .med-embeditem{
    top: 0 !important;
    bottom: 0 !important;
}

html.dark .med-tray {
    padding-bottom: 0 !important;
    z-index: 201 !important;
}

html.dark .mdl.s-full {
    max-width: 100% !important;
}

html.dark .med-fullpanel{
    background-color: inherit !important;
}

.js-med-tweet,
.med-origlink,
.med-flaglink{
    display: none !important;
}

html.dark .is-inverted-light.mdl-btn-media,html.dark .mdl-btn-media{
    opacity: 0.5 !important;
    z-index: 201 !important;
    width: 100% !important;
    height: 100% !important;
}

html.dark .mdl-media-next,
html.dark .mdl-media-prev {
    opacity: 0.1 !important;
    width: 25px !important;
}

html.dark .mdl-media-next:hover,
html.dark .mdl-media-prev:hover {
    width: 25px !important;
    opacity: 1 !important;

}

html.dark .mdl-dismiss {
    right: 0 !important;
    top: -25px !important;
}

html.dark .icon.txt-size--24.icon-close {
    font-size: 0px !important;
}


/* プロフィールポップアップ */
html.dark .prf-header .prf-bio,
html.dark .prf-header .fullname,
html.dark .prf-header .username{
    color: #fff !important;
    background-color: #000 !important;
    opacity: 0.8 !important;
}

html.dark .js-modal-panel.mdl.s-tall-fixed {
    width: 70% !important;
}

html.dark .l-column.mdl-column-med{
    width: 25% !important;
}

html.dark .l-column.mdl-column-med.mdl-column-rhs{
    width: 75% !important;
}

備考

  • 筆者はダークモードを適用しているので、"html.dark" と指定されている箇所がある。ライトモード使用の場合はそのあたり要調整

  • 筆者はGoogle Chromeを利用していて、ユーザーCSSはStylusという拡張機能を使用している


この記事が気に入ったらサポートをしてみませんか?