Browse Source

feuille de style adaptee avec notamment des variables css permettant de personaliser les couleurs facilement

master
Cerdic 5 months ago
parent
commit
acc221528e
  1. 285
      css/minical-datepicker.css
  2. 133
      css/minical.css

285
css/minical-datepicker.css

@ -0,0 +1,285 @@
/*!
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
.datepicker {
padding: 4px;
border-radius: 4px;
direction: ltr;
}
.datepicker-inline {
width: 220px;
border: 1px solid var(--minical-border-color,#eee);
}
.datepicker-rtl {
direction: rtl;
}
.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid var(--minical-border-dark-color,#999);
border-top: 0;
border-bottom-color: var(--minical-border-color,#eee);
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid var(--minical-border-dark-color,#999);;
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid #fff;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
border-radius: 4px;
border: none;
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
background: #eee;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: var(--minical-day-disabled-color,#999);;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: none;
color: var(--minical-day-disabled-color,#999);;
cursor: default;
}
.datepicker table tr td.highlighted {
background: #d9edf7;
border-radius: 0;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover {
background: #eee;
border-radius: 0;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
background-color: var(--minical-active-bg,#0044cc);
border: 1px solid var(--minical-active-border-color,#0044cc);
color: var(--minical-active-color,#fff);
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
background-color: var(--minical-active-bg-hover,#0044cc);
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
border-radius: 4px;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
background: #eee;
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: none;
color: var(--minical-day-disabled-color,#999);;
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
background-color: var(--minical-active-bg,#0044cc);
border: 1px solid var(--minical-active-border-color,#0044cc);
color: var(--minical-active-color,#fff);
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled,
.datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled],
.datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled],
.datepicker table tr td span.active.disabled:hover[disabled] {
background-color: var(--minical-active-bg-hover,#0044cc);
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
color: var(--minical-day-disabled-color,#999);;
}
.datepicker .datepicker-switch {
width: 145px;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
cursor: pointer;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #eee;
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
border-radius: 0 3px 3px 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 20px;
padding: 4px 5px;
font-weight: normal;
line-height: 20px;
text-align: center;
text-shadow: 0 1px 0 #fff;
vertical-align: middle;
background-color: #eee;
border: 1px solid #ccc;
margin-left: -5px;
margin-right: -5px;
}
.datepicker.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
float: left;
display: none;
min-width: 160px;
list-style: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
*border-right-width: 2px;
*border-bottom-width: 2px;
color: #333333;
font-size: 13px;
line-height: 20px;
}
.datepicker.dropdown-menu th,
.datepicker.datepicker-inline th,
.datepicker.dropdown-menu td,
.datepicker.datepicker-inline td {
padding: 4px 5px;
}
/*# sourceMappingURL=bootstrap-datepicker.standalone.css.map */

133
css/minical.css

