466 lines
10 KiB
CSS
Executable file
466 lines
10 KiB
CSS
Executable file
/**
|
|
* Buchhaltungs-Widget CSS Styles
|
|
* Uses Dolibarr CSS variables for theme compatibility
|
|
*/
|
|
|
|
/* ===== WIDGET CONTAINER STYLES ===== */
|
|
|
|
/* Chart container in widgets */
|
|
.buchaltung-chart-container {
|
|
padding: 10px;
|
|
background-color: rgb(var(--colorbacklinepair1, 252,252,252));
|
|
border-bottom: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
}
|
|
|
|
.buchaltung-chart-container canvas {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Section headers */
|
|
.buchaltung-section-header {
|
|
background-color: rgb(var(--colorbacktitle1, 241,241,241));
|
|
padding: 8px 10px;
|
|
border-top: 2px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
border-bottom: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
color: rgb(var(--colortexttitle, 40,40,60));
|
|
}
|
|
|
|
/* Table headers */
|
|
.buchaltung-header {
|
|
font-weight: bold;
|
|
padding: 6px 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Labels */
|
|
.buchaltung-label {
|
|
padding: 6px 8px;
|
|
white-space: nowrap;
|
|
color: rgb(var(--colortext, 0,0,0));
|
|
}
|
|
|
|
/* ===== COLOR CODING ===== */
|
|
|
|
/* Positive values (green) - money you get back or profit */
|
|
.buchaltung-positive {
|
|
color: var(--amountpaymentcomplete, #008855) !important;
|
|
}
|
|
|
|
/* Negative values (red) - money you have to pay or loss */
|
|
.buchaltung-negative {
|
|
color: var(--amountremaintopaycolor, #880000) !important;
|
|
}
|
|
|
|
/* Current quarter/period highlight */
|
|
.buchaltung-current-quarter {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Future periods (greyed out) */
|
|
.buchaltung-future {
|
|
color: var(--tableforfieldcolor, #888) !important;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ===== TABLE STYLING ===== */
|
|
|
|
/* Widget specific table styling */
|
|
.box_ust_uebersicht table.noborder,
|
|
.box_gewinn_verlust table.noborder,
|
|
.box_rentabilitaet table.noborder {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Base cell styling - let Dolibarr handle backgrounds */
|
|
.box_ust_uebersicht table.noborder td,
|
|
.box_gewinn_verlust table.noborder td,
|
|
.box_rentabilitaet table.noborder td {
|
|
padding: 5px 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Total column */
|
|
.buchaltung-total {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Last year values (slightly muted) */
|
|
.buchaltung-lastyear {
|
|
opacity: 0.75;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* Separator row */
|
|
.buchaltung-separator {
|
|
height: 8px;
|
|
border: none;
|
|
}
|
|
|
|
/* Profit/Loss row */
|
|
.buchaltung-profit-row {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Footnote */
|
|
.buchaltung-footnote {
|
|
padding: 8px 10px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* ===== PRODUCTIVITY RATING ===== */
|
|
|
|
.buchaltung-rating {
|
|
padding: 12px;
|
|
background-color: rgb(var(--colorbacktitle1, 241,241,241));
|
|
border-top: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
}
|
|
|
|
.buchaltung-rating-box {
|
|
padding: 15px 20px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(38, 60, 92, 0.1);
|
|
border: 2px solid;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.buchaltung-rating-box::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, rgba(38, 60, 92, 0.8), rgba(38, 60, 92, 0.4));
|
|
}
|
|
|
|
.buchaltung-rating-box .rating-label {
|
|
font-weight: 700;
|
|
margin-right: 8px;
|
|
font-size: 0.95em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.buchaltung-rating-box .rating-value {
|
|
font-size: 1.5em;
|
|
font-weight: 800;
|
|
display: inline-block;
|
|
padding: 4px 14px;
|
|
border-radius: 4px;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
margin: 0 5px;
|
|
}
|
|
|
|
.buchaltung-rating-box .rating-description {
|
|
display: block;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Rating colors - clear, readable colors */
|
|
.rating-excellent {
|
|
background: #d4edda;
|
|
border-color: #28a745;
|
|
color: #155724 !important;
|
|
}
|
|
.rating-excellent::before {
|
|
background: linear-gradient(90deg, #28a745, #5cb85c);
|
|
}
|
|
.rating-excellent .rating-label,
|
|
.rating-excellent .rating-description {
|
|
color: #155724 !important;
|
|
}
|
|
.rating-excellent .rating-value {
|
|
background-color: #c3e6cb;
|
|
color: #0b3d0b !important;
|
|
}
|
|
|
|
.rating-good {
|
|
background: #cce5ff;
|
|
border-color: #007bff;
|
|
color: #004085 !important;
|
|
}
|
|
.rating-good::before {
|
|
background: linear-gradient(90deg, #007bff, #5ba4ff);
|
|
}
|
|
.rating-good .rating-label,
|
|
.rating-good .rating-description {
|
|
color: #004085 !important;
|
|
}
|
|
.rating-good .rating-value {
|
|
background-color: #b8daff;
|
|
color: #002752 !important;
|
|
}
|
|
|
|
.rating-average {
|
|
background: #fff3cd;
|
|
border-color: #ffc107;
|
|
color: #664d03 !important;
|
|
}
|
|
.rating-average::before {
|
|
background: linear-gradient(90deg, #ffc107, #ffda6a);
|
|
}
|
|
.rating-average .rating-label,
|
|
.rating-average .rating-description {
|
|
color: #664d03 !important;
|
|
}
|
|
.rating-average .rating-value {
|
|
background-color: #ffe69c;
|
|
color: #3d2e02 !important;
|
|
}
|
|
|
|
.rating-low {
|
|
background: #ffe5d0;
|
|
border-color: #fd7e14;
|
|
color: #663000 !important;
|
|
}
|
|
.rating-low::before {
|
|
background: linear-gradient(90deg, #fd7e14, #ffa64d);
|
|
}
|
|
.rating-low .rating-label,
|
|
.rating-low .rating-description {
|
|
color: #663000 !important;
|
|
}
|
|
.rating-low .rating-value {
|
|
background-color: #ffd4b3;
|
|
color: #4d2400 !important;
|
|
}
|
|
|
|
.rating-critical {
|
|
background: #f8d7da;
|
|
border-color: #dc3545;
|
|
color: #721c24 !important;
|
|
}
|
|
.rating-critical::before {
|
|
background: linear-gradient(90deg, #dc3545, #e4606d);
|
|
}
|
|
.rating-critical .rating-label,
|
|
.rating-critical .rating-description {
|
|
color: #721c24 !important;
|
|
}
|
|
.rating-critical .rating-value {
|
|
background-color: #f5c6cb;
|
|
color: #4a1117 !important;
|
|
}
|
|
|
|
/* ===== DETAIL PAGE STYLES ===== */
|
|
|
|
.buchaltung-filter-bar {
|
|
background-color: rgb(var(--colorbacktitle1, 241,241,241));
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
}
|
|
|
|
.buchaltung-filter-bar label {
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
color: rgb(var(--colortexttitle, 40,40,60));
|
|
}
|
|
|
|
.buchaltung-filter-bar select {
|
|
margin-right: 20px;
|
|
background-color: var(--inputbackgroundcolor, #FFF);
|
|
border: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
color: rgb(var(--colortext, 0,0,0));
|
|
}
|
|
|
|
.buchaltung-detail-chart {
|
|
background-color: rgb(var(--colorbacktabcard1, 255,255,255));
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.buchaltung-detail-chart canvas {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.buchaltung-detail-chart h4 {
|
|
margin: 0 0 15px 0;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
color: rgb(var(--colortexttitle, 40,40,60));
|
|
}
|
|
|
|
.buchaltung-legend {
|
|
text-align: center;
|
|
padding: 15px;
|
|
background-color: rgb(var(--colorbacklinepair1, 252,252,252));
|
|
margin-top: 15px;
|
|
border-radius: 4px;
|
|
color: rgb(var(--colortext, 0,0,0));
|
|
}
|
|
|
|
.buchaltung-tax-box {
|
|
background-color: rgb(var(--tablevalidbgcolor, 252,248,227));
|
|
border: 1px solid rgba(188, 149, 38, 0.4);
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 4px;
|
|
color: rgb(var(--colortext, 0,0,0));
|
|
}
|
|
|
|
.buchaltung-info-box {
|
|
background-color: rgb(var(--colorbacklinepairhover, 240,242,249));
|
|
border: 1px solid var(--inputbordercolor, rgba(0,0,0,.15));
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 4px;
|
|
font-size: 0.95em;
|
|
color: rgb(var(--colortext, 0,0,0));
|
|
}
|
|
|
|
/* Rating detail on detail pages */
|
|
.buchaltung-rating-detail {
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.buchaltung-rating-detail h3 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.buchaltung-rating-detail p {
|
|
margin: 0 0 15px 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.buchaltung-rating-detail .rating-scale {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: rgba(255,255,255,0.5);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.buchaltung-rating-detail .rating-scale span {
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.buchaltung-rating-detail .rating-scale .rating-critical { background-color: rgba(153, 48, 19, 0.2); }
|
|
.buchaltung-rating-detail .rating-scale .rating-low { background-color: rgba(175, 71, 5, 0.2); }
|
|
.buchaltung-rating-detail .rating-scale .rating-average { background-color: rgba(188, 149, 38, 0.2); }
|
|
.buchaltung-rating-detail .rating-scale .rating-good { background-color: rgba(0, 123, 255, 0.2); }
|
|
.buchaltung-rating-detail .rating-scale .rating-excellent { background-color: rgba(85, 165, 128, 0.2); }
|
|
|
|
.buchaltung-rating-detail .rating-marker {
|
|
position: absolute;
|
|
bottom: 55px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 12px solid rgb(var(--colortext, 0,0,0));
|
|
transform: translateX(-8px);
|
|
}
|
|
|
|
/* ===== FIX FOR WIDGET BOX CONTENT ===== */
|
|
|
|
/* Ensure proper backgrounds in the widget info_box_contents */
|
|
.box_ust_uebersicht .box-flex-item-with-icon,
|
|
.box_gewinn_verlust .box-flex-item-with-icon,
|
|
.box_rentabilitaet .box-flex-item-with-icon {
|
|
background-color: rgb(var(--colorbacktabcard1, 255,255,255));
|
|
}
|
|
|
|
/* ===== RESPONSIVE ADJUSTMENTS ===== */
|
|
|
|
@media (max-width: 768px) {
|
|
.buchaltung-label {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.buchaltung-header {
|
|
font-size: 0.8em;
|
|
padding: 4px 5px;
|
|
}
|
|
|
|
.box_ust_uebersicht table.noborder td,
|
|
.box_gewinn_verlust table.noborder td,
|
|
.box_rentabilitaet table.noborder td {
|
|
padding: 3px 4px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.buchaltung-chart-container {
|
|
padding: 5px;
|
|
}
|
|
|
|
.buchaltung-rating-box .rating-description {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.buchaltung-detail-chart {
|
|
padding: 10px;
|
|
}
|
|
|
|
.buchaltung-filter-bar {
|
|
padding: 10px;
|
|
}
|
|
|
|
.buchaltung-filter-bar label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.buchaltung-filter-bar select {
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
/* ===== PRINT STYLES ===== */
|
|
|
|
@media print {
|
|
.buchaltung-chart-container {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.buchaltung-positive {
|
|
color: #008855 !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.buchaltung-negative {
|
|
color: #880000 !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.buchaltung-current-quarter {
|
|
background-color: #fcf8e3 !important;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
}
|
|
|
|
/* ===== DARK MODE SUPPORT ===== */
|
|
|
|
/* When dark mode is enabled, these will be overridden by Dolibarr's CSS variables */
|
|
@media (prefers-color-scheme: dark) {
|
|
.buchaltung-positive {
|
|
color: #4caf50 !important;
|
|
}
|
|
|
|
.buchaltung-negative {
|
|
color: #f44336 !important;
|
|
}
|
|
}
|