egroupware_official/pixelegg/less/etemplate2.less
2014-02-12 08:10:04 +00:00

1040 lines
39 KiB
Plaintext
Executable File
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Styles for etemplate2 widgets
* Überschreibt egroupware/etemplate/templates/default/etemplate2.css
*
* @version: 1
* Stefan Reinhardt
*/
@import (reference) "./def_design_pattern_color_font_shadow.less";
@import (reference) "./def_buttons.less";
/*@import (less) "../../etemplate/templates/default/etemplate2.css";*/
@media all {
/**
* Top level
*/
.et2_container {
padding: 0px;
background-color: transparent;
}
.et2_container > div:not([class]) {
height: 100%;
}
/**
* Basic rules
*/
input,button,select {
margin: 1px;
padding: 0px;
}
/**
* VBox widget
*/
div.et2_vbox>* {
display: block;
}
/**
* HBox widget
*/
div.et2_hbox_right {
background: transparent;
}
/**
* Placeholder widget - used for un-implemented widgets
*/
.et2_placeholder {
display: inline-block;
/*border: 1px solid cornflowerblue;*/
.border_normal;
background-color: @gray_10;
}
.et2_placeholder .et2_attr {
color: @gray_100;
}
/**
* Label widget, and labels for other widgets
*/
.et2_label {
color: @gray_90;
}
/**
* Button widget - text only, and icon
*/
.et2_button {
text-shadow: 0px 0px !important;
.Complete_Button_normal;
}
.et2_button_icon {
.dimension_height_s;
}
/* give the image a button lock and feel*/
img.et2_button_icon[src*="svg"]{
.gradient_vertical (@gray_30, @gray_30);
&:hover {.gradient_vertical (@color_positive_action_active, @color_positive_action_active); .box_shadow_standard_light_hover;}
&:active {.box_shadow_standard_light_inset;}
}
/*look in layout_content_elements*/
button.et2_button_text,
input[type=button] {}
.et2_selectbox .ui-multiselect-checkboxes li {
&:hover {background-color: @color_hint !important;}
}
.et2_selectbox .ui-multiselect-checkboxes label {
display: block;
border: 0px solid transparent;
padding: 0.1em 0.2em;
// &:hover {background-color: @egw_color_2_e;}
}
.et2_selectbox .ui-multiselect-checkboxes div.ui-icon-close{
/*visibility: hidden;*/
background-image: url(../images/close.png);
background: @gray_0;
margin: 2px;
padding: 0px;
}
/**
* Date / Time widgets
*/
span.et2_date input.et2_date {
min-width: 21.5ex;
}
span.et2_date span {
color: @gray_0;
}
.et2_file .progress li:hover div.remove {
.dimension_width_height_s;
}
.et2_file .progress p {
background-color: @color_progress;
}
/*Link to / Selector Widget*/
.et2_link_to {
.et2_button_icon {
.Complete_Button_Icon_normal;
float: left;
margin: 10px 20px;
padding: 3px;
.dimension_width_height_m;
background-color: @gray_30;
&:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
&:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
}
.et2_file{
background-color: @gray_0 !important;
.rounded (5px);
margin-top: 1em;
padding-top: 0.2em;
input{
border: none;
padding: 1em;
}
/* &:before {
content: "+ ";
font-size: 2em;
color: @egw_color_1_a;
line-height: 0.6em;
padding-left: 0.1em;
padding-right: 0em;
background-color: @egw_color_2_a;
.border_radius_button_lefttop;
}*/
&:hover {background-color: @color_positive_action_active !important;}
&:active {background-color: @color_positive_action_active !important;}
}
button {}
}
.et2_link {
color: @egw_color_2_a;
}
.et2_link_list tr {
cursor: pointer;
&:hover {background-color: @color_hover_row;}
&:active {background-color: @color_active_row;}
}
.et2_link_list .icon img, .et2_link_list .icon {
width: 14px !important;
height: 14px !important;
}
.egw_tooltip
{
background-color: @color_tooltip;
}
/**
* Link_entry_widget
*/
div.et2_link_to{
button {
.Complete_Button_normal;
&:hover {.Complete_Button_Icon_hover; background-color: @color_positive_action_active !important;}
&:active {.Complete_Button_Icon_active; background-color: @color_positive_action_active !important;}
}
input{width: 72% !important;}
}
div.et2_link_entry{
//left
select {width: 30% !important;;}
//center
input.ui-autocomplete-input {
width: 51% !important;;
padding-bottom: 1px;
}
//right - button
//line 201
}
/**
* Tabs widget
*/
.et2_tabflag {
/*display: inline-block;*/
margin: 1em 3px -1px 0;
padding: 4px;
/*cursor: pointer;*/
/*font-size: 0.8em;*/
/*.border_radius(3px,0,0,3px);*/
.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);
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.5);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
min-width: 76px;
&: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_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;
}
}
.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;
:first-child {
margin-left: 0.3em;
}
}
/**
* Validation
*/
.et2_required, [required] {
background-color: lighten(@egw_color_1_e, 10%);
.border_radius (3px, 3px ,3px ,3px );
}
/**
* hrule widget
*/
hr {
/*border-style: none;*/
border-top: 1px solid @gray_10;
/*height: 1px;*/
/*margin: 10px 0px 10px 0px;*/
}
/**
* grid widget
*/
.et2_grid th,
.et2_grid tr,
.et2_grid td{
/* border: 1px dashed silver;*/
.gray {
padding: 0px;
.dimension_height_m;
/*background-color: @color_hint;*/
.gradient_thead;
span.et2_label {background-color: transparent;padding-left: 3px;}
}
}
/**
* Nextmatch widget
*/
.et2_nextmatch {
.background_color_10_gray;
}
/* images*/
.et2_nextmatch > img {.dimension_width_height_s;}
// little rectangle
.nextmatch_header .header_count {
font-size: 11px;
position: relative;
top: 7px;
}
/*################################################################
*
* Filters
*
################################################################*/
.nextmatch_header > .filters {
width: 80%;
margin-bottom: 4px;
padding: 0;
background-color: @gray_30;
border: none !important;
border-color: @gray_100;
background-image: none !important;
height: 37px;
.border_radius (15px, 3px, 0px, 0px);
select {margin-top: 10px;}
.et2_label {
/* font-size: 0.9em;*/
padding: 0.2em;
select {
/*.Complete_Button_select;*/
margin-left: 2px;
margin-right: 1px;
margin-top: 8px;
max-width: 14% !important;
&:hover{
.Complete_Button_select_hover;
}
&:after {}
/*Dialog - Addressbook - View */
#infolog-index_cat_id,
#infolog-index_filter {width: 50% !important;}
}
}
}
// Select -> Option
.nextmatch_header > .filters > select > option {font-size: 0.9em;}
// Search Field
.nextmatch_header > .search{
padding: 0 0 0 3px;
margin-right: 3px;
.background_color_search;
.border_radius_button_righttop;
input {
/*.background_color_search;*/
/*background-color: @gray_0;*/
border: none;
font-size: 11px;
color: #000;
/*margin: 0 2px;*/
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: @gray_60;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: @gray_60;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: @gray_60;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: @gray_60;
}
button.et2_button {
.border_normal;
border-color: @gray_30;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
width: 45px;
/*height: 1.6em;*/
.border_radius_button_righttop;
/*.background_color_search;*/
color: lighten(@egw_color_1, 15%);
text-decoration: none;
cursor: pointer;
padding: 0px;
margin: 8px 10px;
margin-left: 0px;
background-image: url("../images/search.png");
background-position: center 0;
background-size: contain;
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
&:hover{
.box_shadow_standard_light_hover;
background-color: @egw_color_2_e !important;
/*hide arrow*/
color: @egw_color_2_e !important;
}
&:active {
/*.background_verlauf_diagonal_gray;*/
background-color: @color_positive_action_active !important;
}
&:focus {
.Complete_Button_input_focus;
/*background-color: @color_positive_action_active !important;*/
}
}
}
// Input Field
.nextmatch_header > .filters input {
margin-right: 2ex;
width: 15%;
.Complete_Button_input;
&:hover{ .Complete_Button_input_hover; }
&:focus{ .Complete_Button_input_focus; }
}
.nextmatch_header .et2_button_icon {
}
// Export Button
.nextmatch_header > .filters .et2_button_icon {
margin-top: 8px;
vertical-align: middle;
.Complete_Button_Icon_normal;
margin-right: 1em;
.dimension_width_height_s;
padding: 2px;
&:hover{.Complete_Button_Icon_hover ;}
&:active{.Complete_Button_Icon_active ;}
}
.et2_nextmatch .nextmatch_header {
border: none;
background-image: none;
// background-color: transparent;
margin-bottom: 3px;
// margin-right: 3px;
}
.et2_nextmatch .nextmatch_header > .filters {
border: 1px solid @gray_10;
background-color: @gray_20;
background-image: url(../images/header_overlay.png);
background-position: center;
background-repeat: repeat-x;
margin-bottom: 3px;
}
/*################################################################
*
* Kategorien
*
################################################################*/
/*ADD Button*/
#admin-categories-index_add {
.dimension_width_height_l;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
padding: 0.5em;
&:before {
content: "+";
font-size: 2em;
color: @egw_color_1;
line-height: 0.6em;
padding-left: 0.1em;
padding-right: 4em;
}
&:hover {.Complete_Button_add_hover};
}
#admin-categories-index_filter {top: 8px;}
/*################################################################
*
* Favorites
*
################################################################*/
.nextmatch_header div[id$=favorite_wrapper] {
/* margin-top: 6px;
vertical-align: middle;*/
.box_shadow_standard_light;
.border_radius_button_normal;
.background_color_25_gray;
}
/**
* Drop down button
*/
.et2_dropdown{
button {
height: 3.0ex;
display: inline-block;
vertical-align: middle;
margin-right: -2px;
padding: 0px 1ex;
.background_color_0_gray;
background-image: none;
// width: 50px;
}
button > div {
vertical-align: middle;
}
button:last-child {
padding: 0px
}
+ ul.ui-menu {
position: absolute;
z-index: 2;
}
/*left Button*/
button.ui-corner-left,
button.ui-state-default{
background-image: none !important;
background-repeat: no-repeat !important;
// background-size: 10px 10px;
img {
.dimension_width_height_s;
text-align: left;
position: relative;
right: 1px;
top: 3px;
}
}
/*right Button*/
button.ui-corner-right {
// background-image: url("../images/fav_filter_normal.png");
// background-repeat: no-repeat !important;
// background-size: 10px 10px;
}
/* hover */
button.ui-state-hover {
background-color: @gray_30 !important;
// background-image: url("../images/fav_filter_normal.png") !important;
// background-repeat: no-repeat !important;
background-size: 16px 16px !important;
background-position: 10px center !important;
}
button.ui-state-hover > img {
// position: absolute;
// top: 70000px;
}
} // dropdown
// Favoriten
.favorites {
li {
&:hover {
div.ui-icon {
display:inline-block;
}
}
span.ui-state-active {
border: none;
}
}
input {margin-right: 1ex;}
img {
margin-right: 1ex;
.dimension_width_height_s;
}
div.ui-icon-trash {
position: relative;
float:right;
display:none;
}
// List Icon
.sideboxstar{
background-image: url("../images/bullet.png");
background-repeat: no-repeat;
background-size: contain;
background-color: egw_color_2_a;
.dimension_width_height_xs;
}
}
.sidebox-favorites {
ul.favorites {
width: 99%;
padding: 0px;
border: none;
background: white;
li {
padding-left: 1em !important;
margin-left: 0px;
line-height: 2em;
img {
// margin-right: 1ex;
margin: 0px 5px;
.dimension_height_s;
padding: 3px;
.Complete_Button_Icon_normal;
&:hover {
.dimension_height_s;
/*.Complete_Button_Icon_hover ;*/
}
}
img.sideboxstar {
margin-right: 1ex;
.dimension_height_s;
.Complete_Button_Icon_normal;
background-size: 16px 16px;
background-position: center;
&:hover {.dimension_height_s; .Complete_Button_Icon_hover ;}
}
a {
div.sideboxstar {display: none;}
div.ui-icon-trash{
margin-top: -1px;
margin-right: 2px;
}
}
}
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
.bordered(1px, 1px, 1px,1px);
border-color: @gray_10;
background: transparent !important;
font-weight: bold;
.color_100_gray;
}
.ui-menu-icons {
.ui-menu-item {
a {
position: relative;
padding-left: 1em;
padding: 0.5em 1em 0.5em 0;
&:hover {.Complete_Button_Icon_hover ;}
}
}
}
/*ul*/
.ui-menu {
/*li*/
.ui-menu-item {
width: 93%;
&:hover {background-color: @egw_color_1_e;}
a {
line-height: inherit;
padding: 2px 0px;
padding-left: 5px;
&:hover {text-decoration: underline;}
img { .dimension_width_height_s ;}
div.ui-icon-heart{display: none}
}
&:first-child a{padding-left: 41px;}
}
}
div.ui-icon-heart{
position: relative;
float: left;
display:inline-block;
margin: -3px 1px 0px 1px;
background-image: none;
}
div.ui-icon-trash{
margin-top: 0px;
margin-right: 2px;
background-image:url(../images/delete.png);
background-size: 16px 16px;
background-position: 0 0;
background-color: egw_color_2_a;
.box_shadow_standard_light;
.rounded;
}
} // sidebox-favorites
.nextmatch_sortheader.asc {
/* font-weight: bold;
background-image: url(../images/up.png);*/
background-size: 12px 12px;
}
.nextmatch_sortheader.desc {
/* font-weight: bold;
background-image: url(../images/down.png);*/
background-size: 12px 12px;
}
/* End of hierarchy */
/* Mangled link-to widget inside a nextmatch - used for DnD uploads */
.et2_nextmatch * .et2_link_to {
position: relative;
}
div.et2_progress > div {
background-color: @color_progress;
/*height: 5px;*/
}
/**
* et2_toolbar
*/
.ui-toolbar_dropShadow {
min-height: 30px;
border: dashed;
border-width: 1px;
border-color: gray;
opacity:0.7;
}
/**
* et2_textbox
*/
textarea,
textarea.description {
background-color: @color_optional;
padding: 0.3em 0 0 0.3em;
border: none;
}
/**
* et2_taglist
*/
.ms-ctn,
.ms-res-ctn {
/* It doesn't really work smaller than this */
min-width: 150px;
}
.ms-ctn .loading {
position: relative;
margin: 0px auto -16px auto;
top: 5px;
}
.ms-res-ctn {
overflow-x: hidden;
}
/**
* et2_toolbar
*/
.et2_toolbar {
background: none;
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar button {
}
div.ui-toolbar-menulist{
position: absolute;
height: inherit !important;
z-index: 999 !important;
overflow: hidden !important;
border: solid black 1px;
padding: 0 !important;
margin-top: 3px !important;
}
.ui-toolbar-menulist > h {
padding-bottom: 7px;
}
.ui-toolbar-menulist > button {
padding: 0 !important;
margin: 0 !important;
text-align: left;
border-radius: 0 !important;
width: 100% !important;
white-space: nowrap;
}
.ui-toolbar-menulistHeader{
font-size: xx-small;
height:100%;
margin-top: 2px;
direction: ltr;
}
.et2_toolbar_activeList{
position: relative;
float:right;
direction: rtl;
margin-top: 3px;
}
.et2_toolbar_actionlist{
float:left;
}
/**
* Do not wrap content of a single widget incl. a label or children of a hbox.
* Taking into eg. select-account widget rendered as ul and prefixed with a label
* and maintaining some space between widgets.
*/
.et2_nowrap{
white-space: nowrap;
}
ul.et2_nowrap, div.et2_nowrap{
display: inline-block;
}
.et2_nowrap > *{
padding-left: 5px;
}
.et2_nowrap > *:first-child{
padding-left: 0;
}
.et2_nowrap > label > *{
padding-left: 5px;
}
/*#################################### ADMIN PART #####################################################*/
iframe#admin-index_iframe{
background-color: yellow;
}
// Content Iframe
#admin-categories-index{
div.egwGridView_scrollarea { min-height: 500px;}
table.et2_grid {
#admin-categories-index_nm {
div.egwGridView_outer{
td.frame {
}
}
}
}
}
/*#################################### ADMIN PART #####################################################*/
} // Ende Media all
/*#################################### Media Queries #####################################################*/
@media only screen and (min-width: 980px) and (max-width: 1279px) {
.nextmatch_header > .filters select { margin: 0px;}
}
@media only screen and (min-width: 760px) and (max-width: 979px) {
}
@media only screen and (min-width: 320px) and (max-width: 759px) {
}
//
//