app.less

hnategh-2 2016-02-24 16:54:05 UTC #1

Author: hnategh
New Revision: 55134

URL: http://svn.stylite.de/viewvc/egroupware?rev=55134&view=rev
Log:
Mobile theme W.I.P.:

Migrate mobile styling into mobile theme

Added:
trunk/calendar/templates/mobile/app.css
trunk/calendar/templates/mobile/app.less
Modified:
trunk/calendar/templates/pixelegg/app.css
trunk/calendar/templates/pixelegg/app.less

Added: trunk/calendar/templates/mobile/app.css
URL: http://svn.stylite.de/viewvc/egroupware/trunk/calendar/templates/mobile/app.css?rev=55134&view=auto

— trunk/calendar/templates/mobile/app.css (added)
+++ trunk/calendar/templates/mobile/app.css Wed Feb 24 17:54:05 2016
@@ -1,0 +1,2594 @@
+/**

- Calendar - Mobile
- Please do NOT change app.css directly, instead change app.less and compile it!
- Pixleegg Template app.css
- @link http://www.egroupware.org
- @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- @author Hadi Nategh hn@stylite.de
- @package calendar
- @version $Id: app.less 55033 2016-02-16 18:49:17Z hnategh $
/
+/*
- EGroupware: CSS with less preprocessor
- CALENDAR
- Please do NOT change app.css directly, instead change app.less and compile it!
- @link http://www.egroupware.org
- @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
- @author Stefan Reinhardt stefan.reinhardt@pixelegg.de
- @package calendar
- @version $Id$
/
+/ $Id: app.css 55127 2016-02-23 22:23:01Z nathangray $ */
+/Media print classes/
+@media print {
.th td,
.row_on td,
.row_off td {
border: none !important;
}
img.calendar_print_button {
display: none !important;
}
tr.calendar_print_cat {
border-bottom: 1px solid gray;
}
+}
+/**
- Sidebox
*/
+#calendar-et2_target {
position: relative;
+}
+#calendar-sidebox_owner {
width: 90%;
+}
+#calendar-sidebox_owner ~ * {
vertical-align: top;
display: inline-block;
+}
+#calendar-sidebox_cat_id {
width: 90%;
+}
+#calendar-sidebox_cat_id ~ * {
vertical-align: top;
display: inline-block;
+}
+#calendar-sidebox_buttons tbody {
width: 100%;
+}
+#calendar-sidebox_date_header > button {
width: 45%;
+}
+#calendar-sidebox_header_go,
+#calendar-sidebox_header_today {
position: absolute;
width: 12.0px;
height: 12.0px;
top: 28px;
z-index: 1;
overflow: hidden;
margin: 0.5em;
font-size: 10px;
line-height: 50%;
color: white;
background-color: #217bc0;
background-image: none;
border: none;
border-radius: 100%;
+}
+#calendar-sidebox_header_today {
right: 35px;
+}
+#calendar-sidebox_header_go {
right: 80px;
text-indent: -1px;
+}
+#calendar-sidebox_header_go:hover,
+#calendar-sidebox_header_today:hover {
background-color: #0c5da5;
box-shadow: none;
+}
+#calendar-sidebox_date .ui-datepicker-header a {
top: 3px;
+}
+#calendar-sidebox_date .ui-datepicker-prev {
right: 3em;
+}
+#calendar-sidebox_weekend {
/* Special css styling goes here */
+}
+#calendar-sidebox_date .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
max-width: 10em;
+}
+#calendar-sidebox_date td.ui-datepicker-week-col {
cursor: pointer;
+}
+#calendar-sidebox_date .calendar_calHoliday {
background: inherit;
+}
+#calendar-sidebox_date .calendar_calHoliday a {
background-color: rgba(103, 159, 210, 0.5);
+}
+#calendar-sidebox_owner .ms-helper {
padding: 2px;
background-color: white;
+}
+/* Toolbar */
+#calendar-toolbar {
height: 30px;
+}
+#calendar-toolbar .egw_fw_ui_app_header_container {
border: none;
+}
+/* Space for toolbar */
+#calendar-view,
+#calendar-todo,
+#calendar-planner,
+#calendar-list {
position: absolute;
left: 0px;
right: 0px;
+}
+#calendar-todo {
position: absolute;
width: 30%;
margin-top: 0px;
z-index: 10;
+}
+#calendar-view {
width: 100%;
+}
+#calendar-view_view td {
padding: 0px;
+}
+/* Header classes */
+tr.dialogHeader td,
+tr.dialogHeader2 td,
+tr.dialogHeader3 td,
+tr.dialogHeader4 td,
+tr.dialogOperators td,
+.dialogFooterToolbar {
padding: 5px 0 5px 0;
vertical-align: middle;
+}
+.calendar_inputFullWidth input {
width: 100%;
+}
+/******************************************************************
- CSS settings for the day, week and month view (timeGridWidget) *
*****************************************************************/
+/
+Names used in the “graphic” are the css classes from this file.
+The function names in class uiviews have the leading cal removed and a trailing Widget added:
+e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget method of uiviews.

