egroupware/pixelegg/less/layout_content_elements.less

/**
 * EGroupware: CSS with less preprocessor
 *
 * Definitions for content-elements
 *
 * 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 phpgwapi
 * @version $Id$
 */
@import (reference) "def_design_pattern_color_font_shadow.less";
@import (reference) "def_buttons.less";



    /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    * fieldset legend
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    form, label, 
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    *::-webkit-input-placeholder {
        color:@gray_60;
    }    
    *:-moz-placeholder {
        /* FF 4-18 */
        color: @gray_60;
    }
    *::-moz-placeholder {
        /* FF 19+ */
        color: @gray_60;
    }    
    *:-ms-input-placeholder {
        /* IE 10+ */
        color: @gray_60;
    }


/* #######################################################################################
*
*
* Inhaltselemente
*
*
* ########################################################################################
*/

//Reset


html * {
    font-size: 100%;

}


//###############################################

// verhindert Scrollbars und gibt content volle höhe
html {
    
    margin: 0px !important;
    padding: 0px !important;
    width: 99% !important;
    height: 99% !important;
    
}

body{
    background-image:none;

    .background_color_10_gray;
    .color_100_gray; // Schriftfarbe schwarz

    margin: 0px !important;
    padding: 0px !important;
    width: 99% !important;
    height: 99% !important;
    font-size: 11px;
    line-height: 1.28;
    
}

body, 
textarea {
    .basefontfamily;

}

#egw_fw_basecontainer {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;

    .basefontfamily;

    .background_color_5_gray ;
}

//##########################

input {

/*    .Complete_Button_input;
    .basefontfamily;
    &:hover{.Complete_Button_input_hover;}
    &:focus{.Complete_Button_input_focus;}*/

}

select {

    /*.Complete_Button_select;*/
    padding:3px;
    margin: 0;
    .rounded (4px);

    &:hover{.Complete_Button_select_hover;}
    &:focus{.Complete_Button_select_focus;}
    &.after{}
}


:hover {.transition (0.2s, ease-out);}

// #############################
// Schriftformate

p { font-size: 1em;}

li {}


h1 {
    font-size: 300%;
    line-height: 330%;
    margin: 0.4em 0 0;
}
.headline_h1 {
    font-size: 300%;
    line-height: 330%;
    margin: 0.4em 0 0;
}


h2 {
    font-size: 250%;
    line-height: 270%;
    margin: 0.6em 0 0;
}
.headline_h2 {
    font-size: 250%;
    line-height: 270%;
    margin: 0.6em 0 0;
    font-weight: lighter;
}

h3 {
    font-size: 200%;
    line-height: 220%;
    margin: 0.8571em 0 0;
}

.headline_h3 {
    font-size: 200%;
    line-height: 220%;
    margin: 0.8571em 0 0;
}

h3 a {
    color: #999999;
}

h4 {
    font-size: 150%;
    line-height: 160%;
    margin: 1.125em 0 0;
}
.headline_h4 {
    font-size: 150%;
    line-height: 160%;
    margin: 1.125em 0 0;
}

h5 {
    font-size: 100%;
    line-height: 110%;
    margin: 1.2857em 0 0;
}

.headline_h5 {
    font-size: 100%;
    line-height: 110%;
    margin: 1.2857em 0 0;
}


h6 {
    font-size: 100%;
    font-weight: bold;
    line-height: 100%;
    margin: 1.5em 0 0;
}
.headline_h6 {
    font-size: 100%;
    font-weight: bold;
    line-height: 100%;
    margin: 1.5em 0 0;
}
/*table {font-size: 16px;}*/




select {
    position:relative;

}

div.selectbox-wrapper {

    ul {
        list-style-type:none;
        margin:0px;
        padding:0px;

        li.selected {
            background-color: #EAF2FB;
        }
        li.current {
            background-color: #CDD8E4;
        }

        li {
            list-style-type:none;
            display:block;
            margin:0;
            padding:2px;
            cursor:pointer;
        }
    }




}


