自分用MastodonカスタムCSS

README.md

自分用MastodonカスタムCSS

自分用のカスタムCSSです。 ハイコントラストのテーマを上書きしています。

いろいろ適当なので設定漏れとかも多々ありそう。

ヘッダー・フッターを消した関係で、ログインボタンがトップページから消失するので次のリンクを控えておく必要がある。

• https://<instance名>/auth/sign_in

custom-css.css

:root {
  --background-color: #fafffa;
  --header-color: #69958c;
  --accent-color: #2eb997;
  --text-color: #202020;
  --link-color: #2090a0;
}

/* レイアウト */
body.theme-contrast .public-layout .container {
  max-width: 1280px;
}

body.theme-contrast .follow-prompt,
body.theme-contrast .oauth-prompt {
  margin-top: 20px;
}

body.theme-contrast .columns-area__panels__main,
body.theme-contrast .container {
  padding: 0;
}

/* 色 */

html {
  scrollbar-color: var(--accent-color) var(--background-color);
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color) !important;
}

::-webkit-scrollbar-track {
  background: var(--background-color) !important;
}

body.theme-contrast,
body.theme-contrast.admin,
body.theme-contrast .status__prepend,
body.theme-contrast .public-layout .public-account-header__bar:before,
body.theme-contrast .activity-stream .entry,
body.theme-contrast .account__header__fields dd,
body.theme-contrast .public-layout .public-account-bio,
body.theme-contrast .account__header__fields .verified,
body.theme-contrast .nothing-here,
body.theme-contrast .card__bar,
body.theme-contrast .simple_form input[type='email']:hover,
body.theme-contrast .simple_form input[type='number']:hover,
body.theme-contrast .simple_form input[type='password']:hover,
body.theme-contrast .simple_form input[type='text']:hover,
body.theme-contrast .simple_form input[type='url']:hover,
body.theme-contrast .simple_form textarea:hover,
body.theme-contrast .simple_form input[type='email'],
body.theme-contrast .simple_form input[type='number'],
body.theme-contrast .simple_form input[type='password'],
body.theme-contrast .simple_form input[type='text'],
body.theme-contrast .simple_form input[type='url'],
body.theme-contrast .simple_form textarea,
body.theme-contrast .column-back-button,
body.theme-contrast .account__header__bar,
body.theme-contrast .tabs-bar__wrapper,
body.theme-contrast .search__input,
body.theme-contrast .column > .scrollable,
body.theme-contrast body.admin,
body.theme-contrast .batch-table__row,
body.theme-contrast .table > tbody > tr:nth-child(odd) > td,
body.theme-contrast .table > tbody > tr:nth-child(odd) > th,
body.theme-contrast .detailed-status,
body.theme-contrast .public-layout .public-account-header__bar::before,
body.theme-contrast .public-layout .public-account-header__bar,
body.theme-contrast .regeneration-indicator,
body.theme-contrast .empty-column-indicator,
body.theme-contrast .error-column,
body.theme-contrast .follow_requests-unlocked_explanation,
body.theme-contrast .account-role.admin,
body.theme-contrast .simple_form .recommended.admin {
  background: var(--background-color);
}

body.theme-contrast .public-layout .public-account-header__bar .avatar img {
  border-color: var(--background-color);
}

body.theme-contrast .column-header,
body.theme-contrast .column-header > .column-header__back-button {
  color: var(--background-color);
}

body.theme-contrast .button,
body.theme-contrast .button.logo-button,
body.theme-contrast .load-more:hover,
body.theme-contrast .load-gap:hover,
body.theme-contrast .directory__tag > a:hover,
body.theme-contrast .directory__tag > div:hover,
body.theme-contrast .simple_form .block-button,
body.theme-contrast .simple_form .button,
body.theme-contrast .simple_form button,
body.theme-contrast .card > a:active .card__bar,
body.theme-contrast .card > a:focus .card__bar,
body.theme-contrast .card > a:hover .card__bar,
body.theme-contrast .tabs-bar,
body.theme-contrast .column-header,
body.theme-contrast
  .admin-wrapper
  .sidebar
  ul
  .simple-navigation-active-leaf
  a:hover,
