/* $Id$ */ /* Header classes */ tr.dialogHeader td, tr.dialogHeader2 td, tr.dialogHeader3 td, tr.dialogHeader4 td, tr.dialogOperators td,.dialogFooterToolbar { padding: 5px 0 5px 0; vertical-align: middle; } .calendar_inputFullWidth input { width: 100%; } /****************************************************************** * CSS settings for the day, week and month view (timeGridWidget) * ******************************************************************/ /* Names used in the "graphic" are the css classes from this file. The function names in class uiviews have the leading cal removed and a trailing Widget added: e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget method of uiviews. +++ calendar_calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ + #### calendar_calDayCols[12h|NoGrip] ########################################################### + #... calendar_calDayCol ............................. ... calendar_calDayCol .......................... + #.+- calendar_calDayColHeader ---------------------+. .+- calendar_calDayColHeader ------------------+. + #.| |. .| |. + #.+---------------------------------------+. .+------------------------------------+. +.calendar_calTimeRowTime.#.** calendar_calEventCol ***** ** calendar_calEventCol *****. .** calendar_calEventCol ***********************. +. .#.* * * *. .* *. +. .#.* * * *. .* *. +................#.*+- calendar_calEvent -----+* * *. .* *. +.calendar_calTimeRowTime.#.*| |* * *. .*+- calendar_calEvent[Private] --------------+*. +. .#.*| |* *+- calendar_calEvent -----+*. .*| |*. +. .#.*+----------------+* *| |*. .*| |*. +................#.* * *| |*. .*| |*. +.calendar_calTimeRowTime.#.* * *+----------------+*. .*| |*. +. .#.* * * *. .*+----------------------------------+*. */ /* custom ui-tooltip style for calendar */ .calendar_uitooltip { padding: 0px; position: absolute; border: none; max-height: 400px; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px; -moz-box-shadow: 0 0 5px; box-shadow: 0 0 5px; } .calendar_size120b { font-size: 120%; font-weight: bold; } /* marks a day in the colum-header as today */ .calendar_calToday{ background: #ffffcc; } .calendar_calWeek{ background: #ffffcc; width:auto; margin:0 auto; text-align:center; } .calendar_calMonth{ background: #ffffcc; width:auto; margin:0 auto; text-align:center; } /* marks a day in the colum-header as holiday */ .calendar_calHoliday{ background: #dac0c0; } /* marks a day in the column-header additionaly as birthday of some contact, * it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off */ .calendar_calBirthday,.calendar_calBirthday a{ color: black; font-weight: bold; font-style: italic; } /* timeGridWidget, contains timeRow's and dayCol's */ .calendar_calTimeGrid{ position: relative; top: 0px; left: 0px; border:1px solid silver; width: 99%; /* set via inline style on runtime: * height: */ } /* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can */ .calendar_calTimeRow,.calendar_calTimeRowOff{ position: absolute; width: 100%; /* set via inline style on runtime: * height: * top: */ } .calendar_calTimeRow{ /* background-color: silver; */ } /* time in a timeRow */ .calendar_calTimeRowTime{ padding-left: 5px; height: 100%; line-height: 14px; font-size:8pt; text-align: left; } /* contains (multiple) dayCol's */ .calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{ position: absolute; top: 0px; /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ height: 100%; left: 45px; right: 0px; } /* 12h timeformat with am/pm */ .calendar_calDayCols12h{ left: 65px; } /* no time grid --> no time column */ .calendar_calDayColsNoTime{ left: 0px; } /* contains (multiple) eventCol's */ .calendar_calDayCol{ position: absolute; top: 0px; height: 100%; /* set via inline style on runtime: * left: * width: */ border-left: 1px solid silver; } /* Calendar Id # */ .calendar_calId:before {} #calendar-edit_id:before { content:"#"} /* header for the dayCol */ .calendar_calDayColHeader,.calendar_calGridHeader{ position: absolute; top: 0px; left: 0px; width: 100%; right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */ text-align: center; font-size: 100%; white-space: nowrap; border-bottom: 1px solid silver; border-right: 1px solid silver; height: 16px; line-height: 16px; z-index: 30; } .calendar_calDayColHeader img { vertical-align: middle; } .calendar_calWeekNavHeader,.calendar_calMonthNavHeader { top: 0px; left: 0px; width: 100%; right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */ text-align: center; font-size: 100%; white-space: nowrap; border-bottom: 1px solid silver; border-right: 1px solid silver; height: 16px; line-height: 12px; z-index: 30; } .calendar_calWeekNavHeader,.calendar_calMonthNavHeader img { vertical-align: middle; } .calendar_calViewUserNameBox { position: absolute; top: -1px; width: 95%; text-align: left; font-size: 120%; white-space: nowrap; border: 1px solid gray; height: 17px; left: -1px; padding-top: 0px; padding-left: 10px; background: #dac0c0; } .calendar_calViewUserName { font-weight: normal; } .calendar_calViewUserName:first-letter { text-transform:uppercase; } .calendar_calViewUserNameFirst { } .calendar_calViewUserNameFirst:after { content: ", "; } /* alarm_date widget disabled class */ .calendar_alarm_date_display { display: none; } /*overwirte margin applied by egwGridView*/ .calendar_alarm_grid{ margin-left: 0 !important; } /* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) */ .calendar_calGridHeader{ text-align: left; padding-left: 3px; } /* contains (multiple) events's */ .calendar_calEventCol{ position: absolute; top: 0px; /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ height: 100%; /* set via inline style on runtime: * left: * width: */ } /* contains one event: header-row & -body */ .calendar_calEvent,.calendar_calEventPrivate{ position: absolute; left: 0px; right: 0px; overflow: hidden; z-index: 20; border-width: 1px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; /* set via inline style on runtime: * top: depending on startime * height: depending on length * border-color: depending on category * background: depending on category (shade) */ } .calendar_calEvent:hover{ cursor: pointer; } /** * All participants accepted the invitation */ .calendar_calEventAllAccepted { border-style: solid; border-width: 1px; } /** * All participants answered the invitation, but not all accepted */ .calendar_calEventAllAnswered { border-style: dotted; border-width: 2px; } /** * Some participants did NOT answer the invitation */ .calendar_calEventSomeUnknown { border-style: dashed; border-width: 1px; } .calendar_calEventTooltip{ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; max-height: 400px; overflow: auto; } .calendar_calAddEvent{ position: absolute; width: 100%; z-index: 10; } .calendar_calAddEvent:hover{ background-color: #D2D7FF; cursor: pointer; } /* header-row of the event */ .calendar_calEventHeader,.calendar_calEventHeaderSmall{ position: relative; /* as the calendar_calEventIcons use postion: absolute! */ font-weight: bold; font-size: 9pt; text-align: left; left: 0px; right: 0px; padding-left: 2px; /* set via inline style on runtime * background-color: depending on category * color: white || black depending on cat; */ } .calendar_calEventHeaderSmall{ font-size: 8pt; line-height: 10pt; } .calendar_calEventIcons{ position: absolute; right: 0px; top: 0px; } .calendar_calEventIcons img{ height: 16px; } .calendar_calEventHeaderSmall .calendar_calEventIcons img{ height: 13px; } /* body of the event */ .calendar_calEventBody,.calendar_calEventBodySmall{ padding: 0px 3px 0px; left: 2px; right: 2px; height: 99%; } .calendar_calEventBodySmall{ font-size: 95%; } .calendar_calEventLabel{ font-weight: bold; font-size: 90%; } .calendar_calEventTitle{ font-weight: bold; font-size: 110%; } /* table of the dayView containing 2 cols: 1) day-view, 2) todos */ .calendar_calDayView{ width: 100%; } /* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable */ .calendar_calDayTodos .calendar_calDayTodosHeader { margin: 0px; padding: 2px; font-weight: bold; } .calendar_calDayTodos .calendar_calDayTodosTable { overflow: auto; max-height: 400px; } .calendar_calDayTodos { width: 98%; margin-left: 10px; border: 1px solid silver; } .calendar_calDayTodosHeader { text-align: center; } /****************************************************** * CSS settings for the planner views (calendar_plannerWidget) * ******************************************************/ /* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets */ .calendar_plannerWidget { position: relative; top: 0px; left: 0px; width: 99.5%; border: 1px solid gray; padding-right: 3px; } /* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows */ .calendar_plannerHeader { position: relative; top: 0px; left: 0px; width: 100%; } /* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows */ .calendar_plannerRowWidget { position: relative; top: 0px; left: 0px; width: 100%; } /* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales */ .calendar_plannerScale,.calendar_plannerScaleDay { position: relative; top: 0px; left: 0%; width: 100%; height: 20px; line-height: 20px; } .calendar_plannerScaleDay { height: 28px; line-height: 14px; } .calendar_plannerDayScale,.calendar_plannerMonthScale,.calendar_plannerWeekScale,.calendar_plannerHourScale,.calendar_plannerDayOfMonthScale { position: absolute; top: 0px; /* left+width: is set by the code on runtime */ text-align: center; height: 100%; border: 1px solid white; /* set via inline style on runtime: * left: * width: */ } .calendar_plannerHourScale { font-size: 90%; } .calendar_plannerDayScale { font-size: 90%; } .calendar_plannerWeekScale { line-height: 20px; } .calendar_plannerMonthScale { font-weight: bold; } .calendar_plannerDayScale img,.calendar_plannerWeekScale img,.calendar_plannerMonthScale img,.calendar_plannerDayOfMonthScale img { vertical-align: middle; } /* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget */ .calendar_plannerRowHeader, .calendar_plannerHeaderTitle { position: absolute; top: 0px; left: 0%; width: 15%; /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */ height: 100%; line-height: 20px; border: 1px solid white; } /* calendar_eventRows contain multiple eventRowWidgets */ .calendar_eventRows, .calendar_plannerHeaderRows { position: relative; top: 0px; left: 15%; /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */ width: 85%; } /** * Filler for month with less then 31 days in yearly planner */ .calendar_eventRowsFiller { position: absolute; top: 0px; height: 93%; background-color: white; border: 1px dashed gray; border-right: none; } /** * Weekend or other special days in yearly planner */ .calendar_eventRowsMarkedDay { position: absolute; top: 0px; height: 100%; z-index: 10; } /* calendar_eventRowWidget contains non-overlapping events */ .calendar_eventRowWidget { position: relative; top: 0px; left: 0px; width: 100%; height: 20px; border: 1px solid white; } .calendar_plannerEvent,.calendar_plannerEventPrivate{ position: absolute; top: 0px; height: 100%; overflow: hidden; z-index: 20; border: 1px solid black; /* set via inline style on runtime: * left: depending on startime * width: depending on length * background-color: depending on category */ } .calendar_plannerEvent img,.calendar_plannerEventPrivate img { padding-top: 2px; } .calendar_plannerEvent:hover{ cursor: pointer; } /* Special colors for the year view */ .calendar_cal_year_legend_weekend { background-color: #CCCCCC; } .calendar_cal_year_legend { background-color: #EFEFEF; } .calendar_cal_year_legend { background-color: #FFFFCC; z-index: 0; } .calendar_cal_year_weekend { background-color: #F9F9CC; z-index: 0; } .calendar_cal_year_today { border-color: #EE0000; border-width: 2px; } /** * edit series or exception popup used in eventWidget and * delete series and exceptions popup used in edit event */ #dialog-content { display:block; height:100px; padding:6px; color:#666666; font-size:13px; margin: -2px -1px 0px -2px; width:410px; } /** * Calendar Drag and Drop * Class for div to show forbiden drop */ .calendar_d-n-d_timeCounter > span { position: absolute; background-color: #808080; color: white; left: 0; width: 100% !important; align: center; border: dashed white 1px; border-radius: 1px; } .calendar_timeDemo { position: absolute; bottom: 0; left: 0; background-color: #808080; color: white; width: 100%; align: center; border:dashed white 1px; border-radius: 1px; } .calendar_d-n-d_forbiden { background-color: red; height: 100%; width: 100%; text-align: center; } /*Class for div to demonstrate dragging time*/ .calendar_d-n-d_timeCounter { font-size: 1.1em; font-weight: bold; text-align: center; } #calendar-edit_action { width: 10em; padding-left: 10px; margin-left: 5px; } #calendar-list_undelete_popup, #calendar-list_delete_popup { display: none; }