egroupware/pixelegg/less/layout_dialog.less

/**
 * 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) "def_buttons.less";
/*@import (reference) "def_content_elements.less";*/
@import (reference) "def_design_pattern_color_font_shadow.less";
@import (reference) "def_messages.less";


// Dialoge Allgemeine Definition


div.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{
                                    height: 20px;
                                    padding: 0;
                                    margin: 0px;
                                    font-size: 0.95em;
                                    
                                }
                                
                               input {
                                    height: 20px;
                                    padding: 0;
                                    margin: 4px 4px 4px 5px;;
                                    font-size: 0.95em;
                                    .border_radius (3px, 3px ,3px ,3px );
                                }
                                
                                input.hasDatepicker {
                                    background-image: url( "../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%;}


/*###########################################
#                                           #
#     dialog-header                         #
#############################################
#                                           #
#                                           #
#                                           #
#                                           #
#                                           #
#    main + tabs                            #
#                                           #
#                                           #
#############################################
#   dialog-operators                        #
#############################################
#                                           #
#    buttons                                #
#                                           #
#                                           #
##############################################*/


/**********    Header Part ********************/
.dialog-header{
    
    
    /*background-color: @egw_color_2_d;*/ 
    .gradient_thead;
    .color_100_gray;
    

    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_label {
        .color_100_gray; 
        vertical-align: bottom; 
        padding: 0px 0px 0px 3px !important;
    }
    
    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 */
        
                    }

                }            
               
}

tr.dialog-header2,
tr.dialog-header3,
tr.dialog-header4{ 
    background-color: @egw_color_2_e !important;
    border-top: 2px solid @gray_10;
    border-bottom: 2px solid @gray_10;
    
    .et2_label {
        .color_0_gray; 
        vertical-align: bottom; 
        padding: 0px 0px 0px 3px !important;
    }
    
}



/************* Main  **********************************/

// Terminsuche
.dialog-main-timeframe {
    
    div {min-height: 100px;}
    
}

/**********    Operators *******************************/
.dialog-operators {
    background-color: fade(@gray_10, 2%);
    border-top: 0px solid @gray_10;
    border-bottom: 0px solid @gray_10;
   
    td {padding: 2px;}
}


/**********    Footer  *******************************/
/*Buttons / Toolbar*/

.dialog-footer-toolbar{ 
    background-color: @egw_color_2_e;

    td {padding: 0px 5px;}
    
    button { height: 32px;}
    
    // selectbox
    .et2_selectbox {height: 32px; top: 0px; font-size: 1.2em;}
    
    
    
    // e.g. keine Benachrichtigung senden
    label.et2_label {
/*        .Complete_Button_input;
        .border_normal;
	.box_shadow_standard_light;
	.color-100-gray;
        .background-color-10-gray;*/
        padding: 6px 5px 6px 0;
        position: relative;
        top: 11px;
    }
    
    input.et2_checkbox { top: 0px;}
    
}


//
//
//