Usar CSS personalitzat amb Mastodon

Mastodon té una opció per aplicar CSS personalitzat des del seu panell d’administració. Malauradament, no he pogut trobar cap exemple de com hauria de ser aquest CSS, fins i tot després de preguntar als Mastodon Fourms. Vaig descobrir com de difícil pot ser la modificació del CSS de Mastodon. No vaig poder esbrinar per què els canvis en l’element body no afectarien res, i em van informar que Mastodon dibuixa un component amb la classe .ui. A través d’un treball acurat amb les eines de desenvolupament del Firefox, he pogut esbrinar quins selectors del CSS controlaven què, i he intentat construir una llista per començar amb la creació de temes a Mastodon a través d’un full d’estil personalitzat.

Aquí hi ha una taula de tots els selectors CSS importants que he ajustat per al meu tema personalitzat. Hi ha tres disposicions principals a Mastodon: La pàgina d’aterratge (per a usuaris no registrats), la interfície d’usuari (quan s’ha iniciat la sessió) i la pàgina de perfil (pàgina pública per a un usuari). Poques classes CSS es comparteixen a través de pàgines.

CSS Selector Element it Styles Page
.ui Primary content box for logged in user UI
.search__input Search Input Box UI
.search-results Search Results Box UI
.search-results__header Header for Search Results UI
.search-results__section h5 Section Titles for Search Results UI
.account__section-headline Bar under profile with Toots / Replies / Media UI
.status-link Links within statuses UI
.account__header > div Area for tinting User Profiles UI
.account__header .account__header__fields dt User profile keys UI
.account__header .account__header__fields dd User profile values UI
.status__content Text content within individual status UI
.reply-indicator__content Text for reply indication content UI
.column Individual column (opacity useful for transparency) UI / Landing
.column-header Header for Column UI
.column-header__button Settings/Hamburger Button on Columns UI
.column-back-button Back Button / Timeline heading on Landing UI / Landing
.hero-widget__text Can’t Remember UI
.drawer__inner Top half of the composition column UI
.drawer__inner__mastodon Bottom region with Mastodon logo UI
.drawer__inner__mastodon img Mastodon Send logo image UI
.drawer__header Top Left Control Box UI
article Element for most statuses UI
.status-public Background for public statues (default theme colors public/private the same) UI
.status.status-direct:not(.read) Unread direct messages UI
.column > .scrollable Bar under profile with Toots / Follows / Followers UI
.column-link Links in Getting Started Menu UI
.column-link:hover Hover in Getting Started Menu UI
.column-subheading Getting Started Menu Section Headings UI
.column-header__back-button Local timeline Back Button UI
.status-reply Statuses that are Replies UI
.detailed-status Focused Status Opened in Side Column UI
.detailed-status__action-bar Reply / Boost / Star Bar under Detailed Status UI
.getting-started Getting Started Box UI
.landing-page Primary content box for main site Landing Page
.landing-page__information Center/Lower Info Boxes Landing Page
.landing-page__forms Login/Register Box Landing Page
.landing-page__call-to-action User/Status count box Landing Page
.public-layout Primary content box for profiles Profile Page
.activity-stream .entry Background for statuses on public profile Profile Page
.public-layout .public-account-bio Box under User Profile fields Profile Page
.public-layout .header Header above profile Profile Page
.public-layout .footer Footer below toots Profile Page
.public-account-bio .account__header__fields dt User profile keys Profile Page
.public-account-bio .account__header__fields dd User profile values Profile Page

Aquesta llista pot no ser exhaustiva, ja que he descobert alguns d’aquests selectors al mateix temps que trobo llacunes en el meu tema. Els diferents patrons de color poden requerir selectors addicionals, però això hauria de ser un bon punt de partida.

Logos

La manera més fàcil de personalitzar el logotip de Mastodon sota el quadre de composició és establir el valor de display de l’etiqueta img a none i després afegir un logotip personalitzat com a imatge de fons. Si s’estableix el background-size com a cover, la imatge es reduirà i s’expandirà com el logotip original.

.drawer__inner__mastodon {
  background-image: url("https://example.com/images/logo.png");
  background-size: contain;
  background-color: #0f2a54;
  opacity: 0.95;
}

.drawer__inner__mastodon img {
  display: none;
}

Temes clars

Vaig començar breument pel camí d’un tema clar, però després vaig decidir un palet més fosc. Per a un tema clar, el color del text per a la majoria dels elements s’han de canviar de blanc a negre amb quelcom com el següent:

.ui p, .landing-page p, .public-layout p {
  color: black !important;
}
.status__content, .reply-indicator__content {
  color: black;
}

Marges del perfil públic

Per alguna raó, la disposició de la pàgina pública es desplaça 10 píxels des de la part superior. Si afegiu una imatge de fons personalitzada, obtindreu una barra negra. No hi ha cap element sobre el quadre superior, excepte l’etiqueta html en si mateixa, de manera que intentar solucionar-ho afectaria les altres dues disposicions. Em va resultar més fàcil ajustar els marges per a l’element .public-layout i el quadrat dels radis per a les capçaleres i els peus.

