egroupware/addressbook/templates/pixelegg/app.less

/**
 * EGroupware: CSS with less preprocessor

 * ADDRESSBOOK
 *
 * Please do NOT change app.css directly, instead change app.less and compile it!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
 * @package addressbook
 * @version $Id$
 */

@import (reference) "../../../pixelegg/less/def_buttons.less";
@import (reference) "../../../pixelegg/less/def_design_pattern_color_font_shadow.less";
@import (less) "../default/app.css";


@media all {


/* #############################################################################
// iframe
// Rahmen + padding**/

/*################## iframe ####################*/
/*#            #                               #*/
/*#            #                               #*/
/*#            #      Addressbook              #*/
/*#            #                               #*/
/*#            #                               #*/
/*#            #                               #*/
/*#            ############################### #*/
/*#            #                               #*/
/*#            #                               #*/
/*#            #                               #*/
/*#            #       infolog                 #*/
/*#            #                               #*/
/*#            #                               #*/
/*#            #                               #*/
/*##############################################*/


/**
 * Give space to both contact view & infolog list
 */



#addressbook-index {
  /*height: 99%;*/
}
#addressbook-edit {
  height: auto;
  min-height: 390px;
  overflow:    auto;
}



div#addressbook-index{
//    min-height: 700px;
//    height: auto !important;

    // ###########################
    // linke Box
    // ##########################
    div.et2_hbox_left{

        padding: 4px 0px;
        // Org View
        select#addressbook-index_org_view{
            .Complete_Button_select;
            .dimension_height_l;
            margin-top: 0;
            &:hover{
                .Complete_Button_select_hover;
            }
        }


    }	// linke Box



    // ###########################
    // rechte Box
    // ###########################
    div.et2_hbox_right {
        width: auto;
        margin-right: 1em;


        // Typ
        select.et2_selectbox{
            .Complete_Button_select;
            .dimension_height_l;
            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('../../../pixelegg/images/advanced-search.png') !important;
            padding-left: 0px;
            &:hover{ background-image:url('../../../pixelegg/images/advanced-search.png'); .Complete_Button_text_icon_before_hover;}
            &:focus{ background-image:url('../../../pixelegg/images/advanced-search.png'); .Complete_Button_text_icon_before_active;}

        }

        // hinzufügen
        button#addressbook-index_add{
           
            .Complete_Button_add_only_plus;
            &:hover {.Complete_Button_add_only_plus_hover;}
            &:active {background-color: @color_positive_action_active !important;}

        }
           



    } // rechte Box



            div.filters {

                // 1 Filter
                select#infolog-index_cat_id {width: 10%; margin-left: 1em;}

                // 2 Filter
                select#infolog-index_filter {width: 10%;}

                // 3 Filter
                select#infolog-index_filter2 {width: 10%;}

                // Suchfeld
                input#infolog-index_search {
                  }


                // Suchen Button
                button.et2_button {}
            }



    // 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%;
    }







} // iframe


/*##################################################################*/

/*Infolog*/

.et2_container[id^="infolog-index-addressbook"] {

    /*height: auto;*/
    padding: 1em;
    /*min-height: 250px;*/
       
    
/*ADD Button */
/*        div.et2_hbox,
        div.et2_box_widget*/
        .et2_hbox_right[id*="_infolog-index-header_right"]{

                
                    div.et2_box_widget{
                        /*border: 1px solid rgba(0, 0, 0, 0.15);*/
                        /*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/
                        text-shadow: none;                      
                        .dimension_height_l;
                        margin-top: 5px;
                        background-image: none !important;
                        transition: all 0.5s linear;
                        -webkit-transition: all 0.5s linear; /* Safari */
                        
                         &:before {
                            content: "+";
                            font-size: 2em;
                            color: @egw_color_1; 
                            line-height: 0.5em;
                            }
                            
                       /*Text ""hinzufügen" "*/
                       span {display: none;}

                      
                      // IMG
                        img {
                            .Complete_Button_Icon_normal;
                            .dimension_width_height_s;
                            margin-left: 0.5em;
                            padding: 0px;
                            margin-top: 0px;
                            vertical-align: middle;                            
                            /*.gradient_vertical (@egw_color_2_a, @egw_color_2_a);*/

                            &:hover{.Complete_Button_Icon_hover ;}

                            &:active { .Complete_Button_Icon_active ;}
                        }
                        
                        img:last-child {margin-right: 5px;};
                      
                        
                        
                /*MouseOver*/
                      &:hover {
                          .box_shadow_standard_light_hover; 
                          background-color: @egw_color_2_a !important;
                          .border_radius_button_lefttop;
                          .dimension_height_l;
                          &:before {content: ""; font-size: 1em;padding-left: 5px;}
                          /*Text*/
                          span {visibility: hidden; display: none;};
                         img {.scale; margin: 0.5em; background: @gray_0;} 
                      }
                    }  


                
                
        }

        // Scrollarea in Infolog
        .egwGridView_scrollarea{ 
            overflow-y: scroll !important;
            overflow-x: hidden !important;
        }
}





