2 * Stylesheet for Funky Guy Theme.
4 * Copyright 2010, Antoine Mercadal - Capgemini
5 * Copyright 2010, Franck Villaume - Capgemini
6 * Copyright 2011, IƱigo Martinez
7 * Copyright 2013-2014,2017, Franck Villaume - TrivialDev
8 * Copyright 2014, Benoit Debaenst - TrivialDev
9 * Copyright 2015, Roland Mas
10 * Copyright 2021, Guy Morin - DGFiP
11 * http://fusionforge.org
13 * This file is part of FusionForge. FusionForge is free software;
14 * you can redistribute it and/or modify it under the terms of the
15 * GNU General Public License as published by the Free Software
16 * Foundation; either version 2 of the Licence, or (at your option)
19 * FusionForge is distributed in the hope that it will be useful,
20 * but WITHOUT ANY WARRANTY; without even the implied warranty of
21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22 * GNU General Public License for more details.
24 * You should have received a copy of the GNU General Public License along
25 * with FusionForge; if not, write to the Free Software Foundation, Inc.,
26 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
31 font-family: 'Manjari-Bold';
32 src: url('Manjari-Bold.ttf') format('truetype');
39 background-color: #efefef;
44 font-family: Helvetica, Helv, swiss, sans-serif;
46 background-color:white;
62 vertical-align: middle;
68 .widget_titlebar_title {
69 font-family: Arial, sans-serif;
92 list-style-type: circle;
101 text-decoration:none;
104 transition-property: background-color, color, height, shadow;
105 transition-duration: 0.3s;
109 text-decoration: none;
117 border-collapse: collapse;
120 input[type="text"], input[type="password"], input[type="url"], input[type="email"], textarea {
123 border: 1px solid #c6c6c6;
125 font-family:"Lucida Grande",sans-serif;
130 background-color: #E2E2E2;
154 background-color: #21293C;
157 header .skipLink:focus {
160 transition: all ease-out 0.3s;
168 padding: .4em 0 0 .5em;
172 transition: transform .7s ease-in-out;
174 header logo img:hover {
175 transform: rotate(360deg);
178 header a, header a:visited {
193 padding:.5em 0 0 .5em;
199 text-decoration:none;
201 transition-property: color;
202 transition-duration: 0.3s;
206 text-decoration: none;
212 padding: 0 1.2em .2em .4em;
214 border: 1px solid #789;
216 background: #51596c url("../images/header/select_down.png") center right no-repeat;
229 background-color:#efefef;
230 background-image:url("../images/backToTop.png");
231 border: 1px solid #ccc;
243 text-decoration: none;
244 transition: background-color 0.8s ease;
247 #backToTop:hover,#backToTop:active {
248 background-color: #fff;
250 transition: background-color 0.8s ease;
253 #searchBox input[type=text] {
254 padding: 0 26px 0 .4em;
256 border: 1px solid #789;
265 #searchBox input[type=submit] {
272 border: none !important;
273 background: transparent url("../images/header/search.png") center center no-repeat !important;
291 padding:0 1em .8em 0;
306 /* =hamburgerMenuOff */
309 #userlinkshamburgerdiv {
329 .tabGenerator ul:first-child {
330 padding-bottom: .2em;
334 display: inline-block;
337 .tabGenerator .tg-middle span {
338 transition-property: background-color, color, height, shadow;
339 transition-duration: 0.3s;
346 .tabGenerator .tg-middle span:hover {
350 .tabGenerator .tg-middle span.selected {
363 .innertabs .tabGenerator ul {
368 border-left: 1px solid #505d77;
371 .innertabs .tabGenerator li {
377 .innertabs .tabGenerator a {
379 flex-direction: column;
386 .innertabs .tabGenerator .tg-middle span {
388 padding: .3em .2em .2em .2em;
391 justify-content: center;
392 background-color:none;
398 text-overflow:ellipsis;
401 transition-property: background, color;
402 transition-duration: .4s;
403 border-right: 1px solid #505d77;
406 .innertabs .tabGenerator .tg-middle span:hover,
407 .innertabs .tabGenerator .tg-middle span.selected {
412 .topTab, a.topTab, a.topTab:visited, a.topTab:hover,
413 .topTabSelected, a.topTabSelected, a.topTabSelected:visited,
414 a.topTabSelected:hover {
415 text-decoration: none;
417 color: rgb(68, 68, 68);
418 font-family: arial, helvetica, sans-serif;
422 .bottomTab, a.bottomTab, a.bottomTab:visited, a.bottomTab:hover {
423 text-decoration: none;
426 font-family: arial, helvetica, sans-serif;
430 .bottomTabSelected, a.bottomTabSelected, a.bottomTabSelected:visited, a.bottomTabSelected:hover {
431 text-decoration: none;
433 color: rgb(68, 68, 68);
434 font-family: arial, helvetica, sans-serif;
444 vertical-align: middle;
449 color: rgb(112, 112, 112);
450 background-color: white;
457 /* Boxes (top / middle / bottom)
458 ----------------------------------------------- */
460 /* margin-bottom: 1em;*/
461 background-color: #f0f0f0;
462 border: 1px solid #c2c3c4;
464 padding:4px 8px 12px 8px;
466 box-shadow: 1px 1px 4px #c2c3c4;
474 border-bottom: 1px solid #E2E3E4;
479 border-bottom: 1px solid #E2E3E4;
481 padding: 8px 8px 8px 18px;
504 background-color: #f7f7f7;
505 border: 1px solid #929394;
507 box-shadow: 1px 1px 4px #b2b3b4;
510 .widget_titlebar_handle {
511 border-bottom: 2px solid #cfcfcf;
520 border-top-left-radius: 3px;
521 border-top-right-radius: 3px;
525 color:#505d77 !important;
528 .widget_titlebar_title {
533 .widget_titlebar_close img {
538 .widget_titlebar_minimize img {
543 .widget_titlebar_maximize img {
549 border-bottom: 1px solid #d2d3d4;
550 border-bottom-left-radius: 3px;
551 border-bottom-right-radius: 3px;
556 .widget_preferences {
559 .widget_preferences fieldset {
561 margin: .4em 0 .1em 0;
563 .widget_preferences fieldset fieldset {
567 .widget_content table {
568 border-collapse: collapse;
569 border: 1px solid #D5D5D5;
571 .widget_content table td {
575 .widget-sticker-container {
580 background-color: white;
581 border: 1px solid #D5D5D5;
586 .widget-sticker-header {
587 background-color: #CDDCF3;
591 .widget-sticker-body {
598 .widget-sticker-footer {
602 #widget-categories a {
607 #widget-categories a.selected {
608 background-color: #36c;
613 border-bottom: 1px solid #ccc;
616 display: inline-block;
623 .widget_toolbar li.current a,
624 .widget_toolbar li.current a:hover {
625 border-bottom: 2px solid #38f;
629 .widget_toolbar li a {
630 padding-bottom: .35em !important;
634 .widget_toolbar li a:hover {
635 border-bottom: 2px solid #999;
639 table.listing tbody tr:nth-child(even),
641 background-color: #CDDCF3;
644 table.listing tbody tr:nth-child(odd),
646 background-color: #FFFFFF;
654 border-collapse: collapse;
657 .listTable table td {
659 border: 1px solid gray;
667 margin-bottom: 1.25em;
669 /*border-collapse: collapse;*/
670 border-bottom: 1px solid #61697C;
671 border-spacing: 6px 0;
678 border-top-left-radius: 6px;
679 border-top-right-radius: 6px;
680 display: inline-block;
681 padding: 6px 8px 1px 8px;
698 display: flex !important;
699 flex-wrap: wrap !important;
701 .abc strong, .abc a, .abc input[type=submit] {
702 border:1px solid #9996 !important;
703 border-radius: 2px !important;
704 font-size: 1em !important;
705 padding: .2em .8em 0 .8em !important;
706 margin: .1em !important;
707 text-align: center !important;
708 text-shadow: 1px 1px #ccc6;
709 transition-property: background-color, text-shadow;
710 transition-duration: 0.3s;
712 .abc strong, .abc a {
713 width: .7em !important;
716 color: #444 !important;
718 .abc a, .abc input[type=submit] {
719 background: #ccc6 !important;
720 color: #36c !important;
722 .abc a:hover, .abc input[type=submit]:hover {
723 background: #fff6 !important;
724 color: #38f !important;
729 ----------------------------------------------- */
735 padding: 1.5em .5em .5em .5em;
737 border-top: 1px solid #ccc;
760 opacity: 1 !important;
761 transition: opacity ease-in 2s;
764 border: 8px solid #fff;
766 border-top: 8px solid #0000;
769 -webkit-animation: spin 2s linear infinite; /* Safari */
770 animation: spin 2s linear infinite;
779 @-webkit-keyframes spin {
780 0% { -webkit-transform: rotate(0deg); }
781 100% { -webkit-transform: rotate(360deg); }
785 0% { transform: rotate(0deg); }
786 100% { transform: rotate(360deg); }
789 /* error_msg, warning_msg or feedback function
790 ----------------------------------------------- */
791 span.active, span.deleted, span.pending, span.suspended {
795 .active {background-color: #cfc;}
796 .deleted {background-color: #cff;}
797 .pending {background-color: #ddd;}
798 .suspended {background-color: #fc6;}
800 background-color: #ff4940; /* red */
801 border: 1px solid red;
804 text-shadow: 1px 1px #ff7c73;
812 .warning_msg, .warning, .tips, .important {
813 background-color: #ffd297; /* orange */
814 border: 1px solid #ffa500; /* orange */
817 text-shadow: 1px 1px #fff5CA;
825 background-color: #aef26d; /* green */
826 border: 1px solid green;
829 text-shadow: 1px 1px #DFF59f;
837 background-color: #bdd0f2;
838 border: 1px solid #3a5fa5;
839 padding: 7px 7px 4px 7px;
841 text-shadow: 1px 1px #bcf;
849 background-color: #ff4940; /* red */
850 border: 1px solid red;
853 text-shadow: 1px 1px #ff7c73;
859 background-color: #ff4940; /* red */
860 border: 1px solid red;
863 text-shadow: 1px 1px #ff7c73;
870 border-radius: 0.5em 0.5em 0 0;
871 border-bottom: 1px solid #E2E3E4;
872 padding: 3px 3px 3px 10px;
873 margin: 0 -4px 0 -4px;
882 border-radius: 0.7em;
883 border:1px solid #c2c3c4;
884 box-shadow: 1px 1px 4px #c2c3c4;
887 .priority1 { background-color: #f3f4db}
888 .priority2 { background-color: #fcecc2}
889 .priority3 { background-color: #fde4aa}
890 .priority4 { background-color: #fcd986}
891 .priority5 { background-color: #fac955}
893 .table-header-rotated {
894 border-collapse: collapse;
897 .table-header-rotated td {
901 border: 1px solid #ccc;
904 .table-header-rotated th.rotate {
909 .table-header-rotated th.rotate>div {
910 transform: translate(25px, 51px) rotate(315deg);
914 .table-header-rotated th.rotate>div>span {
915 border-bottom: 1px solid #ccc;
919 .table-header-rotated th.row-header {
921 border-bottom: 1px solid #ccc;
924 table.listing thead tr th {
925 background-color: #707d97 !important;
930 table.listing thead tr th,
931 table.listing tbody tr td {
932 padding: 4px 8px !important;
935 table.listing thead tr th a {
939 table.listing tbody tr:nth-child(2n), .even {
940 background-color: #e0dfd6 !important;
943 table.listing tbody tr:nth-child(2n+1), .odd {
944 background-color: #e6e6e0 !important;
948 vertical-align: middle;
952 background-color: #c33;
955 text-shadow: 0 0 1px #960;
956 padding: .4em .8em .1em .8em;
963 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
964 background:none !important;
965 background-color: #d7d7d7 !important;
966 border:1px solid #a7a7a7 !important;
967 color: #222 !important;
968 text-shadow:1px 1px #eee;
969 transition-property: background-color, text-shadow;
970 transition-duration: 0.3s;
973 padding:.6em 1em .3em 1em !important;
975 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
976 border: 1px solid #505d77;
977 background-color: #f7f7f7 !important;
978 border:1px solid #878787 !important;
979 color: black !important;
980 text-shadow:1px 1px #fff;
983 /* Hide number input spinners */
984 input[type='number'] {
985 -moz-appearance:textfield;
987 input::-webkit-outer-spin-button,
988 input::-webkit-inner-spin-button { -webkit-appearance: none; }
989 /* end Hide number input spinners */
991 @media only screen and (max-width:1023px) {
994 padding-bottom: .3em;
997 /* =hamburgerMenuOn */
1000 padding: .8em 0 0 .8em;
1001 display: inline-block;
1004 div[role="search"] {
1015 #userlinkshamburgerdiv {
1020 #menudiv input:checked ~ #hamburgermenudiv {
1025 visibility: visible;
1026 transition: all ease-out .4s;
1029 #menudiv input:not(:checked) ~ #hamburgermenudiv {
1037 #hamburgermenudiv .tabGenerator {
1039 flex-direction: column;
1043 #userlinkshamburgerdiv ul,
1044 #hamburgermenudiv .tabGenerator ul {
1046 flex-direction: column;
1052 #userlinkshamburgerdiv li,
1053 #hamburgermenudiv .tabGenerator li {
1054 display: inline-block;
1057 border-top: 1px solid #707d97;
1061 #userlinkshamburgerdiv {
1066 #userlinkshamburgerdiv li {
1070 #userlinkshamburgerdiv li a {
1074 white-space: no-wrap;
1077 #hamburgermenudiv .tabGenerator span{
1081 #title-home-page img {