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