//******************************************************************
// sidebar

#egw_fw_sidemenu{

    //Tabelle mit Ansichten des Kalenders

    .egw_fw_ui_category_content{

//        table {margin-left: -14px;}
    }

    // Bilder für Favoriten

    img.sideboxstar {

    }

//    select {margin-top: -5px;}

}


// #############################################################################
// Dialog addressbook

/*###########################################
#                                           #
#       dialog-header                       #
#############################################
#                                           #
#                                           #
#                                           #
#                                           #
#                                           #
#                   dialog                  #
#                                           #
#                                           #
#############################################
#                                           #
#    buttons                                #
#                                           #
#                                           #
##############################################*/



#addressbook-edit_addressbook-edit-general {

    table.addressbook_edit_general {
        width:100%;
        height:286px;
    td.addressbook_edit_general_right {
    	widtH: 20%;
		vertical-align: top;
		text-align: center;

    }

    }


}

#addressbook-edit tr.dialog-footer-toolbar label.et2_label {top: 0px !important;}

// Button delete
button[id="addressbook-edit_button[delete]"]{
    /*position: absolute;*/
    right: 0.5em;
    
}



 /*#######################################################*/
/*State: Address selected*/

/*Layout*/
/*##############################
#                #             #
#                #  Phone      #
#  Address       #             #
#                #  Email      #
#                #             #
#    left        #  right      #
################################ */


td.addressbook_edit_left_td {
    min-width: 500px;
    max-width: 100%;
    width: 70%;
}

td.addressbook_edit_right_td {
    min-width: 300px;
    max-width: 100%;
    width: 30%;
}



.egw_fw_ui_tab_content #addressbook-edit .et2_tabs {
    max-height: 25em;
    height: 296px;
}

/* popup window */
#popupMainDiv #addressbook-edit .et2_tabs {
    height: 400px;
}



/*############ tabbox##############################################*/
/*# et2_tabheader # et2_tabheader # et2_tabheader # et2_tabheader #*/
/*#################################################################*/
/*#                                                               #*/
/*#                                                               #*/
/*#                                                               #*/
/*#               et2_tabs                                        #*/
/*#                                                               #*/
/*#                                                               #*/
/*#################################################################*/

/*#######################################################*/
/* Tab Generell */

.leftPad5 {
 padding-left: 3px;
}


/*##################
#                #
#                #
#  Picture       #
#                #
#                #
##################*/
/*Div Image*/
div.addressbook_edit_general_picture {
//        float: right;
//         width: 180% !important;
//         max-width: 100px !important;
//         height: auto !important;
//         margin-right: 10px;


    img {
            width: 180% !important;
            max-width: 100px !important;
            height: auto !important;
    }

    /*Picture*/

// Photo
        img.photo {
            .Complete_Button_normal;
            &:hover {.Complete_Button_hover;}
        }

// Photo Upload - POPUP

        table.uploadphoto {
            .rounded (3px);
            .background_color_10_gray;
            width: auto;
            .bordered(@gray_100, @gray_100, @gray_100, @gray_100);
            left: 30%;
            top: 289px;
            
        }



}


