egroupware_official/pixelegg/less/layout_dialog.less

490 lines
11 KiB
Plaintext
Raw Normal View History

2013-11-18 20:27:56 +01:00
/**
* EGroupware: Stylite Pixelegg template
*
2014-02-05 11:02:40 +01:00
* dialog
2013-11-25 04:16:41 +01:00
* define every dialog box in egw
* even popup or jquery
2013-11-18 20:27:56 +01:00
*
* 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";
//##############################################################################################################
2014-02-24 18:18:34 +01:00
2013-11-25 04:16:41 +01:00
// Dialoge Allgemeine Definition
2014-02-05 11:02:40 +01:00
div#popupMainDiv {
2014-04-01 11:14:34 +02:00
padding: 8px;
background-color: @gray_0;
background-repeat: repeat-x;
overflow: auto;//If popup is not big enough make sure we can still reach bottom buttons
2014-02-05 11:02:40 +01:00
}
2013-11-25 04:16:41 +01:00
2014-04-01 11:14:34 +02:00
div#popupMainDiv > * {margin: 0px;}
form.et2_container {
2013-11-25 04:16:41 +01:00
// .background-color-25-gray;
padding: 0;
div{
table.et2_grid {
// .background-color-5-gray;
tbody {
tr {
// Select + Inputfelder
.row {
td {
.et2_box_widget {
2014-02-05 11:02:40 +01:00
select, input{
2013-11-25 04:16:41 +01:00
}
2014-02-05 11:02:40 +01:00
input {
margin: 4px 5px 4px 0;
.border_radius (3px, 3px ,3px ,3px );
2013-11-25 04:16:41 +01:00
}
2014-02-05 11:02:40 +01:00
2013-12-16 10:37:26 +01:00
input.hasDatepicker {
background-image: url( "../../node_modules/bootstrap-icons/icons/calendar3.svg");
2014-02-05 11:02:40 +01:00
&:hover {cursor: pointer;}
2013-12-16 10:37:26 +01:00
}
2013-11-25 04:16:41 +01:00
}
}
}
2013-11-22 06:27:29 +01:00
2013-11-25 04:16:41 +01:00
td{
2013-11-22 06:27:29 +01:00
2013-11-25 04:16:41 +01:00
// Tabs
.et2_tabbox{
2013-11-18 20:27:56 +01:00
2013-11-25 04:16:41 +01:00
.et2_tabheader {}
.et2_tabs {
2014-02-05 11:02:40 +01:00
2013-12-30 18:32:42 +01:00
table.et2_grid {.background_color_0_gray;}
2013-11-25 04:16:41 +01:00
}
}
}
}
}
}
}
}
// high = more padding
.high {
2013-12-30 18:32:42 +01:00
border-top: 5px solid @gray_10;
border-bottom: 5px solid @gray_10 !important;
2013-11-25 04:16:41 +01:00
}
2013-11-18 20:27:56 +01:00
/*Main div*/
#popupMainDiv {
2014-02-05 11:02:40 +01:00
2013-11-18 20:27:56 +01:00
}
2013-11-22 06:27:29 +01:00
2013-11-18 20:27:56 +01:00
table.dialog-main-view {width: 100%;}
2013-12-16 10:37:26 +01:00
/*###########################################
# #
# dialogHeader app-img #
#############################################
# #
# dialogHeader2 #
#############################################
# #
# dialogHeader3 #
#############################################
# #
# dialogHeader4 #
2013-12-16 10:37:26 +01:00
#############################################
# #
# #
# #
# #
# #
# main + tabs #
# #
# #
#############################################
# dialogOperators #
2013-12-16 10:37:26 +01:00
#############################################
# #
# button | button | button delete #
2013-12-16 10:37:26 +01:00
##############################################*/
/*** dialogHeader on a box not table ***/
2013-12-16 10:37:26 +01:00
2014-02-05 11:02:40 +01:00
/********** Header Part ********************/
.dialogHeader {
.color_100_gray;
2022-08-30 07:50:43 +02:00
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 */
}
}
2013-11-18 20:27:56 +01:00
}
/********** Header Row2 - 4 ********************/
2014-03-05 10:18:54 +01:00
tr.dialogHeader2,
tr.dialogHeader3,
tr.dialogHeader4{
2014-02-06 18:35:54 +01:00
vertical-align: middle;
2013-12-16 10:37:26 +01:00
.et2_label {
2014-02-05 11:02:40 +01:00
.color_90_gray;
2014-02-06 18:35:54 +01:00
vertical-align: middle;
2014-02-12 09:10:04 +01:00
font-size: 1em;
2013-12-16 10:37:26 +01:00
}
}
2014-01-18 18:51:29 +01:00
/************* Tabs *********************************/
/**
* Tabs widget
*/
2014-01-18 18:51:29 +01:00
.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 {
2016-06-01 15:04:05 +02:00
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;
2016-06-01 15:04:05 +02:00
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;
2014-01-18 18:51:29 +01:00
.color_100_gray;
border-bottom: 3px solid @gray_60;
margin-bottom:-3px;
&:hover {
.color_100_gray;
// border: 1px solid gray;
background-color: white;
}
}
2014-02-05 11:02:40 +01:00
// field for content
.et2_tabs, .tab_body {
border:none;
border-bottom:1px solid @gray_10;
2016-06-01 15:04:05 +02:00
border-top: 1px solid @gray_10;
padding: 5px;
background-color: @gray_0;
margin-bottom: 11px;
2016-06-01 15:04:05 +02:00
margin-top:3px;
padding-top: 15px;
2014-01-18 18:51:29 +01:00
}
2013-12-16 10:37:26 +01:00
.tab_body {
border-top-width: 1px;
2014-07-03 16:58:23 +02:00
img {
/*filter grey*/
.img_filter_gray;
}
}
div#etemplate\.tab_widget {
margin-bottom: 11px;
}
2013-12-16 10:37:26 +01:00
2013-12-16 10:37:26 +01:00
/************* Main **********************************/
2013-11-18 20:27:56 +01:00
2013-11-25 04:16:41 +01:00
// Terminsuche
.dialogMainTimeframe {
2014-02-05 11:02:40 +01:00
2013-11-25 04:16:41 +01:00
div {min-height: 100px;}
2014-02-05 11:02:40 +01:00
2013-11-25 04:16:41 +01:00
}
2013-11-18 20:27:56 +01:00
2013-12-16 10:37:26 +01:00
/********** Operators *******************************/
/*#############################################
# dialogOperators #
#############################################*/
2014-03-05 10:18:54 +01:00
.dialogOperators {
2014-01-08 19:49:09 +01:00
border-top: 0px solid @gray_10;
border-bottom: 0px solid @gray_10;
2014-02-05 11:02:40 +01:00
td {padding: 2px 2px;}
.et2_label {margin-left: 6px; display: inline-block;}
2013-11-22 06:27:29 +01:00
}
2013-11-25 04:16:41 +01:00
2013-12-16 10:37:26 +01:00
/********** Footer *******************************/
/*#############################################*/
/*# Toolbar #*/
/*# button | button | button delete #*/
/*##############################################*/
2013-11-18 20:27:56 +01:00
2014-03-05 10:18:54 +01:00
.dialogFooterToolbar{
background-color: transparent;
2022-08-30 07:50:43 +02:00
border-top: 2px solid #696969;
td {
padding: 5px 5px 0px 0px;
}
2014-02-05 11:02:40 +01:00
2014-02-06 18:35:54 +01:00
button {
.dimension_height_m; min-width: 86px;
height: 24px;
border-radius: 3px;
border: 1px solid silver;
2014-02-06 18:35:54 +01:00
&:hover{.dimension_height_m;}
&:action{.dimension_height_m;}
}
2014-02-05 11:02:40 +01:00
2014-01-14 09:20:19 +01:00
button[id="addressbook-edit_button[delete]"]{
float: right;
}
2014-02-06 08:40:54 +01:00
div.et2_hbox {
white-space: normal;
}
2014-02-05 11:02:40 +01:00
div.et2_box_widget{white-space: nowrap;}
2013-12-16 10:37:26 +01:00
// selectbox
2014-02-06 08:40:54 +01:00
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
2014-02-05 11:02:40 +01:00
2013-11-22 06:27:29 +01:00
// e.g. keine Benachrichtigung senden
2014-06-16 13:06:15 +02:00
label.et2_label {white-space: nowrap;}
2014-02-05 11:02:40 +01:00
2013-12-16 10:37:26 +01:00
input.et2_checkbox { top: 0px;}
2014-02-05 11:02:40 +01:00
2013-11-18 20:27:56 +01:00
}
2013-11-20 09:41:08 +01:00
/*Dialog Calendar - Resourcen suchen*/
div#divMain {
padding: 1em;
2014-02-05 11:02:40 +01:00
img {.dimension_width_height_s;}
input[type*="image"] {.dimension_width_height_s;}
}
2013-11-20 09:41:08 +01:00
2013-11-25 04:16:41 +01:00
//
//
/**
* 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;
}
}
}
2014-02-10 10:31:29 +01:00
/**
* Styles for different egw_message-types
*/
.success_message, .warning_message, .error_message {
font-weight: normal;
text-align: left;
margin-left: 5px;
padding-left: 20px;
2014-04-17 09:35:06 +02:00
white-space: pre-wrap;
}
.warning_message {
border-left: 24px solid @egw_color_msg_warning !important;
background-image: url(../../node_modules/bootstrap-icons/icons/exclamation-triangle.svg);
}
.error_message {
border-left: 24px solid @egw_color_msg_error !important;
background-image: url(../../node_modules/bootstrap-icons/icons/exclamation-circle.svg);
}
.info_message {
background-image: url(../../node_modules/bootstrap-icons/icons/info-circle.svg);
.discard {
float:right;
margin-top: 4px;
}
}
.success_message {
background-image: url(../../node_modules/bootstrap-icons/icons/check-lg.svg);
}
/**
* Message in popup
*/
body .egw_message_wrapper.isPopup{
top: 0px;
bottom: auto;
overflow-y: unset;
right: 33% !important;
max-width: unset;
min-width: unset;
}
body .egw_message_wrapper {
2022-11-28 16:57:55 +01:00
.background_color_15_gray;
right: 11px !important;
max-width: 40%;
min-width: 40%;
.box_shadow;
bottom: 10px;
max-height: 60%;
overflow-y: auto;
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(../../node_modules/bootstrap-icons/icons/x-lg.svg);
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
cursor: pointer;
&:hover {filter: invert(1);}
}
}
}