@ -1,57 +1,90 @@
/* CSS Document */
.calendriermini { margin-bottom: 1em; }
.calendriermini .calendar-container { height: 17em; position: relative; }
.calendriermini .calendar-container .image_loading { position: absolute; top: 0; right: 0; }
.calendriermini .calendar-container { height: 17em; position: relative;}
.calendriermini .calendar-container .image_loading { position: absolute; top: 50%; left: 50%; margin-top:-16px;margin-left: -16px;}
:root {
--minical-border-color: #ccc;
--minical-active-bg: #f3d17a;
--minical-active-color: #333;
--minical-active-border-color: transparent;
--minical-active-bg-hover: #deba5d;
--minical-border-dark-color: #999;
--minical-day-disabled-color: #999;
--minical-calendrier-couleur6-bg:#DBB8DC;
--minical-calendrier-couleur6-bg-hover: #cd9fce;
--minical-calendrier-couleur6-color:#636;
}
.js .calendriermini .calendar-container .alt { display: none; }
.calendriermini table { width: 100%; font-size: 0.8em; text-align: center; margin: 0 auto; border-collapse: collapse; }
.calendriermini table { width: 100%; font-size: 0.8em; text-align: center; margin: 0 auto; border-collapse: collapse;}
.calendriermini table caption { margin: 0 auto; padding: 0; }
.calendriermini table th { padding: 0; }
.calendriermini table td { width: 14%; line-height: 2em; padding: 0; }
.calendriermini table td a { display: block; background: #fff; border: 1px solid #EEE; font-weight: bold; text-decoration: none; color: inherit; }
.calendriermini .ui-datepicker-other-month { opacity: 0.5; filter: Alpha(Opacity=50); }
.calendriermini .ui-datepicker-other-month a { font-weight: normal; background: #eee; }
.calendriermini .ui-state-highlight a { background: #EAEA98; border-color: #EAEA98; }
.calendriermini .ui-datepicker-today a { border-color: #bbbb99; }
.calendriermini table .ui-state-highlight a:hover { background: #DBB8DC; color: #636; border-color: #DBB8DC; }
.calendriermini table .ui-state-highlight.ui-datepicker-today a:hover { border-color: #636; }
.calendriermini .ui-icon { display: block; width: 16px; height: 16px; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; background-position: center; }
.calendriermini .ui-datepicker-header { position: relative; padding: .2em 0; }
.calendriermini .ui-datepicker-prev,
.calendriermini .ui-datepicker-next { position: absolute; top: 2px; width: 1.8em; height: 1.8em; }
.calendriermini .ui-datepicker-prev-hover,
.calendriermini .ui-datepicker-next-hover { top: 1px; }
.calendriermini .ui-datepicker-prev { left: 2px; }
.calendriermini .ui-datepicker-next { right: 2px; }
.calendriermini .ui-datepicker-prev .ui-icon { background-position: top left; }
.calendriermini .ui-datepicker-next .ui-icon { background-position: top right; }
.calendriermini .ui-datepicker-prev-hover { left: 1px; }
.calendriermini .ui-datepicker-next-hover { right: 1px; }
.calendriermini .ui-datepicker-prev span,
.calendriermini .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.calendriermini .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.calendriermini .ui-datepicker-title select { font-size: 1em; margin: 1px 0; }
.calendriermini select.ui-datepicker-month-year { width: 100%; }
.calendriermini select.ui-datepicker-month,
.calendriermini select.ui-datepicker-year { width: 49%; }
.calendriermini .ui-datepicker-buttonpane { background-image: none; margin: 0; padding: 0 .2em; border-left: 0; border-right: 0; border-bottom: 0; font-size: 0.8em; }
.calendriermini .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width: auto; overflow: visible; }
/* RTL support */
/*
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
*/
.calendriermini table th,td { width: 14%; line-height: 1.75em; padding: 0; background: #fff ;}
.calendriermini table .day.active {font-weight: bold;}
.calendriermini .datepicker .day.calendrier-couleur1 {
background-color: var(--minical-calendrier-couleur1-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur1-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur1-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur1:hover,
.calendriermini .datepicker .day.calendrier-couleur1:active {
background-color: var(--minical-calendrier-couleur1-bg-hover, var(--minical-active-bg-hover));
}
.calendriermini .datepicker .day.calendrier-couleur2 {
background-color: var(--minical-calendrier-couleur2-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur2-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur2-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur2:hover,
.calendriermini .datepicker .day.calendrier-couleur2:active {
background-color: var(--minical-calendrier-couleur2-bg-hover, var(--minical-active-bg-hover));
}
.calendriermini .datepicker .day.calendrier-couleur3 {
background-color: var(--minical-calendrier-couleur3-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur3-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur3-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur3:hover,
.calendriermini .datepicker .day.calendrier-couleur3:active {
background-color: var(--minical-calendrier-couleur3-bg-hover, var(--minical-active-bg-hover));
}
.calendriermini .datepicker .day.calendrier-couleur4 {
background-color: var(--minical-calendrier-couleur4-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur4-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur4-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur4:hover,
.calendriermini .datepicker .day.calendrier-couleur4:active {
background-color: var(--minical-calendrier-couleur4-bg-hover, var(--minical-active-bg-hover));
}
.calendriermini .datepicker .day.calendrier-couleur5 {
background-color: var(--minical-calendrier-couleur5-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur5-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur5-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur5:hover,
.calendriermini .datepicker .day.calendrier-couleur5:active {
background-color: var(--minical-calendrier-couleur5-bg-hover, var(--minical-active-bg-hover));
}
.calendriermini .datepicker .day.calendrier-couleur6 {
background-color: var(--minical-calendrier-couleur6-bg, var(--minical-active-bg));
border-color: var(--minical-calendrier-couleur6-border-color, var(--minical-active-border-color));
color: var(--minical-calendrier-couleur6-color, var(--minical-active-color));
}
.calendriermini .datepicker .day.calendrier-couleur6:hover,
.calendriermini .datepicker .day.calendrier-couleur6:active {
background-color: var(--minical-calendrier-couleur6-bg-hover, var(--minical-active-bg-hover));
}
Loading…
Cancel
Save