.sbHolder{
    .Complete_Button_select;
    //	background-color: #2d2d2d;
    //	border: solid 1px #515151;
    //	font-family: Arial, sans-serif;
    .basefontfamily;
    font-size: 1.2em;
    font-weight: normal;
    height: 30px;
    position: relative;
    width: 10em;

    &:hover{.Complete_Button_select_hover;}
    &:focus{.Complete_Button_select_focus;}

}
.sbHolder:focus .sbSelector{}

.sbSelector{
    display: block;
    height: 30px;
    left: 0;
    line-height: 30px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 10px;
    top: 0;
    width: 170px;
}
.sbSelector:link, .sbSelector:visited, .sbSelector:hover{
    //	color: #EBB52D;
    .color_50_gray;
    outline: none;
    text-decoration: none;
}
.sbToggle{
    background: url(../img/select-icons.png) 0 -116px no-repeat;
    display: block;
    height: 30px;
    outline: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}
.sbToggle:hover{
    background: url(../images/select-icons.png) 0 -167px no-repeat;
}
.sbToggleOpen{
    background: url(../images/select-icons.png) 0 -16px no-repeat;
}
.sbToggleOpen:hover{
    background: url(../images/select-icons.png) 0 -66px no-repeat;
}
.sbHolderDisabled{
    background-color: #3C3C3C;
    border: solid 1px #515151;
}
.sbHolderDisabled .sbHolder{

}
.sbHolderDisabled .sbToggle{

}

// Ausklappliste

.sbOptions{
    //	background-color: #212121;
    .background_color_0_gray;
    border: solid 1px #515151;
    list-style: none;
    left: -1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    width: 200px;
    z-index: 1;
    overflow-y: auto;

    li{
        padding: 0 7px;
    }

    a{
        border-bottom: dotted 1px #515151;
        display: block;
        outline: none;
        padding: 7px 0 7px 3px;
        color:@link_color;
    }

    a:link,
    a:visited{
        color:@link_color;
        text-decoration: none;
    }
    a:hover,
    a:focus,
    a.sbFocus{
        color: @link_color_active;
    }
    li.last a{
        border-bottom: none;
    }


    .sbDisabled{
        border-bottom: dotted 1px #515151;
        color: #999;
        display: block;
        padding: 7px 0 7px 3px;
    }
    .sbGroup{
        border-bottom: dotted 1px #515151;
        color: #EBB52D;
        display: block;
        font-weight: bold;
        padding: 7px 0 7px 3px;
    }
    .sbSub{
        padding-left: 17px;
    }
}

// Tabellen

.th {
    background-color: #e0e0e0;
}

// Links

a:link, a:visited, select, input, textarea {
    color : @link_color;
}

select,input,button
{
    .color_100_gray;
    /*font-size:99%;*/
    padding: 1px;
    border-width: 1px;
    border-style: solid;
    border-color: @gray_20;
}

select
{
    /*font-size:100%;*/
}

a:link,a:visited
{
    cursor:pointer;
    color: @link_color;
    text-decoration: none;
}

a:hover,a:active
{
    cursor:pointer;
    color:@link_color_active;
    text-decoration: underline;
}



.divLoginboxHeader,
.divSideboxHeader,
a.appTitles,
.appTitles,
a.textSidebox,
.textSidebox,#fmStatusBar
{
    font-size:90%;
}

.prefSection
{
    font-weight:bold;
    font-size:145%;
    line-height:40px;
}

#divAppboxHeader
{
    line-height:28px;
    font-size:125%;
    font-weight:bold;
    color:#666666;
}

#divGenTime,#divPoweredBy
{
    font-size: 80%;
    color: #ff0000;
}

#divPoweredBy
{
    color: #000000;
}

#sideboxdragarea {
    z-index:100;
    position:absolute;
    left:0px;
    top:105px;
}

#menu2handle {
    padding-top: 10px;
}

#menu1close {
    position: absolute;
    right: 7px;
    top: 7px;
}


hr.clearer {
    
    clear: both;
    height: 20px;
    width: 100%;
    background-color: @egw_color_1_a;
    .rounded (3px);
    border: 1px solid @gray_100;
}

//##############################################################################################################

// Lettersearch

.lettersearch {
    .Complete_Button_lettersearch;
}

.lettersearch:hover {
    .background_color_30_gray;
    .color_0_gray;
}


