Thin stat bars for Fallen London

Fallen London - Thin Stat Bars.md

Userstyle: Fallen London - Thin Stat Bars

Makes the stat bars in the sidebar way thinner and overlays the text on top of the bars, making them compact and way easier to navigate through. It also recolours the new knowledge-based stats to have golden bars instead of blue.

Installation

If you have a userstyle manager like Stylus installed you should be able to just click here: Install This link provides auto-updating.

fallen-lond-thin-stat-bars.user.css

/* ==UserStyle==
@name           Fallen London - Thin Stat Bars
@description    Makes the stat bars on the side much thinner and overlays the text over the bars.
@namespace      shadenexus.com
@version        1.1.1
@homepageURL    https://gist.github.com/GwyndolynMarchant/a88316d1e8afcc811391619ed85a3b88
@author         Gwyndolyn Marchant <gwyn@shadenexus.com> (https://gist.github.com/GwyndolynMarchant)
==/UserStyle== */

@-moz-document domain("fallenlondon.com") {
    .sidebar > ul.items:nth-child(4) > .item {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .sidebar > ul.items:nth-child(4) > .item > .icon img {
        height: 1.6em;
        width: auto;
    }

    .sidebar > ul.items:nth-child(4) > .item > .item__desc > .progress-bar {
        position: absolute;
        top: 4px;
        height: 1.6em;
        z-index: -99;
        width: 88%;
    }

    .sidebar > ul.items:nth-child(4) > .item > .item__desc > .progress-bar > .progress-bar__stripe {
        height: 100%;
    }

    .sidebar > ul.items:nth-child(4) > .item > .item__desc > span {
          text-shadow:
       -1px -1px 0 #000,  
        1px -1px 0 #000,
        -1px 1px 0 #000,
         1px 1px 0 #000;
        font-size: 0.9em;
        vertical-align: middle;
    }

    .sidebar > ul.items:nth-child(4) > .item > .item__desc > .item__name {
        padding-left: 5px;
        display: inline-block;
        max-width: 126px;   
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* COLOR CHANGES */
    
    .sidebar > ul.items:nth-child(4) > .item .progress-bar__stripe{
        background-color: rgb(87, 125, 128);
        border-color: rgb(48, 69, 71);
    }
    
    .sidebar > ul.items:nth-child(4) > .item > .item__desc > .progress-bar > .progress-bar__stripe--menace {
        background-color:rgb(124,16,16);
        border-color: rgb(51,7,7);
    }
    
    .sidebar > ul.items:nth-child(4) > .item:nth-child(n+16)  .progress-bar__stripe {
        background-color: rgb(119,110,65);
        border-color: rgb(59,55,33);
    }
}