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.

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

Paleta de colors

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/