dolibarr 20.0.0
info-box.inc.php
1<?php
2if (!defined('ISLOADEDBYSTEELSHEET')) {
3 die('Must be call by steelsheet');
4} ?>
5/* <style type="text/css" > */
6
7
8/*
9 * Component: Info Box
10 * -------------------
11 */
12
13<?php
14include_once DOL_DOCUMENT_ROOT.'/core/lib/functions2.lib.php';
15
16$prefix = '';
17if (getDolGlobalString('THEME_INFOBOX_COLOR_ON_BACKGROUND')) {
18 $prefix = 'background-';
19}
20
21if (!isset($conf->global->THEME_SATURATE_RATIO)) {
22 $conf->global->THEME_SATURATE_RATIO = 0.7;
23}
24if (GETPOSTISSET('THEME_SATURATE_RATIO')) {
25 $conf->global->THEME_SATURATE_RATIO = GETPOSTINT('THEME_SATURATE_RATIO');
26}
27
28?>
29
30.customer-back {
31 background-color: #65953d !important;
32 color: #FFF !important;
33 padding: 2px;
34 margin: 2px;
35 border-radius: 3px;
36}
37.vendor-back {
38 background-color: #599caf !important;
39 color: #FFF !important;
40 padding: 2px;
41 margin: 2px;
42 border-radius: 3px;
43}
44.user-back {
45 background-color: #79633f !important;
46 color: #FFF !important;
47 padding: 2px;
48 margin: 2px;
49 border-radius: 3px;
50}
51.member-company-back {
52 padding: 2px 7px 2px 7px;
53 background-color: #e4e4e4;
54 color: #666;
55 border-radius: 10px;
56 white-space: nowrap;
57}
58.member-individual-back {
59 padding: 2px 7px 2px 7px;
60 background-color: #e4e4e4;
61 color: #666;
62 border-radius: 10px;
63 white-space: nowrap;
64}
65
66.bg-infobox-project{
67 <?php echo $prefix; ?>color: #6c6aa8 !important;
68}
69.bg-infobox-action{
70 <?php echo $prefix; ?>color: #a47080 !important;
71}
72.bg-infobox-propal, .bg-infobox-facture, .bg-infobox-commande {
73 <?php echo $prefix; ?>color: #65953d !important;
74}
75.bg-infobox-supplier_proposal, .bg-infobox-invoice_supplier, .bg-infobox-order_supplier {
76 <?php echo $prefix; ?>color: #599caf !important;
77}
78.bg-infobox-contrat, .bg-infobox-ticket{
79 <?php echo $prefix; ?>color: #46a676 !important;
80}
81.bg-infobox-bank_account{
82 <?php echo $prefix; ?>color: #b0a53e !important;
83}
84.bg-infobox-adherent, .bg-infobox-member{
85 <?php echo $prefix; ?>color: #79633f !important;
86}
87.bg-infobox-expensereport{
88 <?php echo $prefix; ?>color: #79633f !important;
89}
90.bg-infobox-holiday{
91 <?php echo $prefix; ?>color: #755114 !important;
92}
93
94/* Disable colors on left vmenu */
95a.vmenu span, span.vmenu, span.vmenu span {
96 /* To force no color on picto in left menu */
97 /* color: var(--colortextbackvmenu) !important; */
98}
99div.login_block_other a {
100 color: var(--colortextbackvmenu);
101}
102
103.infobox-adherent, .infobox-member {
104 color: #79633f;
105}
106.infobox-project{
107 color: #6c6aa8;
108}
109.infobox-action{
110 color: #a47080;
111}
112/* Color for customer object */
113.infobox-propal:not(.pictotitle):not(.error),
114.infobox-facture:not(.pictotitle):not(.error),
115.infobox-commande:not(.pictotitle):not(.error) {
116 color: #65953d;
117}
118/* Color for vendor object */
119.infobox-supplier_proposal:not(.pictotitle):not(.error),
120.infobox-invoice_supplier:not(.pictotitle):not(.error),
121.infobox-order_supplier:not(.pictotitle):not(.error) {
122 color: #599caf;
123}
124
125.infobox-contrat, .infobox-ticket{
126 color: #46a676;
127}
128.infobox-bank_account{
129 color: #b0a53e;
130}
131.infobox-adherent, .infobox-member {
132 color: #79633f;
133}
134.infobox-expensereport{
135 color: #79633f;
136}
137.infobox-holiday{
138 color: #755114;
139}
140
141
142.info-box-module.--external span.info-box-icon-version {
143 background: #bbb;
144}
145
146a.info-box-text.info-box-text-a {
147 /* display: table-cell; */
148 display: contents;
149}
150a.info-box-text-a i.fa.fa-exclamation-triangle {
151 font-size: 0.9em;
152}
153
154.info-box {
155 display: block;
156 position: relative;
157 min-height: 94px;
158 background: var(--colorbacklineimpair2);
159 width: 100%;
160 /* box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); */
161 border-radius: 2px;
162 margin-bottom: 15px;
163 border: 1px solid #e9e9e9;
164}
165.info-box.info-box-sm {
166 min-height: 80px;
167 margin-bottom: 10px;
168}
169.info-box-more {
170 float: right;
171 top: 4px;
172 position: absolute;
173 right: 10px;
174}
175
176.info-box small {
177 font-size: 14px;
178}
179.info-box:not(.info-box-kanban) .progress {
180 background: rgba(0, 0, 0, 0.2);
181 margin: 5px -10px 5px -10px;
182 height: 2px;
183}
184.info-box .progress,
185.info-box .progress .progress-bar {
186 border-radius: 0;
187}
188
189.info-box:not(.info-box-kanban) .progress .progress-bar {
190 float: left;
191 width: 0;
192 height: 100%;
193 font-size: 12px;
194 line-height: 20px;
195 color: #fff;
196 text-align: center;
197 background-color: #337ab7;
198 -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
199 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
200 -webkit-transition: width .6s ease;
201 -o-transition: width .6s ease;
202 transition: width .6s ease;
203}
204.info-box-icon {
205 display: block;
206 overflow: hidden;
207 float: left;
208 text-align: center;
209 font-size: 45px;
210 line-height: 94px;; /* must be same height as min-height of .info-box */
211 height: 94px;; /* must be same height as min-height of .info-box */
212 width: 86px;
213 background: var(--colorbacktitle1) !important;
214 <?php if (isset($conf->global->THEME_SATURATE_RATIO)) { ?>
215 filter: saturate(<?php echo $conf->global->THEME_SATURATE_RATIO; ?>);
216 <?php } ?>
217}
218
219.info-box-module .info-box-icon {
220 padding-top: 4px;
221 padding-bottom: 4px;
222}
223.info-box-sm .info-box-icon, .info-box-sm .info-box-img {
224 height: 96px !important; /* must match height of info-box-sm .info-box-content */
225 width: 80px;
226 font-size: 25px;
227 line-height: 92px;
228}
229.info-box-order {
230 border-top-left-radius: 2px;
231 border-top-right-radius: 0;
232 border-bottom-right-radius: 0;
233 border-bottom-left-radius: 2px;
234 display: block;
235 overflow: hidden;
236 float: left;
237 height: 115px;
238 width: 88px;
239 text-align: center;
240 font-size: 2.3em;
241 line-height: 115px;
242 margin-right: 10px;
243 background: var(--colorbacktitle1) !important;
244}
245.opened-dash-board-wrap .info-box .info-box-icon {
246 font-size: 2em;
247}
248.opened-dash-board-wrap .info-box-sm .info-box-icon {
249 line-height: 80px;
250}
251.info-box-module .info-box-icon {
252 height: 98px;
253}
254.info-box-icon > img {
255 max-width: 85%;
256}
257.info-box-module .info-box-icon > img {
258 max-width: 55%;
259}
260
261.info-box-line {
262 line-height: 1.2em;
263}
264.info-box-line-text {
265 overflow: hidden;
266 width: calc(100% - 76px);
267 text-overflow: ellipsis;
268}
269
270.info-box-icon-text {
271 box-sizing: border-box;
272 display: block;
273 position: absolute;
274 width: 90px;
275 bottom: 0px;
276 color: #ffffff;
277 background-color: rgba(0,0,0,0.1);
278 cursor: default;
279
280 font-size: 10px;
281 line-height: 15px;
282 padding: 0px 3px;
283 text-align: center;
284 opacity: 0;
285 -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
286 transition: opacity 0.5s, visibility 0s 0.5s;
287}
288
289.info-box-icon-version {
290 box-sizing: border-box;
291 display: block;
292 position: absolute;
293 width: 90px;
294 bottom: 0px;
295 color: #ffffff;
296 background-color: rgba(0,0,0,0.1);
297 cursor: default;
298
299 font-size: 10px;
300 line-height: 1.5em;
301 padding: 4px 3px;
302 text-align: center;
303 opacity: 1;
304 -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
305 transition: opacity 0.5s, visibility 0s 0.5s;
306}
307
308.box-flex-item.info-box-module.--disabled {
309 /* opacity: 0.6; */
310}
311
312.info-box-actions {
313 position: absolute;
314 right: 0;
315 bottom: 0;
316}
317
318/* customize section img box on list of products */
319.info-box-img {
320 height: 105px !important;
321 width: 88px;
322 border-top-left-radius: 2px;
323 border-top-right-radius: 0;
324 border-bottom-right-radius: 0;
325 border-bottom-left-radius: 2px;
326 display: block;
327 overflow: hidden;
328 float: left;
329 text-align: center;
330 font-size: 2.8em;
331 line-height: 90px;
332 margin-right: 5px;
333 background: var(--colorbacktitle1) !important;
334}
335.info-box-img > img {
336 width: 90%;
337 position: relative;
338 top: 50%;
339 left: 50%;
340 transform: translate(-50%, -50%);
341}
342
343
344<?php if (!getDolGlobalString('MAIN_DISABLE_GLOBAL_BOXSTATS') && getDolGlobalString('MAIN_INCLUDE_GLOBAL_STATS_IN_OPENED_DASHBOARD')) { ?>
345.info-box-icon-text{
346 opacity: 1;
347}
348<?php } ?>
349
350.info-box-sm .info-box-icon-text, .info-box-sm .info-box-icon-version{
351 overflow: hidden;
352 width: 80px;
353}
354.info-box:hover .info-box-icon-text{
355 opacity: 1;
356}
357
358.info-box-content {
359 padding-top: 5px;
360 padding-bottom: 5px;
361 padding-left: 10px;
362 padding-right: 5px;
363 margin-left: 84px;
364}
365.info-box-sm .info-box-content {
366 margin-left: 80px;
367 height: 86px; /* 96 - margins of .info-box-sm .info-box-content */
368}
369.info-box-sm .info-box-module-enabled {
370 /* background: linear-gradient(0.35turn, #fff, #fff, #f6faf8, #e4efe8) */
371 background: var(--infoboxmoduleenabledbgcolor);
372}
373.info-box-content-warning span.font-status4 {
374 color: #bc9526 !important;
375}
376
377.info-box-number {
378 display: block;
379 font-weight: bold;
380 font-size: 18px;
381}
382.progress-description,
383.info-box-text,
384.info-box-title{
385 display: block;
386 font-size: 12px;
387 white-space: nowrap;
388 overflow: hidden;
389 text-overflow: ellipsis;
390}
391.info-box-title{
392 text-transform: uppercase;
393 font-weight: bold;
394 margin-bottom: 6px;
395}
396.info-box-title {
397 width: calc(100% - 20px);
398}
399.info-box-text{
400 font-size: 0.90em;
401}
402/* Force values for small screen 480 */
403@media only screen and (max-width: 480px)
404{
405 .info-box-text {
406 font-size: 0.85em;
407 }
408}
409.info-box-text:first-letter{text-transform: uppercase}
410a.info-box-text{ text-decoration: none;}
411
412
413.info-box-more {
414 display: block;
415}
416.progress-description {
417 margin: 0;
418}
419
420
421
422/* ICONS INFO BOX */
423<?php
424include_once DOL_DOCUMENT_ROOT.'/core/lib/functions2.lib.php';
425
426$prefix = '';
427if (getDolGlobalString('THEME_INFOBOX_COLOR_ON_BACKGROUND')) {
428 $prefix = 'background-';
429}
430
431if (!isset($conf->global->THEME_SATURATE_RATIO)) {
432 $conf->global->THEME_SATURATE_RATIO = 0.7;
433}
434if (GETPOSTISSET('THEME_SATURATE_RATIO')) {
435 $conf->global->THEME_SATURATE_RATIO = GETPOSTINT('THEME_SATURATE_RATIO');
436}
437?>
438.bg-infobox-project i.fa{
439 color: #605ca8 !important;
440}
441.bg-infobox-action i.fa{
442 color: #d84b80 !important;
443}
444.bg-infobox-propal i.fa,
445.bg-infobox-facture i.fa,
446.bg-infobox-commande i.fa{
447 color: #abb87b !important;
448}
449.bg-infobox-supplier_proposal i.fa,
450.bg-infobox-invoice_supplier i.fa,
451.bg-infobox-order_supplier i.fa{
452 color: #40b0cf !important;
453}
454.bg-infobox-contrat i.fa, .bg-infobox-ticket i.fa{
455 color: #20a68a !important;
456}
457.bg-infobox-bank_account i.fa{
458 color: #b0a53e !important;
459}
460.bg-infobox-adherent i.fa, .bg-infobox-member i.fa{
461 color: #755114 !important;
462}
463.bg-infobox-expensereport i.fa{
464 color: #755114 !important;
465}
466.bg-infobox-holiday i.fa{
467 color: #755114 !important;
468}
469
470
471.fa-dol-action:before {
472 content: "\f073";
473}
474.fa-dol-propal:before,
475.fa-dol-supplier_proposal:before {
476 content: "\f573";
477}
478.fa-dol-facture:before,
479.fa-dol-invoice_supplier:before {
480 content: "\f571";
481}
482.fa-dol-project:before {
483 content: "\f542";
484}
485.fa-dol-commande:before,
486.fa-dol-order_supplier:before {
487 content: "\f570";
488}
489.fa-dol-contrat:before {
490 content: "\f1e6";
491}
492.fa-dol-ticket:before {
493 content: "\f3ff";
494}
495.fa-dol-bank_account:before {
496 content: "\f19c";
497}
498.fa-dol-member:before {
499 content: "\f0c0";
500}
501.fa-dol-expensereport:before {
502 content: "\f555";
503}
504.fa-dol-holiday:before {
505 content: "\f5ca";
506}
507
508
509/* USING FONTAWESOME FOR WEATHER */
510.info-box-weather .info-box-icon{
511 background: var(--colorbacktitle1) !important;
512}
513.fa-weather-level0:before{
514 content: "\f185";
515 color : #cfbf00;
516}
517.fa-weather-level1:before{
518 content: "\f6c4";
519 color : #bc9526;
520}
521.fa-weather-level2:before{
522 content: "\f743";
523 color : #b16000;
524}
525.fa-weather-level3:before{
526 content: "\f740";
527 color : #b04000;
528}
529.fa-weather-level4:before{
530 content: "\f0e7";
531 color : #b01000;
532}
533
534
535/* USING IMAGES FOR WEATHER INSTEAD OF FONT AWESOME */
536/* For other themes just uncomment this part */
537/*.info-box-weather-level0,
538.info-box-weather-level1,
539.info-box-weather-level2,
540.info-box-weather-level3,
541.info-box-weather-level4 {
542 background-position: 15px 50%;
543 background-repeat: no-repeat;
544}
545
546.info-box-weather .info-box-icon{
547 display: none !important;
548}
549.info-box-weather-level0 {
550 background-image: url("img/weather/weather-clear.png");
551}
552.info-box-weather-level1 {
553 background-image: url("img/weather/weather-few-clouds.png");
554}
555.info-box-weather-level2 {
556 background-image: url("img/weather/weather-clouds.png");
557}
558.info-box-weather-level3 {
559 background-image: url("img/weather/weather-many-clouds.png");
560}
561.info-box-weather-level4 {
562 background-image: url("img/weather/weather-storm.png");
563}*/
564
565
566
567.box-flex-container{
568 display: flex; /* or inline-flex */
569 flex-direction: row;
570 flex-wrap: wrap;
571 width: 100%;
572 margin: 0 0 0 -10px;
573 /* justify-content: space-between; Do not use this: If there is 3 elements on last line and previous has 4, then the 3 are centered */
574}
575.box-flex-container-columns {
576 display: flex; /* or inline-flex */
577 flex-direction: row;
578 flex-wrap: nowrap;
579 justify-content: space-between;
580}
581.box-flex-container-column {
582 flex-grow: 1;
583}
584.box-flex-container-column:not(:last-of-type) {
585 border-right: 1px solid #AAA;
586}
587
588.box-flex-container-column.kanban {
589 flex: 1;
590}
591.kanban.kanbancollapsed {
592 flex: unset;
593 width: 80px;
594}
595.kanban.kanbancollapsed .kanbanlabel, .text-vertical {
596 writing-mode: vertical-rl;
597}
598
599.box-flex-grow-zero{
600 flex-grow: 0 !important;
601}
602
603.box-flex-item {
604 flex-grow : 1;
605 flex-shrink: 1;
606 flex-basis: auto;
607
608 width: 300px;
609}
610.box-flex-item.filler{
611 height: 0;
612}
613.box-flex-item, .kanbanlabel {
614 margin-top: 5px;
615 margin-<?php echo $right; ?>: 10px;
616 margin-bottom: 0px;
617 margin-<?php echo $left; ?>: 10px;
618}
619.kanbanlabel {
620 background: var(--colorbacktitle1);
621 padding: 5px;
622 margin-bottom: 10px;
623 border-radius: 5px;
624}
625.kanban .box-flex-item {
626 line-height: 1.4em;
627}
628
629/* css for small kanban */
630.box-flex-item-small {
631 width: 200px !important;
632}
633.box-flex-item-small .info-box-sm .info-box-content {
634 margin-left: 0;
635}
636.box-flex-item-small .info-box-icon.bg-infobox-action {
637 display: none;
638}
639
640
641@media only screen and (max-width: 767px)
642{
643 .box-flex-container {
644 margin: 0 0 0 -8px !important;
645 }
646}
647
648.info-box-title {
649 width: calc(100% - 20px);
650}
651.info-box-module {
652 min-width: 350px;
653 max-width: 350px;
654}
655.info-box-module .info-box-content {
656 height: 6.3em;
657}
658.fright {
659 float:right;
660}
661
662@media only screen and (max-width: 1740px) {
663 .info-box-module {
664 min-width: 315px;
665 max-width: 315px;
666 }
667}
668@media only screen and (max-width: 768px) {
669 .info-box-module {
670 min-width: 260px;
671 }
672 .info-box-sm .info-box-icon {
673 width: 60px;
674 }
675 .info-box-sm .info-box-content {
676 margin-left: 60px;
677 }
678 .info-box-content {
679 padding-top: 5px;
680 padding-bottom: 5px;
681 padding-left: 10px;
682 padding-right: 2px;
683 }
684 .info-box-line-text {
685 width: calc(100% - 92px);
686 max-width: calc(100% - 82px);
687 }
688}
689
690@media only screen and (max-width: 480px) {
691 .info-box-module {
692 min-width: 250px;
693 }
694 .box-flex-item {
695 width: 250px;
696 }
697}
print $object position
Definition edit.php:195
print $script_file $mode $langs defaultlang(is_numeric($duration_value) ? " delay=". $duration_value :"").(is_numeric($duration_value2) ? " after cd cd cd description as description
Only used if Module[ID]Desc translation string is not found.
GETPOSTINT($paramname, $method=0)
Return the value of a $_GET or $_POST supervariable, converted into integer.
getDolGlobalString($key, $default='')
Return dolibarr global constant string value.
a disabled
table table fiche title col title div col center btnTitle icon
Automatically calls the icon named with the corresponding "object_" prefix.
if(preg_match('/crypted:/i', $dolibarr_main_db_pass)||!empty($dolibarr_main_db_encrypted_pass)) $conf db type
Definition repair.php:137