egroupware/pixelegg/less/layout_raster_buttons.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";

#egw_fw_topmenu_info_items {
	display: flex !important;
	flex-direction: row-reverse;
	height: 45px;
	position: absolute;
    padding-right: 2px;
	right: 0px;
    z-index: 1000;
	background-color: #fbfbfb;
	.topmenu_info_item {
		height: 45px;
		width: 45px;
		border-left: 1px solid #bfc0bf;
		display: inline-block;
		padding-left: 0px;
		float: right;
		background-size: 20px;
		background-position: center center;
		background-repeat: no-repeat;
		cursor: pointer;
		&:hover {
			background-color: @color_hover_row;
		}
	}
	#topmenu_info_user_avatar {
		span.fw_avatar_stat {
			position: absolute;
		}
		span.stat1 {
			width: 14px;
			height: 14px;
			position: absolute;
			right: 30px;
			bottom: 0px;
			border-radius: 50%;
			z-index: 100000;
			background-size: 14px;
			background-repeat: no-repeat;
			color: #2d2b2b;
			font-weight: bold;
			text-align: center;
			font-size: 10px;
			line-height: 14px;
			border: 2px solid #fbfbfb;
		}
		span.online {
			background-color: #2de0a5;
		}
		span.offline {
			background-color: #cbced1;
		}
		span.away {
			background-color: #ffd21f;
		}
		span.busy {
			background-color: #f5455c;
		}
		span.noconnection {
			background-color: #E1E16D;
			&:before {content:"!"}
		}
	}

	#topmenu_info_logout {
		background-image: url(../../api/templates/default/images/logout.svg);
		a {
			width:45px;
			height: 45px;
			display: inline-block;
		}
	}

	#topmenu_info_print_title {
		background-image: url(../../api/templates/default/images/print.svg);
		span {
			width: 45px;
			height: 45px;
			display: inline-block;
		}
	}
	/*darkmode*/
	#topmenu_info_darkmode {
		span {
			background-image: url(../../api/templates/default/images/darkmode_off.svg);
			width: 45px;
			height: 45px;
			display: inline-block;
			background-position: center;
			background-repeat: no-repeat;
		}

		span.darkmode_on {
			background-image: url(../../api/templates/default/images/darkmode_on.svg);
			filter:invert(1) hue-rotate(180deg);
		}
	}

	/*Notification*/
    #topmenu_info_notifications {
		line-height: 45px;
		text-align: center;
		cursor: pointer;
		display: inline-block;
		color: #fbfbfb;
		font-weight: bold;
		opacity: 0.4;
		background-image: url(../../api/templates/default/images/notification_message.svg);
		border-left: 1px solid #636262;
		.egw_fw_topmenu_info_notify {
			position: absolute;
			background-color: #c14343;
			bottom: 0px;
			height: 17px;
			white-space: nowrap;
			line-height: 16px;
			width: 17px;
			border-top-right-radius: 50%;
			margin-left: -3px;
			color: #fff9fb;
			border: 2px solid #ffffff;
			text-align: center;
			border-radius: 50%;
		}
		.popup_note {
			position: absolute;
			width: 280px;
			height: 30px;
			left: -96px;
			top: 45px;
			border: 1px solid silver;
			background: #ffffff;
			text-align: center;
			font-size: 10pt;
			line-height: 22pt;
			color: #b9436c;
			white-space: nowrap;
			z-index: 999;
			&:before {
				content: '';
				position: absolute;
				top: -13px;
				left: 251px;
				width: 0;
				height: 0px;
				border-left: 14px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 12px solid #aaa;
				margin-bottom: 12px;
				margin-left: 1px;
			}
			&:after {
				content: '';
				position: absolute;
				top: -11px;
				left: 251px;
				width: 0;
				height: 0;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 12px solid #ffffff;
				margin-bottom: 11px;
			}
		}
	}
	#topmenu_info_notifications.egwpopup_notify {
		background-image: url(../../api/templates/default/images/notification_message_active.svg);
		opacity: 1;
		border-left: 1px solid #bfc0bf;
	}

	/*Search button*/
	#topmenu_info_search
	{
		background-repeat: no-repeat;
		background-image: url(../../api/templates/default/images/topmenu_items/search.svg);
		a {
			width: 45px;
			height: 45px;
			display: inline-block;
		}
	}

    /*current user info*/
    #topmenu_info_current_users {}

    /*current user info*/
    #topmenu_info_current_users {}

    /*time zone*/
    form { height: 0px;
           select {padding: 0px;}
    }

    /*quick*/
    #topmenu_info_quick_add {
		position: relative;
		span#quick_add {
			float: right;
			background-image: url(../../api/templates/default/images/add.svg);
			background-repeat: no-repeat;
			background-size: 24px;
			background-position: center;
			width: 45px;
			height: 45px;
			padding-right: 3px;
			&:before {
				content: " ";
				font-size: 2em;
				color: @egw_color_2_a;
				line-height: 0.6em;
				background-color: white;
			}
		}
	}

	#topmenu_info_timer {
		order: 1;
		position: relative;
		#topmenu_timer {
			text-align: center;
			font-size: 20px;
			position: relative;
			top: 10px !important;
			display: block;
			white-space: nowrap;
			color: #606060;
			height: 45px;
			width: 45px;
		}
		#topmenu_timer.running {
			color: blue;
		}
		#topmenu_timer.running.overall {
			color: black;
		}
		#topmenu_timer.paused {
			color: orange;
		}
		&:hover {
			cursor: pointer;
		}
		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: url(../../timesheet/templates/default/images/navbar.svg);
			background-repeat: no-repeat;
			background-size: 32px;
			background-position: center center;
			filter: opacity(0.3);
		}
	}

	// quick_add and timer selectbox / menu
	#topmenu_info_quick_add, #topmenu_info_timer {
		#quick_add_selectbox, #timer_selectbox {
			height: 0px;
			float: left;
			display: inline-block;
			/* do NOT show empty label */
			sl-menu-item[value=""] {
				display: none;
			}
		}
		#quick_add_selectbox::part(form-control-input), #timer_selectbox::part(form-control-input) {
			border: none !important;
		}
		#quick_add_selectbox::part(form-control), #timer_selectbox::part(form-control) {
			margin-left: -3em;
		}
		#quick_add_selectbox::part(menu), #timer_selectbox::part(menu) {
			max-height: 60vh;
		}
    }

    // ##############################################################################
    // JS ERROR BUTTON
    // blinking red IMG
    img#topmenu_info_error{
                            .dimension_width_height_s;
                            position: fixed;

                            /*.Button_size_square_16;*/

                            .border_normal;
                            .box_shadow_standard_light;
                            padding: 5px;
                            top: 6px;
                            right: 112px;
                            z-index: 200;
                            &:hover {.box_shadow_standard_light_hover;}
                            &:active {.Complete_Button_active;}
                            &:focus {.box_shadow_standard_light_inset;}

                            background-color: @color_warning;


                            //blinking
                            -moz-transition:all 1s ease-in-out;
                            -webkit-transition:all 1s ease-in-out;
                            -o-transition:all 1s ease-in-out;
                            -ms-transition:all 1s ease-in-out;
                            transition:all 1s ease-in-out;
                            /* order: name, direction, duration, iteration-count, timing-function */
                            -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
                            -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
                            -ms-animation:blink normal 2s infinite ease-in-out; /* IE */
                            animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */

                           }



                            @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
                            @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
                            @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
                            @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */

}


// Update images
div#topmenu_info_update{
    display: inline-block;
    img{
		.rounded(10px);
		padding: 5px;
	}
}