yep, that looks right.
So keeping blue for positive and adding red for negatives the additional lines are as below.
}
.account__balance-value {
color: #00fdff;
}
.account__balance-value--negative {
color: #ff4c4c; And my full adaptation of your code for a Blue Theme, increasing font size slightly in the Accounts register, replacing all green font and retaining red negatives is:
/* Loader Screen */
.loader {
background: -webkit-linear-gradient(#003c69, #4b7397);
background: linear-gradient(#003c69, #4b7397);
}
/* Month Selector Bar */
.month-select__month,
.month-select__control {
background-color: #134d77;
}
.month-select__month:hover,
.month-select__year:hover,
.month-select__control:hover {
background-color: #003c69;
}
.month-select__year {
background-color: #003c69;
}
.month-select__month--selected,
.month-select__month--selected:hover {
background-color: #4b7397;
}
.month-select__month--selected:hover {
background-color: #003c69;
}
/* Budget Overview: Change bg color, font color */
.month-overview__cell-head {
background-color: #e3ecf2;
color: #3E3E3E;
}
.month-overview__month-total {
color: #00fdff;
}
.month-overview__month-total--negative {
color: #ff4c4c
}
/* -------------------------- */
/* Left Sidebar */
.app-view__sidebar {
background: -webkit-linear-gradient(#003c69, #4b7397);
background: linear-gradient(#003c69, #4b7397);
}
.app-view__title {
background: #003c69;
}
.app-view__sidebar-footer-button {
background-color: #4b7397;
}
.app-view__sidebar-footer--logged-in:hover .app-view__sidebar-footer-button {
background-color: #003c69;
}
.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: #003c69;
}
/* Budget Selection Screen */
.budgets-header {
background-color: #4b7397;
}
.budgets__title {
color: #4b7397;
border-bottom: 1px solid #4b7397
}
.budgets__budget {
transition: transform .25s ease;
border: 1px solid #4b7397;
}
.budgets__budget--loading:after {
background-color: #4b7397;
}
.fa-cog:hover,
.fa-gear:hover {
color: #4b7397;
}
/* Budget Screen Buttons and Pop-ups */
.button--primary {
background-color: #4b7397;
}
.button--primary:hover {
background-color: #003c69;
}
.form__textarea:focus {
border-color: #4b7397;
}
.budget__month-cell--input input {
border: 1px solid #4b7397;
}
.budget__month-cell--input input:focus,
.budget__month-cell--input input:hover {
border: 1px solid #003c69;
}
/* Account Manifest */
.account__th {
background-color: #4b7397;
}
.account__add-button {
color: #003c69;
}
.account__editing-button--save {
background-color: #4b7397
}
.account__editing-button--save:hover {
background-color: #003c69
}
.cleared--true {
background-color: #4b7397;
}
.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);
}
.account__balance-value {
color: #00fdff;
}
.account__balance-value--negative {
color: #ff4c4c;
/* Modal Popup */
}
.ngdialog.ngdialog-theme-default .ngdialog-content {
border: 5px solid #4b7397;
}
.modal footer button.primary {
background-color: #4b7397;
}
.modal footer button.primary:hover {
background-color: #003c69;
}
.modal form input:focus,
.modal form select:focus {
border-color: #4b7397;
}
/* Reconcilation Popup */
@keyframes fade-to-primary {
from {
background: white;
}
to {
background: #4b7397;
}
}
@keyframes fade-to-primary-caret {
from {
border-bottom-color: white;
}
to {
border-bottom-color: #4b7397;
}
/* Reduce Font sizes */
}
/* 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;
}
.month-overview__month-text {
font-size: 1em;
}
.month-overview__month-list {
font-size: .75em;
}
.month-overview__month-total-subtext {
font-size: .7em;
}
/* -------------------------- */
/* Reduce Size of Accounts Font and spacing */
.app-view__account {
font-size: .85em;
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;
}
/* -------------------------- */
/* 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;
}
/* -------------------------- */
/* Highlighting of On and Off Budget Account sections in sidebar
.app-view__accounts-title
{
background: #87bc69;
padding: 6px;
}
.app-view__accounts-list-border
{
margin: 0px;
padding: 0px;
}
.app-view__add-account
{
margin: 6px 0px 0px 6px;
}
*/
/* -------------------------- */
/* Padding and color change of Negative budget values */
.budget__month-row--negative
{
padding: 1px 4px;
background-color: #ff4c4c;
}
/* -------------------------- */
/* Color change of Positive budget values */
/*
.budget__month-cell--display
{
color: #4f703c;
}
*/
/* -------------------------- */
All working nicely here on Chrome (for Mac)
Show Posts
