/* ==UserStyle== @name Mastodonカラム内ユーザーTOPを圧縮（v3） @description カラム表示時のユーザーページの上部を色々と圧縮表示 @namespace https://github.com/Phroneris @version 1.4.2 @author 森の子リスのミーコの大冒険（Phroneris） @homepageURL https://github.com/Phroneris/StylusUserCSS-Phroneris @supportURL https://github.com/Phroneris/StylusUserCSS-Phroneris/issues @updateURL https://github.com/Phroneris/StylusUserCSS-Phroneris/raw/master/usercss/mastodon_compress-usertop.user.styl @license CC0-1.0 @preprocessor stylus @var checkbox smallenProfile "圧縮表示：プロフィール" 1 @var checkbox smallenHosoku "圧縮表示：補足欄" 1 @var checkbox smallenNote "圧縮表示：メモ欄" 1 @var checkbox smallenFF "圧縮表示：投稿数・FF数の欄" 1 @var checkbox smallenTab "圧縮表示：TL切り替え部" 1 @var checkbox smallenPinned "固定された投稿を畳む" 1 @var select openStylePinned "┗ 再展開方法" { "クリックや選択": "focus-within", "マウスオーバー": "hover" } @var checkbox isLightTheme "ライトテーマ" 0 ==/UserStyle== */ /* ==ChangeLog== 2023/09/08 v1.4.2 * Mastodon v4の大規模リニューアルに伴い、v3以前用である本UserCSSの更新を終了し、以後の開発はv4用の下記UserCSSの方で行います * https://github.com/Phroneris/StylusUserCSS-Phroneris/raw/master/usercss/mastodon-v4_compress-usertop.user.styl 2022/04/17 v1.4.1 * マストドンv2.8.0未満への対応部分は基本的にもうメンテしないものとし、ファイル末尾に移動 * インラインコメントの区切りをタブ文字ではなくスペース2個に統一 2022/04/13 v1.4.0 * 「トゥート」→「投稿」 * マストドンv3.4.0からの登録年月日表示に対応 * マストドンv3.5.0からの新形式ユーザーURLに対応 * これ→ https://github.com/mastodon/mastodon/pull/16171 * プロフィールにおいて、補足・メモ・文を欠く場合の縦余白を修正 * 固定投稿の検出方法を新旧併用式に変更 * 主に数値計算におけるコード規約として、「元のデザインで用いられている値」を表す `((固定値))` を導入 * その他微調整 2021/02/03 v1.3.0 * 各種URLのリポジトリ名を修正 * メモ欄に対応 * カラーテーマに対応（手動） * セレクタ記述を少しスマートに * マストドン v3.1.0からのFF欄のpadding変更に対応 2019/06/20 v1.2.2 * URL選択を少しだけ厳密に * 「フォローされています」等のバッジ（？）の高さを微減 * 畳んだ固定トゥートが日時まで非表示になるのを修正 * 固定トゥート再展開方法が「クリックや選択」の場合に、トゥート内のリンクやCWや画像をクリックするとトゥート自体の選択が解かれてしまうのを修正 * @updateURLを`*.styl`に変更 2019/05/09 v1.2.1 * サイト選択をドメイン式ではなくURL式に変更 * Qiitadonなどで固定トゥートが畳めないのを修正 * ヘッダー画像が無い場合に「フォローされています」が表示されないのを修正 2019/05/02 v1.2.0 * マストドン v2.8.0からのプロフィールレイアウトに対応 * ドメイン削除：friends.nico * ドメイン追加：best-friends.chat 2019/02/22 v1.1.3 * このChangeLogを追加 * 対応インスタンスを追加（自分のために） * リポジトリ整理に伴い@updateURLを修正 */ @-moz-document regexp("^https://[^/]+?/web/accounts/\\d+(/.*)?$"), regexp("^https://[^/]+?/web/@[a-zA-Z0-9_]{1,30}(@[^/]+)?(/|/\\D.*)?$") UBC = isLightTheme ? #d9e1e8 : #282c37 // SCSS $ui-base-color UBC_l4-or-white = isLightTheme ? #ffffff : #313543 // SCSS lighten($ui-base-color, 4%) UBC_l8 = isLightTheme ? #c0cdd9 : #393f4f // SCSS lighten($ui-base-color, 8%) SG = #79bd9a // isLightTheme ? #4a905f : #79bd9a // SCSS $success-green div.account__header:not([style^="background-image"]) // v2.8.0以上 /* プロフィールを圧縮表示 ・各要素間や各行間を詰める。 ・文の空行を詰める。 */ /* 構造（divは省略） .account-timeline__header : ヘッダー、アイコン等、名前とID、補足欄、メモ欄、文、FF、TL切り替え .account__header : ヘッダー、アイコン等、名前とID、補足欄、文、FF .account__header__image .account__header__info : 「フォローされています」等 img : ヘッダー画像 .account__header__bar : アイコン等、名前とID、補足欄、メモ欄、文、FF（、メニューボタン背景色） .account__header__tabs a.avatar : アイコン .spacer .account__header__tabs__buttons : ボタン類 .account__header__tabs__name h1 span : 名前 .account-role.bot : Botバッジ（なおAdminやModのバッジは出ない） small : ID .account__header__extra .account__header__bio : プロフィール .account__header__fields : 補足欄 dl dt : 見出し dd : 中身 ... .account__header__account-note : メモ欄 label span : 「メモ」 span.inline-alert : 編集終了時の「保存しました」 textarea : メモ編集欄 .account__header__content : 文 p .account__header__joined : 登録年月日 span .account__header__extra__links : FF a : 投稿数 a : フォロー数 a : フォロワー数 .account__section-headline : TL切り替え a : 投稿TL a : 投稿と返信TL a : メディアTL */ if smallenProfile background: UBC_l4-or-white /* ヘッダー */ .account__header &__image height: ((145px)) + 44px // ((固定値)) は「元のデザインで用いられている値」の意味 width: 100% position: absolute img opacity: 0.3 // 可変にしようかと思ったけどやめた &::after content: "" display: block position: absolute inset: 0 background: linear-gradient(to bottom, rgba(UBC_l4-or-white, 0), rgba(UBC_l4-or-white, 0) 50%, rgba(UBC_l4-or-white, 1) 95%) &__info left: initial right: ((10px)) z-index: 10 .relationship-tag padding-top: ((4px)) - 1px padding-bottom: @padding-top &__bar background: none /* アイコン等 */ .account__header__tabs padding-top: 0 padding-bottom: @padding-top margin-bottom: ((7px)) margin-top: @margin-bottom + 1px /* メニューボタン */ &__buttons button[aria-label] background-color: UBC_l4-or-white /* 名前とID */ .account__header__tabs__name padding-top: 0 // paddingをmarginに padding-bottom: @padding-top margin-top: ((5px)) margin-bottom: @margin-top + 3px h1 line-height: ((24px)) - 5px /* プロフィール（補足、メモ、文） */ .account__header__bio &:empty // 少なくともKirakiratter（v3.1.3）でプロフィールが無い場合 margin-top: -9px /* 補足欄（無い人もいる） */ // 元padding: 0; .account__header__fields margin-bottom: 10px /* メモ欄（自分には無い） */ // 元padding: 15px 15px 10px; .account__header__account-note padding-top: 0 // padding-bottom: 0 margin: 10px 0 11px &:first-child // 補足が無い場合 margin-top: -((4px)) /* 文（無い人もいる） */ // 元padding: 20px 15px 5px; .account__header__content padding-top: 0 padding-bottom: 0 margin-top: 5px &:first-child // 補足が無い自分の場合 margin-top: 0px > p line-height: ((18px)) - 2px forceWrap = 1 // 「見境なく改行」オプションを設けようかと思ったけどいいや、勝手にやる if forceWrap word-break: break-all &:not(:last-child) // 空行 margin-bottom: ((20px)) - 16px /* 登録年月日 */ // 元padding: 5px 15px; .account__header__joined padding-top: 0 padding-bottom: 0 margin-top: ((5px)) + 2px &:first-child // プロフィールが無い自分の場合 margin-top: 0 if smallenHosoku /* 補足欄を圧縮表示（ほんとは固定投稿みたいにクリック等で開閉したいが、CSS3だけではできなさそう） */ .account__header__fields dl dt, dd hosokuVPad = ((14px)) - 8px padding: hosokuVPad 10px hosokuVPad - 3px if smallenNote /* メモ欄を圧縮表示 */ .account__header__account-note label position: relative > *:first-child // 「メモ」 display: none .inline-alert // 「保存しました」 foreCol = darken(SG, 50%) backCol = lighten(SG, 70%) color: foreCol display: block position: absolute left: 0 bottom: 5px border-radius: 4px padding: 3px 8px background: backCol box-shadow: 2px 4px 15px rgba(0, 0, 0, 40%) z-index: 9999 &::before content: "" display: block position: absolute bottom: -7px width: 0 height: 0 border: 0 solid transparent border-width: -@bottom 10px 0 0 border-top-color: backCol border-radius: 0 textarea // &::placeholder // 「クリックしてメモを追加」 // text-align: right background: UBC textareaExtend = ((10px)) - 5px width: "calc(100% + %s)" % (textareaExtend * 2) margin: 0 (- textareaExtend) /* 投稿数・FF数の欄を圧縮表示 */ if smallenFF .account__header__extra__links // line-height: 0 padding: 0 // paddingをmarginに margin-top: ((10px)) - 2px margin-bottom: ((10px)) - 7px a padding-top: 0 padding-bottom: 0 /* TL切り替え部を圧縮表示 */ if smallenTab .account__section-headline > a padding-bottom: ((15px)) - 7px padding-top: @padding-bottom + 1px &.active &::before, &::after border-width: 0 ((10px)) - 1px ((10px)) - 3px /* 固定投稿を畳む ・消しはしないので「固定投稿がある」ということはわかる。 ・日時だけ残すので頻繁に目にする場合は更新があれば気付ける。 ・「クリックや選択」または「マウスオーバー」で再展開する。 （ほんとはマウスオーバー範囲をピン部分だけとかに限定したいけど、 CSS3では先読みを要する親要素や兄要素への作用はできない） （クリックや選択の場合、投稿内の画像の閲覧注意をクリックで解除すると 投稿自体の選択が解かれてしまう不具合あり。もう一度選択すれば普通に見れる） ・カラム内ユーザーページでだけ有効、カラム内単投稿ページや個別ユーザーページなどには効かない。 */ if smallenPinned /* 固定投稿全体 */ article[data-id^="f-"] > div > div // 古いサーバー // 最近のサーバーも普通ならこれでカバーできるが、Pawooは無理 div[data-featured="true"] // 最近のサーバー &.status__wrapper:not(:{openStylePinned}) border-bottom: 1px solid UBC_l8 // 全体の下線をこちらに回す /* 「固定された投稿」ラベル全体 */ .status__prepend display: inline-block padding-bottom: ((8px)) span // 「固定された投稿」 display: none // 消さないとカラム幅次第では日付が長い場合にかぶる &::after content: "固定投稿" // かぶらない短さ。ほんとはユーザー変数で指定したいけど、日本語文字列を受け付けてくれない… /* ラベル以外の投稿全体（情報、本文、メディア、アクション） */ .status display: inline-block position: absolute right: ((10px)) padding-right: 0 border: 0 // 全体の下線をなくす min-height: 0px // 表示に影響はないが、不要な広さが確保されて要素検証時に目障りなので削る /* 情報（日時、名前、アイコン）のうち日時以外 */ .status__info a:not(.status__relative-time) display: none /* 情報以外（本文、メディア、アクション、リンク先のカード） */ > *:not(.status__info) display: none div.account__header[style^="background-image"] // v2.8.0未満。基本的にもうメンテしない & > div /* プロフィールを圧縮表示 ・アイコン‐名前‐ID（‐Botバッジ）‐文（‐補足欄）の間隔や各行間を詰める。 ・文の空行を詰める。 */ if smallenProfile /* プロフィール全体 */ userTPad = 20px - 5px userBPad = userTPad - 3px padding-top: userTPad padding-bottom: userBPad /* 補足欄（調整） */ .account__header__fields margin-top: userBPad margin-bottom: - userBPad /* アイコン */ a.account__header__avatar margin-bottom: 10px - 4px /* 名前 */ span.account__header__display-name line-height: 27px - 7px margin-top: 2px margin-bottom - 2px /* ID */ span.account__header__username line-height: 18px - 4px margin-bottom: 0 // デフォルト10px。下の変数で代用 existingBioTop = 10px - 5px /* Botバッジ */ div.roles margin-top: existingBioTop margin-bottom: 0 /* 文 */ div.account__header__content p line-height: 18px - 2px forceWrap = 1 // 「見境なく改行」オプションを設けようかと思ったけどいいや、勝手にやる。 if forceWrap word-break: break-all > p:first-child:not(:empty) margin-top: existingBioTop /* 文の空行 */ > p:nth-last-child(n+2) margin-bottom: 20px - 15px if smallenHosoku /* 補足欄を圧縮表示（ほんとは固定トゥートみたいにクリックで畳みたいが、CSS3だけではできなさそう） */ div.account__header__fields border-top: 0px dl border-bottom: 0 dt, dd hosokuVPad = 14px - 8px padding: hosokuVPad 20px - 10px hosokuVPad - 3px // &:focus // background-color: red /* 投稿数・FF数の欄を圧縮表示 */ if smallenFF & + div > div.account__action-bar line-height: 0 a.account__action-bar__tab, div.account__action-bar-dropdown ffPad = 10px - 3px padding-top: ffPad + 0px padding-bottom: ffPad - 5px > span line-height: 18px - 5px > strong line-height: 18px - 4px a.account__action-bar__tab.active border-bottom-width: 1px button // こいつ正直よくわからない…。 // line-height: 0px !important // position: relative // top: 0px height: 0px !important