Bug 28044: Increase specificity of calendar tables CSS
This patch adds increased specificity to the CSS which should add colors
to the tables of holidays. The default DataTable CSS was overriding the
custom color-coding.
This patch also moves the calendar CSS into a separate file.
To test, apply the patch and go to Tools -> Calendar.
If necessary, add at least one of the following:
- Unique holiday
- Holiday repeating weekly
- Holiday repeating monthly
- Holiday exception
In the table listing each kind of holiday, the color of the table header
should match the colors in the "Key" section under Hints. The color
should be correct regardless of how the table is sorted.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
(cherry picked from commit 4df8e3ef02)
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
This commit is contained in:
Owen Leonard
Fridolin Somers
parent
10bf4cb038
commit
42ebcdd3df
|
|
@ -0,0 +1,159 @@
|
|||
.key {
|
||||
padding: 3px;
|
||||
white-space: nowrap;
|
||||
line-height: 230%;
|
||||
}
|
||||
|
||||
.ui-datepicker {
|
||||
font-size: 150%;
|
||||
}
|
||||
|
||||
.ui-datepicker th,
|
||||
.ui-datepicker .ui-datepicker-title select {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.ui-datepicker td a {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.key {
|
||||
padding: 3px;
|
||||
white-space: nowrap;
|
||||
line-height: 230%;
|
||||
}
|
||||
|
||||
.normalday {
|
||||
background-color: #EDEDED;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
.exception,
|
||||
#holidayexceptions th.exception {
|
||||
background-color: #B3D4FF;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
.holiday,
|
||||
#holidaysunique th.holiday {
|
||||
background-color: #FFAEAE;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
.repeatableweekly,
|
||||
#holidayweeklyrepeatable th.repeatableweekly {
|
||||
background-color: #FFFF99;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
.repeatableyearly,
|
||||
#holidaysyearlyrepeatable th.repeatableyearly {
|
||||
background-color: #FFCC66;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
td.exception a.ui-state-default {
|
||||
background: #b3d4ff none;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
td.holiday a.ui-state-default {
|
||||
background: #FFAEAE none;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
td.repeatableweekly a.ui-state-default {
|
||||
background: #FFFF99 none;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
td.repeatableyearly a.ui-state-default {
|
||||
background: #FFCC66 none;
|
||||
color: #000;
|
||||
border: 1px solid #BCBCBC;
|
||||
}
|
||||
|
||||
.information {
|
||||
z-index: 1;
|
||||
background-color: #DCD2F1;
|
||||
width: 300px;
|
||||
display: none;
|
||||
border: 1px solid #000000;
|
||||
color: #000000;
|
||||
font-size: 8pt;
|
||||
font-weight: bold;
|
||||
background-color: #FFD700;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
z-index: 1;
|
||||
display: none;
|
||||
border: 3px solid #CCC;
|
||||
padding: 3px;
|
||||
margin-top: .3em;
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
fieldset.brief {
|
||||
border: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#showHoliday {
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
h1 select {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
fieldset.brief ol {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
fieldset.brief li,
|
||||
fieldset.brief li.radio {
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
.help {
|
||||
margin: .3em 0;
|
||||
border: 1px solid #EEE;
|
||||
padding: .3em .7em;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#holidayweeklyrepeatable,
|
||||
#holidaysyearlyrepeatable,
|
||||
#holidaysunique,
|
||||
#holidayexceptions {
|
||||
font-size: 90%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.calendar td,
|
||||
.calendar th,
|
||||
.calendar .button,
|
||||
.calendar tbody .day {
|
||||
padding: .7em;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.calendar {
|
||||
width: auto;
|
||||
border: 0;
|
||||
}
|
||||
|
|
@ -5,25 +5,7 @@
|
|||
[% INCLUDE 'doc-head-open.inc' %]
|
||||
<title>Koha › Tools › [% Branches.GetName( branch ) | html %] calendar</title>
|
||||
[% INCLUDE 'doc-head-close.inc' %]
|
||||
<style> .key { padding : 3px; white-space:nowrap; line-height:230%; }
|
||||
.ui-datepicker { font-size : 150%; }
|
||||
.ui-datepicker th, .ui-datepicker .ui-datepicker-title select { font-size : 80%; }
|
||||
.ui-datepicker td a { padding : .5em; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { font-size : 80%; }
|
||||
.key { padding : 3px; white-space:nowrap; line-height:230%; }
|
||||
.normalday { background-color : #EDEDED; color : Black; border : 1px solid #BCBCBC; }
|
||||
.exception { background-color : #b3d4ff; color : Black; border : 1px solid #BCBCBC; }
|
||||
.holiday { background-color : #ffaeae; color : Black; border : 1px solid #BCBCBC; }
|
||||
.repeatableweekly { background-color : #FFFF99; color : Black; border : 1px solid #BCBCBC; }
|
||||
.repeatableyearly { background-color : #FFCC66; color : Black; border : 1px solid #BCBCBC; }
|
||||
td.exception a.ui-state-default { background: #b3d4ff none; color : Black; border : 1px solid #BCBCBC; }
|
||||
td.holiday a.ui-state-default { background: #ffaeae none; color : Black; border : 1px solid #BCBCBC; }
|
||||
td.repeatableweekly a.ui-state-default { background: #FFFF99 none; color : Black; border : 1px solid #BCBCBC; }
|
||||
td.repeatableyearly a.ui-state-default { background: #FFCC66 none; color : Black; border : 1px solid #BCBCBC; }
|
||||
.information { z-index : 1; background-color : #DCD2F1; width : 300px; display : none; border : 1px solid #000000; color : #000000; font-size : 8pt; font-weight : bold; background-color : #FFD700; cursor : pointer; padding : 2px; }
|
||||
.panel { z-index : 1; display : none; border : 3px solid #CCC; padding : 3px; margin-top: .3em; background-color: #FEFEFE; } fieldset.brief { border : 0; margin-top: 0; }
|
||||
#showHoliday { margin : .5em 0; } h1 select { width: 20em; } fieldset.brief ol { font-size:100%; } fieldset.brief li, fieldset.brief li.radio { padding:0.2em 0; } .help { margin:.3em 0;border:1px solid #EEE;padding:.3em .7em; font-size : 90%; } #holidayweeklyrepeatable, #holidaysyearlyrepeatable, #holidaysunique, #holidayexceptions { font-size : 90%; margin-bottom : 1em;} .calendar td, .calendar th, .calendar .button, .calendar tbody .day { padding : .7em; font-size: 110%; } .calendar { width: auto; border : 0; }
|
||||
</style>
|
||||
[% Asset.css("css/calendar.css") | $raw %]
|
||||
</head>
|
||||
<body id="tools_holidays" class="tools">
|
||||
[% INCLUDE 'header.inc' %]
|
||||
|
|
|
|||
Loading…
Reference in New Issue