I have added the Stylish (https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en) styles to userstyles.org (https://userstyles.org/styles/browse?search_terms=financier) so that they can be found and (sometimes) show up in the library tab of the plugin.
- Smaller Financier (https://userstyles.org/styles/155953/financier-smaller) - shrinks some fonts and spacing
- Blue Financier (https://userstyles.org/styles/155988/financier-blue) - dark blue theme
- nYNABish (https://userstyles.org/styles/155955/financier-nynabish) - theme based on nYNAB
@cracksys You created an excellent take on YNAB4 style, but it has elements that cannot be uploaded.
For others interested in the YNAB4 style, here is his code:
@import url('https://fonts.googleapis.com/css?family=Quicksand:500|Lato|Clear+Sans+Pro|Nunito+Sans');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&text=1234567890');
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/l/font?kit=56hreGcsKW_5tYMq1kGVlI1gxl0b5o72Zj2IMmSm8lM&skey=62c1cbfccc78b4b2&v=v14) format('woff2');
}
body, button, html, input, select, textarea {
font-family: 'Open Sans','Quicksand','Nunito Sans','Lato';
}
.app-view__sidebar {
background: -webkit-linear-gradient(top, rgba(42,148,195,1) 0%, rgba(46,152,200,1) 100%);
background: linear-gradient(to bottom, rgba(42,148,195,1) 0%, rgba(46,152,200,1) 100%);
}
.app-view__links {
background: #1A6F9D;
border-style: solid;
border-width:1px;
border-color: #2B95C4;
border-radius: 8px;
margin: 5px 5px 5px 5px;
}
.app-view__accounts-list-border {
background: #1A6F9D;
border-style: solid;
border-width:1px;
border-color: #2B95C4;
border-radius: 8px;
margin: 5px 5px 5px 5px;
}
.account__tr--stripe {
background: #EDF6FB;
}
.account__th {
background: -webkit-linear-gradient(top, rgba(103,114,120,1) 0%, rgba(77,90,97,1) 100%);
background: linear-gradient(to bottom, rgba(103,114,120,1) 0%, rgba(77,90,97,1) 100%);
}
.account__tbody {
background: #FFFFFF;
}
.account__add-button {
color: #000000;
}
.app-view__title {
background: rgba(42,148,195,1);
color: #fff;
}
.app-view__sidebar-footer {
background-color: rgba(46,152,200,1);
}
.sync-status {
margin: 5px;
}
.app-view__sidebar-footer-button {
background-color: rgba(46,152,200,1);
}
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
background-color: #00596f;
}
.budget__thead {
background-color: #DBDBDB;
}
.month-overview__month-overview--old {
background-color: #5C666D;
}
.month-select__control {
background: -webkit-linear-gradient(top, #D6D6D6, #C7C8C7);
background: linear-gradient(to bottom, #D6D6D6, #C7C8C7);
border-width:1px;
border-style:outset;
}
.month-select__month {
background: #49575E;
}
.month-select__month:hover {
background: #49575E;
opacity: 0.7;
}
.month-select__year {
background-color: #2B3335;
}
.month-select__month:hover,
.month-select__year:hover,
.month-select__control:hover {
opacity: 0.8;
}
.month-select__month--selected {
background-color: #0082CB;
}
.month-overview__cell-head {
background: #EEF5E7;
margin: 0px 0px 4px 0px;
}
.month-overview__month-overview {
border-style: solid;
border-width:1px;
border-color: #2D3236;
border-radius: 5px;
margin: 4px 2px 4px 2px;
}
.budget__categories-label {
color: #000000;
}
.budget__master-category-label {
background-color: #E6F4FB;
border-width:1px;
border-color:#2DB6E7;
border-top-style: dotted;
border-bottom-style: dotted;
}
.budget__month-cell--input input {
border: 1px solid rgba(58, 186, 232, 0.75);
}
.budget__category-label {
font-size: 0.9em;
}
.account__td {
font-size: 0.925em;
}
.month-overview__month-total {
color: #ADCD5C;
font-weight: bold;
}
.month-overview__month-total--negative {
color: #ff4c4c;
font-weight: bold;
}
.budget__cell-input,
.budget__month-cell--display {
}
Disclaimer: I am nothing more than a tinkerer so my code is likely messy and malformed.
This is awesome. :parrot:
Love these, personally using both the Blue and Smaller Financier themes!