afaneca / myfin

Web frontend for the personal finances platform that'll help you budget, keep track of your income/spending and forecast your financial future.

Home Page:https://myfin.afaneca.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Tweak themes

afaneca opened this issue · comments

Common

  • Remove <hr> from accounts list
  • Remove font-size: larger; from .trx-type-amount
  • Add background: var(--main-card-background); & padding: 6px; to .top-summary-key

Light theme

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
    /* -webkit-box-shadow: 0 0px 0px 0 rgb(0 0 0 / 14%), 0 1px 1px -2px rgb(0 0 0 / 12%), 0 1px 4px 0 rgb(0 0 0 / 20%); */
    /* box-shadow: 0 0px 0px 0 rgb(0 0 0 / 14%), 0 1px 1px -2px rgb(0 0 0 / 12%), 0 1px 4px 0 rgb(0 0 0 / 20%); */
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);
    box-shadow: 0 1px 20px 0 rgba(69,90,100,.08);
    border: none;
}
--main-body-background: #f3f3f3;

Nord theme

--main-dark-background: #1f2d3d;
--main-dark-on-dark-background: #253649;
--main-light-gray-color: #c0ccda;
input:not([type]):not(.browser-default):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--main-accent-color);
    -webkit-box-shadow: 0 1px 0 0 var(--main-accent-color);
    box-shadow: 0 1px 0 0 var(--main-accent-color);
}

input:not([type]):not(.browser-default):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
    color: var(--main-accent-color);
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid var(--main-accent-color);
}

.side-nav-menu-active {
    background: #00bcd4;
    background: linear-gradient(to top, #0083B0, #00B4DB);
    background: -webkit-linear-gradient(to top, #0083B0, #00B4DB);
}

.side-nav-menu-active:not(:hover) > i:not(:hover) {
    color: var(--main-body-background) !important;
}