diff --git a/calendar/templates/mobile/app.css b/calendar/templates/mobile/app.css new file mode 100644 index 0000000000..345aa26390 --- /dev/null +++ b/calendar/templates/mobile/app.css @@ -0,0 +1,2594 @@ +/** + * + * Calendar - Mobile + * + * Please do NOT change app.css directly, instead change app.less and compile it! + * Pixleegg Template app.css + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Hadi Nategh + * @package calendar + * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $ + */ +/** + * EGroupware: CSS with less preprocessor + * + * CALENDAR + * + * Please do NOT change app.css directly, instead change app.less and compile it! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhardt + * @package calendar + * @version $Id$ + */ +/* $Id: app.css 55127 2016-02-23 22:23:01Z nathangray $ */ +/*Media print classes*/ +@media print { + .th td, + .row_on td, + .row_off td { + border: none !important; + } + img.calendar_print_button { + display: none !important; + } + tr.calendar_print_cat { + border-bottom: 1px solid gray; + } +} +/** + * Sidebox + */ +#calendar-et2_target { + position: relative; +} +#calendar-sidebox_owner { + width: 90%; +} +#calendar-sidebox_owner ~ * { + vertical-align: top; + display: inline-block; +} +#calendar-sidebox_cat_id { + width: 90%; +} +#calendar-sidebox_cat_id ~ * { + vertical-align: top; + display: inline-block; +} +#calendar-sidebox_buttons tbody { + width: 100%; +} +#calendar-sidebox_date_header > button { + width: 45%; +} +#calendar-sidebox_header_go, +#calendar-sidebox_header_today { + position: absolute; + width: 12.0px; + height: 12.0px; + top: 28px; + z-index: 1; + overflow: hidden; + margin: 0.5em; + font-size: 10px; + line-height: 50%; + color: white; + background-color: #217bc0; + background-image: none; + border: none; + border-radius: 100%; +} +#calendar-sidebox_header_today { + right: 35px; +} +#calendar-sidebox_header_go { + right: 80px; + text-indent: -1px; +} +#calendar-sidebox_header_go:hover, +#calendar-sidebox_header_today:hover { + background-color: #0c5da5; + box-shadow: none; +} +#calendar-sidebox_date .ui-datepicker-header a { + top: 3px; +} +#calendar-sidebox_date .ui-datepicker-prev { + right: 3em; +} +#calendar-sidebox_weekend { + /* Special css styling goes here */ +} +#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title { + max-width: 10em; +} +#calendar-sidebox_date td.ui-datepicker-week-col { + cursor: pointer; +} +#calendar-sidebox_date .calendar_calHoliday { + background: inherit; +} +#calendar-sidebox_date .calendar_calHoliday a { + background-color: rgba(103, 159, 210, 0.5); +} +#calendar-sidebox_owner .ms-helper { + padding: 2px; + background-color: white; +} +/* Toolbar */ +#calendar-toolbar { + height: 30px; +} +#calendar-toolbar .egw_fw_ui_app_header_container { + border: none; +} +/* Space for toolbar */ +#calendar-view, +#calendar-todo, +#calendar-planner, +#calendar-list { + position: absolute; + left: 0px; + right: 0px; +} +#calendar-todo { + position: absolute; + width: 30%; + margin-top: 0px; + z-index: 10; +} +#calendar-view { + width: 100%; +} +#calendar-view_view td { + padding: 0px; +} +/* 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-color: rgba(103, 159, 210, 0.5); +} +/* 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: #626161; +} +/* timeGridWidget, contains timeRow's and dayCol's + */ +.calendar_calTimeGrid { + position: relative; + top: 0px; + left: 0px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + overflow: hidden; + display: flex; + flex-direction: column; +} +.calendar_calTimeGrid .calendar_calTimeGridScroll { + position: relative; + bottom: 0px; + width: 100%; + height: 100%; + overflow-y: auto; + overflow-x: hidden; + cursor: default; +} +.calendar_calTimeGrid .calendar_calTimeLabels { + height: 100%; +} +.calendar_calTimeGrid .loading, +.calendar_plannerWidget .loading { + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + position: absolute; +} +/* Timegrid that has hit a minimum size */ +.calendar_calTimeGridFixed .calendar_calTimeGridScroll { + overflow: hidden; +} +/* +Show the day headers for single week view only once. +Hide subsequent headers in week view with non-consolidated owners +*/ +#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader { + min-height: 0.5em; +} +#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader > div[data-date] { + display: none; +} +#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > ul > li { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > ul > li:hover { + overflow: visible; +} +/* single row in the time-line you dont need to set a bgcolor, but you can + */ +.calendar_calTimeRow { + width: 100%; + /* set via inline style on runtime: + * height: + * top: + */ +} +/* time in a timeRow + */ +.calendar_calTimeRowTime { + padding-left: 5px; + height: 100%; + line-height: 14px; + font-size: 8pt; + text-align: left; +} +.calendar_calTimeRowTime[data-minute='0'] { + border-top: 1px solid silver; + background-image: none; +} +.calendar_calTimeRowTime[data-minute='30'] { + background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75) 2px, transparent 0%); + background-position: top; + background-size: 6px 1px; + background-repeat: repeat-x; +} +/* 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: 58px; + right: 0px; + white-space: nowrap; +} +/* 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; + transition: none; +} +/* Calendar Id # +*/ +#calendar-edit_id:before { + content: "#"; +} +/* header for the dayCol + */ +.calendar_calDayColHeader, +.calendar_calGridHeader, +.calendar_calGridHeader > div { + font-size: 100%; + line-height: 16px; +} +.calendar_calDayColHeader { + display: inline-block; + position: relative; + vertical-align: top; + border-right: 1px solid silver; + height: initial; + min-height: 2em; + transition: none; + z-index: 30; + white-space: initial; + padding-bottom: 2ex; +} +.calendar_calDayColHeader > div[data-date] { + font-size: 14px; + line-height: 27px; + text-align: center; + border-bottom: 1px solid silver; + white-space: nowrap; + overflow: hidden; +} +/* Indicators for offscreen events */ +.calendar_calDayColHeader .hiddenEventBefore, +.calendar_calDayCol .hiddenEventAfter { + width: 80%; + left: 10%; + position: absolute; + border-radius: 5px; + border: 6px solid; + border-left: 0px; + border-right: 0px; + overflow: hidden; + z-index: 40; + cursor: pointer; +} +.calendar_calDayColHeader .hiddenEventBefore { + height: 2px; + bottom: -6px; + border-top: none; +} +.calendar_calDayColHeader .hiddenEventBefore:hover { + bottom: -20px; + height: 16px; + border-left: 1px; + border-right: 1px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; + background-color: white; +} +.calendar_calDayCol .hiddenEventAfter { + border-bottom: none; + height: 6px; +} +.calendar_calDayCol .hiddenEventAfter:hover { + margin-top: -20px; + height: 20px; + background-color: white; +} +.calendar_calTimeGridFixed .calendar_calDayCol .hiddenEventAfter:hover .calendar_calEvent { + position: relative; +} +/* Days in a different month, but shown to fill out the week */ +.calendar_calDayColHeader.calendar_differentMonth > * { + color: #6a6a6a; +} +.calendar_calDayCol.calendar_differentMonth { + background-color: rgba(200, 200, 200, 0.1); +} +/* Daily sortable */ +.calendar_calDayColHeader .ui-sortable-handle { + cursor: ew-resize; +} +.calendar_calDayColAllDay { + display: flex; + flex-wrap: wrap; + flex-direction: row; + align-items: flex-start; + width: 100%; + /* Set max height of all day section */ + max-height: 4.2em; + overflow: hidden; +} +/* If more all day events than shown, show ellipsis & show all on hover */ +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover { + max-height: none; + overflow: visible; + position: absolute; + background-color: #f0f0f0; + z-index: 50; + padding-bottom: 2ex; +} +.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after { + content: "\02026"; + line-height: 0.5em; + height: 1em; + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + text-align: center; +} +.calendar_calDayColAllDay > .calendar_calEventBodySmall { + white-space: nowrap; +} +.calendar_calGridHeader > div { + position: relative; + height: 100%; + margin-left: 58px; + width: initial; + white-space: nowrap; + border-left: 1px solid silver; + display: flex; + align-items: stretch; +} +.calendar_calGridHeader > label { + float: left; + font-size: 14px; + line-height: 27px; + width: 58px; + text-align: center; +} +.calendar_calGridHeader > ul { + position: absolute; + width: 55px; +} +.calendar_TimeGridNoLabel > .calendar_calGridHeader > ul { + display: none; +} +.calendar_calDayColHeader img { + vertical-align: middle; +} +.calendar_calWeekNavHeader, +.calendar_calMonthNavHeader { + top: 0px; + left: 0px; + width: 100%; + right: 0px; +} +.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: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; + z-index: 29; + border-bottom: 1px solid silver; + border-top: 1px solid silver; + min-height: 1ex; + flex: 0 0 auto; +} +#calendar-view_view tbody.ui-sortable { + cursor: default; +} +#calendar-view_view tbody.ui-sortable .calendar_calGridHeader { + cursor: ns-resize; +} +#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader { + cursor: pointer; +} +/* 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 { + position: absolute; + left: 0px; + right: 0px; + overflow: hidden; + z-index: 20; + padding-left: 6px; + min-height: 1.2em; + min-width: 5px; + /* It is important there are no CSS transitions, it breaks resize */ + -webkit-transition: none; + -moz-transition: none !important; + -o-transition: none !important; + -ms-transition: none !important; + transition: none !important; + opacity: 0.85; + /* set via inline style on runtime: + * top: depending on startime + * height: depending on length + * border-color: depending on category + * background: depending on category (shade) + * + */ + border-color: #808080; + background-color: #808080; +} +.calendar_calEvent:not(.rowNoView):hover { + cursor: pointer; +} +/** Multi-line ellipsis */ +.calendar_calEvent .calendar_calEventBody { + overflow: hidden; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after { + width: 100%; + background-color: rgba(255, 255, 255, 0.9); + height: 5px; + content: "\02026"; + left: 0px; + float: right; + padding-bottom: 5em; + text-indent: 5px; + line-height: 5px; +} +/** + * User has not accepted the invitation + */ +.calendar_calEventUnknown { + border-color: white; +} +.calendar_calEventUnknown .calendar_calEventBody, +.calendar_calEventUnknown .calendar_calEventBodySmall { + background-color: white !important; +} +/** + * All participants accepted the invitation + */ +/** + * All participants answered the invitation, but not all accepted + */ +.calendar_calEventAllAnswered { + background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.8) 50%); + background-repeat: repeat-y; + background-size: 6px 2px; +} +/** + * Some participants did NOT answer the invitation + */ +.calendar_calEventSomeUnknown:not(.calendar_calEventUnknown) { + background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5) 50%); + background-repeat: repeat-y; + background-size: 6px 5px; +} +.calendar_calEvent:not([class*=" cat_"]) { + /* Defaults for no category, so we don't override it */ + background-color: #808080; +} +/** + * Events in the header (all day) + */ +.calendar_calDayColHeader .calendar_calEvent { + position: static; + display: inline-block; + white-space: nowrap; + /* This determines how many per line */ + flex: 1 1 auto; +} +.calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody { + white-space: nowrap; + background-color: #f0f0f0; +} +.calendar_calEventTooltip { + padding-left: 6px; + max-height: 400px; + min-width: 25ex; + overflow: auto; +} +/* Do not show icons in header, only tooltip */ +.calendar_calEventTooltip .calendar_calEventIcons { + display: inline-block; +} +.calendar_calEventTooltip .calendar_calEventBody, +.calendar_calEventTooltip .calendar_calEventBodySmall { + padding-bottom: 1em; +} +.calendar_calEventTooltip img { + max-width: 1.5em; +} +.calendar_calAddEvent { + 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! */ + text-align: left; + left: 0px; + right: 0px; + padding-left: 2px; + min-height: 1em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + /* set via inline style on runtime + * background-color: depending on category + * color: white || black depending on cat; + */ + background-color: rgba(255, 255, 255, 0.9); +} +.calendar_calEventHeader .calendar_calEventTitle { + display: none; +} +.calendar_calEventHeaderSmall { + font-size: 8pt; + line-height: 10pt; +} +.calendar_calEventIcons { + position: absolute; + right: 0px; + top: 0px; + /* Do not show icons in header, only tooltip */ + display: none; +} +.calendar_calEventIcons img { + height: 13px; +} +.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%; + white-space: normal; + background-color: rgba(255, 255, 255, 0.9); +} +.calendar_calEventBody > p, +.calendar_calEventBodySmall > p { + white-space: pre-wrap; +} +.calendar_calEventBody .calendar_calTimespan { + display: none; +} +.calendar_calEventBodySmall { + font-size: 95%; +} +.calendar_calEventLabel { + font-weight: bold; + font-size: 90%; +} +.calendar_calEventTitle { + font-weight: bold; +} +/* Event is too small for full display */ +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan { + display: none; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan { + display: inline; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle, +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle { + display: inline; +} +.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody { + padding-top: 4em; +} +/* Events as displayed in a list, not sized by time */ +.calendar_calTimeGridList .calendar_calTimeGridScroll { + overflow-y: hidden; +} +.calendar_calTimeGridList .calendar_calGridHeader { + min-height: 1em; +} +.calendar_calTimeGridList .calendar_calDayColAllDay { + display: none; +} +.calendar_calTimeGridList .calendar_calDayColHeader { + min-height: initial; + padding-bottom: 0px; +} +.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] { + border: none; +} +.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper { + position: absolute; + top: 0px; + bottom: 3em; + width: 100%; +} +.calendar_calTimeGridList .calendar_calEvent { + height: 1.1em; + position: relative; + border: none; + border-bottom: none; + border-right: none; + border-radius: 0px; + padding-left: 6px; +} +.calendar_calTimeGridList .calendar_calEventHeader { + display: none !important; +} +.calendar_calTimeGridList .calendar_calEventTitle { + font-weight: normal; + display: inline-block; + white-space: nowrap; + flex: 1 1; + overflow: hidden; + text-overflow: ellipsis; +} +.calendar_calTimeGridList .calendar_calEventBody { + overflow: hidden; + border: none; + background: white !important; + height: 100%; + padding-left: 6px; + display: flex; +} +.calendar_calTimeGridList .calendar_calEventBody .calendar_calTimespan { + display: inline-block; + text-align: right; + padding-right: 1px; + opacity: 0.8; + font-size: 90%; + flex: 0 0 auto; +} +.calendar_calTimeGridList .calendar_calEventBody > p { + display: none; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter { + left: 0px; + width: 100%; + margin-top: -1.5ex; + height: 2.1ex; + border-bottom-left-radius: 0px; + overflow: visible; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before { + content: attr(data-hidden_label); + display: block; + height: 100%; + min-height: 3ex; + background: white; + z-index: 21; + padding-left: 12px; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover { + /* Need !important to override calculated height*/ + top: initial !important; + bottom: 0px; + white-space: pre; + background: white; + height: 100%; + overflow: auto; +} +.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover:before { + display: none; +} +/* 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; + position: absolute; + top: 2em; + bottom: 8px; + width: 100%; +} +.calendar_calDayTodos { + width: 98%; + margin-left: 10px; + border: 1px solid silver; +} +.calendar_calDayTodosHeader { + text-align: center; +} +.calendar_calDayTodosTable tr td span:first-child { + white-space: nowrap; +} +/****************************************************** + * 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%; + background-color: #f0f0f0; +} +.calendar_plannerWidget > div:not(.calendar_plannerHeader) { + overflow-y: auto; + overflow-x: hidden; +} +/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows + */ +.calendar_plannerHeader { + position: relative; + top: 0px; + left: 0px; +} +.calendar_plannerRows { + position: relative; +} +.calendar_plannerGrid { + position: absolute; + top: 0px; + bottom: 0px; + left: 172px; + right: 0px; + overflow: hidden; + height: 100%; + border-left: 1px solid silver; + margin-left: -1px; +} +.calendar_plannerGrid > .calendar_plannerScale, +.calendar_plannerGrid > .calendar_plannerScaleDay { + height: 100%; + position: absolute; +} +.calendar_plannerGrid .calendar_calToday, +.calendar_plannerGrid .calendar_calHoliday { + background-color: initial; +} +.calendar_plannerGrid > div:nth-last-child(2) > div { + border: none; + border-right: 1px solid silver; +} +.calendar_plannerGrid > div:last-child > div { + border: none; +} +.calendar_plannerGrid > div:last-child > div:not(:first-child) { + background-image: linear-gradient(0deg, rgba(192, 192, 192, 0.75) 4px, transparent 0%); + background-position: top left; + background-size: 1px 10px; + background-repeat: repeat-y; +} +/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows + */ +.calendar_plannerRowWidget { + position: relative; + top: 0px; + left: 0px; + width: 100%; + min-height: 20px; +} +.calendar_plannerRowWidget:not(:first-child) { + border-top: 1px solid silver; +} +.calendar_plannerRowWidget[data-has_children]:before { + padding-right: 20px; + position: absolute; + content: " \25B6"; + background-repeat: no-repeat; + left: 10px; + top: 2px; +} +.calendar_plannerRowWidget:hover { + background-color: rgba(103, 159, 210, 0.2); +} +/* 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_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-right: 1px solid silver; + border-bottom: 1px solid silver; + min-height: 2ex; + /* 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: 150px; + height: 100%; + line-height: 20px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + padding-left: 20px; + padding-right: 1px; +} +.calendar_plannerRowHeader:hover { + overflow: visible; + z-index: 30; + cursor: pointer; +} +.calendar_plannerHeaderTitle { + border-right: 1px solid silver; +} +/* calendar_eventRows contain multiple eventRowWidgets + */ +.calendar_eventRows, +.calendar_plannerHeaderRows { + position: relative; + top: 0px; + left: 0px; + right: 0px; + margin-left: 172px; + /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */ + min-height: 20px; + height: 100%; +} +.calendar_plannerWidget .verticalBar { + width: 8ex; + height: 100%; + position: absolute; + top: 0px; + border-right: 1px dotted; + pointer-events: none; + z-index: 40; + display: none; +} +.calendar_plannerWidget .verticalBar > span { + position: absolute; + bottom: 0px; + right: 0px; + background-color: rgba(255, 255, 255, 0.8); +} +/** + * 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_eventRowsMarkedDay.calendar_weekend { + background-color: #e0e0e0; +} +/* calendar_eventRowWidget contains non-overlapping events + */ +.calendar_eventRowWidget { + position: relative; + top: 0px; + left: 0px; + width: 100%; + height: 20px; + border: 1px solid white; +} +.calendar_plannerWidget .calendar_calEventHeader, +.calendar_calEventHeaderSmall { + height: 100%; + padding-top: 2px; +} +/* 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%; + min-width: 5em; + 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_d-n-d_timeCounter .loading { + width: 16px; + height: 16px; + position: absolute; + bottom: 0px; + right: 0px; +} +#calendar-edit_action { + width: 10em; + padding-left: 10px; + margin-left: 5px; +} +#calendar-list_undelete_popup, +#calendar-list_delete_popup { + display: none; +} +.calendar_freetime_header { + font-size: 120%; + font-weight: bold; +} +.calendar_freetime_timeframe { + position: relative; +} +.calendar_freetime_dow { + position: absolute; +} +img.calendar_print_button, +img.calendar_print_appicon { + height: 24px; + width: 24px; +} +/*Sortable views*/ +.srotable_cal_wk_ph { + border: 2px dashed gray; + height: 230px; + width: 99%; + background-color: #ece2f7; +} +.srotable_cal_day_ph { + position: relative; + width: 33.333333%; + height: 99%; + border: 2px dashed gray; + background-color: #ece2f7; + display: inline-block; +} +/** + * View animation stuff + */ +.calendar_slide { + /* There is a cleanup timeout in calendar app.js line 563 that must match */ + transition-duration: 0s; + /* was 2s */ + transition-delay: 50ms; +} +/** + * Home page portlets + */ +.calendar_favorite_portlet .calendar_calMonthNavHeader a img, +.calendar_favorite_portlet .calendar_calWeekNavHeader a img, +.calendar_favorite_portlet .calendar_calDayColHeader a img, +.calendar_favorite_portlet .calendar_plannerScale a img { + display: none; +} +#calendar-edit select#calendar-edit_duration { + width: 133px; +} +#calendar-edit_account + .chzn-container .chzn-results { + max-height: 195px; +} +#calendar-edit_category { + max-width: 230px; +} +#calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane { + border-top: 0; + margin: 0; + padding-right: 3px; +} +/*weekend slideSwitch in toolbar*/ +#calendar-toolbar_app_header { + font-weight: bold; + color: #616161; +} +#calendar-toolbar_toolbar .et2_toolbar_more { + margin-top: 0; +} +#calendar-toolbar button#toolbar-today { + color: #616161; + font-weight: 500; +} +/*generell*/ +.egw_fw_content_browser_iframe img[src$="svg"] { + background-color: #828282 !important; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=) !important; + background-image: -moz-linear-gradient(top, #828282, #828282) !important; + background-image: -ms-linear-gradient(top, #828282, #828282) !important; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#828282), to(#828282)) !important; + background-image: -webkit-linear-gradient(top, #828282, #828282) !important; + background-image: -o-linear-gradient(top, #828282, #828282) !important; + background-image: linear-gradient(top, #828282, #828282) !important; + background-repeat: repeat-x !important; +} +.egw_fw_ui_category_content { + padding-left: 0px !important; +} +.egw_fw_ui_category_content img.egw_fw_ui_sidemenu_listitem_icon { + display: none; +} +img.sideboxstar { + width: 12px; + height: 12px; + /*.background_color_10_gray;*/ + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + padding: 3px; + margin: 1px; +} +img.sideboxstar:hover { + /*.background_color_20_gray;*/ + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +img.sideboxstar:active { + /*.background_color_30_gray;*/ + border: 1px solid rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + background-color: #1aa200; + background-color: #1aa200 !important; +} +.chzn-container { + max-width: 85% !important; + margin-top: 0em; +} +.egw_fw_content_browser_iframe { + margin-top: 0em; + border: none; +} +.calendar_calDayColHeader img { + width: 16px; + height: 16px; +} +.calendar_calWeekNavHeader img { + width: 16px; + height: 16px; +} +.calendar_calMonthNavHeader img { + width: 16px; + height: 16px; +} +.calendar_calEventBodySmall img { + width: 16px; + height: 16px; +} +.calendar_calEventBodySmall img[src$="svg"], +.calendar_calDayColHeader img[src$="svg"] { + background-color: #0c5da5; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5)); + background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -o-linear-gradient(top, #0c5da5, #0c5da5); + background-image: linear-gradient(top, #0c5da5, #0c5da5); + background-repeat: repeat-x; +} +/* calender view*/ +/*defind in layout_raster.less , because frame*/ +span#start { + margin-right: 1em; +} +/* The main calendar widget. DIV containing a table. */ +div.calendar { + position: relative; +} +/* Header part -- contains navigation buttons and day names. */ +.calendar { + /* The body part -- contains all the days in month. */ + /* The footer part -- status bar and "Close" button */ + /* Combo boxes (menus that display months/years for direct selection) */ +} +.calendar .button { + /* "<<", "<", ">", ">>" buttons have this class */ + text-align: center; + /* They are the navigation buttons */ + padding: 2px; + /* Make the buttons seem like they're pressing */ + background-color: #ffc200; +} +.calendar .nav { + /*background: url(../images/menuarrow.png) no-repeat 100% 100%;*/ + background-image: none; + background-color: #ffc200; +} +.calendar thead .title { + /* This holds the current "month, year" */ + font-weight: bold; + /* Pressing it will take you to the current date */ + /*text-align: center;*/ + background-color: #679fd2; +} +.calendar thead .title:hover { + background-color: #e6e6e6 !important; +} +.calendar thead .headrow { + /* Row containing navigation buttons */ + background-color: #ffc200; + color: #fff; +} +.calendar thead .daynames { + /* Row containing the day names */ + background-color: #b3b3b3 !important; +} +.calendar thead .name { + /* Cells containing the day names */ + /*border-bottom: 1px solid #556;*/ + /*padding: 2px;*/ + /*text-align: center;*/ + /*color: #000;*/ +} +.calendar thead .weekend { + /* How a weekend day name shows in header */ + color: #a66; +} +.calendar thead .hilite { + /* How do the buttons in header appear when hover */ + background-color: #ffffff; + border: none; + /*.box_shadow_standard_light_inset;*/ + /*color: #000;*/ + /*border: 0px solid;*/ + border-color: #828282; + /*padding: 1px;*/ +} +.calendar thead .active { + /* Active (pressed) buttons in header */ + background_color: #408dd2; + /*padding: 2px 0px 0px 2px;*/ +} +.calendar tbody tr, +.calendar tbody td { + border: 1px; +} +.calendar tbody .day { + /* Cells containing month days dates */ + /*width: 2em;*/ + /*color: #456;*/ + /*text-align: right;*/ + /*padding: 2px 4px 2px 2px;*/ + /*border: 1px;*/ +} +.calendar tbody .day.othermonth { + font-size: 80%; + color: #bbb; +} +.calendar tbody .day.othermonth.oweekend { + color: #fbb; +} +.calendar tbody .rowhilite td { + background-color: #bfbfbf; +} +.calendar tbody .rowhilite td.wn { + background: #eef; +} +.calendar tbody td.hilite { + /* Hovered cells */ + /*background: #def;*/ + /*padding: 1px 3px 1px 1px;*/ + /*border: 1px solid #bbb;*/ +} +.calendar tbody td.active { + /* Active (pressed) cells */ + background: #cde; + /*padding: 2px 2px 0px 2px;*/ +} +.calendar tbody td.selected { + /* Cell showing today date */ + /*font-weight: normal;*/ + /*border: 0px solid @gray_50;*/ + /*padding: 1px 3px 1px 1px;*/ + /*padding: 0px;*/ + background-color: #ffdd73; + color: #000; + -webkit-box-shadow: inset 1px 2px 1px #000000; + -moz-box-shadow: inset 1px 2px 1px #000000; + box-shadow: inset 1px 2px 1px #000000; +} +.calendar tbody td.weekend { + /* Cells showing weekend days */ + color: #a66; +} +.calendar tbody td.today { + /* Cell showing selected date */ + font-weight: normal; + color: #189800; + background-color: #ffc200; +} +.calendar tbody .disabled { + color: #999; +} +.calendar tbody .emptycell { + /* Empty cells (the best is to hide them) */ + visibility: hidden; +} +.calendar tbody .emptyrow { + /* Empty row (some months need less than 6 rows) */ + display: none; +} +.calendar table .wn { + /*padding: 2px 3px 2px 2px;*/ + /*border-right: 1px solid #000;*/ + background-color: #b3b3b3 !important; +} +.calendar tfoot .footrow { + /* The in footer (only one right now) */ + text-align: center; + background: #556; + color: #fff; +} +.calendar tfoot .ttip { + /* Tooltip (status bar) cell */ + background: #fff; + color: #445; + border-top: 1px solid #556; + padding: 1px; + height: 30px; +} +.calendar tfoot .hilite { + /* Hover style for buttons in footer */ + background: #aaf; + border: 1px solid #04f; + color: #000; + padding: 1px; +} +.calendar tfoot .active { + /* Active (pressed) style for buttons in footer */ + background: #77c; + padding: 2px 0px 0px 2px; +} +.calendar .combo { + position: absolute; + display: none; + top: 0px; + left: 0px; + width: 4em; + cursor: default; + border: 1px solid #655; + background: #def; + color: #000; + font-size: 90%; +} +.calendar .combo .label, +.calendar .combo .label-IEfix { + text-align: center; + padding: 1px; +} +.calendar .combo .label-IEfix { + width: 4em; +} +.calendar .combo .hilite { + background: #acf; +} +.calendar .combo .active { + border-top: 1px solid #46a; + border-bottom: 1px solid #46a; + background: #eef; + font-weight: bold; +} +.calendar td.time { + border-top: 1px solid #000; + padding: 1px 0px; + text-align: center; + background-color: #f4f0e8; +} +.calendar td.time .hour, +.calendar td.time .minute, +.calendar td.time .ampm { + padding: 0px 3px 0px 4px; + border: 1px solid #889; + font-weight: bold; + background-color: #fff; +} +.calendar td.time .ampm { + text-align: center; +} +.calendar td.time .colon { + padding: 0px 2px 0px 3px; + font-weight: bold; +} +.calendar td.time span.hilite { + border-color: #000; + background-color: #b3b3b3 !important; + color: #fff; +} +.calendar td.time span.active { + border-color: #f00; + background-color: #000; + color: #0f0; +} +/*########################################### +# # +# dialogHeader # +############################################# +# # +# # +# # +# # +# # +# dialog # +# # +# # +############################################# +# # +# buttons # +# # +# # +##############################################*/ +#calendar-edit { + /*###########################################*/ + /*###########################################*/ + /*Tab Beschreibung*/ + /*###########################################*/ + /*###########################################*/ + /*###########################################*/ + /*###########################################*/ + /*###########################################*/ + /*###########################################*/ + /*// Historie*/ + /*###########################################*/ + /*// Toolbar*/ +} +#calendar-edit label.et2_label { + /*padding: 0 2px;*/ +} +#calendar-edit .chzn-container { + padding-top: 0; +} +#calendar-edit .et2_tabheader { + background-color: transparent; +} +#calendar-edit input.hasDatepicker, +#calendar-edit #calendar-edit_start { + width: 129px; +} +#calendar-edit #calendar-edit_whole_day { + margin: 0 0.8em 0 23px; +} +#calendar-edit label.et2_label#calendar-edit_calendar_edit_duration { + /*margin-left: 20px;*/ + /*margin-right: 49px;*/ +} +#calendar-edit select#calendar-edit_duration { + width: 133px; +} +#calendar-edit button#calendar-edit_freetime { + height: 16px; + background-size: 12px auto !important; + margin-left: 32px; + padding-top: 0px; +} +#calendar-edit #calendar-edit_id { + float: right; + margin-right: 5px; +} +#calendar-edit #calendar-edit_calendar-edit-details { + display: block; + float: left; + width: 100%; +} +#calendar-edit #calendar-edit_calendar-edit-details table.et2_grid { + /*background-color: yellow;*/ + line-height: 20px; + width: 60%; +} +#calendar-edit #calendar-edit_calendar-edit-details .calendar_category_details { + margin: 0 1em; + width: 20em; +} +#calendar-edit #calendar-edit_calendar-edit-details .et2_hbox_right { + overflow-y: auto; + width: 30%; +} +#calendar-edit #calendar-edit_calendar-edit-details .et2_selectbox .ui-multiselect-checkboxes { + min-height: 229px; +} +#calendar-edit #calendar-edit_calendar-edit-details .et2_selectbox .ui-multiselect-checkboxes li { + text-indent: -20px; +} +#calendar-edit #calendar-edit_calendar-edit-details #calendar-edit_category { + border: 1px solid; + border-color: #b4b4b4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + padding: 0 0.3em 0 0; +} +#calendar-edit #calendar-edit_calendar-edit-details #calendar-edit_category li .ui-state-hover { + font-weight: normal !important; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#calendar-edit #calendar-edit_calendar-edit-details #calendar-edit_details_alarms { + background-color: #cdcdcd; + display: block !important; +} +#calendar-edit #calendar-edit_calendar-edit-description #calendar-edit_details_category { + margin: 0 1em; + width: 20em; +} +#calendar-edit #calendar-edit_calendar-edit-description .et2_hbox_right { + overflow-y: auto; +} +#calendar-edit #calendar-edit_calendar-edit-description .et2_selectbox .ui-multiselect-checkboxes { + min-height: 218px; +} +#calendar-edit #calendar-edit_calendar-edit-description .et2_selectbox .ui-multiselect-checkboxes li { + text-indent: -20px; +} +#calendar-edit #calendar-edit_calendar-edit-description #calendar-edit_category { + border: 1px solid; + border-color: #b4b4b4; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + padding: 0 0.3em 0 0; +} +#calendar-edit #calendar-edit_calendar-edit-description #calendar-edit_category li .ui-state-hover { + font-weight: normal !important; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +#calendar-edit #calendar-edit_calendar-edit-participants { + /*.et2_label {padding: 0 5px 0 0;}*/ +} +#calendar-edit #calendar-edit_calendar-edit-participants table#calendar-edit_participants { + margin: 5px; +} +#calendar-edit #calendar-edit_calendar-edit-participants table#calendar-edit_participants td { + padding: 0.2em 0.5em; +} +#calendar-edit #calendar-edit_calendar-edit-participants table#calendar-edit_participants #calendar-edit_account { + width: 143px; +} +#calendar-edit #calendar-edit_calendar-edit-participants table#calendar-edit_participants #calendar-edit_resource select { + width: 143px !important; +} +#calendar-edit #calendar-edit_calendar-edit-participants table#calendar-edit_participants #calendar-edit_resource input { + width: 103px !important; +} +#calendar-edit #calendar-edit_calendar-edit-participants tr.optional { + background-color: rgba(255, 221, 115, 0.1); +} +#calendar-edit #calendar-edit_calendar-edit-participants tbody { + display: table; + width: 100%; +} +#calendar-edit #calendar-edit_calendar-edit-participants tbody td { + vertical-align: top; + padding-top: 3px; +} +#calendar-edit #calendar-edit_calendar-edit-participants tbody input#calendar-edit_quantity { + width: 30px; + /* position: relative; + top: 34px; + left: 40px;*/ + margin: 6px 0px; +} +#calendar-edit #calendar-edit_calendar-edit-recurrence tbody { + display: table; + width: 100%; + line-height: 30px; +} +#calendar-edit #calendar-edit_calendar-edit-custom tbody { + display: table; + width: 100%; +} +#calendar-edit #calendar-edit_calendar-edit-links tbody { + display: table; + width: 100%; +} +#calendar-edit #calendar-edit_calendar-edit-links tbody .et2_link_to { + width: auto !important; + margin: 1em; +} +#calendar-edit #calendar-edit_calendar-edit-links span.et2_label { + padding: 1em; +} +#calendar-edit #calendar-edit_calendar-edit-alarms tbody { + display: table; + width: 100%; +} +#calendar-edit #calendar-edit_calendar-edit-alarms tbody label.et2_label { + white-space: nowrap; + padding: 0 5px; +} +#calendar-edit #calendar-edit_calendar-edit-alarms tbody tr.add_alarm_action { + background-color: rgba(255, 221, 115, 0.1); + margin-bottom: 1em; +} +#calendar-edit #calendar-edit_calendar-edit-history tbody { + display: table-row-group; + width: 100%; +} +#calendar-edit tr.dialogFooterToolbar label.et2_label { + top: 0px !important; +} +#calendar-edit #calendar-edit_action { + margin-left: 5px; + padding-left: 10px; + width: 10em; + padding: 3px 0 5px 10px; +} +/****************************************************************** + * 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-color: #ffc200; +} +.calendar_calWeek { + background-color: #ffffff; + width: auto; + margin: 0 auto; + text-align: center; + border: none; +} +.calendar_calMonth { + /*.background_table_cal_head;*/ + background-color: #ffffff; + width: auto; + margin: 0 auto; + text-align: center; + border: none; +} +/* marks a day in the colum-header as holiday +*/ +.calendar_calHoliday a { + font-size: 0.9em; +} +/* 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 + */ +/* timeGridWidget, contains timeRow's and dayCol's + */ +.calendar_calTimeGrid { + /* set via inline style on runtime: + * height: + */ +} +.calendar_calTimeRow { + /* background-color: silver; */ + background-color: #fafafa; +} +/* time in a timeRow + */ +.calendar_calTimeRowTime { + padding-left: 5px; + height: 100%; + line-height: 14px; + font-size: 8pt; + text-align: left; +} +/* Calendar Id # +*/ +#calendar-edit_id:before { + content: "#"; +} +/* header for the dayCol + */ +.calendar_calDayColHeader a img, +.calendar_calGridHeader a img { + position: relative; + top: 0px; +} +/*header for the weekCol*/ +.calendar_calWeekNavHeader, +.calendar_calMonthNavHeader { + top: 3px; + left: 0px; + width: auto; + 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: 0px solid silver; + border-right: 0px solid silver; + height: 24px; + line-height: 21px; + /*height: 24px;*/ + z-index: 30; +} +.calendar_calWeekNavHeader a img, +.calendar_calMonthNavHeader a img { + position: relative; + top: 3px; +} +.calendar_calMonthNavHeader a img { + top: 0px; +} +.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:after { + content: ", "; +} +/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) + */ +.calendar_calGridHeader { + background-color: #f0f0f0; +} +/* contains one event: header-row & -body + */ +.calendar_calEvent { + /* set via inline style on runtime: + * top: depending on startime + * height: depending on length + * border-color: depending on category + * background: depending on category (shade) + */ + background-color: #679fd2; +} +.calendar_calEvent:not([class*=" cat_"]) { + /* Defaults for no category, so we don't override it */ + background-color: #679fd2; +} +/** + * All participants accepted the invitation + */ +/** + * All participants answered the invitation, but not all accepted + */ +/** + * Some participants did NOT answer the invitation + */ +.calendar_calEventTooltip { + max-height: 400px; + overflow: auto; +} +.calendar_calAddEvent:hover { + background-color: #ffdd73; + cursor: pointer; + color: #ffffff; +} +/* header-row of the event + */ +.calendar_calEventHeader, +.calendar_calEventHeaderSmall { + 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; + background-color: #e6e6e6; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} +.calendar_calEventIcons img[src$="svg"] { + background-color: #828282 !important; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=) !important; + background-image: -moz-linear-gradient(top, #828282, #828282) !important; + background-image: -ms-linear-gradient(top, #828282, #828282) !important; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#828282), to(#828282)) !important; + background-image: -webkit-linear-gradient(top, #828282, #828282) !important; + background-image: -o-linear-gradient(top, #828282, #828282) !important; + background-image: linear-gradient(top, #828282, #828282) !important; + background-repeat: repeat-x !important; +} +.calendar_calEventHeaderSmall .calendar_calEventIcons img { + height: 13px; +} +/* 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_calDayTodosHeader a img[src$="svg"] { + background-color: #0c5da5; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5)); + background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -o-linear-gradient(top, #0c5da5, #0c5da5); + background-image: linear-gradient(top, #0c5da5, #0c5da5); + background-repeat: repeat-x; +} +.calendar_calDayTodos .calendar_calDayTodosHeader a img { + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #b4b4b4; + width: 16px; + height: 16px; +} +.calendar_calDayTodos .calendar_calDayTodosHeader a img:hover { + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + background-color: inherit; +} +.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth-child(even) { + background: #ffffff; +} +.calendar_calDayTodos .calendar_calDayTodosTable table tr:nth_child(odd) { + background: #f2f2f2; +} +.calendar_calDayTodos .calendar_calDayTodosTable table td { + padding: 3px; +} +.calendar_calDayTodos .calendar_calDayTodosTable table td img[src$="svg"] { + background-color: #0c5da5; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5)); + background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5); + background-image: -o-linear-gradient(top, #0c5da5, #0c5da5); + background-image: linear-gradient(top, #0c5da5, #0c5da5); + background-repeat: repeat-x; +} +.calendar_calDayTodos .calendar_calDayTodosTable table td img { + width: 12px; + height: 12px; + /*.background_color_10_gray;*/ + -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.calendar_calDayTodos .calendar_calDayTodosTable table td img:hover { + /*.background_color_20_gray;*/ + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.calendar_calDayTodos .calendar_calDayTodosTable table td img:active { + /*.background_color_30_gray;*/ + border: 1px solid rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5); + background-color: #1aa200; + background-color: #189800 !important; +} +.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 { + width: 99.5%; +} +.calendar_plannerWidget img { + height: 16px; +} +/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales + */ +.calendar_plannerScaleDay { + height: 28px; + line-height: 14px; +} +.calendar_plannerDayScale, +.calendar_plannerMonthScale, +.calendar_plannerWeekScale, +.calendar_plannerHourScale, +.calendar_plannerDayOfMonthScale { + /* left+width: is set by the code on runtime */ + text-align: center; + height: 100%; + /* 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_plannerMonthScale a img { + width: 16px; + height: 16px; +} +.calendar_plannerDayScale img, +.calendar_plannerWeekScale img, +.calendar_plannerMonthScale img, +.calendar_plannerDayOfMonthScale img { + vertical-align: text-top; +} +/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget + */ +.calendar_plannerRowHeader, +.calendar_plannerHeaderTitle { + line-height: 20px; +} +/** + * Filler for month with less then 31 days in yearly planner + */ +.calendar_eventRowsFiller { + height: 93%; + background-color: white; + border: 1px dashed gray; + border-right: none; +} +/* calendar_eventRowWidget contains non-overlapping events + */ +.calendar_eventRowWidget { + border: 1px solid white; +} +/* 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; +} +/** ##################################################################################### + * @package preferences + * ###################################################################################### + */ +table.prefTable { + width: 100%; +} +tr.prefRow { + position: relative; +} +td.prefName { + width: 50%; +} +tr.prefRow > td { + vertical-align: bottom; + /* otherwise help will cover bigger prefValue */ +} +.prefHelp { + position: absolute; + right: 55%; + display: none; + width: 33%; + background-color: #ffffff; +} +tr.prefRow:hover .prefHelp { + display: block; + z-index: 10; + /* FF: displays it under next prefName without */ +} +.prefDefault, +.prefValue { + float: left; +} +.prefValue { + margin-right: 5px; +} +.prefValue textarea, +textarea.prefValue { + width: 99%; + height: 5em; +} +.prefType, +.prefApp { + font-size: 150%; + display: inline-block; + padding-bottom: 5px; +} +/* ########################################################################################################################################### +* Calendar specfic +/* ########################################################################################################################################### +*/ +/*ui-widget*/ +/*edit series*/ +button#series { + background-image: url('../images/edit.png') !important; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #b4b4b4; + padding-left: 30px; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + /*.Button_size_h32_auto;*/ + height: 24px; +} +button#series img[url*="svg"] { + background-color: #b4b4b4; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -ms-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#b4b4b4)); + background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -o-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: linear-gradient(top, #b4b4b4, #b4b4b4); + background-repeat: repeat-x; + fill: red; +} +button#series:hover { + background-color: #189800; + color: #000000; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +button#series:active { + background-color: #1aa200; +} +button#series:hover { + background-image: url('../images/edit.png') !important; + background-color: #1aa200 !important; +} +button#series:active { + background-color: #1aa200 !important; +} +/*edit exception*/ +button#exception { + background-image: url('../images/edit.png') !important; + /*.border_normal;*/ + /*.box_shadow_standard_light;*/ + /*.rounded (3px);*/ + color: #000000; + -webkit-appearance: none; + -webkit-transition-property: background-color; + -moz-transition-property: background-color; + -o-transition-property: background-color; + transition-property: background-color; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + background-color: #b4b4b4; + padding-left: 30px; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + /*.Button_size_h32_auto;*/ + height: 24px; +} +button#exception img[url*="svg"] { + background-color: #b4b4b4; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjYjRiNGI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=); + background-image: -moz-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -ms-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b4b4b4), to(#b4b4b4)); + background-image: -webkit-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: -o-linear-gradient(top, #b4b4b4, #b4b4b4); + background-image: linear-gradient(top, #b4b4b4, #b4b4b4); + background-repeat: repeat-x; + fill: red; +} +button#exception:hover { + background-color: #189800; + color: #000000; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6); +} +button#exception:active { + background-color: #1aa200; +} +button#exception:hover { + background-image: url('../images/edit.png') !important; + background-color: #1aa200 !important; +} +button#exception:active { + background-color: #1aa200 !important; +} +/*calendar series add*/ +#calendar-edit_add { + /* .Complete_Button_add; + &:hover {.Complete_Button_add_hover;} */ +} +#calendar-edit_add:active { + background-color: #1aa200 !important; +} +/*calendar search freetime*/ +#calendar-edit_freetime:active { + background-color: #1aa200 !important; +} +/*calendar search freetime*/ +button[id*="edit_button[add_alarm]"]:active { + background-color: #1aa200 !important; +} +/*SIDEMENU */ +/*extended for calender app*/ +/*distance between picture and select*/ +select#calendar_view { + margin-top: 8px; +} +/*searchfield*/ +input#calendar_keywords { + margin: 10px 0 10px 2px; + font-size: 1.3em; +} +div#calendar-container { + margin-left: 0px; + /*distance to cal widget*/ + /*margin-top: 10px;*/ +} +div#calendar-container select, +div#calendar-container input, +div#calendar-container option { + font-size: 11px; +} +div#calendar-container div.calendar { + background-color: inherit; + padding: 0px; +} +div#calendar-container div.calendar table { + background-color: #fafafa; + font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif; +} +div#calendar-container div.calendar table thead .button { + background-color: #ffdd73; +} +div#calendar-container div.calendar table thead .title { + border: none; + box-shadow: none; + -webkit-box-shadow: none; + background-color: #ffdd73; +} +div#calendar-container div.calendar table thead .headrow { + color: #1e1e1e; +} +div#calendar-container div.calendar table thead .headrow td { + background-color: #ffc200; +} +div#calendar-container div.calendar table thead .daynames { + background-color: #679fd2; +} +div#calendar-container div.calendar table tbody tr.daysrow:hover { + background-color: #ffc200; +} +div#calendar-container div.calendar table tbody tr.rowhilite td { + background-color: #ffc200; +} +/* Sidebox calendar */ +#calendar-sidebox_date .ui-widget-header { + background-color: transparent; +} +#calendar-sidebox_date .ui-widget-content, +#calendar-sidebox_date .ui-state-default, +#calendar-sidebox_date #calendar-sidebox_date .ui-state-hover { + border: none; + padding: 2px; + text-align: center; +} +#calendar-sidebox_date .ui-datepicker td { + padding: 0px; +} +#calendar-sidebox_date .ui-datepicker-header .ui-state-hover { + background-color: transparent; + border: none; + top: 2px; + box-shadow: none; +} +#calendar-sidebox_date .ui-datepicker-today { + background-color: #ffc200; +} +#calendar-sidebox_date .ui-datepicker-calendar .ui-state-hover { + background-color: rgba(103, 159, 210, 0.2); +} +#calendar-sidebox_date .ui-datepicker-header .ui-datepicker-next.ui-state-hover { + right: 2px; +} +#calendar-sidebox_date .ui-datepicker-year { + padding-right: 5px !important; +} +#calendar-sidebox_date .ui-datepicker-header a span { + background-image: url('../../../phpgwapi/js/jquery/jquery-ui/redmond/images/ui-icons_217bc0_256x240.png'); +} +#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover { + top: 3px; +} +#calendar-sidebox_date .ui-datepicker-header a.ui-state-hover span { + background-image: url('../../../pixelegg/images/ui-icons_egw_color_2_256x240_0C5DA5.png'); + transition: none; +} +#calendar_cat_id, +#calendar_filter, +#uical_select_owner, +#calendar_merge { + font-size: 11px; +} +#uical_select_owner { + margin: 9px 0 9px; +} +#calendar_merge { + margin: 9px 0 0 0; +} +/* ######################################################################################## +/* * Calendar END */ +/* tablets and smartphones */ +@media all { + #calendar-toolbar { + height: 50px; + box-shadow: 0px 4px 5px 2px silver; + width: 100%; + background: #0c5da5; + z-index: 1; + } + #calendar-toolbar #toolbar-actionlist { + margin-left: 70px; + } + #calendar-edit #calendar-edit_calendar-edit-details { + float: none; + display: initial; + } + span[id^="calendar-list_"][id$="title]"] { + font-size: 12pt; + white-space: nowrap; + } + div.calDescRow { + height: 30px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + label[id^="calendar-list_"][id$="start]"] > time, + label[id^="calendar-list_"][id$="end]"] > time { + float: none; + color: #828282; + } + .calDates .dash { + text-align: center; + padding: 0px 5px 0 5px !important; + } + #calendar-list button.plus_button { + bottom: 65px ; + } +} diff --git a/calendar/templates/mobile/app.less b/calendar/templates/mobile/app.less new file mode 100644 index 0000000000..2b5a5dbf92 --- /dev/null +++ b/calendar/templates/mobile/app.less @@ -0,0 +1,54 @@ +/** + * + * Calendar - Mobile + * + * Please do NOT change app.css directly, instead change app.less and compile it! + * Pixleegg Template app.css + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Hadi Nategh + * @package calendar + * @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $ + */ +@import (reference) "../../../pixelegg/less/definitions.less"; +@import (less) "../pixelegg/app.css"; +/* tablets and smartphones */ +@media all { + #calendar-toolbar { + height: 50px; + box-shadow: 0px 4px 5px 2px silver; + width: 100%; + background: #0c5da5; + z-index: 1; + #toolbar-actionlist { + margin-left: 70px; + } + } + #calendar-edit #calendar-edit_calendar-edit-details{ + float: none; + display: initial; + } + span[id^="calendar-list_"][id$="title]"] { + font-size: 12pt; + white-space: nowrap; + } + div.calDescRow { + height: 30px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + label[id^="calendar-list_"][id$="start]"]> time ,label[id^="calendar-list_"][id$="end]"]> time{ + float: none; + color:#828282; + } + + .calDates .dash { + text-align: center; + padding: 0px 5px 0 5px !important; + } + #calendar-list button.plus_button { + bottom: 65px ; + } +} \ No newline at end of file diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 3a7f256dc9..a17e36d25e 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 55035 2016-02-16 21:37:19Z nathangray $ */ +/* $Id: app.css 55127 2016-02-23 22:23:01Z nathangray $ */ /*Media print classes*/ @media print { .th td, @@ -2541,45 +2541,3 @@ div#calendar-container div.calendar table tbody tr.rowhilite td { } /* ######################################################################################## /* * Calendar END */ -/* tablets and smartphones */ -@media only screen and (max-device-width: 1024px) { - #calendar-toolbar { - height: 50px; - box-shadow: 0px 4px 5px 2px silver; - width: 100%; - background: #0c5da5; - z-index: 1; - } - #calendar-toolbar #calendar-toolbar_toolbar .et2_toolbar_more > h.ui-toolbar-menulistHeader { - background: transparent; - } - #calendar-toolbar #toolbar-actionlist { - margin-left: 70px; - } - #calendar-edit #calendar-edit_calendar-edit-details { - float: none; - display: initial; - } - span[id^="calendar-list_"][id$="title]"] { - font-size: 12pt; - white-space: nowrap; - } - div.calDescRow { - height: 30px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - label[id^="calendar-list_"][id$="start]"] > time, - label[id^="calendar-list_"][id$="end]"] > time { - float: none; - color: #828282; - } - .calDates .dash { - text-align: center; - padding: 0px 5px 0 5px !important; - } - body button.plus_button { - bottom: 65px; - } -} diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index ea546bf204..17e497b55f 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1347,46 +1347,3 @@ div#calendar-container { /* ######################################################################################## /* * Calendar END */ -/* tablets and smartphones */ -@media only screen and (max-device-width:1024px) { - #calendar-toolbar { - #calendar-toolbar_toolbar { - .et2_toolbar_more > h.ui-toolbar-menulistHeader {background:transparent;} - } - height: 50px; - box-shadow: 0px 4px 5px 2px silver; - width: 100%; - background: #0c5da5; - z-index: 1; - #toolbar-actionlist { - margin-left: 70px; - } - } - #calendar-edit #calendar-edit_calendar-edit-details{ - float: none; - display: initial; - } - span[id^="calendar-list_"][id$="title]"] { - font-size: 12pt; - white-space: nowrap; - } - div.calDescRow { - height: 30px; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - - label[id^="calendar-list_"][id$="start]"]> time ,label[id^="calendar-list_"][id$="end]"]> time{ - float: none; - color:#828282; - } - - .calDates .dash { - text-align: center; - padding: 0px 5px 0 5px !important; - } - body button.plus_button { - bottom: 65px; - } -} \ No newline at end of file