CSS/HTML Re-Styling

[Billy_McSkintos]

I have begun tweaking a little of the style to adjust some font sizing and a few other things to gain a little real estate and minimize scrolling. I thought I would share the "code" in case anyone else finds it useful or has done something similar. Please consider that I am learning as I go.

Sylish (Chrome): https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en


Edited with comments explaining changes:

Code Select Expand

/* Reduce size of fonts and spacing in month header */
.month-select__control,
.month-select__month,
.month-select__year {
    font-size: 0.8em;
}
.month-overview__month-total {
    font-size: 1.2em;
    margin-top: 0em;
    cursor: pointer;
}
.month-overview__month-text {
    font-size: 1em;
}
.month-overview__month-list {
    font-size: .65em;
}
.month-overview__month-total-subtext {
    font-size: .6em;
}
/* -------------------------- */


/* Reduce Size of Accounts Font and spacing */
.app-view__account {
    font-size: .7em;
    line-height: 1.5rem;
}
.account__balance-value {
    font-size: 1em;
}
/* -------------------------- */


/* Budget Overview: Change bg color, font color and size */
.month-overview__cell-head {
    font-weight: 400;
    font-size: .8em;
    background-color: #eff7ea;
    color: #3E3E3E;
}
/* -------------------------- */


/* Change Section Icons */
.fa-credit-card:before {
    content: "\f19c";
}
.fa-pie-chart:before {
    content: "\F201";
}
/* -------------------------- */


/* Change Sticky Note and Right Arrow icons */
.fa-sticky-note-o:before {
    content: "\f0f6";
    font-size: 0.9em;
}
.fa-arrow-right:before {
    content: "\F101";
}
/* -------------------------- */


.app-view__link {
    line-height: 2.2rem;
}
.app-view__link aside {
    line-height: 2.2rem;
}
/* -------------------------- */


/* Smaller Cleared 'C' on manifest */
.cleared
{
padding: 1px 1px 0px 0px;
font-size: 11px;
}
/* -------------------------- */


[asromzek]

I just installed stylish this morning, and was going to start playing with it. Off to a good start.

[Billy_McSkintos]

Fantastic, would be great to see the output of those with some true chops...

[asromzek]

Add this for a lightened On Budget/Off Budget title background...

Code Select Expand

.app-view__accounts-title
{
background: #87bc69;
padding: 8px;
}
.app-view__accounts-list-border
{
margin: 0px;
padding: 0px;
}
.app-view__add-account
{
margin: 8px 0px 0px 8px;   
}

[Billy_McSkintos]

Yep that one makes sense.

[asromzek]

Add this for a little more padding within the negative category value bubble...

Edit: Softened red color.

Code Select Expand

.budget__month-row--negative
{
padding: 2px 6px;
background-color: #ff4c4c;}

[asromzek]

Smaller "C" and adjusted spacing for Win7/Chrome.

Code Select Expand

.cleared
{
padding: 1px 1px 0px 0px;
font-size: 11px;
}

[Alex]

These are all great.

I'll have to take an evening and look at getting a lot of these implemented.

[Billy_McSkintos]

Smaller "C" and adjusted spacing for Win7/Chrome.

I like that one too

[Billy_McSkintos]

@asromzek Any more?

[cracksys]

@Billy_McSkintos @asromzek

I'm trying to reduce the font size for balance value in budget screen (the one in red blob).

But I couldn't find the right div to hit. Little help?

[Billy_McSkintos]

@Billy_McSkintos @asromzek

I'm trying to reduce the font size for balance value in budget screen (the one in red blob).

But I couldn't find the right div to hit. Little help?

This is just for negative values (red blob). Is this what you need? (I am no expert) but I think

.budget__month-cell--display
groups the outgoing and balance together.

Code Select Expand


.budget__month-row--negative {
    font-size: 1.0em;
}


[Billy_McSkintos]

I think I have found it now:

Code Select Expand


.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}

[cracksys]

I think I have found it now:

Code Select Expand


.budget__month-cell--display.budget__month-end {
    font-size: 0.5em;
}

Thanks! Definitely what I've been looking for  parrot