.public-layout {
  margin-top: -10px;
}
.public-layout .header {
  background-color: #243d63;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.public-layout .footer {
  background-color: #243d63;
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Aquestes modificacions només són necessàries si s’utilitza una imatge de fons, i es poden evitar utilitzant només un color de fons.

Perfil del compte

Veure el perfil d’un usuari és una altra raresa pel que fa al tematisme. Perquè la fotografia de fons en el perfil d’un usuari tingui el tema de color correcte, heu d’aplicar un estil a .account.header > div i utilitzar la notació rgba() perquè el color de fons acolorirà tota la regió contenidora, inclosos els camps de capçalera del compte. El valor final és l’opacitat que afecta el tint aplicat a la imatge de fons del perfil que esteu veient.

.account__header > div {
  background: rgba(27, 42, 69, 0.9);
}

Dissenyant el tema

El fons s’ha d’establir sobre els tres tipus de pàgina. Això es pot dividir si voleu diferents tipus de fons per a les diferents parts del lloc, però si voleu alguna cosa uniforme, el codi es veurà com el següent:

.ui, .landing-page, .public-layout {
  background-image: url("https://cdn.example.com/images/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Moltes de les classes llistades a la taula de dalt tindran un color de fons simple o un color de text. És millor triar primer un palet de color i després assignar elements en grups a aquests colors, com ara:

.account__header .account__header__fields dd,
.public-account-bio .account__header__fields dd,
.drawer__inner, .drawer__inner__mastodon {
  background-color: #0f2a54;
}

Tema Sapphire Ocean

Aquest és el tema Sapphire Ocean v1.0 que vaig crear per a la meva instància personal, Hitchhiker.Social. El codi CSS és de domini públic, i la imatge de fons està disponible sota la llicència Creative Commons BY-NC-SA. Copieu i allotjau el fons si voleu utilitzar aquest tema. Es pot emmagatzemar fàcilment el fons a Mastodon permanentment mantenint-lo en un tut ancorat.

Captures de pantalla

mastodon-ui-screenshot.jpg mastodon-profile-screenshot.jpg

Paleta de colors

color-pallet.png

Codi font

.search__input {
  background-color: #343f51;
}

.search-results {
  background-color: #182a3c;
}

.landing-page__forms, .public-layout .header,
.public-layout .footer {
     background-color:#243d63;
}

.landing-page__call-to-action, .detailed-status {
  background-color:#213759;
}

.public-layout {
  margin-top: -10px;
}

.public-layout .header {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.public-layout .footer {
  padding: 15px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.ui, .landing-page, .public-layout {
  background-image: url("https://example.org/background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.account__section-headline, .column-header__back-button {
  background-color: #1b2a45 !important;
}

.status-link {
  color: #73a9d1 !important;
}

.account__header > div {
  background: rgba(27, 42, 69, 0.9);
}

.account__header .account__header__fields dt, .public-account-bio .account__header__fields dt,
.column-header, .column-header__button, .column-back-button, .hero-widget__text, .status.status-direct:not(.read) {
  background-color: #08152b;
}

.account__header .account__header__fields dd,
.public-account-bio .account__header__fields dd,
.drawer__inner, .drawer__inner__mastodon {
  background-color: #0f2a54;
}


.column {
  background-color: transparent;
  opacity: 0.95;
}

article, .status-public, .activity-stream .entry, .column > .scrollable,
  .drawer__header, .landing-page__information {
  background-color: #0b1d3a;
}

.column-link {
  color:#8ba9c7;
  background-color:#1e2a3e;
}

.column-link:hover {
  background-color: #21314b;
}

.status-reply {
  background-color: #071a3a;
}

.detailed-status__action-bar {
  background-color:#1c2d49;
}

.getting-started, .public-layout .public-account-bio {
  background-color: #002b55;
}

.column-subheading, .search-results__header, .search-results__section h5 {
  background-color: #002549;
  color: #7398bc;
}

.drawer__inner, .drawer__inner__mastodon {
  opacity: 0.95;
}

.drawer__inner__mastodon {
  background-image: url("https://example.org/logo.png");
  background-size: contain;
}

.drawer__inner__mastodon img {
   display: none;
}

Conclusió

He trobat que és més fàcil desplegar Mastodon utilitzant els contenidors oficials Docker publicats pels desenvolupadors de Mastodon. Molts dels tutorials de personalització que he trobat impliquen la construcció de contenidors personalitzats a partir d’aquestes imatges base i la injecció dels actius necessaris. L’opció CSS personalitzat que ara està disponible a la consola d’administració sembla ser una opció molt més neta que modificar l’aplicació base. És una eina poderosa per crear un aspecte i una sensació personalitzada per Mastodon. Espero que aquesta guia d’aprenentatge proporcioni un punt de partida decent per als que busquen personalitzar les instàncies de Mastodon que administren. Estic segur que hi ha maneres de simplificar el nombre de classes que necessiten ser temàtiques, i espero amb interès veure quins altres temes es plantegen.

Publicació original: https://battlepenguin.com/tech/using-custom-css-with-mastodon/