egroupware/pixelegg/less/layout_raster_main.less

/**
 * EGroupware: Stylite Pixelegg template
 *
 * Definitions for layout and raster
 *
 * 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 Reinhardt <stefan.reinhardt@pixelegg.de>
 * @package pixelegg
 * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $
 */
/*
    Created on : 23.07.2014, 13:25:11
    Author     : stefanreinhardt
*/

@import (reference) "definitions.less";

/* ##################################################################################################
*  Main
// ##################################################################################
// ## egw_divLogo ##  Toggle up / down | egw_fw_topmenu                             #
// ##             ##                                                                #
// ##################################################################################
// ##             ##                                                                #
// ##             ##                                                                #
// ##             ##                                                                #
// ##             ##                                                                #
// ##             ##                                                                #
// ##  SIDEBAR    ##             MAIN                                               #
// ##             ##             #egw_fw_main                                       #
// ##             ##                                                                #
// ##             ##                                                                #
// ##             ##                                                                #
/* #####################################################################################################
*/
#egw_fw_basecontainer.egw_fw_sidebar_toggleOn {
	#egw_fw_main {
		#egw_fw_tabs {
			.egw_fw_ui_tabs_header {
				padding-left: 235px;
			}
		}
	}
}
#egw_fw_main {
    padding: 0;
    width: auto;
  	position: relative;
  	z-index: 1;
    // #######################################
    // AREA for Content
    #egw_fw_tabs{
        position: relative;
        background-color: transparent;
        float: left;
        width: 100%;
        .egw_fw_ui_tabs_header {
			margin: 0px 0 0 0;
			padding: 0px 250px 0px 60px;
			background-position: bottom;
			background-repeat: repeat-x;
			background-color: transparent;
			height: 39px;
			align-items: baseline;
			h1 {
				display: inline;
				width: 100%;
				text-align: center;
				-webkit-margin-before: 0;
				-webkit-margin-after: 0;
			}
			img{
				text-align:center;
				float: none;
				margin: 0 auto;
				.dimension_width_height_s;
			}
			.egw_fw_ui_tab_header {
				padding-left: 0;
				position: relative;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: 0px 5px 0px 0px;
				cursor: pointer;
				background-repeat:repeat-x;
				height: 100%;
				max-width: 200px;
				.notifyTabDiv {
					position: absolute;
					background-color: #c14343;
					bottom: 5px;
					height: 17px;
					left: 0%;
					color: #fff9fb;
					border: 2px solid #ffffff;
					text-align: center;
					border-bottom: 0;
					border-radius: 50%;
					white-space: nowrap;
					line-height: 16px;
					width: 17px;
					font-weight: bold;
					&:hover {
						background-color: @gray_90;
					}
				}
				&:hover:not(.egw_fw_ui_tab_header_active) {
					background-color: @color_hover_row;
					padding-bottom: 0px;
					border-top: 7px solid transparent;
					transition: none;
					width: -webkit-fill-available;
					width: -moz-available;
					max-width: fit-content !important;

				}
				&:hover
				{
					.egw_fw_ui_tab_close_button {
						top: 0px;
						background-image: url(../../api/templates/default/images/close.svg);
					}
				}
				// APP Name
				h1 {
					.fontsize_m;
					line-height: 1em;
					margin:0 15px 2px 2px;
					vertical-align: text-top;
				}

				// Images
				img.egw_fw_ui_tab_icon {
					display: inline-block;
					.dimension_width_height_s;
					margin: 5px 1px 0 1em;

					.img_filter_gray;
				}
			}

            /*active Tabs*/
			.egw_fw_ui_tab_header_active {
				border-left: 1px solid #bfc0bf;
				border-right: 1px solid #bfc0bf;
				border-bottom: 4px solid white !important;
				border-top: 4px solid transparent;
				width: -webkit-fill-available;
				width: -moz-available;
				max-width: fit-content!important;
				.background_color_0_gray ;
				background-image:none !important;
				&:hover {
					.background_color_0_gray;
					padding-top: 0px;
					.egw_fw_ui_tab_close_button {
						top: 2px;
					}
				}

			  // aktive Bilder
			  img.egw_fw_ui_tab_icon {
				padding-top: 3px;
				display: inline-block;
				.dimension_width_height_s;
			  }
			}
		}

	  @media screen {
		.egw_fw_ui_tabs_header {
		  display: flex;
		}
	  }

	  // #################
	  // #       close x #
	  // #               #
	  // #################
	  .egw_fw_ui_tab_close_button {
		right: 3px;
		top: 3px;
		display: inline-block;
		.dimension_width_height_xs;
			margin-left: 0px;
			background-repeat: no-repeat;
			background-position: center;

			background-size: 6px 6px;
			position: absolute;
		}
        // End of Tabs
    }


    // ################################
    // Hover
    // no effect ?
    .egw_fw_ui_tab_header_hover{
        background-color: @color_hover_row;
    }

    // Der eigentliche Inhalt der APP
    // ############################################################
    // #      #      #     #     #     #     #     #     #     ####
    // #      #      #     #     #     #     #     #     #     ####
    // ############################################################
    //
    //    Content / Inhalt
    //
    // ############################################################

    .egw_fw_ui_tab_content {
        width: 100%;
        padding: 0px;
        margin: 0;
        overflow-x: hidden;
        overflow-y: hidden;
		margin-top: 0.8em;
        > div {
            width: 100%;
            padding: 0 0 0 0;
        };
    }
    // Ende Main
}