/*Search*/
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.et2_grid{
        width: 100%;
        border-top: 0px;

        img {width: 16px; height: 16px;}

    }


    table.addressbook_edit_general{
        //		background: red;

        border-top: 0px;

        tr td:first-child {width: 20%;}
        tr td {width: auto;}

        table tr td:first-child {width: 60px;}
        table tr td {width: 200px;}


        //Name
        input#addressbook-edit_n_fn {width: 95%;}


        /*POPUP*/
         /* edit Name */
        table.editname {
            .background_color_10_gray;
            z-index: 10;
            /*font-size: 1em;*/

            tr td:first-child {width: 40% !important;font-weight: bold; padding: 3px 0;}
        }


        //Titel
        input#addressbook-edit_title {width: 95%;}
        //Role
        input#addressbook-edit_role {width: 95%;}

        //Organisation
        input#addressbook-edit_org_name  {width: 95%;}
        //unit
        input#addressbook-edit_org_unit {width: 95%;}
        // Street
        input#addressbook-edit_adr_one_street,
        input#addressbook-edit_adr_one_street2 {width: 95%;}

        // PLZ + Ort
        input#addressbook-edit_adr_one_postalcode {width: 10%;}
        input#addressbook-edit_adr_one_locality {width: 83%;}

        // Choosen Adresse
        .chzn-container { width: 95% !important;}

        //region
        input#addressbook-edit_adr_one_region {width: 95%;}


        //Owner
        select.owner {width: 300px;}
    } // generell


    // Telefonnummer:

    div#addressbook-edit_addressbook-editphones {margin-left: 1em;}

    fieldset.phoneGroup {
        border: none;
        margin-bottom: 0;
        margin-top: 12px;
        margin-left: 1em;
        height: auto;
        font-size: 100%;
        /*.background_color_15_gray;*/
        .border_radius_button_normal;
        legend { text-transform: uppercase;}

        // Phonenumber Input Fields
        .fixedHeight, .telNumbers {
            height: auto;
        }

        table.et2_grid {
            margin-left: -7px;
            tr:nth-child(even) {background: @color_even;}
            tr:nth-child(odd) {background: @color_odd;} 
            td {padding: 3px 0px;}
        }
        
        table.et2_grid td.telNumbers{
            width: 155px;
            input { width: 140px !important; }

        }

        // Radio Box
        input.et2_radiobox {};


    }

    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;
        margin-left: 1em;
        height: auto;
        font-size: 100%;
        /*.background_color_15_gray;*/
        .border_radius_button_normal;
        legend { text-transform: uppercase;}


        table.et2_grid {
            margin-left: -7px;
            tr:nth-child(even) {background: @color_even;}
            tr:nth-child(odd) {background: @color_odd;}   
            td {padding: 3px 0px;}
        }

        td {
            input {width: 82%;}


         // image after Link
         a.et2_url {
            margin-left: 5px;

            &:hover {.Complete_Button_Icon_hover;}
         }

/*         a.et2_url:after {
            content: "\221E";
            font-size: 1.2em;
        }*/

        a.et2_url.url {
            .Complete_Button_Icon_normal;
            background-size: 16px 16px;
            background-image: url('images/url.png');
        }

        a.et2_url.email {
            .Complete_Button_Icon_normal;
            background-size: 16px 16px;
            background-image: url('images/email.png');
        }
        }
    }

    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;
    }
    
    td.addressbook_edit_general_left {
        
        
        // table Addressfield
        table.et2_grid{
           
            margin-left: 2px;
/*            tr:nth-child(even) {background: @color-even;}
            tr:nth-child(odd) {background:  @color-odd;} */
            td {padding: 5px 0px 5px 3px;}
            
            
            // Edit Name
            div#addressbook-edit_addressbook-edit-name{
                
                 table.et2_grid{
                     
                background-color: @gray_30;
                .bordered (@gray_30,@gray_30,@gray_30,@gray_30);
                .rounded (5px);
                     
                        margin-left: 2px;
                        border-top: 1px solid @gray_30 !important;
                        /*tr:nth-child(even) {background: @color_even;}*/
                        /*tr:nth-child(odd) {background: @color_odd;}*/ 
                        td {padding: 5px 0px 5px 3px;}
                 }
                
            }
            
        }
        
    }
    
}





// ################### Tab 2 / Kategorien ########################
//
// addressbook-edit_addressbook.edit.cats
// in Adressbuch css ausgelagert

//div#addressbook-edit_addressbook~\.edit~\.cats {background-color: red;}

div#addressbook-edit_addressbook-edit-cats {overflow: scroll;}

// ################## Tab 3 / Privat #############################
// Privat

#addressbook-edit_addressbook-edit-custom_private,
#addressbook-search_addressbook-edit-custom_private{
    .th{ height: 20px;}
    tbody{
        display: table-header-group;
        vertical-align: top;
    }
}

