141 lines
3.0 KiB
CSS
141 lines
3.0 KiB
CSS
li > p {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.related {
|
|
background-color: hsl(219, 76%, 88%) !important;
|
|
}
|
|
.secondary {
|
|
background-color: hsl(219, 67%, 94%) !important;
|
|
}
|
|
.highlight-op {
|
|
background-color: hsl(219, 67%, 94%);
|
|
}
|
|
|
|
.accounts-table {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.accounts-table dl {
|
|
margin: 0;
|
|
}
|
|
|
|
.accounts-table h4, .accounts-table h5 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.accounts-table h4 {
|
|
text-align: center;
|
|
}
|
|
/* table root */
|
|
.accounts-table > div {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
/* P&L & Balance Sheet columns */
|
|
.accounts-table > div > div {
|
|
flex: 1;
|
|
|
|
padding: 5px;
|
|
margin: 5%;
|
|
|
|
border: 3px solid #666;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* sections */
|
|
.accounts-table > div > div div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.accounts-table > div > div div > h5 {
|
|
order: 99;
|
|
|
|
text-transform: uppercase;
|
|
|
|
padding: 0.3em 0;
|
|
border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 10 / 3px 0 3px;
|
|
}
|
|
.accounts-table > div > div div div > h5 {
|
|
/* slightly smaller than normal 14px h5 size */
|
|
font-size: 12.5px;
|
|
border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 5;
|
|
}
|
|
.accounts-table dt {
|
|
font-weight: normal;
|
|
}
|
|
.accounts-table dt span {
|
|
font-style: italic;
|
|
}
|
|
.accounts-table dt span:last-child {
|
|
font-style: normal;
|
|
}
|
|
|
|
/* 3-column (thing, debit, credit) tables */
|
|
/* 2nd and 3rd th & td of each row right-aligned and 1/4th width */
|
|
.d-c-table tr > :nth-child(2),
|
|
.d-c-table tr > :nth-child(3) {
|
|
width: 25%;
|
|
text-align: right;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.accounts-table {
|
|
font-size: 90%;
|
|
color: #888 !important;
|
|
}
|
|
.accounts-table .related {
|
|
background-color: transparent !important;
|
|
color: #eee !important;
|
|
}
|
|
.accounts-table .secondary {
|
|
background-color: transparent !important;
|
|
color: #aaa !important;
|
|
}
|
|
|
|
.chart-of-accounts .highlight-op {
|
|
background-color: #030035;
|
|
}
|
|
}
|
|
|
|
#reconciliation #example button {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
/* When .reconcile-accounts is added to section, hide .invoice2 then .invoice1
|
|
rows */
|
|
@keyframes invoice1 {
|
|
50% {
|
|
font-size: 100%;
|
|
/* should have no effect on tr */
|
|
/* don't touch horizontal padding to avoid moving content too much */
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
100% {
|
|
font-size: 0%;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
@keyframes invoice2 {
|
|
0% {
|
|
font-size: 100%;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
100% {
|
|
font-size: 0%;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.reconcile-accounts .invoice1, .reconcile-accounts .invoice1 td {
|
|
animation: invoice1 5s ease-in forwards;
|
|
}
|
|
.reconcile-accounts .invoice2, .reconcile-accounts .invoice2 td {
|
|
animation: invoice2 2.5s ease-in forwards;
|
|
}
|