body.theme-contrast .admin-wrapper .sidebar ul .simple-navigation-active-leaf a,
body.theme-contrast .column-header__button,
body.theme-contrast .directory__card__bar,
body.theme-contrast .column-inline-form,
body.theme-contrast a.status-card:hover {
  background: var(--accent-color);
}

body.theme-contrast .account__header__fields .verified__mark,
body.theme-contrast
  .public-layout
  .public-account-bio
  .account__header__fields
  .verified
  a,
body.theme-contrast .column-link--transparent,
body.theme-contrast .simple_form .hint code,
body.theme-contrast .admin-wrapper .content h6,
body.theme-contrast .admin-wrapper .content h4,
body.theme-contrast .admin-wrapper .content h3,
body.theme-contrast .account-role,
body.theme-contrast .simple_form .recommended,
body.theme-contrast .admin-wrapper .content > p strong {
  color: var(--accent-color);
}

body.theme-contrast
  .public-layout
  .public-account-header__tabs__tabs
  .counter.active:after,
body.theme-contrast .account-role,
body.theme-contrast .simple_form .recommended {
  border-color: var(--accent-color);
}

body.theme-contrast .account__section-headline a.active:after,
body.theme-contrast .account__section-headline button.active:after,
body.theme-contrast .notification__filter-bar a.active:after,
body.theme-contrast .notification__filter-bar button.active:after {
  border-color: transparent transparent var(--accent-color);
}

body.theme-contrast .account__section-headline,
body.theme-contrast .notification__filter-bar {
  border-bottom: var(--accent-color);
}

body.theme-contrast .account__section-headline,
body.theme-contrast .notification__filter-bar,
body.theme-contrast .account__header__fields dt,
body.theme-contrast .directory__tag > a,
body.theme-contrast .directory__tag > div,
body.theme-contrast .hero-widget__text,
body.theme-contrast .batch-table__row:nth-child(2n),
body.theme-contrast .table td,
body.theme-contrast .table th,
body.theme-contrast .focusable:focus,
body.theme-contrast .detailed-status__action-bar,
body.theme-contrast .filter-form,
body.theme-contrast .directory__card__extra,
body.theme-contrast .column-header__back-button {
  background: var(--header-color);
}

body.theme-contrast .public-layout .public-account-bio .roles,
body.theme-contrast .public-layout .public-account-bio__extra,
body.theme-contrast .simple_form input[type='email']::placeholder,
body.theme-contrast .simple_form input[type='number']::placeholder,
body.theme-contrast .simple_form input[type='password']::placeholder,
body.theme-contrast .simple_form input[type='text']::placeholder,
body.theme-contrast .simple_form input[type='url']::placeholder,
body.theme-contrast .simple_form textarea::placeholder,
body.theme-contrast .simple_form p.hint,
body.theme-contrast .account__header__bio .account__header__joined,
body.theme-contrast .status__prepend,
body.theme-contrast .search__input::placeholder,
body.theme-contrast .simple_form input[type='email']::placeholder,
body.theme-contrast .simple_form input[type='number']::placeholder,
body.theme-contrast .simple_form input[type='password']::placeholder,
body.theme-contrast .simple_form input[type='text']::placeholder,
body.theme-contrast .simple_form input[type='url']::placeholder,
body.theme-contrast .simple_form textarea::placeholder,
body.theme-contrast .dashboard__widgets a:not(.name-tag),
body.theme-contrast .flash-message.translation-prompt {
  color: var(--header-color);
}

body.theme-contrast .simple_form input[type='email']:hover,
body.theme-contrast .simple_form input[type='number']:hover,
body.theme-contrast .simple_form input[type='password']:hover,
body.theme-contrast .simple_form input[type='text']:hover,
body.theme-contrast .simple_form input[type='url']:hover,
body.theme-contrast .simple_form textarea:hover,
body.theme-contrast .simple_form input[type='email'],
body.theme-contrast .simple_form input[type='number'],
body.theme-contrast .simple_form input[type='password'],
body.theme-contrast .simple_form input[type='text'],
body.theme-contrast .simple_form input[type='url'],
body.theme-contrast .simple_form textarea,
body.theme-contrast .search__input {
  border-color: var(--header-color);
}

body.theme-contrast,
body.theme-contrast .account__display-name strong,
body.theme-contrast .status__display-name strong,
body.theme-contrast .reply-indicator__content,
body.theme-contrast .load-more,
body.theme-contrast .load-gap,
.status__content,
body.theme-contrast
  .public-layout
  .public-account-header__tabs__tabs
  .counter
  .counter-number,
body.theme-contrast
  .public-layout
  .public-account-bio
  .account__header__content,
body.theme-contrast .status-card__title,
body.theme-contrast .status-card__description,
body.theme-contrast .card__bar .display-name strong,
body.theme-contrast .card__bar .display-name span,
body.theme-contrast .follow-prompt h2,
body.theme-contrast .oauth-prompt h2,
body.theme-contrast .navigation-bar strong,
body.theme-contrast .navigation-bar a,
body.theme-contrast .account__header__tabs__name h1,
body.theme-contrast .account__header__tabs__name h1 small,
body.theme-contrast .account__header__bio .account__header__content,
body.theme-contrast .account__header__extra__links a,
body.theme-contrast .admin-wrapper .content h2,
body.theme-contrast .simple_form .input.with_label .label_input > label,
body.theme-contrast .simple_form input[type='email'],
body.theme-contrast .simple_form input[type='number'],
body.theme-contrast .simple_form input[type='password'],
body.theme-contrast .simple_form input[type='text'],
body.theme-contrast .simple_form input[type='url'],
body.theme-contrast .simple_form textarea,
body.theme-contrast .simple_form .hint,
body.theme-contrast .admin-wrapper .content .muted-hint,
body.theme-contrast .muted-hint,
body.theme-contrast .admin-wrapper .content > p,
body.theme-contrast
  .simple_form
  .input.with_floating_label
  .label_input
  > label,
body.theme-contrast .simple_form .check_boxes .checkbox label,
body.theme-contrast .simple_form .input.radio_buttons .radio label,
body.theme-contrast .filters .filter-subset a,
body.theme-contrast .filters .filter-subset a:hover,
body.theme-contrast .accounts-table__count,
body.theme-contrast .accounts-table__count small,
body.theme-contrast .account .account__display-name,
body.theme-contrast .detailed-status__display-name strong,
body.theme-contrast .detailed-status__display-name,
body.theme-contrast .public-layout .public-account-header__tabs__name h1,
body.theme-contrast .public-layout .public-account-header__tabs__name h1 small,
body.theme-contrast .account__header__content,
body.theme-contrast .directory__card__bar .display-name strong,
body.theme-contrast .directory__card__bar .display-name span {
  color: var(--text-color);
}

body.theme-contrast .status__display-name,
body.theme-contrast .notification__relative_time,
.status__relative-time,
body.theme-contrast
  .public-layout
  .public-account-header__tabs__tabs
  .counter
  .counter-label,
body.theme-contrast .account__header__content a,
body.theme-contrast
  .public-layout
  .public-account-bio
  .account__header__fields
  a,
