egroupware_official/filemanager/templates/pixelegg/app.less

/**
 * EGroupware: CSS with less preprocessor
 *
 * FILEMANAGER
 *
 * 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 filemanager
 * @version $Id$
 */


@import (reference) "../../../pixelegg/less/definitions.less";
@import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../default/app.css";

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

*/// defind in layout_raster.less /*


/*//******************************************************************
// iframe*/

#filemanager-index_filemanager-index-header_left {
    float: left;
    height: 36px;
    width: 98%;
}




// UP / Home / Path _______ / Go / #TARP# / BUTTONS ----- / UPLOAD

 /*Up img*/
 img#filemanager-index_up {position: relative; top: 5px; .dimension_width_height_s; padding: 4px; background-color: @gray_10;}

  /*Home img*/
 img#filemanager-index_home {position: relative; top: 5px; .dimension_width_height_s; padding: 4px; background-color: @gray_10;}

#filemanager-index_nm img.vfsMimeIcon[src*="/etemplate/thumbnail.php"] {
	height: auto;
}

// Pfad
div.filemanager_navigation{
        position: relative;
        width: 100%;
        margin-top: -12px !important;
        margin-left: 6px !important;


        img {
                .dimension_width_height_s;
                .Complete_Button_Icon_normal;
                padding: 0.2em;

                &:hover {.Complete_Button_Icon_hover;}
            }

        label {

            float: left;
            left: 74px;
            right: 421px;
            font-size: 140%;
            top: 5px;

        input {width: 99%;}




    }

}

/*div.filemanager_navigation > label > input {
    width: 95%;
}*/


/*Buttons / Tarp / FileUpload*/
#filemanager-index_buttons {
    top: -3px;
    float: left;
    position: absolute;
    right: 0;

    img {.dimension_width_height_s; padding: 4px;}


    // choose data area
    div.et2_file{
        .Complete_Button_Icon_normal;
        padding: 0em;
        margin:0;
        width: 16.5em;
        background-color: @gray_10;
        .dimension_height_m;
        .rounded(3px);


                        &:hover {background-color: @color_positive_action_active !important;}
                        &:active {background-color: @color_positive_action_active !important;}

        // Text: Datei wählen
        span.et2_file_span {
            background-size: 16px 16px;
            padding: 3px 0px 0px 10px;;
            width: 14em;
            border: none;
            cursor: pointer;
            margin: 3px 0 0 2px;
            background-color: @gray_10;

                        &:hover {background-color: @color_positive_action_active !important;}
                        &:active {background-color: @color_positive_action_active !important;}
        }

       // Upload Fläche
       input#filemanager-index_upload {
                color: @gray_0;
                cursor: pointer;
                background-color: transparent;

/*                &:hover {background-color: @color_positive_action_active !important;}
                &:active {background-color: @color_positive_action_active !important;}*/

        }


        // Progress Bar
        div.progress {z-index: 1;width:auto;overflow: hidden;text-overflow: ellipsis;}
  }

}

#filemanager-index_buttons > * {
    padding-left: 3px;
    vertical-align: middle;
    margin-right: 0.2em;
    background-color: @gray_10;



}






#filemanager-index{
    width: auto;




    // Tarp
    #filemanager-index_tarp {
        width: 32px !important;
        height: 32px !important;
        position: relative;
        top: 0px;
        background-color: @gray_20;

        border: none;
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
                &:hover {
                        border: none;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        box-shadow: none;
                        .background_color_20_gray;
               }
    }








    .filters{

        vertical-align: center;

        #filemanager-index_filter{ margin-top: 0.5em;}
    }


}



// images .... uploaded files
table.egwGridView_grid img {

    .img_filter_none;

}




// iframe







/*// #####################################################*/
/*Dialog filemanager*/

#filemanager-select{

    .dialogHeader{
        .et2_button_icon{
            margin: 4px 4px 0 4px;
            .bordered (@gray_0, @gray_0, @gray_0, @gray_0);
            .rounded (3px);
            background-color: @gray_0;
            height: auto;
            width: 24px;
        }

        .selectPathContainer {
            overflow: auto;
            width: 470px;
            margin-top: 0px;
            height: 32px;

            input {height: 20px;}

        }
    }
    #filemanager-select_apps{
        .background_color_15_gray;
        .et2_button_icon{
            height: auto;
            width: 24px;
            padding: 10px;
        }
    }
    table#filemanager-select_dir{
       	.border_normal;

        tr:nth-child(even) {background: @color_even;}
        tr:nth-child(odd) {background: @color_odd;}

    }
}




/*// #####################################################*/
/*Dialog filemanager edit POPUP WINDOW*/

div#filemanager-file_tabs {

    span.ui-icon-search {
                .Complete_Button_Icon_normal;
                position: relative;
                top: 3px;
                margin-left: 3px;

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


    /*eacl*/
    #filemanager-file_filemanager-file-eacl{

        /*Owner*/
        td.filemanager-file_filemanager-file-eaclowner{

            span {display: flex; margin-right: 1px;}
                span.ui-icon-search {
                position: relative;
                top: 15px;
                margin-left: -3px;
                margin-right: 3px;
                }

        }

    }


    /*Abonements*/
    td.eaclAccount {width: 200px;}
}

/*// #####################################################*/
/*Dialog filemanager upload POPUP WINDOW*/

div#stylite-filemanager-upload{
    margin: 0.5em;

    .et2_file{
       .dimension_height_m;
       input {
            color: @gray_0;
            width: 250px;
            background-color: @egw_color_2_a;
        &:hover {.Complete_Button_add_only_plus_hover;}
        &:active {background-color: @color_positive_action_active !important;}
        }

        div.progress {width: 0px;}
  }



  // th
  .th {background: none;}


  // Schliessen / Close
  .dialogFooterToolbar{

      button {

                .Complete_Button_text_icon_before;

                &:hover {background-color: @color_cancel_action_hover !important; color: @gray_100; .box_shadow_standard_light_hover;}
                &:active {background-color: @color_cancel_action_active !important; color: @gray_100; .box_shadow_standard_light_inset;}

      }

  }


}


//

/* tablets and smartphones  */
@media only screen and (max-device-width:1024px) {
	#filemanager-index_nm {
		table.egwGridView_outer tbody {
			span[id^='filemanager-index'][id$='size]']{
				.mob-fontsize-s;
				text-align: right;
			}
			label[id^='filemanager-index'][id$='name]'] {
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 100%;
				span{
					white-space: nowrap;
					
				}
			}
		}
	}
	.previewImage img {max-width: 100%;}
	div#filemanager-file_tabs td.eaclAccount,td.eaclRights {display: block;}
}