.lettersearch_active{
    .Complete_Button_lettersearch;
    .background_color_30_gray;
    //		background-color: #808080 !important;
    font-weight: bold;
}

td.lettersearch {
    //	border-color: #E0E0E0;
    background-image: none;
}


/*.nextmatch_header table {
        border: none !important;
        width: 99% !important;
}*/






.egw_fw_ui_ajaxloader {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image:url(../images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    float: right;
}




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

/* traditional */



form
{
    margin:0px;
    padding:0px;
}

img
{
    border:0;
    
}

/*SVG Filter / not for Logo */
#egw_fw_sidebar img[src$="svg"]{
            .gradient_vertical (@gray_60, @gray_60);
            .rounded(3px);
            border: 1px solid @gray_0;;
}     

#egw_fw_main img[src$="svg"],
#egw_fw_footer img[src$="svg"]{
            /*.gradient_vertical (@egw_color_2_a, @egw_color_2_a);*/
            .gradient_vertical (fade(@gray_100,50%), fade(@gray_100,50%));

}




div{
	color: #000000;
}
input[type=submit],input[type=button],input[type=reset],button,.egwbutton
{
    .background_color_10_gray;
    background-image: none;
    border:  outset 1px #b9d5e3;
    margin:  1px;
    padding: 1px;
    cursor:  pointer;
    color:  #004e7d;
}

input[type=submit]:hover,input[type=button]:hover,input[type=reset]:hover,button:hover,.egwbutton:hover
{
    .background_color_15_gray;
    background-image: none;
    border:  outset 1px #b9d5e3;
    color:  #004e7d;
}

input[type=submit]:active,input[type=button]:active,input[type=reset]:active,button:active,.egwbutton:active
{
    border:  inset 1px #bbbbbb;
}

input[type=submit]:disabled,input[type=button]:disabled,input[type=reset]:disabled,button:disabled,.egwbutton:disabled
{
    background-color: transparent;
    color: gray;
}

input.egwbutton
{
    background-color:#b9d5e3;
    border:  outset 1px #b9d5e3;
    margin:  1px;
    padding: 1px;
    cursor:  pointer;
    color:  #004e7d;
}

input.egwbutton:hover
{
    background-color:#94bfd4;
    border:  outset 1px #b9d5e3;
    color:  #004e7d;
}
input.egwbutton:active
{
    border:  inset 1px #bbbbbb;
}

input[type=image]
{
    cursor: pointer;
    border: 0;
    .dimension_width_height_s;
}

#thesideboxcolumn
{
    width: 177px;
    position:relative;
}

#sideresize
{
    background-image:url(../images/resize.png);
    width:13px;
    height:13px;
    right:1px;
    top:1px;
    position:absolute;
    z-index:9999;
}





.divSidebox
{
    position:relative;
    border: #9c9c9c 1px solid;
    overflow:auto;
}

.divSideboxHeader
{
    text-align:center;
    .background_color_15_gray;
    padding-top:2px;
    .color_50_gray;
}


a.divSideboxEntry, .divSideboxEntry
{
    text-align:left;
    background-color:#FDFDFD;
}

a.appTitles,.appTitles
{
    height:18px;
    padding-top:2px;
    padding-bottom:2px;
}

a.textSidebox
{
    padding: 0;
    border-top: 0;
}

.textSidebox
{
    padding-top:3px;
    padding-bottom:3px;
    padding-left: 1px;
    border-top: solid #aaaaaa 1px;
    overflow: auto;
}

.sideboxSpace
{
    height:9px;
}

.greyLine
{
    margin:1px;
    border-top:solid 1px #7e7e7e;
    height:1px;
}

#extraIcons
{
    background-color:#eeeeee;
    border:solid 1px #7e7e7e;
}

.extraIconsRow
{
    border:solid 1px #dddddd;
    padding:2px;
}

#topmenu
{
    background-color: #0081c1;
    background-image: url(../images/bgtopmenu2.png);
    color:#006699;
    /*border-top: solid 1px #7e7e7e;*/
    border-bottom: solid #5793ff 1px;
    height:20px;
    padding-top:4px ;
    line-height:16px;
}
#topmenu a
{
    color:#006699;
}

#topmenu_items
{
    float:left;
}
#topmenu_info
{
    float:right;
}