body.theme-contrast .status-card,
body.theme-contrast .status__content__read-more-button,
body.theme-contrast .landing-page__short-description p a,
body.theme-contrast .reply-indicator__content a,
body.theme-contrast .rich-formatting a,
body.theme-contrast .rich-formatting li a,
body.theme-contrast .rich-formatting p a,
body.theme-contrast .status__content a,
body.theme-contrast .simple_form .hint a,
body.theme-contrast .pagination .current,
body.theme-contrast .pagination .gap,
body.theme-contrast .pagination .newer,
body.theme-contrast .pagination .older,
body.theme-contrast .pagination .page,
body.theme-contrast .pagination a,
body.theme-contrast .filters .filter-subset a.selected,
body.theme-contrast a.table-action-link,
body.theme-contrast button.table-action-link,
body.theme-contrast .detailed-status__meta,
body.theme-contrast .public-layout .public-account-header__extra__links,
body.theme-contrast .public-layout .public-account-header__extra__links a,
body.theme-contrast
  .public-layout
  .public-account-header__extra__links
  a
  strong {
  color: var(--link-color);
}

/* 角丸 */
body.theme-contrast .directory__tag > a,
body.theme-contrast .directory__tag > div,
body.theme-contrast .public-layout .public-account-bio,
body.theme-contrast
  .public-layout
  .public-account-bio
  body.theme-contrast
  .public-layout
  .account__section-headline,
body.theme-contrast .public-layout .account__section-headline,
body.theme-contrast .public-layout .public-account-header__image img,
body.theme-contrast .hero-widget__img,
body.theme-contrast .hero-widget__text,
body.theme-contrast .button,
body.theme-contrast .activity-stream .entry:last-child .detailed-status,
body.theme-contrast .activity-stream .entry:last-child .load-more,
body.theme-contrast .activity-stream .entry:last-child .status,
body.theme-contrast .hero-widget__img img,
body.theme-contrast .load-more:hover,
body.theme-contrast .load-gap:hover,
body.theme-contrast .public-layout .public-account-header__image,
body.theme-contrast .activity-stream .entry:first-child .detailed-status,
body.theme-contrast .activity-stream .entry:first-child .load-more,
body.theme-contrast .activity-stream .entry:first-child .status,
body.theme-contrast .activity-stream .entry:first-child .detailed-status,
body.theme-contrast .activity-stream .entry:first-child .load-more,
body.theme-contrast .activity-stream .entry:first-child .status,
body.theme-contrast .activity-stream--under-tabs {
  border-radius: 0;
}

/* シャドウ */
body.theme-contrast .h-feed,
body.theme-contrast .public-layout .public-account-bio,
body.theme-contrast .directory__tag,
body.theme-contrast .hero-widget,
body.theme-contrast .public-layout .public-account-header,
body.theme-contrast .columns-area__panels__main {
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
}

/* 非表示にするもの */
body.theme-contrast .public-layout .header,
body.theme-contrast .public-layout .footer,
body.theme-contrast .button.logo-button svg,
body.theme-contrast .account__section-headline a.active:before,
body.theme-contrast .account__section-headline button.active:before,
body.theme-contrast .notification__filter-bar a.active:before,
body.theme-contrast .notification__filter-bar button.active:before {
  display: none;
}

body.theme-contrast .batch-table__row {
  border: none;
}

body.theme-contrast .status,
body.theme-contrast .account__header__fields dl,
body.theme-contrast .account__header__fields,
body.theme-contrast .account__header__bar,
body.theme-contrast .tabs-bar__link,
body.theme-contrast .table > thead > tr > th,
body.theme-contrast .detailed-status__action-bar,
body.theme-contrast .load-gap {
  border-bottom: none;
}

body.theme-contrast .public-layout .public-account-header__tabs__tabs .counter {
  border-right: none;
}

body.theme-contrast .account__header__bio .account__header__fields,
body.theme-contrast .navigation-panel hr,
body.theme-contrast
  .public-layout
  .public-account-header__extra
  .public-account-bio
  .account__header__fields,
body.theme-contrast .detailed-status__action-bar {
  border-top: none;
}

body.theme-contrast .activity-stream {
  box-shadow: none;
}

body.theme-contrast.modal-layout {
  background: none;
}

body.theme-contrast .public-layout .public-account-header__tabs__name h1 {
  text-shadow: none;
}