forked from extern/egroupware
438 lines
9.7 KiB
CSS
438 lines
9.7 KiB
CSS
/* $Id$ */
|
|
|
|
/******************************************************************
|
|
* 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 calTimeGrid is generated by the timeGridWidget method of uiviews.
|
|
|
|
+++ calTimeGrid +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
|
|
+ #### calDayCols[12h|NoGrip] ###########################################################
|
|
+ #... calDayCol ............................. ... calDayCol ..........................
|
|
+ #.+- calDayColHeader ---------------------+. .+- calDayColHeader ------------------+.
|
|
+ #.| |. .| |.
|
|
+ #.+---------------------------------------+. .+------------------------------------+.
|
|
+.calTimeRowTime.#.** calEventCol ***** ** calEventCol *****. .** calEventCol ***********************.
|
|
+. .#.* * * *. .* *.
|
|
+. .#.* * * *. .* *.
|
|
+................#.*+- calEvent -----+* * *. .* *.
|
|
+.calTimeRowTime.#.*| |* * *. .*+- calEvent[Private] --------------+*.
|
|
+. .#.*| |* *+- calEvent -----+*. .*| |*.
|
|
+. .#.*+----------------+* *| |*. .*| |*.
|
|
+................#.* * *| |*. .*| |*.
|
|
+.calTimeRowTime.#.* * *+----------------+*. .*| |*.
|
|
+. .#.* * * *. .*+----------------------------------+*.
|
|
|
|
*/
|
|
|
|
.redItalic { color: red; font-style: italic; }
|
|
.size120b { font-size: 120%; font-weight: bold; }
|
|
|
|
/* marks a day in the colum-header as today
|
|
*/
|
|
.calToday{
|
|
background: #ffffcc;
|
|
}
|
|
/* marks a day in the colum-header as holiday
|
|
*/
|
|
.calHoliday{
|
|
background: #dac0c0;
|
|
}
|
|
/* marks a day in the column-header additionaly as birthday of some contact,
|
|
* it should work together with the backgrounds of calToday, calHoliday, th, row_on and row_off
|
|
*/
|
|
.calBirthday,.calBirthday a{
|
|
color: black;
|
|
font-weight: bold;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* timeGridWidget, contains timeRow's and dayCol's
|
|
*/
|
|
.calTimeGrid{
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
border:1px solid silver;
|
|
width: 100%;
|
|
/* set via inline style on runtime:
|
|
* height:
|
|
*/
|
|
}
|
|
|
|
/* single row in the time-line, always used in conjunction with row_{on|off}, you dont need to set a bgcolor, but you can
|
|
*/
|
|
.calTimeRow,.calTimeRowOff{
|
|
position: absolute;
|
|
width: 100%;
|
|
/* set via inline style on runtime:
|
|
* height:
|
|
* top:
|
|
*/
|
|
}
|
|
.calTimeRow{
|
|
/* background-color: silver; */
|
|
}
|
|
|
|
/* time in a timeRow
|
|
*/
|
|
.calTimeRowTime{
|
|
padding-left: 5px;
|
|
height: 100%;
|
|
line-height: 14px;
|
|
font-size:8pt;
|
|
text-align: left;
|
|
}
|
|
|
|
/* contains (multiple) dayCol's
|
|
*/
|
|
.calDayCols,.calDayCols12h,.calDayColsNoGrid{
|
|
position: absolute;
|
|
top: 0px;
|
|
/* bottom: 0px; does NOT work in IE, IE needs height: 100%! */
|
|
height: 100%;
|
|
left: 45px;
|
|
right: 0px;
|
|
}
|
|
/* 12h timeformat with am/pm
|
|
*/
|
|
.calDayCols12h{
|
|
left: 65px;
|
|
}
|
|
/* no time grid --> no time column
|
|
*/
|
|
.calDayColsNoTime{
|
|
left: 0px;
|
|
}
|
|
|
|
/* contains (multiple) eventCol's
|
|
*/
|
|
.calDayCol{
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 100%;
|
|
/* set via inline style on runtime:
|
|
* left:
|
|
* width:
|
|
*/
|
|
border-left: 1px solid silver;
|
|
}
|
|
|
|
/* header for the dayCol
|
|
*/
|
|
.calDayColHeader,.calGridHeader{
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */
|
|
text-align: center;
|
|
font-size: 100%;
|
|
white-space: nowrap;
|
|
border-bottom: 1px solid silver;
|
|
border-right: 1px solid silver;
|
|
height: 16px;
|
|
line-height: 16px;
|
|
z-index: 30;
|
|
}
|
|
.calDayColHeader img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.calViewUserName {
|
|
font-weight: normal;
|
|
}
|
|
.calViewUserName:first-letter {
|
|
text-transform:uppercase;
|
|
}
|
|
.calViewUserNameFirst {
|
|
}
|
|
.calViewUserNameFirst:after {
|
|
content: ", ";
|
|
}
|
|
|
|
/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers)
|
|
*/
|
|
.calGridHeader{
|
|
text-align: left;
|
|
padding-left: 3px;
|
|
}
|
|
|
|
/* contains (multiple) events's
|
|
*/
|
|
.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
|
|
*/
|
|
.calEvent,.calEventPrivate{
|
|
position: absolute;
|
|
left: 0px;
|
|
right: 0px;
|
|
overflow: hidden;
|
|
z-index: 20;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
/* set via inline style on runtime:
|
|
* top: depending on startime
|
|
* height: depending on length
|
|
* border-color: depending on category
|
|
* background: depending on category (shade)
|
|
*/
|
|
}
|
|
.calEvent:hover{
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|
|
|
|
.calEventTooltip{
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
}
|
|
|
|
.calAddEvent{
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.calAddEvent:hover{
|
|
background-color: #D2D7FF;
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|
|
|
|
/* header-row of the event
|
|
*/
|
|
.calEventHeader,.calEventHeaderSmall{
|
|
position: relative; /* as the calEventIcons use postion: absolute! */
|
|
font-weight: bold;
|
|
font-size: 9pt;
|
|
color: white;
|
|
text-align: left;
|
|
left: 0px;
|
|
right: 0px;
|
|
padding-left: 2px;
|
|
/* set via inline style on runtime
|
|
* background-color: depending on category
|
|
*/
|
|
}
|
|
.calEventHeaderSmall{
|
|
font-size: 8pt;
|
|
line-height: 10pt;
|
|
}
|
|
|
|
.calEventIcons{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
.calEventHeaderSmall .calEventIcons img{
|
|
height: 13px;
|
|
}
|
|
|
|
/* body of the event
|
|
*/
|
|
.calEventBody,.calEventBodySmall{
|
|
padding: 0px 3px 0px;
|
|
left: 2px;
|
|
right: 2px;
|
|
height: 99%;
|
|
}
|
|
|
|
.calEventBodySmall{
|
|
font-size: 95%;
|
|
}
|
|
|
|
.calEventLabel{
|
|
font-weight: bold;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.calEventTitle{
|
|
font-weight: bold;
|
|
font-size: 110%;
|
|
}
|
|
|
|
/* table of the dayView containing 2 cols: 1) day-view, 2) todos
|
|
*/
|
|
.calDayView{
|
|
width: 100%;
|
|
}
|
|
/* calDayTods is the day-view's todo column, containing the calDayTodoHeader and the calDayTodoTable
|
|
*/
|
|
.calDayTodos .calDayTodosHeader {
|
|
margin: 0px;
|
|
padding: 2px;
|
|
font-weight: bold;
|
|
}
|
|
.calDayTodos .calDayTodosTable {
|
|
overflow: auto;
|
|
max-height: 400px;
|
|
}
|
|
.calDayTodos {
|
|
width: 250px;
|
|
margin-left: 10px;
|
|
border: 1px solid silver;
|
|
}
|
|
.calDayTodosHeader {
|
|
text-align: center;
|
|
}
|
|
|
|
/******************************************************
|
|
* CSS settings for the planner views (plannerWidget) *
|
|
******************************************************/
|
|
|
|
/* plannerWidget represents the whole planner, consiting of the plannerHeader and multiple plannerRowWidgets
|
|
*/
|
|
.plannerWidget {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 99.5%;
|
|
border: 1px solid gray;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
/* plannerHeader contains a plannerHeaderTitle and multiple plannerHeaderRows
|
|
*/
|
|
.plannerHeader {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* plannerRowWidget contains a plannerRowHeader and multiple eventRowWidgets in an eventRows
|
|
*/
|
|
.plannerRowWidget {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* plannerScale represents a scale-row of the plannerHeader, containing multiple planner{Day|Week|Month}Scales
|
|
*/
|
|
.plannerScale,.plannerScaleDay{
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0%;
|
|
width: 100%;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
.plannerScaleDay {
|
|
height: 28px;
|
|
line-height: 14px;
|
|
}
|
|
.plannerDayScale,.plannerMonthScale,.plannerWeekScale,.plannerHourScale {
|
|
position: absolute;
|
|
top: 0px;
|
|
/* left+width: is set by the code on runtime */
|
|
text-align: center;
|
|
height: 100%;
|
|
border: 1px solid white;
|
|
/* set via inline style on runtime:
|
|
* left:
|
|
* width:
|
|
*/
|
|
}
|
|
.plannerHourScale {
|
|
font-size: 90%;
|
|
}
|
|
.plannerDayScale {
|
|
font-size: 90%;
|
|
}
|
|
.plannerWeekScale {
|
|
line-height: 20px;
|
|
}
|
|
.plannerMonthScale {
|
|
font-weight: bold;
|
|
}
|
|
.plannerDayScale img,.plannerWeekScale img,.plannerMonthScale img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* plannerRowHeader contains the user or category name of the plannerRowWidget
|
|
*/
|
|
.plannerRowHeader, .plannerHeaderTitle {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0%;
|
|
width: 15%; /* need to be identical for plannerRowHeader and plannerHeaderTitle and match left of eventRows/plannerHeaderRows */
|
|
height: 100%;
|
|
line-height: 20px;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
/* eventRows contain multiple eventRowWidgets
|
|
*/
|
|
.eventRows, .plannerHeaderRows {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 15%; /* need to be identical for eventRows and plannerHeaderRows and match width of plannerRowHeader/plannerHeaderTitle */
|
|
width: 85%;
|
|
}
|
|
|
|
/* eventRowWidget contains non-overlapping events
|
|
*/
|
|
.eventRowWidget {
|
|
position: relative;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 20px;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.plannerEvent,.plannerEventPrivate{
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
z-index: 20;
|
|
border: 1px solid black;
|
|
/* set via inline style on runtime:
|
|
* left: depending on startime
|
|
* width: depending on length
|
|
* background-color: depending on category
|
|
*/
|
|
}
|
|
.plannerEvent img,.plannerEventPrivate img {
|
|
padding-top: 2px;
|
|
}
|
|
.plannerEvent:hover{
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
}
|