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