Attachment #125709 for bug #28963

View | Details | Raw Unified | Return to bug 28963
Collapse All | Expand All

Lines 1-4 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss (-1 / +2 lines)
1	@import "vars";	1	@import "flatpickr_vars";
2		2
3	@-webkit-keyframes fpFadeInDown {	3	@-webkit-keyframes fpFadeInDown {
4	from {	4	from {
Lines 69-74 Link Here
69	direction: ltr;	69	direction: ltr;
70	display: none;	70	display: none;
71	font-size: 14px;	71	font-size: 14px;
		72	gap: 2px;
72	line-height: 24px;	73	line-height: 24px;
73	opacity: 0;	74	opacity: 0;
74	padding: 0;	75	padding: 0;

Lines 2-10 $bezier: cubic-bezier(0.23, 1, 0.32, 1); Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/_vars.scss (-2 / +2 lines)
2	$slideTime: 400ms;	2	$slideTime: 400ms;
3		3
4		4
5	$daySize: 39px;	5	$daySize: 39px !default;
6	$padding: $daySize / 16;	6	$padding: $daySize / 16;
7	$dayMargin: 2px;	7	$dayMargin: 2px !default;
8	$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;	8	$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
9	$calendarWidth: $daysWidth;	9	$calendarWidth: $daysWidth;
10		10




$daySize: 45px;
$exception_bg: #B3D4FF;
$holiday_bg: #FFAEAE;
$repeatableweekly_bg: #FFFF99;
$repeatableyearly_bg: #FFCC66;
$selected: #B9DB88;

@import "flatpickr";

.controls {
    display: block;
    padding: 3px 0;
}

.key {
    line-height: 230%;
    padding: 3px;
    white-space: nowrap;

    &.exception {
        background-color: $exception_bg;
    }

    &.holiday {
        background-color: $holiday_bg;
    }

    &.repeatableweekly {
        background-color: $repeatableweekly_bg;
    }

    &.repeatableyearly {
        background-color: $repeatableyearly_bg;
    }
}

.flatpickr-day {
    &.selected {
        background-color: $selected;
        border: 0;
    }

    &.exception {
        background-color: $exception_bg;

        &.selected {
            border: 3px solid $selected;
        }
    }

    &.holiday {
        background-color: $holiday_bg;

        &.selected {
            border: 3px solid $selected;
        }
    }

    &.repeatableweekly {
        background-color: $repeatableweekly_bg;

        &.selected {
            border: 3px solid $selected;
        }
    }

    &.repeatableyearly {
        background-color: $repeatableyearly_bg;

        &.selected {
            border: 3px solid $selected;
        }
    }
}

#holidayexceptions th.exception {
    background-color: $exception_bg;
}

#holidaysunique th.holiday {
    background-color: $holiday_bg;

    &.selected {
        border: 2px solid #fff4c6;
    }
}

#holidayweeklyrepeatable th.repeatableweekly {
    background-color: $repeatableweekly_bg;
}

#holidaysyearlyrepeatable th.repeatableyearly {
    background-color: $repeatableyearly_bg;
}

.panel {
    border: 1px solid #B9D8D9;
    border-radius: 4px;
    box-shadow: none;
    padding: 0;
    display: none;
    margin: 1em 0;
    z-index: 1;
}

fieldset.brief {
    border: 0;
    border-radius: 4px;
    margin: 0;
}

#showHoliday {
    margin: .5em 0;
}

fieldset.brief ol {
    font-size: 100%;
}

fieldset.brief li,
fieldset.brief li.radio {
    padding: 0.2em 0;
}

#holidayweeklyrepeatable,
#holidaysyearlyrepeatable,
#holidaysunique,
#holidayexceptions {
    font-size: 90%;
    margin-bottom: 1em;
}

#calendar-container {
    margin: 1em 0;
}

#calendar-anchor {
    display: none;
}

.flatpickr-calendar {
    border-radius: 0;
    border: 1px solid #B9D8D9;
    box-shadow: none;
}

