Millores per Mastodont fent servir Tampermonkey

Millores per Mastodont fent servir TampermonkeyDt Nov 08, 2022 2:38 amAutor: Wecoc

Aquí hi penjaré codis lliures d'ús que poden fer servei als usuaris de Mastodont.
Per utilitzar-los, només cal instal·lar-se Tampermonkey (aplicació gratuïta d'inserció de codis per Firefox o Chrome) o bé l'alternativa Greasemonkey, clicar la icona que sortirà a mà dreta, crear un codi nou i copiar-hi el contingut.

Glossari

- Modificacions de CSS
- Mur avançat ample [Desfasat]
- Ela geminada amb lligadura
- Caixa d'edició fosca
- Traduir tuts mitjançant Google Traductor [Desfasat]

Modificacions de CSS

Codi:

// ==UserScript==
// @name         Millores Mastodont
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Codi que aplica alguns canvis en el format de Mastodont
// @author       Wecoc
// @match        https://mastodont.cat/*
// @match        https://kfem.cat/*
// @match        https://xarxa.cloud/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mastodont.cat
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// @grant        GM_addStyle
// ==/UserScript==

$( document ).ready(function() {
    'use strict';

    // Afegir els codis personalitzats aquí

});

On diu "Afegir els codis personalitzats aquí" hi copieu o creeu els canvis de CSS que convinguin. A continuació se n'inclouen alguns.

Mur avançat ample

Nota: Aquesta funció ja existeix per defecte a partir de la versió 4.0 de Mastodon. Podeu llegir-ne més detalls aquí: Mastodon v4.0.0rc1 Changelog

Mur avançat ample :

Ela geminada amb lligadura

Canvi simple de CSS, es pot incrustar al codi d'exemple anterior. Per tal de tenir una ela geminada «L·L» que es mostri correctament, n'hi ha prou fent servir una font que inclogui el glif i la lligadura corresponents, tal com fa Twitter amb TwitterChirp. Mastodon per defecte fa servir Roboto, que té el glif però no inclou la lligadura, per tant la manera més fàcil és substituir-la per una font similar més completa.

Codi:

   // Ela geminada amb lligadura : Font "Open Sans"
    GM_addStyle("@font-face { font-family: 'Open Sans'; src: url(https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2'); } body { font-family: 'Open Sans', sans-serif; }");

Caixa d'edició fosca

Canvi simple de CSS, es pot incrustar al codi d'exemple anterior. Adapta al tema fosc la caixa de creació i edició de tuts i totes les finestres associades.

Imatges :

Codi:

    // CSS: Versió fosca de la caixa de tuts i finestres associades ("Compose form")
    GM_addStyle(".compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input, .compose-form .compose-form__modifiers { background: #282c37; color: #fff; } \
.autosuggest-textarea__textarea::placeholder { color: #838fac !important; } \
.compose-form .autosuggest-textarea__suggestions, .compose-form .compose-form__buttons-wrapper  { background: #313543; color: #fff; }  \
.compose-form .autosuggest-account .display-name__account { color: #9697ff; }  \
.compose-form .autosuggest-textarea__suggestions__item.selected, .compose-form .autosuggest-textarea__suggestions__item:active, \
.compose-form .autosuggest-textarea__suggestions__item:focus, .compose-form .autosuggest-textarea__suggestions__item:hover { background: #51529a; }  \
.compose-form .autosuggest-textarea__textarea::placeholder, .compose-form .icon-button, .compose-form .spoiler-input__input::placeholder, \
.compose-form__poll-wrapper .button.button-secondary, .language-dropdown__dropdown__results__item__common-name, .report-dialog-modal__textarea::placeholder, \
.text-icon-button, .text-icon-button.active { color: #dde3ec; } \
.compose-form .icon-button:active, .compose-form .icon-button:focus, .compose-form .icon-button:hover, .compose-form .text-icon-button:active, \
.compose-form .text-icon-button:focus, .compose-form .text-icon-button:hover { color: #fff; background: #444b5d; } \
.character-counter { color: #a2a9bc; } .emoji-picker-dropdown__menu, .emoji-mart-bar, .emoji-mart-search, .emoji-mart-scroll { background: #282c37; } \
.emoji-mart { color: #fff; } .emoji-mart-bar:first-child { background: #313543; } .emoji-mart-anchors { color: #a2a9bc; } .emoji-mart-anchors svg { fill: #fff; } \
.emoji-mart-anchor-icon:hover { filter: opacity(0.5); } .emoji-mart-bar { border: none; } .emoji-mart-search input { color: #fff; background: #393f4e; border: none; } \
.emoji-mart-search input::placeholder { color: #838fac; } .emoji-mart-category-label span { background: #313543; } \
.emoji-picker-dropdown__modifiers__menu { background: #1b1e25; } .emoji-picker-dropdown__modifiers__menu button:hover { background: #42485a; } \
.emoji-mart-category .emoji-mart-emoji:hover:before { background-color: #42485a; border-radius: 8px; } \
.compose-form__poll-wrapper, .compose-form__poll-wrapper .poll__footer { border: none; } .privacy-dropdown__dropdown { background: #282c37; } \
.privacy-dropdown__option, .privacy-dropdown__option__content { color: #a2a9bc; } .privacy-dropdown__option__content strong { color: #fff; } \
.language-dropdown__dropdown__results__item { color: #fff; } .privacy-dropdown.active .privacy-dropdown__value { background: #2b3140; } \
.privacy-dropdown__option.active, .privacy-dropdown__option:hover, .language-dropdown__dropdown__results__item:active, .language-dropdown__dropdown__results__item:focus, \
.language-dropdown__dropdown__results__item:hover, .language-dropdown__dropdown__results__item.active  { background: #51529a; } \
.privacy-dropdown.active .privacy-dropdown__value.active { background: #5a5bac; }");