Addressbook edit Dialog - fix css + less + images

This commit is contained in:
Stefan Reinhardt 2014-03-11 16:38:24 +00:00
parent 25f45d4d25
commit 1aaf19f997
6 changed files with 479 additions and 286 deletions

View File

@ -90,6 +90,28 @@
color: #1e1e1e;
}
/**
* img Icons
*/
a.et2_url {
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
cursor: pointer;
margin: -4px;
padding: 2px;
padding-left: 16px;
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
}
a.et2_url.phone {
background-image: url(../images/phone.png);
}
a.et2_url.url {
background-image: url(../images/url.png);
}
/**
* Button widget - text only, and icon
*/
.et2_button {
@ -320,61 +342,61 @@
/**
* Tabs widget
*/
.et2_tabflag {
/*.et2_tabflag {
margin: 1em 3px -1px 0;
padding: 4px;
background-color: #bfbfbf;
-webkit-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.5);
.background_color_25_gray;
.inner_shadow(1px, 0px, 0px, 0.5);
-webkit-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
}
.et2_tabflag:hover {
color: #f2f2f2;
background-color: #bfbfbf;
}
.et2_tabflag:active {
background-color: #ffffff;
color: #ffffff;
}
.et2_tabflag.active {
&:hover {
.color_5_gray;
.background_color_25_gray;
}
&:active{
.background_color_0_gray;
.color_0_gray;
}
}
.et2_tabflag.active {
border-spacing: 0px;
background-color: white;
color: #000000;
.color_100_gray;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #505050;
}
.et2_tabflag.active:hover {
color: #000000;
background-color: white;
}
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-color: #505050;
/*padding: 5px;*/
/*overflow-y: auto;*/
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.et2_tabheader {
border-color: @gray_70;
&:hover {
.color_100_gray;
// border: 1px solid gray;
background-color: white;
}
}
.et2_tabs {
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: @gray_70;
padding: 5px;
overflow-y: auto;
background-color: @gray_0;
.border_radius_button_normal;
}*/
/*.et2_tabheader {
padding-left: 0em;
border-bottom: 1px solid #bfbfbf;
margin: 0 2px;
background-image: none;
}
.et2_tabheader :first-child {
margin-left: 1px;
}
background-image: none;
:first-child {
margin-left: 1px;
}
}*/
/**
* Validation
*/
@ -443,7 +465,7 @@
/* ##################################################################################
* Nextmatch widget
*
* SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT
* SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT
*
* ##################################################################################*/
.et2_nextmatch {
@ -2337,10 +2359,10 @@ input,
button {
color: #000000;
/*font-size:99%;*/
padding: 1px;
padding: 2px 0px;
border-width: 1px;
border-style: solid;
border-color: #cdcdcd;
border-color: #e6e6e6;
}
select {
/*font-size:100%;*/
@ -2752,7 +2774,7 @@ input[type=button]:active {
}
/* ########################################################################################
* Content Element
* Button mit Bildern
* Button mit Bildern
*
######################################################################################## */
button.et2_button_with_image {
@ -3011,7 +3033,7 @@ button#filemanager-select_button[ok]:active {
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
}
/* ########################################################################################
*
*
* Button cancel / => color-cancel-action // yellow
*
######################################################################################## */
@ -3124,8 +3146,8 @@ button#cancel:active {
box-shadow: inset 1px 2px 1px rgba(0, 0, 0, 0.5);
}
/* ########################################################################################
*
* Button hinzufügen
*
* Button hinzufügen
*
######################################################################################## */
button.add {
@ -5173,6 +5195,8 @@ button.image_button {
/*@import (reference) "def_content_elements.less";*/
body {
background-color: #ffffff;
background-image: url(../images/bgDialog.png);
background-repeat: repeat-x;
}
div#popupMainDiv {
padding: 8px;
@ -5230,7 +5254,16 @@ table.dialog-main-view {
}
/*###########################################
# #
# dialogHeader #
# dialogHeader app-img #
#############################################
# #
# dialogHeader2 #
#############################################
# #
# dialogHeader3 #
#############################################
# #
# dialogHeader4 #
#############################################
# #
# #
@ -5244,31 +5277,29 @@ table.dialog-main-view {
# dialogOperators #
#############################################
# #
# buttons #
# #
# #
# button | button | button delete #
##############################################*/
tr.dialogHeader td,
tr.dialogHeader2 td,
tr.dialogHeader3 td,
tr.dialogHeader4 td,
tr.dialogOperators td {
padding: 5px 6px 5px 0;
vertical-align: middle;
}
/********** Header Part ********************/
.dialogHeader {
/*background-color: @egw_color_2_d;*/
/*.background-color-5-gray;*/
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 240, 240, 0)), color-stop(100%, rgba(191, 191, 191, 0.65)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf', GradientType=0);
/* IE6-9 */
/*.gradient_thead;*/
color: #000000;
height: 40px;
/*img {.dimension_height_s;}*/
}
.dialogHeader img[src*="navbar"] {
padding: 0 0 0 15px;
}
.dialogHeader input[type="radio"],
.dialogHeader input.et2_radiobox {
-webkit-appearance: none;
border: none;
}
.dialogHeader table.et2_grid {
border-top: none;
@ -5292,10 +5323,11 @@ table.dialog-main-view {
.dialogHeader .et2_label {
color: #000000;
vertical-align: middle;
padding: 0px 0px 0px 9px !important;
padding: 0px 0px 0px 0px !important;
/*margin-right: 57px;*/
margin: 0px important;
font-size: 1em;
text-align: right;
}
.dialogHeader td.space span img {
background: #ffffff;
@ -5312,12 +5344,11 @@ table.dialog-main-view {
filter: gray;
/* IE 6-9 */
}
/********** Header Row2 - 4 ********************/
tr.dialogHeader2,
tr.dialogHeader3,
tr.dialogHeader4 {
background-color: #ffffff !important;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
background-color: #f2f2f2 !important;
vertical-align: middle;
}
tr.dialogHeader2 .et2_label,
@ -5325,54 +5356,114 @@ tr.dialogHeader3 .et2_label,
tr.dialogHeader4 .et2_label {
color: #1a1a1a;
vertical-align: middle;
padding: 0px 0px 0px 9px !important;
padding: 0px 0px 0px 0px !important;
/*margin-right: 55px;*/
margin: 0px;
font-size: 1em;
width: 50px !important;
}
/************* Tabs *********************************/
.dialogTabs {
/*.background-color-5-gray;*/
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240, 240, 240, 0)), color-stop(100%, rgba(191, 191, 191, 0.65)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(240, 240, 240, 0) 0%, rgba(191, 191, 191, 0.65) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f0f0f0', endColorstr='#a6bfbfbf', GradientType=0);
/* IE6-9 */
/**
* Tabs widget
*/
.et2_tabheader {
padding-left: 0em;
border-bottom: 1px solid #bfbfbf;
margin: 0;
background-image: none;
background-color: #ffffff;
}
.et2_tabheader :first-child {
margin-left: 0px;
}
.et2_tabflag {
margin: 1em 3px -1px 0;
padding: 4px;
background-color: #b4b4b4;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-topleft: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 3px;
/*.background-clip(padding-box);*/
}
.et2_tabflag:hover {
color: #808080;
background-color: #bfbfbf;
}
.et2_tabflag:active {
background-color: #ffffff;
color: #ffffff;
}
.et2_tabflag.active {
border-spacing: 0px;
background-color: white;
color: #000000;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: #505050;
}
.et2_tabflag.active:hover {
color: #000000;
background-color: white;
}
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-color: #b4b4b4;
/*padding: 5px;*/
/*overflow-y: auto;*/
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 11px;
}
/************* Main **********************************/
.dialogMainTimeframe div {
min-height: 100px;
}
/********** Operators *******************************/
/*#############################################
# dialogOperators #
#############################################*/
.dialogOperators {
background-color: rgba(230, 230, 230, 0.02);
background-color: #e6e6e6;
border-top: 0px solid #e6e6e6;
border-bottom: 0px solid #e6e6e6;
}
.dialogOperators td {
padding: 2px;
padding: 2px 2px;
}
.dialogOperators .et2_label {
margin-left: 6px;
display: block;
}
/********** Footer *******************************/
/*Buttons / Toolbar*/
/*#############################################*/
/*# Toolbar #*/
/*# button | button | button delete #*/
/*##############################################*/
.dialogFooterToolbar {
background-color: #679fd2;
margin: 10px 0 0 0;
padding: 3px;
/*.et2_selectbox {height: 32px; top: 0px; font-size: 1em;}*/
/*label.et2_label {}*/
}
.dialogFooterToolbar td {
padding: 0px 5px;
padding: 0px 5px 0px 0px;
}
.dialogFooterToolbar button {
height: 24px;
@ -5390,16 +5481,6 @@ tr.dialogHeader4 .et2_label {
.dialogFooterToolbar div.et2_hbox {
white-space: normal;
}
.dialogFooterToolbar label.et2_label {
/* .Complete_Button_input;
.border_normal;
.box_shadow_standard_light;
.color-100-gray;
.background-color-10-gray;*/
padding: 6px 5px 6px 0;
position: relative;
top: 11px;
}
.dialogFooterToolbar input.et2_checkbox {
top: 0px;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -71,6 +71,7 @@
@gray_30 : #B4B4B4;
@gray_20 : #CDCDCD;
@gray_10 : #E6E6E6;
@gray_5 : #F2F2F2;
@gray_0 : #FFFFFF;
@ -118,12 +119,12 @@
// Test Colour for debug
@yellow : #FFD40F;
// Link Colours
// Link Colours
@link_color : @egw_color_2_b;
@link_color_active: fade(@egw_color_2_b, 60%);
// soll EGROUPWARE FARBE GEBEN
/*@active_button_border_bottom : @egw_color_2_d;*/
/*@active_button_border_bottom : @egw_color_2_d;*/
// Hint / or have to do / must field
@color_hint : @egw_color_2_a;
@ -136,10 +137,10 @@
/*Listenausgabe*/
/*Listenausgabe*/
@color_even : @gray_0;
@color_odd : darken(@gray_0, 5%);
@color_odd : darken(@gray_0, 5%);
// aktiverte Zeilen in allen APP mit Listenausgabe
@ -355,9 +356,9 @@
.img_filter_gray{
/*filter grey*/
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
@ -366,7 +367,7 @@
filter: grayscale(100%);
/*filter: url(grayscale.svg); Firefox 4+ */
filter: gray; /* IE 6-9 */
}
// #############################
// Transparenz
@ -432,7 +433,7 @@
@mass_l : 32px;
@mass_xl : 40px;
@mass_xxl: 48px;
/* ##############
# big Icon #
@ -449,7 +450,7 @@
.dimension_width_height_xs{width: @mass_xs; height: @mass_xs;}
.dimension_width_height_xxs{width: @mass_xxs; height: @mass_xxs;}
/* only Buttons ################## */
/* only Buttons ################## */
/* ##########################
# big Button #
@ -663,15 +664,15 @@
// Vertical gradient using CSS where possible, and base64-encoded SVG for IE9 (enables use of this in combination with border-radius)
// Based on this by Phil Brown: http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
// Also based on a mixin from Twitter Bootstrap: https://github.com/twitter/bootstrap
.gradient_vertical(@startColor, @endColor) {
// IE9 prep
@dataPrefix: ~"url(data:image/svg+xml;base64,";
@dataSuffix: ~")";
@dataContent: ~'<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g743" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%"><stop stop-color="@{startColor}" offset="0"/><stop stop-color="@{endColor}" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g743)"/></svg>';
@b64Out: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataPrefix}','@{dataContent}','@{dataSuffix}')`;
background-color: mix(@startColor, @endColor, 60%); // Base solid colour fallback
background-image: ~"@{b64Out}"; // IE9
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
@ -681,7 +682,7 @@ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safar
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
background-repeat: repeat-x;
}
@ -708,10 +709,10 @@ background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ffffff',endColorstr='#e4e4e4');
}
//

View File

@ -71,6 +71,31 @@ div.et2_hbox_right {
color: @gray_90;
}
/**
* img Icons
*/
a.et2_url {
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
cursor: pointer;
margin: -4px;
padding: 2px;
padding-left: 16px;
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
}
a.et2_url.phone {
background-image: url(../images/phone.png);
}
a.et2_url.url {
background-image: url(../images/url.png);
}
/**
* Button widget - text only, and icon
*/
@ -221,12 +246,12 @@ div.et2_link_entry{
// defined in layout-dialog.less
/**
* Tabs widget
*/
.et2_tabflag {
/*.et2_tabflag {
margin: 1em 3px -1px 0;
padding: 4px;
.background_color_25_gray;
@ -237,7 +262,7 @@ div.et2_link_entry{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
min-width: 73px;
&:hover {
.color_5_gray;
.background_color_25_gray;
@ -264,17 +289,17 @@ div.et2_link_entry{
}
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: @gray_70;
/*padding: 5px;*/
/*overflow-y: auto;*/
padding: 5px;
overflow-y: auto;
background-color: @gray_0;
.border_radius_button_normal;
}
}*/
.et2_tabheader {
// defined in layout-dialog.less
/*.et2_tabheader {
padding-left: 0em;
border-bottom: 1px solid #bfbfbf;
margin: 0 2px;
@ -282,7 +307,7 @@ div.et2_link_entry{
:first-child {
margin-left: 1px;
}
}
}*/
/**
* Validation
@ -313,7 +338,7 @@ hr {
/* border: 1px dashed silver;*/
.gray {
padding: 0px;
padding: 0px;
.dimension_height_m;
/*background-color: @color_hint;*/
.gradient_thead;
@ -328,7 +353,7 @@ hr {
/* ##################################################################################
* Nextmatch widget
*
* SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT
* SEARCH FIELD | SEARCH BUTTON ###### FILTER ##### EXPORT IMG ### FAVORITES ### COUNT
*
* ##################################################################################*/
@ -348,7 +373,7 @@ hr {
}
// ALL images
// ALL images
.et2_nextmatch > img {.dimension_width_height_s;}
@ -559,20 +584,20 @@ hr {
margin: 6px 11px 0;
padding: 0 20px;
text-align: center;
.fontsize_normal;
.border_normal;
.rounded (3px);
color: @gray_100;
// count number
span {
.fontsize_normal;
top: 4px;
position: relative;
}
}
}
@ -587,26 +612,26 @@ hr {
div#admin-categories-index{
padding: 0px;
// save space above nextmatch
// save space above nextmatch
// set height to zero
div.ui-helper-clearfix { height: 0px;}
// move add button
div.et2_hbox_right {
margin-right: 0;
padding: 0;
}
}
/*ADD Button*/
button#admin-categories-index_add {
.Complete_Button_add_only_plus;
.dimension_height_m;
margin: 6px 2px;
margin: 6px 2px;
&:hover {.Complete_Button_add_only_plus_hover;}
&:active {background-color: @color_positive_action_active !important;}
}
@ -670,7 +695,7 @@ button#admin-categories-index_add {
right: 1px;
top: 3px;
}
/*&:hover {.Complete_Button_save_apply_copy;}*/
&:active {background-color: @color_positive_action_active;}
@ -707,7 +732,7 @@ button#admin-categories-index_add {
margin-left: 0px;
min-height: 16px;
padding: 3px 0px;
// gelb
&:hover{
.color_100_gray;
@ -715,58 +740,58 @@ button#admin-categories-index_add {
padding: 3px 0;
}
a{
line-height: inherit;
padding: 2px 0px;
// Heart
div.ui-icon-heart {background-image: url(../images/personal.png); background-size: 12px 12px;background-position: 0 0;}
// Bulltpoints
div.sideboxstar {
width: 3px;
height: 11px;
margin-left: 3px;
background-image: url(../images/bullet.png);
width: 3px;
height: 11px;
margin-left: 3px;
background-image: url(../images/bullet.png);
background-size: 12px 12px;
background-position: 0 0;
background-position: 0 0;
background-repeat: no-repeat;
}
}
// Aktuelle Ansicht als Favorit
img {.dimension_width_height_xs; margin-left: 4px;}
img {.dimension_width_height_xs; margin-left: 4px;}
// Filter aufheben
[data-id="blank"]{
div.ui-icon-heart {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
}
} // Ende li
// Filter aufheben
li:first-child{
a div.ui-icon-heart {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
a div.ui-icon-heart {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
a div.sideboxstar {background-image: url(../images/trash.png); background-size: 12px 12px;background-position: 0 0;}
}
}
} // sidebox-favorites
// Favorites in nextmatch Header
// Favorites in nextmatch Header
.favorites{
img {.dimension_width_height_xs;}
}
}
// Arrow up and down for sorting

View File

@ -28,7 +28,7 @@
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, label,
form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
@ -66,7 +66,7 @@
*::-webkit-input-placeholder {
color:@gray_60;
}
}
*:-moz-placeholder {
/* FF 4-18 */
color: @gray_60;
@ -74,7 +74,7 @@
*::-moz-placeholder {
/* FF 19+ */
color: @gray_60;
}
}
*:-ms-input-placeholder {
/* IE 10+ */
color: @gray_60;
@ -103,12 +103,12 @@ html * {
// verhindert Scrollbars und gibt content volle höhe
html {
margin: 0px !important;
padding: 0px !important;
width: 99% !important;
height: 99% !important;
}
body{
@ -123,10 +123,10 @@ body{
height: 99% !important;
font-size: 11px;
line-height: 1.28;
}
body,
body,
textarea {
.basefontfamily;
}
@ -289,9 +289,9 @@ div.selectbox-wrapper {
}
@ -438,10 +438,10 @@ select,input,button
{
.color_100_gray;
/*font-size:99%;*/
padding: 1px;
padding: 2px 0px;
border-width: 1px;
border-style: solid;
border-color: @gray_20;
border-color: @gray_10;
}
select
@ -520,7 +520,7 @@ a.textSidebox,
hr.clearer {
clear: both;
height: 20px;
width: 100%;
@ -594,7 +594,7 @@ form
img
{
border:0;
}
/*SVG Filter / not for Logo */
@ -602,7 +602,7 @@ img
.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"]{
@ -866,8 +866,8 @@ a.textSidebox
border-top:solid 1px #9c9c9c;
border-left:solid 1px #9c9c9c;
border-right:solid 1px #9c9c9c;
table img {.dimension_height_s;}
}
@ -889,22 +889,22 @@ a.textSidebox
.pageGenTime,#divPoweredBy
{
font-size: 80%;
color: #ff0000;
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:
@ -919,13 +919,13 @@ button{
// siehe etemplate2.less
}
button.et2_button_text,
button.et2_button_text,
input[type=button] {
background-image[src$="svg"]{.gradient_vertical (@gray_30, @gray_30);}
&:hover{
/*background-color: @gray_30;*/
&:hover{
/*background-color: @gray_30;*/
text-shadow: 0px 0px;
color: @gray_0;
.box_shadow_standard_light_hover;
@ -934,29 +934,29 @@ input[type=button] {
}
&:active {.box_shadow_standard_light_active !important;}
}
/* ########################################################################################
* Content Element
* Button mit Bildern
* Button mit Bildern
*
######################################################################################## */
button.et2_button_with_image{
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"],
@ -970,21 +970,21 @@ button[id="timesheet-edit_button[delete]"],
button[id="displayToolbar-delete"],
button.et2_button_delete
{
.Complete_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;
}
@ -997,21 +997,21 @@ button#filemanager-select_button[ok]{
#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,
@ -1028,7 +1028,7 @@ button.et2_button_question{
/*div.et2_box_widget .et2_button_text:last_child,*/
button[id="cancel"],
button#cancel{
.Complete_Button_cancel;
}
@ -1037,16 +1037,16 @@ button#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 hinzufügen
*
######################################################################################## */
@ -1057,7 +1057,7 @@ 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;}
}
@ -1077,23 +1077,23 @@ button[id="add"]{
/*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-color: @egw_color_1_a !important;
background-image: none !important;}
}
}
@ -1140,12 +1140,12 @@ table.table_passord_change{
margin: 1em;
tr {height: 50px;}
td:first-child{ padding-right: 4em;}
}
/*z.b. Dateimanager overlay*/
/*z.b. Dateimanager overlay*/
.egwGridView_grid span.iconOverlayContainer {
margin: 2px 5px 2px 2px;
position: relative;
@ -1178,7 +1178,7 @@ table.table_passord_change{
padding: 0;
height: 9px;
width: 11px;
}
@ -1194,5 +1194,5 @@ table.table_passord_change{
background-size: 20px auto;
}
}
//

View File

@ -19,7 +19,11 @@
/*@import (reference) "def_content_elements.less";*/
@import (reference) "def_design_pattern_color_font_shadow.less";
body {background-color: @gray_0;}
body {
background-color: @gray_0;
background-image: url(../images/bgDialog.png);
background-repeat: repeat-x;
}
// Dialoge Allgemeine Definition
@ -126,7 +130,16 @@ table.dialog-main-view {width: 100%;}
/*###########################################
# #
# dialogHeader #
# dialogHeader app-img #
#############################################
# #
# dialogHeader2 #
#############################################
# #
# dialogHeader3 #
#############################################
# #
# dialogHeader4 #
#############################################
# #
# #
@ -140,68 +153,83 @@ table.dialog-main-view {width: 100%;}
# dialogOperators #
#############################################
# #
# buttons #
# #
# #
# button | button | button delete #
##############################################*/
tr.dialogHeader td,
tr.dialogHeader2 td,
tr.dialogHeader3 td,
tr.dialogHeader4 td,
tr.dialogOperators td {
padding: 5px 6px 5px 0;
vertical-align: middle;
}
/********** Header Part ********************/
.dialogHeader{
// background-color gradient
/*.gradient_thead;*/
/*background-color: @egw_color_2_d;*/
.gradient_thead;
.color_100_gray;
height: 40px;
// APP img
img[src*="navbar"] {
padding: 0 0 0 15px;
}
table.et2_grid {
border-top: none;
// radio button
input[type="radio"],
input.et2_radiobox{
-webkit-appearance: none;
border: none;
}
.th {
background-color: @egw_color_2_a !important;
table.et2_grid {
border-top: none;
}
.th {
background-color: @egw_color_2_a !important;
tr { height: 30px; }
}
td {padding: 0px 0px 0px 3px; .color_100_gray;}
tr { height: 30px; }
//Table in Table
table.et2_grid {
td {padding: 0px 0px 0px 3px; .color_100_gray;}
label.et2_label {
span.et2_selectbox {
li {float: left;}
}
}
//Table in Table
table.et2_grid {
label.et2_label {
span.et2_selectbox {
li {float: left;}
}
}
}
}
}
/*img {.dimension_height_s;}*/
input.et2_textbox {
font-size: 1.3em;
}
} // et2_grid End
.et2_label {
// Inputfield Header
input.et2_textbox { font-size: 1.3em; }
.et2_label {
.color_100_gray;
vertical-align: middle;
padding: 0px 0px 0px 9px !important;
padding: 0px 0px 0px 0px !important;
/*margin-right: 57px;*/
margin: 0px important;
font-size: 1em;
}
text-align: right;
}
td.space {
td.space {
span img {
background: @gray_0;
border: 2px solid @gray_0;
@ -222,19 +250,20 @@ table.dialog-main-view {width: 100%;}
}
/********** Header Row2 - 4 ********************/
tr.dialogHeader2,
tr.dialogHeader3,
tr.dialogHeader4{
background-color: @gray_0 !important;
border-top: 2px solid @gray_0;
border-bottom: 2px solid @gray_0;
background-color: @gray_5 !important;
vertical-align: middle;
.et2_label {
.color_90_gray;
vertical-align: middle;
padding: 0px 0px 0px 9px !important;
padding: 0px 0px 0px 0px !important;
/*margin-right: 55px;*/
margin: 0px;
font-size: 1em;
@ -246,14 +275,70 @@ tr.dialogHeader4{
}
/************* Tabs *********************************/
/**
* Tabs widget
*/
.dialogTabs {
.gradient_thead;
.color_100_gray;
.et2_tabheader {
padding-left: 0em;
border-bottom: 1px solid #bfbfbf;
margin: 0;
background-image: none;
background-color: @gray_0;
:first-child {
margin-left: 0px;
}
}
.et2_tabflag {
margin: 1em 3px -1px 0;
padding: 4px;
background-color: @gray_30;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 73px;
.border_radius(3px, 0px, 0px, 3px);
&:hover {
.color_50_gray;
.background_color_25_gray;
}
&:active{
.background_color_0_gray;
.color_0_gray;
}
}
.et2_tabflag.active {
border-spacing: 0px;
background-color: white;
.color_100_gray;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: @gray_70;
&:hover {
.color_100_gray;
// border: 1px solid gray;
background-color: white;
}
}
// field for content
.et2_tabs {
/*border-width: 0px 1px 1px 1px;*/
/*border-style: solid;*/
border-color: @gray_30;
/*padding: 5px;*/
/*overflow-y: auto;*/
background-color: @gray_0;
.rounded(3px);
margin-bottom: 11px;
}
/************* Main **********************************/
@ -264,25 +349,35 @@ tr.dialogHeader4{
}
/********** Operators *******************************/
/*#############################################
# dialogOperators #
#############################################*/
.dialogOperators {
background-color: fade(@gray_10, 2%);
background-color: @gray_10;
border-top: 0px solid @gray_10;
border-bottom: 0px solid @gray_10;
td {padding: 2px;}
td {padding: 2px 2px;}
.et2_label {margin-left: 6px; display: block;}
}
/********** Footer *******************************/
/*Buttons / Toolbar*/
/*#############################################*/
/*# Toolbar #*/
/*# button | button | button delete #*/
/*##############################################*/
.dialogFooterToolbar{
background-color: @color_button_panel_bg_color;
margin: 10px 0 0 0;
padding: 3px;
td {padding: 0px 5px;}
td {padding: 0px 5px 0px 0px;}
button {
.dimension_height_m; min-width: 114px;
@ -304,16 +399,7 @@ tr.dialogHeader4{
// e.g. keine Benachrichtigung senden
label.et2_label {
/* .Complete_Button_input;
.border_normal;
.box_shadow_standard_light;
.color-100-gray;
.background-color-10-gray;*/
padding: 6px 5px 6px 0;
position: relative;
top: 11px;
}
/*label.et2_label {}*/
input.et2_checkbox { top: 0px;}