++++ calendar_calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ #### calendar_calDayCols[12h|NoGrip] ###########################################################
++ #… calendar_calDayCol … … calendar_calDayCol …
++ #.± calendar_calDayColHeader ---------------------+. .± calendar_calDayColHeader ------------------+.
++ #.| |. .| |.
++ #.±--------------------------------------+. .±-----------------------------------+.
++.calendar_calTimeRowTime.#.** calendar_calEventCol ***** ** calendar_calEventCol ***. . calendar_calEventCol ***************.
++. .#. * * . . .
++. .#. * * . . .
++…#.± calendar_calEvent -----+ * . . .
++.calendar_calTimeRowTime.#.| | * . .± calendar_calEvent[Private] --------------+.
++. .#.| | ± calendar_calEvent -----+. .| |.
++. .#.±---------------+ | |. .| |.
++…#. * | |. .| |.
++.calendar_calTimeRowTime.#. * ±---------------+. .| |.
++. .#. * * . .±---------------------------------+.
+
+/
+/ custom ui-tooltip style for calendar
+*/
+.calendar_uitooltip {

padding: 0px;
position: absolute;
border: none;
max-height: 400px;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px;
-moz-box-shadow: 0 0 5px;
box-shadow: 0 0 5px;
+}
+.calendar_size120b {
font-size: 120%;
font-weight: bold;
+}
+/* marks a day in the colum-header as today
*/
+.calendar_calToday {
background: #ffffcc;
+}
+.calendar_calWeek {
background: #ffffcc;
width: auto;
margin: 0 auto;
text-align: center;
+}
+.calendar_calMonth {
background: #ffffcc;
width: auto;
margin: 0 auto;
text-align: center;
+}
+/* marks a day in the colum-header as holiday
*/
+.calendar_calHoliday {
background-color: rgba(103, 159, 210, 0.5);
+}
+/* marks a day in the column-header additionaly as birthday of some contact,
- it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
*/
+.calendar_calBirthday,
+.calendar_calBirthday a {
color: #626161;
+}
+/* timeGridWidget, contains timeRow’s and dayCol’s
*/
+.calendar_calTimeGrid {
position: relative;
top: 0px;
left: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
display: flex;
flex-direction: column;
+}
+.calendar_calTimeGrid .calendar_calTimeGridScroll {
position: relative;
bottom: 0px;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
cursor: default;
+}
+.calendar_calTimeGrid .calendar_calTimeLabels {
height: 100%;
+}
+.calendar_calTimeGrid .loading,
+.calendar_plannerWidget .loading {
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
position: absolute;
+}
+/* Timegrid that has hit a minimum size */
+.calendar_calTimeGridFixed .calendar_calTimeGridScroll {
overflow: hidden;
+}
+/*
+Show the day headers for single week view only once.
+Hide subsequent headers in week view with non-consolidated owners
+*/
+#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader {
min-height: 0.5em;
+}
+#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader .calendar_calDayColHeader > div[data-date] {
display: none;
+}
+#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > ul > li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
+}
+#calendar-view_view.hideDayColHeader tr:not(:first-of-type) .calendar_calGridHeader > ul > li:hover {
overflow: visible;
+}
+/* single row in the time-line you dont need to set a bgcolor, but you can
*/
+.calendar_calTimeRow {
width: 100%;
/* set via inline style on runtime:
- height:
- top:
/
+}
+/ time in a timeRow
*/
+.calendar_calTimeRowTime {
padding-left: 5px;
height: 100%;
line-height: 14px;
font-size: 8pt;
text-align: left;
+}
+.calendar_calTimeRowTime[data-minute=‘0’] {
border-top: 1px solid silver;
background-image: none;
+}
+.calendar_calTimeRowTime[data-minute=‘30’] {
background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75) 2px, transparent 0%);
background-position: top;
background-size: 6px 1px;
background-repeat: repeat-x;
+}
+/* contains (multiple) dayCol’s
*/
+.calendar_calDayCols,
+.calendar_calDayCols12h,
+.calendar_calDayColsNoGrid {
position: absolute;
top: 0px;
/* bottom: 0px; does NOT work in IE, IE needs height: 100%! */
height: 100%;
left: 58px;
right: 0px;
white-space: nowrap;
+}
+/* 12h timeformat with am/pm
*/
+.calendar_calDayCols12h {
left: 65px;
+}
+/* no time grid --> no time column
*/
+.calendar_calDayColsNoTime {
left: 0px;
+}
+/* contains (multiple) eventCol’s
*/
+.calendar_calDayCol {
position: absolute;
top: 0px;
height: 100%;
/* set via inline style on runtime:
- left:
- width:
*/
border-left: 1px solid silver;
transition: none;
+}
+/* Calendar Id #
+*/
+#calendar-edit_id:before {
content: “#”;
+}
+/* header for the dayCol
*/
+.calendar_calDayColHeader,
+.calendar_calGridHeader,
+.calendar_calGridHeader > div {
font-size: 100%;
line-height: 16px;
+}
+.calendar_calDayColHeader {
display: inline-block;
position: relative;
vertical-align: top;
border-right: 1px solid silver;
height: initial;
min-height: 2em;
transition: none;
z-index: 30;
white-space: initial;
padding-bottom: 2ex;
+}
+.calendar_calDayColHeader > div[data-date] {
font-size: 14px;
line-height: 27px;
text-align: center;
border-bottom: 1px solid silver;
white-space: nowrap;
overflow: hidden;
+}
+/* Indicators for offscreen events */
+.calendar_calDayColHeader .hiddenEventBefore,
+.calendar_calDayCol .hiddenEventAfter {
width: 80%;
left: 10%;
position: absolute;
border-radius: 5px;
border: 6px solid;
border-left: 0px;
border-right: 0px;
overflow: hidden;
z-index: 40;
cursor: pointer;
+}
+.calendar_calDayColHeader .hiddenEventBefore {
height: 2px;
bottom: -6px;
border-top: none;
+}
+.calendar_calDayColHeader .hiddenEventBefore:hover {
bottom: -20px;
height: 16px;
border-left: 1px;
border-right: 1px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
+}
+.calendar_calDayCol .hiddenEventAfter {
border-bottom: none;
height: 6px;
+}
+.calendar_calDayCol .hiddenEventAfter:hover {
margin-top: -20px;
height: 20px;
background-color: white;
+}
+.calendar_calTimeGridFixed .calendar_calDayCol .hiddenEventAfter:hover .calendar_calEvent {
position: relative;
+}
+/* Days in a different month, but shown to fill out the week */
+.calendar_calDayColHeader.calendar_differentMonth > * {
color: #6a6a6a;
+}
+.calendar_calDayCol.calendar_differentMonth {
background-color: rgba(200, 200, 200, 0.1);
+}
+/* Daily sortable */
+.calendar_calDayColHeader .ui-sortable-handle {
cursor: ew-resize;
+}
+.calendar_calDayColAllDay {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
width: 100%;
/* Set max height of all day section */
max-height: 4.2em;
overflow: hidden;
+}
+/* If more all day events than shown, show ellipsis & show all on hover */
+.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:hover {
max-height: none;
overflow: visible;
position: absolute;
background-color: #f0f0f0;
z-index: 50;
padding-bottom: 2ex;
+}
+.calendar_calDayColHeader .calendar_calDayColAllDay.overflown:not(:hover)::after {
content: “\02026”;
line-height: 0.5em;
height: 1em;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
+}
+.calendar_calDayColAllDay > .calendar_calEventBodySmall {
white-space: nowrap;
+}
+.calendar_calGridHeader > div {
position: relative;
height: 100%;
margin-left: 58px;
width: initial;
white-space: nowrap;
border-left: 1px solid silver;
display: flex;
align-items: stretch;
+}
+.calendar_calGridHeader > label {
float: left;
font-size: 14px;
line-height: 27px;
width: 58px;
text-align: center;
+}
+.calendar_calGridHeader > ul {
position: absolute;
width: 55px;
+}
+.calendar_TimeGridNoLabel > .calendar_calGridHeader > ul {
display: none;
+}
+.calendar_calDayColHeader img {
vertical-align: middle;
+}
+.calendar_calWeekNavHeader,
+.calendar_calMonthNavHeader {
top: 0px;
left: 0px;
width: 100%;
right: 0px;
+}
+.calendar_calWeekNavHeader,
+.calendar_calMonthNavHeader img {
vertical-align: middle;
+}
+.calendar_calViewUserNameBox {
position: absolute;
top: -1px;
width: 95%;
text-align: left;
font-size: 120%;
white-space: nowrap;
border: 1px solid gray;
height: 17px;
left: -1px;
padding-top: 0px;
padding-left: 10px;
background: #dac0c0;
+}
+.calendar_calViewUserName {
font-weight: normal;
+}
+.calendar_calViewUserName:first-letter {
text-transform: uppercase;
+}
+.calendar_calViewUserNameFirst:after {
content: ", ";
+}
+/* alarm_date widget disabled class
+*/
+.calendar_alarm_date_display {
display: none;
+}
+/overwirte margin applied by egwGridView/
+.calendar_alarm_grid {
margin-left: 0 !important;
+}
+/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
*/
+.calendar_calGridHeader {
text-align: left;
z-index: 29;
border-bottom: 1px solid silver;
border-top: 1px solid silver;
min-height: 1ex;
flex: 0 0 auto;
+}
+#calendar-view_view tbody.ui-sortable {
cursor: default;
+}
+#calendar-view_view tbody.ui-sortable .calendar_calGridHeader {
cursor: ns-resize;
+}
+#calendar-view_view tbody.ui-sortable-disabled .calendar_calGridHeader {
cursor: pointer;
+}
+/* contains (multiple) events’s
*/
+.calendar_calEventCol {
position: absolute;
top: 0px;
/* bottom: 0px; does NOT work in IE, IE needs height: 100%! */
height: 100%;
/* set via inline style on runtime:
- left:
- width:
/
+}
+/ contains one event: header-row & -body
*/
+.calendar_calEvent {
position: absolute;
left: 0px;
right: 0px;
overflow: hidden;
z-index: 20;
padding-left: 6px;
min-height: 1.2em;
min-width: 5px;
/* It is important there are no CSS transitions, it breaks resize */
-webkit-transition: none;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
opacity: 0.85;
/* set via inline style on runtime:
- top: depending on startime
- height: depending on length
- border-color: depending on category
- background: depending on category (shade)
*/
border-color: #808080;
background-color: #808080;
+}
+.calendar_calEvent:not(.rowNoView):hover {
cursor: pointer;
+}
+/** Multi-line ellipsis */
+.calendar_calEvent .calendar_calEventBody {
overflow: hidden;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) *:not(.calendar_calDayColAllDay) > .calendar_calEvent::after {
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
height: 5px;
content: “\02026”;
left: 0px;
float: right;
padding-bottom: 5em;
text-indent: 5px;
line-height: 5px;
+}
+/**
- User has not accepted the invitation
*/
+.calendar_calEventUnknown {
border-color: white;
+}
+.calendar_calEventUnknown .calendar_calEventBody,
+.calendar_calEventUnknown .calendar_calEventBodySmall {
background-color: white !important;
+}
+/**
- All participants accepted the invitation
/
+/*
- All participants answered the invitation, but not all accepted
*/
+.calendar_calEventAllAnswered {
background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.8) 50%);
background-repeat: repeat-y;
background-size: 6px 2px;
+}
+/**
- Some participants did NOT answer the invitation
*/
+.calendar_calEventSomeUnknown:not(.calendar_calEventUnknown) {
background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5) 50%);
background-repeat: repeat-y;
background-size: 6px 5px;
+}
+.calendar_calEvent:not([class*=" cat_"]) {
/* Defaults for no category, so we don’t override it */
background-color: #808080;
+}
+/**
- Events in the header (all day)
*/
+.calendar_calDayColHeader .calendar_calEvent {
position: static;
display: inline-block;
white-space: nowrap;
/* This determines how many per line */
flex: 1 1 auto;
+}
+.calendar_calDayColHeader .calendar_calEvent .calendar_calEventBody {
white-space: nowrap;
background-color: #f0f0f0;
+}
+.calendar_calEventTooltip {
padding-left: 6px;
max-height: 400px;
min-width: 25ex;
overflow: auto;
+}
+/* Do not show icons in header, only tooltip */
+.calendar_calEventTooltip .calendar_calEventIcons {
display: inline-block;
+}
+.calendar_calEventTooltip .calendar_calEventBody,
+.calendar_calEventTooltip .calendar_calEventBodySmall {
padding-bottom: 1em;
+}
+.calendar_calEventTooltip img {
max-width: 1.5em;
+}
+.calendar_calAddEvent {
width: 100%;
z-index: 10;
+}
+.calendar_calAddEvent:hover {
background-color: #D2D7FF;
cursor: pointer;
+}
+/* header-row of the event
*/
+.calendar_calEventHeader,
+.calendar_calEventHeaderSmall {
position: relative;
/* as the calendar_calEventIcons use postion: absolute! */
text-align: left;
left: 0px;
right: 0px;
padding-left: 2px;
min-height: 1em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* set via inline style on runtime
- background-color: depending on category
- color: white || black depending on cat;
*/
background-color: rgba(255, 255, 255, 0.9);
+}
+.calendar_calEventHeader .calendar_calEventTitle {
display: none;
+}
+.calendar_calEventHeaderSmall {
font-size: 8pt;
line-height: 10pt;
+}
+.calendar_calEventIcons {
position: absolute;
right: 0px;
top: 0px;
/* Do not show icons in header, only tooltip */
display: none;
+}
+.calendar_calEventIcons img {
height: 13px;
+}
+.calendar_calEventHeaderSmall .calendar_calEventIcons img {
height: 13px;
+}
+/* body of the event
*/
+.calendar_calEventBody,
+.calendar_calEventBodySmall {
padding: 0px 3px 0px;
left: 2px;
right: 2px;
height: 99%;
white-space: normal;
background-color: rgba(255, 255, 255, 0.9);
+}
+.calendar_calEventBody > p,
+.calendar_calEventBodySmall > p {
white-space: pre-wrap;
+}
+.calendar_calEventBody .calendar_calTimespan {
display: none;
+}
+.calendar_calEventBodySmall {
font-size: 95%;
+}
+.calendar_calEventLabel {
font-weight: bold;
font-size: 90%;
+}
+.calendar_calEventTitle {
font-weight: bold;
+}
+/* Event is too small for full display */
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘1’] .calendar_calTimespan {
display: none;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘2’] .calendar_calTimespan,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘3’] .calendar_calTimespan {
display: inline;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘1’] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘2’] .calendar_calEventTitle,
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall[data-visible_lines=‘3’] .calendar_calEventTitle {
display: inline;
+}
+.calendar_calTimeGrid:not(.calendar_calTimeGridList) .calendar_calEventSmall .calendar_calEventBody {
padding-top: 4em;
+}
+/* Events as displayed in a list, not sized by time */
+.calendar_calTimeGridList .calendar_calTimeGridScroll {
overflow-y: hidden;
+}
+.calendar_calTimeGridList .calendar_calGridHeader {
min-height: 1em;
+}
+.calendar_calTimeGridList .calendar_calDayColAllDay {
display: none;
+}
+.calendar_calTimeGridList .calendar_calDayColHeader {
min-height: initial;
padding-bottom: 0px;
+}
+.calendar_calTimeGridList .calendar_calDayColHeader > div[data-date] {
border: none;
+}
+.calendar_calTimeGridList .calendar_calDayCol > div.event_wrapper {
position: absolute;
top: 0px;
bottom: 3em;
width: 100%;
+}
+.calendar_calTimeGridList .calendar_calEvent {
height: 1.1em;
position: relative;
border: none;
border-bottom: none;
border-right: none;
border-radius: 0px;
padding-left: 6px;
+}
+.calendar_calTimeGridList .calendar_calEventHeader {
display: none !important;
+}
+.calendar_calTimeGridList .calendar_calEventTitle {
font-weight: normal;
display: inline-block;
white-space: nowrap;
flex: 1 1;
overflow: hidden;
text-overflow: ellipsis;
+}
+.calendar_calTimeGridList .calendar_calEventBody {
overflow: hidden;
border: none;
background: white !important;
height: 100%;
padding-left: 6px;
display: flex;
+}
+.calendar_calTimeGridList .calendar_calEventBody .calendar_calTimespan {
display: inline-block;
text-align: right;
padding-right: 1px;
opacity: 0.8;
font-size: 90%;
flex: 0 0 auto;
+}
+.calendar_calTimeGridList .calendar_calEventBody > p {
display: none;
+}
+.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter {
left: 0px;
width: 100%;
margin-top: -1.5ex;
height: 2.1ex;
border-bottom-left-radius: 0px;
overflow: visible;
+}
+.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
content: attr(data-hidden_label);
display: block;
height: 100%;
min-height: 3ex;
background: white;
z-index: 21;
padding-left: 12px;
+}
+.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
/* Need !important to override calculated height*/
top: initial !important;
bottom: 0px;
white-space: pre;
background: white;
height: 100%;
overflow: auto;
+}
+.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover:before {
display: none;
+}
+/* table of the dayView containing 2 cols: 1) day-view, 2) todos
+*/
+.calendar_calDayView {
width: 100%;
+}
+/* calDayTods is the day-view’s todo column, containing the calDayTodoHeader and the calDayTodoTable
*/
+.calendar_calDayTodos .calendar_calDayTodosHeader {
margin: 0px;
padding: 2px;
font-weight: bold;
+}
+.calendar_calDayTodos .calendar_calDayTodosTable {
overflow: auto;
position: absolute;
top: 2em;
bottom: 8px;
width: 100%;
+}
+.calendar_calDayTodos {
width: 98%;
margin-left: 10px;
border: 1px solid silver;
+}
+.calendar_calDayTodosHeader {
text-align: center;
+}
+.calendar_calDayTodosTable tr td span:first-child {
white-space: nowrap;
+}
+/******************************************************
- CSS settings for the planner views (calendar_plannerWidget) *
*****************************************************/
+/ calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets
*/
+.calendar_plannerWidget {
position: relative;
top: 0px;
left: 0px;
width: 99.5%;
background-color: #f0f0f0;
+}
+.calendar_plannerWidget > div:not(.calendar_plannerHeader) {
overflow-y: auto;
overflow-x: hidden;
+}
+/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows
*/
+.calendar_plannerHeader {
position: relative;
top: 0px;
left: 0px;
+}
+.calendar_plannerRows {
position: relative;
+}
+.calendar_plannerGrid {
position: absolute;
top: 0px;
bottom: 0px;
left: 172px;
right: 0px;
overflow: hidden;
height: 100%;
border-left: 1px solid silver;
margin-left: -1px;
+}
+.calendar_plannerGrid > .calendar_plannerScale,
+.calendar_plannerGrid > .calendar_plannerScaleDay {
height: 100%;
position: absolute;
+}
+.calendar_plannerGrid .calendar_calToday,
+.calendar_plannerGrid .calendar_calHoliday {
background-color: initial;
+}
+.calendar_plannerGrid > div:nth-last-child(2) > div {
border: none;
border-right: 1px solid silver;
+}
+.calendar_plannerGrid > div:last-child > div {
border: none;
+}
+.calendar_plannerGrid > div:last-child > div:not(:first-child) {
background-image: linear-gradient(0deg, rgba(192, 192, 192, 0.75) 4px, transparent 0%);
background-position: top left;
background-size: 1px 10px;
background-repeat: repeat-y;
+}
+/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows
*/
+.calendar_plannerRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
min-height: 20px;
+}
+.calendar_plannerRowWidget:not(:first-child) {
border-top: 1px solid silver;
+}
+.calendar_plannerRowWidget[data-has_children]:before {
padding-right: 20px;
position: absolute;
content: " \25B6";
background-repeat: no-repeat;
left: 10px;
top: 2px;
+}
+.calendar_plannerRowWidget:hover {
background-color: rgba(103, 159, 210, 0.2);
+}
+/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
*/
+.calendar_plannerScale,
+.calendar_plannerScaleDay {
position: relative;
top: 0px;
left: 0%;
width: 100%;
height: 20px;
line-height: 20px;
+}
+.calendar_plannerDayScale,
+.calendar_plannerMonthScale,
+.calendar_plannerWeekScale,
+.calendar_plannerHourScale,
+.calendar_plannerDayOfMonthScale {
position: absolute;
top: 0px;
/* left+width: is set by the code on runtime */
text-align: center;
height: 100%;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
min-height: 2ex;
/* set via inline style on runtime:
- left:
- width:
*/
+}
+.calendar_plannerHourScale {
font-size: 90%;
+}
+.calendar_plannerDayScale {
font-size: 90%;
+}
+.calendar_plannerWeekScale {
line-height: 20px;
+}
+.calendar_plannerMonthScale {
font-weight: bold;
+}
+.calendar_plannerDayScale img,
+.calendar_plannerWeekScale img,
+.calendar_plannerMonthScale img,
+.calendar_plannerDayOfMonthScale img {
vertical-align: middle;
+}
+/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget
*/
+.calendar_plannerRowHeader,
+.calendar_plannerHeaderTitle {
position: absolute;
top: 0px;
left: 0%;
width: 150px;
height: 100%;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-left: 20px;
padding-right: 1px;
+}
+.calendar_plannerRowHeader:hover {
overflow: visible;
z-index: 30;
cursor: pointer;
+}
+.calendar_plannerHeaderTitle {
border-right: 1px solid silver;
+}
+/* calendar_eventRows contain multiple eventRowWidgets
*/
+.calendar_eventRows,
+.calendar_plannerHeaderRows {
position: relative;
top: 0px;
left: 0px;
right: 0px;
margin-left: 172px;
/* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */
min-height: 20px;
height: 100%;
+}
+.calendar_plannerWidget .verticalBar {
width: 8ex;
height: 100%;
position: absolute;
top: 0px;
border-right: 1px dotted;
pointer-events: none;
z-index: 40;
display: none;
+}
+.calendar_plannerWidget .verticalBar > span {
position: absolute;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 255, 0.8);
+}
+/**
- Filler for month with less then 31 days in yearly planner
*/
+.calendar_eventRowsFiller {
position: absolute;
top: 0px;
height: 93%;
background-color: white;
border: 1px dashed gray;
border-right: none;
+}
+/**
- Weekend or other special days in yearly planner
*/
+.calendar_eventRowsMarkedDay {
position: absolute;
top: 0px;
height: 100%;
z-index: 10;
+}
+.calendar_eventRowsMarkedDay.calendar_weekend {
background-color: #e0e0e0;
+}
+/* calendar_eventRowWidget contains non-overlapping events
*/
+.calendar_eventRowWidget {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
border: 1px solid white;
+}
+.calendar_plannerWidget .calendar_calEventHeader,
+.calendar_calEventHeaderSmall {
height: 100%;
padding-top: 2px;
+}
+/* Special colors for the year view */
+.calendar_cal_year_legend_weekend {
background-color: #CCCCCC;
+}
+.calendar_cal_year_legend {
background-color: #EFEFEF;
+}
+.calendar_cal_year_legend {
background-color: #FFFFCC;
z-index: 0;
+}
+.calendar_cal_year_weekend {
background-color: #F9F9CC;
z-index: 0;
+}
+.calendar_cal_year_today {
border-color: #EE0000;
border-width: 2px;
+}
+/**
- edit series or exception popup used in eventWidget and
- delete series and exceptions popup used in edit event
*/
+#dialog-content {
display: block;
height: 100px;
padding: 6px;
color: #666666;
font-size: 13px;
margin: -2px -1px 0px -2px;
width: 410px;
+}
+/**
- Calendar Drag and Drop
- Class for div to show forbiden drop
*/
+.calendar_d-n-d_timeCounter > span {
position: absolute;
background-color: #808080;
color: white;
left: 0;
width: 100% !important;
align: center;
border: dashed white 1px;
border-radius: 1px;
+}
+.calendar_timeDemo {
position: absolute;
bottom: 0;
left: 0;
background-color: #808080;
color: white;
width: 100%;
min-width: 5em;
align: center;
border: dashed white 1px;
border-radius: 1px;
+}
+.calendar_d-n-d_forbiden {
background-color: red;
height: 100%;
width: 100%;
text-align: center;
+}
+/Class for div to demonstrate dragging time/
+.calendar_d-n-d_timeCounter {
font-size: 1.1em;
font-weight: bold;
text-align: center;
+}
+.calendar_d-n-d_timeCounter .loading {
width: 16px;
height: 16px;
position: absolute;
bottom: 0px;
right: 0px;
+}
+#calendar-edit_action {
width: 10em;
padding-left: 10px;
margin-left: 5px;
+}
+#calendar-list_undelete_popup,
+#calendar-list_delete_popup {
display: none;
+}
+.calendar_freetime_header {
font-size: 120%;
font-weight: bold;
+}
+.calendar_freetime_timeframe {
position: relative;
+}
+.calendar_freetime_dow {
position: absolute;
+}
+img.calendar_print_button,
+img.calendar_print_appicon {
height: 24px;
width: 24px;
+}
+/Sortable views/
+.srotable_cal_wk_ph {
border: 2px dashed gray;
height: 230px;
width: 99%;
background-color: #ece2f7;
+}
+.srotable_cal_day_ph {
position: relative;
width: 33.333333%;
height: 99%;
border: 2px dashed gray;
background-color: #ece2f7;
display: inline-block;
+}
+/**
- View animation stuff
*/
+.calendar_slide {
/* There is a cleanup timeout in calendar app.js line 563 that must match */
transition-duration: 0s;
/* was 2s */
transition-delay: 50ms;
+}
+/**
- Home page portlets
*/
+.calendar_favorite_portlet .calendar_calMonthNavHeader a img,
+.calendar_favorite_portlet .calendar_calWeekNavHeader a img,
+.calendar_favorite_portlet .calendar_calDayColHeader a img,
+.calendar_favorite_portlet .calendar_plannerScale a img {
display: none;
+}
+#calendar-edit select#calendar-edit_duration {
width: 133px;
+}
+#calendar-edit_account + .chzn-container .chzn-results {
max-height: 195px;
+}
+#calendar-edit_category {
max-width: 230px;
+}
+#calendar_sidebox_content .ui-datepicker div.ui-datepicker-buttonpane {
border-top: 0;
margin: 0;
padding-right: 3px;
+}
+/weekend slideSwitch in toolbar/
+#calendar-toolbar_app_header {
font-weight: bold;
color: #616161;
+}
+#calendar-toolbar_toolbar .et2_toolbar_more {
margin-top: 0;
+}
+#calendar-toolbar button#toolbar-today {
color: #616161;
font-weight: 500;
+}
+/generell/
+.egw_fw_content_browser_iframe img[src$=“svg”] {
background-color: #828282 !important;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=) !important;
background-image: -moz-linear-gradient(top, #828282, #828282) !important;
background-image: -ms-linear-gradient(top, #828282, #828282) !important;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#828282), to(#828282)) !important;
background-image: -webkit-linear-gradient(top, #828282, #828282) !important;
background-image: -o-linear-gradient(top, #828282, #828282) !important;
background-image: linear-gradient(top, #828282, #828282) !important;
background-repeat: repeat-x !important;
+}
+.egw_fw_ui_category_content {
padding-left: 0px !important;
+}
+.egw_fw_ui_category_content img.egw_fw_ui_sidemenu_listitem_icon {
display: none;
+}
+img.sideboxstar {
width: 12px;
height: 12px;
/.background_color_10_gray;/
-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px;
margin: 1px;
+}
+img.sideboxstar:hover {
/.background_color_20_gray;/
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
+}
+img.sideboxstar:active {
/.background_color_30_gray;/
border: 1px solid rgba(0, 0, 0, 0.9);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
background-color: #1aa200;
background-color: #1aa200 !important;
+}
+.chzn-container {
max-width: 85% !important;
margin-top: 0em;
+}
+.egw_fw_content_browser_iframe {
margin-top: 0em;
border: none;
+}
+.calendar_calDayColHeader img {
width: 16px;
height: 16px;
+}
+.calendar_calWeekNavHeader img {
width: 16px;
height: 16px;
+}
+.calendar_calMonthNavHeader img {
width: 16px;
height: 16px;
+}
+.calendar_calEventBodySmall img {
width: 16px;
height: 16px;
+}
+.calendar_calEventBodySmall img[src$=“svg”],
+.calendar_calDayColHeader img[src$=“svg”] {
background-color: #0c5da5;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzc0MyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjMGM1ZGE1IiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzc0MykiLz48L3N2Zz4=);
background-image: -moz-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -ms-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0c5da5), to(#0c5da5));
background-image: -webkit-linear-gradient(top, #0c5da5, #0c5da5);
background-image: -o-linear-gradient(top, #0c5da5, #0c5da5);
background-image: linear-gradient(top, #0c5da5, #0c5da5);
background-repeat: repeat-x;
+}
+/* calender view*/
+/defind in layout_raster.less , because frame/
+span#start {
margin-right: 1em;
+}
+/* The main calendar widget. DIV containing a table. */
+div.calendar {
position: relative;
+}
+/* Header part – contains navigation buttons and day names. */
+.calendar {
/* The body part – contains all the days in month. */
/* The footer part – status bar and “Close” button */
/* Combo boxes (menus that display months/years for direct selection) */
+}
+.calendar .button {
/* “<<”, “<”, “>”, “>>” buttons have this class */
text-align: center;
/* They are the navigation buttons */
padding: 2px;
/* Make the buttons seem like they’re pressing */
background-color: #ffc200;
+}
+.calendar .nav {
/background: url(…/images/menuarrow.png) no-repeat 100% 100%;/
background-image: none;
background-color: #ffc200;
+}
+.calendar thead .title {
/* This holds the current “month, year” */
font-weight: bold;
/* Pressing it will take you to the current date */
/text-align: center;/
background-color: #679fd2;
+}
+.calendar thead .title:hover {
background-color: #e6e6e6 !important;
+}
+.calendar thead .headrow {
/* Row containing navigation buttons */
background-color: #ffc200;
color: #fff;
+}
+.calendar thead .daynames {
/* Row containing the day names */
background-color: #b3b3b3 !important;
+}
+.calendar thead .name {
/* Cells containing the day names */
/border-bottom: 1px solid #556;/
/padding: 2px;/
/text-align: center;/
/color: #000;/
+}
+.calendar thead .weekend {
/* How a weekend day name shows in header */
color: #a66;
+}
+.calendar thead .hilite {
/* How do the buttons in header appear when hover */
background-color: #ffffff;
border: none;
/.box_shadow_standard_light_inset;/
/color: #000;/
/border: 0px solid;/
border-color: #828282;
/padding: 1px;/
+}
+.calendar thead .active {
/* Active (pressed) buttons in header */
background_color: #408dd2;
/padding: 2px 0px 0px 2px;/
+}
+.calendar tbody tr,
+.calendar tbody td {
border: 1px;
+}
+.calendar tbody .day {
/* Cells containing month days dates */
/width: 2em;/
/color: #456;/
/text-align: right;/
/padding: 2px 4px 2px 2px;/
/border: 1px;/
+}
+.calendar tbody .day.othermonth {
font-size: 80%;
color: #bbb;
+}
+.calendar tbody .day.othermonth.oweekend {
color: #fbb;
+}
+.calendar tbody .rowhilite td {
background-color: #bfbfbf;
+}
+.calendar tbody .rowhilite td.wn {
background: #eef;
+}
+.calendar tbody td.hilite {
/* Hovered cells */
/background: #def;/
/padding: 1px 3px 1px 1px;/
/border: 1px solid #bbb;/
+}
+.calendar tbody td.active {
/* Active (pressed) cells */
background: #cde;
/padding: 2px 2px 0px 2px;/
+}
+.calendar tbody td.selected {
/* Cell showing today date */
/font-weight: normal;/
/border: 0px solid @gray_50;/
/padding: 1px 3px 1px 1px;/
/padding: 0px;/
background-color: #ffdd73;
color: #000;
-webkit-box-shadow: inset 1px 2px 1px #000000;
-moz-box-shadow: inset 1px 2px 1px #000000;
box-shadow: inset 1px 2px 1px #000000;
+}
+.calendar tbody td.weekend {
/* Cells showing weekend days */
color: #a66;
+}
+.calendar tbody td.today {
/* Cell showing selected date */
font-weight: normal;
color: #189800;
background-color: #ffc200;
+}
+.calendar tbody .disabled {
color: #999;
+}
+.calendar tbody .emptycell {
/* Empty cells (the best is to hide them) */
visibility: hidden;
+}
+.calendar tbody .emptyrow {
/* Empty row (some months need less than 6 rows) */
display: none;
+}
+.calendar table .wn {
/padding: 2px 3px 2px 2px;/
/border-right: 1px solid #000;/
background-color: #b3b3b3 !important;
+}
+.calendar tfoot .footrow {
/* The in footer (only one right now) */
text-align: center;
background: #556;
color: #fff;
+}
+.calendar tfoot .ttip {
/* Tooltip (status bar) cell */
background: #fff;
color: #445;
border-top: 1px solid #556;
padding: 1px;
height: 30px;
+}
+.calendar tfoot .hilite {
/* Hover style for buttons in footer */
background: #aaf;
border: 1px solid #04f;
color: #000;
padding: 1px;
+}
+.calendar tfoot .active {
/* Active (pressed) style for buttons in footer */
background: #77c;
padding: 2px 0px 0px 2px;
+}
+.calendar .combo {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 4em;
cursor: default;
border: 1px solid #655;
background: #def;
color: #000;
font-size: 90%;
+}
+.calendar .combo .label,
+.calendar .combo .label-IEfix {
text-align: center;
padding: 1px;
+}
+.calendar .combo .label-IEfix {
width: 4em;
+}
+.calendar .combo .hilite {
background: #acf;
+}
+.calendar .combo .active {
border-top: 1px solid #46a;
border-bottom: 1px solid #46a;
background: #eef;
font-weight: bold;
+}
+.calendar td.time {
border-top: 1px solid #000;
padding: 1px 0px;
text-align: center;
background-color: #f4f0e8;
+}
+.calendar td.time .hour,
+.calendar td.time .minute,
+.calendar td.time .ampm {
padding: 0px 3px 0px 4px;
border: 1px solid #889;
font-weight: bold;
background-color: #fff;
+}
+.calendar td.time .ampm {
text-align: center;
+}
+.calendar td.time .colon {
padding: 0px 2px 0px 3px;
font-weight: bold;
+}
+.calendar td.time span.hilite {
border-color: #000;
background-color: #b3b3b3 !important;
color: #fff;
+}
+.calendar td.time span.active {
border-color: #f00;
background-color: #000;
color: #0f0;
+}
+/###########################################
+# #
+# dialogHeader #
+#############################################
+# #
+# #
+# #
+# #
+# #
+# dialog #
+# #
+# #
+#############################################
+# #
+# buttons #
+# #
+# #
+##############################################/
+#calendar-edit {
/###########################################/
/###########################################/
/Tab Beschreibung/
/###########################################/
/###########################################/
/###########################################/
/###########################################/
/###########################################/
/###########################################/
/// Historie/
/###########################################/
/// Toolbar/
+}
+#calendar-edit label.et2_label {
/padding: 0 2px;/
+}
+#calendar-edit .chzn-container {
padding-top: 0;
+}
+#calendar-edit .et2_tabheader {
background-color: transparent;
+}
+#calendar-edit input.hasDatepicker,
+#calendar-edit #calendar-edit_start {
width: 129px;
+}
+#calendar-edit #calendar-edit_whole_day {
margin: 0 0.8em 0 23px;
+}
+#calendar-edit label.et2_label#calendar-edit_calendar_edit_duration {
/margin-left: 20px;/
/margin-right: 49px;/
+}
+#calendar-edit select#calendar-edit_duration {
width: 133px;
+}
+#calendar-edit button#calendar-edit_freetime {
height: 16px;
background-size: 12px auto !important;
margin-left: 32px;
padding-top: 0px;
+}
+#calendar-edit #calendar-edit_id {
float: right;
margin-right: 5px;
+}
+#calendar-edit #calendar-edit_calendar-edit-details {
display: block;
float: left;
width: 10