Financier Forums

For those using Stylish and want or are missing nYNAB's colors:

/* Loader Screen */

.loader {
    background: -webkit-linear-gradient(#2FADBF, #207F9C);
    background: linear-gradient(#2FADBF, #207F9C);
}
/* Month Selector Bar */

.month-select__month,
.month-select__control {
    background-color: #003540;
}
.month-select__month:hover,
.month-select__year:hover,
.month-select__control:hover {
    background-color: #34889b;
}
.month-select__year {
    background-color: #00596F;
}
.month-select__month--selected, .month-select__month--selected:hover {
    background-color: #00596F;
}
.month-select__month--selected:hover {
    background-color: #34889b;
}
/* Budget Overview: Change bg color, font color  */
.month-overview__month-overview {
   background-color: #003540;
}   
.month-overview__cell-head {
    background-color: #00596f;
    color: #FFF;
}
/* Color change of Positive budget */
.month-overview__month-total {
    color: #00A52F;
}
/* -------------------------- */

/* Color change of Negative values */
.budget__month-row--negative
{
background-color: #c82333;
}
.month-overview__month-total--negative {
    color: #c82333;
}

/* -------------------------- */

/* Budget Master Category Row  */
.month-body__row--master {
    background-color: #E6F5FA;
}
/* -------------------------- */
/* Left Sidebar */

.app-view__sidebar {
    background: -webkit-linear-gradient(#2FADBF, #207F9C);
    background: linear-gradient(#2FADBF, #207F9C);
}
.app-view__title {
    background: #2FADBF;
}
.app-view__sidebar-footer-button {
    background-color: #207F9C;
}
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
    background-color: #00596f;
}
.app-view__sidebar-footer--logged-in.drop-enabled .app-view__sidebar-footer-button,
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
    background-color: #00596f;
}
/* Budget Selection Screen */

.budgets-header {
    background-color: #003540;
}
.budgets__title {
    color: #003540;
    border-bottom: 1px solid #003540
}
.budgets__budget {
    transition: transform .25s ease;
    border: 1px solid #003540;
}
.budgets__budget--loading:after {
    background-color: #003540;           
}
.fa-cog:hover, .fa-gear:hover, .fa-cog:after, .fa-gear:after {
    color: #003540;
}
/*.fa-cog:before, .fa-gear:before {
    color: #003c69;
}
*/
/* Budget Screen Buttons and Pop-ups */

.button--primary {
    background-color: #009BC4;
}
.button--primary:hover {
    background-color: #003540;
}
.form__textarea:focus {
    border-color: #003540;
}
.budget__month-cell--input input {
    border: 1px solid #003540;
}
.budget__month-cell--input input:focus,
.budget__month-cell--input input:hover {
    border: 1px solid #003c69;
}
/* Account Manifest */
.account__tr--overview {
    background-color: #003540;
}   
.account__th {
    background-color: #00596F;
}
.account__add-button {
    color: #003c69;
}
.account__editing-button--save {
    background-color: #009BC4
}
.account__editing-button--save:hover {
    background-color: #003540
}
.cleared--true {
    background-color: #003540;
}
.account__tr--stripe {
    background: #f4f7f6;
}
.virtual-list .vs-repeat-after-content, .virtual-list .vs-repeat-before-content {
    background: repeating-linear-gradient(180deg,#fff,#fff 30px,#F4F7F6 0,#F4F7F6 60px);
}
.virtual-list.odd-total .vs-repeat-after-content {
    background: repeating-linear-gradient(180deg,#F4F7F6,#F4F7F6 30px,#fff 0,#fff 60px);
}
.account__balance-value {
    color: #00A52F;
}

.account__balance-value--negative {
    color: #c82333;
}
/* Reconcile Pop-up */
@keyframes fade-to-primary {
  from {
    background: white;
  }

  to {
    background: #2FADBF;
  }
}

@keyframes fade-to-primary-caret {
  from {
    border-bottom-color: white;
  }

  to {
    border-bottom-color: #003540;
  }
}

/* Modal Popup */

.ngdialog.ngdialog-theme-default .ngdialog-content {
    border: 5px solid #003540;
}
.modal footer button.primary {
    background-color: #003540;
}
.modal footer button.primary:disabled {
    background-color: #003540;
}
.modal footer button.primary:hover {
    background-color: #003c69;
}
.modal form input:focus,
.modal form select:focus {
    border-color: #003540;
}

/* Error Background */
.e404 {
    background-color: #003c69;
}

Thanks

Thanks  :)

My take on YNAB4.

Apologies for hijacking the thread and Frankenstein-ish 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 {

}

cracksys

Nice Job !!!

I added the following to my theme to get nicer scrollbars (I think only works on webkit browsers like Chrome):

::-webkit-scrollbar-track
{
border-radius: 6px;
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
background-color: #008bb3;

}

Quote from: jat255 on August 03, 2017, 04:19:08 PM
I added the following to my theme to get nicer scrollbars (I think only works on webkit browsers like Chrome):

Nicely done, they do look better.