forked from extern/egroupware
482 lines
10 KiB
Plaintext
Executable File
482 lines
10 KiB
Plaintext
Executable File
/**
|
|
* EGroupware: Stylite Pixelegg template
|
|
*
|
|
* dialog
|
|
|
|
* define every dialog box in egw
|
|
* even popup or jquery
|
|
*
|
|
* 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 <stefan.reinhard@pixelegg.de>
|
|
* @package pixelegg
|
|
* @version $Id$
|
|
*/
|
|
|
|
@import (reference) "definitions.less";
|
|
//##############################################################################################################
|
|
|
|
/*body {
|
|
background-color: @gray_0;
|
|
background-image: url(../../api/templates/default/images/bgDialog.png);
|
|
background-repeat: repeat-x;
|
|
}*/
|
|
|
|
// Dialoge Allgemeine Definition
|
|
|
|
div#popupMainDiv {
|
|
padding: 8px;
|
|
background-color: @gray_0;
|
|
background-repeat: repeat-x;
|
|
|
|
}
|
|
|
|
div#popupMainDiv > * {margin: 0px;}
|
|
|
|
form.et2_container {
|
|
|
|
// .background-color-25-gray;
|
|
padding: 0;
|
|
|
|
div{
|
|
|
|
|
|
table.et2_grid {
|
|
// .background-color-5-gray;
|
|
|
|
tbody {
|
|
|
|
tr {
|
|
|
|
// Select + Inputfelder
|
|
.row {
|
|
|
|
|
|
td {
|
|
.et2_box_widget {
|
|
|
|
select, input{
|
|
|
|
}
|
|
|
|
input {
|
|
margin: 4px 5px 4px 0;
|
|
.border_radius (3px, 3px ,3px ,3px );
|
|
}
|
|
|
|
input.hasDatepicker {
|
|
background-image: url( "../../api/templates/default/images/datepopup.png");
|
|
|
|
&:hover {cursor: pointer;}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
td{
|
|
|
|
// Tabs
|
|
.et2_tabbox{
|
|
|
|
.et2_tabheader {}
|
|
.et2_tabs {
|
|
|
|
table.et2_grid {.background_color_0_gray;}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// high = more padding
|
|
.high {
|
|
border-top: 5px solid @gray_10;
|
|
border-bottom: 5px solid @gray_10 !important;
|
|
}
|
|
/*Main div*/
|
|
|
|
#popupMainDiv {
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
table.dialog-main-view {width: 100%;}
|
|
|
|
|
|
/*###########################################
|
|
# #
|
|
# dialogHeader app-img #
|
|
#############################################
|
|
# #
|
|
# dialogHeader2 #
|
|
#############################################
|
|
# #
|
|
# dialogHeader3 #
|
|
#############################################
|
|
# #
|
|
# dialogHeader4 #
|
|
#############################################
|
|
# #
|
|
# #
|
|
# #
|
|
# #
|
|
# #
|
|
# main + tabs #
|
|
# #
|
|
# #
|
|
#############################################
|
|
# dialogOperators #
|
|
#############################################
|
|
# #
|
|
# button | button | button delete #
|
|
##############################################*/
|
|
|
|
|
|
/*** dialogHeader on a box not table ***/
|
|
|
|
|
|
|
|
/********** Header Part ********************/
|
|
.dialogHeader {
|
|
.color_100_gray;
|
|
border-bottom: 2px solid @gray_60;
|
|
|
|
// radio button
|
|
input[type="radio"],
|
|
input.et2_radiobox{
|
|
-webkit-appearance: none;
|
|
border: none;
|
|
}
|
|
|
|
table.et2_grid {
|
|
border-top: none;
|
|
|
|
.th {background-color: @egw_color_2_a !important;}
|
|
|
|
tr { height: 30px; }
|
|
|
|
td {padding: 0px 0px 0px 3px; .color_100_gray;}
|
|
|
|
//Table in Table
|
|
table.et2_grid {
|
|
label.et2_label {
|
|
span.et2_selectbox {
|
|
li {float: left;}
|
|
}
|
|
}
|
|
}
|
|
} // et2_grid End
|
|
|
|
// Inputfield Header
|
|
input.et2_textbox { font-size: 1.3em; }
|
|
|
|
.et2_label {
|
|
.color_100_gray;
|
|
vertical-align: middle;
|
|
padding: 0px 0px 0px 0px !important;
|
|
/*margin-right: 57px;*/
|
|
margin: 0px important;
|
|
font-size: 1em;
|
|
text-align: right;
|
|
}
|
|
|
|
td.space {
|
|
span img {
|
|
background: @gray_0;
|
|
border: 2px solid @gray_0;
|
|
/*filter grey*/
|
|
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
/*filter: url(grayscale.svg); Firefox 4+ */
|
|
filter: gray; /* IE 6-9 */
|
|
}
|
|
}
|
|
}
|
|
|
|
/********** Header Row2 - 4 ********************/
|
|
tr.dialogHeader2,
|
|
tr.dialogHeader3,
|
|
tr.dialogHeader4{
|
|
vertical-align: middle;
|
|
.et2_label {
|
|
.color_90_gray;
|
|
vertical-align: middle;
|
|
font-size: 1em;
|
|
}
|
|
}
|
|
|
|
/************* Tabs *********************************/
|
|
/**
|
|
* Tabs widget
|
|
*/
|
|
|
|
.et2_tabheader {
|
|
padding-left: 0em;
|
|
margin: 0;
|
|
background-image: none;
|
|
background-color: @gray_0;
|
|
:first-child {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
.et2_tabflag {border:none;}
|
|
.et2_tabflag, .etemplate_tab > div, .etemplate_tab_active > div {
|
|
margin: 1em 5px -1px 0;
|
|
padding: 4px;
|
|
background-color: white;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
min-width: 73px;
|
|
border-bottom:3px solid @gray_10;
|
|
margin-bottom:-3px;
|
|
&:hover {
|
|
background-color: @color_hover_row;
|
|
border:none;
|
|
border-bottom: 3px solid @gray_60;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
}
|
|
td.etemplate_tab_active.th {
|
|
background-color: transparent;
|
|
}
|
|
|
|
|
|
.et2_tabflag.active, .etemplate_tab_active > div {
|
|
border-spacing: 0px;
|
|
background-color: white;
|
|
.color_100_gray;
|
|
border-bottom: 3px solid @gray_60;
|
|
margin-bottom:-3px;
|
|
&:hover {
|
|
.color_100_gray;
|
|
// border: 1px solid gray;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
|
|
// field for content
|
|
.et2_tabs, .tab_body {
|
|
border:none;
|
|
border-bottom:1px solid @gray_10;
|
|
border-top: 1px solid @gray_10;
|
|
padding: 5px;
|
|
background-color: @gray_0;
|
|
margin-bottom: 11px;
|
|
margin-top:3px;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.tab_body {
|
|
border-top-width: 1px;
|
|
|
|
img {
|
|
/*filter grey*/
|
|
.img_filter_gray;
|
|
}
|
|
|
|
|
|
}
|
|
div#etemplate\.tab_widget {
|
|
margin-bottom: 11px;
|
|
}
|
|
|
|
|
|
|
|
/************* Main **********************************/
|
|
|
|
// Terminsuche
|
|
.dialogMainTimeframe {
|
|
|
|
div {min-height: 100px;}
|
|
|
|
}
|
|
|
|
|
|
|
|
/********** Operators *******************************/
|
|
/*#############################################
|
|
# dialogOperators #
|
|
#############################################*/
|
|
.dialogOperators {
|
|
border-top: 0px solid @gray_10;
|
|
border-bottom: 0px solid @gray_10;
|
|
|
|
td {padding: 2px 2px;}
|
|
|
|
.et2_label {margin-left: 6px; display: inline-block;}
|
|
}
|
|
|
|
|
|
/********** Footer *******************************/
|
|
/*#############################################*/
|
|
/*# Toolbar #*/
|
|
/*# button | button | button delete #*/
|
|
/*##############################################*/
|
|
|
|
.dialogFooterToolbar{
|
|
background-color: transparent;
|
|
border-top: 2px solid #696969;
|
|
td {
|
|
padding: 5px 5px 0px 0px;
|
|
}
|
|
|
|
button {
|
|
.dimension_height_m; min-width: 86px;
|
|
height: 24px;
|
|
border-radius: 3px;
|
|
border: 1px solid silver;
|
|
&:hover{.dimension_height_m;}
|
|
&:action{.dimension_height_m;}
|
|
}
|
|
|
|
button[id="addressbook-edit_button[delete]"]{
|
|
float: right;
|
|
}
|
|
|
|
div.et2_hbox {
|
|
white-space: normal;
|
|
}
|
|
|
|
div.et2_box_widget{white-space: nowrap;}
|
|
|
|
// selectbox
|
|
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
|
|
|
|
|
|
|
|
// e.g. keine Benachrichtigung senden
|
|
label.et2_label {white-space: nowrap;}
|
|
|
|
input.et2_checkbox { top: 0px;}
|
|
|
|
}
|
|
|
|
/*Dialog Calendar - Resourcen suchen*/
|
|
|
|
div#divMain {
|
|
padding: 1em;
|
|
|
|
img {.dimension_width_height_s;}
|
|
input[type*="image"] {.dimension_width_height_s;}
|
|
}
|
|
|
|
//
|
|
//
|
|
|
|
|
|
/**
|
|
* admin - site configuration
|
|
*/
|
|
div.admin-config form > table {
|
|
width: 100%;
|
|
padding: 5px;
|
|
|
|
tr.th td{
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
td {
|
|
padding-left: 5px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
b {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Styles for different egw_message-types
|
|
*/
|
|
.success_message, .warning_message, .error_message {
|
|
font-weight: normal;
|
|
text-align: left;
|
|
margin-left: 5px;
|
|
padding-left: 20px;
|
|
white-space: pre-wrap;
|
|
}
|
|
.warning_message {
|
|
border-left: 24px solid @egw_color_msg_warning !important;
|
|
background-image: url(../../api/templates/default/images/dialog_warning.png);
|
|
}
|
|
.error_message {
|
|
border-left: 24px solid @egw_color_msg_error !important;
|
|
background-image: url(../../api/templates/default/images/dialog_error.png);
|
|
}
|
|
.info_message {
|
|
background-image: url(../../api/templates/default/images/dialog_info.svg);
|
|
.discard {
|
|
float:right;
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
.success_message {
|
|
background-image: url(../../api/templates/default/images/check.svg);
|
|
}
|
|
/**
|
|
* Message in popup
|
|
*/
|
|
body .egw_message_wrapper {
|
|
.background_color_15_gray;
|
|
right: 33%;
|
|
.box_shadow;
|
|
top: 0px;
|
|
z-index: 100000;
|
|
& > div:last-child {
|
|
margin-bottom: 0px !important;
|
|
}
|
|
div#egw_message {
|
|
.background_color_5_gray;
|
|
position: relative;
|
|
padding: 13px;
|
|
padding-left: 20px;
|
|
padding-right: 40px;
|
|
min-width: 130px;
|
|
margin: 0px auto 2px 0px;
|
|
white-space: pre-wrap;
|
|
border-left: 24px solid @egw_color_msg_info;
|
|
display: block;
|
|
background-position: -19px;
|
|
background-size: 16px;
|
|
background-repeat: no-repeat;
|
|
span.close {
|
|
float: right;
|
|
height: 20px;
|
|
width: 20px;
|
|
position: absolute;
|
|
background: #d0cdcdb5;
|
|
right: 10px;
|
|
top: 10px;
|
|
background-image: url(../../api/templates/default/images/close.svg);
|
|
background-size: 12px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
&:hover {filter: invert(1);}
|
|
}
|
|
}
|
|
} |