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.
1175 lines
28 KiB
Plaintext
Executable File
1175 lines
28 KiB
Plaintext
Executable File
/**
|
|
* 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
|
|
*/
|
|
|
|
@import (reference) "../../../pixelegg/less/definitions.less";
|
|
@import (less) "../default/app.css";
|
|
|
|
/*generell*/
|
|
|
|
// makes svg visible
|
|
.egw_fw_content_browser_iframe img[src$="svg"] {
|
|
.gradient_vertical (@gray_50, @gray_50) !important;
|
|
}
|
|
|
|
|
|
#calendar-list {
|
|
/* Keeps the scrollbar in the window in chrome */
|
|
margin-right: 10px;
|
|
/* Prevents going to far down (off bottom)*/
|
|
height: ~"calc(100% - 78px)";
|
|
}
|
|
|
|
// ************************************************
|
|
// Seitenleiste
|
|
// Ansichten
|
|
|
|
#calendar_sidebox_content .egw_fw_ui_category_content{
|
|
padding-left: 0px !important;
|
|
}
|
|
|
|
img.sideboxstar {
|
|
.dimension_width_height_xs;
|
|
.Complete_Button_Icon_normal;
|
|
.rounded (3px);
|
|
padding: 3px;
|
|
margin: 1px;
|
|
|
|
&:hover{.Complete_Button_Icon_hover ;}
|
|
&:active{
|
|
.Complete_Button_Icon_active ;
|
|
background-color: @color_positive_action_active !important;}
|
|
}
|
|
|
|
|
|
|
|
.chzn-container {
|
|
max-width: 85% !important;
|
|
margin-top: 0em
|
|
}
|
|
|
|
// ************************************************
|
|
// ************************************************
|
|
// iframe
|
|
|
|
.egw_fw_content_browser_iframe {
|
|
|
|
margin-top: 0em;
|
|
border: none;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} // Ende Iframe
|
|
|
|
|
|
// Images
|
|
|
|
.calendar_calDayColHeader img {.dimension_width_height_s;}
|
|
.calendar_calWeekNavHeader img {.dimension_width_height_s;}
|
|
.calendar_calMonthNavHeader img{.dimension_width_height_s;}
|
|
.calendar_calEventBodySmall img {.dimension_width_height_s;}
|
|
|
|
.calendar_calEventBodySmall img[src$="svg"],
|
|
.calendar_calDayColHeader img[src$="svg"] {
|
|
.gradient_vertical (@egw_color_2_a, @egw_color_2_a);
|
|
}
|
|
|
|
|
|
|
|
|
|
/* calender view*/
|
|
|
|
/*defind in layout_raster.less , because frame*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Dialog: Neu erstellen
|
|
|
|
span#start {margin-right: 1em;}
|
|
|
|
//########################################################################################################
|
|
// phpgwapi/js/jscalendar/calendar-blue.css
|
|
//########################################################################################################
|
|
/* The main calendar widget. DIV containing a table. */
|
|
|
|
div.calendar { position: relative; }
|
|
|
|
|
|
|
|
/* Header part -- contains navigation buttons and day names. */
|
|
|
|
.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_table_cal_head;
|
|
}
|
|
.nav {
|
|
/*background: url(../../default/images/menuarrow.png) no-repeat 100% 100%;*/
|
|
background-image: none;
|
|
.background_table_cal_head;
|
|
}
|
|
|
|
|
|
|
|
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: @egw_color_2_e;
|
|
|
|
&:hover {background-color: @gray_10 !important;}
|
|
}
|
|
.headrow { /* Row <TR> containing navigation buttons */
|
|
.background_table_cal_head;
|
|
color: #fff;
|
|
}
|
|
.daynames { /* Row <TR> containing the day names */
|
|
// background: #bdf;
|
|
.background_color_30_gray;
|
|
}
|
|
|
|
.name { /* Cells <TD> containing the day names */
|
|
/*border-bottom: 1px solid #556;*/
|
|
/*padding: 2px;*/
|
|
/*text-align: center;*/
|
|
/*color: #000;*/
|
|
}
|
|
|
|
.weekend { /* How a weekend day name shows in header */
|
|
color: #a66;
|
|
}
|
|
|
|
|
|
.hilite { /* How do the buttons in header appear when hover */
|
|
.background_color_0_gray;
|
|
border: none;
|
|
/*.box_shadow_standard_light_inset;*/
|
|
/*color: #000;*/
|
|
/*border: 0px solid;*/
|
|
border-color: @gray_50;
|
|
/*padding: 1px;*/
|
|
}
|
|
|
|
.active { /* Active (pressed) buttons in header */
|
|
background_color: @egw_color_2_d;
|
|
/*padding: 2px 0px 0px 2px;*/
|
|
}
|
|
} // thead
|
|
|
|
|
|
/* The body part -- contains all the days in month. */
|
|
|
|
tbody {
|
|
|
|
tr, td {border: 1px;}
|
|
|
|
.day { /* Cells <TD> containing month days dates */
|
|
/*width: 2em;*/
|
|
/*color: #456;*/
|
|
/*text-align: right;*/
|
|
/*padding: 2px 4px 2px 2px;*/
|
|
/*border: 1px;*/
|
|
}
|
|
|
|
.day.othermonth {
|
|
font-size: 80%;
|
|
color: #bbb;
|
|
}
|
|
.day.othermonth.oweekend {
|
|
color: #fbb;
|
|
}
|
|
|
|
.rowhilite td {
|
|
// background: #def;
|
|
.background_color_25_gray;
|
|
}
|
|
|
|
.rowhilite td.wn {
|
|
background: #eef;
|
|
}
|
|
|
|
td.hilite { /* Hovered cells <TD> */
|
|
/*background: #def;*/
|
|
/*padding: 1px 3px 1px 1px;*/
|
|
/*border: 1px solid #bbb;*/
|
|
}
|
|
|
|
td.active { /* Active (pressed) cells <TD> */
|
|
background: #cde;
|
|
/*padding: 2px 2px 0px 2px;*/
|
|
}
|
|
|
|
td.selected { /* Cell showing today date */
|
|
/*font-weight: normal;*/
|
|
/*border: 0px solid @gray_50;*/
|
|
/*padding: 1px 3px 1px 1px;*/
|
|
/*padding: 0px;*/
|
|
background-color: @egw_color_1_e;
|
|
color: #000;
|
|
-webkit-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 1);
|
|
-moz-box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 1);
|
|
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
td.weekend { /* Cells showing weekend days */
|
|
color: #a66;
|
|
}
|
|
|
|
td.today { /* Cell showing selected date */
|
|
font-weight: normal;
|
|
color: @color_hint ;
|
|
background-color: @egw_color_1_a;
|
|
|
|
}
|
|
|
|
.disabled { color: #999; }
|
|
|
|
.emptycell { /* Empty cells (the best is to hide them) */
|
|
visibility: hidden;
|
|
}
|
|
|
|
.emptyrow { /* Empty row (some months need less than 6 rows) */
|
|
display: none;
|
|
}
|
|
|
|
|
|
} // tbody
|
|
|
|
table .wn {
|
|
/*padding: 2px 3px 2px 2px;*/
|
|
/*border-right: 1px solid #000;*/
|
|
// background: #bdf;
|
|
.background_color_30_gray;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* The footer part -- status bar and "Close" button */
|
|
|
|
tfoot {
|
|
.footrow { /* The <TR> in footer (only one right now) */
|
|
text-align: center;
|
|
background: #556;
|
|
color: #fff;
|
|
}
|
|
|
|
.ttip { /* Tooltip (status bar) cell <TD> */
|
|
background: #fff;
|
|
color: #445;
|
|
border-top: 1px solid #556;
|
|
padding: 1px;
|
|
height: 30px;
|
|
}
|
|
|
|
.hilite { /* Hover style for buttons in footer */
|
|
background: #aaf;
|
|
border: 1px solid #04f;
|
|
color: #000;
|
|
padding: 1px;
|
|
}
|
|
|
|
.active { /* Active (pressed) style for buttons in footer */
|
|
background: #77c;
|
|
padding: 2px 0px 0px 2px;
|
|
}
|
|
|
|
} // tfoot
|
|
|
|
/* Combo boxes (menus that display months/years for direct selection) */
|
|
|
|
.combo {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 4em;
|
|
cursor: default;
|
|
border: 1px solid #655;
|
|
background: #def;
|
|
color: #000;
|
|
font-size: 90%;
|
|
|
|
.label,
|
|
.label-IEfix {
|
|
text-align: center;
|
|
padding: 1px;
|
|
}
|
|
|
|
.label-IEfix {
|
|
width: 4em;
|
|
}
|
|
|
|
.hilite {
|
|
background: #acf;
|
|
}
|
|
|
|
.active {
|
|
border-top: 1px solid #46a;
|
|
border-bottom: 1px solid #46a;
|
|
background: #eef;
|
|
font-weight: bold;
|
|
}
|
|
|
|
} // combo
|
|
|
|
|
|
td.time {
|
|
border-top: 1px solid #000;
|
|
padding: 1px 0px;
|
|
text-align: center;
|
|
background-color: #f4f0e8;
|
|
|
|
|
|
.hour,
|
|
.minute,
|
|
.ampm {
|
|
padding: 0px 3px 0px 4px;
|
|
border: 1px solid #889;
|
|
font-weight: bold;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.ampm {
|
|
text-align: center;
|
|
}
|
|
|
|
.colon {
|
|
padding: 0px 2px 0px 3px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.hilite {
|
|
border-color: #000;
|
|
// background-color: #667;
|
|
.background_color_30_gray;
|
|
color: #fff;
|
|
}
|
|
|
|
span.active {
|
|
border-color: #f00;
|
|
background-color: #000;
|
|
color: #0f0;
|
|
}
|
|
} // td.time
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} // calendar
|
|
|
|
//###################################################################
|
|
//# Bearbeiten Formular
|
|
//###################################################################
|
|
|
|
#calendar-edit{
|
|
label.et2_label{
|
|
/*padding: 0 2px;*/
|
|
}
|
|
.chzn-container {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.et2_tabheader{
|
|
background-color: transparent;
|
|
}
|
|
|
|
// ID
|
|
#calendar-edit_id{float: right;margin-right: 5px;}
|
|
|
|
/*###########################################*/
|
|
// Tab Details
|
|
#calendar-edit_calendar-edit-details{
|
|
display: block;
|
|
float: left;
|
|
width: 100%;
|
|
|
|
table.et2_grid{
|
|
/*background-color: yellow;*/
|
|
line-height: 20px;
|
|
width: 60%;
|
|
|
|
}
|
|
|
|
|
|
// Kategorien
|
|
.calendar_category_details{margin: 0 1em; width: 20em;}
|
|
|
|
.et2_hbox_right {overflow-y: auto;width:30%;}
|
|
.et2_selectbox .ui-multiselect-checkboxes {min-height: 229px;}
|
|
.et2_selectbox .ui-multiselect-checkboxes li {text-indent: -20px;}
|
|
|
|
//selectbox
|
|
#calendar-edit_category{
|
|
.border_radius_button_normal;
|
|
padding: 0 0.3em 0 0;
|
|
|
|
li{
|
|
.ui-state-hover{
|
|
font-weight: normal !important;
|
|
.box_shadow_standard_light_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alarme
|
|
#calendar-edit_details_alarms{
|
|
background-color: @gray_20;
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/*###########################################*/
|
|
/*Tab Beschreibung*/
|
|
|
|
#calendar-edit_calendar-edit-description{
|
|
|
|
// Kategorien
|
|
#calendar-edit_details_category{margin: 0 1em; width: 20em;}
|
|
|
|
.et2_hbox_right {overflow-y: auto;}
|
|
.et2_selectbox .ui-multiselect-checkboxes {min-height: 218px;}
|
|
.et2_selectbox .ui-multiselect-checkboxes li {text-indent: -20px;}
|
|
|
|
//selectbox
|
|
#calendar-edit_category{
|
|
border: 1px solid;
|
|
border-color: @gray_30;
|
|
.border_radius_button_normal;
|
|
padding: 0 0.3em 0 0;
|
|
|
|
li{
|
|
.ui-state-hover{
|
|
font-weight: normal !important;
|
|
.box_shadow_standard_light_hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*###########################################*/
|
|
// Teilnehmer
|
|
|
|
|
|
|
|
/*###########################################*/
|
|
// Wiederholung
|
|
|
|
#calendar-edit_calendar-edit-recurrence{
|
|
tbody{
|
|
display: table;
|
|
width: 100%;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
/*###########################################*/
|
|
// Benutzerdefiniert
|
|
|
|
#calendar-edit_calendar-edit-custom{
|
|
tbody{
|
|
display: table;
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
/*###########################################*/
|
|
// Verknüpfungen
|
|
|
|
#calendar-edit_calendar-edit-links{
|
|
tbody{
|
|
display: table;
|
|
width: 100%;
|
|
|
|
.et2_link_to {width: auto !important; margin: 1em;}
|
|
}
|
|
|
|
span.et2_label {padding: 1em;}
|
|
}
|
|
|
|
/*###########################################*/
|
|
// Alarme
|
|
|
|
#calendar-edit_calendar-edit-alarms{
|
|
tbody{
|
|
display: table;
|
|
width: 100%;
|
|
|
|
label.et2_label {white-space: nowrap; padding: 0 5px;}
|
|
tr.add_alarm_action {background-color: @color_optional; margin-bottom: 1em;}
|
|
}
|
|
}
|
|
/*###########################################*/
|
|
/*// Historie*/
|
|
|
|
#calendar-edit_calendar-edit-history{
|
|
tbody{
|
|
display: table-row-group;
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
/*###########################################*/
|
|
/*// Toolbar*/
|
|
|
|
tr.dialogFooterToolbar{
|
|
|
|
label.et2_label {top: 0px !important;}
|
|
|
|
}
|
|
#calendar-edit_recur_enddate input.et2_date {margin: 0px -1px;}
|
|
|
|
}
|
|
//###################################################################
|
|
//# generell
|
|
//###################################################################
|
|
|
|
|
|
/******************************************************************
|
|
* 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,
|
|
.calendar_calTimeGrid .calendar_calDayColHeader .calendar_calToday.et2_link.et2_clickable {
|
|
// background: #ffffcc;
|
|
.background_table_cal_head;
|
|
}
|
|
.calendar_calWeek{
|
|
// background: #ffffcc;
|
|
background-color : @gray_0;
|
|
width:auto;
|
|
margin:0 auto;
|
|
text-align:center;
|
|
border: none;
|
|
}
|
|
.calendar_calMonth{
|
|
// background: #ffffcc;
|
|
/*.background_table_cal_head;*/
|
|
background-color : @gray_0;
|
|
width:auto;
|
|
margin:0 auto;
|
|
text-align:center;
|
|
border: none;
|
|
}
|
|
/* marks a day in the colum-header as holiday
|
|
*/
|
|
.calendar_calHoliday{
|
|
a {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
/* marks a day in the column-header additionaly as birthday of some contact,
|
|
* it should work together with the backgrounds of calendar_calToday, calendar_calHoliday, th, row_on and row_off
|
|
*/
|
|
.calendar_calBirthday,.calendar_calBirthday a{
|
|
}
|
|
|
|
|
|
/* timeGridWidget, contains timeRow's and dayCol's
|
|
*/
|
|
.calendar_calTimeGrid{
|
|
/* set via inline style on runtime:
|
|
* height:
|
|
*/
|
|
}
|
|
|
|
.calendar_calTimeRow{
|
|
/* background-color: silver; */
|
|
.background_color_5_gray;
|
|
}
|
|
|
|
/* time in a timeRow
|
|
*/
|
|
.calendar_calTimeRowTime{
|
|
padding-left: 5px;
|
|
height: 100%;
|
|
line-height: 14px;
|
|
font-size:8pt;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Calendar Id #
|
|
*/
|
|
#calendar-edit_id:before { content:"#"}
|
|
|
|
|
|
/* header for the dayCol
|
|
*/
|
|
.calendar_calDayColHeader,.calendar_calGridHeader{
|
|
a {
|
|
img {
|
|
position: relative;
|
|
top: 0px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*header for the weekCol*/
|
|
|
|
.calendar_calWeekNavHeader,.calendar_calMonthNavHeader{
|
|
top: 3px;
|
|
left: 0px;
|
|
width: auto;
|
|
right: 0px; /* does not work in IE, but looks better in other browsers then width:100% */
|
|
text-align: center;
|
|
font-size: 100%;
|
|
white-space: nowrap;
|
|
border-bottom: 0px solid silver; // cleaned
|
|
border-right: 0px solid silver; // cleaned
|
|
.dimension_height_m;
|
|
line-height: 21px;
|
|
/*height: 24px;*/
|
|
z-index: 30;
|
|
|
|
a {
|
|
img {
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// little workaraound for Month view
|
|
.calendar_calMonthNavHeader{
|
|
a {
|
|
img {top: 0px;}
|
|
}
|
|
}
|
|
|
|
.calendar_calWeekNavHeader,.calendar_calMonthNavHeader img{
|
|
vertical-align: middle;
|
|
}
|
|
.calendar_calViewUserNameBox {
|
|
position: absolute;
|
|
top: -1px;
|
|
width: 95%;
|
|
text-align: left;
|
|
font-size: 120%;
|
|
white-space: nowrap;
|
|
border: 1px solid gray;
|
|
height: 17px;
|
|
left: -1px;
|
|
padding-top: 0px;
|
|
padding-left: 10px;
|
|
background: #dac0c0;
|
|
}
|
|
.calendar_calViewUserName {
|
|
font-weight: normal;
|
|
}
|
|
.calendar_calViewUserName:first-letter {
|
|
text-transform:uppercase;
|
|
}
|
|
.calendar_calViewUserNameFirst {
|
|
}
|
|
.calendar_calViewUserNameFirst:after {
|
|
content: ", ";
|
|
}
|
|
|
|
/* contains one event: header-row & -body
|
|
*/
|
|
.calendar_calEvent {
|
|
/* set via inline style on runtime:
|
|
* top: depending on startime
|
|
* height: depending on length
|
|
* border-color: depending on category
|
|
* background: depending on category (shade)
|
|
*/
|
|
background-color: @egw_color_blue_lightest;
|
|
|
|
border-top: 1px solid;
|
|
}
|
|
.calendar_calEvent:not([class*=" cat_"]) {
|
|
/* Defaults for no category, so we don't override it */
|
|
background-color: @egw_color_blue_lightest;
|
|
}
|
|
/**
|
|
* All participants accepted the invitation
|
|
*/
|
|
.calendar_calEventAllAccepted {
|
|
}
|
|
|
|
/**
|
|
* All participants answered the invitation, but not all accepted
|
|
*/
|
|
.calendar_calEventAllAnswered {
|
|
}
|
|
|
|
/**
|
|
* Some participants did NOT answer the invitation
|
|
*/
|
|
.calendar_calEventSomeUnknown {
|
|
}
|
|
|
|
.calendar_calEventTooltip{
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.calendar_calDayColHeader .calendar_calAddEvent:hover{
|
|
// .background-color-50-gray;
|
|
background-color: @egw_color_1_e;
|
|
cursor: pointer;
|
|
.color_0_gray;
|
|
}
|
|
|
|
/* header-row of the event
|
|
*/
|
|
.calendar_calEventHeader,.calendar_calEventHeaderSmall{
|
|
text-align: left;
|
|
left: 0px;
|
|
right: 0px;
|
|
padding-left: 2px;
|
|
/* set via inline style on runtime
|
|
* background-color: depending on category
|
|
* color: white || black depending on cat;
|
|
*/
|
|
}
|
|
.calendar_calEventHeaderSmall{
|
|
font-size: 8pt;
|
|
line-height: 10pt;
|
|
}
|
|
.calendar_calEventIcons{
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
background-color: @gray_10;
|
|
.rounded (2px);
|
|
}
|
|
.calendar_calEventHeaderSmall .calendar_calEventIcons img{
|
|
height: 13px;
|
|
}
|
|
|
|
|
|
.calendar_calTimeGridList .calendar_calEventBody {
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:before {
|
|
}
|
|
.calendar_calTimeGridList .calendar_calDayCol .hiddenEventAfter:hover {
|
|
}
|
|
|
|
/* 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;
|
|
|
|
a {
|
|
img[src$="svg"] {
|
|
.gradient_vertical (@egw_color_2_a, @egw_color_2_a);
|
|
}
|
|
|
|
img {
|
|
.Complete_Button_normal;
|
|
.dimension_width_height_s;
|
|
|
|
&:hover{.Complete_Button_hover;}
|
|
}
|
|
}
|
|
}
|
|
.calendar_calDayTodos .calendar_calDayTodosTable {
|
|
|
|
table {
|
|
|
|
// Listendarstellung
|
|
// Reihen ohne Border left und right
|
|
tr:nth-child(even) {background: @color_even;}
|
|
tr:nth-child(odd) {background: @color_odd;}
|
|
|
|
td {
|
|
padding: 3px;
|
|
|
|
img[src$="svg"] {
|
|
.gradient_vertical (@egw_color_2_a, @egw_color_2_a);
|
|
}
|
|
|
|
img {
|
|
.dimension_width_height_xs;
|
|
.Complete_Button_Icon_normal;
|
|
|
|
&:hover {.Complete_Button_Icon_hover;}
|
|
&:active {
|
|
.Complete_Button_Icon_active;
|
|
background-color: @color_positive_action !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
.calendar_calDayTodosHeader {
|
|
text-align: center;
|
|
}
|
|
|
|
/******************************************************
|
|
* CSS settings for the planner views (calendar_plannerWidget) *
|
|
******************************************************/
|
|
|
|
/* calendar_plannerWidget represents the whole planner, consiting of the calendar_plannerHeader and multiple plannerRowWidgets
|
|
*/
|
|
.calendar_plannerWidget {
|
|
width: 99.5%;
|
|
|
|
img{.dimension_height_s;}
|
|
}
|
|
|
|
|
|
/* calendar_plannerScale represents a scale-row of the calendar_plannerHeader, containing multiple planner{Day|Week|Month}Scales
|
|
*/
|
|
.calendar_plannerScaleDay {
|
|
height: 28px;
|
|
line-height: 14px;
|
|
}
|
|
.calendar_plannerDayScale,.calendar_plannerMonthScale,.calendar_plannerWeekScale,.calendar_plannerHourScale,.calendar_plannerDayOfMonthScale {
|
|
/* left+width: is set by the code on runtime */
|
|
text-align: center;
|
|
height: 100%;
|
|
/* set via inline style on runtime:
|
|
* left:
|
|
* width:
|
|
*/
|
|
}
|
|
.calendar_plannerHourScale {
|
|
font-size: 90%;
|
|
}
|
|
.calendar_plannerDayScale {
|
|
font-size: 90%;
|
|
}
|
|
.calendar_plannerWeekScale {
|
|
line-height: 20px;
|
|
}
|
|
.calendar_plannerMonthScale {
|
|
font-weight: bold;
|
|
|
|
a img {.dimension_width_height_s;}
|
|
}
|
|
.calendar_plannerDayScale img,.calendar_plannerWeekScale img,.calendar_plannerMonthScale img,.calendar_plannerDayOfMonthScale img {
|
|
vertical-align: text-top;
|
|
}
|
|
|
|
/* calendar_plannerRowHeader contains the user or category name of the calendar_plannerRowWidget
|
|
*/
|
|
.calendar_plannerRowHeader, .calendar_plannerHeaderTitle {
|
|
line-height: 20px;
|
|
}
|
|
|
|
/**
|
|
* Filler for month with less then 31 days in yearly planner
|
|
*/
|
|
.calendar_eventRowsFiller {
|
|
height: 93%;
|
|
background-color: white;
|
|
border: 1px dashed gray;
|
|
border-right: none;
|
|
}
|
|
|
|
|
|
/* calendar_eventRowWidget contains non-overlapping events
|
|
*/
|
|
.calendar_eventRowWidget {
|
|
border: 1px solid white;
|
|
}
|
|
|
|
/* Special colors for the year view */
|
|
.calendar_cal_year_legend_weekend {
|
|
background-color: #CCCCCC;
|
|
}
|
|
.calendar_cal_year_legend {
|
|
background-color: #EFEFEF;
|
|
}
|
|
.calendar_cal_year_legend {
|
|
background-color: #FFFFCC;
|
|
z-index: 0;
|
|
}
|
|
.calendar_cal_year_weekend {
|
|
background-color: #F9F9CC;
|
|
z-index: 0;
|
|
}
|
|
.calendar_cal_year_today {
|
|
border-color: #EE0000;
|
|
border-width: 2px;
|
|
}
|
|
|
|
/**
|
|
* edit series or exception popup used in eventWidget and
|
|
* delete series and exceptions popup used in edit event
|
|
*/
|
|
|
|
#dialog-content {
|
|
display:block;
|
|
height:100px;
|
|
padding:6px;
|
|
color:#666666;
|
|
font-size:13px;
|
|
margin: -2px -1px 0px -2px;
|
|
width:410px;
|
|
}
|
|
|
|
/* ###########################################################################################################################################
|
|
* Calendar specfic
|
|
/* ###########################################################################################################################################
|
|
*/
|
|
|
|
/*ui-widget*/
|
|
/*edit series*/
|
|
button#series {
|
|
background-image:url('../../../api/templates/default/images/edit.svg') !important;
|
|
.Complete_Button_text_icon_before;
|
|
.Complete_Button_save_apply_copy;
|
|
&:hover {background-image:url('../../../api/templates/default/images/edit.svg') !important; background-color: @color_positive_action_active !important;}
|
|
&:active {background-color: @color_positive_action_active !important;}
|
|
}
|
|
/*edit exception*/
|
|
button#exception {
|
|
background-image:url('../../../api/templates/default/images/edit.svg') !important;
|
|
.Complete_Button_text_icon_before;
|
|
.Complete_Button_save_apply_copy;
|
|
&:hover {background-image:url('../../../api/templates/default/images/edit.svg') !important;background-color: @color_positive_action_active !important;}
|
|
&:active {background-color: @color_positive_action_active !important;}
|
|
}
|
|
|
|
/*calendar series add*/
|
|
#calendar-edit_add {
|
|
&:active {background-color: @color_positive_action_active !important;}
|
|
padding-left:24px;
|
|
background-size:16px;
|
|
background-position: center;
|
|
}
|
|
/*calendar search freetime*/
|
|
#calendar-edit_freetime{
|
|
&:active {background-color: @color_positive_action_active !important;}
|
|
}
|
|
/*calendar search freetime*/
|
|
button[id*="edit_button[add_alarm]"]{
|
|
&:active {background-color: @color_positive_action_active !important;}
|
|
}
|
|
|
|
|
|
|
|
/*SIDEMENU */
|
|
/*extended for calender app*/
|
|
|
|
/*distance between picture and select*/
|
|
select#calendar_view{margin-top: 8px;}
|
|
|
|
/*searchfield*/
|
|
input#calendar_keywords{
|
|
margin: 10px 0 10px 2px;
|
|
font-size: 1.3em;
|
|
;
|
|
}
|
|
|
|
div#calendar-container {
|
|
margin-left: 0px;
|
|
/*distance to cal widget*/
|
|
/*margin-top: 10px;*/
|
|
|
|
select,
|
|
input,
|
|
option {font-size: 11px;}
|
|
|
|
div.calendar{
|
|
background-color: inherit;
|
|
padding: 0px;
|
|
|
|
|
|
table {
|
|
.background_color_5_gray;
|
|
.basefontfamily;
|
|
|
|
thead {
|
|
// first row
|
|
// Help
|
|
.button {background-color: @egw_color_1_e;}
|
|
|
|
// Month
|
|
.title {
|
|
border: none;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
background-color: @egw_color_1_e;
|
|
}
|
|
|
|
// second row
|
|
// << today >>
|
|
.headrow {
|
|
color: @gray_90;
|
|
// nav + today
|
|
td {background-color: @egw_color_1_a;}
|
|
}
|
|
|
|
// daynames
|
|
.daynames {
|
|
background-color: @egw_color_2_e;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
tbody {
|
|
tr.daysrow {
|
|
|
|
&:hover {background-color: @egw_color_1_a;}
|
|
|
|
// fields
|
|
.name {}
|
|
|
|
.day {}
|
|
|
|
.weekend {}
|
|
}
|
|
// hover tr
|
|
tr.rowhilite td{background-color: @egw_color_1_a;}
|
|
|
|
}
|
|
|
|
|
|
} // table
|
|
}
|
|
|
|
}
|
|
|
|
// Select Fields in Sidemenu
|
|
#calendar_cat_id,
|
|
#calendar_filter,
|
|
#uical_select_owner,
|
|
#calendar_merge{
|
|
font-size: 11px;
|
|
}
|
|
// Owner
|
|
#uical_select_owner {margin: 9px 0 9px;}
|
|
|
|
// insert a document
|
|
#calendar_merge {margin: 9px 0 0 0;}
|
|
|
|
#calendar-view_view.hideDayColHeader
|
|
{
|
|
tr {
|
|
&:first-of-type .calendar_calGridHeader .calendar_calDayColHeader_spacer {height: ~"calc(1.5em + 32px)";}
|
|
.calendar_calGridHeader > span.et2_label {width:~"calc(100% - 58px)";}
|
|
}
|
|
}
|
|
#calendar-toolbar_toolbar {
|
|
et2-switch .label.on {
|
|
span.off {
|
|
filter: invert(1);
|
|
}
|
|
span.on {
|
|
filter: none !important;
|
|
}
|
|
}
|
|
et2-switch {
|
|
.label {
|
|
span.on {
|
|
background-size: 18px 18px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 28px;
|
|
top:0;
|
|
filter: invert(1);
|
|
}
|
|
span.off {
|
|
background-size: 18px 18px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 28px;
|
|
top:0;
|
|
}
|
|
span {color:transparent !important;}
|
|
|
|
a {background: none;}
|
|
}
|
|
}
|
|
#calendar-toolbar_toolbar-weekend .label span.on {
|
|
background-image: url(../../../api/templates/default/images/7_day_view.svg);
|
|
width: 50%;
|
|
}
|
|
#calendar-toolbar_toolbar-weekend .label span.off {
|
|
background-image: url(../../../api/templates/default/images/5_day_view.svg);
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
/* ########################################################################################
|
|
/* * Calendar END */ |