--- /dev/null
+/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */\r
+\r
+/* The wrapper div */\r
+div.datePicker\r
+ {\r
+ position:absolute; \r
+ z-index:9999;\r
+ text-align:center;\r
+\r
+ /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */\r
+ font:900 0.8em/1em Verdana, Sans-Serif;\r
+\r
+ /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */\r
+ /* font:900 77%/77% Verdana, sans-serif; */\r
+ \r
+ /* Or, if you prefer a pixel precision */\r
+ /* font:900 12px/12px Verdana, sans-serif; */\r
+ \r
+ background:transparent;\r
+\r
+ /* Mozilla & Webkit extensions to stop text-selection. Remove if you wish to validate the CSS */\r
+ -moz-user-select:none;\r
+ -khtml-user-select:none; \r
+ } \r
+/* You can add focus effects (for everything but IE6) like so: */\r
+div.datePicker:focus\r
+ {\r
+ /* Naughty, naughty - but we add a highlight using the table's border colour */\r
+ outline:none;\r
+ }\r
+div.datePicker:focus table\r
+ {\r
+ border-color:#aaa;\r
+ }\r
+/* Make the wrapper div larger if weeks are to be displayed */\r
+div.weeks-displayed\r
+ {\r
+ /* min-width:28em; \r
+ width:28em; */\r
+ }\r
+/* Styles for the static datePickers */\r
+div.static-datepicker\r
+ {\r
+ position:relative; \r
+ top:5px;\r
+ left:0;\r
+ }\r
+div.datePicker table\r
+ {\r
+ width:auto;\r
+ height:auto;\r
+ }\r
+/* Draggable datepickers */\r
+div.datePicker tfoot th.drag-enabled,\r
+div.datePicker thead th.drag-enabled,\r
+div.datePicker thead th.drag-enabled span\r
+ {\r
+ cursor:move;\r
+ }\r
+/* The iframe hack to cover selectlists in Internet Explorer <= v6 */\r
+iframe.iehack\r
+ {\r
+ position:absolute;\r
+ background:#fff;\r
+ z-index:9998;\r
+ padding:0;\r
+ border:0;\r
+ display:none;\r
+ margin:0;\r
+ }\r
+/* The "button" created beside each input for non-static datePickers */\r
+a.date-picker-control:link,\r
+a.date-picker-control:visited\r
+ {\r
+ position:relative;\r
+ /* Moz & FF */\r
+ display: -moz-inline-stack;\r
+ border:0 none;\r
+ padding:0;\r
+ margin:0 0 0 4px;\r
+ background:transparent url(../media/cal-grey.gif) no-repeat 50% 50%;\r
+ min-width:16px;\r
+ line-height:1;\r
+ cursor:pointer;\r
+ visibility:visible;\r
+ text-decoration:none;\r
+ vertical-align:top;\r
+ }\r
+a.date-picker-control:hover,\r
+a.date-picker-control:active,\r
+a.date-picker-control:focus,\r
+a.dp-button-active:link,\r
+a.dp-button-active:visited,\r
+a.dp-button-active:hover,\r
+a.dp-button-active:active,\r
+a.dp-button-active:focus\r
+ {\r
+ background:transparent url(../media/cal.gif) no-repeat 50% 50% !important;\r
+ }\r
+/* Feed IE6 the following rule, IE7 should handle the min-width declared above */\r
+* html a.date-picker-control\r
+ {\r
+ width:16px;\r
+ }\r
+/* IE, Safari & Opera. Seperate CSS rule seems to be required. */\r
+a.date-picker-control\r
+ {\r
+ display:inline-block;\r
+ }\r
+a.date-picker-control span\r
+ {\r
+ display:block;\r
+ width:16px;\r
+ height:16px;\r
+ margin:auto 0;\r
+ }\r
+/* Default "button" styles */\r
+div.datePicker thead th span\r
+ {\r
+ display:block;\r
+ padding:0;\r
+ margin:0;\r
+ text-align:center;\r
+ line-height:1em;\r
+ border:0 none;\r
+ background:transparent;\r
+ font-weight:bold;\r
+ cursor:pointer;\r
+ }\r
+/* The "month, year" display */\r
+div.datePicker th span.month-display,\r
+div.datePicker th span.year-display\r
+ {\r
+ display:inline;\r
+ text-transform:uppercase;\r
+ letter-spacing:1px;\r
+ font:normal 1.2em Verdana, Sans-Serif;\r
+ cursor:default; \r
+ }\r
+/* Next & Previous (month, year) buttons */\r
+div.datePicker th span.prev-but,\r
+div.datePicker th span.next-but\r
+ {\r
+ font-weight:lighter;\r
+ font-size:2.4em;\r
+ font-family: georgia, times new roman, palatino, times, bookman, serif;\r
+ cursor:pointer !important;\r
+ }\r
+/* Hover effect for Next & Previous (month, year) buttons */\r
+div.datePicker th span.prev-but:hover,\r
+div.datePicker th span.next-but:hover,\r
+div.datePicker th span.today-but:hover\r
+ {\r
+ color:#a84444;\r
+ }\r
+/* Today button */\r
+div.datePicker th span.today-but\r
+ {\r
+ text-align:center;\r
+ margin:0 auto;\r
+ font:normal 1em Verdana, Sans-Serif;\r
+ width:100%;\r
+ text-decoration:none;\r
+ padding-top:0.3em;\r
+ text-transform:uppercase;\r
+ vertical-align:middle;\r
+ cursor:pointer !important \r
+ }\r
+/* Disabled Today button - IE6 will not see this rule as it should */\r
+div.datePicker th span.today-but.fd-disabled\r
+ {\r
+ display:none;\r
+ }\r
+/* Disabled buttons */\r
+div.datePicker th span.prev-but.fd-disabled:hover,\r
+div.datePicker th span.next-but.fd-disabled:hover,\r
+div.datePicker thead th span.fd-disabled\r
+ {\r
+ color:#aaa;\r
+ cursor:default !important; \r
+ display:block; /* required to get IE6 to play ball */\r
+ }\r
+\r
+/* The mon, tue, wed etc day buttons */\r
+div.datePicker th span.fd-day-header\r
+ {\r
+ text-align:center;\r
+ margin:0 auto;\r
+ font:900 1em Verdana, Sans-Serif;\r
+ text-decoration:none;\r
+ text-transform:lowercase;\r
+ cursor:pointer; \r
+ }\r
+/* The table */\r
+div.datePicker table\r
+ { \r
+ margin:0;\r
+ padding:0px;\r
+ border:1px solid #ccc; \r
+ background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;\r
+ text-align:center;\r
+ border-spacing:2px;\r
+ padding:0.3em; \r
+ width:auto; \r
+ empty-cells:show; \r
+ -moz-border-radius:0.8em; \r
+ }\r
+/* Common TD & TH styling */\r
+div.datePicker table td,\r
+div.datePicker table tbody th\r
+ { \r
+ border:0 none;\r
+ padding:0;\r
+ text-align:center;\r
+ vertical-align:middle; \r
+ cursor:pointer;\r
+ background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;\r
+ width:3em;\r
+ height:3em; \r
+ outline:none; \r
+ border:1px solid #ccc;\r
+ text-transform:none;\r
+ -moz-border-radius:2px;\r
+ -webkit-border-radius:2px;\r
+ border-radius:2px;\r
+ }\r
+div.datePicker table th\r
+ {\r
+ border:0 none;\r
+ padding:0; \r
+ font-weight:bold;\r
+ color:#222;\r
+ text-align:center;\r
+ vertical-align:middle; \r
+ text-transform:none; \r
+ }\r
+div.datePicker table thead th\r
+ {\r
+ height:auto !important;\r
+ }\r
+div.datePicker table tbody th\r
+ { \r
+ border:1px solid #dcdcdc; \r
+ }\r
+/* Week number display */\r
+div.datePicker table thead th.date-picker-week-header,\r
+div.datePicker table tbody th.date-picker-week-header\r
+ {\r
+ font-style:oblique; \r
+ background:transparent;\r
+ cursor:default; \r
+ }\r
+div.datePicker table thead th.date-picker-week-header\r
+ {\r
+ cursor:help;\r
+ border:0 none;\r
+ padding:0 0 0.2em 0;\r
+ }\r
+/* tfoot status bar */\r
+div.datePicker tfoot th\r
+ {\r
+ cursor:default;\r
+ font-weight:normal;\r
+ text-transform:uppercase;\r
+ letter-spacing:0.1em;\r
+ border:0 none;\r
+ background:transparent;\r
+ height:2.8em;\r
+ }\r
+/* TD cell that is _not_ used to display a day of the month */\r
+div.datePicker table tbody td.date-picker-unused\r
+ {\r
+ background:#fff url(../media/backstripes.gif);\r
+ border-color:#dcdcdc; \r
+ cursor:default !important;\r
+ }\r
+\r
+/* The TH cell used to display the "month, year" title */\r
+div.datePicker table thead th.date-picker-title\r
+ {\r
+ width:auto;\r
+ height:auto;\r
+ padding:0.4em 0;\r
+ }\r
+/* The "mon tue wed etc" day header styles */\r
+div.datePicker table thead th.date-picker-day-header\r
+ {\r
+ text-transform:lowercase;\r
+ cursor:help;\r
+ height:auto;\r
+ }\r
+/* The "todays date" style */\r
+div.datePicker table tbody td.date-picker-today\r
+ {\r
+ background:#fff url(../media/bullet2.gif) no-repeat 0 0;\r
+ color:rgb(100,100,100) !important;\r
+ }\r
+\r
+div.datePicker table tbody td.month-out.date-picker-highlight \r
+ {\r
+ color:#aa8866 !important;\r
+ }\r
+/* The "highlight days" style */\r
+div.datePicker table tbody td.date-picker-highlight,\r
+div.datePicker table thead th.date-picker-highlight\r
+ {\r
+ color:#a86666 !important;\r
+ }\r
+/* The "active cursor" style */\r
+div.datePicker table tbody td.date-picker-hover\r
+ {\r
+ background:#fff url(../media/bg_header.jpg) no-repeat 0 0;\r
+ cursor:pointer;\r
+ border-color:rgb(100,130,170) !important;\r
+ color:rgb(100,130,170); \r
+ }\r
+/* The "disabled days" style */\r
+div.datePicker table tbody td.day-disabled\r
+ { \r
+ background:#fff url(../media/backstripes.gif) no-repeat 0 0;\r
+ color:#aaa !important;\r
+ cursor:default;\r
+ text-decoration:line-through;\r
+ } \r
+div.datePicker table tbody td.month-out \r
+ {\r
+ border-color:#ddd;\r
+ color:#aaa !important;\r
+ background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px; \r
+ } \r
+/* The "selected date" style */\r
+div.datePicker table tbody td.date-picker-selected-date\r
+ {\r
+ color:#333 !important;\r
+ border-color:#333 !important;\r
+ }\r
+/* The date "out of range" style */\r
+div.datePicker table tbody td.out-of-range,\r
+div.datePicker table tbody td.not-selectable\r
+ {\r
+ color:#ccc !important;\r
+ font-style:oblique;\r
+ background:#fcfcfc !important;\r
+ cursor:default !important;\r
+ opacity:0.6;\r
+ } \r
+/* Week number "out of range" && "month-out" styles */\r
+div.datePicker table tbody th.month-out,\r
+div.datePicker table tbody th.out-of-range\r
+ {\r
+ color:#aaa !important;\r
+ font-style:oblique;\r
+ background:#fcfcfc !important; \r
+ }\r
+div.datePicker table tbody th.out-of-range\r
+ {\r
+ opacity:0.6;\r
+ } \r
+/* Used when the entire grid is full but next/prev months cannot be selected */\r
+div.datePicker table tbody td.not-selectable\r
+ {\r
+ opacity:0.8;\r
+ }\r
+div.datePicker table tbody tr\r
+ {\r
+ display:table-row;\r
+ }\r
+div.datePicker table tfoot sup\r
+ {\r
+ font-size:0.8em;\r
+ letter-spacing:normal;\r
+ text-transform:none;\r
+ height: 0;\r
+ line-height: 1;\r
+ position: relative;\r
+ top: -0.2em; \r
+ vertical-align: baseline !important;\r
+ vertical-align: bottom; \r
+ }\r
+/* INTERNET EXPLORER WOES\r
+ ======================\r
+ \r
+ Hover Effects\r
+ -------------\r
+ \r
+ Cannot deal with :focus and so the datePicker script adds the class "dp-row-highlight" to the\r
+ row currently being hovered over. This should enable you to add hover effects if desired.\r
+ \r
+ e.g. the following rule will highlight the cell borders in another colour when a row is moused over,\r
+ it looks like crap though so I didn't include the rule within the demo:\r
+ \r
+div.datePicker table tbody tr.dp-row-highlight td\r
+ {\r
+ border-color:#aaa;\r
+ }\r
+*/\r
+\r
+/* Remove the images for Internet Explorer <= v6 using the "* html" hack - (NTS: move this to it's own file) \r
+ This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes\r
+ which means that they are downloaded for every cell for every table - nasty shit indeed! */ \r
+* html div.datePicker table td\r
+ {\r
+ background-image:none;\r
+ }\r
+* html div.datePicker table td.date-picker-unused\r
+ {\r
+ background:#f2f2f2;\r
+ } \r
+@media screen and (-webkit-min-device-pixel-ratio:0) {\r
+ div.datePicker table\r
+ {\r
+ border-spacing:0.3em;\r
+ /* Naughty, naughty */\r
+ -webkit-box-shadow:0px 0px 5px #aaa;\r
+ -webkit-border-radius:0.8em;\r
+ }\r
+ div.static-datepicker table\r
+ {\r
+ -webkit-box-shadow:0 0 0 transparent;\r
+ }\r
+ div.static-datepicker:focus table\r
+ {\r
+ -webkit-box-shadow:0px 0px 5px #aaa;\r
+ }\r
+ div.datePicker table td,\r
+ div.datePicker table tbody th\r
+ {\r
+ padding:0.1em;\r
+ -webkit-border-radius:2px;\r
+ }\r
+ div.datePicker table tbody td.date-picker-hover\r
+ {\r
+ text-shadow:0px 0px 1px #fff;\r
+ -webkit-box-shadow:0px 0px 1px rgb(100,130,170);\r
+ }\r
+\r
+}\r
+\r
git://git.onelab.eu / plewww.git / blobdiff