.dayContainer {
    gap: 3px;
}




                            [% PROCESS options_for_libraries libraries => Branches.all( selected => branch ) %]
                        </select>

                        <!-- ******************************** FLAT PANELS ******************************************* -->
                        <!-- *****           Makes all the flat panel to deal with holidays                     ***** -->
                        <!-- **************************************************************************************** -->

                        <!-- ********************** Panel for showing already loaded holidays *********************** -->
                        <div class="panel" id="showHoliday">
                            <form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">
                                <input type="hidden" id="showHolidayType" name="showHolidayType" value="" />

                                        </li>
                                        <li class="dateinsert">
                                            <strong>To date: </strong>
                                            <input type="text" id="datecancelrange" name="datecancelrange" size="20" value="[% datecancelrange | html %]" />
                                        </li>
                                        <li>
                                            <label for="showTitle">Title: </label><input type="text" name="showTitle" id="showTitle" size="35" />

                            </form>
                        </div> <!-- /#showHoliday -->

                        <!-- Panel to deal with new holidays -->
                        <div class="panel" id="newHoliday">
                            <form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">
                                <fieldset class="brief">

                                        </li>
                                        <li class="dateinsert">
                                            <strong>To date: </strong>
                                            <input type="text" id="dateofrange" name="dateofrange" size="20" value="[% dateofrange | html %]" />
                                        </li>
                                        <li>
                                            <label for="title">Title: </label>

                            </form>
                        </div> <!-- /#newHoliday -->

                        <div id="calendar-container">
                            <h3>Calendar information</h3>
                            <span id="calendar-anchor"></span>
                        </div>
                        <!-- ************************************************************************************** -->
                        <!-- ******                              MAIN SCREEN CODE                            ****** -->
                        <!-- ************************************************************************************** -->
                        <h3>Calendar information</h3>
                        <div id="jcalendar-container"></div>
                        <div style="margin-top: 2em;">
                            <form action="copy-holidays.pl" method="post">
                                <input type="hidden" name="from_branchcode" value="[% branch | html %]" />

            location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch + '&calendardate=' + "[% calendardate | html %]";
        }

        /**
        * Build settings to be passed to the formatDay function for each day in the calendar
        * @param  {object} dayElem - HTML node passed from Flatpickr
        * @return {void}
        */
        function dateStatusHandler( dayElem ) {
            var day = dayElem.dateObj.getDate();
            var month = dayElem.dateObj.getMonth() + 1;
            var year = dayElem.dateObj.getFullYear();
            var weekDay = dayElem.dateObj.getDay();
            var weekDay = date.getDay();
            var dayMonth = month + '/' + day;
            var dateString = year + '/' + month + '/' + day;
            if (exception_holidays[dateString] != null) {
                formatDay( [ "exception", _("Exception: %s").format(exception_holidays[dateString].title)], dayElem );
            } else if ( week_days[weekDay] != null ){
                formatDay( [ "repeatableweekly", _("Weekly holiday: %s").format(week_days[weekDay].title)], dayElem );
            } else if ( day_month_holidays[dayMonth] != null ) {
                formatDay( [ "repeatableyearly", _("Yearly holiday: %s").format(day_month_holidays[dayMonth].title)], dayElem );
            } else if (holidays[dateString] != null) {
                formatDay( [ "holiday", _("Single holiday: %s").format(holidays[dateString].title)], dayElem );
            } else {
                formatDay( [ "normalday", _("Normal day")], dayElem );
            }
        }

        /**
        * Adds style and title attribute to a day on the calendar
        * @param  {object} settings - span class attribute ([0]) and title attribute ([1])
        * @param  {node}   dayElem  - HTML node passed from Flatpickr
        * @return {void}
        */
        function formatDay( settings, dayElem ){
            $(dayElem).attr("title", settings[1]).addClass( settings[0]);
        }

        /**
        * Triggers an action based on a click on a calendar day: If a holiday exists on
        * that day it loads an edit form. If there is no existing holiday one can be created
        * @param  {object} calendar - a Date object corresponding to the clicked day
        * @return {void}
        */
        function dateChanged( calendar ) {
            var day = calendar.getDate();
            var month = calendar.getMonth() + 1;
            var year = calendar.getFullYear();

                "sDom": 't',
                "bPaginate": false
            }));
            var tables = $("#holidayexceptions, #holidaysyearlyrepeatable, #holidaysunique").DataTable($.extend(true, {}, dataTablesDefaults, {
                "sDom": 't',
                "bPaginate": false,
                "createdRow": function( row, data, dataIndex ) {

            $("a.helptext").click(function(){
                $(this).parent().find(".hint").toggle(); return false;
            });

            var dateofrange = $("#dateofrange").flatpickr();

            var datecancelrange = $("#datecancelrange").flatpickr();

                        var ed = new Date($(this).datepicker("getDate"));
                        if (ed < sd) {
                            $(this).datepicker("setDate", startdate);
                            $(this).datepicker("option", "defaultDate", startdate);
                        }
                    }
                }
            });
            $("#datecancelrange").datepicker();
            $("#dateofrange").each(function () { this.value = "" });
            $("#datecancelrange").each(function () { this.value = "" });

            var maincalendar = $("#calendar-anchor").flatpickr({
                inline: true,
                onReady: function(){
                    return;
                },
                onDayCreate: function( dObj, dStr, fp, dayElem ){
                    /* for each day on the calendar, get the
                      correct status information for the date */
                    dateStatusHandler( dayElem );
                },
                onChange: function( selectedDates, dateStr, instance ){
                    var fromdate = selectedDates[0];
                    var enddate = dateofrange.selectedDates[0];

                    dateChanged( fromdate );

                    dateofrange.set( 'defaultDate', fromdate );
                    dateofrange.set( 'minDate', fromdate );

                    if ( enddate != undefined ) {
                        if ( enddate < fromdate ) {
                            dateofrange.set("defaultDate", fromdate);
                            dateofrange.setDate(fromdate);
                        }
                    }

                },
                defaultDate: new Date("[% keydate | html %]")
            });

            $(".hidePanel").on("click",function(){
                if( $(this).hasClass("showHoliday") ){
                    hidePanel("showHoliday");
- 

Return to bug 28963

Lines 41-51 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/holidays.tt (-70 / +70 lines)
41	[% PROCESS options_for_libraries libraries => Branches.all( selected => branch ) %]	41	[% PROCESS options_for_libraries libraries => Branches.all( selected => branch ) %]
42	</select>	42	</select>
43		43
44	<!-- ****************************** FLAT PANELS ***************************************** -->
45	<!-- *** Makes all the flat panel to deal with holidays *** -->
46	<!-- **************************************************************************************** -->
47
48	<!-- ******************** Panel for showing already loaded holidays ********************* -->
49	<div class="panel" id="showHoliday">	44	<div class="panel" id="showHoliday">
50	<form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">	45	<form action="/cgi-bin/koha/tools/exceptionHolidays.pl" method="post">
51	<input type="hidden" id="showHolidayType" name="showHolidayType" value="" />	46	<input type="hidden" id="showHolidayType" name="showHolidayType" value="" />
Lines 76-82 Link Here
76	</li>	71	</li>
77	<li class="dateinsert">	72	<li class="dateinsert">
78	<strong>To date: </strong>	73	<strong>To date: </strong>
79	<input type="text" id="datecancelrange" name="datecancelrange" size="20" value="[% datecancelrange \| html %]" class="datepicker"/>	74	<input type="text" id="datecancelrange" name="datecancelrange" size="20" value="[% datecancelrange \| html %]" />
80	</li>	75	</li>
81	<li>	76	<li>
82	<label for="showTitle">Title: </label><input type="text" name="showTitle" id="showTitle" size="35" />	77	<label for="showTitle">Title: </label><input type="text" name="showTitle" id="showTitle" size="35" />
Lines 141-147 Link Here
141	</form>	136	</form>
142	</div> <!-- /#showHoliday -->	137	</div> <!-- /#showHoliday -->
143		138
144	<!-- *************************** Panel to deal with new holidays ******************** -->	139	<!-- Panel to deal with new holidays -->
145	<div class="panel" id="newHoliday">	140	<div class="panel" id="newHoliday">
146	<form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">	141	<form action="/cgi-bin/koha/tools/newHolidays.pl" method="post">
147	<fieldset class="brief">	142	<fieldset class="brief">
Lines 174-180 Link Here
174	</li>	169	</li>
175	<li class="dateinsert">	170	<li class="dateinsert">
176	<strong>To date: </strong>	171	<strong>To date: </strong>
177	<input type="text" id="dateofrange" name="dateofrange" size="20" value="[% dateofrange \| html %]" class="datepicker" />	172	<input type="text" id="dateofrange" name="dateofrange" size="20" value="[% dateofrange \| html %]" />
178	</li>	173	</li>
179	<li>	174	<li>
180	<label for="title">Title: </label>	175	<label for="title">Title: </label>
Lines 228-242 Link Here
228	</form>	223	</form>
229	</div> <!-- /#newHoliday -->	224	</div> <!-- /#newHoliday -->
230		225
231	<!-- *************************************************************************************** -->	226	<div id="calendar-container">
232	<!-- **** END OF FLAT PANELS **** -->	227	<h3>Calendar information</h3>
233	<!-- *************************************************************************************** -->	228	<span id="calendar-anchor"></span>
234		229	</div>
235	<!-- ************************************************************************************** -->
236	<!-- **** MAIN SCREEN CODE **** -->
237	<!-- ************************************************************************************** -->
238	<h3>Calendar information</h3>
239	<div id="jcalendar-container"></div>
240	<div style="margin-top: 2em;">	230	<div style="margin-top: 2em;">
241	<form action="copy-holidays.pl" method="post">	231	<form action="copy-holidays.pl" method="post">
242	<input type="hidden" name="from_branchcode" value="[% branch \| html %]" />	232	<input type="hidden" name="from_branchcode" value="[% branch \| html %]" />
Lines 497-531 Link Here
497	location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch + '&calendardate=' + "[% calendardate \| html %]";	487	location.href='/cgi-bin/koha/tools/holidays.pl?branch=' + branch + '&calendardate=' + "[% calendardate \| html %]";
498	}	488	}
499		489
500	function Help() {	490	/**
501	newin=window.open("/cgi-bin/koha/help.pl","KohaHelp",'width=600,height=600,toolbar=false,scrollbars=yes');	491	* Build settings to be passed to the formatDay function for each day in the calendar
502	}	492	* @param {object} dayElem - HTML node passed from Flatpickr
503		493	* @return {void}
504	/* This function gives css clases to each kind of day */	494	*/
505	function dateStatusHandler(date) {	495	function dateStatusHandler( dayElem ) {
506	date = new Date(date);	496	var day = dayElem.dateObj.getDate();
507	var day = date.getDate();	497	var month = dayElem.dateObj.getMonth() + 1;
508	var month = date.getMonth() + 1;	498	var year = dayElem.dateObj.getFullYear();
509	var year = date.getFullYear();	499	var weekDay = dayElem.dateObj.getDay();
510	var weekDay = date.getDay();
511	var dayMonth = month + '/' + day;	500	var dayMonth = month + '/' + day;
512	var dateString = year + '/' + month + '/' + day;	501	var dateString = year + '/' + month + '/' + day;
513	if (exception_holidays[dateString] != null) {	502	if (exception_holidays[dateString] != null) {
514	return [true, "exception", _("Exception: %s").format(exception_holidays[dateString].title)];	503	formatDay( [ "exception", _("Exception: %s").format(exception_holidays[dateString].title)], dayElem );
515	} else if ( week_days[weekDay] != null ){	504	} else if ( week_days[weekDay] != null ){
516	return [true, "repeatableweekly", _("Weekly holiday: %s").format(week_days[weekDay].title)];	505	formatDay( [ "repeatableweekly", _("Weekly holiday: %s").format(week_days[weekDay].title)], dayElem );
517	} else if ( day_month_holidays[dayMonth] != null ) {	506	} else if ( day_month_holidays[dayMonth] != null ) {
518	return [true, "repeatableyearly", _("Yearly holiday: %s").format(day_month_holidays[dayMonth].title)];	507	formatDay( [ "repeatableyearly", _("Yearly holiday: %s").format(day_month_holidays[dayMonth].title)], dayElem );
519	} else if (holidays[dateString] != null) {	508	} else if (holidays[dateString] != null) {
520	return [true, "holiday", _("Single holiday: %s").format(holidays[dateString].title)];	509	formatDay( [ "holiday", _("Single holiday: %s").format(holidays[dateString].title)], dayElem );
521	} else {	510	} else {
522	return [true, "normalday", _("Normal day")];	511	formatDay( [ "normalday", _("Normal day")], dayElem );
523	}	512	}
524	}	513	}
525		514
526	/* This function is in charge of showing the correct panel considering the kind of holiday */	515	/**
527	function dateChanged(calendar) {	516	* Adds style and title attribute to a day on the calendar
528	calendar = new Date(calendar);	517	* @param {object} settings - span class attribute ([0]) and title attribute ([1])
		518	* @param {node} dayElem - HTML node passed from Flatpickr
		519	* @return {void}
		520	*/
		521	function formatDay( settings, dayElem ){
		522	$(dayElem).attr("title", settings[1]).addClass( settings[0]);
		523	}
		524
		525	/**
		526	* Triggers an action based on a click on a calendar day: If a holiday exists on
		527	* that day it loads an edit form. If there is no existing holiday one can be created
		528	* @param {object} calendar - a Date object corresponding to the clicked day
		529	* @return {void}
		530	*/
		531	function dateChanged( calendar ) {
529	var day = calendar.getDate();	532	var day = calendar.getDate();
530	var month = calendar.getMonth() + 1;	533	var month = calendar.getMonth() + 1;
531	var year = calendar.getFullYear();	534	var year = calendar.getFullYear();
Lines 579-585 Link Here
579	"sDom": 't',	582	"sDom": 't',
580	"bPaginate": false	583	"bPaginate": false
581	}));	584	}));
582	var tables = $("#holidayexceptions,#holidaysyearlyrepeatable,#holidaysunique").DataTable($.extend(true, {}, dataTablesDefaults, {	585	var tables = $("#holidayexceptions, #holidaysyearlyrepeatable, #holidaysunique").DataTable($.extend(true, {}, dataTablesDefaults, {
583	"sDom": 't',	586	"sDom": 't',
584	"bPaginate": false,	587	"bPaginate": false,
585	"createdRow": function( row, data, dataIndex ) {	588	"createdRow": function( row, data, dataIndex ) {
Lines 597-642 Link Here
597	$("a.helptext").click(function(){	600	$("a.helptext").click(function(){
598	$(this).parent().find(".hint").toggle(); return false;	601	$(this).parent().find(".hint").toggle(); return false;
599	});	602	});
600	$("#dateofrange").datepicker({	603
601	beforeShow: function() {	604	var dateofrange = $("#dateofrange").flatpickr();
602	var startdate = $("#jcalendar-container").datepicker("getDate");	605
603	if (startdate !== null) {	606	var datecancelrange = $("#datecancelrange").flatpickr();
604	var sd = new Date(startdate);	607
605	var ed = new Date($(this).datepicker("getDate"));
606	if (ed < sd) {
607	$(this).datepicker("setDate", startdate);
608	$(this).datepicker("option", "defaultDate", startdate);
609	}
610	}
611	}
612	});
613	$("#datecancelrange").datepicker();
614	$("#dateofrange").each(function () { this.value = "" });	608	$("#dateofrange").each(function () { this.value = "" });
615	$("#datecancelrange").each(function () { this.value = "" });	609	$("#datecancelrange").each(function () { this.value = "" });
616	$("#jcalendar-container").datepicker({	610
617	beforeShowDay: function(thedate) {	611	var maincalendar = $("#calendar-anchor").flatpickr({
618	var day = thedate.getDate();	612	inline: true,
619	var month = thedate.getMonth() + 1;	613	onReady: function(){
620	var year = thedate.getFullYear();	614	return;
621	var dateString = year + '/' + month + '/' + day;	615	},
622	return dateStatusHandler(dateString);	616	onDayCreate: function( dObj, dStr, fp, dayElem ){
		617	/* for each day on the calendar, get the
		618	correct status information for the date */
		619	dateStatusHandler( dayElem );
623	},	620	},
624	onSelect: function(dateText, inst) {	621	onChange: function( selectedDates, dateStr, instance ){
625	dateChanged($(this).datepicker("getDate"));	622	var fromdate = selectedDates[0];
626	var enddate = $("#dateofrange").datepicker("getDate");	623	var enddate = dateofrange.selectedDates[0];
627	$("#dateofrange").datepicker("option", "defaultDate", $(this).datepicker("getDate"));	624
628	$("#dateofrange").datepicker( "option", "minDate", $(this).datepicker("getDate")); //ensure end date can't be before start date	625	dateChanged( fromdate );
629	if (enddate !== null) {	626
630	var ed = new Date(enddate);	627	dateofrange.set( 'defaultDate', fromdate );
631	var sd = new Date($(this).datepicker("getDate"));	628	dateofrange.set( 'minDate', fromdate );
632	if (ed < sd) {	629
633	$("#dateofrange").datepicker("setDate", $(this).datepicker("getDate"));	630	if ( enddate != undefined ) {
634	$("#dateofrange").datepicker("option", "defaultDate", enddate);	631	if ( enddate < fromdate ) {
		632	dateofrange.set("defaultDate", fromdate);
		633	dateofrange.setDate(fromdate);
635	}	634	}
636	}	635	}
		636
637	},	637	},
638	defaultDate: new Date("[% keydate \| html %]")	638	defaultDate: new Date("[% keydate \| html %]")
639	});	639	});
		640
640	$(".hidePanel").on("click",function(){	641	$(".hidePanel").on("click",function(){
641	if( $(this).hasClass("showHoliday") ){	642	if( $(this).hasClass("showHoliday") ){
642	hidePanel("showHoliday");	643	hidePanel("showHoliday");
643	-

Line 0 Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/calendar.scss (+149 lines)
		1	$daySize: 45px;
		2	$exception_bg: #B3D4FF;
		3	$holiday_bg: #FFAEAE;
		4	$repeatableweekly_bg: #FFFF99;
		5	$repeatableyearly_bg: #FFCC66;
		6	$selected: #B9DB88;
		7
		8	@import "flatpickr";
		9
		10	.controls {
		11	display: block;
		12	padding: 3px 0;
		13	}
		14
		15	.key {
		16	line-height: 230%;
		17	padding: 3px;
		18	white-space: nowrap;
		19
		20	&.exception {
		21	background-color: $exception_bg;
		22	}
		23
		24	&.holiday {
		25	background-color: $holiday_bg;
		26	}
		27
		28	&.repeatableweekly {
		29	background-color: $repeatableweekly_bg;
		30	}
		31
		32	&.repeatableyearly {
		33	background-color: $repeatableyearly_bg;
		34	}
		35	}
		36
		37	.flatpickr-day {
		38	&.selected {
		39	background-color: $selected;
		40	border: 0;
		41	}
		42
		43	&.exception {
		44	background-color: $exception_bg;
		45
		46	&.selected {
		47	border: 3px solid $selected;
		48	}
		49	}
		50
		51	&.holiday {
		52	background-color: $holiday_bg;
		53
		54	&.selected {
		55	border: 3px solid $selected;
		56	}
		57	}
		58
		59	&.repeatableweekly {
		60	background-color: $repeatableweekly_bg;
		61
		62	&.selected {
		63	border: 3px solid $selected;
		64	}
65	}
66
67	&.repeatableyearly {
68	background-color: $repeatableyearly_bg;
69
70	&.selected {
71	border: 3px solid $selected;
72	}
73	}
74	}
75
76	#holidayexceptions th.exception {
77	background-color: $exception_bg;
78	}
79
80	#holidaysunique th.holiday {
81	background-color: $holiday_bg;
82
83	&.selected {
84	border: 2px solid #fff4c6;
85	}
86	}
87
88	#holidayweeklyrepeatable th.repeatableweekly {
89	background-color: $repeatableweekly_bg;
90	}
91
92	#holidaysyearlyrepeatable th.repeatableyearly {
93	background-color: $repeatableyearly_bg;
94	}
95
96	.panel {
97	border: 1px solid #B9D8D9;
98	border-radius: 4px;
99	box-shadow: none;
100	padding: 0;
101	display: none;
102	margin: 1em 0;
103	z-index: 1;
104	}
105
106	fieldset.brief {
107	border: 0;
108	border-radius: 4px;
109	margin: 0;
110	}
111
112	#showHoliday {
113	margin: .5em 0;
114	}
115
116	fieldset.brief ol {
117	font-size: 100%;
118	}
119
120	fieldset.brief li,
121	fieldset.brief li.radio {
122	padding: 0.2em 0;
123	}
124
125	#holidayweeklyrepeatable,
126	#holidaysyearlyrepeatable,
127	#holidaysunique,
128	#holidayexceptions {
129	font-size: 90%;
130	margin-bottom: 1em;
131	}
132
133	#calendar-container {
134	margin: 1em 0;
135	}
136
137	#calendar-anchor {
138	display: none;
139	}
140
141	.flatpickr-calendar {
142	border-radius: 0;
143	border: 1px solid #B9D8D9;
144	box-shadow: none;
145	}
146
147	.dayContainer {
148	gap: 3px;
149	}