Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Thin stat bars for Fallen London

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.

/* ==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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment