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;
213 padding: 0 1.2em .2em .4em;
215 border: 1px solid #789;
217 background: #51596c url("../images/header/select_down.png") center right no-repeat;
230 background-color:#efefef;
231 background-image:url("../images/backToTop.png");
232 border: 1px solid #ccc;
244 text-decoration: none;
245 transition: background-color 0.8s ease;
248 #backToTop:hover,#backToTop:active {
249 background-color: #fff;
251 transition: background-color 0.8s ease;
254 #searchBox input[type=text] {
255 padding: 0 26px 0 .4em;
257 border: 1px solid #789;
266 #searchBox input[type=submit] {
273 border: none !important;
274 background: transparent url("../images/header/search.png") center center no-repeat !important;
292 padding:0 1em .8em 0;
307 /* =hamburgerMenuOff */
310 #userlinkshamburgerdiv {
330 .tabGenerator ul:first-child {
331 padding-bottom: .2em;
335 display: inline-block;
338 .tabGenerator .tg-middle span {
339 transition-property: background-color, color, height, shadow;
340 transition-duration: 0.3s;
347 .tabGenerator .tg-middle span:hover {
351 .tabGenerator .tg-middle span.selected {
364 .innertabs .tabGenerator ul {
369 border-left: 1px solid #505d77;
372 .innertabs .tabGenerator li {
378 .innertabs .tabGenerator a {
380 flex-direction: column;
387 .innertabs .tabGenerator .tg-middle span {
389 padding: .3em .2em .2em .2em;
392 justify-content: center;
393 background-color:none;
399 text-overflow:ellipsis;
402 transition-property: background, color;
403 transition-duration: .4s;
404 border-right: 1px solid #505d77;
407 .innertabs .tabGenerator .tg-middle span:hover,
408 .innertabs .tabGenerator .tg-middle span.selected {
413 .topTab, a.topTab, a.topTab:visited, a.topTab:hover,
414 .topTabSelected, a.topTabSelected, a.topTabSelected:visited,
415 a.topTabSelected:hover {
416 text-decoration: none;
418 color: rgb(68, 68, 68);
419 font-family: arial, helvetica, sans-serif;
423 .bottomTab, a.bottomTab, a.bottomTab:visited, a.bottomTab:hover {
424 text-decoration: none;
427 font-family: arial, helvetica, sans-serif;
431 .bottomTabSelected, a.bottomTabSelected, a.bottomTabSelected:visited, a.bottomTabSelected:hover {
432 text-decoration: none;
434 color: rgb(68, 68, 68);
435 font-family: arial, helvetica, sans-serif;
445 vertical-align: middle;
450 color: rgb(112, 112, 112);
451 background-color: white;
458 /* Boxes (top / middle / bottom)
459 ----------------------------------------------- */
461 /* margin-bottom: 1em;*/
462 background-color: #f0f0f0;
463 border: 1px solid #c2c3c4;
465 padding:4px 8px 12px 8px;
467 box-shadow: 1px 1px 4px #c2c3c4;
475 border-bottom: 1px solid #E2E3E4;
480 border-bottom: 1px solid #E2E3E4;
482 padding: 8px 8px 8px 18px;
505 background-color: #f7f7f7;
506 border: 1px solid #929394;
508 box-shadow: 1px 1px 4px #b2b3b4;
511 .widget_titlebar_handle {
512 border-bottom: 2px solid #cfcfcf;
521 border-top-left-radius: 3px;
522 border-top-right-radius: 3px;
526 color:#505d77 !important;
529 .widget_titlebar_title {
534 .widget_titlebar_close img {
539 .widget_titlebar_minimize img {
544 .widget_titlebar_maximize img {
550 border-bottom: 1px solid #d2d3d4;
551 border-bottom-left-radius: 3px;
552 border-bottom-right-radius: 3px;
557 .widget_preferences {
560 .widget_preferences fieldset {
562 margin: .4em 0 .1em 0;
564 .widget_preferences fieldset fieldset {
568 .widget_content table {
569 border-collapse: collapse;
570 border: 1px solid #D5D5D5;
572 .widget_content table td {
576 .widget-sticker-container {
581 background-color: white;
582 border: 1px solid #D5D5D5;
587 .widget-sticker-header {
588 background-color: #CDDCF3;
592 .widget-sticker-body {
599 .widget-sticker-footer {
603 #widget-categories a {
608 #widget-categories a.selected {
609 background-color: #36c;
614 border-bottom: 1px solid #ccc;
617 display: inline-block;
624 .widget_toolbar li.current a,
625 .widget_toolbar li.current a:hover {
626 border-bottom: 2px solid #38f;
630 .widget_toolbar li a {
631 padding-bottom: .35em !important;
635 .widget_toolbar li a:hover {
636 border-bottom: 2px solid #999;
640 table.listing tbody tr:nth-child(even),
642 background-color: #CDDCF3;
645 table.listing tbody tr:nth-child(odd),
647 background-color: #FFFFFF;
655 border-collapse: collapse;
658 .listTable table td {
660 border: 1px solid gray;
668 margin-bottom: 1.25em;
670 /*border-collapse: collapse;*/
671 border-bottom: 1px solid #61697C;
672 border-spacing: 6px 0;
679 border-top-left-radius: 6px;
680 border-top-right-radius: 6px;
681 display: inline-block;
682 padding: 6px 8px 1px 8px;
699 display: flex !important;
700 flex-wrap: wrap !important;
702 .abc strong, .abc a, .abc input[type=submit] {
703 border:1px solid #9996 !important;
704 border-radius: 2px !important;
705 font-size: 1em !important;
706 padding: .2em .8em 0 .8em !important;
707 margin: .1em !important;
708 text-align: center !important;
709 text-shadow: 1px 1px #ccc6;
710 transition-property: background-color, text-shadow;
711 transition-duration: 0.3s;
713 .abc strong, .abc a {
714 width: .7em !important;
717 color: #444 !important;
719 .abc a, .abc input[type=submit] {
720 background: #ccc6 !important;
721 color: #36c !important;
723 .abc a:hover, .abc input[type=submit]:hover {
724 background: #fff6 !important;
725 color: #38f !important;
730 ----------------------------------------------- */
736 padding: 1.5em .5em .5em .5em;
738 border-top: 1px solid #ccc;
761 opacity: 1 !important;
762 transition: opacity ease-in 2s;
765 border: 8px solid #fff;
767 border-top: 8px solid #0000;
770 -webkit-animation: spin 2s linear infinite; /* Safari */
771 animation: spin 2s linear infinite;
780 @-webkit-keyframes spin {
781 0% { -webkit-transform: rotate(0deg); }
782 100% { -webkit-transform: rotate(360deg); }
786 0% { transform: rotate(0deg); }
787 100% { transform: rotate(360deg); }
790 /* error_msg, warning_msg or feedback function
791 ----------------------------------------------- */
792 span.active, span.deleted, span.pending, span.suspended {
796 .active {background-color: #cfc;}
797 .deleted {background-color: #cff;}
798 .pending {background-color: #ddd;}
799 .suspended {background-color: #fc6;}
801 background-color: #ff4940; /* red */
802 border: 1px solid red;
805 text-shadow: 1px 1px #ff7c73;
813 .warning_msg, .warning, .tips, .important {
814 background-color: #ffd297; /* orange */
815 border: 1px solid #ffa500; /* orange */
818 text-shadow: 1px 1px #fff5CA;
826 background-color: #aef26d; /* green */
827 border: 1px solid green;
830 text-shadow: 1px 1px #DFF59f;
838 background-color: #bdd0f2;
839 border: 1px solid #3a5fa5;
840 padding: 7px 7px 4px 7px;
842 text-shadow: 1px 1px #bcf;
850 background-color: #ff4940; /* red */
851 border: 1px solid red;
854 text-shadow: 1px 1px #ff7c73;
860 background-color: #ff4940; /* red */
861 border: 1px solid red;
864 text-shadow: 1px 1px #ff7c73;
871 border-radius: 0.5em 0.5em 0 0;
872 border-bottom: 1px solid #E2E3E4;
873 padding: 3px 3px 3px 10px;
874 margin: 0 -4px 0 -4px;
883 border-radius: 0.7em;
884 border:1px solid #c2c3c4;
885 box-shadow: 1px 1px 4px #c2c3c4;
888 .priority1 { background-color: #f3f4db}
889 .priority2 { background-color: #fcecc2}
890 .priority3 { background-color: #fde4aa}
891 .priority4 { background-color: #fcd986}
892 .priority5 { background-color: #fac955}
894 .table-header-rotated {
895 border-collapse: collapse;
898 .table-header-rotated td {
902 border: 1px solid #ccc;
905 .table-header-rotated th.rotate {
910 .table-header-rotated th.rotate>div {
911 transform: translate(25px, 51px) rotate(315deg);
915 .table-header-rotated th.rotate>div>span {
916 border-bottom: 1px solid #ccc;
920 .table-header-rotated th.row-header {
922 border-bottom: 1px solid #ccc;
925 table.listing thead tr th {
926 background-color: #707d97 !important;
931 table.listing thead tr th,
932 table.listing tbody tr td {
933 padding: 4px 8px !important;
936 table.listing thead tr th a {
940 table.listing tbody tr:nth-child(2n), .even {
941 background-color: #e0dfd6 !important;
944 table.listing tbody tr:nth-child(2n+1), .odd {
945 background-color: #e6e6e0 !important;
949 vertical-align: middle;
953 background-color: #c33;
956 text-shadow: 0 0 1px #960;
957 padding: .4em .8em .1em .8em;
964 .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 {
965 background:none !important;
966 background-color: #d7d7d7 !important;
967 border:1px solid #a7a7a7 !important;
968 color: #222 !important;
969 text-shadow:1px 1px #eee;
970 transition-property: background-color, text-shadow;
971 transition-duration: 0.3s;
974 padding:.6em 1em .3em 1em !important;
976 .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 {
977 border: 1px solid #505d77;
978 background-color: #f7f7f7 !important;
979 border:1px solid #878787 !important;
980 color: black !important;
981 text-shadow:1px 1px #fff;
984 /* Hide number input spinners */
985 input[type='number'] {
986 -moz-appearance:textfield;
988 input::-webkit-outer-spin-button,
989 input::-webkit-inner-spin-button { -webkit-appearance: none; }
990 /* end Hide number input spinners */
992 @media only screen and (max-width:1023px) {
995 padding-bottom: .3em;
998 /* =hamburgerMenuOn */
1001 padding: .8em 0 0 .8em;
1002 display: inline-block;
1005 div[role="search"] {
1016 #userlinkshamburgerdiv {
1021 #menudiv input:checked ~ #hamburgermenudiv {
1026 visibility: visible;
1027 transition: all ease-out .4s;
1030 #menudiv input:not(:checked) ~ #hamburgermenudiv {
1038 #hamburgermenudiv .tabGenerator {
1040 flex-direction: column;
1044 #userlinkshamburgerdiv ul,
1045 #hamburgermenudiv .tabGenerator ul {
1047 flex-direction: column;
1053 #userlinkshamburgerdiv li,
1054 #hamburgermenudiv .tabGenerator li {
1055 display: inline-block;
1058 border-top: 1px solid #707d97;
1062 #userlinkshamburgerdiv {
1067 #userlinkshamburgerdiv li {
1071 #userlinkshamburgerdiv li a {
1075 white-space: no-wrap;
1078 #hamburgermenudiv .tabGenerator span{
1082 #title-home-page img {