hledger/hledger-web/static/hledger.css
Eli Flanagan d12d7e2228 use bootstrap-datepicker
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.
2017-12-29 13:01:26 -08:00

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;
}
}