Basic GUI improvements for Trello boards

better_trello_gui.user.js

// ==UserScript==
// @name         Basic GUI improvements for Trello boards
// @description  This add basic GUI improvements for Trello boards, like display cards ID.
// @namespace    https://c238.com.ar/
// @updateURL    https://gist.github.com/Lukas238/bf95a626ceb97346034e48851456ccec/raw/better_trello_gui.user.js
// @downloadURL  https://gist.github.com/Lukas238/bf95a626ceb97346034e48851456ccec/raw/better_trello_gui.user.js
// @version      0.2
// @author       Lucas Dasso <[email protected]>
// @match        http*://trello.com/b/*
// @icon         https://www.google.com/s2/favicons?domain=trello.com
// @grant        GM_addStyle
// @require      http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js
// ==/UserScript==

(function() {
    'use strict';

    /*
     * Show card ID
     */
    var css_trelloCardID =`
        .card-short-id {
            display: inline !important;
            border: 1px solid #d9d9d9;
            border-bottom-color: #d3d3d3;
            border-radius: 2px;
            color: #737373;
            cursor: default;
            float: left;
            font-size: 11px;
            line-height: 16px;
            height: 16px;
            margin-right: 4px;
            padding: 0 4px;
            position: relative;
            text-decoration: none;
        }
    `;
    GM_addStyle(css_trelloCardID);

    /*
     * Add better custom fields styles.
     *
     * Needs "Custom Fields" Powerup by Trello Inc.
     */
    var css_customFields = `
        .custom-field-front-badges {
            cursor: default;
            display: block;
        }
        .custom-field-front-badges .badge{
            display: block;
            margin: 0;
            padding: 0;
        }
        .custom-field-front-badges .badge::before {
            -moz-osx-font-smoothing: grayscale;
            font-family: trellicons;
            font-style: normal;
            font-weight: 400;
            line-height: 1;
            text-align: center;
            content: "\\e90f";
            color: #6b778c;
            font-size: 16px;
            line-height: 20px;
        }
        .custom-field-front-badges .badge:nth-child(1)::before{
            color: #2f8623;
        }
        .custom-field-front-badges .badge:nth-child(2)::before{
            color: #77761d;
        }
        .custom-field-front-badges .badge:nth-child(3)::before{
            color: #9d1e1e;
        }
    `;
    GM_addStyle(css_customFields);

})();