mirror of
https://github.com/simonmichael/hledger.git
synced 2024-12-29 05:11:33 +03:00
d12d7e2228
This also validates transaction date and description upon form submission. As noted in the issue, this removes hledger-web's "smart date" functionality. This functionality can be restored giving the demand but should be tracked in another issue. Previous iterations used input[type=date], but it isn't easily crossbrowser and the polyfill I found had some quirks.
280 lines
5.0 KiB
CSS
280 lines
5.0 KiB
CSS
/* hledger web ui styles */
|
|
|
|
/*------------------------------------------------------------------------------------------*/
|
|
/* 1. colours */
|
|
|
|
/* green */
|
|
::-moz-placeholder {
|
|
font-style:italic;
|
|
}
|
|
:-moz-placeholder {
|
|
font-style:italic;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
font-style:italic;
|
|
}
|
|
:-ms-input-placeholder {
|
|
font-style:italic;
|
|
}
|
|
|
|
/*------------------------------------------------------------------------------------------*/
|
|
/* 4. typeahead styles */
|
|
|
|
/*
|
|
.typeahead,
|
|
.tt-query,
|
|
.tt-hint {
|
|
width: 396px;
|
|
height: 30px;
|
|
padding: 8px 12px;
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
border: 2px solid #ccc;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
|
|
.typeahead {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.typeahead:focus {
|
|
border: 2px solid #0097cf;
|
|
}
|
|
|
|
.tt-query {
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
*/
|
|
.tt-hint {
|
|
color: #bbb;
|
|
}
|
|
|
|
.tt-dropdown-menu {
|
|
padding: 8px 0;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
border-radius: 8px;
|
|
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
|
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
|
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
|
overflow:auto;
|
|
max-height:300px;
|
|
}
|
|
|
|
.tt-suggestions {
|
|
}
|
|
|
|
.tt-suggestion {
|
|
padding: 3px 20px;
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.tt-suggestion.tt-cursor {
|
|
color: #fff;
|
|
background-color: #0097cf;
|
|
|
|
}
|
|
|
|
.tt-suggestion p {
|
|
margin: 0;
|
|
}
|
|
|
|
.twitter-typeahead {
|
|
width:100%;
|
|
}
|
|
|
|
code {
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
#main-content {
|
|
padding-left: 30px;
|
|
}
|
|
|
|
#sidebar-menu {
|
|
overflow:hidden;
|
|
border-right: 1px solid #ebebeb;
|
|
}
|
|
#sidebar-menu .main-menu {
|
|
table-layout: fixed;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
#sidebar-menu .main-menu td {
|
|
padding: 1px !important;
|
|
border-top: 1px solid #ebebeb;
|
|
overflow: hidden;
|
|
white-space:nowrap;
|
|
text-overflow:ellipsis;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .ff-wrapper { /* This wrapper is needed because firefox won't apply overflow to a td-tag */
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .top {
|
|
border: none !important;
|
|
}
|
|
|
|
#sidebar-menu .main-menu a {
|
|
display: inline;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #2F2F2F;
|
|
padding: 4px 20px;
|
|
}
|
|
|
|
#sidebar-menu .main-menu a:hover {
|
|
color: #11427D;
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .only{
|
|
visibility: hidden;
|
|
padding: 1px;
|
|
}
|
|
|
|
#sidebar-menu .main-menu tr:hover > td > div > .only {
|
|
visibility: visible;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .only:hover{
|
|
border-left: none;
|
|
}
|
|
#sidebar-menu .main-menu .balance {
|
|
float: right;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .total {
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
border-top: 1px solid black;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .inacct {
|
|
font-weight: bold;
|
|
color: #11427D;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .amount {
|
|
float: right;
|
|
overflow-x:auto;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
#sidebar-menu .main-menu .acct {
|
|
width:60%;
|
|
vertical-align:bottom;
|
|
}
|
|
|
|
.transactionsreport .nonhead {
|
|
border: none !important;
|
|
}
|
|
|
|
.negative {
|
|
color: #a94442;
|
|
}
|
|
|
|
.date {
|
|
whitespace: nowrap;
|
|
}
|
|
|
|
#main-content {
|
|
/*
|
|
-webkit-transition: width 0.3s ease, margin 0.3s ease;
|
|
-moz-transition: width 0.3s ease, margin 0.3s ease;
|
|
-o-transition: width 0.3s ease, margin 0.3s ease;
|
|
transition: width 0.3s ease, margin 0.3s ease;
|
|
*/
|
|
}
|
|
|
|
#sidebar-menu {
|
|
/*
|
|
-webkit-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
|
|
-moz-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
|
|
-o-transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
|
|
transition: width 0.3s ease, margin 0.3s ease,opacity 0.3s ease,height 1s ease 1s;
|
|
*/
|
|
}
|
|
|
|
.col-any-0 {
|
|
width:0 !important;
|
|
height:0 !important;
|
|
float: left;
|
|
opacity:0;
|
|
}
|
|
|
|
.tgl-icon {
|
|
font-size:large;
|
|
}
|
|
|
|
#searchbar {
|
|
width: 100% !important;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.row-offcanvas {
|
|
position: relative;
|
|
-webkit-transition: all .25s ease-out;
|
|
-o-transition: all .25s ease-out;
|
|
transition: all .25s ease-out;
|
|
}
|
|
|
|
.row-offcanvas-right {
|
|
right: 0;
|
|
}
|
|
|
|
.row-offcanvas-left {
|
|
left: 0;
|
|
}
|
|
|
|
.row-offcanvas-right
|
|
.sidebar-offcanvas {
|
|
right: -90%;
|
|
}
|
|
|
|
.row-offcanvas-left
|
|
.sidebar-offcanvas {
|
|
left: -90%;
|
|
}
|
|
|
|
.row-offcanvas-right.active {
|
|
right: 90%;
|
|
}
|
|
|
|
.row-offcanvas-left.active {
|
|
left: 90%;
|
|
}
|
|
|
|
.sidebar-offcanvas {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 90%;
|
|
}
|
|
|
|
#sidebar-menu .main-menu td {
|
|
max-width: 200px;
|
|
}
|
|
}
|