2013-11-14 20:29:55 +01:00
/ * *
* EGroupware : CSS with less preprocessor
*
2014-01-10 12:07:08 +01:00
* CALENDAR
*
2013-11-14 20:29:55 +01:00
* 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 < stefan . reinhardt @ pixelegg . de >
* @ package calendar
* /
2016-05-19 13:44:07 +02:00
/* $Id$ */
2016-01-26 17:48:47 +01:00
/*Media print classes*/
@ media print {
2016-03-31 22:55:41 +02:00
# calendar-view . et2_container ,
# calendar-planner . et2_container ,
# calendar-list . et2_container {
position : static ;
height : auto ! important ;
2016-01-26 17:48:47 +01:00
}
2016-04-27 00:58:35 +02:00
# calendar-todo . et2_container {
2016-05-10 18:03:26 +02:00
display : none ! important ;
2016-04-27 00:58:35 +02:00
}
. calendar_calDayTodos . calendar_calDayTodosTable {
position : relative ;
}
2016-03-31 22:55:41 +02:00
. calendar_plannerWidget {
height : auto ! important ;
2016-01-26 17:48:47 +01:00
}
2016-03-31 22:55:41 +02:00
. calendar_plannerWidget . calendar_plannerHeader {
margin-right : 2px ! important ;
}
. calendar_plannerWidget . calendar_plannerRows {
height : auto ! important ;
2017-06-27 20:24:33 +02:00
overflow : visible ! important ;
2016-03-31 22:55:41 +02:00
}
. calendar_plannerWidget . verticalBar {
display : none ;
}
/* Don't split a calendar week across pages */
# calendar-view_view > tbody > tr . view_row {
page-break-inside : avoid ;
}
2016-04-27 00:58:35 +02:00
/* Try to keep it on the page */
2016-04-20 17:07:01 +02:00
. calendar_calTimeGrid {
max-height : 18cm ;
2016-04-27 00:58:35 +02:00
max-width : 90vw ;
2016-04-20 17:07:01 +02:00
}
2016-03-31 22:55:41 +02:00
. calendar_calTimeGrid . calendar_calTimeGridScroll {
2016-04-01 00:32:13 +02:00
overflow-y : hidden ! important ;
2016-03-31 22:55:41 +02:00
}
/* Let hidden user names be visible */
2022-09-13 14:45:14 +02:00
# calendar-view_view . hideDayColHeader tr : not ( : first-of-type ) . calendar_calGridHeader > et2-description {
2016-03-31 22:55:41 +02:00
position : static ;
}
2022-09-13 14:45:14 +02:00
# calendar-view_view . hideDayColHeader tr : not ( : first-of-type ) . calendar_calGridHeader > et2-description {
2016-03-31 22:55:41 +02:00
overflow : visible ! important ;
2016-01-26 17:48:47 +01:00
}
2016-07-28 11:21:09 +02:00
div . calendar_calEvent {
opacity : 1 ;
2016-07-28 14:06:03 +02:00
filter : opacity ( 0 . 85 ) ;
-webkit-filter : opacity ( 0 . 85 ) ;
2016-10-20 17:33:50 +02:00
border : 1px solid ;
2016-07-28 11:21:09 +02:00
}
2016-10-20 18:03:25 +02:00
/* Make times & all day description bold for better visibility */
div . calendar_calDayColAllDay div . calendar_calEventBodySmall ,
div . calendar_calEventHeader ,
div . calendar_calEventHeaderSmall {
font-weight : bold ;
}
2016-01-26 17:48:47 +01:00
}
/ * *
* Sidebox
* /
2016-01-28 23:08:15 +01:00
# calendar-et2_target {
position : relative ;
}
2018-07-20 18:09:58 +02:00
# calendar-et2_target > div {
position : relative ;
}
2016-01-26 17:48:47 +01:00
# calendar-sidebox_cat_id {
2022-11-07 10:39:34 +01:00
margin-bottom : 5px ;
2016-01-26 17:48:47 +01:00
}
# calendar-sidebox_cat_id ~ * {
vertical-align : top ;
display : inline-block ;
2016-10-28 10:24:52 +02:00
border : none ;
box-shadow : none ;
2016-01-26 17:48:47 +01:00
}
# calendar-sidebox_weekend {
/* Special css styling goes here */
}
2022-04-26 23:27:49 +02:00
# calendar-sidebox_date div . flatpickr-calendar . inline {
width : 100 % ! important ;
2022-10-14 11:11:36 +02:00
box-shadow : none ;
2022-04-26 23:27:49 +02:00
}
2022-04-28 23:45:59 +02:00
# calendar-sidebox_date . flatpickr-day {
font-size : 11px ;
}
2022-04-27 18:55:31 +02:00
# calendar-sidebox_date . inRange {
background-color : var ( --row_hover ) ;
2022-04-28 23:45:59 +02:00
box-shadow : none ;
2022-04-27 18:55:31 +02:00
}
2023-08-01 23:53:16 +02:00
/* Hide email in sidebox */
2024-04-09 22:05:55 +02:00
# calendar-sidebox_owner :: part ( tag__suffix ) {
2023-08-01 23:53:16 +02:00
display : none ;
}
2016-07-06 16:44:06 +02:00
/* Conflict display */
2023-04-04 17:26:14 +02:00
. calendar_conflicts {
2016-07-06 16:44:06 +02:00
max-height : 540px ;
overflow-y : auto ;
}
2019-09-10 18:35:37 +02:00
. calendar_conflicts img {
2019-09-25 11:17:44 +02:00
width : 22px ;
height : 22px ;
2019-09-10 18:35:37 +02:00
}
2021-02-10 19:32:51 +01:00
. calendar_conflicts table [ id * = "conflicting_participants" ] > tbody > tr . r . et2_label {
/* Color for resources */
color : blue ;
}
2016-04-19 22:27:09 +02:00
/* Loader - hide sizing behind overlay*/
2016-04-19 19:31:24 +02:00
# egw-loadin-prompt_calendar :: before {
opacity : 1 ;
background-color : # e6e6e6 ;
}
2016-01-26 17:48:47 +01:00
/* Toolbar */
# calendar-toolbar {
2022-08-30 07:50:43 +02:00
height : 3 . 6em ;
2022-08-11 11:23:11 +02:00
margin-top : 0 . 3em ;
2016-01-26 17:48:47 +01:00
}
2021-03-25 18:22:36 +01:00
# calendar-toolbar > div {
display : flex ;
}
# calendar-toolbar . et2_toolbar {
background : inherit ;
2020-12-18 14:31:55 +01:00
}
2016-01-26 17:48:47 +01:00
# calendar-toolbar . egw_fw_ui_app_header_container {
border : none ;
2016-04-01 00:58:04 +02:00
display : flex ;
align-items : center ;
min-height : 26px ;
2021-03-24 23:16:50 +01:00
justify-content : flex-end ;
2016-01-26 17:48:47 +01:00
}
2021-03-25 18:22:36 +01:00
# calendar-toolbar . et2_searchbox input {
2021-03-24 23:16:50 +01:00
height : 14px ;
}
# calendar-toolbar # calendar-toolbar_favorite_wrapper {
2021-03-18 21:09:53 +01:00
float : right ;
2021-03-25 18:22:36 +01:00
white-space : nowrap ;
2021-03-18 21:09:53 +01:00
margin-right : 5px ;
2021-03-25 18:22:36 +01:00
margin-top : -4px ;
2021-03-18 21:09:53 +01:00
}
2021-03-24 23:16:50 +01:00
# calendar-toolbar # calendar-toolbar_favorite_wrapper # calendar-toolbar_favorite_menu {
2021-03-18 21:09:53 +01:00
z-index : 40 ;
font-weight : normal ;
}
2021-03-22 22:16:44 +01:00
# calendar-toolbar . et2_dropdown button . ui-state-default {
background : # ffffff ;
}
2016-01-26 17:48:47 +01:00
/* Space for toolbar */
# calendar-view ,
# calendar-todo ,
2016-01-27 09:08:23 +01:00
# calendar-planner ,
2016-01-26 17:48:47 +01:00
# calendar-list {
2016-01-27 09:08:23 +01:00
position : absolute ;
left : 0px ;
right : 0px ;
2016-01-26 17:48:47 +01:00
}
2022-09-05 13:02:36 +02:00
form # calendar-toolbar > div {
column-gap : 1ex ;
}
2016-01-26 17:48:47 +01:00
# calendar-todo {
position : absolute ;
width : 30 % ;
margin-top : 0px ;
2016-01-27 09:08:23 +01:00
z-index : 10 ;
2020-12-01 17:51:04 +01:00
bottom : -10px ;
2022-09-05 13:02:36 +02:00
height : calc ( 100 % - 92px ) ;
2016-01-26 17:48:47 +01:00
}
# calendar-view {
width : 100 % ;
}
# calendar-view_view td {
padding : 0px ;
}
. 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 ;
}
2020-05-21 22:07:29 +02:00
/* Current time indicator */
. calendar_now {
position : absolute ;
background : red ;
}
. calendar_calTimeGrid . calendar_now {
height : 2px ;
width : 100 % ;
left : 0px ;
}
. calendar_calTimeGridList . calendar_now {
display : none ;
}
. calendar_plannerWidget . calendar_now {
height : 100 % ;
width : 2px ;
top : 0px ;
}
2016-01-26 17:48:47 +01:00
. calendar_size120b {
font-size : 120 % ;
font-weight : bold ;
}
/ * marks a day in the colum-header as today
* /
2017-06-30 17:47:00 +02:00
. calendar_calToday ,
2019-04-01 16:02:10 +02:00
. calendar_calTimeGrid . calendar_calDayColHeader . calendar_calToday ,
2017-06-30 17:47:00 +02:00
. calendar_calTimeGrid . calendar_calDayColHeader . calendar_calToday . et2_link . et2_clickable {
2016-01-26 17:48:47 +01:00
background : # ffffcc ;
2019-04-01 16:02:10 +02:00
color : # 0C5DA5 ;
2016-01-26 17:48:47 +01:00
}
. 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
* /
2017-06-30 17:47:00 +02:00
. calendar_calHoliday ,
. calendar_calTimeGrid . calendar_calDayColHeader . calendar_calHoliday . et2_link . et2_clickable {
2016-01-26 17:48:47 +01:00
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 ;
}
2018-12-17 15:49:22 +01:00
# calendar-view . calendar_calBirthday ,
# calendar-planner . calendar_plannerHeader . calendar_calBirthdayIcon {
2022-09-20 10:54:14 +02:00
background-image : url ( . . / . . / . . / api / templates / default / images / cake . svg ) ;
2016-07-29 17:35:24 +02:00
background-repeat : no-repeat ;
background-size : 16px ;
background-position : 10px center ;
}
2016-06-15 17:17:12 +02:00
/* Supress tooltips on holidays shown as events */
. calendar_calEventTooltip . calendar_calBirthday ,
. calendar_calEventTooltip . calendar_calHoliday {
display : none ;
}
2016-01-26 17:48:47 +01:00
/ * 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 ;
2016-03-31 22:55:41 +02:00
page-break-inside : avoid ;
2016-01-26 17:48:47 +01:00
}
. calendar_calTimeGrid . calendar_calTimeGridScroll {
position : relative ;
bottom : 0px ;
width : 100 % ;
height : 100 % ;
overflow-y : auto ;
overflow-x : hidden ;
cursor : default ;
2016-04-01 00:44:00 +02:00
background-color : white ;
2016-01-26 17:48:47 +01:00
}
. calendar_calTimeGrid . calendar_calTimeLabels {
height : 100 % ;
}
. calendar_calTimeGrid . loading ,
. calendar_plannerWidget . loading {
top : 0px ;
bottom : 0px ;
left : 0px ;
right : 0px ;
position : absolute ;
}
2016-04-26 00:09:57 +02:00
. calendar_calTimeGrid . loading :: before ,
. calendar_plannerWidget . loading :: before {
opacity : 1 ;
background-color : # E6E6E6 ;
}
2016-02-05 19:17:47 +01:00
/* Timegrid that has hit a minimum size */
. calendar_calTimeGridFixed . calendar_calTimeGridScroll {
overflow : hidden ;
}
2016-01-26 17:48:47 +01:00
/ *
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 ;
}
2022-09-13 14:45:14 +02:00
# calendar-view_view . hideDayColHeader tr : first-of-type . calendar_calGridHeader > et2-description {
2016-09-06 17:44:52 +02:00
position : absolute ;
top : 2em ;
}
# calendar-view_view . hideDayColHeader tr : first-of-type . calendar_calGridHeader . calendar_calDayColHeader_spacer {
2022-04-26 23:27:49 +02:00
height : calc ( 1 . 5em + 32px ) ;
2016-09-06 17:44:52 +02:00
}
2022-09-13 14:45:14 +02:00
# calendar-view_view . hideDayColHeader tr . calendar_calGridHeader > et2-description {
2016-01-26 17:48:47 +01:00
white-space : nowrap ;
2016-09-06 17:44:52 +02:00
display : block ;
position : static ;
2022-04-26 23:27:49 +02:00
width : calc ( 100 % - 58px ) ;
2016-09-06 17:44:52 +02:00
margin-left : 58px ;
color : white ;
2016-09-12 18:58:15 +02:00
background-color : # 2D6393 ;
2016-09-06 17:44:52 +02:00
text-align : center ;
line-height : 1 . 5em ;
font-size : 14px ;
z-index : 35 ;
2016-01-26 17:48:47 +01:00
}
/ * 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 :
* /
}
2016-03-22 16:09:39 +01:00
. calendar_calTimeRow : not ( . calendar_calWorkHours ) {
background-color : rgba ( 120 , 120 , 120 , 0 . 1 ) ;
}
2016-01-26 17:48:47 +01:00
/ * 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 ;
}
/ * 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 ;
2016-02-04 22:05:31 +01:00
transition : none ;
2016-01-26 17:48:47 +01:00
}
/ * Calendar Id #
* /
2022-12-02 22:18:02 +01:00
# calendar-edit_id {
display : inline ;
}
2016-01-26 17:48:47 +01:00
# 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 ;
2016-02-04 22:05:31 +01:00
transition : none ;
2016-01-26 17:48:47 +01:00
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 ;
2019-04-01 16:02:10 +02:00
background-color : white ;
2016-01-26 17:48:47 +01:00
}
2017-06-30 15:02:40 +02:00
. hideDayColHeader . calendar_calDayColHeader > div [ data-date ] {
position : fixed ;
width : inherit ;
z-index : 100 ;
}
2019-02-05 23:45:06 +01:00
. blue_title {
2019-04-01 16:02:10 +02:00
color : white ! important ;
background : # 2D6393 ! important ;
2019-02-05 23:45:06 +01:00
}
2016-04-04 19:55:49 +02:00
/* Seperate long and short day names */
. calendar_calDayColHeader > div [ data-date ] . short_date ,
. calendar_calDayColHeader > div [ data-date ] . long_date {
padding-right : 1ex ;
}
. calendar_calDayColHeader > div [ data-date ] . short_date {
display : none ;
}
2017-06-30 17:47:00 +02:00
/* Keep header dates when showing one week, multiple users */
. calendar_calTimeGridFixed : not ( . calendar_TimeGridNoLabel ) . calendar_calDayColHeader > div . et2_clickable . et2_link {
position : fixed ;
width : inherit ;
margin-top : -1px ;
}
2016-01-26 17:48:47 +01:00
/* 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 ;
}
2016-02-05 19:17:47 +01:00
. calendar_calTimeGridFixed . calendar_calDayCol . hiddenEventAfter : hover . calendar_calEvent {
position : relative ;
}
2016-02-05 00:14:54 +01:00
/* 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 ) ;
}
2016-01-26 17:48:47 +01:00
/* 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 % ;
2016-02-04 23:35:34 +01:00
/* 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 ;
2016-01-26 17:48:47 +01:00
}
2016-04-21 22:30:48 +02:00
. calendar_calDayColAllDay . calendar_calEventHeader {
display : none ;
}
2016-01-26 17:48:47 +01:00
. 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 ;
}
2017-01-17 19:33:21 +01:00
# calendar-view_view . hideDayColHeader . calendar_calGridHeader > div {
height : auto ;
}
2016-01-26 17:48:47 +01:00
. calendar_calGridHeader > label {
float : left ;
font-size : 14px ;
line-height : 27px ;
width : 58px ;
text-align : center ;
2016-09-06 17:44:52 +02:00
position : absolute ;
top : 0px ;
2016-01-26 17:48:47 +01:00
}
2016-07-06 21:18:36 +02:00
. calendar_calGridHeader > span . et2_label {
2016-01-26 17:48:47 +01:00
position : absolute ;
width : 55px ;
}
2017-01-25 18:23:24 +01:00
. calendar_TimeGridNoLabel > . calendar_calGridHeader > span . et2_label {
2016-01-26 17:48:47 +01:00
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 {
2023-03-07 19:11:16 +01:00
display : none ;
2016-01-26 17:48:47 +01:00
}
/*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 ;
}
2016-04-05 23:38:49 +02:00
# calendar-view_view tbody . ui-sortable-disabled . calendar_calGridHeader ,
# calendar-view_view tbody . ui-sortable-disabled . calendar_calGridHeader label {
2016-01-26 17:48:47 +01:00
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 ;
2016-07-28 14:06:03 +02:00
-moz-opacity : 0 . 85 ;
2022-05-26 00:08:40 +02:00
box-sizing : border-box ;
touch-action : none ;
2016-01-26 17:48:47 +01:00
/ * 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 ;
}
2016-02-23 23:23:01 +01:00
. calendar_calEvent : not ( . rowNoView ) : hover {
2016-01-26 17:48:47 +01:00
cursor : pointer ;
}
2016-02-02 22:12:44 +01:00
/** Multi-line ellipsis */
. calendar_calEvent . calendar_calEventBody {
overflow : hidden ;
}
. calendar_calTimeGrid : not ( . calendar_calTimeGridList ) * : not ( . calendar_calDayColAllDay ) > . calendar_calEvent :: after {
width : 100 % ;
2017-01-27 11:33:42 +01:00
background-color : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
2016-02-03 17:52:28 +01:00
height : 5px ;
2016-02-02 22:12:44 +01:00
content : "\02026" ;
left : 0px ;
float : right ;
padding-bottom : 5em ;
text-indent : 5px ;
2016-02-03 17:52:28 +01:00
line-height : 5px ;
2016-02-02 22:12:44 +01:00
}
2016-01-26 17:48:47 +01:00
/ * *
* 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 ;
}
. 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 ;
2020-04-24 18:54:08 +02:00
vertical-align : middle ;
padding-left : 5px ;
}
. calendar_calEventTooltip [ data-videoconference ] {
cursor : pointer ;
2016-01-26 17:48:47 +01:00
}
. calendar_calAddEvent {
width : 100 % ;
z-index : 10 ;
}
2020-05-11 18:49:17 +02:00
. calendar_calDayColHeader . calendar_calAddEvent : hover {
2016-01-26 17:48:47 +01:00
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 ;
* /
2017-01-27 11:33:42 +01:00
background-color : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
2016-01-26 17:48:47 +01:00
}
2016-01-28 22:35:22 +01:00
. calendar_calEventHeader . calendar_calEventTitle {
display : none ;
}
2016-01-26 17:48:47 +01:00
. calendar_calEventHeaderSmall {
font-size : 8pt ;
line-height : 10pt ;
}
2017-03-09 21:28:09 +01:00
. calendar_calEvent [ data-priority = '3' ] . calendar_calEventTitle {
color : red ;
}
2016-01-26 17:48:47 +01:00
. 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 ;
2017-01-27 11:33:42 +01:00
background-color : rgba ( 255 , 255 , 255 , 0 . 8 ) ;
2016-01-26 17:48:47 +01:00
}
. calendar_calEventBody > p ,
. calendar_calEventBodySmall > p {
white-space : pre-wrap ;
}
. calendar_calEventBody . calendar_calTimespan {
display : none ;
}
2016-04-21 22:30:48 +02:00
. calendar_calTimeGrid . calendar_calEventBodySmall {
2016-01-26 17:48:47 +01:00
font-size : 95 % ;
}
. calendar_calEventLabel {
font-weight : bold ;
font-size : 90 % ;
2021-02-22 18:02:27 +01:00
display : inline ;
2016-01-26 17:48:47 +01:00
}
. calendar_calEventTitle {
font-weight : bold ;
2021-02-22 18:02:27 +01:00
font-size : 100 % ;
display : inline ;
2016-01-26 17:48:47 +01:00
}
2016-01-28 22:35:22 +01:00
/* 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 {
2016-02-02 22:12:44 +01:00
padding-top : 4em ;
2016-01-28 22:35:22 +01:00
}
2016-04-18 21:03:35 +02:00
. calendar_plannerRowWidget . calendar_calEvent : not ( . calendar_calEventSmall ) . calendar_calTimespan {
display : none ;
}
. calendar_plannerRowWidget . calendar_calEvent : not ( . calendar_calEventSmall ) . calendar_calEventHeader . calendar_calEventTitle {
display : inline ;
2016-04-20 17:07:01 +02:00
font-weight : normal ;
2016-04-18 21:03:35 +02:00
}
2016-01-26 17:48:47 +01:00
/* 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 ;
}
2016-02-02 22:12:44 +01:00
. calendar_calTimeGridList . calendar_calDayCol > div . event_wrapper {
2016-01-26 17:48:47 +01:00
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 ;
2016-07-12 18:24:03 +02:00
height : 23px ;
line-height : 23px ;
2016-01-26 17:48:47 +01:00
}
. calendar_calDayTodos . calendar_calDayTodosTable {
overflow : auto ;
position : absolute ;
2016-07-12 18:24:03 +02:00
top : 3em ;
2016-01-26 17:48:47 +01:00
bottom : 8px ;
width : 100 % ;
}
. calendar_calDayTodos {
width : 98 % ;
2016-07-28 11:21:09 +02:00
border : 1px solid silver ;
2016-01-26 17:48:47 +01:00
}
. calendar_calDayTodosHeader {
text-align : center ;
}
2016-04-27 00:58:35 +02:00
. calendar_calDayTodosTable tr {
page-break-inside : avoid ;
2023-05-10 12:41:37 +02:00
display : flex ;
2016-04-27 00:58:35 +02:00
}
2016-01-26 17:48:47 +01:00
. calendar_calDayTodosTable tr td span : first-child {
white-space : nowrap ;
}
2016-07-12 18:24:03 +02:00
. calendar_calDayTodosHeader button {
width : 24px ;
height : 24px ;
padding-left : 0px ;
margin : 0px 4px 1px 0 ;
border-radius : 3px ;
border : 1px solid silver ;
background-color : # fafafa ;
position : absolute ;
2016-12-21 16:12:16 +01:00
left : 2px ;
2016-07-12 18:24:03 +02:00
}
2016-01-26 17:48:47 +01:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 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 % ;
}
. 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 ;
2022-05-26 00:08:40 +02:00
z-index : 1 ;
2016-01-26 17:48:47 +01:00
}
. 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 ;
2022-05-26 00:08:40 +02:00
z-index : 2 ;
2016-01-26 17:48:47 +01:00
}
. 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 ;
}
2017-04-06 16:46:05 +02:00
. calendar_plannerRowWidget . current_user {
background-color : rgba ( 0 , 0 , 0 , 0 . 05 ) ;
}
2016-01-26 17:48:47 +01:00
. calendar_plannerRowWidget : hover {
background-color : rgba ( 103 , 159 , 210 , 0 . 2 ) ;
}
/ * calendar_plannerScale represents a scale-row of the calendar_plannerHeader , containing multiple planner { D a y | W e e k | M o n t h } Scales
* /
. calendar_plannerScale ,
. calendar_plannerScaleDay {
position : relative ;
top : 0px ;
left : 0 % ;
width : 100 % ;
height : 20px ;
line-height : 20px ;
2016-04-19 22:27:09 +02:00
display : flex ;
flex-wrap : nowrap ;
align-content : stretch ;
2016-01-26 17:48:47 +01:00
}
. 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 :
* /
}
2016-04-19 22:27:09 +02:00
. calendar_plannerDayScale ,
. calendar_plannerWeekScale ,
. calendar_plannerHourScale {
position : static ;
flex : 1 1 14 % ;
}
2016-01-26 17:48:47 +01:00
. 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 ;
2016-05-26 23:39:53 +02:00
right : 0px ;
2016-01-26 17:48:47 +01:00
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 ;
}
2016-04-04 18:38:23 +02:00
. calendar_plannerWidget . calendar_calEventSmall [ data-full_day = 'true' ] . calendar_calTimespan {
display : none ;
}
. calendar_plannerWidget . calendar_calEventSmall . calendar_calEventTitle {
display : inline ;
}
2016-01-26 17:48:47 +01:00
/* 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
* /
2024-09-03 15:10:58 +02:00
. calendar_d-n-d_helper {
position : absolute ;
z-index : initial ;
}
/* Class for div to show forbiden drop */
2016-01-26 17:48:47 +01:00
. 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 ;
2024-07-22 22:40:45 +02:00
min-width : 10em ;
2016-01-26 17:48:47 +01:00
}
. calendar_d-n-d_timeCounter . loading {
width : 16px ;
height : 16px ;
position : absolute ;
bottom : 0px ;
right : 0px ;
}
# calendar-list_undelete_popup ,
# calendar-list_delete_popup {
display : none ;
}
. calendar_freetime_header {
font-size : 120 % ;
font-weight : bold ;
}
. calendar_freetime_timeframe {
position : relative ;
}
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 */
2016-02-04 22:05:31 +01:00
transition-duration : 0s ;
/* was 2s */
2016-01-26 17:48:47 +01:00
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_account + . chzn-container . chzn-results {
max-height : 195px ;
}
# 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 {
2022-09-05 13:02:36 +02:00
color : # 000 ;
2017-05-10 10:34:08 +02:00
font-size : 14px ;
2022-09-20 13:06:40 +02:00
height : 1 . 6em ;
2022-09-05 13:02:36 +02:00
padding : 4px 3px 3px ;
background : # b4cee773 ;
2024-10-28 21:48:47 +01:00
border-radius : var ( --sl-border-radius-medium , 3px ) ;
2022-09-22 11:03:37 +02:00
min-width : fit-content ;
2022-09-05 13:02:36 +02:00
border : 1px solid # d4d4d8 ;
text-align : center ;
2016-01-26 17:48:47 +01:00
}
2021-03-03 16:55:51 +01:00
/* Integration slide switches in toolbar */
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch {
2024-04-09 22:05:55 +02:00
--sl-toggle-size-medium : 30px ;
--height : 30px ;
2022-08-03 17:26:14 +02:00
height : var ( --height ) ;
display : inline-flex ;
}
# calendar-toolbar_toolbar span [ data-group = "integration" ] > et2-switch ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-integration" ] ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-video_toggle" ] {
2022-09-06 10:44:40 +02:00
background-size : 20px ;
2021-03-03 16:55:51 +01:00
background-repeat : no-repeat ;
background-position : center ;
2024-04-09 22:05:55 +02:00
--width : var ( --height ) ;
2023-06-02 19:01:13 +02:00
}
# calendar-toolbar_toolbar span [ data-group = "integration" ] > et2-switch :: part ( base ) ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-integration" ] ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-video_toggle" ] {
2023-01-25 00:18:29 +01:00
filter : brightness ( 0 ) contrast ( 0 . 3 ) opacity ( 0 . 7 ) ;
2021-03-03 16:55:51 +01:00
}
2022-08-05 13:03:59 +02:00
et2-switch # calendar-toolbar_toolbar-weekend {
background-image : none ! important ;
}
2022-09-20 12:17:50 +02:00
# calendar-toolbar_toolbar et2-switch # calendar-toolbar_toolbar-weekend :: part ( base ) {
width : 100 % ;
2022-11-11 19:32:06 +01:00
height : 100 % ;
2022-09-20 12:17:50 +02:00
}
# calendar-toolbar_toolbar et2-switch # calendar-toolbar_toolbar-weekend . label span {
2023-06-06 15:00:54 +02:00
background-size : 20px ;
2022-09-20 12:17:50 +02:00
}
# calendar-toolbar_toolbar et2-switch # calendar-toolbar_toolbar-weekend . label {
width : 100 % ;
2022-11-11 19:32:06 +01:00
height : 100 % ;
2024-04-09 22:05:55 +02:00
align-items : normal ;
2022-09-20 12:17:50 +02:00
}
# calendar-toolbar_toolbar et2-switch # calendar-toolbar_toolbar-weekend {
min-width : 60px ;
}
et2-switch # calendar-toolbar_toolbar-weekend :: part ( control ) {
width : 100 % ;
}
et2-switch # calendar-toolbar_toolbar-weekend :: part ( label ) {
width : 100 % ;
2022-11-11 19:32:06 +01:00
height : 100 % ;
2022-09-20 12:17:50 +02:00
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar span [ data-group = "integration" ] > et2-switch [ checked ] ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-integration" ] [ checked ] ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-video_toggle" ] [ checked ] {
2021-03-03 16:55:51 +01:00
filter : none ;
2021-03-09 17:31:37 +01:00
box-shadow : inset 1px 1px 1px 1px gray ! important ;
2021-03-03 16:55:51 +01:00
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar span [ data-group = "integration" ] > et2-switch span . label ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-video_toggle" ] span . label ,
# toolbar-menulist et2-switch [ id ^ = "calendar-toolbar_toolbar-integration" ] span . label {
2021-03-03 16:55:51 +01:00
background : none ;
min-width : 24px ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch :: part ( control ) {
visibility : hidden ;
}
# calendar-toolbar_toolbar et2-switch {
display : inline-block ;
vertical-align : top ;
2023-06-02 19:01:13 +02:00
border : 1px solid var ( --sl-color-neutral-300 ) ;
2024-10-28 21:48:47 +01:00
border-radius : var ( --sl-border-radius-medium , 3px ) ;
2022-08-03 17:26:14 +02:00
}
. ui-toolbar-menulist et2-switch ,
. ui-toolbar-menulist et2-switch :: part ( base ) ,
. ui-toolbar-menulist et2-switch :: part ( label ) ,
. ui-toolbar-menulist et2-switch . label {
width : 100 % ! important ;
}
2016-01-26 17:48:47 +01:00
# calendar-toolbar_toolbar . et2_toolbar_more {
margin-top : 0 ;
}
# calendar-toolbar button # toolbar-today {
color : # 616161 ;
font-weight : 500 ;
}
2016-04-15 13:12:08 +02:00
# calendar-edit . dialogFooterToolbar {
2016-04-18 10:34:53 +02:00
min-width : 800px ;
2016-04-15 13:12:08 +02:00
}
# calendar_edit_recur_data_chzn {
width : 99 % ! important ;
max-width : 99 % ! important ;
}
2016-04-27 00:58:35 +02:00
/ * Use media queries and day counts to toggle full days & abbreviations in day labels
Width breakpoints in media queries chosen somewhat arbitrarily , looking at 'Wednesday'
to see if it still fits .
* /
@ media all and ( max-width : 1000px ) and ( min-width : 481px ) {
2016-09-28 16:44:44 +02:00
/* styles assigned when width is smaller than 1000px */
2016-04-27 00:58:35 +02:00
. calendar_calDayColHeader > div [ data-date ] . long_date {
display : inline ;
}
. calendar_calDayColHeader > div [ data-date ] . short_date {
display : none ;
}
2016-09-28 16:44:44 +02:00
/* 7 day needs short day labels */
2016-04-27 00:58:35 +02:00
. calendar_calDayColHeader : first-child : nth-last-child ( 7 ) > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 7 ) ~ . calendar_calDayColHeader > div [ data-date ] . short_date {
display : inline ;
}
. calendar_calDayColHeader : first-child : nth-last-child ( 7 ) > div [ data-date ] . long_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 7 ) ~ . calendar_calDayColHeader > div [ data-date ] . long_date {
display : none ;
}
}
@ media all and ( max-width : 580px ) {
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) > div [ data-date ] . long_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) ~ . calendar_calDayColHeader > div [ data-date ] . long_date {
display : none ;
}
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) ~ . calendar_calDayColHeader > div [ data-date ] . short_date {
display : inline ;
}
}
@ media all and ( max-width : 480px ) {
2016-09-28 16:44:44 +02:00
/* styles assigned when width is smaller than 480px; */
2016-04-27 00:58:35 +02:00
. calendar_calDayColHeader > div [ data-date ] . long_date ,
. calendar_calDayColHeader > div [ data-date ] . short_date {
display : none ;
}
2016-09-28 16:44:44 +02:00
/* 5 day and less fits short day labels */
2016-04-27 00:58:35 +02:00
. calendar_calDayColHeader : first-child : nth-last-child ( 3 ) > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 3 ) ~ . calendar_calDayColHeader > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 4 ) > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 4 ) ~ . calendar_calDayColHeader > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) > div [ data-date ] . short_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 5 ) ~ . calendar_calDayColHeader > div [ data-date ] . short_date {
display : inline ;
}
2016-09-28 16:44:44 +02:00
/* 2 day view and less has enough room for full label */
2016-04-27 00:58:35 +02:00
. calendar_calDayColHeader : first-child : nth-last-child ( 1 ) > div [ data-date ] . long_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 1 ) ~ . calendar_calDayColHeader > div [ data-date ] . long_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 2 ) > div [ data-date ] . long_date ,
. calendar_calDayColHeader : first-child : nth-last-child ( 2 ) ~ . calendar_calDayColHeader > div [ data-date ] . long_date {
display : inline ;
}
}
2016-04-29 10:40:55 +02:00
# calendar-edit_quantity . et2_textbox_ro {
opacity : 0 . 5 ;
}
2016-05-06 11:32:17 +02:00
# calendar-edit_quantity ,
# calendar-edit_role {
float : left ;
}
2016-11-07 20:24:16 +01:00
. category_report_cats {
2016-10-28 16:11:21 +02:00
height : 80 % ;
overflow-y : auto ;
display : block ;
}
2016-11-15 10:18:37 +01:00
# calendar-category_report_grid {
display : block ;
max-height : 550px ;
overflow-y : auto ;
}
2019-09-25 11:17:44 +02:00
# toolbar-weekend {
background-image : none ! important ;
2021-03-09 17:31:37 +01:00
filter : none ;
2019-09-25 11:17:44 +02:00
}
2020-07-14 16:13:59 +02:00
# calendar-list_nm . nextmatch_header . header_count {
margin-right : -4px ;
}
2021-03-25 18:22:36 +01:00
# calendar-list_nm . nextmatch_header . search {
display : none ;
}
2022-12-02 22:18:02 +01:00
# calendar-edit_calendar-edit-description {
display : flex ;
flex-direction : column ;
}
et2-textarea # calendar-edit_description {
2022-08-10 10:37:40 +02:00
height : 70 % ;
margin-bottom : 2em ;
}
2022-11-07 10:52:16 +01:00
et2-button # calendar-toolbar_toolbar-today :: part ( label ) {
font-weight : bold ;
color : dimgrey ;
}
2014-02-03 11:05:44 +01:00
/*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 ;
}
2016-05-25 19:54:46 +02:00
# calendar-list {
/* Keeps the scrollbar in the window in chrome */
margin-right : 10px ;
2018-07-23 09:55:54 +02:00
/* Prevents going to far down (off bottom)*/
2018-08-21 14:48:14 +02:00
height : calc ( 100 % - 78px ) ;
2016-05-25 19:54:46 +02:00
}
2016-05-17 12:43:20 +02:00
# calendar_sidebox_content . egw_fw_ui_category_content {
2013-11-14 20:29:55 +01:00
padding-left : 0px ! important ;
}
img . sideboxstar {
2013-12-16 10:37:11 +01:00
width : 12px ;
height : 12px ;
2014-01-10 06:26:20 +01:00
/*.background_color_10_gray;*/
2013-12-16 10:37:11 +01:00
-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 ) ;
2013-11-14 20:29:55 +01:00
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 {
2014-01-10 06:26:20 +01:00
/*.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 ) ;
2013-11-14 20:29:55 +01:00
border : 1px solid rgba ( 0 , 0 , 0 , 0 . 5 ) ;
-webkit-border-radius : 3px ;
-moz-border-radius : 3px ;
border-radius : 3px ;
}
2013-12-20 10:35:46 +01:00
img . sideboxstar : active {
2014-01-10 06:26:20 +01:00
/*.background_color_30_gray;*/
2013-12-20 10:35:46 +01:00
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 ) ;
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ;
background-color : # b3e4a6 ! important ;
2013-12-20 10:35:46 +01:00
}
2013-11-14 20:29:55 +01:00
. chzn-container {
max-width : 85 % ! important ;
margin-top : 0em ;
}
. egw_fw_content_browser_iframe {
margin-top : 0em ;
border : none ;
}
2014-02-25 16:04:32 +01:00
. calendar_calDayColHeader img {
width : 16px ;
height : 16px ;
}
. calendar_calWeekNavHeader img {
width : 16px ;
height : 16px ;
}
2014-02-25 15:59:01 +01:00
. calendar_calMonthNavHeader img {
2013-11-14 20:29:55 +01:00
width : 16px ;
2013-12-16 10:37:11 +01:00
height : 16px ;
2013-11-14 20:29:55 +01:00
}
2013-12-12 21:27:35 +01:00
. calendar_calEventBodySmall img {
width : 16px ;
2013-12-16 10:37:11 +01:00
height : 16px ;
2013-12-12 21:27:35 +01:00
}
2014-01-10 06:26:20 +01:00
. calendar_calEventBodySmall img [ src $ = "svg" ] ,
2014-02-25 16:04:32 +01:00
. calendar_calDayColHeader img [ src $ = "svg" ] {
2014-01-10 06:26:20 +01:00
background-color : # 0c5da5 ;
2022-04-26 23:27:49 +02:00
background-image : url ( data : image / svg + xml ; base64 , PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4 = ) ;
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 ) ;
2014-01-10 06:26:20 +01:00
background-repeat : repeat-x ;
}
2013-11-14 20:29:55 +01:00
/* 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 */
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
}
. calendar . nav {
2022-07-31 10:49:35 +02:00
/*background: url(../../default/images/menuarrow.png) no-repeat 100% 100%;*/
2014-02-19 09:21:01 +01:00
background-image : none ;
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
}
. calendar thead . title {
/* This holds the current "month, year" */
font-weight : bold ;
/* Pressing it will take you to the current date */
2014-01-18 18:52:26 +01:00
/*text-align: center;*/
2022-04-26 23:27:49 +02:00
background-color : # 679FD2 ;
2013-11-14 20:29:55 +01:00
}
2014-01-17 09:10:46 +01:00
. calendar thead . title : hover {
2022-04-26 23:27:49 +02:00
background-color : # E6E6E6 ! important ;
2014-01-17 09:10:46 +01:00
}
2013-11-14 20:29:55 +01:00
. calendar thead . headrow {
/* Row <TR> containing navigation buttons */
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
color : # fff ;
}
. calendar thead . daynames {
/* Row <TR> containing the day names */
background-color : # b3b3b3 ! important ;
}
. calendar thead . name {
/* Cells <TD> containing the day names */
2014-01-18 18:52:26 +01:00
/*border-bottom: 1px solid #556;*/
/*padding: 2px;*/
/*text-align: center;*/
/*color: #000;*/
2013-11-14 20:29:55 +01:00
}
. 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 ;
2014-02-19 20:12:30 +01:00
border : none ;
/*.box_shadow_standard_light_inset;*/
2014-01-18 18:52:26 +01:00
/*color: #000;*/
/*border: 0px solid;*/
2013-11-25 04:19:58 +01:00
border-color : # 828282 ;
2014-01-18 18:52:26 +01:00
/*padding: 1px;*/
2013-11-14 20:29:55 +01:00
}
. calendar thead . active {
/* Active (pressed) buttons in header */
2022-04-26 23:27:49 +02:00
background_color : # 408DD2 ;
2014-01-17 09:10:46 +01:00
/*padding: 2px 0px 0px 2px;*/
2013-11-14 20:29:55 +01:00
}
2014-01-18 09:12:05 +01:00
. calendar tbody tr ,
. calendar tbody td {
border : 1px ;
}
2013-11-14 20:29:55 +01:00
. calendar tbody . day {
/* Cells <TD> containing month days dates */
2014-01-18 09:12:05 +01:00
/*width: 2em;*/
2014-01-18 18:52:26 +01:00
/*color: #456;*/
/*text-align: right;*/
/*padding: 2px 4px 2px 2px;*/
2014-01-18 09:12:05 +01:00
/*border: 1px;*/
2013-11-14 20:29:55 +01:00
}
. 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 <TD> */
2014-01-18 18:52:26 +01:00
/*background: #def;*/
/*padding: 1px 3px 1px 1px;*/
/*border: 1px solid #bbb;*/
2013-11-14 20:29:55 +01:00
}
. calendar tbody td . active {
/* Active (pressed) cells <TD> */
background : # cde ;
2014-01-18 18:52:26 +01:00
/*padding: 2px 2px 0px 2px;*/
2013-11-14 20:29:55 +01:00
}
. calendar tbody td . selected {
/* Cell showing today date */
2014-02-19 20:12:30 +01:00
/*font-weight: normal;*/
/*border: 0px solid @gray_50;*/
2014-01-18 18:52:26 +01:00
/*padding: 1px 3px 1px 1px;*/
2014-02-19 20:12:30 +01:00
/*padding: 0px;*/
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
color : # 000 ;
2014-02-19 20:12:30 +01:00
-webkit-box-shadow : inset 1px 2px 1px # 000000 ;
-moz-box-shadow : inset 1px 2px 1px # 000000 ;
box-shadow : inset 1px 2px 1px # 000000 ;
2013-11-14 20:29:55 +01:00
}
. calendar tbody td . weekend {
/* Cells showing weekend days */
color : # a66 ;
}
. calendar tbody td . today {
/* Cell showing selected date */
2014-01-18 09:12:05 +01:00
font-weight : normal ;
2014-07-16 13:29:45 +02:00
color : # 189800 ;
2014-03-05 15:59:15 +01:00
background-color : # ffc200 ;
2013-11-14 20:29:55 +01:00
}
. 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 {
2014-02-19 20:12:30 +01:00
/*padding: 2px 3px 2px 2px;*/
/*border-right: 1px solid #000;*/
2013-11-14 20:29:55 +01:00
background-color : # b3b3b3 ! important ;
}
. calendar tfoot . footrow {
/* The <TR> in footer (only one right now) */
text-align : center ;
background : # 556 ;
color : # fff ;
}
. calendar tfoot . ttip {
/* Tooltip (status bar) cell <TD> */
background : # fff ;
color : # 445 ;
border-top : 1px solid # 556 ;
padding : 1px ;
2014-01-17 09:10:46 +01:00
height : 30px ;
2013-11-14 20:29:55 +01:00
}
. 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 ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit {
2013-11-25 04:19:58 +01:00
/*###########################################*/
2013-12-16 10:37:11 +01:00
/*###########################################*/
/*Tab Beschreibung*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
/*###########################################*/
2014-01-18 18:52:26 +01:00
/*###########################################*/
/*// Historie*/
/*###########################################*/
/*// Toolbar*/
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit label . et2_label {
2013-11-25 04:19:58 +01:00
/*padding: 0 2px;*/
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit . chzn-container {
2013-12-16 10:37:11 +01:00
padding-top : 0 ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit . et2_tabheader {
2013-11-14 20:29:55 +01:00
background-color : transparent ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_id {
2014-02-06 18:36:03 +01:00
float : right ;
margin-right : 5px ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details {
2013-11-14 20:29:55 +01:00
display : block ;
float : left ;
width : 100 % ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details table . et2_grid {
2014-02-06 18:36:03 +01:00
/*background-color: yellow;*/
line-height : 20px ;
2014-05-27 17:02:56 +02:00
width : 60 % ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details . calendar_category_details {
2014-02-06 18:36:03 +01:00
margin : 0 1em ;
width : 20em ;
2014-02-05 12:14:44 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details . et2_hbox_right {
2014-02-06 18:36:03 +01:00
overflow-y : auto ;
2015-04-02 17:43:15 +02:00
width : 30 % ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details . et2_selectbox . ui-multiselect-checkboxes {
2014-10-22 10:28:16 +02:00
min-height : 229px ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details . et2_selectbox . ui-multiselect-checkboxes li {
2014-02-06 18:36:03 +01:00
text-indent : -20px ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details # calendar-edit_category {
2014-02-06 18:36:03 +01:00
-webkit-border-radius : 3px ;
-moz-border-radius : 3px ;
border-radius : 3px ;
padding : 0 0 . 3em 0 0 ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details # calendar-edit_category li . ui-state-hover {
2014-02-06 18:36:03 +01:00
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 ) ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-details # calendar-edit_details_alarms {
2022-04-26 23:27:49 +02:00
background-color : # CDCDCD ;
2014-02-06 18:36:03 +01:00
display : block ! important ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description # calendar-edit_details_category {
2014-02-06 18:36:03 +01:00
margin : 0 1em ;
width : 20em ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description . et2_hbox_right {
2014-01-30 19:55:35 +01:00
overflow-y : auto ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description . et2_selectbox . ui-multiselect-checkboxes {
2014-02-12 09:10:11 +01:00
min-height : 218px ;
2014-01-30 19:55:35 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description . et2_selectbox . ui-multiselect-checkboxes li {
2014-01-30 19:55:35 +01:00
text-indent : -20px ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description # calendar-edit_category {
2013-11-14 20:29:55 +01:00
border : 1px solid ;
2022-04-26 23:27:49 +02:00
border-color : # B4B4B4 ;
2013-11-14 20:29:55 +01:00
-webkit-border-radius : 3px ;
-moz-border-radius : 3px ;
border-radius : 3px ;
2014-02-06 18:36:03 +01:00
padding : 0 0 . 3em 0 0 ;
2013-11-14 20:29:55 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-description # calendar-edit_category li . ui-state-hover {
2014-01-18 18:52:26 +01:00
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 ) ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-recurrence tbody {
2013-11-14 20:29:55 +01:00
display : table ;
width : 100 % ;
2014-02-05 12:14:44 +01:00
line-height : 30px ;
2013-11-14 20:29:55 +01:00
}
2024-06-11 15:49:17 +02:00
# calendar-edit # calendar-edit_calendar-edit-recurrence table . recur_rdates tbody {
display : table ;
width : 100 % ;
line-height : normal ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-custom tbody {
2013-11-14 20:29:55 +01:00
display : table ;
width : 100 % ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-links tbody {
2013-11-14 20:29:55 +01:00
display : table ;
width : 100 % ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-links tbody . et2_link_to {
2013-12-16 10:37:11 +01:00
width : auto ! important ;
2014-02-03 11:05:44 +01:00
margin : 1em ;
2013-12-16 10:37:11 +01:00
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-links span . et2_label {
2013-11-25 04:19:58 +01:00
padding : 1em ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-alarms tbody {
2013-11-14 20:29:55 +01:00
display : table ;
width : 100 % ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-alarms tbody label . et2_label {
2013-12-16 10:37:11 +01:00
white-space : nowrap ;
padding : 0 5px ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-alarms tbody tr . add_alarm_action {
2014-01-10 06:26:20 +01:00
background-color : rgba ( 255 , 221 , 115 , 0 . 1 ) ;
2013-12-16 10:37:11 +01:00
margin-bottom : 1em ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit # calendar-edit_calendar-edit-history tbody {
2013-11-14 20:29:55 +01:00
display : table-row-group ;
width : 100 % ;
}
2015-02-06 14:49:09 +01:00
# calendar-edit tr . dialogFooterToolbar label . et2_label {
2014-01-18 18:52:26 +01:00
top : 0px ! important ;
}
2020-09-21 12:10:27 +02:00
# calendar-edit # calendar-edit_recur_enddate input . et2_date {
margin : 0px -1px ;
}
2013-11-14 20:29:55 +01:00
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 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 . # . * * * + ---------------- + * . . * | | * .
+ . . # . * * * * . . * + ---------------------------------- + * .
* /
2014-01-07 11:34:11 +01:00
/ * custom ui-tooltip style for calendar
* /
. calendar_uitooltip {
2014-01-10 06:26:20 +01:00
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 ;
2014-01-07 11:34:11 +01:00
}
2013-11-14 20:29:55 +01:00
. calendar_size120b {
font-size : 120 % ;
font-weight : bold ;
}
/ * marks a day in the colum-header as today
* /
2017-06-30 17:47:00 +02:00
. calendar_calToday ,
. calendar_calTimeGrid . calendar_calDayColHeader . calendar_calToday . et2_link . et2_clickable {
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
}
2014-02-25 15:20:27 +01:00
. calendar_calWeek {
2022-04-26 23:27:49 +02:00
background-color : # FFFFFF ;
2014-02-25 15:20:27 +01:00
width : auto ;
margin : 0 auto ;
text-align : center ;
2014-03-05 11:53:28 +01:00
border : none ;
2014-02-25 15:20:27 +01:00
}
. calendar_calMonth {
2014-03-05 11:53:28 +01:00
/*.background_table_cal_head;*/
2022-04-26 23:27:49 +02:00
background-color : # FFFFFF ;
2014-02-25 15:20:27 +01:00
width : auto ;
margin : 0 auto ;
text-align : center ;
2014-03-05 11:53:28 +01:00
border : none ;
2014-02-25 15:20:27 +01:00
}
2013-11-14 20:29:55 +01:00
/ * 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 #
* /
2014-02-06 18:36:03 +01:00
# calendar-edit_id : before {
2013-11-14 20:29:55 +01:00
content : "#" ;
}
/ * header for the dayCol
* /
2014-03-05 15:59:15 +01:00
. calendar_calDayColHeader a img ,
. calendar_calGridHeader a img {
position : relative ;
top : 0px ;
}
/*header for the weekCol*/
2014-02-25 15:50:35 +01:00
. calendar_calWeekNavHeader ,
. calendar_calMonthNavHeader {
2014-03-05 11:53:28 +01:00
top : 3px ;
2014-02-25 15:50:35 +01:00
left : 0px ;
2014-03-05 11:53:28 +01:00
width : auto ;
2014-02-25 15:50:35 +01:00
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 ;
2014-03-05 11:53:28 +01:00
border-bottom : 0px solid silver ;
border-right : 0px solid silver ;
height : 24px ;
line-height : 21px ;
/*height: 24px;*/
2014-02-25 15:50:35 +01:00
z-index : 30 ;
}
2014-03-05 11:53:28 +01:00
. calendar_calWeekNavHeader a img ,
. calendar_calMonthNavHeader a img {
position : relative ;
top : 3px ;
}
2014-03-05 15:59:15 +01:00
. calendar_calMonthNavHeader a img {
top : 0px ;
}
2014-02-25 16:04:32 +01:00
. calendar_calWeekNavHeader ,
. calendar_calMonthNavHeader img {
vertical-align : middle ;
}
2013-11-14 20:29:55 +01:00
. 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 : ", " ;
}
/ * contains one event : header-row & -body
* /
2016-01-19 23:09:09 +01:00
. calendar_calEvent {
2013-11-14 20:29:55 +01:00
/ * set via inline style on runtime :
* top : depending on startime
* height : depending on length
* border-color : depending on category
* background : depending on category ( shade )
* /
2022-04-26 23:27:49 +02:00
background-color : # 679FD2 ;
2017-11-22 19:54:31 +01:00
border-top : 1px solid ;
2013-11-14 20:29:55 +01:00
}
2016-01-21 19:37:31 +01:00
. calendar_calEvent : not ( [ class * = " cat_" ] ) {
/* Defaults for no category, so we don't override it */
2022-04-26 23:27:49 +02:00
background-color : # 679FD2 ;
2016-01-21 19:37:31 +01:00
}
2013-11-14 20:29:55 +01:00
/ * *
* 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 ;
}
2020-05-11 18:49:17 +02:00
. calendar_calDayColHeader . calendar_calAddEvent : hover {
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2013-11-14 20:29:55 +01:00
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 ;
2022-04-26 23:27:49 +02:00
background-color : # E6E6E6 ;
2013-12-16 10:37:11 +01:00
-webkit-border-radius : 2px ;
-moz-border-radius : 2px ;
border-radius : 2px ;
2013-11-14 20:29:55 +01:00
}
. 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 ;
}
2014-01-10 06:26:20 +01:00
. calendar_calDayTodos . calendar_calDayTodosHeader a img [ src $ = "svg" ] {
background-color : # 0c5da5 ;
2022-04-26 23:27:49 +02:00
background-image : url ( data : image / svg + xml ; base64 , PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMEM1REE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4 = ) ;
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 ) ;
2014-01-10 06:26:20 +01:00
background-repeat : repeat-x ;
}
2013-11-14 20:29:55 +01:00
. calendar_calDayTodos . calendar_calDayTodosHeader a img {
2014-04-01 11:23:56 +02:00
/*.border_normal;*/
2014-01-23 09:44:49 +01:00
/*.box_shadow_standard_light;*/
2014-04-01 11:23:56 +02:00
/*.rounded (3px);*/
2013-11-14 20:29:55 +01:00
color : # 000000 ;
2014-02-19 09:21:01 +01:00
-webkit-appearance : none ;
2014-01-14 17:04:20 +01:00
-webkit-transition-property : background-color ;
-moz-transition-property : background-color ;
-o-transition-property : background-color ;
transition-property : background-color ;
2014-01-10 06:26:20 +01:00
-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 ;
2022-04-26 23:27:49 +02:00
background-color : # E6E6E6 ;
2013-11-14 20:29:55 +01:00
width : 16px ;
2013-12-16 10:37:11 +01:00
height : 16px ;
2013-11-14 20:29:55 +01:00
}
. calendar_calDayTodos . calendar_calDayTodosHeader a img : hover {
2014-01-10 06:26:20 +01:00
-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 ) ;
2014-02-19 09:21:01 +01:00
background-color : inherit ;
2013-11-14 20:29:55 +01:00
}
2013-12-16 10:37:11 +01:00
. calendar_calDayTodos . calendar_calDayTodosTable table tr : nth-child ( even ) {
2022-04-26 23:27:49 +02:00
background : # FFFFFF ;
2013-12-16 10:37:11 +01:00
}
2021-04-01 15:46:42 +02:00
. calendar_calDayTodos . calendar_calDayTodosTable table tr : nth-child ( odd ) {
2014-04-01 11:23:56 +02:00
background : # f2f2f2 ;
2013-12-16 10:37:11 +01:00
}
. calendar_calDayTodos . calendar_calDayTodosTable table td {
2023-05-09 13:47:20 +02:00
display : inline-block ;
2013-12-16 10:37:11 +01:00
padding : 3px ;
}
. calendar_calDayTodos . calendar_calDayTodosTable table td img {
width : 12px ;
height : 12px ;
}
2013-11-14 20:29:55 +01:00
. 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 % ;
}
2014-01-21 18:30:52 +01:00
. calendar_plannerWidget img {
height : 16px ;
}
2013-11-14 20:29:55 +01:00
/ * calendar_plannerScale represents a scale-row of the calendar_plannerHeader , containing multiple planner { D a y | W e e k | M o n t h } 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 ;
}
2013-12-16 10:37:11 +01:00
. calendar_plannerMonthScale a img {
width : 16px ;
height : 16px ;
}
2013-11-14 20:29:55 +01:00
. calendar_plannerDayScale img ,
. calendar_plannerWeekScale img ,
. calendar_plannerMonthScale img ,
. calendar_plannerDayOfMonthScale img {
2013-12-16 10:37:11 +01:00
vertical-align : text-top ;
2013-11-14 20:29:55 +01:00
}
/ * 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 ;
}
2014-02-17 09:27:57 +01:00
/ * # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
* Calendar specfic
/ * # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
* /
/*ui-widget*/
/*edit series*/
button # series {
2022-08-02 09:28:28 +02:00
background-image : url ( '../../../api/templates/default/images/edit.svg' ) ! important ;
2014-04-01 11:23:56 +02:00
/*.border_normal;*/
2014-02-17 09:27:57 +01:00
/*.box_shadow_standard_light;*/
2014-04-01 11:23:56 +02:00
/*.rounded (3px);*/
2014-02-17 09:27:57 +01:00
color : # 000000 ;
2014-02-19 09:21:01 +01:00
-webkit-appearance : none ;
2014-02-17 09:27:57 +01:00
-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 ;
2022-04-26 23:27:49 +02:00
background-color : # E6E6E6 ;
2015-12-23 00:34:53 +01:00
padding-left : 30px ;
background-position : 6px center ;
background-repeat : no-repeat ;
background-size : 20px auto ;
2014-02-17 09:27:57 +01:00
/*.Button_size_h32_auto;*/
height : 24px ;
}
button # series img [ url * = "svg" ] {
background-color : # b4b4b4 ;
2022-04-26 23:27:49 +02:00
background-image : url ( data : image / svg + xml ; base64 , PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4 = ) ;
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 ) ;
2014-02-17 09:27:57 +01:00
background-repeat : repeat-x ;
fill : red ;
}
button # series : hover {
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 : hover {
2022-08-02 09:28:28 +02:00
background-image : url ( '../../../api/templates/default/images/edit.svg' ) ! important ;
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
button # series : active {
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
/*edit exception*/
button # exception {
2022-08-02 09:28:28 +02:00
background-image : url ( '../../../api/templates/default/images/edit.svg' ) ! important ;
2014-04-01 11:23:56 +02:00
/*.border_normal;*/
2014-02-17 09:27:57 +01:00
/*.box_shadow_standard_light;*/
2014-04-01 11:23:56 +02:00
/*.rounded (3px);*/
2014-02-17 09:27:57 +01:00
color : # 000000 ;
2014-02-19 09:21:01 +01:00
-webkit-appearance : none ;
2014-02-17 09:27:57 +01:00
-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 ;
2022-04-26 23:27:49 +02:00
background-color : # E6E6E6 ;
2015-12-23 00:34:53 +01:00
padding-left : 30px ;
background-position : 6px center ;
background-repeat : no-repeat ;
background-size : 20px auto ;
2014-02-17 09:27:57 +01:00
/*.Button_size_h32_auto;*/
height : 24px ;
}
button # exception img [ url * = "svg" ] {
background-color : # b4b4b4 ;
2022-04-26 23:27:49 +02:00
background-image : url ( data : image / svg + xml ; base64 , PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjQjRCNEI0IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4 = ) ;
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 ) ;
2014-02-17 09:27:57 +01:00
background-repeat : repeat-x ;
fill : red ;
}
button # exception : hover {
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 : hover {
2022-08-02 09:28:28 +02:00
background-image : url ( '../../../api/templates/default/images/edit.svg' ) ! important ;
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
button # exception : active {
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
/*calendar series add*/
# calendar-edit_add {
2016-04-18 15:56:47 +02:00
padding-left : 24px ;
background-size : 16px ;
background-position : center ;
2014-02-17 09:27:57 +01:00
}
# calendar-edit_add : active {
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
/*calendar search freetime*/
# calendar-edit_freetime : active {
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
/*calendar search freetime*/
button [ id * = "edit_button[add_alarm]" ] : active {
2019-04-01 16:02:10 +02:00
background-color : # b3e4a6 ! important ;
2014-02-17 09:27:57 +01:00
}
/*SIDEMENU */
/*extended for calender app*/
/*distance between picture and select*/
select # calendar_view {
margin-top : 8px ;
}
/*searchfield*/
input # calendar_keywords {
2014-03-05 11:53:28 +01:00
margin : 10px 0 10px 2px ;
font-size : 1 . 3em ;
2014-02-17 09:27:57 +01:00
}
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 ;
2024-04-09 22:05:55 +02:00
font-family : egroupware , -apple-system , BlinkMacSystemFont , "Segoe UI" , Roboto , Helvetica , Arial , sans-serif , "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" ;
2014-03-05 15:59:15 +01:00
}
div # calendar-container div . calendar table thead . button {
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2014-02-17 09:27:57 +01:00
}
div # calendar-container div . calendar table thead . title {
2014-02-19 20:12:30 +01:00
border : none ;
box-shadow : none ;
-webkit-box-shadow : none ;
2022-04-26 23:27:49 +02:00
background-color : # FFDD73 ;
2014-02-17 09:27:57 +01:00
}
2014-03-05 11:53:28 +01:00
div # calendar-container div . calendar table thead . headrow {
2022-04-26 23:27:49 +02:00
color : # 1E1E1E ;
2014-03-05 11:53:28 +01:00
}
2014-03-05 15:59:15 +01:00
div # calendar-container div . calendar table thead . headrow td {
background-color : # ffc200 ;
}
2014-02-17 09:27:57 +01:00
div # calendar-container div . calendar table thead . daynames {
2022-04-26 23:27:49 +02:00
background-color : # 679FD2 ;
2014-02-17 09:27:57 +01:00
}
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 ;
}
2014-02-19 20:12:30 +01:00
# calendar_cat_id ,
# calendar_filter ,
2014-03-05 15:59:15 +01:00
# uical_select_owner ,
# calendar_merge {
2014-02-19 20:12:30 +01:00
font-size : 11px ;
}
2014-03-05 15:59:15 +01:00
# uical_select_owner {
margin : 9px 0 9px ;
}
# calendar_merge {
margin : 9px 0 0 0 ;
}
2016-09-28 16:44:44 +02:00
# calendar-view_view . hideDayColHeader tr : first-of-type . calendar_calGridHeader . calendar_calDayColHeader_spacer {
2017-06-30 15:02:40 +02:00
height : calc ( 1 . 5em + 32px ) ;
2016-09-28 16:44:44 +02:00
}
2022-09-13 14:45:14 +02:00
# calendar-view_view . hideDayColHeader tr . calendar_calGridHeader > et2-description {
2016-09-28 16:44:44 +02:00
width : calc ( 100 % - 58px ) ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label . on span . off {
2024-09-03 15:10:58 +02:00
filter : opacity ( 0 . 4 ) ;
2019-04-15 17:06:42 +02:00
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label . on span . on {
2019-04-15 17:06:42 +02:00
filter : none ! important ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label span . on {
2019-08-05 10:36:23 +02:00
background-size : 18px 18px ;
2019-04-15 17:06:42 +02:00
background-repeat : no-repeat ;
background-position : center ;
2022-08-30 07:50:43 +02:00
height : 28px ;
2019-04-15 17:06:42 +02:00
top : 0 ;
2024-09-03 15:10:58 +02:00
filter : opacity ( 0 . 4 ) ;
2019-04-15 17:06:42 +02:00
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label span . off {
2019-08-05 10:36:23 +02:00
background-size : 18px 18px ;
2019-04-15 17:06:42 +02:00
background-repeat : no-repeat ;
background-position : center ;
2022-08-30 07:50:43 +02:00
height : 28px ;
2019-04-15 17:06:42 +02:00
top : 0 ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label span {
2019-04-15 17:06:42 +02:00
color : transparent ! important ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar et2-switch . label a {
2019-04-15 17:06:42 +02:00
background : none ;
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar # calendar-toolbar_toolbar-weekend . label span . on {
2024-09-03 15:10:58 +02:00
background-image : url ( . . / . . / . . / node_modules / bootstrap-icons / icons / 7-square . svg ) ;
2022-08-03 17:26:14 +02:00
width : 50 % ;
2021-03-03 16:55:51 +01:00
}
2022-08-03 17:26:14 +02:00
# calendar-toolbar_toolbar # calendar-toolbar_toolbar-weekend . label span . off {
2024-09-03 15:10:58 +02:00
background-image : url ( . . / . . / . . / node_modules / bootstrap-icons / icons / 5-square . svg ) ;
2022-08-03 17:26:14 +02:00
width : 50 % ;
2021-03-03 16:55:51 +01:00
}
2016-05-10 18:03:26 +02:00
/ * # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
2022-04-26 23:27:49 +02:00
/* * Calendar END */
