diff --git a/addressbook/templates/default/app.css b/addressbook/templates/default/app.css index 12aa5e6cf3..f385c1edac 100644 --- a/addressbook/templates/default/app.css +++ b/addressbook/templates/default/app.css @@ -1,85 +1,534 @@ -.cursorHand { cursor: hand; } -.countrySelect select { width: 150px; } -.custom_country input {display: none; } -.contactid:before { content:"#" } -.emailCol div { width: 100%; } -.fixedHeight,.telNumbers { height: 12px; overflow: hidden; text-overflow: ellipsis} -.telNumbers { white-space: nowrap; } -.leftPad5 { padding-left: 5px; } -.bold { font-weight: bold; } -.fileas select,.fileas,.owner select,.owner { - width: 100%; - font-weight: bold; +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package addressbook + * @version $Id$ + */ +div#addressbook-index { + min-height: 700px; + height: auto !important; } -.photo img, .iphoto img { +div#addressbook-index div.et2_hbox_left { + padding: 1em; +} +div#addressbook-index div.et2_hbox_left select#addressbook-index_org_view { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0.5em; + padding: 3px; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + height: 35px; + margin-top: 0; +} +div#addressbook-index div.et2_hbox_left select#addressbook-index_org_view:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +} +div#addressbook-index div.et2_hbox_right { + width: 360px; + margin-right: 1em; +} +div#addressbook-index div.et2_hbox_right select.et2_selectbox { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0.5em; + padding: 3px; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + height: 35px; + margin-left: 5px; +} +div#addressbook-index div.et2_hbox_right select.et2_selectbox:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +} +div#addressbook-index div.et2_hbox_right select.et2_selectbox:focus { + outline: 0; + border-width: 1px; + border-style: solid; + border-color: #bfbfbf; + -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1); +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_search { + background-color: #f0f0f0; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + width: auto; + height: 32px; + background-image: url('../images/erweiterte-suche.png') !important; +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_search:hover { + background-image: url('../images/erweiterte-suche.png'); + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + width: auto; + height: 32px; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_search:focus { + background-image: url('../images/erweiterte-suche.png'); + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + width: auto; + height: 32px; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_add { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_add:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_add:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#addressbook-index div.et2_hbox_right button#addressbook-index_add:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +div#addressbook-index #addressbook-index_favorite_wrapper img { + width: 16px; +} +div#addressbook-index #addressbook-index_favorite_wrapper .et2_dropdown { + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +div#addressbook-index #addressbook-index_favorite_wrapper .et2_dropdown button#addressbook-index_favorite img { + width: 16px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +div#addressbook-index #addressbook-index_favorite_wrapper .et2_dropdown .ui-state-default, +div#addressbook-index #addressbook-index_favorite_wrapper .et2_dropdown .ui-widget-content .ui-state-default, +div#addressbook-index #addressbook-index_favorite_wrapper .et2_dropdown .ui-widget-header .ui-state-default { + background-color: #bfbfbf; + color: #000; + background-image: none !important; +} +div#addressbook-index .filters #addressbook-index_cat_id { + width: 7%; +} +div#addressbook-index .filters #addressbook-index_filter { + width: 7%; +} +div#addressbook-index .filters #addressbook-index_filter2 { + width: 10%; +} +div#addressbook-index table.egwGridView_outer { + width: 99%; +} +#egw_fw_sidemenu .egw_fw_ui_category_content table { + margin-left: -14px; +} +#egw_fw_sidemenu select { + margin-top: -5px; +} +div#addressbook-edit, +div#addressbook-search { + margin: 0; + padding: 0.5em; +} +div#addressbook-edit .chzn-container, +div#addressbook-search .chzn-container { + width: 60% !important; +} +div#addressbook-edit .et2_tabheader, +div#addressbook-search .et2_tabheader { + margin-top: 0px; + background-color: transparent; +} +div#addressbook-edit table.editphones, +div#addressbook-search table.editphones { + width: auto !important; + top: 5%; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); +} +div#addressbook-edit table.addressbook_edit_general, +div#addressbook-search table.addressbook_edit_general { + border-top: 0px; +} +div#addressbook-edit table.addressbook_edit_general tr td:first-child, +div#addressbook-search table.addressbook_edit_general tr td:first-child { + width: 100px; +} +div#addressbook-edit table.addressbook_edit_general tr td, +div#addressbook-search table.addressbook_edit_general tr td { + width: 200px; +} +div#addressbook-edit table.addressbook_edit_general table tr td:first-child, +div#addressbook-search table.addressbook_edit_general table tr td:first-child { width: 60px; } -.photo img { - cursor: hand; +div#addressbook-edit table.addressbook_edit_general table tr td, +div#addressbook-search table.addressbook_edit_general table tr td { + width: 200px; } -.uploadphoto{ +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_n_fn, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_n_fn { + width: 200px; +} +div#addressbook-edit table.addressbook_edit_general table.editname, +div#addressbook-search table.addressbook_edit_general table.editname { + background-color: #f0f0f0; + z-index: 10; + font-size: 1.5em; +} +div#addressbook-edit table.addressbook_edit_general table.editname tr td:first-child, +div#addressbook-search table.addressbook_edit_general table.editname tr td:first-child { + width: 100px !important; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_title, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_title { + width: 200px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_role, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_role { + width: 200px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_org_name, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_org_name { + width: 286px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_org_unit, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_org_unit { + width: 286px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_adr_one_street, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_adr_one_street, +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_adr_one_street2, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_adr_one_street2 { + width: 286px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_adr_one_postalcode, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_adr_one_postalcode { + width: 50px; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_adr_one_locality, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_adr_one_locality { + width: 225px; +} +div#addressbook-edit table.addressbook_edit_general .chzn-container, +div#addressbook-search table.addressbook_edit_general .chzn-container { + width: 300px !important; +} +div#addressbook-edit table.addressbook_edit_general input#addressbook-edit_adr_one_region, +div#addressbook-search table.addressbook_edit_general input#addressbook-edit_adr_one_region { + width: 286px; +} +div#addressbook-edit table.addressbook_edit_general select.owner, +div#addressbook-search table.addressbook_edit_general select.owner { + width: 300px; +} +div#addressbook-edit fieldset.phoneGroup, +div#addressbook-search fieldset.phoneGroup { + border: none; + margin-bottom: 0; + margin-top: 12px; + height: auto; + background-color: #d9d9d9; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +div#addressbook-edit fieldset.phoneGroup legend, +div#addressbook-search fieldset.phoneGroup legend { + text-transform: uppercase; +} +div#addressbook-edit fieldset.phoneGroup * img, +div#addressbook-search fieldset.phoneGroup * img { + display: none !important; + width: 20px; +} +div#addressbook-edit fieldset.emailGroup, +div#addressbook-search fieldset.emailGroup { + border: none; + margin-bottom: 0; + margin-top: 10px; + height: auto; + background-color: #d9d9d9; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +div#addressbook-edit fieldset.emailGroup legend, +div#addressbook-search fieldset.emailGroup legend { + text-transform: uppercase; +} +div#addressbook-edit fieldset.emailGroup a.et2_url:after, +div#addressbook-search fieldset.emailGroup a.et2_url:after { + content: "\221E"; + font-size: 1.5em; +} +div#addressbook-edit fieldset.emailGroup a.et2_url, +div#addressbook-search fieldset.emailGroup a.et2_url { + margin-left: -40px; +} +div#addressbook-edit fieldset.emailGroup a.et2_url.url, +div#addressbook-search fieldset.emailGroup a.et2_url.url { + background-size: 15px 15px; + background-image: none; +} +div#addressbook-edit fieldset.emailGroup * img, +div#addressbook-search fieldset.emailGroup * img { + display: none !important; + width: 20px; +} +#addressbook-edit_addressbook-edit-general #addressbook_edit_adr_one_countrycode_chzn { + width: 200px !important; + padding-top: 1em; +} +#addressbook-edit_addressbook-edit-home #addressbook_edit_adr_two_countrycode_chzn { + width: 200px !important; + padding-top: 1em; +} +#addressbook-edit_addressbook-edit-home #addressbook_edit_tz_chzn { + width: 15% !important; + padding-top: 1em; +} +#addressbook-edit_addressbook-edit-links .th, +#addressbook-search_addressbook-edit-links .th { + height: 20px; +} +#addressbook-edit_addressbook-edit-links tbody, +#addressbook-search_addressbook-edit-links tbody { + display: table-header-group; + vertical-align: top; +} +#addressbook-edit_addressbook-edit-distribution_list .th, +#addressbook-search_addressbook-edit-distribution_list .th { + height: 20px; +} +#addressbook-edit_addressbook-edit-distribution_list tbody, +#addressbook-search_addressbook-edit-distribution_list tbody { + display: table-header-group; + vertical-align: top; +} +#addressbook-edit_addressbook-edit-custom .th, +#addressbook-search_addressbook-edit-custom .th { + height: 20px; +} +#addressbook-edit_addressbook-edit-custom tbody, +#addressbook-search_addressbook-edit-custom tbody { + display: table-header-group; + vertical-align: top; +} +#addressbook-edit_addressbook-edit-custom_private .th, +#addressbook-search_addressbook-edit-custom_private .th { + height: 20px; +} +#addressbook-edit_addressbook-edit-custom_private tbody, +#addressbook-search_addressbook-edit-custom_private tbody { + display: table-header-group; + vertical-align: top; +} +#addressbook-edit_addressbook-edit-history .th { + height: 20px; +} +#addressbook-edit_addressbook-edit-history tbody { + display: table-header-group; + vertical-align: top; +} +button.button_more { + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + width: auto; + height: 32px; + background-image: url('../images/bearbeiten.png'); +} +div.addressbook.edit.general table { + border-top: 0px; +} +div.addressbook.edit.general table tr td img { + display: none; +} +div.addressbook.edit.general table img:nth-child(1) { + display: none; +} +div.addressbook.edit.general table img:nth-child(2) { + cursor: pointer; +} +.countrySelect select { + width: 150px; +} +.custom_country input { + display: none; +} +.contactid:before { + content: "#"; +} +.emailCol div { + overflow: hidden; + width: 100%; +} +.redItalic { + color: red; + font-style: italic; +} +.fixedHeight, +.telNumbers { + height: 30px; +} +.telNumbers { + white-space: nowrap; +} +.leftPad5 { + padding-left: 5px; +} +.bold { + font-weight: bold; +} +.fileas select, +.fileas, +.owner select, +.owner { + font-weight: bold; + width: 100%; +} +.photo img, +.iphoto img { + width: 60px; +} +.uploadphoto { + background-color: #FFFFFF; + border: 2px solid black; + display: none; + left: 48px; + padding: 4px; position: absolute; top: 168px; - left: 48px; - display:none; - border: 2px solid black; - background-color: #ffffff; - padding: 4px; } -.checkAllArrow { padding-right: 5px; } -.typeIcon { height: 16px; width: 16px; } -.editphones,.editname{ +.checkAllArrow { + padding-right: 5px; +} +.typeIcon { + height: 16px; + width: 16px; +} +.editphones, +.editname { + background-color: #FFFFFF; + border: 2px solid black; + display: none; + left: 30%; + padding: 4px; position: absolute; top: 10%; - left: 30%; - display:none; - border: 2px solid black; - background-color: #ffffff; - padding: 4px; } -.editname{ - top: 97px; - left: 173px; +.editname { + left: 137px; + top: 160px; } -.windowheader{ - background-image:url(../../../phpgwapi/templates/idots/images/appbox-header-background.png); - background-repeat:repeat-x; +.windowheader { + background-image: url("../../../phpgwapi/templates/idots/images/appbox-header-background.png"); + background-repeat: repeat-x; + border-bottom: 1px solid #9C9C9C; + border-collapse: collapse; + border-spacing: 0; height: 20px; - border-spacing: 0px; - border-collapse:collapse; - border-bottom: #9c9c9c 1px solid; } -fieldset.phoneGroup { - margin-top: 12px; - font-size: 110%; - height: 140px; - border: solid black 2px; - margin-bottom: 0px; -} -.phoneGroup table{ - height: 122px; -} -fieldset.emailGroup { - margin-top: 10px; - font-size: 110%; - height: 112px; - border: solid black 2px; - margin-bottom: 0px; -} -.emailGroup table{ +.emailGroup table { height: 87px; } -.space{ - width: 80px; +.space { + width: 80px; } -.noWrap{ +.noWrap { white-space: nowrap; } -.customfields{ -} -.customfields td{ - white-space: nowrap; +.customfields td { line-height: 12px; + white-space: nowrap; } .image16 img { height: 16px; diff --git a/addressbook/templates/default/app.less b/addressbook/templates/default/app.less new file mode 100755 index 0000000000..0162aad98f --- /dev/null +++ b/addressbook/templates/default/app.less @@ -0,0 +1,535 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package addressbook + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +//********************************** +// iframe + +div#addressbook-index{ + min-height: 700px; + height: auto !important; + + // ########################### + // linke Box + // ########################## + div.et2_hbox_left{ + + padding: 1em; + // Org View + select#addressbook-index_org_view{ + .Complete_Button_select; + height: 35px; + margin-top: 0; + + &:hover{ + .Complete_Button_select_hover; + } + } + + + } // linke Box + + + + // ########################### + // rechte Box + // ########################### + div.et2_hbox_right { + width: 360px; + margin-right: 1em; + + + // Typ + select.et2_selectbox{ + .Complete_Button_select; + height: 35px; + margin-left: 5px; + + &:hover{.Complete_Button_select_hover;} + &:focus{.Complete_Button_select_focus;} + } + + // erweiterte Suche + button#addressbook-index_search{ + + + .background-color-10-gray; + .color-100-gray; + + .Complete_Button_text_icon_before; + background-image:url('../images/erweiterte-suche.png') !important; + + &:hover{ background-image:url('../images/erweiterte-suche.png'); .Complete_Button_text_icon_before_hover;} + &:focus{ background-image:url('../images/erweiterte-suche.png'); .Complete_Button_text_icon_before_active;} + + } + + // hinzufügen + button#addressbook-index_add{ + .Complete_Button_add; + + &:hover {.Complete_Button_add_hover;} + + } + + } // rechte Box + + // ########################### + // Favoriten + + #addressbook-index_favorite_wrapper{ + + img{width: 16px;} + + .et2_dropdown { + + .Complete_Button_Icon_normal; +// .background-color-25-gray; + + button#addressbook-index_favorite { + img{width: 16px; .Complete_Button_Icon_normal;} + } + + button{} + + .ui-state-default, + .ui-widget-content .ui-state-default, + .ui-widget-header .ui-state-default { + + .background-color-25-gray; + color: #000; + background-image: none !important; + + } + + + + } + + } // Favoriten + + + // Filter + .filters{ + #addressbook-index_cat_id{width: 7%;} + #addressbook-index_filter{width:7%;} + #addressbook-index_filter2{width: 10%;} + + + }// Filter + + table.egwGridView_outer{ +// border-collapse: inherit; + width: 99%; + } + + + // Einstellungen Listenausgabe + + + +} // iframe + + + + +//****************************************************************** +// sidebar + +#egw_fw_sidemenu{ + + //Tabelle mit Ansichten des Kalenders + + .egw_fw_ui_category_content{ + + table {margin-left: -14px;} + } + + // Bilder für Favoriten + + img.sideboxstar { + // background-image: url("../../../phpgwapi/templates/idots/images/orange-ball.png"); +// background-repeat: no-repeat; +// display: inline-block; +// margin: 0 1px; +// padding: 1px; + + } + + select {margin-top: -5px;} + +} + + + +// Dialog Addressbuch bearbeiten und alle weiteren +// ##################################################### + + +div#addressbook-edit, +div#addressbook-search{ + +// .box_shadow_dialog; +// .border_radius_button_normal; + margin: 0; + padding: 0.5em; + + // Choosen Adresse + .chzn-container { width: 60% !important;} + + + .et2_tabheader {margin-top: 0px;background-color:transparent;} + // Tabelle + table.editphones{ + width: auto !important; + top: 5%; + .box_shadow_standard_light; + } + table.addressbook_edit_general{ +// background: red; + + border-top: 0px; + + tr td:first-child {width: 100px;} + tr td {width: 200px;} + + table tr td:first-child {width: 60px;} + table tr td {width: 200px;} + + + //Name + input#addressbook-edit_n_fn {width: 200px;} + + // Name bearbeiten + table.editname { + .background-color-10-gray; + // position: relative; + // top: -20px; + z-index: 10; + font-size: 1.5em; + + tr td:first-child {width: 100px !important;} + } + + + //Titel + input#addressbook-edit_title {width: 200px;} + //Role + input#addressbook-edit_role {width: 200px;} + + //Organisation + input#addressbook-edit_org_name {width: 286px;} + //unit + input#addressbook-edit_org_unit {width: 286px;} + // Street + input#addressbook-edit_adr_one_street, + input#addressbook-edit_adr_one_street2 {width: 286px;} + + // PLZ + Ort + input#addressbook-edit_adr_one_postalcode {width: 50px;} + input#addressbook-edit_adr_one_locality {width: 225px;} + + // Choosen Adresse + .chzn-container { width: 300px !important;} + + //region + input#addressbook-edit_adr_one_region {width: 286px;} + + + //Owner + select.owner {width: 300px;} + } // generell + + + // Telefonnummer: + fieldset.phoneGroup { + border: none; + margin-bottom: 0; + margin-top: 12px; + height: auto; + .background-color-15-gray; + .border_radius_button_normal; + legend { text-transform: uppercase;} + + + + + } + + fieldset.phoneGroup * img {display: none !important; width: 20px;} // Bilder ausblenden + + .phoneGroup table { +// height: 122px; + } + + + + // Email + fieldset.emailGroup { + border: none; + margin-bottom: 0; + margin-top: 10px; + height: auto; + .background-color-15-gray; + .border_radius_button_normal; + legend { text-transform: uppercase;} + + a.et2_url:after { + content: "\221E"; + font-size: 1.5em; + + } + a.et2_url {margin-left: -40px;} + a.et2_url.url {background-size: 15px 15px; background-image: none;} + + + } + + fieldset.emailGroup * img {display: none !important; width: 20px;} // Bilder ausblenden + + + +} // edit + +#addressbook-edit_addressbook-edit-general{ + // Länderauswahl + #addressbook_edit_adr_one_countrycode_chzn{ + width: 200px !important; +// background-color: red !important; + padding-top: 1em; + } +} + +// ################### Tab 2 / Kategorien ######################## +// +// addressbook-edit_addressbook.edit.cats +// in Adressbuch css ausgelagert + +//div#addressbook-edit_addressbook~\.edit~\.cats {background-color: red;} + +// ################## Tab 3 / Privat ############################# + +#addressbook-edit_addressbook-edit-home{ + +// content: "hello I´m there"; + + + // Länderauswahl + + #addressbook_edit_adr_two_countrycode_chzn{ + width: 200px !important; +// background-color: red !important; + padding-top: 1em; + } + + // Timezone + #addressbook_edit_tz_chzn{ + width: 15% !important; + padding-top: 1em; + } + +} +// Verknüpfungen + +#addressbook-edit_addressbook-edit-links, +#addressbook-search_addressbook-edit-links{ + .th{ height: 20px;} + tbody{ + display: table-header-group; + vertical-align: top; + } +} + +// Verteilerliste + +#addressbook-edit_addressbook-edit-distribution_list, +#addressbook-search_addressbook-edit-distribution_list{ + .th{ height: 20px;} + tbody{ + display: table-header-group; + vertical-align: top; + } +} + +// Extra + +#addressbook-edit_addressbook-edit-custom, +#addressbook-search_addressbook-edit-custom{ + .th{ height: 20px;} + tbody{ + display: table-header-group; + vertical-align: top; + } +} + +// Privat + +#addressbook-edit_addressbook-edit-custom_private, +#addressbook-search_addressbook-edit-custom_private{ + .th{ height: 20px;} + tbody{ + display: table-header-group; + vertical-align: top; + } +} + +// History + +#addressbook-edit_addressbook-edit-history{ + .th{ height: 20px;} + tbody{ + display: table-header-group; + vertical-align: top; + } +} + + +// ################## Tab 4 Details ############################### +// mehr...Phonebuch + +button.button_more { + .Complete_Button_text_icon_before; + background-image:url('../images/bearbeiten.png'); +} +// ##################################################### +// Adresse editieren + +div.addressbook.edit.general{ + + table { + border-top: 0px; + tr td img {display: none;} + // Adressbuchbild unsichtbar + img:nth-child(1) {display:none;} + // Bild hochladen + img:nth-child(2) {cursor:pointer;} + + + } + +} + + + +.cursorHand { +} +.countrySelect select { + width: 150px; +} +.custom_country input { + display: none; +} +.contactid:before { + content: "#"; +} +.emailCol div { + overflow: hidden; + width: 100%; +} +.redItalic { + color: red; + font-style: italic; +} +.fixedHeight, .telNumbers { + height: 30px; + +} +.telNumbers { + white-space: nowrap; +} +.leftPad5 { + padding-left: 5px; +} +.bold { + font-weight: bold; +} +.fileas select, .fileas, .owner select, .owner { + font-weight: bold; + width: 100%; +} +.photo img, .iphoto img { + width: 60px; +} +.photo img { +} +.uploadphoto { + background-color: #FFFFFF; + border: 2px solid black; + display: none; + left: 48px; + padding: 4px; + position: absolute; + top: 168px; +} +.checkAllArrow { + padding-right: 5px; +} +.typeIcon { + height: 16px; + width: 16px; +} +.editphones, .editname { + background-color: #FFFFFF; + border: 2px solid black; + display: none; + left: 30%; + padding: 4px; + position: absolute; + top: 10%; +} +.editname { + left: 137px; + top: 160px; +} +.windowheader { + background-image: url("../../../phpgwapi/templates/idots/images/appbox-header-background.png"); + background-repeat: repeat-x; + border-bottom: 1px solid #9C9C9C; + border-collapse: collapse; + border-spacing: 0; + height: 20px; +} + + + + +.emailGroup table { + height: 87px; +} +.space { + width: 80px; +} +.noWrap { + white-space: nowrap; +} +.customfields { +} +.customfields td { + line-height: 12px; + white-space: nowrap; +} +.image16 img { + height: 16px; +} + + + + + + + + + + +// Ende Addressbuch \ No newline at end of file diff --git a/admin/templates/default/app.css b/admin/templates/default/app.css index d9c47d027d..af13901a3e 100644 --- a/admin/templates/default/app.css +++ b/admin/templates/default/app.css @@ -1,43 +1,75 @@ /** * EGroupware - CSS Styles used by admin app * - * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License - * @package etemplate * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License * @author Ralf Becker + * @author Stefan Reinhard + * @package admin * @version $Id$ */ - -.admin_tree table, .admin_tree tr, .admin_tree td { - border: none; +#divGenTime { + clear: left; +} +.prefAppBox { + float: left; + margin: 5px; + min-height: 12em; + padding-left: 5px; + width: 225px; + border-top: solid 1px #e4e7ea; + border-left: solid 1px #e4e7ea; + border-right: solid 1px #e4e7ea; + border-bottom: solid 1px #e4e7ea; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} +.prefAppBox h3 { + height: 32px; + padding-left: 50px; + padding-top: 10px; + background-repeat: no-repeat; + background-position: left; + background-size: 32px; + opacity: 0.5; + margin: 0; + color: #000000; +} +.prefAppBox ul { + margin: 0; + padding-left: 20px; + padding-top: 0; +} +/** + * Seems not to be merged from app.css + */ +.admin_tree table, +.admin_tree tr, +.admin_tree td { + border: none; } - div#divAppbox { - padding: 0; + padding: 0; } - body { - background-image: none; - background-color: white; + background-image: none; + background-color: white; } - /* otherwise it is transparent */ #admin_iframe { - background-color: white; + background-color: white; } - tr.adminAccountInactive .adminStatus { - color: red; + color: red; } - .adminOverflowEllipsis { - width: 100%; - white-space: nowrap; - display: block; - overflow: hidden; - text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; } - img.admin_aclApp { - width: 16px; + width: 16px; } diff --git a/admin/templates/default/app.less b/admin/templates/default/app.less new file mode 100644 index 0000000000..ecefaa9e86 --- /dev/null +++ b/admin/templates/default/app.less @@ -0,0 +1,85 @@ +/** + * EGroupware - CSS Styles used by admin app + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Ralf Becker + * @author Stefan Reinhard + * @package admin + * @version $Id: app.css 43522 2013-08-26 18:25:43Z ralfbecker $ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +#prefIndex { +} +#divGenTime { + clear: left; +} +.prefAppBox { +// border: 1px solid lightgray; +// border-radius: 3px 3px 3px 3px; + float: left; +// height: 225px; + margin: 5px; + min-height: 12em; + padding-left: 5px; + width: 225px; + .bordered(@lightgray,@lightgray,@lightgray,@lightgray ); + .rounded(2px); +} + +.prefAppBox h3 { + height: 32px; + padding-left: 50px; + padding-top: 10px; + background-repeat: no-repeat; + background-position: left; + background-size: 32px; + opacity: 0.5; + margin: 0; + color: #000000; +} +.prefAppBox ul { + margin: 0; + padding-left: 20px; + padding-top: 0; +} + +/** + * Seems not to be merged from app.css + */ +.admin_tree table, .admin_tree tr, .admin_tree td { + border: none; +} + +div#divAppbox { + padding: 0; +} + +body { + background-image: none; + background-color: white; +} + +/* otherwise it is transparent */ +#admin_iframe { + background-color: white; +} + +tr.adminAccountInactive .adminStatus { + color: red; +} + +.adminOverflowEllipsis { + width: 100%; + white-space: nowrap; + display: block; + overflow: hidden; + text-overflow: ellipsis; +} + +img.admin_aclApp { + width: 16px; +} diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index d0e5498406..1127422242 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -1,11 +1,442 @@ -/* $Id$ */ - -.calendar_inputFullWidth input { width: 100%; } - +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package calendar + * @version $Id$ + */ +.egw_fw_content_browser_iframe { + margin-top: 0em; + border: none; +} +.egw_fw_ui_category_content img.sideboxstar { + width: 14px; + height: 14px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +.egw_fw_ui_category_content img.sideboxstar:hover { + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.egw_fw_ui_category_content .chzn-container { + max-width: 85% !important; + margin-top: 0em; +} +div#calendar-container { + margin-left: 0px; +} +div#calendar-container div.calendar { + margin-bottom: 1em; +} +div#calendar-container div.calendar table { + border: 0px solid #556; + font-size: 1em; + color: #000; + cursor: default; + padding: 0.3em; + background-color: #ffffff; +} +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 */ +} +.calendar .nav { + background: url(menuarrow.gif) no-repeat 100% 100%; + 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: #679fd2; + color: #000; + padding: 2px; +} +.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; + color: #000; + border: 1px solid; + border-color: #808080; + padding: 1px; +} +.calendar thead .active { + /* Active (pressed) buttons in header */ + background-color: #408dd2; + padding: 2px 0px 0px 2px; +} +.calendar tbody .day { + /* Cells containing month days dates */ + width: 2em; + color: #456; + text-align: right; + padding: 2px 4px 2px 2px; +} +.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: bold; + border: 1px solid #000; + padding: 1px 3px 1px 1px; + background: #fff; + color: #000; +} +.calendar tbody td.weekend { + /* Cells showing weekend days */ + color: #a66; +} +.calendar tbody td.today { + /* Cell showing selected date */ + font-weight: bold; + color: #00f; +} +.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; +} +.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; +} +div#calendar-edit { + width: 870px; + padding: 5px; +} +div#calendar-edit label.et2_label { + padding: 0 2px; +} +div#calendar-edit .chzn-container { + padding-top: 1em; +} +div#calendar-edit .et2_tabheader { + background-color: transparent; +} +div#calendar-edit #calendar-edit_calendar-edit-general { + display: block; + float: left; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-general table.et2_grid { + width: auto !important; +} +div#calendar-edit #calendar-edit_calendar-edit-general table.et2_grid td { + padding: 4px; +} +div#calendar-edit #calendar-edit_calendar-edit-general table.et2_grid #calendar-edit_duration { + float: left; +} +div#calendar-edit #calendar-edit_calendar-edit-general table.et2_grid button#calendar-edit_freetime { + background-image: url('../images/search.png') !important; +} +div#calendar-edit #calendar-edit_calendar-edit-general table.et2_grid .et2_date { + float: left; +} +div#calendar-edit #calendar-edit_calendar-edit-general #calendar-edit_category { + border: 1px solid; + border-color: #bfbfbf; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody { + display: table; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody td { + vertical-align: top; + padding-top: 3px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody span.ui-icon-search { + background-size: 16px 16px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody div#calendar-edit_resource { + margin: 5px 0 10px 0; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody div#calendar-edit_resource select { + margin-right: 3px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody select#calendar-edit_role { + margin-top: 6px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody #calendar-edit_add { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; + height: 28px; + padding: 0px !important; + margin: 0px; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody #calendar-edit_add:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody #calendar-edit_add:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#calendar-edit #calendar-edit_calendar-edit-participants tbody #calendar-edit_add:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +div#calendar-edit #calendar-edit_calendar-edit-recurrence tbody { + display: table; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-custom tbody { + display: table; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-links tbody { + display: table; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-alarms tbody { + display: table; + width: 100%; +} +div#calendar-edit #calendar-edit_calendar-edit-alarms tbody button { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; + height: 28px; + padding: 0px !important; + margin: 0px; +} +div#calendar-edit #calendar-edit_calendar-edit-alarms tbody button:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#calendar-edit #calendar-edit_calendar-edit-alarms tbody button:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +div#calendar-edit #calendar-edit_calendar-edit-alarms tbody button:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +div#calendar-edit #calendar-edit_calendar-edit-history { + max-width: 800px; +} +div#calendar-edit #calendar-edit_calendar-edit-history tbody { + display: table-row-group; + width: 100%; +} +.calendar_inputFullWidth input { + width: 60%; +} /****************************************************************** * 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: @@ -29,502 +460,580 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget +. .#.* * * *. .*+----------------------------------+*. */ - -.calendar_size120b { font-size: 120%; font-weight: bold; } - +.calendar_size120b { + font-size: 120%; + font-weight: bold; +} /* marks a day in the colum-header as today */ -.calendar_calToday{ - background: #ffffcc; +.calendar_calToday { + background-color: #ffc200; } /* marks a day in the colum-header as holiday */ -.calendar_calHoliday{ - background: #dac0c0; +.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; +.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: +.calendar_calTimeGrid { + position: relative; + top: 0px; + left: 0px; + border: 1px solid silver; + width: 99%; + background-color: #f0f0f0; + /* 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: +.calendar_calTimeRow, +.calendar_calTimeRowOff { + position: absolute; + width: 100%; + /* set via inline style on runtime: * height: * top: */ } -.calendar_calTimeRow{ -/* background-color: silver; */ +.calendar_calTimeRow { + /* background-color: silver; */ + background-color: #fafafa; } - /* time in a timeRow */ -.calendar_calTimeRowTime{ - padding-left: 5px; - height: 100%; - line-height: 14px; - font-size:8pt; - text-align: left; +.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; +.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; +.calendar_calDayCols12h { + left: 65px; } /* no time grid --> no time column */ -.calendar_calDayColsNoTime{ - left: 0px; +.calendar_calDayColsNoTime { + left: 0px; } - /* contains (multiple) eventCol's */ -.calendar_calDayCol{ - position: absolute; - top: 0px; - height: 100%; -/* set via inline style on runtime: +.calendar_calDayCol { + position: absolute; + top: 0px; + height: 100%; + /* set via inline style on runtime: * left: * width: */ - border-left: 1px solid silver; + border-left: 1px solid silver; } /* Calendar Id # */ -.calendar_calId:before { content:"#" } - +.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, +.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; + 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; + 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; + font-weight: normal; } .calendar_calViewUserName:first-letter { - text-transform:uppercase; -} -.calendar_calViewUserNameFirst { + text-transform: uppercase; } .calendar_calViewUserNameFirst:after { - content: ", "; + 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; +.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: +.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: +.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; +.calendar_calEvent:hover { + cursor: pointer; } - /** * All participants accepted the invitation */ .calendar_calEventAllAccepted { - border-style: solid; - border-width: 1px; + border-style: solid; + border-width: 1px; } - /** * All participants answered the invitation, but not all accepted */ .calendar_calEventAllAnswered { - border-style: dotted; - border-width: 2px; + border-style: dotted; + border-width: 2px; } - /** * Some participants did NOT answer the invitation */ .calendar_calEventSomeUnknown { - border-style: dashed; - border-width: 1px; + 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_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 { + position: absolute; + width: 100%; + z-index: 10; } - -.calendar_calAddEvent:hover{ - background-color: #D2D7FF; - cursor: pointer; +.calendar_calAddEvent:hover { + background-color: #ffdd73; + cursor: pointer; + color: #ffffff; } - /* 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 +.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_calEventHeaderSmall { + font-size: 8pt; + line-height: 10pt; } -.calendar_calEventIcons{ - position: absolute; - right: 0px; - top: 0px; +.calendar_calEventIcons { + position: absolute; + right: 0px; + top: 0px; } -.calendar_calEventIcons img{ - height: 16px; +.calendar_calEventIcons img { + height: 16px; } -.calendar_calEventHeaderSmall .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%; +.calendar_calEventBody, +.calendar_calEventBodySmall { + padding: 0px 3px 0px; + left: 2px; + right: 2px; + height: 99%; } - -.calendar_calEventBodySmall{ - font-size: 95%; +.calendar_calEventBodySmall { + font-size: 95%; } - -.calendar_calEventLabel{ - font-weight: bold; - font-size: 90%; +.calendar_calEventLabel { + font-weight: bold; + font-size: 90%; } - -.calendar_calEventTitle{ - font-weight: bold; - font-size: 110%; +.calendar_calEventTitle { + font-weight: bold; + font-size: 110%; } - /* table of the dayView containing 2 cols: 1) day-view, 2) todos */ -.calendar_calDayView{ - width: 100%; +.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; + margin: 0px; + padding: 2px; + font-weight: bold; +} +.calendar_calDayTodos .calendar_calDayTodosHeader a img { + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + height: 16px; + width: 16px; +} +.calendar_calDayTodos .calendar_calDayTodosHeader a img:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + background-color: inherit !important; } .calendar_calDayTodos .calendar_calDayTodosTable { - overflow: auto; - max-height: 400px; + overflow: auto; + max-height: 400px; } .calendar_calDayTodos { - width: 250px; - margin-left: 10px; - border: 1px solid silver; + width: 250px; + margin-left: 10px; + border: 1px solid silver; } .calendar_calDayTodosHeader { - text-align: center; + 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; + 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%; + 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%; + 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_plannerScale, +.calendar_plannerScaleDay { + position: relative; + top: 0px; + left: 0%; + width: 100%; + height: 20px; + line-height: 20px; } .calendar_plannerScaleDay { - height: 28px; - line-height: 14px; + 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: +.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%; + font-size: 90%; } .calendar_plannerDayScale { - font-size: 90%; + font-size: 90%; } .calendar_plannerWeekScale { - line-height: 20px; + line-height: 20px; } .calendar_plannerMonthScale { - font-weight: bold; + font-weight: bold; } -.calendar_plannerDayScale img,.calendar_plannerWeekScale img,.calendar_plannerMonthScale img,.calendar_plannerDayOfMonthScale img { - vertical-align: middle; +.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_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%; +.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; + 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; + 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; + 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: +.calendar_plannerEvent, +.calendar_plannerEventPrivate { + position: absolute; + top: 0px; + height: 100%; + overflow: hidden; + z-index: 20; + border: 1px solid black; + min-width: 5%; + /* 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 img, +.calendar_plannerEventPrivate img { + padding-top: 2px; + width: 16px; + height: 16px; } -.calendar_plannerEvent:hover{ - cursor: pointer; +.calendar_plannerEvent:hover { + cursor: pointer; } - /* Special colors for the year view */ .calendar_cal_year_legend_weekend { - background-color: #CCCCCC; + background-color: #CCCCCC; } .calendar_cal_year_legend { - background-color: #EFEFEF; + background-color: #EFEFEF; } .calendar_cal_year_legend { - background-color: #FFFFCC; - z-index: 0; + background-color: #FFFFCC; + z-index: 0; } .calendar_cal_year_weekend { - background-color: #F9F9CC; - z-index: 0; + background-color: #F9F9CC; + z-index: 0; } .calendar_cal_year_today { - border-color: #EE0000; - border-width: 2px; + 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 +#calendar-edit_calendar-delete_series { + position: fixed; + top: 200px; + left: 500px; + z-index: 20000; + display: none; + border-collapse: collapse; + border-spacing: 0px; + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; +} +#delete_series { + top: 100px; + left: 200px; +} +#delete_series input, +#edit_series input { + margin: 8px; } #dialog-content { - display:block; - height:100px; - padding:6px; - color:#666666; - font-size:13px; - margin: -2px -1px 0px -2px; - width:410px; + display: block; + height: 100px; + padding: 6px; + color: #666666; + font-size: 13px; + margin: -2px -1px 0px -2px; + width: 410px; +} +/** ##################################################################################### + * @package preferences + * ###################################################################################### + */ +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; + right: 55%; + display: none; + width: 33%; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background-color: #f0f0f0; + border-color: #808080; + cursor: pointer; + background-color: #ffc200; +} +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; } diff --git a/calendar/templates/default/app.less b/calendar/templates/default/app.less new file mode 100644 index 0000000000..9cf6a67b33 --- /dev/null +++ b/calendar/templates/default/app.less @@ -0,0 +1,1113 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package calendar + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +// iframe + +.egw_fw_content_browser_iframe { + + margin-top: 0em; + border: none; + + + + + +} // Ende Iframe + + +// ************************************************ +// Seitenleiste +// Ansichten + +.egw_fw_ui_category_content{ + + + img.sideboxstar { + width: 14px; + height: 14px; + .Complete_Button_Icon_normal; + padding: 3px; + margin: 1px; + + &:hover {.Complete_Button_Icon_hover} + + + } + + .chzn-container {max-width: 85% !important; margin-top: 0em} + + +} + + + + + + +div#calendar-container { + margin-left: 0px; + + + div.calendar{ + + margin-bottom: 1em; + + table { + border: 0px solid #556; + font-size: 1em; + color: #000; + cursor: default; + padding: 0.3em; + .background-color-0-gray; + // background: #eef; + // font-family: tahoma,verdana,sans-serif; + } + + } + +} + +// 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 */ + } + .nav { + background: url(menuarrow.gif) no-repeat 100% 100%; + .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: @egw_color_2_e; + color: #000; + padding: 2px; + } + .headrow { /* Row containing navigation buttons */ + .background-table-cal-head; + color: #fff; + } + .daynames { /* Row containing the day names */ + // background: #bdf; + .background-color-30-gray; + } + + .name { /* Cells 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; + color: #000; + border: 1px solid; + .border-color-50-gray; + 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 { + .day { /* Cells containing month days dates */ + width: 2em; + color: #456; + text-align: right; + padding: 2px 4px 2px 2px; + } + + .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 */ + background: #def; + padding: 1px 3px 1px 1px; + border: 1px solid #bbb; + } + + td.active { /* Active (pressed) cells */ + background: #cde; + padding: 2px 2px 0px 2px; + } + + td.selected { /* Cell showing today date */ + font-weight: bold; + border: 1px solid #000; + padding: 1px 3px 1px 1px; + background: #fff; + color: #000; + } + + td.weekend { /* Cells showing weekend days */ + color: #a66; + } + + td.today { /* Cell showing selected date */ + font-weight: bold; + color: #00f; + } + + .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 in footer (only one right now) */ + text-align: center; + background: #556; + color: #fff; + } + + .ttip { /* Tooltip (status bar) cell */ + background: #fff; + color: #445; + border-top: 1px solid #556; + padding: 1px; + } + + .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 +//################################################################### + + +div#calendar-edit{ + width: 870px; + padding: 5px; + label.et2_label{ + padding: 0 2px; + } + .chzn-container { + padding-top: 1em; + } + + .et2_tabheader{ + background-color: transparent; + } + + // Tab General + #calendar-edit_calendar-edit-general{ + display: block; + float: left; + width: 100%; + table.et2_grid{ + + width: auto !important; + td { + padding: 4px; + } + + #calendar-edit_duration{ + float: left; + } + + // Terminsuche + + button#calendar-edit_freetime {background-image: url('../images/search.png') !important;} + + .et2_date{ + float: left; + } + + } + #calendar-edit_category{ + border: 1px solid; + .border-color-25-gray; + .border_radius_button_normal; + } + + } + // Teilnehmer + + #calendar-edit_calendar-edit-participants{ + tbody{ + display: table; + width: 100%; + + td {vertical-align: top; padding-top: 3px;} + + + // Suchen Bild + + span.ui-icon-search {background-size: 16px 16px;} + + // Ressourcen + + div#calendar-edit_resource { + margin: 5px 0 10px 0; + + select {margin-right: 3px;} + } + + + // Rolle + + select#calendar-edit_role {margin-top: 6px;} + + // hinzufügen button + + #calendar-edit_add { + + .Complete_Button_add; + height: 28px; + padding: 0px !important; + margin: 0px; + &:hover {.Complete_Button_add_hover;} + + } + + } + } + // Wiederholung + + #calendar-edit_calendar-edit-recurrence{ + tbody{ + display: table; + width: 100%; + + } + } + + // Benutzerdefiniert + + #calendar-edit_calendar-edit-custom{ + tbody{ + display: table; + width: 100%; + + } + } + + // Verknüpfungen + + #calendar-edit_calendar-edit-links{ + tbody{ + display: table; + width: 100%; + + } + } + + // Alarme + + #calendar-edit_calendar-edit-alarms{ + tbody{ + display: table; + width: 100%; + + // hinzufügen + + button { + + .Complete_Button_add; + height: 28px; + padding: 0px !important; + margin: 0px; + &:hover {.Complete_Button_add_hover;} + + } + } +} + + // Historie + + #calendar-edit_calendar-edit-history{ + max-width: 800px; + tbody{ + display: table-row-group; + width: 100%; + + } + } +} +//################################################################### +//# generell +//################################################################### + +.calendar_inputFullWidth input { width: 60%; } + +/****************************************************************** + * 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.#.* * *+----------------+*. .*| |*. ++. .#.* * * *. .*+----------------------------------+*. + +*/ + +.calendar_size120b { font-size: 120%; font-weight: bold; } + +/* marks a day in the colum-header as today + */ +.calendar_calToday{ +// background: #ffffcc; + .background-table-cal-head; +} +/* 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%; + .background-color-10-gray; +/* 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; */ +.background-color-5-gray; +} + +/* 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 { +} +.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-50-gray; + background-color: @egw_color_1_e; + cursor: pointer; + .color-0-gray; +} + +/* 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; + + a { + img { + .Complete_Button_normal; + height: 16px; + width: 16px; + + &:hover{.Complete_Button_hover;} + } + } +} +.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; + min-width: 5%; +/* 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; + width: 16px; + height: 16px; +} +.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: 200px; + left: 500px; + z-index: 20000; + display: none; + border-collapse:collapse; + border-spacing:0px; + background-color: #fff; + .Complete_Button_normal; +} +#delete_series { + top: 100px; + left: 200px; +} +#delete_series input,#edit_series input { + margin: 8px; +} +#dialog-content { + display:block; + height:100px; + padding:6px; + color:#666666; + font-size:13px; + margin: -2px -1px 0px -2px; + width:410px; +} + +/** ##################################################################################### + * @package preferences + * ###################################################################################### + */ + +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; + right: 55%; + display: none; + width: 33%; +// background-color: lightyellow; + + .Complete_Button_text; +// border: 1px solid black; +// border-radius: 10px; +// padding: 5px; +// margin-top: 5px; + .background-color-Context-Help; + +} +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; +} \ No newline at end of file diff --git a/etemplate/templates/default/app.css b/etemplate/templates/default/app.css index 20409ca859..510547f085 100644 --- a/etemplate/templates/default/app.css +++ b/etemplate/templates/default/app.css @@ -1,155 +1,178 @@ /** - * eGroupWare - CSS Styles used by eTemplate widgets + * EGroupware - CSS Styles used by old eTemplate widgets * * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License - * @package etemplate * @link http://www.egroupware.org * @author Ralf Becker + * @author Stefan Reinhard + * @package etemplate * @version $Id$ */ - -/* - * a few generic styles used in most eT apps - */ -.redItalic,.message { - color: red; - font-style: italic; +.redItalic, +.message { + color: red; + font-style: italic; } .gray { - color: gray; + color: gray; } .leftPad5 { - padding-left: 5px; + padding-left: 5px; } .inputFullWidth input { - width: 100%; + width: 100%; } -.selectboxFullWidth select { - width: 100%; +.selectboxFullWidth select { + width: 100%; } - -/* - * mark input as required - */ -.inputRequired input,.inputRequired select,.inputRequired textarea { - border: gray 1px solid; - background-color: #ffffd0; +.inputRequired input, +.inputRequired select, +.inputRequired textarea { + background-color: #FFFFD0; + border: 1px solid gray; } - -/* - * Styles of the eT editor - */ .clickWidgetToEdit { - cursor: pointer; - display: inline; + cursor: pointer; + display: inline; } .clickWidgetToEdit:hover { - background-color: pink; + background-color: pink; } - -/* - * Styles of the nextmatch widget - */ .activ_sortcolumn { - font-weight: bold; + font-weight: bold; } .inactiv_sortcolumn { - font-weight: normal; + font-weight: normal; } .selectcols { - position: relative; + position: relative; } .colselection { - background-color: white; - position: absolute; - right: 0px; - top: 16px; - display: none; - z-index: 1; + background-color: white; + display: none; + position: absolute; + right: 0; + top: 16px; + z-index: 1; } - -/* - * Styles for the tab widget - */ -.etemplate_tab,.etemplate_tab_active { - border-style:solid; - border-width:1px 1px 0px; - border-color:black; - padding:3px; - padding-left: 6px; - padding-right: 6px; - width: 60px; - white-space: nowrap; +table.TabHeader { + background-color: #d9d9d9; } .etemplate_tab { - cursor: pointer; - background-color: #E8F0F0; + white-space: nowrap; + width: auto; + display: inline-block; + margin: 1em 5px 1em 0; + padding: 5px; + cursor: pointer; + background-color: #f0f0f0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} +.etemplate_tab:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + background-color: inherit !important; +} +.etemplate_tab:focus { + -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); } .etemplate_tab_active { - border-width:2px 2px 0px; - background-color: #D3DCE3; + white-space: nowrap; + width: auto; + display: inline-block; + margin: 1em 5px 1em 0; + padding: 5px; + cursor: pointer; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background-color: #808080; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: #408dd2; + color: #f2f2f2; +} +.etemplate_tab_active .th { + background-color: #808080; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: #408dd2; + color: #f2f2f2; +} +.etemplate_tab row_on, +td.etemplate_tab_active:focus { + background-color: #808080; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: #408dd2; + color: #f2f2f2; } .tab_body { - border: black solid 2px; + border: 2px solid none; + border-color: #f0f0f0; } - .nextmatch_header { - border: 1px solid black; + border: 1px solid black; } .nextmatch_header select { - width: 140px; + width: 140px; } .nm_num_rows select { - width: 40px; + width: 40px; } - .vfsMode { - font-family: monospace; font-weight: bold; + font-family: monospace; + font-weight: bold; } .vfsMimeIcon img { - max-height: 16px; - max-width: 16px; + max-height: 16px; + max-width: 16px; } .vfsFilename { - white-space: nowrap; + white-space: nowrap; } -/** - * mark a file (icon) as link - */ .vfsIsLink img { - padding-right: 8px; - background-image: url(images/link.png); - background-repeat: no-repeat; - background-position: right bottom; + background-image: url("images/link.png"); + background-position: right bottom; + background-repeat: no-repeat; + padding-right: 8px; } -/** - * nicer would be, but it's not working ... - */ .vfsIsLink img:after { - content: url(filemanager/templates/default/images/link.png); + content: url("../../../filemanager/templates/default/images/link.png"); } -/** - * mark a link (icon) as broken link - */ .vfsIsBrokenLink img { - padding-right: 8px; - background-image: url(images/link_broken.png); - background-repeat: no-repeat; - background-position: right bottom; + background-image: url("images/link_broken.png"); + background-position: right bottom; + background-repeat: no-repeat; + padding-right: 8px; } - -/** - * class for big (more then 5 lines) custom field nextmatch header - */ .cf_header_height_limit { - max-height: 6.75em; - overflow: auto; - padding-right: 15px; + max-height: 6.75em; + overflow: auto; + padding-right: 15px; } - -/** - * class for table in data_widget - */ .eTdate { - white-space: nowrap; + white-space: nowrap; } diff --git a/etemplate/templates/default/app.less b/etemplate/templates/default/app.less new file mode 100644 index 0000000000..3a0dbde9db --- /dev/null +++ b/etemplate/templates/default/app.less @@ -0,0 +1,199 @@ +/** + * EGroupware - CSS Styles used by old eTemplate widgets + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @link http://www.egroupware.org + * @author Ralf Becker + * @author Stefan Reinhard + * @package etemplate + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +.redItalic, .message { + color: red; + font-style: italic; +} +.gray { + color: gray; +} +.leftPad5 { + padding-left: 5px; +} +.inputFullWidth input { + width: 100%; +} +.selectboxFullWidth select { + width: 100%; +} +.inputRequired input, .inputRequired select, .inputRequired textarea { + background-color: #FFFFD0; + border: 1px solid gray; +} +.clickWidgetToEdit { + cursor: pointer; + display: inline; +} +.clickWidgetToEdit:hover { + background-color: pink; +} +.activ_sortcolumn { + font-weight: bold; +} +.inactiv_sortcolumn { + font-weight: normal; +} +.selectcols { + position: relative; +} +.colselection { + background-color: white; + display: none; + position: absolute; + right: 0; + top: 16px; + z-index: 1; +} + +// Tabelle +// Tabs +table.TabHeader{ + .background-color-15-gray; +} + +// Tabs +.etemplate_tab { +// border-color: black; +// border-style: solid; +// border-width: 1px 1px 0; +// padding: 3px 6px; + white-space: nowrap; + width: auto; + + display: inline-block; + margin: 1em 5px 1em 0; + padding: 5px; + cursor: pointer; + + .background-color-10-gray; + .border_radius_button_normal; + .border_normal; + .box_shadow_standard_light; + + + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + &:hover {.Complete_Button_hover;} + &:focus {.Complete_Button_focus;} + +} + +.etemplate_tab_active { + + white-space: nowrap; + width: auto; + + display: inline-block; + margin: 1em 5px 1em 0; + padding: 5px; + cursor: pointer; + +// .background-color-10-gray; + .border_radius_button_normal; + .border_normal; + .box_shadow_standard_light; + + + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + .background-color-50-gray; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: @active_button_border_bottom; + .color-5-gray; + + .th { + .background-color-50-gray; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: @active_button_border_bottom; + .color-5-gray; + } + + +} + + + + + + +.etemplate_tab row_on, +td.etemplate_tab_active:focus { + .background-color-50-gray; + border-width: 0 0 3px 0; + border-style: solid; + border-spacing: 0px; + border-color: @active_button_border_bottom; + .color-5-gray; + + + + +} +// Inhalte der Tabs +.tab_body { + border: 2px solid none; + .border-color-10-gray; +} +.nextmatch_header { + border: 1px solid black; +} +.nextmatch_header select { + width: 140px; +} +.nm_num_rows select { + width: 40px; +} +.vfsMode { + font-family: monospace; + font-weight: bold; +} +.vfsMimeIcon img { + max-height: 16px; + max-width: 16px; +} +.vfsFilename { + white-space: nowrap; +} +.vfsIsLink img { + background-image: url("images/link.png"); + background-position: right bottom; + background-repeat: no-repeat; + padding-right: 8px; +} +.vfsIsLink img:after { + content: url("../../../filemanager/templates/default/images/link.png"); +} +.vfsIsBrokenLink img { + background-image: url("images/link_broken.png"); + background-position: right bottom; + background-repeat: no-repeat; + padding-right: 8px; +} +.cf_header_height_limit { + max-height: 6.75em; + overflow: auto; + padding-right: 15px; +} +.eTdate { + white-space: nowrap; +} \ No newline at end of file diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css index 8a80447736..b665d0746c 100644 --- a/etemplate/templates/default/etemplate2.css +++ b/etemplate/templates/default/etemplate2.css @@ -1,389 +1,355 @@ /** - * Styles for etemplate2 widgets + * EGroupware - CSS Styles used by eTemplate2 widgets * - * @version: $Id$ + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @link http://www.egroupware.org + * @author Ralf Becker + * @author Stefan Reinhard + * @package etemplate + * @version $Id$ */ - /** * Top level */ .et2_container { - /*margin: 10px; + /*margin: 10px; border: 1px solid gray;*/ - padding: 0px; - background-color: white; - height: 100%; + padding: 0px; + background-color: transparent; + height: 100%; } .et2_container > div:not([class]) { - height: 100%; + height: 100%; } - - /** * Basic rules */ -input,button,select { - margin: 1px; - padding: 0px; +input, +button, +select { + margin: 1px; + padding: 0px; } - /** * VBox widget */ -div.et2_vbox>* { - display: block; +div.et2_vbox > * { + display: block; } - /** * HBox widget */ - div.et2_hbox div.et2_hbox { - display: inline; + display: inline; } div.et2_hbox { - white-space: nowrap; + white-space: nowrap; } -div.et2_hbox>* { - text-align: left; - vertical-align: middle; +div.et2_hbox > * { + text-align: left; } - div.et2_hbox_left { - float: left; + float: left; } - div.et2_hbox_al_center { - text-align: center; + text-align: center; } - div.et2_hbox_al_right { - text-align: right; + text-align: right; } - div.et2_hbox_right { - float: right; - clear: right; + float: right; + clear: right; } -div.et2_hbox>div { - display: inline-block; +div.et2_hbox > div { + display: inline-block; } - /** * Placeholder widget - used for un-implemented widgets */ .et2_placeholder { - display: inline-block; - border: 1px solid cornflowerblue; - background-color: #FCFCFC; - padding: 3px; - margin: 1px; + display: inline-block; + border: 1px solid cornflowerblue; + background-color: #FCFCFC; + padding: 3px; + margin: 1px; } - .et2_placeholder .et2_caption { - display: block; - font-size: 8pt; - margin: 0 0 5px 0; - font-weight: bold; - color: #2E2E2E; - cursor: pointer; - text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; + display: block; + font-size: 8pt; + margin: 0 0 5px 0; + font-weight: bold; + color: #2E2E2E; + cursor: pointer; + text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; } - .et2_placeholder .et2_attr { - display: block; - font-size: 8pt; - color: #3030A0; - margin: 2px 0 2px 0; + display: block; + font-size: 8pt; + color: #3030A0; + margin: 2px 0 2px 0; } - /** * Splitter widget - split pane */ .et2_split { - width: 100%; - min-width: 100px; - min-height: 100px; + width: 100%; + min-width: 100px; + min-height: 100px; +} +.splitter-bar-vertical { + cursor: ew-resize; + width: 5px; +} +.splitter-bar-horizontal { + cursor: ns-resize; + height: 5px; } -.splitter-bar-vertical { cursor: ew-resize; width: 5px;} -.splitter-bar-horizontal { cursor: ns-resize; height: 5px;} /* Hide iframes so moving works */ -.splitter-iframe-hide { display: none;} +.splitter-iframe-hide { + display: none; +} .et2_split div.splitter-bar-vertical div.ui-icon { - position: absolute; - margin-left: -5px; - top: 45%; + position: absolute; + margin-left: -5px; + top: 45%; } .et2_split div.splitter-bar-horizontal div.ui-icon { - position: absolute; - margin-top: -6px; - left: 47%; + position: absolute; + margin-top: -6px; + left: 47%; } /* Make sure there's no overflow, or hidden bits still appear */ * > .et2_split { - overflow: hidden; + overflow: hidden; } - /** * Label widget, and labels for other widgets */ .et2_label { - color: #101050; + color: #101050; } -#msg,.message { - color: red; - font-style: italic; +#msg, +.message { + color: red; + font-style: italic; } input.et2_url { - margin-right: 6px; - padding-right: 8px; + margin-right: 6px; + padding-right: 8px; } a.et2_url { - background-position: center; - background-repeat: no-repeat; - - cursor: pointer; - margin: -4px; - padding: 2px; - padding-left: 16px; - margin-left: -10px; + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + margin: -4px; + padding: 2px; + padding-left: 16px; + margin-left: -10px; } - a.et2_url.email { - background-image: url(images/email.png); + background-image: url(images/email.png); } a.et2_url.phone { - background-image: url(images/phone.png); + background-image: url(images/phone.png); } a.et2_url.url { - background-image: url(images/url.png); + background-image: url(images/url.png); } - /** * Button widget - text only, and icon */ .et2_button { - cursor: pointer; - text-align: center; - - font-size: 9pt; - - text-shadow: 1px 1px #E0E0E0; -} -.et2_button_text, input[type=button] { - background-color: #E0E0E0; - background-image: url(images/gradient01.png); - background-position: center; - background-repeat: repeat-x; - - margin: 5px; - padding: 3px; - - border: 1px solid silver; - color: #101010; + cursor: pointer; + text-align: center; + font-size: 9pt; + text-shadow: 1px 1px #E0E0E0; } .et2_button_icon { - border: none; - height: 16px; - background: transparent; - padding: 2px; + border: none; + background: transparent; + padding: 2px; } -button.et2_button_text:hover, input[type=button]:hover { - color: #050505; - border: 1px solid gray; - background-color: #D0D0EE; +button.et2_button_text:hover, +input[type=button]:hover { + color: #050505; + border: 1px solid gray; + background-color: #D0D0EE; } -button.et2_button_text:active, input[type=button]:active { - background-image: url(images/gradient02.png); - background-color: #D0D0E0; +button.et2_button_text:active, +input[type=button]:active { + background-image: url(images/gradient02.png); + background-color: #D0D0E0; } -button.et2_button_text:focus, input[type=button]:focus { - border: 1px solid #2c3d6f; - color: #202d52; - outline: none; +button.et2_button_text:focus, +input[type=button]:focus { + border: 1px solid #2c3d6f; + color: #202d52; + outline: none; } - /** * Drop down button */ .et2_dropdown button { - height: 3.0ex; - display: inline-block; - vertical-align: middle; - margin-right: -2px; - padding: 0px 1ex; + height: 3.0ex; + display: inline-block; + vertical-align: middle; + margin-right: -2px; + padding: 0px 1ex; } .et2_dropdown button > div { - vertical-align: middle; + vertical-align: middle; } .et2_dropdown button:last-child { - padding: 0px + padding: 0px; } .et2_dropdown + ul.ui-menu { - position: absolute; - z-index: 2; + position: absolute; + z-index: 2; } - /** * Color picker widget */ .et2_color { - padding: .5ex; - height: 2ex; - width: 2ex; - border: 1px solid silver; + padding: .5ex; + height: 2ex; + width: 2ex; + border: 1px solid silver; } - /** * Text box */ .et2_textbox { - resize: none; + resize: none; } .et2_textbox_ro { - white-space: pre-wrap; + white-space: pre-wrap; } - .et2_bold { - font-weight: bold; + font-weight: bold; } - .et2_italic { - font-style: italic; + font-style: italic; } - /** * Multi-select widget */ .et2_selectbox .ui-widget-header { - padding: 0px 6px 0px 6px; - text-align: center; - background: white; - border:none; - color: inherit; + padding: 0px 6px 0px 10px; + text-align: center; } .et2_selectbox .ui-widget-header ul { - float: left; - margin-left: -5px; - text-align: left; + float: left; + margin-left: -5px; + text-align: left; } .et2_selectbox .ui-widget-header li { - float: left; - padding-top: 0px + float: left; + padding-top: 0px; } -.et2_selectbox .ui-widget-header li>span.ui-icon { - float: left; - margin-top: -2px; - background-size: 1.0em; +.et2_selectbox .ui-widget-header li > span.ui-icon { + float: left; + margin-top: -2px; } -.et2_selectbox .ui-widget-header li>div.et2_link_entry { - /* Shrink search box to same size as header */ - margin-top: -2px; - margin-bottom: -2px; - margin-right: 1ex; +.et2_selectbox .ui-widget-header li > div.et2_link_entry { + /* Shrink search box to same size as header */ + margin-top: -2px; + margin-bottom: -2px; + margin-right: 1ex; } -.et2_selectbox .ui-widget-header li>div.et2_link_entry input { - height: 14px; +.et2_selectbox .ui-widget-header li > div.et2_link_entry input { + height: 14px; } .et2_selectbox .ui-multiselect-checkboxes { - overflow-y: scroll; - position: relative; - text-align: left; + overflow-y: scroll; + position: relative; + text-align: left; } .et2_selectbox .ui-multiselect-checkboxes li { - margin: 0px; - clear: both; - padding-left: 26px; - padding-right: 3px; - text-decoration: none; - list-style-image: none; - list-style-type: none; - text-indent: -26px; + margin: 0px; + clear: both; + text-decoration: none; + list-style-image: none; + list-style-type: none; } .et2_selectbox .ui-multiselect-checkboxes ul { - margin: 0px auto; - padding-left: 0px; - clear:both; - text-decoration: none; - list-style-image: none; - list-style-type: none; + margin: 0px auto; + padding-left: 0px; + clear: both; + text-decoration: none; + list-style-image: none; + list-style-type: none; } -.et2_selectbox .ui-multiselect-checkboxes ul>label { - border-bottom: 1px solid black; +.et2_selectbox .ui-multiselect-checkboxes ul > label { + border-bottom: 1px solid black; } - .et2_selectbox .ui-multiselect-checkboxes label { - display: block; - border: 1px solid transparent; + display: block; + border: 0px solid transparent; + padding: 0.1em 0.2em; } .et2_selectbox input[type="checkbox"] { - margin: 3px 3px 3px -1px; + margin: 3px; } .et2_selectbox .ui-multiselect-checkboxes img { - height: 1.0em; + float: right; + height: 1.8em; } - .et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close { - visibility: hidden; - padding: 0px; + visibility: hidden; + padding: 0px; } .et2_selectbox .ui-multiselect-checkboxes li:hover div.ui-icon-close { - visibility: visible; + visibility: visible; } - /* Read-only multi-select */ ul.et2_selectbox { - margin: 0px; - padding: 0px; + margin: 0px; + padding: 0px; } .et2_selectbox li { - text-decoration: none; - list-style-image: none; - list-style-type: none; + text-decoration: none; + list-style-image: none; + list-style-type: none; } - /** * Select account dialog */ - /** * Date / Time widgets */ span.et2_date { - min-width: 130px; + min-width: 130px; } span.et2_date input.et2_date { - min-width: 16.5ex; - background-repeat: no-repeat; - background-position: top right; - background-size: contain; + min-width: 21.5ex; + background-repeat: no-repeat; + background-position: top right; + background-size: contain; } span.et2_date input.et2_time { - min-width: 6ex; + min-width: 6ex; } span.et2_date span { - background-position: center; - background-repeat: no-repeat; - - color: #101010; - cursor: pointer; - padding-top: 3px; - padding-left: 22px; - text-align: center; - - font-size: 9pt; + background-position: center; + background-repeat: no-repeat; + color: #101010; + cursor: pointer; + padding-top: 3px; + padding-left: 22px; + text-align: center; + font-size: 9pt; } - /** * Dialog widget * It uses jQueryUI, so this is just our little bits - icon on left */ .ui-dialog-content .dialog_icon { - margin-right: 2ex; - vertical-align: middle; + margin-right: 2ex; + vertical-align: middle; } -.ui-dialog-content { - vertical-align: middle; +.ui-dialog-content { + vertical-align: middle; } /* These change button alignment, but it seems the standard is right-aligned for action buttons, left aligned for "extra" controls @@ -397,866 +363,894 @@ action buttons, left aligned for "extra" controls float: none; } */ - /** * Diff widget */ -.diff thead,.author { - display: none; +.diff thead, +.author { + display: none; } .diff .ui-icon { - margin-top: -16px; - float: right; + margin-top: -16px; + float: right; } - /** Display a loading icon **/ .loading { - background-position: center; - background-repeat: no-repeat; - background-image: url('images/ajax-loader.gif'); + background-position: center; + background-repeat: no-repeat; + background-image: url('images/ajax-loader.gif'); } - /** * File upload */ .et2_file .progress { - width: 300px; - max-height: 6em; - overflow: auto; - margin-left: 20px; + width: 300px; + max-height: 6em; + overflow: auto; + margin-left: 20px; } - .et2_file .progress span.progressBar { - height: 5px; - width: 150px; - max-width: 150px; - display: inline; + height: 5px; + width: 150px; + max-width: 150px; + display: inline; } - /* Remove icon displayed when hovering */ .et2_file .progress li div.remove { - display: none; - cursor: pointer; - margin: 0px; + display: none; + cursor: pointer; + margin: 0px; } - .et2_file .progress li:hover div.remove { - width: 16px; - height: 16px; - float: right; - display: block; - background-image: url("images/close.png"); - background-position: center; - background-repeat: no-repeat; + width: 16px; + height: 16px; + float: right; + display: block; + background-image: url("images/close.png"); + background-position: center; + background-repeat: no-repeat; } - .et2_file .progress p { - background-color: green; - height:5px; - margin: 0px; -} - -.et2_file .progress li { + background-color: green; + height: 5px; + margin: 0px; } /* Hide progress bar when completed */ .et2_file .progress li.success > span.progressBar { - display: none; + display: none; } - - /** * Autocomplete - used in link widget * Restricting result size */ .ui-autocomplete { - max-height: 20ex; - overflow-y: auto; - /* prevent horizontal scrollbar */ - overflow-x: hidden; + max-height: 20ex; + overflow-y: auto; + /* prevent horizontal scrollbar */ + overflow-x: hidden; } - /** * Autocomplete in dialogs - fix so they go over/out of the dialog */ .ui-dialog * ul.ui-autocomplete { - position: fixed; + position: fixed; } - /** * Link wiget(s) */ - /* Link entry - x button*/ div.et2_link_entry { - white-space: nowrap; + white-space: nowrap; } div.et2_link_entry:after { - display: inline-block; - content: "."; - height: 0; - visibility: hidden; - margin: -20px; + display: inline-block; + content: "."; + height: 0; + visibility: hidden; + margin: -20px; } /* Special layout for inside nm grid */ .et2_nextmatch div.et2_link_entry { - padding-right: 4px; + padding-right: 4px; } .et2_nextmatch .et2_link_entry:after { - margin: -12px; + margin: -12px; } div.et2_link_entry select { - width: 39%; + width: 39%; } div.et2_link_entry input.ui-autocomplete-input { - width: 61%; - padding-bottom: 1px; + width: 61%; + padding-bottom: 1px; } .et2_link_entry.no_app input.ui-autocomplete-input { - width: 100%; + width: 100%; } .et2_link_entry.no_app select { - display: none; + display: none; } .et2_link_entry .ui-icon-close { - display: inline-block; - background-color: inherit; - border: none; - position: relative; - top: 3px; - left: -18px; - cursor: pointer; - margin-top: -3px; + display: inline-block; + background-color: inherit; + border: none; + position: relative; + top: 3px; + left: -18px; + cursor: pointer; + margin-top: -3px; } - /* Link to */ .et2_link_to { - width: 350px; - overflow-x: show; + width: 350px; + overflow-x: visible; } .et2_link_to button { - display: inline; - float: right; - height: 5ex; + display: inline; + float: right; + height: 5ex; } .et2_link_to span.status { - background-repeat: no-repeat; - background-position: 3px center; - width: 22px; - height: 22px; - display: block; - float: right; + background-repeat: no-repeat; + background-position: 3px center; + width: 22px; + height: 22px; + display: block; + float: right; } .et2_link_to span.status.success { - background-image:url(images/tick.png); + background-image: url(images/tick.png); } .et2_link_to span.status.error { - background-image:url(images/error.png); + background-image: url(images/error.png); } .et2_link_to .progress { - max-height: 12em; - overflow-y: scroll; + max-height: 12em; + overflow-y: scroll; } .et2_link_to .progress > .success input { - width: 100%; - margin-right: -20px; /* Leave room for remove icon */ + width: 100%; + margin-right: -20px; + /* Leave room for remove icon */ } .et2_link_to .progress li { - list-style: none; - padding-bottom: 1px; - padding-top: 0px; + list-style: none; + padding-bottom: 1px; + padding-top: 0px; } .et2_link_to .progress li.success span.ui-icon-comment { - display: none; - float: right; - cursor: pointer; - margin-right: 5px; + display: none; + float: right; + cursor: pointer; + margin-right: 5px; } .et2_link_to .progress li:hover.success span.ui-icon-comment { - display: inline; + display: inline; } .et2_link_to .et2_button_icon { - float: left; - width: 22px; + float: left; + width: 22px; } - .et2_link { - cursor: pointer; - color: #003075; - text-decoration: none; + cursor: pointer; + color: #003075; + text-decoration: none; } .et2_link:hover { - text-decoration: underline; + text-decoration: underline; } ul.et2_link_string { - list-style-type: none; - display: inline; - padding: 0px; + list-style-type: none; + display: inline; + padding: 0px; } .et2_link_string li { - display: inline; + display: inline; } .et2_link_string li:not(:last-child):after { - content: ', '; + content: ', '; } .et2_link_list { - border-collapse:collapse; + border-collapse: collapse; } .et2_link_list tr { - cursor: pointer; + cursor: pointer; } .et2_link_list td.remark { - font-style: italic; + font-style: italic; } .et2_link_list td div.delete { - visibility: hidden; - background-image: url("images/close.png"); - background-position: center; - background-repeat: no-repeat; - padding: 0px; + visibility: hidden; + background-image: url("images/close.png"); + background-position: center; + background-repeat: no-repeat; + padding: 0px; } -.et2_link_list .icon img, .et2_link_list .icon { - width: 16px; - height: 16px; - display: inline-block; +.et2_link_list .icon img, +.et2_link_list .icon { + width: 16px; + height: 16px; + display: inline-block; } .et2_link_list tr:hover div.delete { - visibility: visible; + visibility: visible; } - -.egw_tooltip -{ - position: fixed; - border: 1px solid #897f51; - padding: 3px; - background-color: #FDF9DB; - max-width: 300px; - color: black; +.egw_tooltip { + position: fixed; + border: 1px solid #897f51; + padding: 3px; + background-color: #FDF9DB; + max-width: 300px; + color: black; } - /** * Tabs widget */ - .et2_tabflag { - display: inline-block; - margin-right: 5px; - padding: 5px; - cursor: pointer; - border: 1px solid silver; - - background-color: #E0E0E0; - background-image: url(images/gradient01.png); - background-position: center; - background-repeat: repeat-x; - - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + display: inline-block; + margin: 1em 3px -1px 0; + padding: 4px; + cursor: pointer; + -webkit-border-top-right-radius: 3px; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 3px; + -moz-border-radius-topright: 3px; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 3px; + border-top-right-radius: 3px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 3px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + background-color: #bfbfbf; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } - .et2_tabflag:hover { - color: #050505; - border: 1px solid gray; - background-color: #D0D0EE; + color: #f2f2f2; + background-color: #bfbfbf; } - .et2_tabflag:active { - background-image: url(images/gradient02.png); - background-color: #D0D0E0; + background-color: #ffffff; + color: #ffffff; } - -.et2_tabs { - border-width: 0px 1px 1px 1px; - border-style: solid; - border-color: silver; - padding: 5px; - overflow-y: auto; -} - .et2_tabflag.active { - border-bottom: 1px solid white; - background-color: white; - background-image: none; + border-spacing: 0px; + background-color: white; + color: #000000; + border-width: 1px 1px 0px 1px; + border-style: solid; + border-color: #bfbfbf; +} +.et2_tabflag.active:hover { + color: #000000; + background-color: white; +} +.et2_tabs { + border-width: 0px 1px 1px 1px; + border-style: solid; + border-color: #bfbfbf; + padding: 5px; + overflow-y: auto; + background-color: #ffffff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } - .et2_tabheader { - background-image: url(images/tab_header_bg.png); - background-position: bottom; - background-repeat: repeat-x; + background-color: #bfbfbf; + background-position: bottom; + background-repeat: repeat-x; + padding-left: 0em; + border-bottom: 1px solid #bfbfbf; + margin: 0 2px; +} +.et2_tabheader :first-child { + margin-left: 0.3em; } - /** * VFS widget(s) */ ul.et2_vfs { - padding-left: 0px; - margin: 1px; + padding-left: 0px; + margin: 1px; } .et2_vfs li.vfsFilename { - display: inline; + display: inline; } .et2_vfs li.vfsFilename:not(:last-child):after { - padding: 0.25ex; + padding: 0.25ex; } - /** * Validation */ [required] { - background-color: #ffffd0; + background-color: #ffc200; } .invalid { - border: 1px solid #a6261d; - background-color: #faecec; + border: 1px solid #a6261d; + background-color: #faecec; } .error { - -moz-border-radius: 0 4px 4px 0; - -moz-box-shadow: 0 0 6px #DDDDDD; - background-color: #FFFE36; - border: 1px solid #E1E16D; - color: #000000; - display: none; - font-size: 11px; - height: 15px; - padding: 4px 10px; + -moz-border-radius: 0 4px 4px 0; + -moz-box-shadow: 0 0 6px #DDDDDD; + background-color: #FFFE36; + border: 1px solid #E1E16D; + color: #000000; + display: none; + font-size: 11px; + height: 15px; + padding: 4px 10px; } .error p { - margin: 0; + margin: 0; } - /** * hrule widget */ - hr { - border-style: none; - border-top: 1px solid silver; - height: 1px; - margin: 10px 0px 10px 0px; + border-style: none; + border-top: 1px solid silver; + height: 1px; + margin: 10px 0px 10px 0px; } - /** * grid widget */ - table.et2_grid { - border-collapse: collapse; + border-collapse: collapse; } - .et2_grid td { -/* border: 1px dashed silver;*/ + /* border: 1px dashed silver;*/ } /** * Sortable grid */ -table.et2_grid tbody.ui-sortable > tr:not(.th) { - cursor: ns-resize; +table.et2_grid tbody.ui-sortable > tr:not(.th) { + cursor: ns-resize; } - /** * Create some spacing for widgets inside labels */ -label input, label span, label div, label select, label textarea { - margin-left: 1ex; - margin-right: 1ex; +label input, +label span, +label div, +label select, +label textarea { + margin-left: 1ex; + margin-right: 1ex; } - /** * Message styles */ - /* Style used for a generic message (such as success messages or validation errors) */ div.message { - display: block; - border: 1px solid gray; - padding: 3px 3px 3px 22px; - margin: 5px 0px 5px 0px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - background-repeat: no-repeat; - background-position: 3px center; - clear: left; - max-width: 500px; + display: block; + border: 1px solid gray; + padding: 3px 3px 3px 22px; + margin: 5px 0px 5px 0px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background-repeat: no-repeat; + background-position: 3px center; + clear: left; + max-width: 500px; } - div.message.floating { - display: inline-block; - margin: 0px 5px 0px 5px; + display: inline-block; + margin: 0px 5px 0px 5px; } - .message.validation_error { - color: #a93030; - font-style: italic; - background-color: #f3d4d0; - border-color: #a93030; - background-image:url(images/error.png); - background-repeat: no-repeat; - padding-left: 20px; + color: #a93030; + font-style: italic; + background-color: #f3d4d0; + border-color: #a93030; + background-image: url(images/error.png); + background-repeat: no-repeat; + padding-left: 20px; } - .message.success { - font-style: normal; - background-color: #e5f3d0; - color: #98a930; - border-color: #9ea930; - background-image:url(images/tick.png); - background-repeat: no-repeat; - padding-left: 20px; + font-style: normal; + background-color: #e5f3d0; + color: #98a930; + border-color: #9ea930; + background-image: url(images/tick.png); + background-repeat: no-repeat; + padding-left: 20px; } - .message.hint { - font-style: normal; - background-color: #d9e2ed; - border-color: #56729a; - color: #56729a; - background-image:url(images/hint.png); - background-repeat: no-repeat; - padding-left: 20px; + font-style: normal; + background-color: #d9e2ed; + border-color: #56729a; + color: #56729a; + background-image: url(images/hint.png); + background-repeat: no-repeat; + padding-left: 20px; } - /** * Nextmatch widget */ - .et2_nextmatch { -/* background-color: silver;*/ + /* background-color: silver;*/ } - /* Left & right headers*/ .et2_nextmatch > div > .header { - margin-top: -20px; - border: none; + margin-top: -20px; + border: none; } - .nextmatch_header .header_count { - padding: 0px 20px; - margin: 6px 20px 0px; - border: 1px solid #E0E0E0; - float:right; - font-size: 150%; - text-align: center + padding: 0px 20px; + margin: 6px 20px 0px; + border: 1px solid #E0E0E0; + float: right; + font-size: 150%; + text-align: center; } .nextmatch_header > .filters { - padding-left: 5px; + padding-left: 5px; } .nextmatch_header > .filters select { - margin-right: 2ex; + margin-right: 2ex; } .nextmatch_header .et2_button_icon { - vertical-align: middle; + vertical-align: middle; } .nextmatch_header > .filters .et2_button_icon { - margin-top: 8px; + margin-top: 8px; } .et2_nextmatch .nextmatch_header { - border: none; - background-image: none; - background-color: transparent; - margin-bottom: 3px; + border: none; + background-image: none; + margin-bottom: 3px; } .et2_nextmatch .nextmatch_header > .filters { - border: 1px solid silver; - background-color: #E0E0E0; - background-image: url(../../../phpgwapi/templates/default/images/egw_action/header_overlay.png); - background-position: center; - background-repeat: repeat-x; - margin-bottom: 3px; + border: 1px solid silver; + background-color: #E0E0E0; + background-image: url(../../../phpgwapi/templates/default/images/egw_action/header_overlay.png); + background-position: center; + background-repeat: repeat-x; + margin-bottom: 3px; } /* Favorites */ .nextmatch_header div[id$=favorite_wrapper] { - margin-top: 6px; - vertical-align: middle; + margin-top: 6px; + vertical-align: middle; } -#nm_favorites_popup_filters .filter_id, #nm_favorites_popup_filters .filter_value { - width: 45%; - display: inline-block; +#nm_favorites_popup_filters .filter_id, +#nm_favorites_popup_filters .filter_value { + width: 45%; + display: inline-block; } .nextmatch_header ul.favorites { - min-width: 20ex; + min-width: 20ex; } .nextmatch_header .favorites li .ui-menu .ui-menu-item a { - text-indent: -22px; - margin-left: 21px; + text-indent: -22px; + margin-left: 21px; } .nextmatch_header .favorites.ui-menu li.ui-menu-item a.ui-state-hover { - margin-left: 20px; -} -.favorites li span.ui-state-active { - border: none; -} -.favorites input, .favorites img { - margin-right: 1ex; -} -.favorites div.ui-icon-trash { - position: relative; - float:right; - display:none; + margin-left: 20px; } .favorites li:hover div.ui-icon { - display:inline-block; + display: inline-block; } -.favorites .sideboxstar { - height: 9px; - display: inline-block; - padding: 0px 4px; - margin: 0px 5px; - - /* TODO: This is template specific */ - background-image: url(../../../phpgwapi/templates/idots/images/orange-ball.png); +.favorites li span.ui-state-active { + border: none; +} +.favorites input { + margin-right: 1ex; +} +.favorites img { + margin-right: 1ex; + height: 16px; + width: 16px; +} +.favorites div.ui-icon-trash { + position: relative; + float: right; + display: none; } .sidebox-favorites ul.favorites { - width: 99%; - padding: 0px; - border: none; - background: white; + width: 99%; + padding: 0px; + border: none; + background: white; } -.sidebox-favorites .ui-menu .ui-menu-item a { - line-height: inherit; - padding: 2px 0px; +.sidebox-favorites ul.favorites li { + padding-left: 0 !important; + margin-left: -10px; + line-height: 1.5em; } -.sidebox-favorites .ui-menu .ui-menu-item a:hover { - text-decoration: underline; +.sidebox-favorites ul.favorites li img { + margin-right: 1ex; + height: 13px; + padding: 3px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; } -.sidebox-favorites .favorites div.ui-icon-heart{ - position: relative; - float: left; - display:inline-block; - margin: -3px 1px 0px 1px; +.sidebox-favorites ul.favorites li img:hover { + height: 16px; + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; } -.sidebox-favorites .favorites div.ui-icon-trash{ - margin-top: -5px; - margin-right: 2px; +.sidebox-favorites ul.favorites li img.sideboxstar { + margin-right: 1ex; + height: 16px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +.sidebox-favorites ul.favorites li img.sideboxstar:hover { + height: 16px; + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.sidebox-favorites .ui-state-hover, +.sidebox-favorites .ui-widget-content .ui-state-hover, +.sidebox-favorites .ui-widget-header .ui-state-hover, +.sidebox-favorites .ui-state-focus, +.sidebox-favorites .ui-widget-content .ui-state-focus, +.sidebox-favorites .ui-widget-header .ui-state-focus { + border-top: solid 1px 1px; + border-left: solid 1px 1px; + border-right: solid 1px 1px; + border-bottom: solid 1px 1px; + border-color: #f0f0f0; + background: transparent !important; + font-weight: bold; + color: #000000; +} +.sidebox-favorites .ui-menu-icons .ui-menu-item a { + position: relative; + padding-left: 1em; + padding: 0.5em 1em 0.5em 0; +} +.sidebox-favorites .ui-menu-icons .ui-menu-item a:hover { + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.sidebox-favorites ui-menu .ui-menu-item a { + line-height: inherit; + padding: 2px 0px; + padding-left: 0 !important; +} +.sidebox-favorites ui-menu .ui-menu-item a:hover { + text-decoration: underline; + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +.sidebox-favorites ui-menu .ui-menu-item a img { + height: 16px; + width: 16px; +} +.sidebox-favorites div.ui-icon-heart { + position: relative; + float: left; + display: inline-block; + margin: -3px 1px 0px 1px; +} +.sidebox-favorites div.ui-icon-trash { + margin-top: -5px; + background-image: url(images/delete.png); + background-size: 16px 16px; + background-position: 0 0; + background-color: #e6e6e6; + -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 1px 1px 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; + margin-right: 0.5em; + padding: 0px 2px 0 2px; + width: 10px; } .nextmatch_sortheader { - color: #003075; - cursor: pointer; - padding-right: 10px; - margin-right: 10px; - background-repeat: no-repeat; - background-position: right center; + color: #003075; + cursor: pointer; + padding-right: 10px; + margin-right: 10px; + background-repeat: no-repeat; + background-position: right center; } - .nextmatch_sortheader:hover { - text-decoration: underline; + text-decoration: underline; } - .nextmatch_sortheader.asc { - font-weight: bold; - background-image: url(images/up.png); + font-weight: bold; + background-image: url(images/up.png); } - .nextmatch_sortheader.desc { - font-weight: bold; - background-image: url(images/down.png); + font-weight: bold; + background-image: url(images/down.png); } - .nextmatch_resize_helper { - border-right: 1px dotted gray; - min-height: 100%; - background-color: gray; - opacity: 0.5; + border-right: 1px dotted gray; + min-height: 100%; + background-color: gray; + opacity: 0.5; } - /** * Grid / nextmatch Hierarchy */ /* Make sure arrow & cell content don't overlap */ .egwGridView_grid span.arrow { - margin: 6px -12px 4px 4px; - float: left; - position:relative; + margin: 6px -12px 4px 4px; + float: left; + position: relative; } .egwGridView_grid span.arrow ~ div.innerContainer { - display: inline-block; + display: inline-block; } /* Indent the sub-grid */ .egwGridView_grid .egwGridView_grid { - margin-left: 10px; - border-left: 1px solid silver; + margin-left: 10px; + border-left: 1px solid silver; } /** * This class' margin-right is used to line up columns at each indent level * Classes level_# are created programmatically with margin-right * depth * Margin-right = -(indent + border) */ -.indentation { margin-right:-11px; } - +.indentation { + margin-right: -11px; +} /* End of hierarchy */ - /* Mangled link-to widget inside a nextmatch - used for DnD uploads */ .et2_nextmatch * .et2_link_to { - position: fixed; - left: 0px; - background-color: white; - border: 1px gray; - padding: 5px; + position: fixed; + left: 0px; + background-color: white; + border: 1px gray; + padding: 5px; } - .et2_clickable { - cursor: pointer; + cursor: pointer; } - /** * et2_portlet */ div.et2_portlet { - min-width: 100px; + min-width: 100px; } .et2_portlet .ui-widget-header { - margin: 0em; - padding-bottom: 4px; - padding-left: 0.2em; + margin: 0em; + padding-bottom: 4px; + padding-left: 0.2em; } .et2_portlet .ui-widget-header span.ui-icon { - display: inline-block; - float: right; + display: inline-block; + float: right; } .et2_portlet .ui-widget-header span.ui-icon.ui-icon-gear { - display: inline-block; - float: left; + display: inline-block; + float: left; } - /** * et2_progress */ div.et2_progress { - display: inline-block; - border: 1px solid black; - background-color: white; - width: 30px; - padding: 1px; - margin: 2px; - text-align: left; + display: inline-block; + border: 1px solid black; + background-color: white; + width: 30px; + padding: 1px; + margin: 2px; + text-align: left; } div.et2_progress > div { - background-color: #D00000; - height: 5px; + background-color: #D00000; + height: 5px; } - .egwResizeOverlay { - position: fixed; - width: 100%; - height: 100%; - top: 0px; - left: 0px; - z-index: 99999; - cursor: ew-resize; + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + z-index: 99999; + cursor: ew-resize; } - .egwResizeHelper { - position: absolute; - display: block; - z-index: 99998; - opacity: 0.5; - background-color: #829cbc; - cursor: ew-resize; + position: absolute; + display: block; + z-index: 99998; + opacity: 0.5; + background-color: #829cbc; + cursor: ew-resize; } - /** * Indent grid sublevels */ - .et2_nextmatch .subentry.level_1 div.et2_vbox { - margin-left: 2.5em; + margin-left: 2.5em; } - .et2_nextmatch .subentry.level_2 div.et2_vbox { - margin-left: 5em; + margin-left: 5em; } - .et2_nextmatch .subentry.level_3 div.et2_vbox { - margin-left: 7.5em; + margin-left: 7.5em; } - /** * itempicker widget */ .et2_itempicker { - display: block; - position: relative; - margin: 0; - padding: 0; - width: 100%; - height: 256px; + display: block; + position: relative; + margin: 0; + padding: 0; + width: 100%; + height: 256px; } .et2_itempicker_left { - display: block; - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 50px; - overflow: hidden; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 50px; + overflow: hidden; } - .et2_itempicker_right { - display: block; - position: absolute; - margin: 0; - top: 0; - left: 49px; - right: 0; - bottom: 0; - border: 1px solid #b6b6b6; - background-color: #f9f9f9; + display: block; + position: absolute; + margin: 0; + top: 0; + left: 49px; + right: 0; + bottom: 0; + border: 1px solid #b6b6b6; + background-color: #f9f9f9; } - .et2_itempicker_right_container { - display: block; - position: relative; - width: 100%; - height: 100%; + display: block; + position: relative; + width: 100%; + height: 100%; } - .et2_itempicker_app_select { - list-style-type: none; - padding: 0; + list-style-type: none; + padding: 0; } - .et2_itempicker_app_select li { - display: block; - margin: 0; - padding: 6px; + display: block; + margin: 0; + padding: 6px; } - .et2_itempicker_app_select li.selected { - border: 1px solid #b6b6b6; - border-right: 1px solid transparent; - background-color: #f9f9f9; - border-top-left-radius: 4px; - border-bottom-left-radius: 4px; + border: 1px solid #b6b6b6; + border-right: 1px solid transparent; + background-color: #f9f9f9; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } - .et2_itempicker_search { - display: inline-block; - margin: 1em; - margin-bottom: 0; - margin-right: 0; - width: 67%; - padding: 0.2em; + display: inline-block; + margin: 1em; + margin-bottom: 0; + margin-right: 0; + width: 67%; + padding: 0.2em; } - .et2_itempicker_clear { - position: relative; - top: 3px; - left: -20px; + position: relative; + top: 3px; + left: -20px; } - .et2_itempicker_button_action { - position: absolute; - margin: 1em; - top: 0; - right: 0; + position: absolute; + margin: 1em; + top: 0; + right: 0; } - .et2_itempicker_itemlist { - display: block; - border: 1px solid #b6b6b6; - margin: 1em; - margin-bottom: 0; - padding: 0; - height: 67%; - background-color: #ffffff; - overflow: auto; + display: block; + border: 1px solid #b6b6b6; + margin: 1em; + margin-bottom: 0; + padding: 0; + height: 67%; + background-color: #ffffff; + overflow: auto; } - .et2_itempicker_itemlist ul { - margin: 0; - padding: 0; - list-style-type: none; + margin: 0; + padding: 0; + list-style-type: none; } - .et2_itempicker_itemlist li { - display: block; - margin: 0; - padding: 4px; - color: #284d8a; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + display: block; + margin: 0; + padding: 4px; + color: #284d8a; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .et2_itempicker_itemlist li.row_on { - background-color: #f2f9fe; + background-color: #f2f9fe; } - .et2_itempicker_itemlist li.selected { - color: #ffffff; - background-color: #3875d7; + color: #ffffff; + background-color: #3875d7; } - /** * et2_dialog: EGroupware left aligns all buttons, but [Delete] */ div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { - float: left; + float: left; } div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { - float: left; - margin-right: 1em; -} -div.ui-dialog .ui-dialog-content div { - white-space: pre-wrap; - display: inline-block; + float: left; + margin-right: 1em; } .et2_prompt #message { - white-space: pre-wrap; - padding-bottom: 10px; + white-space: pre-wrap; + padding-bottom: 10px; } .et2_prompt #value { - width: 100%; + width: 100%; } - -.et2_toolbar { - padding: 2px; - display: inline-block; -} -.et2_toolbar > * { - display: inline-block; -} -/** - * egroupware has its own icons for these - override the images - */ - -span.ui-icon-check, div.ui-icon-check, .ui-widget-header .ui-icon-check { - background-image: url(images/check.png); - background-position: 0px; -} -span.ui-icon-search, div.ui-icon-search, .ui-widget-header .ui-icon-search, .ui-widget-content .ui-icon-search { - background-image: url(images/search.png); - background-position: 0px; -} - /** * et2_taglist */ -.ms-ctn,.ms-res-ctn { - /* It doesn't really work smaller than this */ - min-width: 150px; +.ms-ctn, +.ms-res-ctn { + /* It doesn't really work smaller than this */ + min-width: 150px; } .ms-ctn .loading { - position: relative; - margin: 0px auto -16px auto; - top: 5px; + position: relative; + margin: 0px auto -16px auto; + top: 5px; } .ms-res-ctn { - overflow-x: hidden; + overflow-x: hidden; } - - -/** - * Apparently Safari needs this for native DnD - * Used by action system. - */ -[draggable] { - -khtml-user-drag: element; - -webkit-user-drag: element; - -khtml-user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} \ No newline at end of file diff --git a/etemplate/templates/default/etemplate2.less b/etemplate/templates/default/etemplate2.less new file mode 100644 index 0000000000..effcdf04ae --- /dev/null +++ b/etemplate/templates/default/etemplate2.less @@ -0,0 +1,1398 @@ +/** + * EGroupware - CSS Styles used by eTemplate2 widgets + * + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @link http://www.egroupware.org + * @author Ralf Becker + * @author Stefan Reinhard + * @package etemplate + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +/** + * Top level + */ +.et2_container { + /*margin: 10px; + border: 1px solid gray;*/ + padding: 0px; + background-color: transparent; + height: 100%; +} +.et2_container > div:not([class]) { + height: 100%; +} + + +/** + * Basic rules + */ +input,button,select { + margin: 1px; + padding: 0px; +} + +/** + * VBox widget + */ +div.et2_vbox>* { + display: block; +} + +/** + * HBox widget + */ + +div.et2_hbox div.et2_hbox { + display: inline; +} +div.et2_hbox { + white-space: nowrap; + +} +div.et2_hbox>* { + text-align: left; +} + +div.et2_hbox_left { + float: left; +} + +div.et2_hbox_al_center { + text-align: center; +} + +div.et2_hbox_al_right { + text-align: right; +} + +div.et2_hbox_right { + float: right; + clear: right; +} +div.et2_hbox>div { + display: inline-block; +} + +/** + * Placeholder widget - used for un-implemented widgets + */ +.et2_placeholder { + display: inline-block; + border: 1px solid cornflowerblue; + background-color: #FCFCFC; + padding: 3px; + margin: 1px; +} + +.et2_placeholder .et2_caption { + display: block; + font-size: 8pt; + margin: 0 0 5px 0; + font-weight: bold; + color: #2E2E2E; + cursor: pointer; + text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; +} + +.et2_placeholder .et2_attr { + display: block; + font-size: 8pt; + color: #3030A0; + margin: 2px 0 2px 0; +} + +/** + * Splitter widget - split pane + */ +.et2_split { + width: 100%; + min-width: 100px; + min-height: 100px; +} +.splitter-bar-vertical { cursor: ew-resize; width: 5px;} +.splitter-bar-horizontal { cursor: ns-resize; height: 5px;} +/* Hide iframes so moving works */ +.splitter-iframe-hide { display: none;} +.et2_split div.splitter-bar-vertical div.ui-icon { + position: absolute; + margin-left: -5px; + top: 45%; +} +.et2_split div.splitter-bar-horizontal div.ui-icon { + position: absolute; + margin-top: -6px; + left: 47%; +} +/* Make sure there's no overflow, or hidden bits still appear */ +* > .et2_split { + overflow: hidden; +} + +/** + * Label widget, and labels for other widgets + */ +.et2_label { + color: #101050; +} +#msg,.message { + color: red; + font-style: italic; +} +input.et2_url { + margin-right: 6px; + padding-right: 8px; +} +a.et2_url { + background-position: center; + background-repeat: no-repeat; + + cursor: pointer; + margin: -4px; + padding: 2px; + padding-left: 16px; + margin-left: -10px; +} + +a.et2_url.email { + background-image: url(images/email.png); +} +a.et2_url.phone { + background-image: url(images/phone.png); +} +a.et2_url.url { + background-image: url(images/url.png); +} + +/** + * Button widget - text only, and icon + */ +.et2_button { + cursor: pointer; + text-align: center; + + font-size: 9pt; + + text-shadow: 1px 1px #E0E0E0; +} + +// in Nextmatch definiert +//.et2_button_text, input[type=button] { +// background-color: #E0E0E0; +// background-image: url(images/gradient01.png); +// background-position: center; +// background-repeat: repeat-x; +// +// margin: 5px; +// padding: 3px; +// +// border: 1px solid silver; +// color: #101010; +//} + + + +.et2_button_icon { + border: none; + background: transparent; + padding: 2px; +} +button.et2_button_text:hover, input[type=button]:hover { + color: #050505; + border: 1px solid gray; + background-color: #D0D0EE; +} +button.et2_button_text:active, input[type=button]:active { + background-image: url(images/gradient02.png); + background-color: #D0D0E0; +} +button.et2_button_text:focus, input[type=button]:focus { + border: 1px solid #2c3d6f; + color: #202d52; + outline: none; +} + +/** + * Drop down button + */ +.et2_dropdown button { + height: 3.0ex; + display: inline-block; + vertical-align: middle; + margin-right: -2px; + padding: 0px 1ex; +} +.et2_dropdown button > div { + vertical-align: middle; +} +.et2_dropdown button:last-child { + padding: 0px +} +.et2_dropdown + ul.ui-menu { + position: absolute; + z-index: 2; +} + +/** + * Color picker widget + */ +.et2_color { + padding: .5ex; + height: 2ex; + width: 2ex; + border: 1px solid silver; +} + +/** + * Text box + */ +.et2_textbox { + resize: none; +} +.et2_textbox_ro { + white-space: pre-wrap; +} + +.et2_bold { + font-weight: bold; +} + +.et2_italic { + font-style: italic; +} + +/** + * Multi-select widget + */ +.et2_selectbox .ui-widget-header { + padding: 0px 6px 0px 10px; + text-align: center; +} +.et2_selectbox .ui-widget-header ul { + float: left; + margin-left: -5px; + text-align: left; +} +.et2_selectbox .ui-widget-header li { + float: left; + padding-top: 0px +} +.et2_selectbox .ui-widget-header li>span.ui-icon { + float: left; + margin-top: -2px; +} +.et2_selectbox .ui-widget-header li>div.et2_link_entry { + /* Shrink search box to same size as header */ + margin-top: -2px; + margin-bottom: -2px; + margin-right: 1ex; +} +.et2_selectbox .ui-widget-header li>div.et2_link_entry input { + height: 14px; +} +.et2_selectbox .ui-multiselect-checkboxes { + overflow-y: scroll; + position: relative; + text-align: left; +} +.et2_selectbox .ui-multiselect-checkboxes li { + margin: 0px; + clear: both; +// padding-left: 26px; +// padding-right: 3px; + text-decoration: none; + list-style-image: none; + list-style-type: none; +// text-indent: -26px; +// max-width: 85%; + +// &:hover {background-color: @egw_color_2_e;} +} +.et2_selectbox .ui-multiselect-checkboxes ul { + margin: 0px auto; + padding-left: 0px; + clear:both; + text-decoration: none; + list-style-image: none; + list-style-type: none; +} +.et2_selectbox .ui-multiselect-checkboxes ul>label { + border-bottom: 1px solid black; +} + +.et2_selectbox .ui-multiselect-checkboxes label { + display: block; + border: 0px solid transparent; + padding: 0.1em 0.2em; + +// &:hover {background-color: @egw_color_2_e;} +} +.et2_selectbox input[type="checkbox"] { + margin: 3px; +} +.et2_selectbox .ui-multiselect-checkboxes img { + float: right; + height: 1.8em; +} + +.et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close { + visibility: hidden; + padding: 0px; +} +.et2_selectbox .ui-multiselect-checkboxes li:hover div.ui-icon-close { + visibility: visible; +} + +/* Read-only multi-select */ +ul.et2_selectbox { + margin: 0px; + padding: 0px; +} +.et2_selectbox li { + text-decoration: none; + list-style-image: none; + list-style-type: none; +} + +/** + * Select account dialog + */ + +/** + * Date / Time widgets + */ +span.et2_date { + min-width: 130px; +} +span.et2_date input.et2_date { + min-width: 21.5ex; + background-repeat: no-repeat; + background-position: top right; + background-size: contain; +} +span.et2_date input.et2_time { + min-width: 6ex; +} +span.et2_date span { + background-position: center; + background-repeat: no-repeat; + + color: #101010; + cursor: pointer; + padding-top: 3px; + padding-left: 22px; + text-align: center; + + font-size: 9pt; +} + +/** + * Dialog widget + * It uses jQueryUI, so this is just our little bits - icon on left + */ +.ui-dialog-content .dialog_icon { + margin-right: 2ex; + vertical-align: middle; +} +.ui-dialog-content { + vertical-align: middle; +} +/* These change button alignment, but it seems the standard is right-aligned for +action buttons, left aligned for "extra" controls +.ui-dialog .ui-dialog-buttonpane { + text-align: left; +} +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: none; +} +.ui-dialog .ui-dialog-buttonpane button { + float: none; +} +*/ + +/** + * Diff widget + */ +.diff thead,.author { + display: none; +} +.diff .ui-icon { + margin-top: -16px; + float: right; +} + +/** Display a loading icon **/ +.loading { + background-position: center; + background-repeat: no-repeat; + background-image: url('images/ajax-loader.gif'); +} + +/** + * File upload + */ +.et2_file .progress { + width: 300px; + max-height: 6em; + overflow: auto; + margin-left: 20px; +} + +.et2_file .progress span.progressBar { + height: 5px; + width: 150px; + max-width: 150px; + display: inline; +} + +/* Remove icon displayed when hovering */ +.et2_file .progress li div.remove { + display: none; + cursor: pointer; + margin: 0px; +} + +.et2_file .progress li:hover div.remove { + width: 16px; + height: 16px; + float: right; + display: block; + background-image: url("images/close.png"); + background-position: center; + background-repeat: no-repeat; +} + +.et2_file .progress p { + background-color: green; + height:5px; + margin: 0px; +} + +.et2_file .progress li { +} +/* Hide progress bar when completed */ +.et2_file .progress li.success > span.progressBar { + display: none; +} + + +/** + * Autocomplete - used in link widget + * Restricting result size + */ +.ui-autocomplete { + max-height: 20ex; + overflow-y: auto; + /* prevent horizontal scrollbar */ + overflow-x: hidden; +} + +/** + * Autocomplete in dialogs - fix so they go over/out of the dialog + */ +.ui-dialog * ul.ui-autocomplete { + position: fixed; +} + +/** + * Link wiget(s) + */ + +/* Link entry - x button*/ +div.et2_link_entry { + white-space: nowrap; +} +div.et2_link_entry:after { + display: inline-block; + content: "."; + height: 0; + visibility: hidden; + margin: -20px; +} +/* Special layout for inside nm grid */ +.et2_nextmatch div.et2_link_entry { + padding-right: 4px; +} +.et2_nextmatch .et2_link_entry:after { + margin: -12px; +} +div.et2_link_entry select { + width: 39%; +} +div.et2_link_entry input.ui-autocomplete-input { + width: 61%; + padding-bottom: 1px; +} +.et2_link_entry.no_app input.ui-autocomplete-input { + width: 100%; +} +.et2_link_entry.no_app select { + display: none; +} +.et2_link_entry .ui-icon-close { + display: inline-block; + background-color: inherit; + border: none; + position: relative; + top: 3px; + left: -18px; + cursor: pointer; + margin-top: -3px; +} + +/* Link to */ +.et2_link_to { + width: 350px; + overflow-x: visible; +} +.et2_link_to button { + display: inline; + float: right; + height: 5ex; +} +.et2_link_to span.status { + background-repeat: no-repeat; + background-position: 3px center; + width: 22px; + height: 22px; + display: block; + float: right; +} +.et2_link_to span.status.success { + background-image:url(images/tick.png); +} +.et2_link_to span.status.error { + background-image:url(images/error.png); +} +.et2_link_to .progress { + max-height: 12em; + overflow-y: scroll; +} +.et2_link_to .progress > .success input { + width: 100%; + margin-right: -20px; /* Leave room for remove icon */ +} +.et2_link_to .progress li { + list-style: none; + padding-bottom: 1px; + padding-top: 0px; +} +.et2_link_to .progress li.success span.ui-icon-comment { + display: none; + float: right; + cursor: pointer; + margin-right: 5px; +} +.et2_link_to .progress li:hover.success span.ui-icon-comment { + display: inline; +} +.et2_link_to .et2_button_icon { + float: left; + width: 22px; +} + +.et2_link { + cursor: pointer; + color: #003075; + text-decoration: none; +} +.et2_link:hover { + text-decoration: underline; +} +ul.et2_link_string { + list-style-type: none; + display: inline; + padding: 0px; +} +.et2_link_string li { + display: inline; +} +.et2_link_string li:not(:last-child):after { + content: ', '; +} +.et2_link_list { + border-collapse:collapse; +} +.et2_link_list tr { + cursor: pointer; +} +.et2_link_list td.remark { + font-style: italic; +} +.et2_link_list td div.delete { + visibility: hidden; + background-image: url("images/close.png"); + background-position: center; + background-repeat: no-repeat; + padding: 0px; +} +.et2_link_list .icon img, .et2_link_list .icon { + width: 16px; + height: 16px; + display: inline-block; +} +.et2_link_list tr:hover div.delete { + visibility: visible; +} + +.egw_tooltip +{ + position: fixed; + border: 1px solid #897f51; + padding: 3px; + background-color: #FDF9DB; + max-width: 300px; + color: black; +} + +/** + * Tabs widget + */ + +.et2_tabflag { + display: inline-block; + margin: 1em 3px -1px 0; + padding: 4px; + cursor: pointer; + .border-radius(3px,0,0,3px); +// .bordered (@egw_color_2_c, @egw_color_2_c, #bfbfbf, @egw_color_2_c); + + .background-color-25-gray; +// .border_radius_button_normal; +// .border_normal; + -webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5); + + + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + + &:hover { + .color-5-gray; +// border: 1px solid gray; + .background-color-25-gray; + } + + &:active{ + .background-color-0-gray; +// border-width: 3px 1px 0px 0; +// border-style: solid; +// border-spacing: 0px; +// border-color: @active_button_border_bottom; + .color-0-gray; + } + +} + + +.et2_tabflag.active { +// .background-color-50-gray !important; +// border-width: 8px 7px 0px 6px; +// border-style: solid; + border-spacing: 0px; +// border-color: @active_button_border_bottom; +// .color-0-gray; + background-color: white; + .color-100-gray; + border-width: 1px 1px 0px 1px; + border-style: solid; + .border-color-25-gray; + &:hover { + .color-100-gray; +// border: 1px solid gray; + background-color: white; + } +} + +.et2_tabs { + border-width: 0px 1px 1px 1px; + border-style: solid; + .border-color-25-gray; + padding: 5px; + overflow-y: auto; + .background-color-dialog-container; + .border_radius_button_normal; +} + + +.et2_tabheader { + .background-color-25-gray; + background-position: bottom; + background-repeat: repeat-x; + padding-left: 0em; + border-bottom: 1px solid #bfbfbf; + margin: 0 2px; + :first-child { + margin-left: 0.3em; + } + + +} + +/** + * VFS widget(s) + */ +ul.et2_vfs { + padding-left: 0px; + margin: 1px; +} +.et2_vfs li.vfsFilename { + display: inline; +} +.et2_vfs li.vfsFilename:not(:last-child):after { + padding: 0.25ex; +} + +/** +* Validation +*/ +[required] { + background-color: @egw_color_1_a; + input{ +// border-color: #FFFFD0; + } +} +.invalid { + border: 1px solid #a6261d; + background-color: #faecec; +} +.error { + -moz-border-radius: 0 4px 4px 0; + -moz-box-shadow: 0 0 6px #DDDDDD; + background-color: #FFFE36; + border: 1px solid #E1E16D; + color: #000000; + display: none; + font-size: 11px; + height: 15px; + padding: 4px 10px; +} +.error p { + margin: 0; +} + +/** + * hrule widget + */ + +hr { + border-style: none; + border-top: 1px solid silver; + height: 1px; + margin: 10px 0px 10px 0px; +} + +/** + * grid widget + */ + +table.et2_grid { + border-collapse: collapse; +} + +.et2_grid td { +/* border: 1px dashed silver;*/ +} +/** + * Sortable grid + */ +table.et2_grid tbody.ui-sortable > tr:not(.th) { + cursor: ns-resize; +} + +/** + * Create some spacing for widgets inside labels + */ +label input, label span, label div, label select, label textarea { + margin-left: 1ex; + margin-right: 1ex; +} + +/** + * Message styles + */ + +/* Style used for a generic message (such as success messages or validation errors) */ +div.message { + display: block; + border: 1px solid gray; + padding: 3px 3px 3px 22px; + margin: 5px 0px 5px 0px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background-repeat: no-repeat; + background-position: 3px center; + clear: left; + max-width: 500px; +} + +div.message.floating { + display: inline-block; + margin: 0px 5px 0px 5px; +} + +.message.validation_error { + color: #a93030; + font-style: italic; + background-color: #f3d4d0; + border-color: #a93030; + background-image:url(images/error.png); + background-repeat: no-repeat; + padding-left: 20px; +} + +.message.success { + font-style: normal; + background-color: #e5f3d0; + color: #98a930; + border-color: #9ea930; + background-image:url(images/tick.png); + background-repeat: no-repeat; + padding-left: 20px; +} + +.message.hint { + font-style: normal; + background-color: #d9e2ed; + border-color: #56729a; + color: #56729a; + background-image:url(images/hint.png); + background-repeat: no-repeat; + padding-left: 20px; +} + +/** + * Nextmatch widget + */ + +.et2_nextmatch { +/* background-color: silver;*/ +} + +/* Left & right headers*/ +.et2_nextmatch > div > .header { + margin-top: -20px; + border: none; +} + +.nextmatch_header .header_count { + padding: 0px 20px; + margin: 6px 20px 0px; + border: 1px solid #E0E0E0; + float:right; + font-size: 150%; + text-align: center +} +.nextmatch_header > .filters { + padding-left: 5px; +} +.nextmatch_header > .filters select { + margin-right: 2ex; +} +.nextmatch_header .et2_button_icon { + vertical-align: middle; +} +.nextmatch_header > .filters .et2_button_icon { + margin-top: 8px; +} +.et2_nextmatch .nextmatch_header { + border: none; + background-image: none; +// background-color: transparent; + margin-bottom: 3px; +// margin-right: 3px; +} +.et2_nextmatch .nextmatch_header > .filters { + border: 1px solid silver; + background-color: #E0E0E0; + background-image: url(../../../phpgwapi/templates/default/images/egw_action/header_overlay.png); + background-position: center; + background-repeat: repeat-x; + margin-bottom: 3px; +} +/* Favorites */ +.nextmatch_header div[id$=favorite_wrapper] { + margin-top: 6px; + vertical-align: middle; +} +#nm_favorites_popup_filters .filter_id, #nm_favorites_popup_filters .filter_value { + width: 45%; + display: inline-block; +} +.nextmatch_header ul.favorites { + min-width: 20ex; +} +.nextmatch_header .favorites li .ui-menu .ui-menu-item a { + text-indent: -22px; + margin-left: 21px; +} +.nextmatch_header .favorites.ui-menu li.ui-menu-item a.ui-state-hover { + margin-left: 20px; +} + + +// Favoriten + +.favorites { + + li { + + &:hover { + div.ui-icon { + display:inline-block; + } + } + + span.ui-state-active { + border: none; + } + + } + + input {margin-right: 1ex;} + + img { + margin-right: 1ex; height: 16px; width: 16px; + } + + div.ui-icon-trash { + position: relative; + float:right; + display:none; + } +// .sideboxstar { +// height: 9px; +// display: inline-block; +// padding: 0px 4px; +// margin: 0px 5px; +// +// /* TODO: This is template specific */ +// background-image: url(../../../phpgwapi/templates/idots/images/orange-ball.png); +// } + +} // Favoriten + + +// sidebox-favorites + +.sidebox-favorites { + ul.favorites { + width: 99%; + padding: 0px; + border: none; + background: white; + + li { + + padding-left: 0 !important; + margin-left: -10px; + line-height: 1.5em; + + + img { + margin-right: 1ex; + height: 13px; + padding: 3px; + .Complete_Button_Icon_normal; + + + &:hover {height: 16px; .Complete_Button_Icon_hover ;} + } + + img.sideboxstar { + margin-right: 1ex; + height: 16px; + .Complete_Button_Icon_normal; + + &:hover {height: 16px; .Complete_Button_Icon_hover ;} + + } + + + + } + + } + + .ui-state-hover, + .ui-widget-content .ui-state-hover, + .ui-widget-header .ui-state-hover, + .ui-state-focus, + .ui-widget-content .ui-state-focus, + .ui-widget-header .ui-state-focus { + .bordered(1px, 1px, 1px,1px); + .border-color-10-gray; + background: transparent !important; + font-weight: bold; + .color-100-gray; + } + + .ui-menu-icons { + .ui-menu-item { + + a { + position: relative; + padding-left: 1em; + padding: 0.5em 1em 0.5em 0; + + &:hover {.Complete_Button_Icon_hover ;} + + } + } + } + + ui-menu { + + .ui-menu-item { + + a { + line-height: inherit; + padding: 2px 0px; + padding-left: 0 !important; + + &:hover {text-decoration: underline; .Complete_Button_Icon_hover ;} + + img { height: 16px; width: 16px;} + } + + } + } + div.ui-icon-heart{ + position: relative; + float: left; + display:inline-block; + margin: -3px 1px 0px 1px; + } + div.ui-icon-trash{ + margin-top: -5px; +// margin-right: 2px; + + +// background: transparent; + + background-image:url(images/delete.png); + background-size: 16px 16px; + background-position: 0 0; + + background-color: #e6e6e6; + -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5); + -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.5); + box-shadow: 1px 1px 1px 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; + margin-right: 0.5em; + padding: 0px 2px 0 2px; + width: 10px; + + + } + +} // sidebox-favorites + + + + + + +.nextmatch_sortheader { + color: #003075; + cursor: pointer; + padding-right: 10px; + margin-right: 10px; + background-repeat: no-repeat; + background-position: right center; +} + +.nextmatch_sortheader:hover { + text-decoration: underline; +} + +.nextmatch_sortheader.asc { + font-weight: bold; + background-image: url(images/up.png); +} + +.nextmatch_sortheader.desc { + font-weight: bold; + background-image: url(images/down.png); +} + +.nextmatch_resize_helper { + border-right: 1px dotted gray; + min-height: 100%; + background-color: gray; + opacity: 0.5; +} + +/** + * Grid / nextmatch Hierarchy + */ +/* Make sure arrow & cell content don't overlap */ +.egwGridView_grid span.arrow { + margin: 6px -12px 4px 4px; + float: left; + position:relative; +} +.egwGridView_grid span.arrow ~ div.innerContainer { + display: inline-block; +} +/* Indent the sub-grid */ +.egwGridView_grid .egwGridView_grid { + margin-left: 10px; + border-left: 1px solid silver; +} +/** + * This class' margin-right is used to line up columns at each indent level + * Classes level_# are created programmatically with margin-right * depth + * Margin-right = -(indent + border) + */ +.indentation { margin-right:-11px; } + +/* End of hierarchy */ + +/* Mangled link-to widget inside a nextmatch - used for DnD uploads */ +.et2_nextmatch * .et2_link_to { + position: fixed; + left: 0px; + background-color: white; + border: 1px gray; + padding: 5px; +} + +.et2_clickable { + cursor: pointer; +} + +/** + * et2_portlet + */ +div.et2_portlet { + min-width: 100px; +} +.et2_portlet .ui-widget-header { + margin: 0em; + padding-bottom: 4px; + padding-left: 0.2em; +} +.et2_portlet .ui-widget-header span.ui-icon { + display: inline-block; + float: right; +} +.et2_portlet .ui-widget-header span.ui-icon.ui-icon-gear { + display: inline-block; + float: left; +} + +/** + * et2_progress + */ +div.et2_progress { + display: inline-block; + border: 1px solid black; + background-color: white; + width: 30px; + padding: 1px; + margin: 2px; + text-align: left; +} +div.et2_progress > div { + background-color: #D00000; + height: 5px; +} + +.egwResizeOverlay { + position: fixed; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + z-index: 99999; + cursor: ew-resize; +} + +.egwResizeHelper { + position: absolute; + display: block; + z-index: 99998; + opacity: 0.5; + background-color: #829cbc; + cursor: ew-resize; +} + +/** + * Indent grid sublevels + */ + +.et2_nextmatch .subentry.level_1 div.et2_vbox { + margin-left: 2.5em; +} + +.et2_nextmatch .subentry.level_2 div.et2_vbox { + margin-left: 5em; +} + +.et2_nextmatch .subentry.level_3 div.et2_vbox { + margin-left: 7.5em; +} + +/** + * itempicker widget + */ +.et2_itempicker { + display: block; + position: relative; + margin: 0; + padding: 0; + width: 100%; + height: 256px; +} +.et2_itempicker_left { + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 50px; + overflow: hidden; +} + +.et2_itempicker_right { + display: block; + position: absolute; + margin: 0; + top: 0; + left: 49px; + right: 0; + bottom: 0; + border: 1px solid #b6b6b6; + background-color: #f9f9f9; +} + +.et2_itempicker_right_container { + display: block; + position: relative; + width: 100%; + height: 100%; +} + +.et2_itempicker_app_select { + list-style-type: none; + padding: 0; +} + +.et2_itempicker_app_select li { + display: block; + margin: 0; + padding: 6px; +} + +.et2_itempicker_app_select li.selected { + border: 1px solid #b6b6b6; + border-right: 1px solid transparent; + background-color: #f9f9f9; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} + +.et2_itempicker_search { + display: inline-block; + margin: 1em; + margin-bottom: 0; + margin-right: 0; + width: 67%; + padding: 0.2em; +} + +.et2_itempicker_clear { + position: relative; + top: 3px; + left: -20px; +} + +.et2_itempicker_button_action { + position: absolute; + margin: 1em; + top: 0; + right: 0; +} + +.et2_itempicker_itemlist { + display: block; + border: 1px solid #b6b6b6; + margin: 1em; + margin-bottom: 0; + padding: 0; + height: 67%; + background-color: #ffffff; + overflow: auto; +} + +.et2_itempicker_itemlist ul { + margin: 0; + padding: 0; + list-style-type: none; +} + +.et2_itempicker_itemlist li { + display: block; + margin: 0; + padding: 4px; + color: #284d8a; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.et2_itempicker_itemlist li.row_on { + background-color: #f2f9fe; +} + +.et2_itempicker_itemlist li.selected { + color: #ffffff; + background-color: #3875d7; +} + +/** + * et2_dialog: EGroupware left aligns all buttons, but [Delete] + */ +div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: left; +} +div.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { + float: left; + margin-right: 1em; +} +.et2_prompt #message { + white-space: pre-wrap; + padding-bottom: 10px; +} +.et2_prompt #value { + width: 100%; +} + +/** +* et2_taglist +*/ +.ms-ctn,.ms-res-ctn { + /* It doesn't really work smaller than this */ + min-width: 150px; +} +.ms-ctn .loading { + position: relative; + margin: 0px auto -16px auto; + top: 5px; +} +.ms-res-ctn { + overflow-x: hidden; +} \ No newline at end of file diff --git a/filemanager/templates/default/app.css b/filemanager/templates/default/app.css index bae4fddd74..7efde0834a 100644 --- a/filemanager/templates/default/app.css +++ b/filemanager/templates/default/app.css @@ -1,25 +1,76 @@ -/** - * CSS for new eTemplate filemanager UI - */ - -.address input { font-size: 140%; font-weight: bold; } -.mimeHuge img { width: 64px; height: 64px; } -.fileName input { font-weight: bold; width: 100%; } -.comment textarea { width: 100%; height: 35px; } -.previewImage img { max-width: 430px; max-height: 275px; border: 1px solid black; } -.previewText div { } -.pathSelection { font-weight: bold; } -.pathSelection a { font-weight: bold; font-size: 120%; } -.pathSelectionContainer { width: 640px; overflow: auto; } - -/** - * Select file dialog - */ -.selectPath { font-weight: bold; width: 98% } -.selectPathContainer { width: 470px; overflow: auto; } -.selectName input { width: 100%; } -.selectMime select { width: 100%; } -/*.selectIcon img { height: 16px; }*/ -.displayNone input, input.displayNone { display: none; } -.selectFiles td div { border-style: groove; } -.selectFiles div { max-height: 400px; overflow:auto;} +/** + * EGroupware admin: CSS with less preprocessor + * + * Please do NOT change app.css directly, instead change app.less and compile it! + * + * @author Stefan Reinhard + * @package filemanager + * @version $Id$ + */ +div.et2_file { + color: red; +} +/** + * seems not to be merged from app.css + */ +.address input { + font-size: 140%; + font-weight: bold; +} +.mimeHuge img { + width: 64px; + height: 64px; +} +.fileName input { + font-weight: bold; + width: 100%; +} +.comment textarea { + width: 100%; + height: 35px; +} +.previewImage img { + max-width: 430px; + max-height: 275px; + border: 1px solid black; +} +.pathSelection { + font-weight: bold; +} +.pathSelection a { + font-weight: bold; + font-size: 120%; +} +.pathSelectionContainer { + width: 640px; + overflow: auto; +} +/** + * Select file dialog + */ +.selectPath { + font-weight: bold; + width: 98%; +} +.selectPathContainer { + width: 470px; + overflow: auto; +} +.selectName input { + width: 100%; +} +.selectMime select { + width: 100%; +} +/*.selectIcon img { height: 16px; }*/ +.displayNone input, +input.displayNone { + display: none; +} +.selectFiles td div { + border-style: groove; +} +.selectFiles div { + max-height: 400px; + overflow: auto; +} diff --git a/filemanager/templates/default/app.less b/filemanager/templates/default/app.less new file mode 100644 index 0000000000..ccf4447fd7 --- /dev/null +++ b/filemanager/templates/default/app.less @@ -0,0 +1,60 @@ +/** + * EGroupware admin: CSS with less preprocessor + * + * Please do NOT change app.css directly, instead change app.less and compile it! + * + * @author Stefan Reinhard + * @package filemanager + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; + +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +div.et2_file {color: red;} + +// iframe +div#filemanager-index_nm{ + + // Rahmen + padding + .box_shadow_dialog; + + .nextmatch_header{ + + div.ui-helper-clearfix, + div.ui-helper-reset{} + + span.header_count ui-corner-all{} + + div.filters{} + + table{} + } //nextmatch_header + +} // iframe + +/** + * seems not to be merged from app.css + */ +.address input { font-size: 140%; font-weight: bold; } +.mimeHuge img { width: 64px; height: 64px; } +.fileName input { font-weight: bold; width: 100%; } +.comment textarea { width: 100%; height: 35px; } +.previewImage img { max-width: 430px; max-height: 275px; border: 1px solid black; } +.previewText div { } +.pathSelection { font-weight: bold; } +.pathSelection a { font-weight: bold; font-size: 120%; } +.pathSelectionContainer { width: 640px; overflow: auto; } + +/** + * Select file dialog + */ +.selectPath { font-weight: bold; width: 98% } +.selectPathContainer { width: 470px; overflow: auto; } +.selectName input { width: 100%; } +.selectMime select { width: 100%; } +/*.selectIcon img { height: 16px; }*/ +.displayNone input, input.displayNone { display: none; } +.selectFiles td div { border-style: groove; } +.selectFiles div { max-height: 400px; overflow:auto;} diff --git a/infolog/templates/default/app.css b/infolog/templates/default/app.css index 66fcb6be77..5377c02f73 100644 --- a/infolog/templates/default/app.css +++ b/infolog/templates/default/app.css @@ -1,25 +1,125 @@ -/* $Id$ */ -.infolog_headertext { color: black; font-size: 120%; } -.infolog_lpadding5 { padding-left: 5px; } -.low,.low_done,.normal,.normal_done,.high,.high_done,.urgent,.urgent_done { font-weight: bold; } -.low,.low_done { color:#606060; } -.normal,.normal_done { color:black } -.high { color:#cc0000; } -.high_done { color:#800000; } -.urgent { color:#ff00ff; } -.urgent_done { color:#800080; } -.infolog_overdue { color:#cc0000; font-weight:bold; } -.private { font-style:italic; } -.infolog_planned { font-style:italic; } -table.infolog_fullWidth { width: 100%; } -td.infolog_infoId:before { content:"#" } -.infolog_fixedHeight { height: 12px; } -.noWrap { white-space: nowrap; } -.infolog_user_filter select { width: 100px; } -.inputFullWidth input { width: 100%; } -.infolog_image16 img { height: 16px; } -tr.infolog_rowHasParent > td:first-child { - background-image: url(../../../phpgwapi/templates/default/images/egw_action/arrow_up.png); - background-repeat: no-repeat; - background-position: 6px -2px; +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package infolog + * @version $Id$ + */ +span#favorite_sidebox_infolog .sidebox-favorites favorites li a div.ui-icon-heart { + background-image: none; +} +#infolog-index { + height: auto !important; +} +#infolog-index table.et2_grid { + border-top: 0px; +} +#infolog-index #infolog-index_nm { + min-height: 900px; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right { + padding: 0 0em; + margin-right: 0em; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right div.et2_box_widget, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right div.et2_box_widget { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + height: 35px; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right div.et2_box_widget:before, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right div.et2_box_widget:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right div.et2_box_widget:before, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right div.et2_box_widget:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right div.et2_box_widget .infolog_headertext, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right div.et2_box_widget .infolog_headertext { + color: #FFF !important; +} +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-clearfix div.et2_hbox_right div.et2_box_widget:hover, +#infolog-index #infolog-index_nm .nextmatch_header div.ui-helper-reset div.et2_hbox_right div.et2_box_widget:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +} +#infolog-index #infolog-index_nm .nextmatch_header div#infolog-index_favorite_wrapper ul#infolog-index_favorite_menu { + border-color: #bfbfbf; + background-color: #ffffff; + color: #000000; +} +#infolog-index #infolog-index_nm .nextmatch_header div#infolog-index_favorite_wrapper ul#infolog-index_favorite_menu li a { + height: 40px; + border: none; +} +#infolog-index #infolog-index_nm .nextmatch_header div#infolog-index_favorite_wrapper ul#infolog-index_favorite_menu li a img { + height: 16px; + width: 16px; +} +#infolog-index #infolog-index_nm .nextmatch_header div#infolog-index_favorite_wrapper ul#infolog-index_favorite_menu li a:hover { + background: none; + text-indent: -22px; + margin-left: 21px; + height: 40px; +} +#infolog-index #infolog-index_nm .nextmatch_header div.filters { + padding: 0 0 0 1em; + background-color: #f0f0f0; + margin-bottom: 3px; + margin: 0em; + border-width: 0 0 1px 0; + border-color: #d9d9d9; + background-image: none; +} +#infolog-index #infolog-index_nm .nextmatch_header div.filters select#infolog-index_cat_id { + margin-left: 1em; +} +#infolog-index #infolog-index_nm .frame { + min-height: 500px; + height: 500px; +} +#infolog-index #infolog-index_nm .egwGridView_scrollarea { + height: auto; +} +#infolog-index #infolog-index_nm .egwGridView_scrollarea table.egwGridView_grid img { + height: 16px; + width: 16px; +} +#infolog-edit { + width: 800px; + padding: 5px; +} +#infolog-edit input { + max-width: 300px; +} +#infolog-edit .et2_tabheader { + background: transparent; +} +#infolog-edit table.egwGridView_outer { + max-width: 100%; +} +#infolog-edit #infolog-edit_history { + max-width: 785px; } diff --git a/infolog/templates/default/app.less b/infolog/templates/default/app.less new file mode 100644 index 0000000000..39f36494da --- /dev/null +++ b/infolog/templates/default/app.less @@ -0,0 +1,241 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package infolog + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_content_elements.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +//******************************************** +// Seitenleiste links + +// Favoriten + +span#favorite_sidebox_infolog{ + + .sidebox-favorites { + + favorites{ + + li { + a div.ui-icon-heart{ + background-image: none; + + } + } + + } + + } + +} + +// ############################################################################# +// iframe + +// Rahmen + padding + +.egw_fw_content_browser_div{ +// .box_shadow_dialog; +} + +#infolog-index { + + height: auto !important; + + table.et2_grid {border-top: 0px;} + + + + #infolog-index_nm{ + min-height: 900px; + + // Header + .nextmatch_header{ + + + + div.ui-helper-clearfix, + div.ui-helper-reset{ + + // rechte Box mit add + + div.et2_hbox_right{ + padding: 0 0em; + margin-right: 0em; + + div.et2_box_widget{ + .Complete_Button_add; +// .Complete_Button_text; + .border_radius_button_lefttop; + .box_shadow_standard_light; + height: 35px; + .infolog_headertext{color: #FFF !important;} + + &:hover {.box_shadow_standard_light_hover;} + + + } + } + + } + + // Anzahl + span.header_count ui-corner-all{} + + + //Favoriten + + div#infolog-index_favorite_wrapper{ + + + // Liste + ul#infolog-index_favorite_menu{ + + .border-color-25-gray; + .background-color-0-gray; + .color-100-gray; + li{ + a { + + height: 40px; + border: none; + + img {height: 16px; width: 16px;} + } + + a:hover { + background: none; + text-indent: -22px; + margin-left: 21px; + height: 40px; + + } + } + li#blank {} + li#add { } + + } + + } //Favoriten + + + div.filters{ + .Rectangle_filters; + + + // 1 Filter + select#infolog-index_cat_id {margin-left: 1em;} + + // 2 Filter + select#infolog-index_filter {} + + // 3 Filter + select#infolog-index_filter2 {} + + // Suchfeld + input#infolog-index_search {} + + + // Suchen Button + button.et2_button {} + } + + + table{} + } //nextmatch_header + + + // ################################## + // Listendarstellung + .egwGridView_outer {} + + + .frame {min-height: 500px; height: 500px;} + + .egwGridView_scrollarea{ + height: auto; +// overflow: auto; + + table.egwGridView_grid { + + img{height: 16px; width: 16px;} + + } + + } + + + } // #infolog-index_nm + +} // iframe + + + + + + + + + +// ############################################################################# +// Dialog infolog + +// Input beschränken + +#infolog-edit{ + width: 800px; + padding: 5px; + input{ max-width: 300px; } + + .et2_tabheader{ + background: transparent; + } + table.egwGridView_outer{ + max-width: 100%; + } + // Tab History + + #infolog-edit_history{ + max-width: 785px; + } + +} + +//TYP + +select#infolog-edit_info_type {} +// Nummer hinter Typ + +span#infolog-edit_info_number{} + +//Kontakt + +label.et2_label {} + +// Eingabe via Select + Input + +div.et2_box_widget {} + +// + +input.infolog-edit_info_custom_from {} + + +// Phone + Email + +td.inputFullWidth{ + + input#infolog-edit_info_addr{} + +} + + diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css index 2151f4e791..29ec8a5ea1 100644 --- a/mail/templates/default/app.css +++ b/mail/templates/default/app.css @@ -1,28 +1,455 @@ -textarea -{ - font-family: monospace, sans-serif; - font-size: 110%; +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package mail + * @version $Id$ + */ +div#mail-index table.egwGridView_grid { + width: 99%; +} +div#mail-index div#mail-index_mailSplitter { + margin: 0 1% 0 0 !important; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_nm div.nextmatch_header div.filters { + padding: 0 0 0 1em; + background-color: #f0f0f0; + margin-bottom: 3px; + margin: 0em; + border-width: 0 0 1px 0; + border-color: #d9d9d9; + background-image: none; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_nm tr.mail td img { + height: 16px; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_mailPreview { + padding: 3px; + margin: 5px 0; + background-color: #bfbfbf; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom { + width: 50%; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_mailPreview div#mail-index_mailPreviewHeadersTo { + width: 50%; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_mailPreview div#mail-index_mailPreviewHeadersDate { + width: 50%; +} +div#mail-index div#mail-index_mailSplitter div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject { + width: 100%; +} +.egw_fw_ui_category_content #mail-index_buttonmailcreate { + margin-left: -14px; +} +.egw_fw_ui_category_content span#mail-tree_target { + max-height: 50%; +} +.egw_fw_ui_category_content .dtree { + font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; + font-size: 87.5%; +} +/* ################################################################################## + * E-Mail Dialog "Compose" + * + * ################################################################################## + */ +#mail-compose { + width: 870px; + padding: 5px; +} +#mail-compose .mail-compose_toolbar img { + width: 22px; +} +#mail-compose .mail-compose_toolbar .mail-compose_button { + margin-right: 15px; + padding: 0 3px 0 0; +} +#mail-compose .mail-compose_toolbar img#mail-compose_button[saveAsDraft], +#mail-compose .mail-compose_toolbar .et2_button_icon { + vertical-align: middle; + padding: 2px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +#mail-compose .mail-compose_toolbar img#mail-compose_button[saveAsDraft]:hover, +#mail-compose .mail-compose_toolbar .et2_button_icon:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + background-color: #d9d9d9; +} +#mail-compose .mail-compose_toolbar img#mail-compose_button[saveAsDraft]:focus, +#mail-compose .mail-compose_toolbar .et2_button_icon:focus { + -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: #d9d9d9; +} +#mail-compose .mail-compose_toolbar .et2_file, +#mail-compose .mail-compose_toolbar .mail-compose_fileselector { + vertical-align: middle; +} +#mail-compose .mail-compose_toolbar .et2_file #mail-compose_uploadForCompose, +#mail-compose .mail-compose_toolbar .mail-compose_fileselector #mail-compose_uploadForCompose { + font-size: 0.7em; + border: 1px solid rgba(0, 0, 0, 0.15); + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + color: #000000; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + width: auto; + height: 32px; + background-image: url(images/attach.png) !important; + background-color: #fafafa; + height: 20px; + margin-left: 5px; +} +#mail-compose .mail-compose_toolbar .et2_file #mail-compose_uploadForCompose:hover, +#mail-compose .mail-compose_toolbar .mail-compose_fileselector #mail-compose_uploadForCompose:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + background-color: #d9d9d9; +} +#mail-compose .mail-compose_toolbar .et2_file #mail-compose_uploadForCompose:focus, +#mail-compose .mail-compose_toolbar .mail-compose_fileselector #mail-compose_uploadForCompose:focus { + -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: #d9d9d9; +} +#mail-compose .mail-compose_toolbar .et2_file div.progress, +#mail-compose .mail-compose_toolbar .mail-compose_fileselector div.progress { + width: 247px; +} +#mail-compose .mail-compose_toolbar span.et2_label { + font-size: 0.7em; +} +#mail-compose .mail-compose_toolbar .mail-compose_infolog { + vertical-align: middle; + height: 20px; + padding: 3px 2px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; + margin-right: 3px; +} +#mail-compose .mail-compose_toolbar .mail-compose_infolog .et2_button_icon { + border: none; + box-shadow: none; + border-radius: 0px; + background-color: transparent; +} +#mail-compose .mail-compose_toolbar .mail-compose_tracker { + vertical-align: middle; + height: 20px; + padding: 3px 2px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; + margin-right: 3px; +} +#mail-compose .mail-compose_toolbar .mail-compose_tracker span.et2_label { + font-size: 0.7em; + height: 20px; +} +#mail-compose .mail-compose_toolbar .mail-compose_tracker .et2_button_icon { + border: none; + box-shadow: none; + border-radius: 0px; + background-color: transparent; +} +#mail-compose .mail-compose_toolbar .mail-compose_notification { + vertical-align: middle; + height: 20px; + padding: 3px 2px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; + margin-right: 3px; +} +#mail-compose .mail-compose_toolbar .mail-compose_priority { + vertical-align: middle; + height: 20px; + padding: 3px 2px; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; + margin-right: 3px; +} +#mail-compose .mail-compose_toolbar .mail-compose_priority span.et2_label { + margin-right: 3px; +} +#mail-compose .mail-compose_toolbar .mail-compose_priority select#mail-compose_priority { + box-shadow: none; + font-size: 0.8em; + border: none; +} +#mail-compose .mailComposeHeaders, +#mail-compose .mailComposeHeadersSection { + margin: 2px 0; + width: 98%; +} +#mail-compose .mailComposeHeaders span, +#mail-compose .mailComposeHeadersSection span { + width: 8em; + font-size: 0.8em; +} +#mail-compose .mailComposeHeaders div, +#mail-compose .mailComposeHeadersSection div { + max-width: 770px; +} +#mail-compose .mailComposeHeaders span.ui-state-error, +#mail-compose .mailComposeHeadersSection span.ui-state-error { + color: #043a6b; +} +#mail-compose .mailComposeHeaders div.ms-res-item-active, +#mail-compose .mailComposeHeadersSection div.ms-res-item-active { + background: #0c5da5; +} +#mail-compose .mailComposeHeaders div.ms-res-item-active span, +#mail-compose .mailComposeHeadersSection div.ms-res-item-active span { + color: #FFFFFF; +} +#mail-compose .mailComposeHeaders input#mail-compose_subject, +#mail-compose .mailComposeHeadersSection input#mail-compose_subject { + max-width: 750px; +} +#mail-compose fieldset.mailSignature { + font-size: 0.8em; +} +#mail-compose fieldset.mailSignature span { + margin-left: 8px; +} +/* ################################################################################## + * E-Mail Dialog "Ansehen" + * + * ################################################################################## + */ +#mail-display { + width: 870px; + padding: 5px; +} +#mail-display .mailDisplayHeaderSection { + top: 0; + position: relative; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar { + background-color: #679fd2; + padding: 5px 3px; + height: 25px; + display: -webkit-box; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar button { + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; + height: 20px; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar button:hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + background-color: #d9d9d9; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar button:focus { + -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: #d9d9d9; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_forward_wrapper li a img { + width: 16px; + margin-right: 3px; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_save_wrapper button#mail-display_save { + background-image: url('../images/speichern.png'); + background-position: left center; + background-repeat: no-repeat; + background-size: 16px 16px; + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_save_wrapper button#mail-display_save:hover img { + display: none; + background-image: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_save_wrapper button#mail-display_save:focus { + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_save_wrapper li a img { + width: 16px; + margin-right: 3px; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_view_wrapper button#mail-display_view { + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_view_wrapper button#mail-display_view:hover img { + display: none; + background-image: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_view_wrapper button#mail-display_view:focus { + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_view_wrapper li a img { + width: 16px; + margin-right: 3px; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_mark_wrapper button#mail-display_mark { + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_mark_wrapper button#mail-display_mark:hover img { + display: none; + background-image: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_mark_wrapper button#mail-display_mark:focus { + box-shadow: none; +} +#mail-display .mailDisplayHeaderSection #mail-display_toolbar #mail-display_mark_wrapper li a img { + width: 16px; + margin-right: 3px; +} +#mail-display .mailDisplayAttachments { + background-color: #f0f0f0; + max-height: 10%; + position: fixed; + bottom: 26px; + border: 0px solid #560ead; + border-bottom: 0px; + opacity: 1; + -moz-opacity: 1; +} +#mail-display .mailDisplayAttachments img { + width: 16px; +} +/* ################################################################################## + * E-Mail + * + * ################################################################################## + */ +/* felamimail uses the styledefinitions below to format navButton/navSeparator */ +tr.navbarBackground { + background-color: #dddddd; +} +div.navButton { + background-color: #dddddd; + float: left; + padding: 2px; + margin: 2px; + border: solid #dddddd 1px; +} +div.navButton:hover, +div.navButtonHover { + background-color: #eeeeee; + float: left; + padding: 2px; + margin: 2px; + border: solid white 1px; + border-right: solid black 1px; + border-bottom: solid black 1px; + position: relative; +} +div.navButton:active, +div.navButtonActive { + background-color: #dddddd; + float: left; + padding: 2px; + margin: 2px; + border: solid white 1px; + border-left: solid black 1px; + border-top: solid black 1px; + position: relative; +} +div.navSeparator { + background-color: #dddddd; + float: left; + padding: 0px; + margin: 2px; + border: solid silver 1px; + height: 24px; + position: relative; +} +/* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/ +.calendar .combo { + z-index: 1 !important; +} +textarea { + font-family: monospace, sans-serif; + font-size: 110%; +} +.defaultProfile { + color: #000000; + font-weight: bold !important; +} +.quoted1 { + color: #660066; +} +.quoted2 { + color: #007777; +} +.quoted3 { + color: #990000; +} +.quoted4 { + color: #000099; +} +.quoted5 { + color: #bb6600; } - -.defaultProfile { color:#000000; font-weight:bold !important; } - - -.quoted1 { color:#660066; } -.quoted2 { color:#007777; } -.quoted3 { color:#990000; } -.quoted4 { color:#000099; } -.quoted5 { color:#bb6600; } - tr.mail div { - cursor: default; - white-space: nowrap; + cursor: default; + white-space: normal; + text-overflow: ellipsis; +} +tr.mail div span { + text-overflow: ellipsis; + white-space: normal; } - tr.mail a { - cursor: pointer; - white-space: nowrap; + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; } - tr.recent div, tr.recent span, tr.recent time, @@ -31,469 +458,443 @@ tr.unseen div, tr.unseen span, tr.unseen time, tr.unseen a { - color: #003075; - font-weight: bold; + color: #003075; + font-weight: bold; } - tr.labelone div, tr.labelone span, tr.labelone time, tr.labelone a { - color: #ff0080 !important; + color: #ff0080 !important; } tr.labeltwo div, tr.labeltwo span, tr.labeltwo time, tr.labeltwo a { - color: #ff8000 !important; + color: #ff8000 !important; } tr.labelthree div, tr.labelthree span, tr.labelthree time, tr.labelthree a { - color: #008000 !important; + color: #008000 !important; } tr.labelfour div, tr.labelfour span, tr.labelfour time, tr.labelfour a { - color: #0000ff !important; + color: #0000ff !important; } tr.labelfive div, tr.labelfive span, tr.labelfive time, tr.labelfive a { - color: #8000ff !important; + color: #8000ff !important; } - tr.flagged div, tr.flagged span, tr.flagged time, tr.flagged a { - color: #ff0000 !important; + color: #ff0000 !important; } - tr.prio_high div, tr.prio_high span, tr.prio_high time, tr.prio_high a { - color: #ac0000 !important; + color: #ac0000 !important; } - tr.deleted div, tr.deleted span, tr.deleted time, tr.deleted a { - color: silver; - text-decoration : line-through; + color: silver; + text-decoration: line-through; } - span.status_img { - display: inline-block; - width: 12px; - height: 12px; - background-repeat: no-repeat; - background-image: url(images/kmmsgread.png); + display: inline-block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-image: url(images/kmmsgread.png); } - tr.deleted span.status_img { - background-image: url(images/kmmsgdel.png); + background-image: url(images/kmmsgdel.png); } - tr.unseen span.status_img { - background-image: url(images/kmmsgunseen.png); + background-image: url(images/kmmsgunseen.png); } - tr.flagged_seen span.status_img { - background-image: url(images/read_flagged_small.png) !important; + background-image: url(images/read_flagged_small.png) !important; } - tr.flagged_unseen span.status_img { - background-image: url(images/unread_flagged_small.png) !important; + background-image: url(images/unread_flagged_small.png) !important; } - tr.recent span.status_img { - background-image: url(images/kmmsgnew.png) !important; + background-image: url(images/kmmsgnew.png) !important; } - tr.replied span.status_img { - background-image: url(images/kmmsgreplied.png) !important; + background-image: url(images/kmmsgreplied.png) !important; } - tr.forwarded span.status_img { - background-image: url(images/kmmsgforwarded.png) !important; + background-image: url(images/kmmsgforwarded.png) !important; } - -.subjectBold -{ - FONT-SIZE: 12px; - font-weight : bold; - font-family : Arial; +.subjectBold { + font-size: 12px; + font-weight: bold; + font-family: Arial; } - -.subject -{ - FONT-SIZE: 12px; - font-family : Arial; +.subject { + font-size: 12px; + font-family: Arial; } - -TR.sieveRowActive -{ - FONT-SIZE: 11px; - height : 20px; - padding: 0; - background : White; +TR.sieveRowActive { + font-size: 11px; + height: 20px; + padding: 0; + background: White; } - -A.sieveRowActive -{ - FONT-SIZE: 11px; - height : 14px; - padding: 0; +A.sieveRowActive { + font-size: 11px; + height: 14px; + padding: 0; } - -TR.sieveRowInActive -{ - FONT-SIZE: 11px; - height : 20px; - padding: 0; - background : White; - color: Silver; +TR.sieveRowInActive { + font-size: 11px; + height: 20px; + padding: 0; + background: White; + color: Silver; } - -A.sieveRowInActive -{ - FONT-SIZE: 11px; - height : 14px; - padding: 0; - color: Silver; +A.sieveRowInActive { + font-size: 11px; + height: 14px; + padding: 0; + color: Silver; } - .bodyDIV { - position:absolute; - background-color:white; - top:134px; - bottom:0px; - width:100%; - border-top: 1px solid #efefdf; + position: absolute; + background-color: white; + top: 134px; + bottom: 0px; + width: 100%; + border-top: 1px solid #efefdf; } - .bodyDIVAttachment { - bottom:80px; + bottom: 80px; } - -#attachmentSpanAllDIV{ - background-color:#efefdf; - height:260px; - overflow:auto; +#attachmentSpanAllDIV { + background-color: #efefdf; + height: 260px; + overflow: auto; } - #attachmentDIV { - position:fixed; - background-color:#efefdf; - bottom:0px; - min-height:80px; - max-height:239px; - width:100%; - border-top: 1px solid silver; - overflow:auto; + position: fixed; + background-color: #efefdf; + bottom: 0px; + min-height: 80px; + max-height: 239px; + width: 100%; + border-top: 1px solid silver; + overflow: auto; } - #popupattachmentDIV { - position:top; - background-color:#efefdf; - bottom:0px; - min-height:80px; - max-height:239px; - width:100%; - border-top: 1px solid silver; - overflow:auto; + position: top; + background-color: #efefdf; + bottom: 0px; + min-height: 80px; + max-height: 239px; + width: 100%; + border-top: 1px solid silver; + overflow: auto; } - pre { - white-space: pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - width: 99%; + white-space: pre-wrap; + /* Mozilla, since 1999 */ + white-space: -pre-wrap; + /* Opera 4-6 */ + white-space: -o-pre-wrap; + /* Opera 7 */ + width: 99%; } - /* avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree) */ .divSidebox { - overflow: hidden; + overflow: hidden; } .textSidebox { - overflow-x: hidden; - overflow-y: auto; + overflow-x: hidden; + overflow-y: auto; } /* avoid the vertical scrollbar within the actual tablecontainer (of the tree) */ .containerTableStyle { - width: 100%; - overflow: hidden; + width: 100%; + overflow: hidden; } .dtree { - font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; - font-size: 11px; - color: #666; - white-space: nowrap; + font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; + font-size: 11px; + color: #666; + white-space: nowrap; } .dtree div { - width: 100%; + width: 100%; } .dtree img { - border: 0px; - vertical-align: middle; + border: 0px; + vertical-align: middle; } .dtree a { - color: #333; - text-decoration: none; + color: #333; + text-decoration: none; } -.dtree a.node, .dtree a.nodeSel { - white-space: nowrap; - padding: 1px 2px 1px 2px; +.dtree a.node, +.dtree a.nodeSel { + white-space: nowrap; + padding: 1px 2px 1px 2px; } -.dtree a.node:hover, .dtree a.nodeSel:hover { - color: #333; - text-decoration: underline; +.dtree a.node:hover, +.dtree a.nodeSel:hover { + color: #333; + text-decoration: underline; } .dtree a.nodeSel { - background-color: #c0d2ec; + background-color: #c0d2ec; } .dtree .clip { - overflow: hidden; + overflow: hidden; } -.dtree table, .dtree tr, .dtree td { - border: none; +.dtree table, +.dtree tr, +.dtree td { + border: none; } .dtree table { - overflow: hidden; - width: 100%; - display: table-row; + overflow: hidden; + width: 100%; + display: table-row; } -.dtree tbody, .dtree tr, .dtree td, .dtree span { - width: 100%; - overflow: hidden; +.dtree tbody, +.dtree tr, +.dtree td, +.dtree span { + width: 100%; + overflow: hidden; } .useEllipsis { - text-overflow: ellipsis; - width: 250px; - white-space: nowrap; - overflow: hidden; - word-wrap: break-word; - float: left; - &:after{ - content: " ..."; - } + text-overflow: ellipsis; + width: 250px; + white-space: nowrap; + overflow: hidden; } #mail-index { - position: relative + position: relative; } .mail-index_quotabox { - position: absolute; - top:8px; - right:74px; - width:200px !important; - z-index:99; -} -.mail_DisplayNone { - display: none !important; + position: absolute; + top: 8px; + right: 74px; + width: 200px !important; + z-index: 99; } .mail-index_quotaDisplayNone { - display: none !important; + display: none !important; } -.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed { - height:12px !important; - width:100px !important; +.mail-index_QuotaGreen, +.mail-index_QuotaYellow, +.mail-index_QuotaRed { + height: 12px !important; + width: 100px !important; } .mail-index_QuotaGreen > div { - background-color: green !important; - height:11px !important; + background-color: green !important; + height: 11px !important; } .mail-index_QuotaYellow > div { - background-color: yellow !important; - height:11px !important; + background-color: yellow !important; + height: 11px !important; } .mail-index_QuotaRed > div { - background-color: red !important; - height:11px !important; + background-color: red !important; + height: 11px !important; } /* influence the tree display and scrolling behavior */ #mail-tree_target { - min-height: 35px; - max-height: 450px; - display: block; - display: -moz-inline-stack; - display: -moz-box; - width: 100%; - overflow: hidden; - overflow-y: auto; - z-index:100; + min-height: 35px; + max-height: 450px; + display: block; + display: -moz-inline-stack; + display: -moz-box; + width: 100%; + overflow: hidden; + overflow-y: auto; + z-index: 100; } /* we need the the image displayed with our buttons on the left side */ input[type=button] { - background-position: left; + background-position: left; } - #mail-index_messageIFRAME { - width: 100%; - height: 100%; - border: 0; + width: 100%; + height: 100%; + border: 0; } - -#mail-index_button\[mailcreate\] { - width: 99%; - text-align: left; - font-weight: bold; - padding-left: 25px; - background-image: url(images/write_mail.png) !important; - background-position: left; - background-repeat: no-repeat; +#mail-index_button[id*="mailcreate"] { + width: 99%; + text-align: left; + font-weight: bold; + padding-left: 25px; + background-image: url(images/write_mail.png) !important; + background-position: left; + background-repeat: no-repeat; } - -#mail-compose_button\[send\] { - text-align: left; - font-weight: bold; - padding-left: 30px; - width: 80px; - margin: 0px !important; - background-image: url(images/mail_send.png) !important; - background-position: left; - background-repeat: no-repeat; -} - -.mailDisplay, #mail-index_mailPreview { - overflow: hidden; - position: relative; - margin-top: 3px; +.mailDisplay, +#mail-index_mailPreview { + overflow: hidden; + position: relative; + margin-top: 5px; } #mail-compose_fileselector { - width: 245px !important; + width: 245px !important; } #mail-compose_toolbar { - padding: 0px !important; + padding: 0px !important; } #mail-compose_toolbar > button { - padding: .2em .4em; + padding: .2em .4em; } #mail-compose_toolbar > img { - width: 16px; - padding: 0px; - height: 16px !important; + width: 16px; + padding: 0px; + height: 16px !important; } #mail-compose_toolbar > button > span > img { - width: 16px; - padding: 0px; - height: 16px !important; + width: 16px; + padding: 0px; + height: 16px !important; } -#mail-compose_toolbar > button { - padding: .2em .4em; +#mail-display_toolbar { + padding: 0px; } #mail-display_toolbar > button > span { - padding: .2em .4em; + padding: .2em .4em; } #mail-display_toolbar > button > span > img { - width: 16px; - padding: 0px; - height: 16px !important; -} -#mail-display_toolbar .et2_button_icon { - width: 16px; - height: 16px; + width: 16px; + padding: 0px; + height: 16px !important; } #mail-index_mailPreviewIcons { - position: absolute; - right: 0; - top: 0; -} -#mail-index_toolbar { - padding: 0px; -} -#mail-index_toolbar > button > span { - padding: .2em .4em; -} -#mail-index_toolbar > button > span > img { - width: 16px; - padding: 0px; - height: 16px !important; + position: absolute; + right: 0; + top: 0; } #mail-index_mailPreviewContainer { - position: absolute; - border: 1px solid silver; - top: 60px; - bottom: 0; - left: 3px; - right: 0; + position: absolute; + border: 1px solid silver; + top: 75px; + bottom: 0; + left: 3px; + right: 0; +} +#mail-index_toolbar { + padding: 0px; + background: none; + margin: 5px 5px 0 0; + border: none; +} +#mail-index_toolbar button { + background: none; + background-image: none; + background-color: #f0f0f0; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px 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; +} +#mail-index_toolbar button:hover { + background-color: #b3b3b3 !important; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.5); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#mail-index_toolbar button:active { + background-color: #808080; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + border: 1px solid rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} +#mail-index_toolbar button:focus { + border: none; +} +#mail-index_toolbar button span { + padding: .2em .6em; +} +#mail-index_toolbar button span img { + width: 16px; + padding: 0px; + height: 16px !important; } #mail-index_previewAttachmentArea { - background-color:#efefdf; - max-height: 3em; - max-width: 50%; - position: absolute; - overflow:scroll; - overflow-x:hidden; - right: 0; - top: 25px; - border: 1px solid red; - opacity: 1; - -moz-opacity:1: - filter: Alpha(opacity=100); - display: inline-block !important; + background-color: #f0f0f0; + max-height: 5%; + max-width: 50%; + position: absolute; + overflow: scroll; + overflow-x: hidden; + right: 7px; + top: 37px; + border-color: #f0f0f0; + border: 1px solid rgba(0, 0, 0, 0.15); + opacity: 1; + -moz-opacity: 1; +} +#mail-index_previewAttachmentArea img { + width: 16px; + height: 16px; } #mail-index_previewAttachmentArea.noContent { - border:0px !important; - display: none !important; + border: 0px !important; } - -.mailDisplayContainer, .mailDisplayAttachments { - display: block; - display: -moz-inline-stack; - display: -moz-box; - width: 99%; - overflow: hidden; - overflow-y: auto; - left: 3px; - right: 3px; +.mailDisplayContainer, +.mailDisplayAttachments { + display: block; + display: -moz-inline-stack; + display: -moz-box; + width: 99%; + overflow: hidden; + overflow-y: auto; + left: 3px; + right: 3px; } .mailDisplayContainer { - position: fixed; - overflow: hidden; - overflow-y: auto; - border: 1px solid silver; - top: 120px; -} -.mailDisplayContainerFixedHeight { - bottom: 123px; -} -.mailDisplayContainerFullHeight { - bottom: .1em; -} -.mailDisplayBody { - height:100%; - width:100%; - background-color:white; - padding:0px; - margin:0px; -} -.mailDisplayAttachments { - background-color:#efefdf; - height: 121px; - position: fixed; - bottom: .1em; - border: 1px solid red; - opacity: 1; - -moz-opacity:1: - filter: Alpha(opacity=100); + position: fixed; + overflow: hidden; + overflow-y: auto; + border: 1px solid silver; + top: 120px; + bottom: 100px; } /* #divGenTime { - background-color:#efefdf; + background-color:#efefdf; max-height: 10%; position: fixed; bottom: 1px; @@ -507,23 +908,27 @@ input[type=button] { } */ .mailDisplayHeaders { - overflow: hidden; + overflow: hidden; } .mailDisplayHeaderSection { - position: absolute; - top: 12px; - + position: absolute; + top: 12px; } div.mailDisplayHeaders > div:first-parent { - overflow: hidden; + overflow: hidden; } -div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailPreviewHeaders > span:first-child { - width: 7em; - display: inline-block; +div.mailDisplayHeaders > span:first-child, +div.mailComposeHeaders > span:first-child, +div.mailPreviewHeaders > span:first-child { + width: 7em; + display: inline-block; } div.mailComposeHeaders > span:first-child { - width: 8em; + width: 8em; } -div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * { - margin-left: 3px; +div.mailDisplayHeaders > span:first-child, +div.mailComposeHeaders > span:first-child, +div.mailComposeBody, +div.mailPreviewHeaders > * { + margin-left: 3px; } diff --git a/mail/templates/default/app.less b/mail/templates/default/app.less new file mode 100644 index 0000000000..f694f10039 --- /dev/null +++ b/mail/templates/default/app.less @@ -0,0 +1,1152 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package mail + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +// iframe + +div#mail-index{ + + + table.egwGridView_grid{ +// border-collapse: inherit; + width: 99%; + } + // Rahmen + padding +// .box_shadow_dialog; + +#mail-index_mailPreviewContainer {} + + + // Message - standdardmäßig ausgeblendet + span#mail-index_msg{ + span { +// background: red; +// height: 30px; + } + } + + // alles + + div#mail-index_mailSplitter{ + + margin: 0 1% 0 0 !important; + + // Box mit Header und Liste + div#mail-index_nm{ + + // Header + div.nextmatch_header{ + // Counter + span.header_count ui-corner-all{ + span{} + } + + // Filter + div.filters{ + // Fläche + .Rectangle_filters; + + + select#mail-index_filter{ +// height: 35px; + } + + select#mail-index_filter2{ +// height: 35px; + } + + // Suchfeld + input#mail-index_search{ +// height: 35px; +// top: 8px; +// font-size: 1.5em; + } + + // Suchknopf + button.et2_button { +// top: 8px; +// position: relative; + } + + } // Ende Filter + + } // Ende Header + + + // Listenausgabe der Emails + div {} + + // Bilder in den Listen + tr.mail td img {height: 16px;} + + + + + + + } // Ende: Box mit Header und Liste + + // Splitterbar + div.splitter-bar, + div.splitter-bar-horizontal {} + + + + // Ansicht der Emails + div#mail-index_mailPreview{ + padding: 3px; + margin: 5px 0; + .background-color-25-gray; + // From + div#mail-index_mailPreviewHeadersFrom{ + width: 50%; + } + + // An + div#mail-index_mailPreviewHeadersTo{ + width: 50%; + } + + // Date + div#mail-index_mailPreviewHeadersDate{ + width: 50%; + } + + // Subject + div#mail-index_mailPreviewHeadersSubject{ + width: 100%; + } + + // Icons + div#mail-index_mailPreviewIcons{} + + + // Email Inhalt + div#mail-index_mailPreviewContainer{ + + iframe#mail-index_messageIFRAME{ + + // Email Inhalt + div{} + + // Zeit für das Anzeigen + div#divGenTime{} + + + } + + + } + + } // Ende: Ansicht der Emails + + + } // Ende alles + +} // iframe + + + +// ################################################################################# +// Sidebox + +.egw_fw_ui_category_content{ + + // Create Feld + #mail-index_buttonmailcreate{ + margin-left: -14px; + // Create Button + button#mail-index_button[mailcreate], + button[id*="mailcreate"]{ + +// +// .Complete_Button_add; +// background-image: url("images/write_mail.png") !important; +// background-position: left center; +// background-repeat: no-repeat; +// padding-left: 25px; +// text-align: left; +// width: 99%; +// +//// background-image: url("images/write_mail.png") !important; + + } + + } + + + // Mail Liste der Postfächer + span#mail-tree_target { + max-height: 50%; + } + + .dtree { + .basefontfamily; + } + +} // Ende Sidebox + +/* ################################################################################## + * E-Mail Dialog "Compose" + * + * ################################################################################## + */ +#mail-compose{ +// gesamtbreite + width: 870px; + padding: 5px; + + +// ################################## +// Toolbar + + .mail-compose_toolbar{ + img{width: 22px;} + // Button senden -> dev_buttons.less + .mail-compose_button{ + margin-right: 15px; + padding: 0 3px 0 0; + + } + + // Save + img#mail-compose_button[saveAsDraft], + .et2_button_icon { + vertical-align: middle; + padding: 2px; + .Complete_Button_Icon_normal; + &:hover {.box_shadow_standard_light_hover; .background-color-15-gray;} + &:focus {.box_shadow_standard_light_inset; .background-color-15-gray;} + } + + // Dateien Upload + .et2_file, + .mail-compose_fileselector{ + vertical-align: middle; + #mail-compose_uploadForCompose{ + + font-size: 0.7em; + .Complete_Button_text_icon_before; + background-image: url(images/attach.png) !important; + .background-color-5-gray; + height: 20px; + margin-left: 5px; + &:hover {.box_shadow_standard_light_hover; .background-color-15-gray;} + + &:focus {.box_shadow_standard_light_inset; .background-color-15-gray;} + + } + + div.progress {width: 247px;} + } + + // Speichern als + span.et2_label {font-size: 0.7em;} + + //als INfolog + .mail-compose_infolog{ + vertical-align: middle; + height: 20px; + padding: 3px 2px; + .Complete_Button_Icon_normal; + margin-right: 3px; + .et2_button_icon {border: none; box-shadow: none; border-radius: 0px; background-color: transparent;} + + } + //als Ticket + .mail-compose_tracker{ + vertical-align: middle; + height: 20px; + padding: 3px 2px; + .Complete_Button_Icon_normal; + margin-right: 3px; + span.et2_label {font-size: 0.7em; height: 20px;} + .et2_button_icon {border: none; box-shadow: none; border-radius: 0px; background-color: transparent;} + + } + + + // Empfangsbenachrichtigung + .mail-compose_notification{ + vertical-align: middle; + height: 20px; + padding: 3px 2px; + .Complete_Button_Icon_normal; + margin-right: 3px; + + } + + // Priorität + .mail-compose_priority{ + vertical-align: middle; + height: 20px; + padding: 3px 2px; + .Complete_Button_Icon_normal; + margin-right: 3px; + + span.et2_label {margin-right: 3px;} + + select#mail-compose_priority{ + box-shadow: none; + font-size: 0.8em; + border: none; + + } + + } + + + } // Toolbar Ende + + + // ############################# + // Mail Header + + .mailComposeHeaders,.mailComposeHeadersSection{ + margin: 2px 0; + width: 98%; + + span { width: 8em; font-size: 0.8em;} + + + div{ max-width: 770px; } + + // Automatische Auwahlliste + span.ui-state-error {color: @egw_color_2_c;} + div.ms-res-item-active { + background: @egw_color_2_a; + span {color: #FFFFFF;} + } + + + // Betreff + input#mail-compose_subject { max-width: 750px;} + + + } // Ende Header + + // Mail Body + + + // Signature + fieldset.mailSignature { + font-size: 0.8em; + + select {} + span {margin-left: 8px;} + } + + + + +} // Ende Dialog + +/* ################################################################################## + * E-Mail Dialog "Ansehen" + * + * ################################################################################## + */ +#mail-display{ + // gesamtbreite + width: 870px; + padding: 5px; + .mailDisplayHeaderSection{ + top: 0; + position: relative; + #mail-display_toolbar{ + background-color: @egw_color_2_e; + padding: 5px 3px; + height: 25px; + display: -webkit-box; + button { +// float: left; + .Complete_Button_Icon_normal; + height: 20px; + &:hover {.box_shadow_standard_light_hover; .background-color-15-gray;} + &:focus {.box_shadow_standard_light_inset; .background-color-15-gray;} + } + + // Button ? + + // Button antworten + + // allen antworten + + // Forward + #mail-display_forward_wrapper { + + &:hover {} + &:focus {} + + li { + a { + img { width: 16px;margin-right: 3px;} + } + } + + } + + // ? + + // speichern + #mail-display_save_wrapper{ + + + &:hover {} + &:focus {} + + // das Wort speichern + button#mail-display_save { + + background-image: url('../images/speichern.png'); + background-position: left center; + background-repeat: no-repeat; + background-size: 16px 16px; + box-shadow: none; + + &:hover { + img {display: none; background-image: none;} + } + + &:focus {box-shadow: none; } + } + li { + a { + img { width: 16px;margin-right: 3px;} + } + } + } + + // anzeigen + + #mail-display_view_wrapper{ + + &:hover {} + &:focus {} + + button#mail-display_view{ + box-shadow: none; + + &:hover { + img {display: none; background-image: none;} + } + + &:focus {box-shadow: none; } + } + + + + li { + a { + img { width: 16px;margin-right: 3px;} + } + } + } + + // mark + + #mail-display_mark_wrapper{ + + &:hover {} + &:focus {} + + button#mail-display_mark{ + box-shadow: none; + + &:hover { + img {display: none; background-image: none;} + } + + &:focus {box-shadow: none; } + } + + li { + a { + img { width: 16px;margin-right: 3px;} + } + } + } + + } + + } + + + // Dateianhänge + + .mailDisplayAttachments { +// background-color:#efefdf; + .background-color-10-gray; + + max-height: 10%; + position: fixed; + bottom: 26px; + + border: 0px solid @egw_color_3_a; + + border-bottom: 0px; + opacity: 1; + -moz-opacity:1; +// filter: Alpha(opacity=100); + + img {width: 16px;} + +} + + +} // Ende Display + + + +/* ################################################################################## + * E-Mail + * + * ################################################################################## + */ + +/* felamimail uses the styledefinitions below to format navButton/navSeparator */ +tr.navbarBackground { + background-color:#dddddd; +} + +div.navButton { + background-color:#dddddd; + float:left; + padding: 2px; + margin: 2px; + border: solid #dddddd 1px; +} + +div.navButton:hover, div.navButtonHover { + background-color:#eeeeee; + float:left; + padding: 2px; + margin: 2px; + border: solid white 1px; + border-right: solid black 1px; + border-bottom: solid black 1px; + position: relative; +} + +div.navButton:active, div.navButtonActive { + background-color:#dddddd; + float:left; + padding: 2px; + margin: 2px; + border: solid white 1px; + border-left: solid black 1px; + border-top: solid black 1px; + position: relative; +} + +div.navSeparator { + background-color:#dddddd; + float:left; + padding: 0px; + margin: 2px; + border: solid silver 1px; + height:24px; + position: relative; +} + +/* Fixes z-index problem with the calendar year selection (displays behind selectboxes)*/ +.calendar .combo { + z-index: 1 !important; +} + +//############################################################################################# +// mail/templates/app.css + +textarea +{ + font-family: monospace, sans-serif; + font-size: 110%; +} + +.defaultProfile { color:#000000; font-weight:bold !important; } + + +.quoted1 { color:#660066; } +.quoted2 { color:#007777; } +.quoted3 { color:#990000; } +.quoted4 { color:#000099; } +.quoted5 { color:#bb6600; } + +tr.mail div { + cursor: default; + white-space: normal; + text-overflow: ellipsis; + span {text-overflow: ellipsis;white-space: normal;} +} + +tr.mail a { + cursor: pointer; + white-space: nowrap; + text-overflow: ellipsis; +} + +tr.recent div, +tr.recent span, +tr.recent time, +tr.recent a, +tr.unseen div, +tr.unseen span, +tr.unseen time, +tr.unseen a { + color: #003075; + font-weight: bold; +} + +tr.labelone div, +tr.labelone span, +tr.labelone time, +tr.labelone a { + color: #ff0080 !important; +} +tr.labeltwo div, +tr.labeltwo span, +tr.labeltwo time, +tr.labeltwo a { + color: #ff8000 !important; +} +tr.labelthree div, +tr.labelthree span, +tr.labelthree time, +tr.labelthree a { + color: #008000 !important; +} +tr.labelfour div, +tr.labelfour span, +tr.labelfour time, +tr.labelfour a { + color: #0000ff !important; +} +tr.labelfive div, +tr.labelfive span, +tr.labelfive time, +tr.labelfive a { + color: #8000ff !important; +} + +tr.flagged div, +tr.flagged span, +tr.flagged time, +tr.flagged a { + color: #ff0000 !important; +} + +tr.prio_high div, +tr.prio_high span, +tr.prio_high time, +tr.prio_high a { + color: #ac0000 !important; +} + +tr.deleted div, +tr.deleted span, +tr.deleted time, +tr.deleted a { + color: silver; + text-decoration : line-through; +} + +span.status_img { + display: inline-block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-image: url(images/kmmsgread.png); +} + +tr.deleted span.status_img { + background-image: url(images/kmmsgdel.png); +} + +tr.unseen span.status_img { + background-image: url(images/kmmsgunseen.png); +} + +tr.flagged_seen span.status_img { + background-image: url(images/read_flagged_small.png) !important; +} + +tr.flagged_unseen span.status_img { + background-image: url(images/unread_flagged_small.png) !important; +} + +tr.recent span.status_img { + background-image: url(images/kmmsgnew.png) !important; +} + +tr.replied span.status_img { + background-image: url(images/kmmsgreplied.png) !important; +} + +tr.forwarded span.status_img { + background-image: url(images/kmmsgforwarded.png) !important; +} + +.subjectBold +{ + font-size: 12px; + font-weight : bold; + font-family : Arial; +} + +.subject +{ + font-size: 12px; + font-family : Arial; +} + +TR.sieveRowActive +{ + font-size: 11px; + height : 20px; + padding: 0; + background : White; +} + +A.sieveRowActive +{ + font-size: 11px; + height : 14px; + padding: 0; +} + +TR.sieveRowInActive +{ + font-size: 11px; + height : 20px; + padding: 0; + background : White; + color: Silver; +} + +A.sieveRowInActive +{ + font-size: 11px; + height : 14px; + padding: 0; + color: Silver; +} + +.bodyDIV { + position:absolute; + background-color:white; + top:134px; + bottom:0px; + width:100%; + border-top: 1px solid #efefdf; +} + +.bodyDIVAttachment { + bottom:80px; +} + +#attachmentSpanAllDIV{ + background-color:#efefdf; + height:260px; + overflow:auto; +} + +#attachmentDIV { + position:fixed; + background-color:#efefdf; + bottom:0px; + min-height:80px; + max-height:239px; + width:100%; + border-top: 1px solid silver; + overflow:auto; +} + +#popupattachmentDIV { + position:top; + background-color:#efefdf; + bottom:0px; + min-height:80px; + max-height:239px; + width:100%; + border-top: 1px solid silver; + overflow:auto; +} + +pre { + white-space: pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + width: 99%; +} + +/* + avoid the vertical scrollbar within the sidebox section (triggered by the vertical dimension of the tree) +*/ +.divSidebox { + overflow: hidden; +} +.textSidebox { + overflow-x: hidden; + overflow-y: auto; +} +/* + avoid the vertical scrollbar within the actual tablecontainer (of the tree) +*/ +.containerTableStyle { + width: 100%; + overflow: hidden; +} + + +.dtree { + font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; + font-size: 11px; + color: #666; + white-space: nowrap; + + div { + width: 100%; + } + img { + border: 0px; + vertical-align: middle; + } + a { + color: #333; + text-decoration: none; + } + a.node, a.nodeSel { + white-space: nowrap; + padding: 1px 2px 1px 2px; + + &:hover{ + color: #333; + text-decoration: underline; + } + } + + a.nodeSel { + background-color: #c0d2ec; + } + .clip { + overflow: hidden; + } + table, tr, td { + border: none; + } + table { + overflow: hidden; + width: 100%; + display: table-row; + } + tbody, tr, td, span { + width: 100%; + overflow: hidden; + } + + + // Ende dtree +} + + + + +.useEllipsis { + text-overflow: ellipsis; + width: 250px; + white-space: nowrap; + overflow: hidden; +} + + + + +#mail-index { + position: relative +} +.mail-index_quotabox { + position: absolute; + top:8px; + right:74px; + width:200px !important; + z-index:99; +} +.mail-index_quotaDisplayNone { + display: none !important; +} +.mail-index_QuotaGreen, .mail-index_QuotaYellow, .mail-index_QuotaRed { + height:12px !important; + width:100px !important; +} +.mail-index_QuotaGreen > div { + background-color: green !important; + height:11px !important; +} +.mail-index_QuotaYellow > div { + background-color: yellow !important; + height:11px !important; +} +.mail-index_QuotaRed > div { + background-color: red !important; + height:11px !important; +} +/* + influence the tree display and scrolling behavior +*/ +#mail-tree_target { + min-height: 35px; + max-height: 450px; + display: block; + display: -moz-inline-stack; + display: -moz-box; + width: 100%; + overflow: hidden; + overflow-y: auto; + z-index:100; +} +/* + we need the the image displayed with our buttons on the left side +*/ +input[type=button] { + background-position: left; +} + +#mail-index_messageIFRAME { + width: 100%; + height: 100%; + border: 0; +} + +//#mail-index_button\[mailcreate\] + +#mail-index_button[id*="mailcreate"]{ + width: 99%; + text-align: left; + font-weight: bold; + padding-left: 25px; + background-image: url(images/write_mail.png) !important; + background-position: left; + background-repeat: no-repeat; +} + +//#mail-compose_button[id*="send"] { +// text-align: left; +// font-weight: bold; +// padding-left: 30px; +// width: 80px; +// margin: 0px !important; +// background-image: url(images/mail_send.png) !important; +// background-position: left; +// background-repeat: no-repeat; +//} + +.mailDisplay, #mail-index_mailPreview { + overflow: hidden; + position: relative; + margin-top: 5px; +} +#mail-compose_fileselector { + width: 245px !important; +} +#mail-compose_toolbar { + padding: 0px !important; +} +#mail-compose_toolbar > button { + padding: .2em .4em; +} +#mail-compose_toolbar > img { + width: 16px; + padding: 0px; + height: 16px !important; +} +#mail-compose_toolbar > button > span > img { + width: 16px; + padding: 0px; + height: 16px !important; +} + + + +#mail-display_toolbar { + padding: 0px; +} +#mail-display_toolbar > button > span { + padding: .2em .4em; +} +#mail-display_toolbar > button > span > img { + width: 16px; + padding: 0px; + height: 16px !important; +} + + + +#mail-index_mailPreviewIcons { + position: absolute; + right: 0; + top: 0; +} + +// Headerbereich grau hinterlegt + +#mail-index_mailPreviewContainer { + position: absolute; + border: 1px solid silver; + top: 75px; + bottom: 0; + left: 3px; + right: 0; +} + +// Toolbar der Email + +#mail-index_toolbar { + padding: 0px; + background: none; + margin: 5px 5px 0 0; + border: none; + + button { + background: none; + background-image: none; + + .Complete_Button_Icon_normal; + + &:hover {.Complete_Button_Icon_hover;} + &:active {.Complete_Button_Icon_active;} + &:focus {border: none;} + + span { + padding: .2em .6em; + + img { + width: 16px; + padding: 0px; + height: 16px !important; + } + } + + + } + +} + + +//#mail-index_toolbar > button > span { +// padding: .2em .4em; +//} +//#mail-index_toolbar > button > span > img { +// width: 16px; +// padding: 0px; +// height: 16px !important; +//} + + + +// Anhänge an Email + +#mail-index_previewAttachmentArea { +// background-color:#efefdf; + .background-color-10-gray; + max-height: 5%; + max-width: 50%; + position: absolute; + overflow:scroll; + overflow-x:hidden; + right: 7px; + top: 37px; + .border-color-10-gray; + .border_normal; + opacity: 1; + -moz-opacity:1; +// filter: Alpha(opacity=100); + + img {width: 16px; height: 16px;} + +} +#mail-index_previewAttachmentArea.noContent { + border:0px !important; +} + + + + +.mailDisplayContainer, .mailDisplayAttachments { + display: block; + display: -moz-inline-stack; + display: -moz-box; + width: 99%; + overflow: hidden; + overflow-y: auto; + left: 3px; + right: 3px; +} +.mailDisplayContainer { + position: fixed; + overflow: hidden; + overflow-y: auto; + border: 1px solid silver; + top: 120px; + bottom: 100px; +} +//.mailDisplayAttachments { +// background-color:#efefdf; +// max-height: 10%; +// position: fixed; +// bottom: 26px; +// border: 1px solid red; +// border-bottom: 0px; +// opacity: 1; +// -moz-opacity:1; +//// filter: Alpha(opacity=100); +//} +/* +#divGenTime { + background-color:#efefdf; + max-height: 10%; + position: fixed; + bottom: 1px; + border: 1px solid red; + border-top: 1px solid black; + left: 3px; + right: 3px; + opacity: 1; + -moz-opacity:1: + filter: Alpha(opacity=100); +} +*/ +.mailDisplayHeaders { + overflow: hidden; +} +.mailDisplayHeaderSection { + position: absolute; + top: 12px; + +} +div.mailDisplayHeaders > div:first-parent { + overflow: hidden; +} +div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailPreviewHeaders > span:first-child { + width: 7em; + display: inline-block; +} +div.mailComposeHeaders > span:first-child { + width: 8em; +} +div.mailDisplayHeaders > span:first-child, div.mailComposeHeaders > span:first-child, div.mailComposeBody, div.mailPreviewHeaders > * { + margin-left: 3px; +} + + + diff --git a/phpgwapi/templates/default/def_buttons.less b/phpgwapi/templates/default/def_buttons.less new file mode 100755 index 0000000000..cd0fedfc61 --- /dev/null +++ b/phpgwapi/templates/default/def_buttons.less @@ -0,0 +1,573 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for buttons + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + +@import (reference) "def_design_pattern_color_font_shadow.less"; +//######################################################################################################## +// Buttons +// +//######################################################################################################## + +//Buttons et2 + +input[type="submit"], +input[type="button"], +input[type="reset"], +button, .egwbutton { + background-color: #B9D5E3; + border: 1px outset #B9D5E3; + color: #004E7D; +} + +.et2_button_text, +input[type="button"] { + .background-color-10-gray; + + .color-30-gray; + + margin: 5px; + padding: 3px; + border-radius: 20px 3px 3px 3px; + -webkit-border-radius: 20px 3px 3px 3px; + -moz-border-radius: 20px 3px 3px 3px; + + :before {content: "►"; color: red; font-size: 50px; } +} + +//##################### +//# Complete Button # +//##################### + +.Complete_Button_normal{ + .border_normal; + .box_shadow_standard_light; + .color-100-gray; +} + +.Complete_Button_hover{ +// .border_hover; + .box_shadow_standard_light_hover; + background-color: inherit !important; +} + +.Complete_Button_active{ +// .border_hover; + .box_shadow_standard_light_inset; +} + +.Complete_Button_focus{ +// .border_hover; + .box_shadow_standard_light_inset; +} + +// komplette Schaltflächen + +.Complete_Button_add { + background-color: @egw_color_blue_lighter; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + .border_radius_button_lefttop; + + &:before {content: "+";font-size: 2em;color: @egw_color_1;} +} + +.Complete_Button_add_hover { + background-color: @egw_color_blue_lightest !important; + color: @egw_color_1; +// text-shadow: none; +// height: 35px; +// background-image: none !important; +// .border_radius_button_lefttop; + .box_shadow_standard_light_hover; + .border_radius_button_lefttop; +} + +//.Complete_Button_add_before {content: "+";font-size: 2em;} + + +.Complete_Button_hinweis{ + .Button_size_square_32; + .border_normal; + padding: 0 0.2em; + border-left: 3px solid; + border-left-color: @lightgray; +} + + +// select + +.Complete_Button_select{ +// .border_normal; +// .border-color-25-gray; + .box_shadow_standard_light; + width: auto; + margin: 0.5em 0em 0.5em 0.5em; +// .border_radius_button_normal; + + padding:3px; + +// border:none; + outline:none; + display: inline-block; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + cursor:pointer; + } +.Complete_Button_select_hover { + .box_shadow_standard_light_hover; +} + +.Complete_Button_select_focus { + outline:0; + border-width:1px; + border-style: solid; + .border-color-25-gray; + -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); + -moz-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); + box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); + } + + + + +// Input + +.Complete_Button_input{ + .border_normal; + .border-color-25-gray; + .box_shadow_standard_light; + width: auto; + margin: 0.5em 0em 0.5em 0; + .border_radius_button_normal; + +// .gradient(#000, #333, #FFF); +// .gradient(#F5F5F5, #EEE, #FFF); + +} + +.Complete_Button_input_hover{ + .box_shadow_standard_light_hover; +} + +.Complete_Button_input_focus { + outline:0; + border-width:1px; + border-style: solid; + .border-color-25-gray; + -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); + -moz-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); + box-shadow: 0 0 2px 1px rgba(0,0,0, 0.10); +} + + + +// Suchen button + +.Complete_Button_search_action{ + .border_normal; + .border-color-25-gray; + .box_shadow_standard_light; + width: 3em; +// height: 2.5em; +// margin: 0.5em 1em 0.5em 1; + .border_radius_button_lefttop; + + .background-color-search; + + color: #FFFFFF; + text-decoration: none; + + cursor: pointer; + padding: 3px; + margin-left: 5px; +} + + +.Complete_Button_search_action_hover{ + .box_shadow_standard_light_hover; + background-color: @yellow !important; + .border_radius_button_lefttop; + + +} + +.Complete_Button_search_action_active{ + .box_shadow_standard_light_hover; + .background-color-search; + .border_radius_button_lefttop; + +} + + +.Complete_Button_search_action_reset{ + .Complete_Button_search_action; + .background_verlauf_diagonal_gray; +} + + +// Buchstaben + +.Complete_Button_lettersearch{ + .border_radius_button_normal; + .box_shadow_standard_light; + .border_normal; +// border: 1px solid #D3DCE3; + text-align: center; + cursor: pointer; +} + + +// Text + +.Complete_Button_text{ + .border_radius_button_normal; + .background-color-10-gray; + .border-color-50-gray; + cursor: pointer; + +} + +.Complete_Button_text_hover { + .border_radius_button_normal; + .border_hover; + text-align: center; + cursor: pointer; + .background-color-30-gray; +} +.Complete_Button_text_active{ + color: @gray; +} + + +.Complete_Button_text_icon_before{ + .Complete_Button_normal; + padding-left: 30px !important; + background-position: 6px center; + background-repeat: no-repeat; + background-size: 20px auto; + .Button_size_h32_auto; +} + +.Complete_Button_text_icon_before_hover{ + .Complete_Button_text_icon_before; + .box_shadow_standard_light_hover; +} + +.Complete_Button_text_icon_before_active{ + .Complete_Button_text_icon_before; + .box_shadow_standard_light_hover; + +} + +// Buttons nur Icon + +.Complete_Button_Icon_normal { + .background-color-10-gray; + .box_shadow_standard_light; + .border_normal; + .border_radius_button_normal; +} + +.Complete_Button_Icon_hover { + .background-color-30-gray; + .box_shadow_standard_light_hover; + .border_hover; + .border_radius_button_normal; +} + +.Complete_Button_Icon_active { + .background-color-50-gray; + .box_shadow_standard_light_hover; + .border_active; + .border_radius_button_normal; +} + +// ############################# +// Button Sub Menupunkte + +.Complete_Button_Module_Menu_Links{ + .background-color-10-gray; +} + +.Complete_Button_Module_Menu_Links_Hover{ + .background-color-30-gray; + .color-5-gray; +} + +.Complete_Button_Module_Menu_Links_active{ + .background-color-10-gray; +} + + +// Button Sub Sub Menupunkte + +.Complete_Button_Module_Menu_Links_Sub +{ + margin-left: 3px; + padding-top: 0px; + padding-bottom: 5px; + .border_normal; + border-top-width: 0px; + .background-color-10-gray; + + margin-top: -7px; + padding-left: 14px; + + width: 93%; +} + +.Complete_Button_Module_Menu_Links_Sub_Hover +{ + margin-left: 2px; + padding-top: 0px; + padding-bottom: 5px; + .border_normal; + .background-color-15-gray; + +} + +/**################################################################################################## + * Button widget - text only, and icon + * + * ################################################################################################## + */ +//.et2_button { +// cursor: pointer; +// text-align: center; +// font-size: 9pt; +// text-shadow: 1px 1px #E0E0E0; +//} + +// Button mit Text + +.et2_button_text, +input[type=button] { + .Complete_Button_text; + .box_shadow_standard_light; + + &:hover {.Complete_Button_text_hover;} + &:active {.Complete_Button_text_active;} + &:focus {.Complete_Button_text_active;} +} + + +// Button mit Bild + +.et2_button_icon { + border: none; + background: transparent; + padding: 2px; +} + + + + +// ##################################################### +/* Button Hinzufügen */ +#add.et2_button, .Complete_Button_add { + .Complete_Button_add; + + +// &:before {.Complete_Button_add_before;} + } + + + +// ##################################################### +// Button bearbeiten + +input[type="submit"][id*="edit"], +input[type="button"][id*="edit"], +button[id*="edit"], +input[type="submit"][id*="edit"]:hover, +input[type="button"][id*="edit"]:hover, +button[id*="edit"]:hover { + background-image:url('../images/bearbeiten.png'); + .Complete_Button_text_icon_before; +} + +// ##################################################### +// Button Kopieren + +input[type="submit"][id*="copy"], +input[type="button"][id*="copy"], +button[id*="copy"], +input[type="submit"][id*="copy"]:hover, +input[type="button"][id*="copy"]:hover, +button[id*="copy"]:hover{ + .Complete_Button_text_icon_before; + background-image:url('../images/kopieren.png'); +} +// ##################################################### +// Button Abbruch + +input[type="submit"][id*="cancel"], +input[type="button"][id*="cancel"], +button[id*="cancel"], +input[type="submit"][id*="cancel"]:hover, +input[type="button"][id*="cancel"]:hover, +button[id*="cancel"]:hover{ + .Complete_Button_text_icon_before; + background-image:url('../images/abbruch.png'); +} + +// ##################################################### +// Button löschen + +input[type="submit"][id*="delete"], +input[type="button"][id*="delete"], +button[id*="delete"] { + .Complete_Button_text_icon_before; + background-image:url('../images/loeschen.png'); + margin-left: 3em; + +} +input[type="submit"][id*="delete"]:hover, +input[type="button"][id*="delete"]:hover, +button[id*="delete"]:hover { + .Complete_Button_text_icon_before; + background-image:url('../images/loeschen.png'); + background-color: red !important; +} +// ##################################################### +// Button übernehmen + +input[type="submit"][id*="apply"], +input[type="button"][id*="apply"], +button[id*="apply"], +input[type="submit"][id*="apply"]:hover, +input[type="button"][id*="apply"]:hover, +button[id*="apply"]:hover { + .Complete_Button_text_icon_before; + background-image:url('../images/uebernehmen.png'); +} + +// ##################################################### +// Button speichern + +input[type="submit"][id*="save"], +input[type="button"][id*="save"], +button[id*="save"], +input[type="submit"][id*="save"]:hover, +input[type="button"][id*="save"]:hover, +button[id*="save"]:hover + + { + .Complete_Button_text_icon_before; + background-image:url('../images/speichern.png'); +} +// ##################################################### +// Button Suchen + +input[type="submit"][id*="search"], +input[type="button"][id*="search"], +button[id*="search"]{ + .Complete_Button_text_icon_before; + + background-image:url('../images/erweiterte-suche.png'); + + + &:hover {.box_shadow_standard_light_hover; background-image:url('../images/erweiterte-suche.png');} + + &:focus {.box_shadow_standard_light_inset;} +} + +// ##################################################### +// Button ok = speichern + +button.button_ok { + .Complete_Button_text_icon_before; + background-image:url('../images/speichern.png'); +} +button.button_ok:hover { + .Complete_Button_text_icon_before; + background-image:url('../images/speichern.png'); +} + +// ##################################################### +// Button Befehl auswählen (infolog) + +button#infolog-index_legacy_actions{ + + .Complete_Button_text_icon_before; + background-image:url('../images/bearbeiten.png'); + + &:hover {.box_shadow_standard_light_hover; background-image:url('../images/bearbeiten.png');} + + &:focus {.box_shadow_standard_light_inset;} + +} +// ##################################################### +// Button hinzufügen (infolog) + +button[id*="note"]{ + .Complete_Button_text_icon_before; + +// &:before {content: "+"; font-size: 2em;} + +// background-image:url('../images/bearbeiten.png'); + + &:hover { + .box_shadow_standard_light_hover; +// background-image:url('../images/bearbeiten.png'); + } + + &:focus {.box_shadow_standard_light_inset;} + +} + + +// ##################################################### +// Create Button (mail) + +button#mail-index_button[mailcreate], +button[id*="mailcreate"]{ + .Complete_Button_add; + background-image: url("images/write_mail.png") !important; + background-position: right center !important; + background-repeat: no-repeat; + padding-left: 25px; + text-align: left; + width: 99%; + + &:hover { + .box_shadow_standard_light_hover; + .border_radius_button_lefttop ; +// background-image:url('../images/bearbeiten.png'); + } + + &:focus {.border_radius_button_lefttop ;.box_shadow_standard_light_inset;} +} + + +// ##################################################### +// Senden Button (mail Dialog) + +button#mail-compose_button[send], +button#mail-compose_button[id*="send"], +.mail-compose_button { + .Complete_Button_text_icon_before; + background-image: url(../../mail/templates/default/images/mail_send.png) !important; + height: 26px; + padding: 0 3px 0 0; + .background-color-15-gray; + &:hover {.box_shadow_standard_light_hover; } + + &:focus {.box_shadow_standard_light_inset;} + + } + + diff --git a/phpgwapi/templates/default/def_content_elements.less b/phpgwapi/templates/default/def_content_elements.less new file mode 100755 index 0000000000..f3f39aed4e --- /dev/null +++ b/phpgwapi/templates/default/def_content_elements.less @@ -0,0 +1,743 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for content-elements + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + +@import (reference) "def_design_pattern_color_font_shadow.less"; +@import (reference) "def_buttons.less"; + +/* ####################################################################################### +* +* +* Inhaltselemente +* +* +* ######################################################################################## +*/ + +//Reset + +html * { + font-size: 100%; +} + + +//############################################### + +body{ + background-image:none; + + .background-color-10-gray; + .color-100-gray; // Schriftfarbe schwarz + + margin: 0px !important; + padding: 0px !important; + width: 100% !important; + height: 100% !important; +} + +body, td, textarea {.basefontfamily;} + +#egw_fw_basecontainer { + position: fixed; + width: 100%; + height: 100%; + padding: 0px; + margin: 0px; + + .basefontfamily; +// font-size: 8pt; + + .background-color-5-gray ; +} + +//########################## + +input { + + .Complete_Button_input; + + &:hover{.Complete_Button_input_hover;} + &:focus{.Complete_Button_input_focus;} + +} + +select { + + .Complete_Button_select; + padding:3px; + margin: 0; + .rounded (4px); +// .drop-shadow( 0, 3px, 0, 191, 191, 191, 0.1, inset); + -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; + background: #f8f8f8; + color:#888; + border:none; + outline:none; + display: inline-block; + -webkit-appearance:none; + -moz-appearance:none; + appearance:none; + cursor:pointer; + + &:hover{.Complete_Button_select_hover;} + &:focus{.Complete_Button_select_focus;} + +} + + +//select { + +//} +// +/////* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + select {padding-right:18px} +} + +select {position:relative} +select:after { + content:'<>'; + font:11px "Consolas", monospace; + color:#aaa; + -webkit-transform:rotate(90deg); + -moz-transform:rotate(90deg); + -ms-transform:rotate(90deg); + transform:rotate(90deg); + right:8px; top:2px; + padding:0 0 2px; + border-bottom:1px solid #ddd; + position:absolute; + pointer-events:none; +} +select:before { + content:''; + right:6px; top:0px; + width:20px; height:20px; + background:#f8f8f8; + position:absolute; + pointer-events:none; + display:block; +} + +div.selectbox-wrapper { + + ul { + list-style-type:none; + margin:0px; + padding:0px; + + li.selected { + background-color: #EAF2FB; + } + li.current { + background-color: #CDD8E4; + } + + li { + list-style-type:none; + display:block; + margin:0; + padding:2px; + cursor:pointer; + } + } + + + + +} + + +.sbHolder{ + .Complete_Button_select; +// background-color: #2d2d2d; +// border: solid 1px #515151; +// font-family: Arial, sans-serif; + .basefontfamily; + font-size: 1.2em; + font-weight: normal; + height: 30px; + position: relative; + width: 10em; + + &:hover{.Complete_Button_select_hover;} + &:focus{.Complete_Button_select_focus;} + +} +.sbHolder:focus .sbSelector{} + +.sbSelector{ + display: block; + height: 30px; + left: 0; + line-height: 30px; + outline: none; + overflow: hidden; + position: absolute; + text-indent: 10px; + top: 0; + width: 170px; +} +.sbSelector:link, .sbSelector:visited, .sbSelector:hover{ +// color: #EBB52D; + .color-50-gray; + outline: none; + text-decoration: none; +} +.sbToggle{ + background: url(../img/select-icons.png) 0 -116px no-repeat; + display: block; + height: 30px; + outline: none; + position: absolute; + right: 0; + top: 0; + width: 30px; +} +.sbToggle:hover{ + background: url(../images/select-icons.png) 0 -167px no-repeat; +} +.sbToggleOpen{ + background: url(../images/select-icons.png) 0 -16px no-repeat; +} +.sbToggleOpen:hover{ + background: url(../images/select-icons.png) 0 -66px no-repeat; +} +.sbHolderDisabled{ + background-color: #3C3C3C; + border: solid 1px #515151; +} +.sbHolderDisabled .sbHolder{ + +} +.sbHolderDisabled .sbToggle{ + +} + +// Ausklappliste + +.sbOptions{ +// background-color: #212121; + .background-color-0-gray; + border: solid 1px #515151; + list-style: none; + left: -1px; + margin: 0; + padding: 0; + position: absolute; + top: 30px; + width: 200px; + z-index: 1; + overflow-y: auto; + + li{ + padding: 0 7px; + } + + a{ + border-bottom: dotted 1px #515151; + display: block; + outline: none; + padding: 7px 0 7px 3px; + } + + a:link, + a:visited{ + .color-100-gray; + text-decoration: none; + } + a:hover, + a:focus, + a.sbFocus{ + color: #EBB52D; + } + li.last a{ + border-bottom: none; + } + + + .sbDisabled{ + border-bottom: dotted 1px #515151; + color: #999; + display: block; + padding: 7px 0 7px 3px; + } + .sbGroup{ + border-bottom: dotted 1px #515151; + color: #EBB52D; + display: block; + font-weight: bold; + padding: 7px 0 7px 3px; + } + .sbSub{ + padding-left: 17px; + } +} + +// Tabellen + +.th { + background-color: #e0e0e0; +} + +// Links + +a:link, a:visited, select, input, textarea { + color : @link-color; +} + +select,input,button +{ + .color-100-gray; + font-size:99%; + padding: 0.2em 0; + border-width: 1px; + border-style: solid; + .border-color-15-gray; +} + +select +{ + font-size:100%; +} + +a:link,a:visited +{ + cursor:pointer; + color: @link-color; + text-decoration: none; +} + +a:hover,a:active +{ + cursor:pointer; + color:@link-color-active; + text-decoration: underline; +} + +.divLoginboxHeader, +.divSideboxHeader, +a.appTitles, +.appTitles, +a.textSidebox, +.textSidebox,#fmStatusBar +{ + font-size:90%; +} + +.prefSection +{ + font-weight:bold; + font-size:145%; + line-height:40px; +} + +#divAppboxHeader +{ + line-height:28px; + font-size:125%; + font-weight:bold; + color:#666666; +} + +#divGenTime,#divPoweredBy +{ + font-size: 80%; + color: #ff0000; +} + +#divPoweredBy +{ + color: #000000; +} + +#sideboxdragarea { + z-index:100; + position:absolute; + left:0px; + top:105px; +} + +#menu2handle { + padding-top: 10px; +} + +#menu1close { + position: absolute; + right: 7px; + top: 7px; +} + + +//############################################################################################################## + +// Lettersearch + +.lettersearch { + .Complete_Button_lettersearch; +} + +.lettersearch:hover { + .background-color-30-gray; + .color-0-gray; + } + + +.lettersearch_active{ + .Complete_Button_lettersearch; + .background-color-30-gray; +// background-color: #808080 !important; + font-weight: bold; + } + +td.lettersearch { +// border-color: #E0E0E0; + background-image: none; +} + + +.nextmatch_header table { + border: none !important; + width: 99% !important; +} + + +.egw_fw_ui_sidemenu_marker { + display: block; + height: 20px; + padding: 2px 5px 2px 34px; + margin: 0; + border-width: 0px 1px 0px 1px; + border-style: solid; + border-color: #c6ced6; + cursor: pointer; + color: gray; + background-color: RGB(250, 250, 250); + -moz-border-radius:5px; + -webkit-border-radius:5px; + border-radius:5px; + + h1{ + display: inline; + font-size: 10pt; + font-weight: bold; + } +} + + + +.egw_fw_ui_ajaxloader { + display: inline-block; + width: 16px; + height: 16px; + background-image:url(images/ajax-loader.gif); + background-repeat: no-repeat; + background-position: center; + float: right; +} + + + + + + +/* traditional */ + + + +form +{ + margin:0px; + padding:0px; +} + +img +{ + border:0; +} + + +input,button,select +{ + border: solid 1px #bbbbbb; + padding: 0.2em; + font-size: 1.1em; +} + +input[type=submit],input[type=button],input[type=reset],button,.egwbutton +{ + .background-color-10-gray; + background-image: none; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} + +input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover,button:hover,.egwbutton:hover +{ + .background-color-15-gray; + background-image: none; + border: outset 1px #b9d5e3; + color: #004e7d; +} + +input[type=submit]:active,input[type=button]:active,input[type=reset]:active,button:active,.egwbutton:active +{ + border: inset 1px #bbbbbb; +} + +input[type=submit]:disabled,input[type=button]:disabled,input[type=reset]:disabled,button:disabled,.egwbutton:disabled +{ + background-color: transparent; + color: gray; +} + +input.egwbutton +{ + background-color:#b9d5e3; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} + +input.egwbutton:hover +{ + background-color:#94bfd4; + border: outset 1px #b9d5e3; + color: #004e7d; +} +input.egwbutton:active +{ + border: inset 1px #bbbbbb; +} + +input[type=image] +{ + cursor: pointer; + border: 0; +} + +#thesideboxcolumn +{ + width: 177px; + position:relative; +} + +#sideresize +{ + background-image:url(../images/resize.png); + width:13px; + height:13px; + right:1px; + top:1px; + position:absolute; + z-index:9999; +} + + + + + +.divSidebox +{ + position:relative; + border: #9c9c9c 1px solid; + overflow:auto; +} + +.divSideboxHeader +{ + text-align:center; + .background-color-15-gray; + padding-top:2px; + .color-50-gray; +} + + +a.divSideboxEntry, .divSideboxEntry +{ + text-align:left; + background-color:#FDFDFD; +} + +a.appTitles,.appTitles +{ + height:18px; + padding-top:2px; + padding-bottom:2px; +} + +a.textSidebox +{ + padding: 0; + border-top: 0; +} + +.textSidebox +{ + padding-top:3px; + padding-bottom:3px; + padding-left: 1px; + border-top: solid #aaaaaa 1px; + overflow: auto; +} + +.sideboxSpace +{ + height:9px; +} + +.greyLine +{ + margin:1px; + border-top:solid 1px #7e7e7e; + height:1px; +} + +#extraIcons +{ + background-color:#eeeeee; + border:solid 1px #7e7e7e; +} + +.extraIconsRow +{ + border:solid 1px #dddddd; + padding:2px; +} + +#topmenu +{ + background-color: #0081c1; + background-image: url(../images/bgtopmenu2.png); + color:#006699; + /*border-top: solid 1px #7e7e7e;*/ + border-bottom: solid #5793ff 1px; + height:20px; + padding-top:4px ; + line-height:16px; +} +#topmenu a +{ + color:#006699; +} + +#topmenu_items +{ + float:left; +} +#topmenu_info +{ + float:right; +} + +#divUpperTabs +{ + text-align:right; + height: 15px; + margin-right: 10px; +} + +#divUpperTabs ul +{ + display:inline; + margin:0; + padding:10px 10px 0 1px; + list-style:none; +} + +#divUpperTabs li +{ + float:right; + margin:0 5px 0 0; + padding:0 5px 0 5px; + border:solid 1px #9c9c9c; + border-bottom: 0px; +} + +//#divAppIconBar +//{ +// background-color:silver; +// border:solid 1px #9c9c9c; +// background-image: url(../images/background-icon-bar.png); +// background-repeat: repeat-x; +// overflow:visible; +// height: 45px; /* prevents text line to show in IE7+8(Compatibilitymode) */ +//} + +/* Star-Plus-HTML Hack fix for the above */ +*:first-child+html #divAppIconBar +{ + height: 60px; +} + +#divAppTextBar +{ + background-color:white; +} + +#divStatusBar +{ + background-color:white; + height:18px; + padding-left:3px; +} + +#tdSidebox +{ + width:170px; + background-color:white; + overflow:visible; +} + +#tdAppbox +{ + background-color:white; + padding-left:5px; + width: 100%; +} + +#divAppboxHeader +{ + background-image:url(../images/appbox-header-background.png); + background-repeat: repeat-x; + height: 25px; + border-bottom:solid 1px #c0c0c0; + text-align:center; + padding-bottom:0px; + border-top:solid 1px #9c9c9c; + border-left:solid 1px #9c9c9c; + border-right:solid 1px #9c9c9c; +} + +#divAppbox +{ + background-color:#ffffff; + padding:5px; + border-bottom:solid 1px #9c9c9c; + border-left:solid 1px #9c9c9c; + border-right:solid 1px #9c9c9c; +} + +#divGenTime,#divPoweredBy +{ + bottom:4px; + text-align:center; + width:99%; +} \ No newline at end of file diff --git a/phpgwapi/templates/default/def_design_pattern_color_font_shadow.less b/phpgwapi/templates/default/def_design_pattern_color_font_shadow.less new file mode 100755 index 0000000000..aa86fe4c96 --- /dev/null +++ b/phpgwapi/templates/default/def_design_pattern_color_font_shadow.less @@ -0,0 +1,577 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for colors, fonts, borders and box shadow + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + + // Farben +// CI EGW + +// Orange +@egw_color_1 : rgb(255, 194, 0); // #ffc200 +@egw_color_1_a : #ffc200; +@egw_color_1_b : #BF9D30; +@egw_color_1_c : #A67E00; +@egw_color_1_d : #FFD140; +@egw_color_1_e : #FFDD73; + +// BLUE +@egw_color_2_a : #0C5DA5; +@egw_color_2_b : #26537C; +@egw_color_2_c : #043A6B; +@egw_color_2_d : #408DD2; +@egw_color_2_e : #679FD2; + + +// Lila +@egw_color_3_a : #560EAD; +@egw_color_3_b : #512882; +@egw_color_3_c : #360570; +@egw_color_3_d : #8643D6; +@egw_color_3_e : #9B6AD6; + + + + +@egw_color_blue : #1D1AB2; + +@egw_color_blue_lighter : #0B5FA4 ; + +@egw_color_blue_lightest :#66A1D2; + +//Berechnung der EGW Farben + +.background-color-egw-normal {background-color : @egw_color_1_a !important;} +.background-color-egw-light {background-color : @egw_color_1_d;} +.background-color-egw-lighter {background-color : @egw_color_1_e;} +.background-color-egw-dark {background-color : @egw_color_2_a;} +.background-color-egw-darker {background-color : @egw_color_2_b;} + + + + +@blue : blue; + +@gray : #000000; + +@red: #FF0000; + +@yellow : #FFD40F; + +@lightgray : #E4E7EA; + +@link-color : #000000; + +@link-color-active: @link-color*010101; + +@active_button_border_bottom : @egw_color_2_d; // soll EGROUPWARE FARBE GEBEN + +@color-hint : @egw_color_1_a; + +// aktiverte Zeilen in allen APP mit Listenausgabe +@active_row : #679FD2; + +// Grauwerte + +.color-0-gray { color : lighten(@gray, 100%);} +.color-5-gray { color : lighten(@gray, 95%);} +.color-10-gray { color : lighten(@gray, 90%);} +.color-15-gray { color : lighten(@gray, 85%);} +.color-25-gray { color : lighten(@gray, 75%);} +.color-30-gray { color : lighten(@gray, 70%);} +.color-40-gray { color : lighten(@gray, 60%);} +.color-50-gray { color : lighten(@gray, 50%);} +.color-100-gray { color : @gray; } + +// Hintergrundfarben + +// Warnung + +.background-color-warning {background-color : @red;} + +.background-color-hint {background-color : darken(@red, 5%);} + + +//Grautöne + +.background-color-0-gray { background-color : lighten(@gray, 100%);} +.background-color-5-gray { background-color : lighten(@gray, 98%); } +.background-color-10-gray { background-color : lighten(@gray, 94%); } +.background-color-15-gray { background-color : lighten(@gray, 85%); } +.background-color-25-gray { background-color : lighten(@gray, 75%); } +.background-color-30-gray { background-color : lighten(@gray, 70%) !important; } +.background-color-40-gray { background-color : lighten(@gray, 60%); } +.background-color-50-gray { background-color : lighten(@gray, 50%); } + +//Contexthilfe + +.background-color-Context-Help{ background-color: @egw_color_1;} + + + +.background-color-required-field { + background-color : #FFF; + color: #000; + border: 1px solid red;} + +.background-color-dialog-container {background-color : lighten(@gray, 100%); } + +.background-color-search {background-color : lighten(@egw_color_1, 15%); } + +// cal Heute + +.background-table-cal-head { background-color : @egw_color_1_a;} + +// Bordercolor + +.border-color-10-gray { border-color : lighten(@gray, 94%); } +.border-color-15-gray { border-color : lighten(@gray, 85%); } +.border-color-25-gray { border-color : lighten(@gray, 75%); } +.border-color-50-gray { border-color : lighten(@gray, 50%); } + +//Bilder + +// Schriften + +.basefontfamily{ + //font-family: Verdana, Helvetica, Sans-Serif; + font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; +// font-size: 16px; + font-size: 87.5%; +} + +// ############################# +// Schriftformate + +p { font-size: 12px;} + +li {} + + +h1 { + font-size: 200%; + line-height: 1.2em; + margin: 0.4em 0 0; +} +h2 { + font-size: 170%; + line-height: 1.2em; + margin: 0.6em 0 0; +} +h3 { + font-size: 150%; + line-height: 0.8571em; + margin: 0.8571em 0 0; +} +h3 a { + color: #999999; +} +h4 { + font-size: 110%; + line-height: 1.125em; + margin: 1.125em 0 0; +} +h5 { + font-size: 100%; + line-height: 1.2857em; + margin: 1.2857em 0 0; +} +h6 { + font-size: 100%; + font-weight: bold; + line-height: 1.5em; + margin: 1.5em 0 0; +} + + + + + +// Radius + +.border_radius_button_lefttop { + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} + +.border_radius_button_righttop { + -webkit-border-radius: 3px; + -webkit-border-top-right-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topright: 20px; + border-radius: 3px; + border-top-right-radius: 20px; +} + +.border_radius_button_normal { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + + +// Box Shadow +// auf hellem Hintergrund + +.box_shadow_standard_light { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + } + + +// wird dunkler + +.box_shadow_standard_light_hover { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); +// -webkit-box-shadow: none; +// -moz-box-shadow: none; +// box-shadow:none; + + } + +// für focus und active + +.box_shadow_standard_light_inset { + -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); + } + + + +// Rahmen um Hauptinhalt + +.box_shadow_dialog { +// -webkit-box-shadow: -3px 20px 29px @egw_color_1; +// -moz-box-shadow: -3px 20px 29px @egw_color_1; +// box-shadow: -3px 20px 29px @egw_color_1; + } + + +// Rahmen für Dialoge + +.box_shadow_edit_dialog { +// -webkit-box-shadow: 1px 2px 3px rgba(50, 50, 50, 0.75); +// -moz-box-shadow: 1px 2px 3px rgba(50, 50, 50, 0.75); +// box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.75); + + -moz-box-shadow: inset 0 0 5px 5px #888; + -webkit-box-shadow: inset 0 0 5px 5px #888; + box-shadow: inset 0 0 5px 5px #888; + + margin: 5px ; + padding: 0%; + width: 100%; + } + + +// ############################# +// Verlauf + +.background_verlauf_diagonal_gray (@i: #d8d8d8, @j: #a3a3a3) { + background: -webkit-gradient(linear, 0 0, 0 bottom, @i, @j), + -moz-linear-gradient(@i, @j), + -o-linear-gradient(@i, @j), + linear-gradient(@i, @j); + -pie-background: linear-gradient(@i, @j); + behavior: url(/PIE.htc); + } + +.background_linear_gradient(@i: #ffb76b, @j: #ff7f04) { + background: -webkit-gradient(linear, 0 0, 0 bottom, @i, @j), + -moz-linear-gradient(@i, @j), + -o-linear-gradient(@i, @j), + linear-gradient(@i, @j); + -pie-background: linear-gradient(@i, @j); + behavior: url(/PIE.htc); + } + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color, + -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)), + -ms-linear-gradient(bottom, @start, @stop), + -moz-linear-gradient(center bottom, @start 0%, @stop 100%), + -o-linear-gradient(@stop, @start); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); +} + + +.bw_gradient(@color: #F5F5F5, @start: 0, @stop: 255) { + background: @color, + -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))), + -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%), + -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%), + -o-linear-gradient(rgb(@stop,@stop,@stop), + rgb(@start,@start,@start)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); +} + +// ############################# +// Transparenz + +.transparent_50 { + /* Required for IE 5, 6, 7 */ + /* ...or something to trigger hasLayout, like zoom: 1; */ + width: 100%; + + /* Theoretically for IE 8 & 9 (more valid) */ + /* ...but not required as filter works too */ + /* should come BEFORE filter */ + -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + + /* This works in IE 8 & 9 too */ + /* ... but also 5, 6, 7 */ + filter: alpha(opacity=50); + + /* Older than Firefox 0.9 */ + -moz-opacity:0.5; + + /* Safari 1.x (pre WebKit!) */ + -khtml-opacity: 0.5; + + /* Modern! + /* Firefox 0.9+, Safari 2?, Chrome any? + /* Opera 9+, IE 9+ */ + opacity: 0.5; +} +// ############################# +// Button Größen + +.Button_size_square_32{ + width: 32px; + height: 32px; + +} + +.Button_size_square_16{ + width: 16px; + height: 16px; +} + +.Button_size_square_8{ + width: 8px; + height: 8px; +} + +.Button_size_h32_auto{ + width: auto; + height: 32px; +} + +// Rahmen für Schaltflächen + +.border_normal{ + border: 1px solid rgba(0, 0, 0, 0.15); +} + +.border_hover{ + border: 1px solid rgba(0, 0, 0, 0.5); +} +.border_active{ + border: 1px solid rgba(0, 0, 0, 0.9); +} + + + +// Flächen + +// Hintergrund für Filter +// Filterfläche + +.Rectangle_filters { + + padding: 0 0 0 1em; + + .background-color-10-gray; + margin-bottom: 3px; + margin: 0em; +// vertical-align: top; + border-width: 0 0 1px 0; + .border-color-15-gray; + background-image: none; + +} + +/*--------------------------------------------------- + LESS Elements 0.9 + --------------------------------------------------- + A set of useful LESS mixins + More info at: http://lesselements.com + ---------------------------------------------------*/ + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color, + -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, @start), + color-stop(1, @stop)), + -ms-linear-gradient(bottom, + @start, + @stop), + -moz-linear-gradient(center bottom, + @start 0%, + @stop 100%), + -o-linear-gradient(@stop, + @start); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); +} +.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { + background: @color, + -webkit-gradient(linear, + left bottom, + left top, + color-stop(0, rgb(@start,@start,@start)), + color-stop(1, rgb(@stop,@stop,@stop))), + -ms-linear-gradient(bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%), + -moz-linear-gradient(center bottom, + rgb(@start,@start,@start) 0%, + rgb(@stop,@stop,@stop) 100%), + -o-linear-gradient(rgb(@stop,@stop,@stop), + rgb(@start,@start,@start)); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); +} +.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { + border-top: solid 1px @top-color; + border-left: solid 1px @left-color; + border-right: solid 1px @right-color; + border-bottom: solid 1px @bottom-color; +} +.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @r:0, @g:0, @b:0, @alpha: 0.1, @inset:inset) { + -webkit-box-shadow: @x-axis @y-axis @blur rgba(@r, @g, @b, @alpha) @inset; + -moz-box-shadow: @x-axis @y-axis @blur rgba(@r, @g, @b, @alpha) @inset; + box-shadow: @x-axis @y-axis @blur rgba(@r, @g, @b, @alpha) @inset; +} +.rounded(@radius: 2px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} +.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { + -webkit-border-top-right-radius: @topright; + -webkit-border-bottom-right-radius: @bottomright; + -webkit-border-bottom-left-radius: @bottomleft; + -webkit-border-top-left-radius: @topleft; + -moz-border-radius-topright: @topright; + -moz-border-radius-bottomright: @bottomright; + -moz-border-radius-bottomleft: @bottomleft; + -moz-border-radius-topleft: @topleft; + border-top-right-radius: @topright; + border-bottom-right-radius: @bottomright; + border-bottom-left-radius: @bottomleft; + border-top-left-radius: @topleft; + .background-clip(padding-box); +} +.opacity(@opacity: 0.5) { + -moz-opacity: @opacity; + -khtml-opacity: @opacity; + -webkit-opacity: @opacity; + opacity: @opacity; + @opperc: @opacity * 100; + -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; + filter: ~"alpha(opacity=@{opperc})"; +} +.transition-duration(@duration: 0.2s) { + -moz-transition-duration: @duration; + -webkit-transition-duration: @duration; + -o-transition-duration: @duration; + transition-duration: @duration; +} +.transform(...) { + -webkit-transform: @arguments; + -moz-transform: @arguments; + -o-transform: @arguments; + -ms-transform: @arguments; + transform: @arguments; +} +.rotation(@deg:5deg){ + .transform(rotate(@deg)); +} +.scale(@ratio:1.5){ + .transform(scale(@ratio)); +} +.transition(@duration:0.2s, @ease:ease-out) { + -webkit-transition: all @duration @ease; + -moz-transition: all @duration @ease; + -o-transition: all @duration @ease; + transition: all @duration @ease; +} +.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { + -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); + box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); +} +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; +} +.box-sizing(@sizing: border-box) { + -ms-box-sizing: @sizing; + -moz-box-sizing: @sizing; + -webkit-box-sizing: @sizing; + box-sizing: @sizing; +} +.user-select(@argument: none) { + -webkit-user-select: @argument; + -moz-user-select: @argument; + -ms-user-select: @argument; + user-select: @argument; +} +.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { + -moz-column-width: @colwidth; + -moz-column-count: @colcount; + -moz-column-gap: @colgap; + -moz-column-rule-color: @columnRuleColor; + -moz-column-rule-style: @columnRuleStyle; + -moz-column-rule-width: @columnRuleWidth; + -webkit-column-width: @colwidth; + -webkit-column-count: @colcount; + -webkit-column-gap: @colgap; + -webkit-column-rule-color: @columnRuleColor; + -webkit-column-rule-style: @columnRuleStyle; + -webkit-column-rule-width: @columnRuleWidth; + column-width: @colwidth; + column-count: @colcount; + column-gap: @colgap; + column-rule-color: @columnRuleColor; + column-rule-style: @columnRuleStyle; + column-rule-width: @columnRuleWidth; +} +.translate(@x:0, @y:0) { + .transform(translate(@x, @y)); +} +.background-clip(@argument: padding-box) { + -moz-background-clip: @argument; + -webkit-background-clip: @argument; + background-clip: @argument; +} \ No newline at end of file diff --git a/phpgwapi/templates/default/def_icons.less b/phpgwapi/templates/default/def_icons.less new file mode 100755 index 0000000000..0d40e84ed9 --- /dev/null +++ b/phpgwapi/templates/default/def_icons.less @@ -0,0 +1,339 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Definitions for icons using entypo-icon-font + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + +@import (reference) "def_design_pattern_color_font_shadow.less"; +//######################################################################################################## +// Icons +// +//######################################################################################################## + +@charset "UTF-8"; + +@font-face { + font-family: 'entypo-icon-font'; + src: url("../fonts/entypo-icon-font/entypo-icon-font.eot"); + src: url("../fonts/entypo-icon-font/entypo-icon-font.eot?#iefix") format('embedded-opentype'), url("../fonts/entypo-icon-font/entypo-icon-font.woff") format('woff'), url("../fonts/entypo-icon-font/entypo-icon-font.ttf") format('truetype'), url("../fonts/entypo-icon-font/entypo-icon-font.svg#entypo-icon-font") format('svg'); + font-weight: normal; + font-style: normal; +} +[class^="icon-"]:before, +[class*=" icon-"]:before, +[class*=" ui-icon-"]:before, +[class*="ui-icon-"]:before +{ + font-family: 'entypo-icon-font'; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: 0.2em; + text-align: center; + /*opacity: 0.8;*/ +/* fix buttons height, for twitter bootstrap */ + line-height: 1em; +/* Animation center compensation - magrins should be symmetric */ +/* remove if not needed */ + margin-left: 0.2em; +/* you can be more comfortable with increased icons size */ + font-size: 120%; +/* Uncomment for 3D effect */ +/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-plus:before { content: '\2b'; } /* '+' */ +.icon-minus:before { content: '\2d'; } /* '-' */ +.icon-info:before { content: '\2139'; } /* 'ℹ' */ +.icon-left-thin:before { content: '\2190'; } /* '←' */ +.icon-up-thin:before { content: '\2191'; } /* '↑' */ +.icon-right-thin:before { content: '\2192'; } /* '→' */ +.icon-down-thin:before { content: '\2193'; } /* '↓' */ +.icon-level-up:before { content: '\21b0'; } /* '↰' */ +.icon-level-down:before { content: '\21b3'; } /* '↳' */ +.icon-switch:before { content: '\21c6'; } /* '⇆' */ +.icon-infinity:before { content: '\221e'; } /* '∞' */ +.icon-plus-squared:before { content: '\229e'; } /* '⊞' */ +.icon-minus-squared:before { content: '\229f'; } /* '⊟' */ +.icon-home:before { content: '\2302'; } /* '⌂' */ +.icon-keyboard:before { content: '\2328'; } /* '⌨' */ +.icon-erase:before { content: '\232b'; } /* '⌫' */ +.icon-pause:before { content: '\2389'; } /* '⎉' */ +.icon-fast-forward:before { content: '\23e9'; } /* '⏩' */ +.icon-fast-backward:before { content: '\23ea'; } /* '⏪' */ +.icon-to-end:before { content: '\23ed'; } /* '⏭' */ +.icon-to-start:before { content: '\23ee'; } /* '⏮' */ +.icon-hourglass:before { content: '\23f3'; } /* '⏳' */ +.icon-stop:before { content: '\25a0'; } /* '■' */ +.icon-up-dir:before { content: '\25b4'; } /* '▴' */ +.icon-play:before { content: '\25b6'; } /* '▶' */ +.icon-right-dir:before { content: '\25b8'; } /* '▸' */ +.icon-down-dir:before { content: '\25be'; } /* '▾' */ +.icon-left-dir:before { content: '\25c2'; } /* '◂' */ +.icon-adjust:before { content: '\25d1'; } /* '◑' */ +.icon-cloud:before { content: '\2601'; } /* '☁' */ +.icon-star:before { content: '\2605'; } /* '★' */ +.icon-star-empty:before { content: '\2606'; } /* '☆' */ +.icon-cup:before { content: '\2615'; } /* '☕' */ +.icon-menu:before { content: '\2630'; } /* '☰' */ +.icon-moon:before { content: '\263d'; } /* '☽' */ +.icon-heart-empty:before { content: '\2661'; } /* '♡' */ +.icon-heart:before { content: '\2665'; } /* '♥' */ +.icon-note:before { content: '\266a'; } /* '♪' */ +.icon-note-beamed:before { content: '\266b'; } /* '♫' */ +.icon-layout:before { content: '\268f'; } /* '⚏' */ +.icon-flag:before { content: '\2691'; } /* '⚑' */ +.icon-tools:before { content: '\2692'; } /* '⚒' */ +.icon-cog:before { content: '\2699'; } /* '⚙' */ +.icon-attention:before { content: '\26a0'; } /* '⚠' */ +.icon-flash:before { content: '\26a1'; } /* '⚡' */ +.icon-record:before { content: '\26ab'; } /* '⚫' */ +.icon-cloud-thunder:before { content: '\26c8'; } /* '⛈' */ +.icon-tape:before { content: '\2707'; } /* '✇' */ +.icon-flight:before { content: '\2708'; } /* '✈' */ +.icon-mail:before { content: '\2709'; } /* '✉' */ +.icon-pencil:before { content: '\270e'; } /* '✎' */ +.icon-feather:before { content: '\2712'; } /* '✒' */ +.icon-check:before { content: '\2713'; } /* '✓' */ +.icon-cancel:before { content: '\2715'; } /* '✕' */ +.icon-cancel-circled:before { content: '\2716'; } /* '✖' */ +.icon-cancel-squared:before { content: '\274e'; } /* '❎' */ +.icon-help:before { content: '\2753'; } /* '❓' */ +.icon-quote:before { content: '\275e'; } /* '❞' */ +.icon-plus-circled:before { content: '\2795'; } /* '➕' */ +.icon-minus-circled:before { content: '\2796'; } /* '➖' */ +.icon-right:before { content: '\27a1'; } /* '➡' */ +.icon-direction:before { content: '\27a2'; } /* '➢' */ +.icon-forward:before { content: '\27a6'; } /* '➦' */ +.icon-ccw:before { content: '\27f2'; } /* '⟲' */ +.icon-cw:before { content: '\27f3'; } /* '⟳' */ +.icon-left:before { content: '\2b05'; } /* '⬅' */ +.icon-up:before { content: '\2b06'; } /* '⬆' */ +.icon-down:before { content: '\2b07'; } /* '⬇' */ +.icon-list-add:before { content: '\e003'; } /* '' */ +.icon-list:before { content: '\e005'; } /* '' */ +.icon-left-bold:before { content: '\e4ad'; } /* '' */ +.icon-right-bold:before { content: '\e4ae'; } /* '' */ +.icon-up-bold:before { content: '\e4af'; } /* '' */ +.icon-down-bold:before { content: '\e4b0'; } /* '' */ +.icon-user-add:before { content: '\e700'; } /* '' */ +.icon-help-circled:before { content: '\e704'; } /* '' */ +.icon-info-circled:before { content: '\e705'; } /* '' */ +.icon-eye:before { content: '\e70a'; } /* '' */ +.icon-tag:before { content: '\e70c'; } /* '' */ +.icon-upload-cloud:before { content: '\e711'; } /* '' */ +.icon-reply:before { content: '\e712'; } /* '' */ +.icon-reply-all:before { content: '\e713'; } /* '' */ +.icon-code:before { content: '\e714'; } /* '' */ +.icon-export:before { content: '\e715'; } /* '' */ +.icon-print:before { content: '\e716'; } /* '' */ +.icon-retweet:before { content: '\e717'; } /* '' */ +.icon-comment:before { content: '\e718'; } /* '' */ +.icon-chat:before { content: '\e720'; } /* '' */ +.icon-vcard:before { content: '\e722'; } /* '' */ +.icon-address:before { content: '\e723'; } /* '' */ +.icon-location:before { content: '\e724'; } /* '' */ +.icon-map:before { content: '\e727'; } /* '' */ +.icon-compass:before { content: '\e728'; } /* '' */ +.icon-trash:before { content: '\e729'; } /* '' */ +.icon-doc:before { content: '\e730'; } /* '' */ +.icon-doc-text-inv:before { content: '\e731'; } /* '' */ +.icon-docs:before { content: '\e736'; } /* '' */ +.icon-doc-landscape:before { content: '\e737'; } /* '' */ +.icon-archive:before { content: '\e738'; } /* '' */ +.icon-rss:before { content: '\e73a'; } /* '' */ +.icon-share:before { content: '\e73c'; } /* '' */ +.icon-basket:before { content: '\e73d'; } /* '' */ +.icon-shareable:before { content: '\e73e'; } /* '' */ +.icon-login:before { content: '\e740'; } /* '' */ +.icon-logout:before { content: '\e741'; } /* '' */ +.icon-volume:before { content: '\e742'; } /* '' */ +.icon-resize-full:before { content: '\e744'; } /* '' */ +.icon-resize-small:before { content: '\e746'; } /* '' */ +.icon-popup:before { content: '\e74c'; } /* '' */ +.icon-publish:before { content: '\e74d'; } /* '' */ +.icon-window:before { content: '\e74e'; } /* '' */ +.icon-arrow-combo:before { content: '\e74f'; } /* '' */ +.icon-chart-pie:before { content: '\e751'; } /* '' */ +.icon-language:before { content: '\e752'; } /* '' */ +.icon-air:before { content: '\e753'; } /* '' */ +.icon-database:before { content: '\e754'; } /* '' */ +.icon-drive:before { content: '\e755'; } /* '' */ +.icon-bucket:before { content: '\e756'; } /* '' */ +.icon-thermometer:before { content: '\e757'; } /* '' */ +.icon-down-circled:before { content: '\e758'; } /* '' */ +.icon-left-circled:before { content: '\e759'; } /* '' */ +.icon-right-circled:before { content: '\e75a'; } /* '' */ +.icon-up-circled:before { content: '\e75b'; } /* '' */ +.icon-down-open:before { content: '\e75c'; } /* '' */ +.icon-left-open:before { content: '\e75d'; } /* '' */ +.icon-right-open:before { content: '\e75e'; } /* '' */ +.icon-up-open:before { content: '\e75f'; } /* '' */ +.icon-down-open-mini:before { content: '\e760'; } /* '' */ +.icon-left-open-mini:before { content: '\e761'; } /* '' */ +.icon-right-open-mini:before { content: '\e762'; } /* '' */ +.icon-up-open-mini:before { content: '\e763'; } /* '' */ +.icon-down-open-big:before { content: '\e764'; } /* '' */ +.icon-left-open-big:before { content: '\e765'; } /* '' */ +.icon-right-open-big:before { content: '\e766'; } /* '' */ +.icon-up-open-big:before { content: '\e767'; } /* '' */ +.icon-progress-0:before { content: '\e768'; } /* '' */ +.icon-progress-1:before { content: '\e769'; } /* '' */ +.icon-progress-2:before { content: '\e76a'; } /* '' */ +.icon-progress-3:before { content: '\e76b'; } /* '' */ +.icon-back-in-time:before { content: '\e771'; } /* '' */ +.icon-network:before { content: '\e776'; } /* '' */ +.icon-inbox:before { content: '\e777'; } /* '' */ +.icon-install:before { content: '\e778'; } /* '' */ +.icon-lifebuoy:before { content: '\e788'; } /* '' */ +.icon-mouse:before { content: '\e789'; } /* '' */ +.icon-dot:before { content: '\e78b'; } /* '' */ +.icon-dot-2:before { content: '\e78c'; } /* '' */ +.icon-dot-3:before { content: '\e78d'; } /* '' */ +.icon-suitcase:before { content: '\e78e'; } /* '' */ +.icon-flow-cascade:before { content: '\e790'; } /* '' */ +.icon-flow-branch:before { content: '\e791'; } /* '' */ +.icon-flow-tree:before { content: '\e792'; } /* '' */ +.icon-flow-line:before { content: '\e793'; } /* '' */ +.icon-flow-parallel:before { content: '\e794'; } /* '' */ +.icon-brush:before { content: '\e79a'; } /* '' */ +.icon-paper-plane:before { content: '\e79b'; } /* '' */ +.icon-magnet:before { content: '\e7a1'; } /* '' */ +.icon-gauge:before { content: '\e7a2'; } /* '' */ +.icon-traffic-cone:before { content: '\e7a3'; } /* '' */ +.icon-cc:before { content: '\e7a5'; } /* '' */ +.icon-cc-by:before { content: '\e7a6'; } /* '' */ +.icon-cc-nc:before { content: '\e7a7'; } /* '' */ +.icon-cc-nc-eu:before { content: '\e7a8'; } /* '' */ +.icon-cc-nc-jp:before { content: '\e7a9'; } /* '' */ +.icon-cc-sa:before { content: '\e7aa'; } /* '' */ +.icon-cc-nd:before { content: '\e7ab'; } /* '' */ +.icon-cc-pd:before { content: '\e7ac'; } /* '' */ +.icon-cc-zero:before { content: '\e7ad'; } /* '' */ +.icon-cc-share:before { content: '\e7ae'; } /* '' */ +.icon-cc-remix:before { content: '\e7af'; } /* '' */ +.icon-github:before { content: '\f300'; } /* '' */ +.icon-github-circled:before { content: '\f301'; } /* '' */ +.icon-flickr:before { content: '\f303'; } /* '' */ +.icon-flickr-circled:before { content: '\f304'; } /* '' */ +.icon-vimeo:before { content: '\f306'; } /* '' */ +.icon-vimeo-circled:before { content: '\f307'; } /* '' */ +.icon-twitter:before { content: '\f309'; } /* '' */ +.icon-twitter-circled:before { content: '\f30a'; } /* '' */ +.icon-facebook:before { content: '\f30c'; } /* '' */ +.icon-facebook-circled:before { content: '\f30d'; } /* '' */ +.icon-facebook-squared:before { content: '\f30e'; } /* '' */ +.icon-gplus:before { content: '\f30f'; } /* '' */ +.icon-gplus-circled:before { content: '\f310'; } /* '' */ +.icon-pinterest:before { content: '\f312'; } /* '' */ +.icon-pinterest-circled:before { content: '\f313'; } /* '' */ +.icon-tumblr:before { content: '\f315'; } /* '' */ +.icon-tumblr-circled:before { content: '\f316'; } /* '' */ +.icon-linkedin:before { content: '\f318'; } /* '' */ +.icon-linkedin-circled:before { content: '\f319'; } /* '' */ +.icon-dribbble:before { content: '\f31b'; } /* '' */ +.icon-dribbble-circled:before { content: '\f31c'; } /* '' */ +.icon-stumbleupon:before { content: '\f31e'; } /* '' */ +.icon-stumbleupon-circled:before { content: '\f31f'; } /* '' */ +.icon-lastfm:before { content: '\f321'; } /* '' */ +.icon-lastfm-circled:before { content: '\f322'; } /* '' */ +.icon-rdio:before { content: '\f324'; } /* '' */ +.icon-rdio-circled:before { content: '\f325'; } /* '' */ +.icon-spotify:before { content: '\f327'; } /* '' */ +.icon-spotify-circled:before { content: '\f328'; } /* '' */ +.icon-qq:before { content: '\f32a'; } /* '' */ +.icon-instagram:before { content: '\f32d'; } /* '' */ +.icon-dropbox:before { content: '\f330'; } /* '' */ +.icon-evernote:before { content: '\f333'; } /* '' */ +.icon-flattr:before { content: '\f336'; } /* '' */ +.icon-skype:before { content: '\f339'; } /* '' */ +.icon-skype-circled:before { content: '\f33a'; } /* '' */ +.icon-renren:before { content: '\f33c'; } /* '' */ +.icon-sina-weibo:before { content: '\f33f'; } /* '' */ +.icon-paypal:before { content: '\f342'; } /* '' */ +.icon-picasa:before { content: '\f345'; } /* '' */ +.icon-soundcloud:before { content: '\f348'; } /* '' */ +.icon-mixi:before { content: '\f34b'; } /* '' */ +.icon-behance:before { content: '\f34e'; } /* '' */ +.icon-google-circles:before { content: '\f351'; } /* '' */ +.icon-vkontakte:before { content: '\f354'; } /* '' */ +.icon-smashing:before { content: '\f357'; } /* '' */ +.icon-db-shape:before { content: '\f600'; } /* '' */ +.icon-sweden:before { content: '\f601'; } /* '' */ +.icon-logo-db:before { content: '\f603'; } /* '' */ +.icon-picture:before { content: '🌄'; } /* '\1f304' */ +.icon-globe:before { content: '🌎'; } /* '\1f30e' */ +.icon-leaf:before { content: '🍂'; } /* '\1f342' */ +.icon-graduation-cap:before { content: '🎓'; } /* '\1f393' */ +.icon-mic:before { content: '🎤'; } /* '\1f3a4' */ +.icon-palette:before { content: '🎨'; } /* '\1f3a8' */ +.icon-ticket:before { content: '🎫'; } /* '\1f3ab' */ +.icon-video:before { content: '🎬'; } /* '\1f3ac' */ +.icon-target:before { content: '🎯'; } /* '\1f3af' */ +.icon-music:before { content: '🎵'; } /* '\1f3b5' */ +.icon-trophy:before { content: '🏆'; } /* '\1f3c6' */ +.icon-thumbs-up:before { content: '👍'; } /* '\1f44d' */ +.icon-thumbs-down:before { content: '👎'; } /* '\1f44e' */ +.icon-bag:before { content: '👜'; } /* '\1f45c' */ +.icon-user:before { content: '👤'; } /* '\1f464' */ +.icon-users:before { content: '👥'; } /* '\1f465' */ +.icon-lamp:before { content: '💡'; } /* '\1f4a1' */ +.icon-alert:before { content: '💥'; } /* '\1f4a5' */ +.icon-water:before { content: '💦'; } /* '\1f4a6' */ +.icon-droplet:before { content: '💧'; } /* '\1f4a7' */ +.icon-credit-card:before { content: '💳'; } /* '\1f4b3' */ +.icon-monitor:before { content: '💻'; } /* '\1f4bb' */ +.icon-briefcase:before { content: '💼'; } /* '\1f4bc' */ +.icon-floppy:before { content: '💾'; } /* '\1f4be' */ +.icon-cd:before { content: '💿'; } /* '\1f4bf' */ +.icon-folder:before { content: '📁'; } /* '\1f4c1' */ +.icon-doc-text:before { content: '📄'; } /* '\1f4c4' */ +.icon-calendar:before { content: '📅'; } /* '\1f4c5' */ +.icon-chart-line:before { content: '📈'; } /* '\1f4c8' */ +.icon-chart-bar:before { content: '📊'; } /* '\1f4ca' */ +.icon-clipboard:before { content: '📋'; } /* '\1f4cb' */ +.icon-attach:before { content: '📎'; } /* '\1f4ce' */ +.icon-bookmarks:before { content: '📑'; } /* '\1f4d1' */ +.icon-book:before { content: '📕'; } /* '\1f4d5' */ +.icon-book-open:before { content: '📖'; } /* '\1f4d6' */ +.icon-phone:before { content: '📞'; } /* '\1f4de' */ +.icon-megaphone:before { content: '📣'; } /* '\1f4e3' */ +.icon-upload:before { content: '📤'; } /* '\1f4e4' */ +.icon-download:before { content: '📥'; } /* '\1f4e5' */ +.icon-box:before { content: '📦'; } /* '\1f4e6' */ +.icon-newspaper:before { content: '📰'; } /* '\1f4f0' */ +.icon-mobile:before { content: '📱'; } /* '\1f4f1' */ +.icon-signal:before { content: '📶'; } /* '\1f4f6' */ +.icon-camera:before { content: '📷'; } /* '\1f4f7' */ +.icon-shuffle:before { content: '🔀'; } /* '\1f500' */ +.icon-loop:before { content: '🔁'; } /* '\1f501' */ +.icon-arrows-ccw:before { content: '🔄'; } /* '\1f504' */ +.icon-light-down:before { content: '🔅'; } /* '\1f505' */ +.icon-light-up:before { content: '🔆'; } /* '\1f506' */ +.icon-mute:before { content: '🔇'; } /* '\1f507' */ +.icon-sound:before { content: '🔊'; } /* '\1f50a' */ +.icon-battery:before { content: '🔋'; } /* '\1f50b' */ +.icon-search:before { content: '🔍'; } /* '\1f50d' */ +.icon-key:before { content: '🔑'; } /* '\1f511' */ +.icon-lock:before { content: '🔒'; } /* '\1f512' */ +.icon-lock-open:before { content: '🔓'; } /* '\1f513' */ +.icon-bell:before { content: '🔔'; } /* '\1f514' */ +.icon-bookmark:before { content: '🔖'; } /* '\1f516' */ +.icon-link:before { content: '🔗'; } /* '\1f517' */ +.icon-back:before { content: '🔙'; } /* '\1f519' */ +.icon-flashlight:before { content: '🔦'; } /* '\1f526' */ +.icon-chart-area:before { content: '🔾'; } /* '\1f53e' */ +.icon-clock:before { content: '🕔'; } /* '\1f554' */ +.icon-rocket:before { content: '🚀'; } /* '\1f680' */ +.icon-block:before { content: '🚫'; } /* '\1f6ab' */ \ No newline at end of file diff --git a/phpgwapi/templates/default/def_messages.less b/phpgwapi/templates/default/def_messages.less new file mode 100755 index 0000000000..d411167f58 --- /dev/null +++ b/phpgwapi/templates/default/def_messages.less @@ -0,0 +1,52 @@ +/** + * EGroupware: CSS with less preprocessor + * + * et2 Messages + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + +@import (reference) "def_design_pattern_color_font_shadow.less"; +//@import "def_buttons.less"; + +.egw_fw_ui_app_header_container { + + border-width: 9px 0px 0px 9px; + border-style: solid; + .border-color-25-gray; + .background-color-25-gray; + + + + // Meldung oberhalb iFrame + .egw_fw_ui_app_header { + // display: none !important; + border-width: 0px 0px 0px 0px; + border-style: solid; + border-color: #D5DDE6; + .border_radius_button_righttop; + padding: 14px 2px 4px 15px; + font-size: 1em; + font-weight: normal; + .background-color-10-gray; + color: @egw_color_2_d; + width: 80%; + + &:before {content: "! "; color: @egw_color_1_a; font-size: 1em; } + } + + + + } + + .colselection.ui-widget-content { + width: 33%; +// margin-left: 49%; + + } \ No newline at end of file diff --git a/phpgwapi/templates/idots/css/traditional.css b/phpgwapi/templates/idots/css/traditional.css index 229a05d442..a097f963e6 100755 --- a/phpgwapi/templates/idots/css/traditional.css +++ b/phpgwapi/templates/idots/css/traditional.css @@ -1,899 +1,766 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ /* font styling allowed attributes: font-family,font-size,color,font-weight */ - -body -{ - overflow-x: hidden; +body, +td, +textarea { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; } - -body,td,textarea -{ - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 11px; +select, +input, +button { + color: #006699; + font-family: Arial, Helvetica, sans-serif; + font-size: 110%; } - -select,input,button -{ - color: #006699; - font-family: Arial, Helvetica, sans-serif; - font-size:110%; +select { + font-size: 100%; } - -select -{ - font-size:100%; +a:link, +a:visited { + cursor: pointer; + color: #006699; + text-decoration: none; } - -a:link,a:visited -{ - cursor:pointer; - color: #006699; - text-decoration: none; +a:hover, +a:active { + cursor: pointer; + color: #ff9933; + text-decoration: underline; } - -a:hover,a:active -{ - cursor:pointer; - color: #ff9933; - text-decoration: underline; +.divLoginboxHeader, +.divSideboxHeader, +a.appTitles, +.appTitles, +a.textSidebox, +.textSidebox, +#fmStatusBar { + font-size: 90%; } -.divLoginboxHeader,.divSideboxHeader,a.appTitles,.appTitles,a.textSidebox,.textSidebox,#fmStatusBar -{ - font-size:90%; +.prefSection { + font-weight: bold; + font-size: 145%; + line-height: 40px; } - -.prefSection -{ - font-weight:bold; - font-size:145%; - line-height:40px; +#divAppboxHeader { + line-height: 28px; + font-size: 125%; + font-weight: bold; + color: #666666; } - -#divAppboxHeader -{ - line-height:28px; - font-size:125%; - font-weight:bold; - color:#666666; +#divGenTime, +#divPoweredBy { + font-size: 80%; + color: #ff0000; } - -#divGenTime,#divPoweredBy -{ - font-size: 80%; - color: #ff0000; +#divPoweredBy { + color: #000000; } - -#divPoweredBy -{ - color: #000000; -} - #sideboxdragarea { - z-index:100; - position:absolute; - left:0px; - top:105px; + z-index: 100; + position: absolute; + left: 0px; + top: 105px; } - #menu2handle { - padding-top: 10px; + padding-top: 10px; } - #menu1close { - position: absolute; - right: 7px; - top: 7px; + position: absolute; + right: 7px; + top: 7px; } - /* other styling */ - -body -{ - background-image:url(../images/body-background.png); -} - -form -{ - margin:0px; - padding:0px; -} - -img -{ - border:0; -} - - -input,button,select -{ - border: solid 1px #bbbbbb; -} - -input[type=submit],input[type=button],input[type=reset],button,.egwbutton -{ - background-color:#b9d5e3; - border: outset 1px #b9d5e3; - margin: 1px; - padding: 1px; - cursor: pointer; - color: #004e7d; -} - -input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover,button:hover,.egwbutton:hover -{ - background-color:#94bfd4; - border: outset 1px #b9d5e3; - color: #004e7d; -} - -input[type=submit]:active,input[type=button]:active,input[type=reset]:active,button:active,.egwbutton:active -{ - border: inset 1px #bbbbbb; -} - -input[type=submit]:disabled,input[type=button]:disabled,input[type=reset]:disabled,button:disabled,.egwbutton:disabled -{ - background-color: transparent; - color: gray; -} - -input.egwbutton -{ - background-color:#b9d5e3; - border: outset 1px #b9d5e3; - margin: 1px; - padding: 1px; - cursor: pointer; - color: #004e7d; -} - -input.egwbutton:hover -{ - background-color:#94bfd4; - border: outset 1px #b9d5e3; - color: #004e7d; -} -input.egwbutton:active -{ - border: inset 1px #bbbbbb; -} - -input[type=image] -{ - cursor: pointer; - border: 0; -} - -#thesideboxcolumn -{ - width: 177px; - position:relative; -} - -#sideresize -{ - background-image:url(../images/resize.png); - width:13px; - height:13px; - right:1px; - top:1px; - position:absolute; - z-index:9999; -} - -.divLoginbox -{ - position:relative; - width: 370px; - border: #9c9c9c 1px solid; -} - -.divSidebox -{ - position:relative; - border: #9c9c9c 1px solid; - overflow:auto; -} - -.divSideboxHeader,.divLoginboxHeader -{ - text-align:center; - background-color:#dddddd; - padding-top:2px; - color:#666666; -} - -a.divSideboxEntry, .divSideboxEntry -{ - text-align:left; - background-color:#FDFDFD; -} - -a.appTitles,.appTitles -{ - height:18px; - padding-top:2px; - padding-bottom:2px; -} - -a.textSidebox -{ - padding: 0; - border-top: 0; -} - -.textSidebox -{ - padding-top:3px; - padding-bottom:3px; - padding-left: 1px; - border-top: solid #aaaaaa 1px; - overflow: auto; -} - -.sideboxSpace -{ - height:9px; -} - -.greyLine -{ - margin:1px; - border-top:solid 1px #7e7e7e; - height:1px; -} - -#extraIcons -{ - background-color:#eeeeee; - border:solid 1px #7e7e7e; -} - -.extraIconsRow -{ - border:solid 1px #dddddd; - padding:2px; -} - body { - padding: 0px; - margin: 0px; + background-image: url(../images/body-background.png); } - -#divMain,#loginMainDiv,#popupMainDiv -{ - background-color: white; - padding: 8px; - border-bottom: solid 1px #7e7e7e; +form { + margin: 0px; + padding: 0px; +} +img { + border: 0; +} +input, +button, +select { + border: solid 1px #bbbbbb; +} +input[type=submit], +input[type=button], +input[type=reset], +button, +.egwbutton { + background-color: #b9d5e3; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} +input[type=submit]:hover, +input[type=button]:hover, +input[type=reset]:hover, +button:hover, +.egwbutton:hover { + background-color: #94bfd4; + border: outset 1px #b9d5e3; + color: #004e7d; +} +input[type=submit]:active, +input[type=button]:active, +input[type=reset]:active, +button:active, +.egwbutton:active { + border: inset 1px #bbbbbb; +} +input[type=submit]:disabled, +input[type=button]:disabled, +input[type=reset]:disabled, +button:disabled, +.egwbutton:disabled { + background-color: transparent; + color: gray; +} +input.egwbutton { + background-color: #b9d5e3; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} +input.egwbutton:hover { + background-color: #94bfd4; + border: outset 1px #b9d5e3; + color: #004e7d; +} +input.egwbutton:active { + border: inset 1px #bbbbbb; +} +input[type=image] { + cursor: pointer; + border: 0; +} +#thesideboxcolumn { + width: 177px; + position: relative; +} +#sideresize { + background-image: url(../images/resize.png); + width: 13px; + height: 13px; + right: 1px; + top: 1px; + position: absolute; + z-index: 9999; +} +.divLoginbox { + position: relative; + width: 370px; + border: #9c9c9c 1px solid; +} +.divSidebox { + position: relative; + border: #9c9c9c 1px solid; + overflow: auto; +} +.divSideboxHeader, +.divLoginboxHeader { + text-align: center; + background-color: #dddddd; + padding-top: 2px; + color: #666666; +} +a.divSideboxEntry, +.divSideboxEntry { + text-align: left; + background-color: #FDFDFD; +} +a.appTitles, +.appTitles { + height: 18px; + padding-top: 2px; + padding-bottom: 2px; +} +a.textSidebox { + padding: 0; + border-top: 0; +} +.textSidebox { + padding-top: 3px; + padding-bottom: 3px; + padding-left: 1px; + border-top: solid #aaaaaa 1px; + overflow: auto; +} +.sideboxSpace { + height: 9px; +} +.greyLine { + margin: 1px; + border-top: solid 1px #7e7e7e; + height: 1px; +} +#extraIcons { + background-color: #eeeeee; + border: solid 1px #7e7e7e; +} +.extraIconsRow { + border: solid 1px #dddddd; + padding: 2px; +} +body { + padding: 0px; + margin: 0px; +} +#divMain, +#loginMainDiv, +#popupMainDiv { + background-color: white; + padding: 8px; + border-bottom: solid 1px #7e7e7e; } /* ** Popups */ -#popupMainDiv -{ - margin: 8px; - border: solid 1px #7e7e7e; - padding-bottom: 0px; +#popupMainDiv { + margin: 8px; + border: solid 1px #7e7e7e; + padding-bottom: 0px; } - -#divLogo -{ - position:absolute; - left:30px; - top:20px; - z-index:999; +#divLogo { + position: absolute; + left: 30px; + top: 20px; + z-index: 999; } - -#topmenu -{ - background-color: #0081c1; - background-image: url(../images/bgtopmenu2.png); - color:#006699; - /*border-top: solid 1px #7e7e7e;*/ - border-bottom: solid #5793ff 1px; - height:20px; - padding-top:4px ; - line-height:16px; +#topmenu { + background-color: #0081c1; + background-image: url(../images/bgtopmenu2.png); + color: #006699; + /*border-top: solid 1px #7e7e7e;*/ + border-bottom: solid #5793ff 1px; + height: 20px; + padding-top: 4px ; + line-height: 16px; } -#topmenu a -{ - color:#006699; +#topmenu a { + color: #006699; } - -#topmenu_items -{ - float:left; +#topmenu_items { + float: left; } -#topmenu_info -{ - float:right; +#topmenu_info { + float: right; } - -#divUpperTabs -{ - text-align:right; - height: 15px; - margin-right: 10px; +#divUpperTabs { + text-align: right; + height: 15px; + margin-right: 10px; } - -#divUpperTabs ul -{ - display:inline; - margin:0; - padding:10px 10px 0 1px; - list-style:none; +#divUpperTabs ul { + display: inline; + margin: 0; + padding: 10px 10px 0 1px; + list-style: none; } - -#divUpperTabs li -{ - float:right; - margin:0 5px 0 0;; - padding:0 5px 0 5px; - border:solid 1px #9c9c9c; - border-bottom: 0px; +#divUpperTabs li { + float: right; + margin: 0 5px 0 0; + padding: 0 5px 0 5px; + border: solid 1px #9c9c9c; + border-bottom: 0px; } - -#divAppIconBar -{ - background-color:silver; - border:solid 1px #9c9c9c; - background-image: url(../images/background-icon-bar.png); - background-repeat: repeat-x; - overflow:visible; - height: 45px; /* prevents text line to show in IE7+8(Compatibilitymode) */ +#divAppIconBar { + background-color: silver; + border: solid 1px #9c9c9c; + background-image: url(../images/background-icon-bar.png); + background-repeat: repeat-x; + overflow: visible; + height: 45px; + /* prevents text line to show in IE7+8(Compatibilitymode) */ } /* Star-Plus-HTML Hack fix for the above */ -*:first-child+html #divAppIconBar -{ - height: 60px; +*:first-child + html #divAppIconBar { + height: 60px; } - -#divAppTextBar -{ - background-color:white; +#divAppTextBar { + background-color: white; } - -#divStatusBar -{ - background-color:white; - height:18px; - padding-left:3px; +#divStatusBar { + background-color: white; + height: 18px; + padding-left: 3px; } - -#tdSidebox -{ - width:170px; - background-color:white; - overflow:visible; +#tdSidebox { + width: 170px; + background-color: white; + overflow: visible; } - -#tdAppbox -{ - background-color:white; - padding-left:5px; - width: 100%; +#tdAppbox { + background-color: white; + padding-left: 5px; + width: 100%; } - -#divAppboxHeader -{ - background-image:url(../images/appbox-header-background.png); - background-repeat: repeat-x; - height: 25px; - border-bottom:solid 1px #c0c0c0; - text-align:center; - padding-bottom:0px; - border-top:solid 1px #9c9c9c; - border-left:solid 1px #9c9c9c; - border-right:solid 1px #9c9c9c; +#divAppboxHeader { + background-image: url(../images/appbox-header-background.png); + background-repeat: repeat-x; + height: 25px; + border-bottom: solid 1px #c0c0c0; + text-align: center; + padding-bottom: 0px; + border-top: solid 1px #9c9c9c; + border-left: solid 1px #9c9c9c; + border-right: solid 1px #9c9c9c; } - -#divAppbox -{ - background-color:#ffffff; - padding:5px; - border-bottom:solid 1px #9c9c9c; - border-left:solid 1px #9c9c9c; - border-right:solid 1px #9c9c9c; +#divAppbox { + background-color: #ffffff; + padding: 5px; + border-bottom: solid 1px #9c9c9c; + border-left: solid 1px #9c9c9c; + border-right: solid 1px #9c9c9c; } - -#divGenTime,#divPoweredBy -{ - bottom:4px; - text-align:center; - width:99%; +#divGenTime, +#divPoweredBy { + bottom: 4px; + text-align: center; + width: 99%; } - /* Printing */ -@media screen { .onlyPrint { display: none; } } -@media print { .noPrint { display: none; } } - +@media screen { + .onlyPrint { + display: none; + } +} +@media print { + .noPrint { + display: none; + } +} /* Portal_box as used in home */ .portal_box { - border: #9c9c9c 1px solid; + border: #9c9c9c 1px solid; } - .portal_box table { - border: 1px solid black; + border: 1px solid black; } - .portal_box_header { - height: 15px; - padding-top: 0px; + height: 15px; + padding-top: 0px; } - /* Login page */ #loginMainDiv { - padding-top: 24px; - height: 700px; /* 95% does not work */ - position: relative; - background-repeat: no-repeat; - background-position: center 80px; - background-image: url(../images/login-background.jpg); + padding-top: 24px; + height: 700px; + /* 95% does not work */ + position: relative; + background-repeat: no-repeat; + background-position: center 80px; + background-image: url(../images/login-background.jpg); } #loginScreenMessage { - text-align: center; - padding: 10px; + text-align: center; + padding: 10px; } #loginCdMessage { - text-align: center; - padding-bottom: 10px; - color: red; - font-style: italic; + text-align: center; + padding-bottom: 10px; + color: red; + font-style: italic; } .divLoginboxHeader { - text-align: center; - border: #9c9c9c 1px solid; /* does NOT work */ - padding: 0px; + text-align: center; + border: #9c9c9c 1px solid; + /* does NOT work */ + padding: 0px; } - /* Preferences tabs */ .tablink { - white-space: nowrap; - padding-left: 15px; - padding-right: 15px; + white-space: nowrap; + padding-left: 15px; + padding-right: 15px; } - /* eGroupWare popup */ #egwpopup { - background-color: #ffffff; - border: 1px solid #d3d3d3; + background-color: #ffffff; + border: 1px solid #d3d3d3; } - #egwpopup hr { - border: none; - border-top: 1px solid #d3d3d3; - height: 1px; + border: none; + border-top: 1px solid #d3d3d3; + height: 1px; } - #egwpopup_header { - background-image: url(../images/gradient22.png); - height: 18px; - line-height: 18px; - margin: 0; - padding: 0; - font-size:12px; - font-weight: bold; - color: #666666; - text-align: center; - border-bottom: 1px solid #d3d3d3; + background-image: url(../images/gradient22.png); + height: 18px; + line-height: 18px; + margin: 0; + padding: 0; + font-size: 12px; + font-weight: bold; + color: #666666; + text-align: center; + border-bottom: 1px solid #d3d3d3; } - #egwpopup_message { - margin: 0; - padding: 7px; - overflow: auto; + margin: 0; + padding: 7px; + overflow: auto; } - #egwpopup_message > table { - font-size: 95%; + font-size: 95%; } - #egwpopup_message .link { - cursor: pointer; + cursor: pointer; } - #egwpopup_footer { - margin: 0; - padding: 7px; - border: none; - border-top: 1px solid #d3d3d3; - text-align: center; + margin: 0; + padding: 7px; + border: none; + border-top: 1px solid #d3d3d3; + text-align: center; } - -.selectbg -{ - position:absolute; - z-index:10; - overflow:hidden; - width:250px; +.selectbg { + position: absolute; + z-index: 10; + overflow: hidden; + width: 250px; } -.iframeforselectbox -{ - display:block; - height:150px; - left:10pt; - position:absolute; - top:0pt; - width:235px; - z-index:-1; - border: 0px; +.iframeforselectbox { + display: block; + height: 150px; + left: 10pt; + position: absolute; + top: 0pt; + width: 235px; + z-index: -1; + border: 0px; } - .bdforselection { - padding:12px; + padding: 12px; } /* new dialog style */ - -div.prompt, table.prompt { - background:#fff url(../../default/images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; +div.prompt, +table.prompt { + background: #ffffff url(../../default/images/prompt_bg.jpg) bottom right no-repeat; + border: 1px solid #4f6d81; } .promptheader { - background:url(../../default/images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none; height:24px + background: url(../../default/images/prompt_header.gif) repeat-x; + color: #355468; + border: 1px solid #4f6d81; + border-bottom: none; + height: 24px; } - /* TABLE STYLE */ - /* Table formatting */ - .th { - color: black; background-color: #D3DCE3; + color: black; + background-color: #D3DCE3; } - .row_on { - color: black; - background-color: #F1F1F1; + color: black; + background-color: #F1F1F1; } - .row_off { - color: black; - background-color: #ffffff; + color: black; + background-color: #ffffff; } - .egwGridView_grid tr.row_on { - background-color: transparent; + background-color: transparent; } - .egwGridView_grid tr.row_off { - background-color: transparent; + background-color: transparent; +} +.narrow_column { + width: 1%; + white-space: nowrap; } - -.narrow_column { width: 1%; white-space: nowrap; } - .egwGridView_outer table.egwGridView_grid { - table-layout: fixed; + table-layout: fixed; } - .egwGridView_grid { - border-spacing: 0; - border-collapse: collapse; + border-spacing: 0; + border-collapse: collapse; } - .egwGridView_outer div.innerContainer.queued { - background-image: url(../../default/images/egw_action/ajax-loader.gif); - background-position: center; - background-repeat: no-repeat; - height: 19px; + background-image: url(../../default/images/egw_action/ajax-loader.gif); + background-position: center; + background-repeat: no-repeat; + height: 19px; } - .egwGridView_grid > tbody > tr.focused { - background-image: url(../../default/images/egw_action/focused_hatching.png); - background-repeat: repeat; + background-image: url(../../default/images/egw_action/focused_hatching.png); + background-repeat: repeat; } - .egwGridView_grid > tbody > tr.selected { - background-color: #b7c3ff !important; + background-color: #b7c3ff !important; } - tr.draggedOver td { -/*.egwGridView_grid tr.draggedOver td {*/ - background-color: #ffd09c !important; + /*.egwGridView_grid tr.draggedOver td {*/ + background-color: #ffd09c !important; } - .egwGridView_scrollarea { - width: 100%; - overflow: auto; + width: 100%; + overflow: auto; } - .egwGridView_spacer { - background-image: url(../../default/images/egw_action/non_loaded_bg.png); - background-position: top left; + background-image: url(../../default/images/egw_action/non_loaded_bg.png); + background-position: top left; } - .egwGridView_outer { - table-layout: fixed; - border-spacing: 0; - border-collapse: collapse; - padding: 0; -/* margin: 5px;*/ + table-layout: fixed; + border-spacing: 0; + border-collapse: collapse; + padding: 0; + /* margin: 5px;*/ } - -.egwGridView_outer td, .egwGridView_outer tr { - padding: 0; - margin: 0; +.egwGridView_outer td, +.egwGridView_outer tr { + padding: 0; + margin: 0; } - .egwGridView_grid > tbody > tr > td { - border-right: 1px solid silver; - border-bottom: 1px solid #e0e0e0; - padding: 2px 3px 2px 4px; - margin: 0; + border-right: 1px solid silver; + border-bottom: 1px solid #e0e0e0; + padding: 2px 3px 2px 4px; + margin: 0; } - .egwGridView_outer th div.innerContainer, .egwGridView_grid td div.innerContainer { - margin: 0; - padding: 0; - display: block; - overflow: hidden; + margin: 0; + padding: 0; + display: block; + overflow: hidden; } .egwGridView_outer th div.innerContainer { - max-height: 7em; - overflow-y: auto; + max-height: 7em; + overflow-y: auto; } - .egwGridView_grid tr.fullRow { - font-style: italic; + font-style: italic; } - .egwGridView_grid tr.row_on:hover, .egwGridView_grid tr.row_off:hover, .egwGridView_grid tr.row:hover { - background-color: #f0f0ff; + background-color: #f0f0ff; } - .egwGridView_grid tr { - padding: 2px 3px 2px 4px; - margin: 0; + padding: 2px 3px 2px 4px; + margin: 0; } - .egwGridView_grid tr.hidden { - display: none; + display: none; } - .egwGridView_grid span.indentation { - display: inline-block; + display: inline-block; } - .egwGridView_grid span.iconOverlayContainer { - margin: 2px 5px 2px 2px; - position: relative; - -moz-user-select: none; - -khtml-user-select: none; - user-select: none; - overflow: visible; - display: inline-block; + margin: 2px 5px 2px 2px; + position: relative; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; + overflow: visible; + display: inline-block; } - .egwGridView_grid span.overlayContainer { - position: absolute; - right: -2px; - bottom: -2px; - vertical-align: bottom; - text-align: right; + position: absolute; + right: -2px; + bottom: -2px; + vertical-align: bottom; + text-align: right; } - .egwGridView_grid span.iconContainer { - display: inline-block; - padding: 0; - margin: 0; - text-align: center; + display: inline-block; + padding: 0; + margin: 0; + text-align: center; } - .egwGridView_grid span.overlayContainer img.overlay { - position: relative; - top: 1px; - margin: 0; - padding: 0; + position: relative; + top: 1px; + margin: 0; + padding: 0; } - .egwGridView_grid img.icon { - vertical-align: middle; - margin: 0; + vertical-align: middle; + margin: 0; } - .egwGridView_grid span.arrow { - display: inline-block; - vertical-align: middle; - width: 8px; - height: 8px; - background-repeat: no-repeat; - margin-right: 2px; - -moz-user-select: none; - -khtml-user-select: none; - user-select: none; + display: inline-block; + vertical-align: middle; + width: 8px; + height: 8px; + background-repeat: no-repeat; + margin-right: 2px; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; } - .egwGridView_grid span.arrow.opened { - cursor: pointer; - background-image: url(../../default/images/egw_action/arrows.png); - background-position: -8px 0; + cursor: pointer; + background-image: url(../../default/images/egw_action/arrows.png); + background-position: -8px 0; } - .egwGridView_grid span.arrow.closed { - cursor: pointer; - background-image: url(../../default/images/egw_action/arrows.png); - background-position: 0 0; + cursor: pointer; + background-image: url(../../default/images/egw_action/arrows.png); + background-position: 0 0; } - .egwGridView_grid span.arrow.loading { - cursor: pointer; - background-image: url(../../default/images/egw_action/ajax-loader.gif); - background-position: 0 0; + cursor: pointer; + background-image: url(../../default/images/egw_action/ajax-loader.gif); + background-position: 0 0; } - .egwGridView_grid span.caption { - cursor: default; - -moz-user-select: none; - -khtml-user-select: none; - user-select: none; + cursor: default; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; } - -.egwGridView_grid tr.th > td, /*legacy*/ +.egwGridView_grid tr.th > td, .egwGridView_outer thead th, -.nextmatch_header, .lettersearch { - background-color: #E0E0E0; - font-weight: normal; - padding: 2px; - border-left: 1px solid silver; - border-top: 1px solid silver; - border-right: 1px solid gray; - border-bottom: 1px solid gray; - background-image: url(../../default/images/egw_action/header_overlay.png); - background-position: center; - background-repeat: repeat-x; +.nextmatch_header, +.lettersearch { + background-color: #E0E0E0; + font-weight: normal; + padding: 2px; + border-left: 1px solid silver; + border-top: 1px solid silver; + border-right: 1px solid gray; + border-bottom: 1px solid gray; + background-image: url(../../default/images/egw_action/header_overlay.png); + background-position: center; + background-repeat: repeat-x; } - -.lettersearch, .lettersearch_active { - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - width: 25px; - border: 1px solid #D3DCE3; - text-align: center; - cursor: pointer; +.lettersearch, +.lettersearch_active { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + width: 25px; + border: 1px solid #D3DCE3; + text-align: center; + cursor: pointer; } -.lettersearch_active,.lettersearch:hover { - border: 1px solid black; - background-color: #E8F0F0; +.lettersearch_active, +.lettersearch:hover { + border: 1px solid black; + background-color: #E8F0F0; } .lettersearch_active { - font-weight: bold; + font-weight: bold; } td.lettersearch { - border-color: #E0E0E0; - background-image: url(../images/gradient22.png); + border-color: #E0E0E0; + background-image: url(../images/gradient22.png); } - .nextmatch_header tr { - background: none; + background: none; } .nextmatch_header { - padding: 0px; + padding: 0px; } - -.egwGridView_grid tr.th > td:hover, /*legacy*/ +.egwGridView_grid tr.th > td:hover, .egwGridView_outer thead th:hover { - background-color: #F0F0F0; + background-color: #F0F0F0; } - -.egwGridView_grid tr.th > td:active, /*legacy*/ +.egwGridView_grid tr.th > td:active, .egwGridView_outer thead th:active { - background-color: #D0D0D0; - border-left: 1px solid gray; - border-top: 1px solid gray; - border-right: 1px solid silver; - border-bottom: 1px solid silver; + background-color: #D0D0D0; + border-left: 1px solid gray; + border-top: 1px solid gray; + border-right: 1px solid silver; + border-bottom: 1px solid silver; } - - .egwGridView_outer thead th.optcol { - padding: 0; - text-align: center; + padding: 0; + text-align: center; } - .selectcols { - display: inline-block; - width: 10px; - height: 9px; - margin: 0; - padding: 0; - vertical-align: middle; - background-image: url(../../default/images/egw_action/selectcols.png); - background-position: center; - background-repeat: no-repeat; + display: inline-block; + width: 10px; + height: 9px; + margin: 0; + padding: 0; + vertical-align: middle; + background-image: url(../../default/images/egw_action/selectcols.png); + background-position: center; + background-repeat: no-repeat; } - .nextmatch_header .selectcols { - background: none; - height: auto; + background: none; + height: auto; } - .egwGridView_grid td.frame, .egwGridView_outer td.frame, .egwGridView_grid td.egwGridView_spacer { - padding: 0 !important; - border-right: 0 none silver !important; - border-bottom: 0 none silver !important; + padding: 0 !important; + border-right: 0 none silver !important; + border-bottom: 0 none silver !important; } - .egwGridView_outer span.sort { - display: inline-block; - width: 7px; - height: 7px; - background-repeat: no-repeat; - background-position: center; - margin: 2px; - vertical-align: middle; + display: inline-block; + width: 7px; + height: 7px; + background-repeat: no-repeat; + background-position: center; + margin: 2px; + vertical-align: middle; } - .egwGridView_outer span.sort.asc { - background-image: url(../images/up.png); + background-image: url(../images/up.png); } - .egwGridView_outer span.sort.desc { - background-image: url(../images/down.png); + background-image: url(../images/down.png); } - .egwGridView_grid input[type=checkbox], .egwGridView_outer input[type=checkbox] { - border-width: 0; + border-width: 0; } - .egwGridView_outer input[type=checkbox] { - margin-left: 2px; + margin-left: 2px; } - .egwGridView_grid input[type=checkbox] { - margin: 0; + margin: 0; } - .egwLinkMoreOptions { - display: none; - margin: 0; - padding: 0; - border-bottom: 2px solid black; - border-left: 2px solid black; - border-right: 2px solid black; + display: none; + margin: 0; + padding: 0; + border-bottom: 2px solid black; + border-left: 2px solid black; + border-right: 2px solid black; } /* Empty placeholder */ .egwGridView_empty { - text-align: center; - border-bottom: 1px solid silver; -} - -/** - * Styles for different egw_message-types - */ -.success_message, .warning_message, .error_message { - color: red; - font-weight: normal; - font-style: italic; - text-align: left; - margin-left: 5px; - padding-left: 20px; - background-image: url(../../default/images/check.png); - background-position: left; - background-repeat: no-repeat; - background-size: 16px; -} -.warning_message { - background-image: url(../../default/images/dialog_warning.png); -} -.error_message { - font-weight: bold; - background-image: url(../../default/images/dialog_error.png); + text-align: center; + border-bottom: 1px solid silver; } diff --git a/phpgwapi/templates/idots/css/traditional.less b/phpgwapi/templates/idots/css/traditional.less new file mode 100755 index 0000000000..1277c5c6ae --- /dev/null +++ b/phpgwapi/templates/idots/css/traditional.less @@ -0,0 +1,884 @@ +/** + * EGroupware: CSS with less preprocessor + * + * Please do NOT change css-files directly, instead change less-files and compile them! + * + * @link http://www.egroupware.org + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package phpgwapi + * @version $Id$ + */ + +/* + font styling + allowed attributes: font-family,font-size,color,font-weight +*/ + +body,td,textarea +{ + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 11px; +} + +select,input,button +{ + color: #006699; + font-family: Arial, Helvetica, sans-serif; + font-size:110%; +} + +select +{ + font-size:100%; +} + +a:link,a:visited +{ + cursor:pointer; + color: #006699; + text-decoration: none; +} + +a:hover,a:active +{ + cursor:pointer; + color: #ff9933; + text-decoration: underline; +} +.divLoginboxHeader,.divSideboxHeader,a.appTitles,.appTitles,a.textSidebox,.textSidebox,#fmStatusBar +{ + font-size:90%; +} + +.prefSection +{ + font-weight:bold; + font-size:145%; + line-height:40px; +} + +#divAppboxHeader +{ + line-height:28px; + font-size:125%; + font-weight:bold; + color:#666666; +} + +#divGenTime,#divPoweredBy +{ + font-size: 80%; + color: #ff0000; +} + +#divPoweredBy +{ + color: #000000; +} + +#sideboxdragarea { + z-index:100; + position:absolute; + left:0px; + top:105px; +} + +#menu2handle { + padding-top: 10px; +} + +#menu1close { + position: absolute; + right: 7px; + top: 7px; +} + +/* + other styling +*/ + +body +{ + background-image:url(../images/body-background.png); +} + +form +{ + margin:0px; + padding:0px; +} + +img +{ + border:0; +} + + +input,button,select +{ + border: solid 1px #bbbbbb; +} + +input[type=submit],input[type=button],input[type=reset],button,.egwbutton +{ + background-color:#b9d5e3; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} + +input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover,button:hover,.egwbutton:hover +{ + background-color:#94bfd4; + border: outset 1px #b9d5e3; + color: #004e7d; +} + +input[type=submit]:active,input[type=button]:active,input[type=reset]:active,button:active,.egwbutton:active +{ + border: inset 1px #bbbbbb; +} + +input[type=submit]:disabled,input[type=button]:disabled,input[type=reset]:disabled,button:disabled,.egwbutton:disabled +{ + background-color: transparent; + color: gray; +} + +input.egwbutton +{ + background-color:#b9d5e3; + border: outset 1px #b9d5e3; + margin: 1px; + padding: 1px; + cursor: pointer; + color: #004e7d; +} + +input.egwbutton:hover +{ + background-color:#94bfd4; + border: outset 1px #b9d5e3; + color: #004e7d; +} +input.egwbutton:active +{ + border: inset 1px #bbbbbb; +} + +input[type=image] +{ + cursor: pointer; + border: 0; +} + +#thesideboxcolumn +{ + width: 177px; + position:relative; +} + +#sideresize +{ + background-image:url(../images/resize.png); + width:13px; + height:13px; + right:1px; + top:1px; + position:absolute; + z-index:9999; +} + +.divLoginbox +{ + position:relative; + width: 370px; + border: #9c9c9c 1px solid; +} + +.divSidebox +{ + position:relative; + border: #9c9c9c 1px solid; + overflow:auto; +} + +.divSideboxHeader,.divLoginboxHeader +{ + text-align:center; + background-color:#dddddd; + padding-top:2px; + color:#666666; +} + +a.divSideboxEntry, .divSideboxEntry +{ + text-align:left; + background-color:#FDFDFD; +} + +a.appTitles,.appTitles +{ + height:18px; + padding-top:2px; + padding-bottom:2px; +} + +a.textSidebox +{ + padding: 0; + border-top: 0; +} + +.textSidebox +{ + padding-top:3px; + padding-bottom:3px; + padding-left: 1px; + border-top: solid #aaaaaa 1px; + overflow: auto; +} + +.sideboxSpace +{ + height:9px; +} + +.greyLine +{ + margin:1px; + border-top:solid 1px #7e7e7e; + height:1px; +} + +#extraIcons +{ + background-color:#eeeeee; + border:solid 1px #7e7e7e; +} + +.extraIconsRow +{ + border:solid 1px #dddddd; + padding:2px; +} + +body { + padding: 0px; + margin: 0px; +} + +#divMain,#loginMainDiv,#popupMainDiv +{ + background-color: white; + padding: 8px; + border-bottom: solid 1px #7e7e7e; +} +/* + ** Popups + */ +#popupMainDiv +{ + margin: 8px; + border: solid 1px #7e7e7e; + padding-bottom: 0px; +} + +#divLogo +{ + position:absolute; + left:30px; + top:20px; + z-index:999; +} + +#topmenu +{ + background-color: #0081c1; + background-image: url(../images/bgtopmenu2.png); + color:#006699; + /*border-top: solid 1px #7e7e7e;*/ + border-bottom: solid #5793ff 1px; + height:20px; + padding-top:4px ; + line-height:16px; +} +#topmenu a +{ + color:#006699; +} + +#topmenu_items +{ + float:left; +} +#topmenu_info +{ + float:right; +} + +#divUpperTabs +{ + text-align:right; + height: 15px; + margin-right: 10px; +} + +#divUpperTabs ul +{ + display:inline; + margin:0; + padding:10px 10px 0 1px; + list-style:none; +} + +#divUpperTabs li +{ + float:right; + margin:0 5px 0 0;; + padding:0 5px 0 5px; + border:solid 1px #9c9c9c; + border-bottom: 0px; +} + +#divAppIconBar +{ + background-color:silver; + border:solid 1px #9c9c9c; + background-image: url(../images/background-icon-bar.png); + background-repeat: repeat-x; + overflow:visible; + height: 45px; /* prevents text line to show in IE7+8(Compatibilitymode) */ +} +/* Star-Plus-HTML Hack fix for the above */ +*:first-child+html #divAppIconBar +{ + height: 60px; +} + +#divAppTextBar +{ + background-color:white; +} + +#divStatusBar +{ + background-color:white; + height:18px; + padding-left:3px; +} + +#tdSidebox +{ + width:170px; + background-color:white; + overflow:visible; +} + +#tdAppbox +{ + background-color:white; + padding-left:5px; + width: 100%; +} + +#divAppboxHeader +{ + background-image:url(../images/appbox-header-background.png); + background-repeat: repeat-x; + height: 25px; + border-bottom:solid 1px #c0c0c0; + text-align:center; + padding-bottom:0px; + border-top:solid 1px #9c9c9c; + border-left:solid 1px #9c9c9c; + border-right:solid 1px #9c9c9c; +} + +#divAppbox +{ + background-color:#ffffff; + padding:5px; + border-bottom:solid 1px #9c9c9c; + border-left:solid 1px #9c9c9c; + border-right:solid 1px #9c9c9c; +} + +#divGenTime,#divPoweredBy +{ + bottom:4px; + text-align:center; + width:99%; +} + +/* + Printing +*/ +@media screen { .onlyPrint { display: none; } } +@media print { .noPrint { display: none; } } + +/* + Portal_box as used in home +*/ +.portal_box { + border: #9c9c9c 1px solid; +} + +.portal_box table { + border: 1px solid black; +} + +.portal_box_header { + height: 15px; + padding-top: 0px; +} + +/* + Login page +*/ +#loginMainDiv { + padding-top: 24px; + height: 700px; /* 95% does not work */ + position: relative; + background-repeat: no-repeat; + background-position: center 80px; + background-image: url(../images/login-background.jpg); +} +#loginScreenMessage { + text-align: center; + padding: 10px; +} +#loginCdMessage { + text-align: center; + padding-bottom: 10px; + color: red; + font-style: italic; +} +.divLoginboxHeader { + text-align: center; + border: #9c9c9c 1px solid; /* does NOT work */ + padding: 0px; +} + +/* +Preferences tabs +*/ +.tablink { + white-space: nowrap; + padding-left: 15px; + padding-right: 15px; +} + +/* eGroupWare popup */ +#egwpopup { + background-color: #ffffff; + border: 1px solid #d3d3d3; +} + +#egwpopup hr { + border: none; + border-top: 1px solid #d3d3d3; + height: 1px; +} + +#egwpopup_header { + background-image: url(../images/gradient22.png); + height: 18px; + line-height: 18px; + margin: 0; + padding: 0; + font-size:12px; + font-weight: bold; + color: #666666; + text-align: center; + border-bottom: 1px solid #d3d3d3; +} + +#egwpopup_message { + margin: 0; + padding: 7px; + overflow: auto; +} + +#egwpopup_message > table { + font-size: 95%; +} + +#egwpopup_message .link { + cursor: pointer; +} + +#egwpopup_footer { + margin: 0; + padding: 7px; + border: none; + border-top: 1px solid #d3d3d3; + text-align: center; +} + +.selectbg +{ + position:absolute; + z-index:10; + overflow:hidden; + width:250px; +} +.iframeforselectbox +{ + display:block; + height:150px; + left:10pt; + position:absolute; + top:0pt; + width:235px; + z-index:-1; + border: 0px; +} + +.bdforselection { + padding:12px; +} +/* new dialog style */ + +div.prompt, table.prompt { + background:#fff url(../../default/images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; +} +.promptheader { + background:url(../../default/images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none; height:24px +} + +/* TABLE STYLE */ + +/* + Table formatting +*/ + +.th { + color: black; background-color: #D3DCE3; +} + +.row_on { + color: black; + background-color: #F1F1F1; +} + +.row_off { + color: black; + background-color: #ffffff; +} + +.egwGridView_grid tr.row_on { + background-color: transparent; +} + +.egwGridView_grid tr.row_off { + background-color: transparent; +} + +.narrow_column { width: 1%; white-space: nowrap; } + +.egwGridView_outer table.egwGridView_grid { + table-layout: fixed; +} + +.egwGridView_grid { + border-spacing: 0; + border-collapse: collapse; +} + +.egwGridView_outer div.innerContainer.queued { + background-image: url(../../default/images/egw_action/ajax-loader.gif); + background-position: center; + background-repeat: no-repeat; + height: 19px; +} + +.egwGridView_grid > tbody > tr.focused { + background-image: url(../../default/images/egw_action/focused_hatching.png); + background-repeat: repeat; +} + +.egwGridView_grid > tbody > tr.selected { + background-color: #b7c3ff !important; +} + +tr.draggedOver td { +/*.egwGridView_grid tr.draggedOver td {*/ + background-color: #ffd09c !important; +} + +.egwGridView_scrollarea { + width: 100%; + overflow: auto; +} + +.egwGridView_spacer { + background-image: url(../../default/images/egw_action/non_loaded_bg.png); + background-position: top left; +} + +.egwGridView_outer { + table-layout: fixed; + border-spacing: 0; + border-collapse: collapse; + padding: 0; +/* margin: 5px;*/ +} + +.egwGridView_outer td, .egwGridView_outer tr { + padding: 0; + margin: 0; +} + +.egwGridView_grid > tbody > tr > td { + border-right: 1px solid silver; + border-bottom: 1px solid #e0e0e0; + padding: 2px 3px 2px 4px; + margin: 0; +} + +.egwGridView_outer th div.innerContainer, +.egwGridView_grid td div.innerContainer { + margin: 0; + padding: 0; + display: block; + overflow: hidden; +} +.egwGridView_outer th div.innerContainer { + max-height: 7em; + overflow-y: auto; +} + +.egwGridView_grid tr.fullRow { + font-style: italic; +} + +.egwGridView_grid tr.row_on:hover, +.egwGridView_grid tr.row_off:hover, +.egwGridView_grid tr.row:hover { + background-color: #f0f0ff; +} + +.egwGridView_grid tr { + padding: 2px 3px 2px 4px; + margin: 0; +} + +.egwGridView_grid tr.hidden { + display: none; +} + +.egwGridView_grid span.indentation { + display: inline-block; +} + +.egwGridView_grid span.iconOverlayContainer { + margin: 2px 5px 2px 2px; + position: relative; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; + overflow: visible; + display: inline-block; +} + +.egwGridView_grid span.overlayContainer { + position: absolute; + right: -2px; + bottom: -2px; + vertical-align: bottom; + text-align: right; +} + +.egwGridView_grid span.iconContainer { + display: inline-block; + padding: 0; + margin: 0; + text-align: center; +} + +.egwGridView_grid span.overlayContainer img.overlay { + position: relative; + top: 1px; + margin: 0; + padding: 0; +} + +.egwGridView_grid img.icon { + vertical-align: middle; + margin: 0; +} + +.egwGridView_grid span.arrow { + display: inline-block; + vertical-align: middle; + width: 8px; + height: 8px; + background-repeat: no-repeat; + margin-right: 2px; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; +} + +.egwGridView_grid span.arrow.opened { + cursor: pointer; + background-image: url(../../default/images/egw_action/arrows.png); + background-position: -8px 0; +} + +.egwGridView_grid span.arrow.closed { + cursor: pointer; + background-image: url(../../default/images/egw_action/arrows.png); + background-position: 0 0; +} + +.egwGridView_grid span.arrow.loading { + cursor: pointer; + background-image: url(../../default/images/egw_action/ajax-loader.gif); + background-position: 0 0; +} + +.egwGridView_grid span.caption { + cursor: default; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; +} + +.egwGridView_grid tr.th > td, /*legacy*/ +.egwGridView_outer thead th, +.nextmatch_header, .lettersearch { + background-color: #E0E0E0; + font-weight: normal; + padding: 2px; + border-left: 1px solid silver; + border-top: 1px solid silver; + border-right: 1px solid gray; + border-bottom: 1px solid gray; + background-image: url(../../default/images/egw_action/header_overlay.png); + background-position: center; + background-repeat: repeat-x; +} + +.lettersearch, .lettersearch_active { + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + width: 25px; + border: 1px solid #D3DCE3; + text-align: center; + cursor: pointer; +} +.lettersearch_active,.lettersearch:hover { + border: 1px solid black; + background-color: #E8F0F0; +} +.lettersearch_active { + font-weight: bold; +} +td.lettersearch { + border-color: #E0E0E0; + background-image: url(../images/gradient22.png); +} + +.nextmatch_header tr { + background: none; +} +.nextmatch_header { + padding: 0px; +} + +.egwGridView_grid tr.th > td:hover, /*legacy*/ +.egwGridView_outer thead th:hover { + background-color: #F0F0F0; +} + +.egwGridView_grid tr.th > td:active, /*legacy*/ +.egwGridView_outer thead th:active { + background-color: #D0D0D0; + border-left: 1px solid gray; + border-top: 1px solid gray; + border-right: 1px solid silver; + border-bottom: 1px solid silver; +} + + +.egwGridView_outer thead th.optcol { + padding: 0; + text-align: center; +} + +.selectcols { + display: inline-block; + width: 10px; + height: 9px; + margin: 0; + padding: 0; + vertical-align: middle; + background-image: url(../../default/images/egw_action/selectcols.png); + background-position: center; + background-repeat: no-repeat; +} + +.nextmatch_header .selectcols { + background: none; + height: auto; +} + +.egwGridView_grid td.frame, +.egwGridView_outer td.frame, +.egwGridView_grid td.egwGridView_spacer { + padding: 0 !important; + border-right: 0 none silver !important; + border-bottom: 0 none silver !important; +} + +.egwGridView_outer span.sort { + display: inline-block; + width: 7px; + height: 7px; + background-repeat: no-repeat; + background-position: center; + margin: 2px; + vertical-align: middle; +} + +.egwGridView_outer span.sort.asc { + background-image: url(../images/up.png); +} + +.egwGridView_outer span.sort.desc { + background-image: url(../images/down.png); +} + +.egwGridView_grid input[type=checkbox], +.egwGridView_outer input[type=checkbox] { + border-width: 0; +} + +.egwGridView_outer input[type=checkbox] { + margin-left: 2px; +} + +.egwGridView_grid input[type=checkbox] { + margin: 0; +} + +.egwLinkMoreOptions { + display: none; + margin: 0; + padding: 0; + border-bottom: 2px solid black; + border-left: 2px solid black; + border-right: 2px solid black; +} +/* Empty placeholder */ +.egwGridView_empty { + text-align: center; + border-bottom: 1px solid silver; +} + diff --git a/preferences/templates/default/app.css b/preferences/templates/default/app.css index fd83bac783..08c01eca48 100644 --- a/preferences/templates/default/app.css +++ b/preferences/templates/default/app.css @@ -1,51 +1,123 @@ /** - * EGroupware - CSS Styles used by preferences app + * EGroupware: CSS with less preprocessor + * + * Please do NOT change app.css directly, instead change app.less and compile it! * - * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License - * @package preferences * @link http://www.egroupware.org - * @author Ralf Becker + * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License + * @author Stefan Reinhard + * @package preferences * @version $Id$ */ - -table.prefTable { - width: 100%; +#prefIndex { + background: red; } -tr.prefRow { - position: relative; +#divGenTime { + clear: left; } -td.prefName { - width: 50%; +.prefAppBox { + float: left; + margin: 5px; + min-height: 12em; + padding-left: 5px; + width: 225px; + border-top: solid 1px #e4e7ea; + border-left: solid 1px #e4e7ea; + border-right: solid 1px #e4e7ea; + border-bottom: solid 1px #e4e7ea; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; } -tr.prefRow > td { - vertical-align: bottom; /* otherwise help will cover bigger prefValue */ +.prefAppBox h3 { + height: 32px; + padding-left: 50px; + padding-top: 10px; + background-repeat: no-repeat; + background-position: left; + background-size: 32px; + opacity: 0.5; + margin: 0; + color: #000000; } -.prefHelp { - position: absolute; - display: none; - width: 98%; - background-color: lightyellow; - border: 1px solid black; - border-radius: 10px; - padding: 5px; - margin-top: 5px; +.prefAppBox h3:hover { + background-color: #d9d9d9; } -tr.prefRow:hover .prefHelp { - display: block; - z-index: 10; /* FF: displays it under next prefName without */ +.prefAppBox ul { + margin: 0; + padding-left: 20px; + padding-top: 0; + list-style-type: none; } -.prefDefault, .prefValue { - float: left; +.prefAppBox ul li { + padding: 0.5em 0 0.5em 0; + margin-left: -1em; } -.prefValue { - margin-right: 5px; +.prefAppBox ul li:hover { + background-color: #d9d9d9; } -.prefValue textarea, textarea.prefValue { - width: 99%; - height: 5em; +.prefAppBox ul li a { + text-decoration: none; + margin-left: 0.5em; +} +#preferences-settings { + font-size: 0.9em; +} +#preferences-settings .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"] { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#preferences-settings .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#preferences-settings .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#preferences-settings .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#preferences-settings .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#preferences-settings .nextmatch_header div.filters { + padding: 0 0 0 1em; + background-color: #f0f0f0; + margin-bottom: 3px; + margin: 0em; + border-width: 0 0 1px 0; + border-color: #d9d9d9; + background-image: none; } -.prefType, .prefApp { - font-size: 150%; - display: inline-block; - padding-bottom: 5px; -} \ No newline at end of file diff --git a/preferences/templates/default/app.less b/preferences/templates/default/app.less new file mode 100644 index 0000000000..c8465ef511 --- /dev/null +++ b/preferences/templates/default/app.less @@ -0,0 +1,156 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package preferences + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + +#prefIndex { + + background: red; +} +#divGenTime { + clear: left; +} +.prefAppBox { +// border: 1px solid lightgray; +// border-radius: 3px 3px 3px 3px; + float: left; +// height: 225px; + margin: 5px; + min-height: 12em; + padding-left: 5px; + width: 225px; + .bordered(@lightgray,@lightgray,@lightgray,@lightgray ); + .rounded(2px); +} + +.prefAppBox h3 { + height: 32px; + padding-left: 50px; + padding-top: 10px; + background-repeat: no-repeat; + background-position: left; + background-size: 32px; + opacity: 0.5; + margin: 0; + color: #000000; + + &:hover {.background-color-15-gray;} +} +.prefAppBox ul { + margin: 0; + padding-left: 20px; + padding-top: 0; + list-style-type: none; + + li{ + padding: 0.5em 0 0.5em 0; + margin-left: -1em; + &:hover {.background-color-15-gray;} + + a{ + text-decoration: none; + margin-left: 0.5em; + } + } +} + + + +// iframe + + + +#preferences-settings { + font-size: 0.9em; + // Rahmen + padding +// .box_shadow_dialog; + + + .nextmatch_header{ + + div.ui-helper-clearfix, + div.ui-helper-reset{ + + // linke Box + #timesheet-index_timesheet-index-dates{ + + // Startdate + #timesheet-index_startdate{} + } + + // Enddate + #timesheet-index_enddate{} + + } + + + // rechte Box + #timesheet-index_timesheet-index-add{ + + //ADD + button[id*="timesheet-index_add"]{ + .Complete_Button_add; + + .border_radius_button_lefttop; + + &:hover {.Complete_Button_add_hover;} + +// &:before {.Complete_Button_add_before; } + + + + } + button[id*="timesheet-index_add"]:hover {.Complete_Button_add_hover;} + + } + // Anzahl + span.header_count ui-corner-all{} + + // Filter + div.filters{ + + .Rectangle_filters; + + // 1. Filter + #timesheet-index_filter{} + + // 2. Filter + #timesheet-index_filter2{} + + // Suchfeld + #timesheet-index_search{} + + // Suchen Button + button{} + + + } // Ende Filter + + table{} + } //nextmatch_header + +} // iframe + + + + + + + + +//####################################################################################### +// Dialog +// Rahmen um alles + + + diff --git a/timesheet/templates/default/app.css b/timesheet/templates/default/app.css index 9a19899c33..3604b34885 100644 --- a/timesheet/templates/default/app.css +++ b/timesheet/templates/default/app.css @@ -1,2 +1,158 @@ -/* $Id$ */ -.timesheet_titleSum,.timesheet_titleDetails { font-weight: bold; } +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package timesheet + * @version $Id$ + */ +#timesheet-index .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"] { + background-color: #0b5fa4; + color: #FFF; + text-shadow: none; + height: 35px; + background-image: none !important; + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#timesheet-index .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#timesheet-index .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:before { + content: "+"; + font-size: 2em; + color: #ffc200; +} +#timesheet-index .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#timesheet-index .nextmatch_header #timesheet-index_timesheet-index-add button[id*="timesheet-index_add"]:hover { + background-color: #66a1d2 !important; + color: #ffc200; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.9); + -webkit-border-radius: 3px; + -webkit-border-top-left-radius: 20px; + -moz-border-radius: 3px; + -moz-border-radius-topleft: 20px; + border-radius: 3px; + border-top-left-radius: 20px; +} +#timesheet-index .nextmatch_header div.filters { + padding: 0 0 0 1em; + background-color: #f0f0f0; + margin-bottom: 3px; + margin: 0em; + border-width: 0 0 1px 0; + border-color: #d9d9d9; + background-image: none; +} +#timesheet-index .nextmatch_header button[id*="timesheet-index_favorite"] img { + height: 16px; + width: 16px; +} +#timesheet-edit { + width: 910px; + height: 580px; + -webkit-border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -webkit-border-bottom-left-radius: 0; + -webkit-border-top-left-radius: 25px; + -moz-border-radius-topright: 0; + -moz-border-radius-bottomright: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-topleft: 25px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 25px; + -moz-background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; + background-color: #fafafa; + border-color: #0c5da5; + border: 5px solid #679fd2; + padding: 1em; + margin: 5px 0 0 5px; +} +#timesheet-edit div:not([class]) { + width: 840px; + height: auto !important; +} +#timesheet-edit #timesheet-edit_ts_owner { + font-size: 1em; +} +#timesheet-edit select#timesheet-edit_pm_id { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0.5em; + padding: 3px; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + width: 80%; +} +#timesheet-edit input#timesheet-edit_ts_project { + border: 1px solid rgba(0, 0, 0, 0.15); + border-color: #bfbfbf; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + width: 80%; +} +#timesheet-edit select#timesheet-edit_pl_id { + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0.5em; + padding: 3px; + outline: none; + display: inline-block; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +#timesheet-edit input#timesheet-edit_ts_unitprice { + border: 1px solid rgba(0, 0, 0, 0.15); + border-color: #bfbfbf; + -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5); + width: auto; + margin: 0.5em 0em 0.5em 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} diff --git a/timesheet/templates/default/app.less b/timesheet/templates/default/app.less new file mode 100644 index 0000000000..d7787baa29 --- /dev/null +++ b/timesheet/templates/default/app.less @@ -0,0 +1,154 @@ +/** + * EGroupware: CSS with less preprocessor + * + * 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 Reinhard + * @package timesheet + * @version $Id$ + */ + +@import (reference) "../../../phpgwapi/templates/default/def_buttons.less"; +@import (reference) "../../../phpgwapi/templates/default/def_design_pattern_color_font_shadow.less"; + + +// iframe + + + +#timesheet-index { + + // Rahmen + padding +// .box_shadow_dialog; + + + .nextmatch_header{ + + div.ui-helper-clearfix, + div.ui-helper-reset{ + + // linke Box + #timesheet-index_timesheet-index-dates{ + + // Startdate + #timesheet-index_startdate{} + } + + // Enddate + #timesheet-index_enddate{} + + } + + + // rechte Box + #timesheet-index_timesheet-index-add{ + + //ADD + button[id*="timesheet-index_add"]{ + .Complete_Button_add; + + .border_radius_button_lefttop; + + &:hover {.Complete_Button_add_hover;} + +// &:before {.Complete_Button_add_before; } + + + + } + button[id*="timesheet-index_add"]:hover {.Complete_Button_add_hover;} + + } + // Anzahl + span.header_count ui-corner-all{} + + // Filter + div.filters{ + + .Rectangle_filters; + + // 1. Filter + #timesheet-index_filter{} + + // 2. Filter + #timesheet-index_filter2{} + + // Suchfeld + #timesheet-index_search{} + + // Suchen Button + button{} + + + } // Ende Filter + + table{} + + + button[id*="timesheet-index_favorite"]{ + img { + height: 16px; + width: 16px; + } + + } + } //nextmatch_header + +} // iframe + + + + + + +// ############################################################################################# +// +// +// Dialog + +// Rahmen um alles +#timesheet-edit { + + width: 910px; + height: 580px; + + .border-radius (0,0,0,25px); + .background-color-5-gray; +// background-color: @egw_color_2_e; + border-color: @egw_color_2_a; + border: 5px solid @egw_color_2_e; + padding: 1em; + margin: 5px 0 0 5px; + + div:not([class]) {width: 840px; height: auto !important; } + + +// select {.Complete_Button_select;} +// input{.Complete_Button_input;} + + + // Owner + #timesheet-edit_ts_owner {font-size: 1em;} + + // Projektliste + select#timesheet-edit_pm_id { + .Complete_Button_select; + width: 80%; + } + // Projekt + input#timesheet-edit_ts_project{ + .Complete_Button_input; + width: 80%; + } + + // Preisliste + select#timesheet-edit_pl_id {.Complete_Button_select;} + + input#timesheet-edit_ts_unitprice {.Complete_Button_input;} + + + + +} // div#timesheet-edit