#divUpperTabs
{
    text-align:right;
    height: 15px;
    margin-right: 10px;
}

#divUpperTabs ul
{
    display:inline;
    margin:0;
    padding:10px 10px 0 1px;
    list-style:none;
}

#divUpperTabs li
{
    float:right;
    margin:0 5px 0 0;
    padding:0 5px 0 5px;
    border:solid 1px #9c9c9c;
    border-bottom: 0px;
}

//#divAppIconBar
//{
//	background-color:silver;
//	border:solid 1px #9c9c9c;
//	background-image: url(../images/background-icon-bar.png);
//	background-repeat: repeat-x;
//	overflow:visible;
//	height: 45px; /* prevents text line to show in IE7+8(Compatibilitymode) */
//}

/* Star-Plus-HTML Hack fix for the above */
*:first-child+html #divAppIconBar
{
    height: 60px;
}

#divAppTextBar
{
    background-color:white;
}

#divStatusBar
{
    background-color:white;
    height:18px;
    padding-left:3px;
}

#tdSidebox
{
    width:170px;
    background-color:white;
    overflow:visible;
}

#tdAppbox
{
    background-color:white;
    padding-left:5px;
    width: 100%;
}

#divAppboxHeader
{
    background-image:url(../images/appbox-header-background.png);
    background-repeat: repeat-x;
    height: 25px;
    border-bottom:solid 1px #c0c0c0;
    text-align:center;
    padding-bottom:0px;
    border-top:solid 1px #9c9c9c;
    border-left:solid 1px #9c9c9c;
    border-right:solid 1px #9c9c9c;
    
    
   table img {.dimension_height_s;}
}

#divAppbox
{
    background-color:#ffffff;
    padding:5px;
    border-bottom:solid 1px #9c9c9c;
    border-left:solid 1px #9c9c9c;
    border-right:solid 1px #9c9c9c;
}

#divGenTime,#divPoweredBy
{
    bottom:4px;
    text-align:center;
    width:99%;
}

.pageGenTime,#divPoweredBy
 	  	 {
 	         font-size: 80%; 	         
 	         color: #ff0000; 	        
 	  	 text-align: center;
 	  	 }
 	  	 
 	  	 .pageGenTime {
 	  	         margin-top: 1em;
 	  	 }
 	  	 
 	  	 .pageGenTime > span:after {
 	  	         content: ", ";
 	  	 }
 	  	 
 	  	 .pageGenTime > span:last-child:after {
 	  	         content: "";
 	 } 


// Button global for all and everything:

/*##########################################
#      Content Element                     #
#      Button                              #
###########################################*/


button{
 // siehe etemplate2.less
}

button.et2_button_text, 
input[type=button] {
    
        background-image[src$="svg"]{.gradient_vertical (@gray_30, @gray_30);}
    
        &:hover{ 
            /*background-color: @gray_30;*/ 
            text-shadow: 0px 0px;
            color: @gray_0;
            .box_shadow_standard_light_hover;
            background-color: @color_positive_action_active;
            background-size: 20px 20px;
           }

        &:active {.box_shadow_standard_light_active !important;}
    
}

/* ########################################################################################
 * Content Element
 * Button mit Bildern 
 *
 ######################################################################################## */
button.et2_button_with_image{ 
        .Complete_Button_text_icon_before;
        background-repeat: no-repeat !important;
        background-position: 6px center;
        background-size: 20px 20px;
        background-color: @gray_10;
        background-color[url$="svg"]{.gradient_vertical (@gray_30, @gray_30);}
    
}

/* ########################################################################################
 * Content Element
 * Button löschen / delete / => color-negative-action // red
 *
 ######################################################################################## */ 

input[type="submit"][id*="delete"],
input[type="button"][id*="delete"],
input[id*="delete"],
button[id="delete"],
button[id="infolog-edit_button[delete]"],
button[id="addressbook-edit_button[delete]"],
button[id="resources-edit_delete"],
button[id="calendar-edit_button[delete]"],
button[id="timesheet-edit_button[delete]"],
button[id="displayToolbar-delete"],
button.et2_button_delete
{
 .Complete_Button_delete;           
}

/* ########################################################################################
 * Content Element
 * Button edit + save + apply + copy => color-positive-action // green
 *
 ######################################################################################## */            
 
