ステータス表示｜ココフォリアカスタムCSS

- TRPGをオンラインで遊ぶにあたり、オンラインセッションツール『ココフォリア』を使用することが多い
- 楽しく遊べればそれでいいんだけど、せっかくなら後で見返せるようにログを残しておきたい
- せっかくならログを見やすく＆プレイ当時の印象が思い出せるような画面にしてみたい

元記事：OBSでココフォリアを録画するときのカスタムCSS

今回はステータス表示のカスタムCSSです。（右下のやつです）

OBSでの使用イメージ

お借りしています

OBSでココフォリアを表示させる時のカスタムCSS | U7D05 BAR

魔改造しています（CSS）

@import url("https://yudukiak.github.io/ccfoliaCSS/CSS/status/main.css");

/* 変数上書き */
:root {
    --avatar-height: 80px;
    --avatar-width: 140px;
    --avatar-background: rgba(22, 22, 22, 1);
    --avatar-border-size: 1px;
    --avatar-border-style: solid;
    --avatar-border-color: rgb(245, 245, 245);
    --avatar-border-radius: 10px;

    --badge-height:24px;
    --badge-width: 40px;
    --badge-background: rgba(0, 0, 0, 0.64);
    --badge-font-size: 1.5rem;
    --badge-font-color: rgb(255, 255, 255);

    --status-column: 1;
    --status-height: 6px;
    --status-width: 138px;
    --status-background: var(--background-color, rgb(31, 164, 184));
    --status-font-size: 1.5rem;
    --status-font-color: var(--font-color, rgb(255, 255, 255));
    --status-font-secondary-color: var(--font-color-fail, #F93844);
    --status-font-border-color: rgb(0, 0, 0);
    --status-border-width: var(--border-width, 1px);
    --status-border-style: solid;
    --status-border-color: var(--border-color, rgb(0, 0, 0));
    --status-border-image: var(--border-image, url());
    --status-border-radius: var(--border-radius, 2px);
    --status-border-shadow: var(--border-shadow, 0);
}


/* イニシアチブ */
.MuiBadge-badge {
    border-radius: 0px 10px 0px 10px;
    top: 14px !important;
    right: 21px !important;
    position: absolute !important;
}

/* 画像とステータスを縦並びにする */
#root > div > div {
  flex-direction: column;
  position: relative;
  width: var(--avater-container-width);
  justify-content: flex-end;
}

/* ステータスbarを縦並びに */
#root > div > div > div {
  margin-left: 0px;
  display: grid;
}

/* ステータス１個分 */
#root > div > div > div > div {
  margin: 0;
  display: grid;
}

/*  ステータスの数字が重ならないようにする処理 */
#root > div > div > div > div > div {
  margin-top: var(--status-font-size) ;
}

/*  ステータスの数字 */
.MuiTypography-body2 {
  padding: 0 0.1em;
  margin-top: calc(-1 * var(--status-font-size) - var(--status-height) - 0.1em);
}

/*  ステータスの数字がbarからはみ出しても見えるようにする */
[variant="bar"] > div {
  overflow: visible;
}

/* 画像の位置調整 */
.MuiAvatar-root {
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  &::before {
    flex-shrink: 1;
    flex-grow: 1;
    content: "";
  }
}
.MuiAvatar-root > * {
  height: var(--avatar-height);
  width: var(--avatar-width);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.MuiAvatar-root img {
  width: 100%;
  height: auto;
  max-width: unset;
  max-height: unset;
  /* 画像のズームと位置調整ができます */
  transform: scale(100%) translate(1px, 4px);
  transform-origin: 50% 0%;
}

使用させていただいたライブラリ

利用について

魔改造分のソースはご自由にお使いください。利用報告・クレジットは無くても大丈夫ですがあると見つけた時うれしくなります。ココフォリア公式の更新などによりDOM構造やCSSクラス名が変更になったら表示が崩れることがありますが、緊急のサポートはできないと思います。

最終更新：2024-09-13（崩れに暫定対応）