forked from extern/egroupware
662ea62790
Now using regular calendar header. "Go" button and custom header styles removed. Changing the date in sidebox calendar immediately updates state.
1603 lines
40 KiB
CSS
1603 lines
40 KiB
CSS
/* $Id$ */
|
|
|
|
/*Media print classes*/
|
|
@media print{
|
|
#calendar-view.et2_container, #calendar-planner.et2_container, #calendar-list.et2_container {
|
|
position: static;
|
|
height: auto !important;
|
|
}
|
|
#calendar-todo.et2_container {
|
|
display: none !important;
|
|
}
|
|
.calendar_calDayTodos .calendar_calDayTodosTable {
|
|
position: relative;
|
|
}
|
|
.calendar_plannerWidget
|
|
{
|
|
height: auto !important;
|
|
}
|
|
.calendar_plannerWidget .calendar_plannerHeader {
|
|
margin-right: 2px !important;
|
|
}
|
|
.calendar_plannerWidget .calendar_plannerRows {
|
|
height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
.calendar_plannerWidget .verticalBar {
|
|
display: none;
|
|
}
|
|
/* Don't split a calendar week across pages */
|
|
#calendar-view_view > tbody > tr.view_row {
|
|
page-break-inside: avoid;
|
|
}
|
|
/* Try to keep it on the page */
|
|
.calendar_calTimeGrid {
|
|
max-height: 18cm;
|
|
max-width: 90vw;
|
|
}
|
|
.calendar_calTimeGrid .calendar_calTimeGridScroll {
|
|
overflow-y: hidden !important;
|
|
}
|
|
|
|
/* Let hidden user names be visible */
|
|
#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > span.et2_label {
|
|
position: static;
|
|
}
|
|
#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > span.et2_label {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
div.calendar_calEvent {
|
|
opacity:1;
|
|
filter:opacity(0.85);
|
|
-webkit-filter:opacity(0.85);
|
|
border: 1px solid;
|
|
}
|
|
/* Make times & all day description bold for better visibility */
|
|
div.calendar_calDayColAllDay div.calendar_calEventBodySmall,
|
|
div.calendar_calEventHeader, div.calendar_calEventHeaderSmall
|
|
{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sidebox
|
|
*/
|
|
#calendar-et2_target {
|
|
position: relative;
|
|
}
|
|
#calendar-et2_target > div {
|
|
position: relative;
|
|
}
|
|
#calendar-sidebox_cat_id {
|
|
margin-bottom: 10px;
|
|
}
|
|
#calendar-sidebox_cat_id ~ * {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#calendar-sidebox_weekend {
|
|
/* Special css styling goes here */
|
|
}
|
|
|
|
|
|
|
|
#calendar-sidebox_date div.flatpickr-calendar.inline {
|
|
width: 100% !important;
|
|
}
|
|
|
|
#calendar-sidebox_date .flatpickr-day {
|
|
font-size: 11px;
|
|
}
|
|
#calendar-sidebox_date .inRange {
|
|
background-color: var(--row_hover);
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Conflict display */
|
|
div.calendar_conflicts {
|
|
max-height: 540px;
|
|
overflow-y: auto;
|
|
}
|
|
.calendar_conflicts img {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
.calendar_conflicts table[id*="conflicting_participants"] > tbody > tr.r .et2_label {
|
|
/* Color for resources */
|
|
color: blue;
|
|
}
|
|
|
|
/* Loader - hide sizing behind overlay*/
|
|
#egw-loadin-prompt_calendar::before {
|
|
opacity: 1;
|
|
background-color: #e6e6e6;
|
|
}
|
|
|
|
/* Toolbar */
|
|
#calendar-toolbar {
|
|
height: 3.6em;
|
|
margin-top: 0.3em;
|
|
}
|
|
#calendar-toolbar > div {
|
|
display: flex;
|
|
}
|
|
#calendar-toolbar .et2_toolbar {
|
|
background: inherit;
|
|
}
|
|
#calendar-toolbar .egw_fw_ui_app_header_container {
|
|
border: none;
|
|
display:flex;
|
|
align-items: center;
|
|
min-height: 26px;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
#calendar-toolbar .et2_searchbox input {
|
|
height: 14px;
|
|
}
|
|
#calendar-toolbar #calendar-toolbar_favorite_wrapper {
|
|
float: right;
|
|
white-space: nowrap;
|
|
margin-right: 5px;
|
|
margin-top: -4px;
|
|
}
|
|
#calendar-toolbar #calendar-toolbar_favorite_wrapper #calendar-toolbar_favorite_menu {
|
|
z-index: 40;
|
|
font-weight: normal;
|
|
}
|
|
#calendar-toolbar .et2_dropdown button.ui-state-default {
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* Space for toolbar */
|
|
#calendar-view, #calendar-todo, #calendar-planner, #calendar-list {
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
}
|
|
form#calendar-toolbar > div {
|
|
column-gap: 1ex;
|
|
}
|
|
#calendar-todo {
|
|
position: absolute;
|
|
width: 30%;
|
|
margin-top: 0px;
|
|
z-index: 10;
|
|
bottom: -10px;
|
|
height: calc(~"100% - 92px");
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
|
|
.calendar_size120b { font-size: 120%; font-weight: bold; }
|
|
|
|
/* marks a day in the colum-header as today
|
|
*/
|
|
.calendar_calToday,
|
|
.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday,
|
|
.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday.et2_link.et2_clickable {
|
|
background: #ffffcc;
|
|
color: #0C5DA5;
|
|
}
|
|
.calendar_calWeek{
|
|
background: #ffffcc;
|
|
width:auto;
|
|
margin:0 auto;
|
|
text-align:center;
|
|
}
|
|
.calendar_calMonth{
|
|
background: #ffffcc;
|
|
width:auto;
|
|
margin:0 auto;
|
|
text-align:center;
|
|
}
|
|
|
|
/* marks a day in the colum-header as holiday
|
|
*/
|
|
.calendar_calHoliday,
|
|
.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calHoliday.et2_link.et2_clickable {
|
|
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;
|
|
}
|
|
#calendar-view .calendar_calBirthday, #calendar-planner .calendar_plannerHeader .calendar_calBirthdayIcon {
|
|
background-image: url(../default/images/cake.svg);
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
background-position: 10px center;
|
|
}
|
|
/* Supress tooltips on holidays shown as events */
|
|
.calendar_calEventTooltip.calendar_calBirthday, .calendar_calEventTooltip.calendar_calHoliday {
|
|
display: none;
|
|
}
|
|
|
|
/* 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;
|
|
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.calendar_calTimeGrid .calendar_calTimeGridScroll {
|
|
position: relative;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
cursor: default;
|
|
background-color: white;
|
|
}
|
|
.calendar_calTimeGrid .calendar_calTimeLabels {
|
|
height: 100%;
|
|
}
|
|
|
|
.calendar_calTimeGrid .loading,.calendar_plannerWidget .loading {
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
position: absolute;
|
|
}
|
|
.calendar_calTimeGrid .loading::before ,.calendar_plannerWidget .loading::before {
|
|
opacity: 1;
|
|
background-color: #E6E6E6;
|
|
}
|
|
/* Timegrid that has hit a minimum size */
|
|
.calendar_calTimeGridFixed .calendar_calTimeGridScroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
Show the day headers for single week view only once.
|
|
Hide subsequent headers in week view with non-consolidated owners
|
|
*/
|
|
#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader
|
|
{
|
|
min-height: 0.5em;
|
|
}
|
|
#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader > div[data-date] {
|
|
display:none;
|
|
}
|
|
#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader > span.et2_label
|
|
{
|
|
position: absolute;
|
|
top: 2em;
|
|
}
|
|
#calendar-view_view.hideDayColHeader tr:first-of-type .calendar_calGridHeader .calendar_calDayColHeader_spacer
|
|
{
|
|
height:calc(1.5em + 32px);
|
|
}
|
|
#calendar-view_view.hideDayColHeader tr .calendar_calGridHeader > span.et2_label {
|
|
white-space:nowrap;
|
|
display: block;
|
|
position: static;
|
|
width: calc(100% - 58px);
|
|
margin-left: 58px;
|
|
color: white;
|
|
background-color: #2D6393;
|
|
text-align: center;
|
|
line-height: 1.5em;
|
|
font-size: 14px;
|
|
z-index: 35;
|
|
}
|
|
|
|
/* 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:
|
|
*/
|
|
}
|
|
.calendar_calTimeRow:not(.calendar_calWorkHours)
|
|
{
|
|
background-color: rgba(120,120,120,0.1);
|
|
}
|
|
|
|
/* 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;
|
|
transition: none;
|
|
}
|
|
/* Calendar Id #
|
|
*/
|
|
.calendar_calId:before {}
|
|
#calendar-edit_id:before { content:"#"}
|
|
|
|
/* header for the dayCol
|
|
*/
|
|
.calendar_calDayColHeader,.calendar_calGridHeader,.calendar_calGridHeader > div {
|
|
font-size: 100%;
|
|
line-height: 16px;
|
|
}
|
|
.calendar_calDayColHeader {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: top;
|
|
border-right: 1px solid silver;
|
|
height: initial;
|
|
min-height: 2em;
|
|
|
|
transition: none;
|
|
z-index:30;
|
|
white-space: initial;
|
|
padding-bottom: 2ex;
|
|
}
|
|
.calendar_calDayColHeader > div[data-date] {
|
|
font-size: 14px;
|
|
line-height: 27px;
|
|
text-align: center;
|
|
border-bottom: 1px solid silver;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
}
|
|
.hideDayColHeader .calendar_calDayColHeader > div[data-date] {
|
|
position:fixed;
|
|
width: inherit;
|
|
z-index: 100;
|
|
}
|
|
.blue_title {
|
|
color: white !important;
|
|
background: #2D6393 !important;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
/* Indicators for offscreen events */
|
|
.calendar_calDayColHeader .hiddenEventBefore, .calendar_calDayCol .hiddenEventAfter {
|
|
width: 80%;
|
|
left: 10%;
|
|
position: absolute;
|
|
border-radius: 5px;
|
|
border: 6px solid;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
overflow: hidden;
|
|
z-index: 40;
|
|
cursor: pointer;
|
|
}
|
|
.calendar_calDayColHeader .hiddenEventBefore {
|
|
height: 2px;
|
|
bottom: -6px;
|
|
border-top: none;
|
|
}
|
|
.calendar_calDayColHeader .hiddenEventBefore:hover {
|
|
bottom: -20px;
|
|
height: 16px;
|
|
border-left: 1px;
|
|
border-right: 1px;
|
|
border-top-left-radius: 0px;
|
|
border-top-right-radius: 0px;
|
|
background-color: white;
|
|
}
|
|
.calendar_calDayCol .hiddenEventAfter {
|
|
border-bottom: none;
|
|
height: 6px;
|
|
}
|
|
.calendar_calDayCol .hiddenEventAfter:hover {
|
|
margin-top: -20px;
|
|
height: 20px;
|
|
background-color: white;
|
|
}
|
|
.calendar_calTimeGridFixed .calendar_calDayCol .hiddenEventAfter:hover .calendar_calEvent {
|
|
position: relative;
|
|
}
|
|
|
|
/* Days in a different month, but shown to fill out the week */
|
|
.calendar_calDayColHeader.calendar_differentMonth > * {
|
|
color: rgb(106, 106, 106);
|
|
}
|
|
.calendar_calDayCol.calendar_differentMonth {
|
|
background-color: rgba(200,200,200,0.1);
|
|
}
|
|
|
|
/* Daily sortable */
|
|
.calendar_calDayColHeader .ui-sortable-handle {
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.calendar_calDayColAllDay {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items:flex-start;
|
|
width: 100%;
|
|
|
|
/* Set max height of all day section */
|
|
max-height: 4.2em;
|
|
overflow: hidden;
|
|
}
|
|
/* If more all day events than shown, show ellipsis & show all on hover */
|
|
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover {
|
|
max-height: none;
|
|
overflow: visible;
|
|
position: absolute;
|
|
background-color: #f0f0f0;
|
|
z-index: 50;
|
|
padding-bottom: 2ex;
|
|
}
|
|
.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after {
|
|
content: "\02026";
|
|
line-height: 0.5em;
|
|
height: 1em;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
text-align: center;
|
|
}
|
|
.calendar_calDayColAllDay .calendar_calEventHeader {
|
|
display: none;
|
|
}
|
|
.calendar_calDayColAllDay > .calendar_calEventBodySmall {
|
|
white-space: nowrap;
|
|
}
|
|
.calendar_calGridHeader > div {
|
|
position: relative;
|
|
height: 100%;
|
|
margin-left: 58px;
|
|
width: initial;
|
|
white-space: nowrap;
|
|
border-left: 1px solid silver;
|
|
display:flex;
|
|
align-items: stretch;
|
|
}
|
|
#calendar-view_view.hideDayColHeader .calendar_calGridHeader > div {
|
|
height: auto;
|
|
}
|
|
.calendar_calGridHeader > label {
|
|
float: left;
|
|
font-size: 14px;
|
|
line-height: 27px;
|
|
width: 58px;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
.calendar_calGridHeader > span.et2_label {
|
|
position: absolute;
|
|
width: 55px;
|
|
}
|
|
.calendar_TimeGridNoLabel > .calendar_calGridHeader > span.et2_label {
|
|
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 {
|
|
}
|
|
.calendar_calViewUserNameFirst:after {
|
|
content: ", ";
|
|
}
|
|
/* alarm_date widget disabled class
|
|
*/
|
|
.calendar_alarm_date_display {
|
|
display: none !important;
|
|
}
|
|
/*overwirte margin applied by egwGridView*/
|
|
.calendar_alarm_grid{
|
|
margin-left: 0 !important;
|
|
}
|
|
/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
|
|
*/
|
|
.calendar_calGridHeader{
|
|
text-align: left;
|
|
z-index: 29;
|
|
border-bottom: 1px solid silver;
|
|
border-top: 1px solid silver;
|
|
min-height: 1ex;
|
|
flex: 0 0 auto;
|
|
}
|
|
#calendar-view_view tbody.ui-sortable {
|
|
cursor: default;
|
|
}
|
|
#calendar-view_view tbody.ui-sortable .calendar_calGridHeader {
|
|
cursor: ns-resize;
|
|
}
|
|
#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader,
|
|
#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader label {
|
|
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;
|
|
-moz-opacity: 0.85;
|
|
box-sizing: border-box;
|
|
touch-action:none;
|
|
|
|
/* set via inline style on runtime:
|
|
* top: depending on startime
|
|
* height: depending on length
|
|
* border-color: depending on category
|
|
* background: depending on category (shade)
|
|
*
|
|
*/
|
|
border-color: #808080;
|
|
background-color: #808080;
|
|
}
|
|
|
|
.calendar_calEvent:not(.rowNoView):hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
/** Multi-line ellipsis */
|
|
.calendar_calEvent .calendar_calEventBody {
|
|
overflow: hidden;
|
|
}
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
|
|
width: 100%;
|
|
background-color: rgba(255,255,255,0.8);
|
|
height: 5px;
|
|
content: "\02026";
|
|
left: 0px;
|
|
float: right;
|
|
padding-bottom: 5em;
|
|
text-indent: 5px;
|
|
line-height: 5px;
|
|
}
|
|
/**
|
|
* User has not accepted the invitation
|
|
*/
|
|
.calendar_calEventUnknown {
|
|
border-color: white;
|
|
}
|
|
.calendar_calEventUnknown .calendar_calEventBody,
|
|
.calendar_calEventUnknown .calendar_calEventBodySmall {
|
|
background-color: white !important;
|
|
}
|
|
/**
|
|
* All participants accepted the invitation
|
|
*/
|
|
.calendar_calEventAllAccepted {
|
|
}
|
|
|
|
/**
|
|
* All participants answered the invitation, but not all accepted
|
|
*/
|
|
.calendar_calEventAllAnswered {
|
|
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.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,.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;
|
|
vertical-align: middle;
|
|
padding-left: 5px;
|
|
}
|
|
.calendar_calEventTooltip [data-videoconference] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.calendar_calAddEvent{
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.calendar_calDayColHeader .calendar_calAddEvent:hover{
|
|
background-color: #D2D7FF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* header-row of the event
|
|
*/
|
|
.calendar_calEventHeader,.calendar_calEventHeaderSmall{
|
|
position: relative; /* as the calendar_calEventIcons use postion: absolute! */
|
|
text-align: left;
|
|
left: 0px;
|
|
right: 0px;
|
|
padding-left: 2px;
|
|
min-height: 1em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
/* set via inline style on runtime
|
|
* background-color: depending on category
|
|
* color: white || black depending on cat;
|
|
*/
|
|
background-color: rgba(255,255,255,0.8);
|
|
}
|
|
.calendar_calEventHeader .calendar_calEventTitle {
|
|
display: none;
|
|
}
|
|
.calendar_calEventHeaderSmall{
|
|
font-size: 8pt;
|
|
line-height: 10pt;
|
|
}
|
|
.calendar_calEvent[data-priority='3'] .calendar_calEventTitle {
|
|
color: red;
|
|
}
|
|
.calendar_calEventIcons{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
/* Do not show icons in header, only tooltip */
|
|
display: none;
|
|
}
|
|
.calendar_calEventIcons img{
|
|
height: 13px;
|
|
}
|
|
.calendar_calEventHeaderSmall .calendar_calEventIcons img{
|
|
height: 13px;
|
|
}
|
|
|
|
/* body of the event
|
|
*/
|
|
.calendar_calEventBody,.calendar_calEventBodySmall{
|
|
padding: 0px 3px 0px;
|
|
left: 2px;
|
|
right: 2px;
|
|
height: 99%;
|
|
white-space: normal;
|
|
background-color: rgba(255,255,255,0.8);
|
|
}
|
|
.calendar_calEventBody > p, .calendar_calEventBodySmall > p {
|
|
white-space: pre-wrap;
|
|
}
|
|
.calendar_calEventBody .calendar_calTimespan {
|
|
display: none;
|
|
}
|
|
.calendar_calTimeGrid .calendar_calEventBodySmall{
|
|
font-size: 95%;
|
|
}
|
|
.calendar_calEventLabel{
|
|
font-weight: bold;
|
|
font-size: 90%;
|
|
display:inline;
|
|
}
|
|
|
|
.calendar_calEventTitle{
|
|
font-weight: bold;
|
|
font-size:100%;
|
|
display:inline;
|
|
}
|
|
|
|
/* Event is too small for full display */
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='1'] .calendar_calTimespan {
|
|
display: none;
|
|
}
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='2'] .calendar_calTimespan,
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='3'] .calendar_calTimespan {
|
|
display: inline;
|
|
}
|
|
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='1'] .calendar_calEventTitle,
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='2'] .calendar_calEventTitle,
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall[data-visible_lines='3'] .calendar_calEventTitle {
|
|
display: inline;
|
|
}
|
|
.calendar_calTimeGrid:not(.calendar_calTimeGridList)
|
|
.calendar_calEventSmall .calendar_calEventBody {
|
|
padding-top: 4em;
|
|
}
|
|
.calendar_plannerRowWidget .calendar_calEvent:not(.calendar_calEventSmall) .calendar_calTimespan {
|
|
display: none;
|
|
}
|
|
.calendar_plannerRowWidget .calendar_calEvent:not(.calendar_calEventSmall) .calendar_calEventHeader .calendar_calEventTitle {
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Events as displayed in a list, not sized by time */
|
|
.calendar_calTimeGridList .calendar_calTimeGridScroll {
|
|
overflow-y: hidden;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calGridHeader {
|
|
min-height: 1em;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayColAllDay {
|
|
display: none;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayColHeader {
|
|
min-height: initial;
|
|
padding-bottom: 0px;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
|
|
border: none;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper
|
|
{
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 3em;
|
|
width: 100%;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calEvent {
|
|
height: 1.1em;
|
|
position: relative;
|
|
border: none;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
border-radius: 0px;
|
|
padding-left: 6px;
|
|
}
|
|
.calendar_calTimeGridList .calendar_calEvent:not([data-full_day]) {
|
|
}
|
|
.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;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
}
|
|
.calendar_calDayTodos .calendar_calDayTodosTable {
|
|
overflow: auto;
|
|
position: absolute;
|
|
top: 3em;
|
|
bottom: 8px;
|
|
width: 100%;
|
|
}
|
|
.calendar_calDayTodos {
|
|
width: 98%;
|
|
border: 1px solid silver;
|
|
}
|
|
.calendar_calDayTodosHeader {
|
|
text-align: center;
|
|
}
|
|
.calendar_calDayTodosTable tr {
|
|
page-break-inside: avoid;
|
|
}
|
|
.calendar_calDayTodosTable tr td span:first-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.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;
|
|
left: 2px;
|
|
}
|
|
|
|
/******************************************************
|
|
* 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;
|
|
z-index: 1;
|
|
}
|
|
.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;
|
|
z-index: 2;
|
|
}
|
|
.calendar_plannerRowWidget:not(:first-child) {
|
|
border-top: 1px solid silver;
|
|
}
|
|
.calendar_plannerRowWidget[data-has_children]:before {
|
|
padding-right: 20px;
|
|
position: absolute;
|
|
content: " \25B6";
|
|
background-repeat: no-repeat;
|
|
left: 10px;
|
|
top: 2px;
|
|
}
|
|
|
|
.calendar_plannerRowWidget.current_user {
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
.calendar_plannerRowWidget:hover {
|
|
background-color: rgba(103, 159, 210, 0.2);
|
|
}
|
|
|
|
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
|
|
*/
|
|
.calendar_plannerScale,.calendar_plannerScaleDay {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0%;
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-content: stretch;
|
|
}
|
|
.calendar_plannerDayScale,.calendar_plannerMonthScale,.calendar_plannerWeekScale,.calendar_plannerHourScale,.calendar_plannerDayOfMonthScale {
|
|
position: absolute;
|
|
top: 0px;
|
|
/* left+width: is set by the code on runtime */
|
|
text-align: center;
|
|
height: 100%;
|
|
border-right: 1px solid silver;
|
|
border-bottom: 1px solid silver;
|
|
min-height: 2ex;
|
|
/* set via inline style on runtime:
|
|
* left:
|
|
* width:
|
|
*/
|
|
}
|
|
.calendar_plannerDayScale,.calendar_plannerWeekScale,.calendar_plannerHourScale {
|
|
position: static;
|
|
flex: 1 1 14%;
|
|
}
|
|
.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,.8);
|
|
}
|
|
|
|
|
|
/**
|
|
* Filler for month with less then 31 days in yearly planner
|
|
*/
|
|
.calendar_eventRowsFiller {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
height: 93%;
|
|
background-color: white;
|
|
border: 1px dashed gray;
|
|
border-right: none;
|
|
}
|
|
|
|
/**
|
|
* Weekend or other special days in yearly planner
|
|
*/
|
|
.calendar_eventRowsMarkedDay {
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 100%;
|
|
z-index: 10;
|
|
}
|
|
.calendar_eventRowsMarkedDay.calendar_weekend {
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
/* calendar_eventRowWidget contains non-overlapping events
|
|
*/
|
|
.calendar_eventRowWidget {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 20px;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.calendar_plannerWidget .calendar_calEventHeader,.calendar_calEventHeaderSmall {
|
|
height: 100%;
|
|
padding-top: 2px;
|
|
}
|
|
.calendar_plannerWidget .calendar_calEventSmall[data-full_day='true'] .calendar_calTimespan {
|
|
display: none;
|
|
}
|
|
.calendar_plannerWidget .calendar_calEventSmall .calendar_calEventTitle {
|
|
display: inline;
|
|
}
|
|
|
|
/* Special colors for the year view */
|
|
.calendar_cal_year_legend_weekend {
|
|
background-color: #CCCCCC;
|
|
}
|
|
.calendar_cal_year_legend {
|
|
background-color: #EFEFEF;
|
|
}
|
|
.calendar_cal_year_legend {
|
|
background-color: #FFFFCC;
|
|
z-index: 0;
|
|
}
|
|
.calendar_cal_year_weekend {
|
|
background-color: #F9F9CC;
|
|
z-index: 0;
|
|
}
|
|
.calendar_cal_year_today {
|
|
border-color: #EE0000;
|
|
border-width: 2px;
|
|
}
|
|
|
|
/**
|
|
* edit series or exception popup used in eventWidget and
|
|
* delete series and exceptions popup used in edit event
|
|
*/
|
|
|
|
#dialog-content {
|
|
display:block;
|
|
height:100px;
|
|
padding:6px;
|
|
color:#666666;
|
|
font-size:13px;
|
|
margin: -2px -1px 0px -2px;
|
|
width:410px;
|
|
}
|
|
/**
|
|
* Calendar Drag and Drop
|
|
* Class for div to show forbiden drop
|
|
*/
|
|
.calendar_d-n-d_timeCounter > span {
|
|
position: absolute;
|
|
background-color: #808080;
|
|
color: white;
|
|
left: 0;
|
|
width: 100% !important;
|
|
align: center;
|
|
border: dashed white 1px;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
.calendar_timeDemo {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #808080;
|
|
color: white;
|
|
width: 100%;
|
|
min-width: 5em;
|
|
align: center;
|
|
border:dashed white 1px;
|
|
border-radius: 1px;
|
|
}
|
|
.calendar_d-n-d_forbiden
|
|
{
|
|
background-color: red;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
/*Class for div to demonstrate dragging time*/
|
|
.calendar_d-n-d_timeCounter
|
|
{
|
|
font-size: 1.1em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
.calendar_d-n-d_timeCounter .loading
|
|
{
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
}
|
|
|
|
#calendar-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 */
|
|
transition-duration: 0s; /* was 2s */
|
|
transition-delay: 50ms;
|
|
}
|
|
|
|
/**
|
|
* Home page portlets
|
|
*/
|
|
.calendar_favorite_portlet .calendar_calMonthNavHeader a img,
|
|
.calendar_favorite_portlet .calendar_calWeekNavHeader a img,
|
|
.calendar_favorite_portlet .calendar_calDayColHeader a img,
|
|
.calendar_favorite_portlet .calendar_plannerScale a img{
|
|
display: none;
|
|
}
|
|
|
|
#calendar-edit_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 {
|
|
color: #000;
|
|
font-size: 14px;
|
|
height: 1.7em;
|
|
padding: 4px 3px 3px;
|
|
background: #b4cee773;
|
|
border-radius: 3px;
|
|
min-width: 19em;
|
|
border: 1px solid #d4d4d8;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Integration slide switches in toolbar */
|
|
#calendar-toolbar_toolbar et2-switch {
|
|
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"] {
|
|
background-size: 20px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
filter: grayscale(1) contrast(0.9999) opacity(0.7);
|
|
}
|
|
et2-switch#calendar-toolbar_toolbar-weekend {
|
|
background-image: none !important;
|
|
}
|
|
#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]{
|
|
filter: none;
|
|
box-shadow: inset 1px 1px 1px 1px gray !important;
|
|
}
|
|
#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{
|
|
background: none;
|
|
min-width: 24px;
|
|
}
|
|
#calendar-toolbar_toolbar et2-switch::part(control) {
|
|
visibility: hidden;
|
|
}
|
|
#calendar-toolbar_toolbar et2-switch {
|
|
height: 32px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 1px solid silver;
|
|
border-radius: 3px;
|
|
}
|
|
.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;}
|
|
|
|
#calendar-toolbar_toolbar .et2_toolbar_more {
|
|
margin-top: 0;
|
|
}
|
|
#calendar-toolbar button#toolbar-today {
|
|
color: #616161;
|
|
font-weight: 500;
|
|
}
|
|
|
|
#calendar-edit .dialogFooterToolbar {min-width: 800px;}
|
|
|
|
#calendar_edit_recur_data_chzn {width:99% !important;max-width:99% !important;}
|
|
|
|
|
|
/* 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) {
|
|
/* styles assigned when width is smaller than 1000px */
|
|
.calendar_calDayColHeader > div[data-date] .long_date
|
|
{
|
|
display: inline;
|
|
}
|
|
.calendar_calDayColHeader > div[data-date] .short_date
|
|
{
|
|
display: none;
|
|
}
|
|
/* 7 day needs short day labels */
|
|
.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) {
|
|
/* styles assigned when width is smaller than 480px; */
|
|
.calendar_calDayColHeader > div[data-date] .long_date,
|
|
.calendar_calDayColHeader > div[data-date] .short_date
|
|
{
|
|
display: none;
|
|
}
|
|
/* 5 day and less fits short day labels */
|
|
.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;
|
|
}
|
|
/* 2 day view and less has enough room for full label */
|
|
.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;
|
|
}
|
|
}
|
|
|
|
#calendar-edit_quantity.et2_textbox_ro {opacity:0.5;}
|
|
#calendar-edit_quantity, #calendar-edit_role {float:left;}
|
|
|
|
.category_report_cats {height:80%;overflow-y: auto;display:block;}
|
|
#calendar-category_report_grid {display:block;max-height: 550px;overflow-y: auto;}
|
|
|
|
#toolbar-weekend {background-image: none !important; filter:none;}
|
|
|
|
#calendar-list_nm .nextmatch_header .header_count {margin-right:-4px;}
|
|
|
|
#calendar-list_nm .nextmatch_header .search {
|
|
display: none;
|
|
}
|
|
|
|
#calendar-edit_description {height:70%;margin-bottom: 2em;} |