button[id*="save"],
button[id*="apply"],
button[id*="copy"],
button[id*="edit_button[edit]"],
button.et2_button{
    
        .Complete_Button_save_apply_copy;
}


button#filemanager-select_button[ok]{
    &:active {background-color: @color_positive_action_active;}
}

// Password change
#passwordchange {
     background-image:url('../images/cancel.png') !important;
    .Complete_Button_text_icon_before;
    
    &:hover {background-color: @color_positive_action_active !important; .box_shadow_standard_light_hover;}
    &:active {background-color: @color_positive_action_active !important; .box_shadow_standard_light_inset;}

    
}



/* ########################################################################################
 * 
 * Button cancel /  => color-cancel-action // yellow
 *
 ######################################################################################## */
 
button[id*="cancel"],
button[id*="importexport-wizardbox_button[previous]"],
button#cancel,
#cancel,
button.et2_button_cancel,
button.et2_button_question{

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


/* et2_box_widget ###*/
/*div.et2_box_widget .et2_button_text:last_child,*/
button[id="cancel"],
button#cancel{
    
               .Complete_Button_cancel;
}


// Password cancel
#passwordcancel {
     background-image:url('../images/cancel.png') !important;
    .Complete_Button_text_icon_before;
    
    &:hover {background-color: @color_cancel_action_hover !important; .box_shadow_standard_light_hover;}
    &:active {background-color: @color_cancel_action_active !important; .box_shadow_standard_light_inset;}

    
}

/* ########################################################################################
 * 
 * Button hinzufügen 
 *
 ######################################################################################## */

button.add {
    .Complete_Button_add ;
}

button[id="add"]{
                background-image:url('../images/add.png') !important;
                .Complete_Button_text_icon_before;
                
                &:active {background-color: @color_positive_action_active !important;}
}




/*Button Ende #######################################################*/










/*dhtml Submenu ##########################################################*/
div.dhtmlxMenu_egw_SubLevelArea_Polygon{
    
    table.dhtmlxMebu_SubLevelArea_Tbl{
        
        tr.sub_item  {
                
        
                td.sub_item_icon{
                                img[src*="svg"]{background-color: @gray_100; .gradient_vertical (@gray_90, @gray_90);}
                                .img_filter_gray;
                                }
        }
        
        tr.sub_item_selected  {
            background-color: @egw_color_1_a !important; 
            background-image: none !important;}
    }
    
}




/**
* Clientside Javascript error-log
*/
#topmenu_info_error {
    width: 16px;
    cursor: pointer;
}
div.client_error_log {
    max-height: 50ex;
}
div.client_error_log tbody {
    vertical-align: top;
}
div.client_error_log tr.hidden td > div {
    max-height: 2ex;
    max-width: 40ex;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}
div.client_error_log tr td.timestamp > div {
    text-wrap: none;
    white-space: normal;
    width: 27ex;
}
div.client_error_log tr.hidden td.stack > div {
    text-indent: 100%
}
div.client_error_log tr td.stack > div {
    white-space: pre;
}


/**
* table_passord_change
*/

table.table_passord_change{
    margin: 1em;
    tr {height: 50px;}
    td:first-child{ padding-right: 4em;}
    
}


 /*z.b. Dateimanager overlay*/ 
 
.egwGridView_grid span.iconOverlayContainer {
	margin: 2px 5px 2px 2px;
	position: relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	overflow: visible;
	display: inline-block;
}

.egwGridView_grid span.overlayContainer {
	position: absolute;
	right: -2px;
	bottom: -2px;
	vertical-align: bottom;
	text-align: right;
}

.egwGridView_grid span.iconContainer {
	display: inline-block;
	padding: 0;
	margin: 0;
	text-align: center;
}

.egwGridView_grid span.overlayContainer img.overlay {
	position: relative;
	top: 1px;
	margin: 0;
	padding: 0;
        height: 9px;
        width: 11px;
        
}




/////* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
            select {
                padding-right: 20px !important;
                -webkit-appearance:none;
                margin:0;
                background:  #ffffff url(../images/selectarrowdown.png) no-repeat center right;
                background-size: 20px auto;
            }
}
 
//