#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: 0em;
    }


    /*Birthday + Timezone*/
    /*row*/
    .add_bday_timezone {


        // Timezone
        #addressbook_edit_tz_chzn{
                width: 15% !important;
                padding-top: 0em;
            }


        /*Birthday Label*/
        label.et2_label {padding-left: 1em;}
    }



}
 /*################## Tab 4 Details ###############################*/

 #addressbook-edit_addressbook-edit-details {
     
                      table.et2_grid{
                        margin-left: 2px;
                        border-top: 1px solid @gray_30 !important;
                        tr:nth-child(even) {background: @color_even;}
                        tr:nth-child(odd) {background: @color_odd;} 
                        td {padding: 5px 0px 5px 3px;}
                 }
     
     
     
     
 }

 /*################## Tab 5  Verknüpfungen ###############################*/
// Verknüpfungen

#addressbook-edit_addressbook-edit-links,
#addressbook-search_addressbook-edit-links{
    .th{ height: 20px;}
    tbody{
        display: table-header-group;
        vertical-align: top;

    }

    tr:first {
        td {height: 150px;}
    }

}
div#addressbook-edit_addressbook-edit-links {
    /*overflow-y: scroll;*/


    table.et2_grid {

        tr:first td {height: 150px;}

    }

    /*neue verknüpfung erstellen - div*/
    div#addressbook-edit_link_to {
        width: 100% !important;


        // 1. with Addressbook
        div#addressbook-edit_link_to_link_entry{ margin: 1em;}


        // 2. Icon
        img.et2_button_icon {
            .Complete_Button_Icon_normal;
            float: left;
            /*margin: 0.5em 2em;*/
            padding: 5px;
            .dimension_width_height_m;

            &:hover {.Complete_Button_Icon_hover;}
            &:active {.Complete_Button_Icon_active;}
        }


        // Upload
        div.et2_file {
            width: 350px;
            margin-left: 100px;
        }

    }
    table#addressbook-edit_link_to {overflow-y: scroll;}
}



 /*################## Tab 6  Verteilerlisten ###############################*/

/*seems to be ok*/
// Verteilerliste

#addressbook-edit_addressbook-edit-distribution_list,
#addressbook-search_addressbook-edit-distribution_list{
    .th{ height: 20px;}
    tbody{
        display: table-header-group;
        vertical-align: top;
    }



}
 /*################## Tab 7 Extra ###############################*/
/*seems to be ok*/
// Extra
#addressbook-edit_addressbook-edit-custom,
#addressbook-search_addressbook-edit-custom{
    .th{ height: 20px;}
    tbody{
        display: table-header-group;
        vertical-align: top;
    }
}
 /*################## Tab 8 Extra Privat###############################*/
/*seems to be ok*/



 /*################## Tab 9 History ###############################*/
 // History

 #addressbook-edit_addressbook-edit-history{

    .th{ height: 20px;}
    tbody{
        display: table-header-group;
        vertical-align: top;
    }

    table.et2_grid {
    }


     .et2_historylog,
     #addressbook-edit_history{

         div:first-child {height: auto !important;}


         table.egwGridView_outer {


             th.optcol {

                 span.selectcols {position: relative !important;}

             }

         }

     }

 }









/*################################################################
################################################################*/



// mehr...Phonebuch

button.button_more {
    .Complete_Button_text_icon_before;
    .dimension_height_m;
    background-image:url('../images/edit.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;
}


.bold {
    font-weight: bold;
}
.fileas select, .fileas, .owner select, .owner {
    font-weight: bold;
    width: 100%;
}
.photo img, .iphoto img {
    width: 60px;
}
.photo img {
}

// Dialog Upload photo

.uploadphoto {
    background-color: @gray_20;
    border: 1px solid black !important;
    display: none;
    left: 48px;
    padding: 4px;
    position: absolute;
    top: 168px;
}

table.uploadphoto {width: 360px !important; background-color: @gray_20 !important; .rounded (9px);}





.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;
}
.fixedHeight,.telNumbers { height: auto;}



} // Ende Media all

/*#################################### Media Queries #####################################################*/

@media only screen and (min-width: 980px) and (max-width: 1279px) {

    .nextmatch_header > .filters select {  margin: 0px;}

}

@media only screen and (min-width: 760px) and (max-width: 979px) {

}

@media only screen and (min-width: 320px)  and (max-width: 759px) {

}


//