diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 17e1f8e79a..5f64564171 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -1,6 +1,8 @@ /** * 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 @@ -9,6 +11,538 @@ * @package calendar * @version $Id$ */ +/* $Id: app.css 44987 2014-01-07 10:34:11Z hnategh $ */ +.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; +} +/* marks a day in the colum-header as holiday + */ +.calendar_calHoliday { + background: #dac0c0; +} +/* 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: black; + font-weight: bold; + font-style: italic; +} +/* timeGridWidget, contains timeRow's and dayCol's + */ +.calendar_calTimeGrid { + position: relative; + top: 0px; + left: 0px; + border: 1px solid silver; + width: 99%; + /* 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 + */ +.calendar_calTimeRow, +.calendar_calTimeRowOff { + position: absolute; + width: 100%; + /* set via inline style on runtime: + * height: + * top: + */ +} +.calendar_calTimeRow { + /* background-color: silver; */ +} +/* time in a timeRow + */ +.calendar_calTimeRowTime { + padding-left: 5px; + height: 100%; + line-height: 14px; + font-size: 8pt; + text-align: left; +} +/* 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: 45px; + right: 0px; +} +/* 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; +} +/* Calendar Id # +*/ +.calendar_calId:before { + content: "#"; +} +/* header for the dayCol + */ +.calendar_calDayColHeader, +.calendar_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; +} +.calendar_calDayColHeader 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: ", "; +} +/* header of the time-grid, eg. for the weeks in the month-view (leftmost of the day-col-headers) + */ +.calendar_calGridHeader { + text-align: left; + padding-left: 3px; +} +/* 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, +.calendar_calEventPrivate { + position: absolute; + left: 0px; + right: 0px; + overflow: hidden; + z-index: 20; + border-width: 1px; + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-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) + */ +} +.calendar_calEvent:hover { + cursor: pointer; +} +/** + * All participants accepted the invitation + */ +.calendar_calEventAllAccepted { + border-style: solid; + border-width: 1px; +} +/** + * All participants answered the invitation, but not all accepted + */ +.calendar_calEventAllAnswered { + border-style: dotted; + border-width: 2px; +} +/** + * Some participants did NOT answer the invitation + */ +.calendar_calEventSomeUnknown { + border-style: dashed; + border-width: 1px; +} +.calendar_calEventTooltip { + border-radius: 6px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + max-height: 400px; + overflow: auto; +} +.calendar_calAddEvent { + position: absolute; + 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! */ + font-weight: bold; + font-size: 9pt; + 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; +} +.calendar_calEventIcons img { + height: 16px; +} +.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%; +} +.calendar_calEventBodySmall { + font-size: 95%; +} +.calendar_calEventLabel { + font-weight: bold; + font-size: 90%; +} +.calendar_calEventTitle { + font-weight: bold; + font-size: 110%; +} +/* 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; + max-height: 400px; +} +.calendar_calDayTodos { + width: 250px; + margin-left: 10px; + border: 1px solid silver; +} +.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 { + position: relative; + top: 0px; + left: 0px; + width: 99.5%; + border: 1px solid gray; + padding-right: 3px; +} +/* calendar_plannerHeader contains a calendar_plannerHeaderTitle and multiple calendar_plannerHeaderRows + */ +.calendar_plannerHeader { + position: relative; + top: 0px; + left: 0px; + width: 100%; +} +/* calendar_plannerRowWidget contains a calendar_plannerRowHeader and multiple eventRowWidgets in an calendar_eventRows + */ +.calendar_plannerRowWidget { + position: relative; + top: 0px; + left: 0px; + width: 100%; +} +/* 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_plannerScaleDay { + height: 28px; + line-height: 14px; +} +.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: 1px solid white; + /* 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: 15%; + /* need to be identical for calendar_plannerRowHeader and calendar_plannerHeaderTitle and match left of calendar_eventRows/calendar_plannerHeaderRows */ + height: 100%; + line-height: 20px; + border: 1px solid white; +} +/* calendar_eventRows contain multiple eventRowWidgets + */ +.calendar_eventRows, +.calendar_plannerHeaderRows { + position: relative; + top: 0px; + left: 15%; + /* need to be identical for calendar_eventRows and calendar_plannerHeaderRows and match width of calendar_plannerRowHeader/calendar_plannerHeaderTitle */ + width: 85%; +} +/** + * 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_eventRowWidget contains non-overlapping events + */ +.calendar_eventRowWidget { + position: relative; + top: 0px; + left: 0px; + width: 100%; + height: 20px; + border: 1px solid white; +} +.calendar_plannerEvent, +.calendar_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 + */ +} +.calendar_plannerEvent img, +.calendar_plannerEventPrivate img { + padding-top: 2px; +} +.calendar_plannerEvent:hover { + cursor: pointer; +} +/* 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 + */ +#calendar-edit_calendar-delete_series { + position: fixed; + top: 100px; + left: 200px; + z-index: 20000; + display: none; + border-collapse: collapse; + border-spacing: 0px; +} +#dialog-content { + display: block; + height: 100px; + padding: 6px; + color: #666666; + font-size: 13px; + margin: -2px -1px 0px -2px; + width: 410px; +} .egw_fw_ui_category_content { padding-left: 0px !important; } diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 3eeee43efa..3afe4a9d13 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -1,6 +1,8 @@ /** * 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 @@ -12,7 +14,7 @@ @import (reference) "../../../pixelegg/less/def_buttons.less"; @import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less"; - +@import (less) "../default/app.css"; // ************************************************ diff --git a/infolog/templates/pixelegg/app.less b/infolog/templates/pixelegg/app.less index b135fa5570..77a0b5665f 100755 --- a/infolog/templates/pixelegg/app.less +++ b/infolog/templates/pixelegg/app.less @@ -67,6 +67,7 @@ span#favorite_sidebox_infolog{ }*/ + #infolog-index { height: auto !important; @@ -116,7 +117,7 @@ span#favorite_sidebox_infolog{ // IMG img { - .gradient-vertical (@egw_color_2_a, @egw_color_2_a); + .gradient_vertical (@egw_color_2_a, @egw_color_2_a); .Complete_Button_Icon_normal; .dimension_width_height_s; margin-left: 0.5em; @@ -143,7 +144,7 @@ span#favorite_sidebox_infolog{ &:before {content: ""; font-size: 1em;padding-left: 5px;} /*Text*/ span {visibility: hidden; display: none;}; - img {.scale; margin: 0.5em; .gradient-vertical (@egw_color_2_a, @egw_color_2_a);} + img {.scale; margin: 0.5em; .gradient_vertical (@egw_color_2_a, @egw_color_2_a);} } } } diff --git a/preferences/templates/pixelegg/app.css b/preferences/templates/pixelegg/app.css new file mode 100755 index 0000000000..ff90107796 --- /dev/null +++ b/preferences/templates/pixelegg/app.css @@ -0,0 +1,105 @@ +/** + * EGroupware: CSS with less preprocessor + * + * PREFERENCES + * + * 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 + * @package preferences + * @version $Id$ + */ +/** + * EGroupware - CSS Styles used by preferences app + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @package preferences + * @link http://www.egroupware.org + * @author Ralf Becker + * @version $Id: app.css 44587 2013-11-18 19:57:38Z ralfbecker $ + */ +table.prefTable { + width: 100%; +} +tr.prefRow { + position: relative; +} +td.prefName { + width: 50%; +} +tr.prefRow > td { + vertical-align: bottom; + /* otherwise help will cover bigger prefValue */ +} +.prefHelp { + position: absolute; + display: none; + width: 98%; + background-color: lightyellow; + border: 1px solid black; + border-radius: 10px; + padding: 5px; + margin-top: 5px; +} +tr.prefRow:hover .prefHelp { + display: block; + z-index: 10; + /* FF: displays it under next prefName without */ +} +.prefDefault, +.prefValue { + float: left; +} +.prefValue { + margin-right: 5px; +} +.prefValue textarea, +textarea.prefValue { + width: 99%; + height: 5em; +} +.prefType, +.prefApp { + font-size: 150%; + display: inline-block; + padding-bottom: 5px; +} +/* ############################################################################# +// iframe +// Rahmen + padding**/ +/*############################################ +# # # +# # # +# # # +# # # +# # # +# # # +# # # +# # iframge # +# # # +# # # +# # # +# # # +# # # +# # # +##############################################*/ +.prefType, +.prefApp { + font-size: 150%; + display: inline-block; + padding-bottom: 5px; +} +#preferences-settings { + /*Preferences APP / left */ + /*Preferences APP Settings / right*/ +} +#preferences-settings select#preferences-settings_appname:before { + padding-right: 20px; + content: ""; + background-image: url(images/setup.png); + background-repeat: no-repeat; + width: 24px; + height: 24px; +} diff --git a/preferences/templates/pixelegg/app.less b/preferences/templates/pixelegg/app.less new file mode 100755 index 0000000000..4cf3981440 --- /dev/null +++ b/preferences/templates/pixelegg/app.less @@ -0,0 +1,70 @@ +/** + * EGroupware: CSS with less preprocessor + * + * PREFERENCES + * + * 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 + * @package preferences + * @version $Id$ + */ + +@import (reference) "../../../pixelegg/less/def_buttons.less"; +@import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less"; +@import (less) "../default/app.css"; + +/* ############################################################################# +// iframe +// Rahmen + padding**/ + +/*############################################ +# # # +# # # +# # # +# # # +# # # +# # # +# # # +# # iframge # +# # # +# # # +# # # +# # # +# # # +# # # +##############################################*/ +.prefType, .prefApp { +font-size: 150%; +display: inline-block; +padding-bottom: 5px; +} + +#preferences-settings{ + +/*Preferences APP / left */ +select#preferences-settings_appname{ + + &:before { + padding-right: 20px; + content: ""; + background-image: url(./images/setup.png); + background-repeat: no-repeat; + .dimension_width_height_m; + } + + +} + +/*Preferences APP Settings / right*/ +#preferences-settings_type{ + + + +} + + +} +// \ No newline at end of file diff --git a/preferences/templates/pixelegg/images/setup.png b/preferences/templates/pixelegg/images/setup.png new file mode 100755 index 0000000000..a1eb313fcf Binary files /dev/null and b/preferences/templates/pixelegg/images/setup.png differ