egroupware/pixelegg/less/jquery-ui.less

412 lines
10 KiB
Plaintext
Raw Normal View History

2013-11-14 20:11:29 +01:00
/**
* EGroupware: Stylite Pixelegg template
*
* et2 Messages
*
* 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 Reinhard <stefan.reinhard@pixelegg.de>
* @package pixelegg
* @version $Id$
*/
@import (reference) "def_design_pattern_color_font_shadow.less";
2013-12-16 10:37:26 +01:00
@import (reference) "def_buttons.less";
2013-11-14 20:11:29 +01:00
// calender
#uical_select_resource {background-color: @egw_color_1_e;}
.uiaccountselection .primary_group {background-color: @egw_color_1_e;}
option:checked {background-color: @egw_color_1_e;}
.ui-tooltip {
2013-11-25 04:16:41 +01:00
padding: 8px;
position: absolute;
z-index: 9999;
max-width: 300px;
2013-11-14 20:11:29 +01:00
2013-12-30 18:32:42 +01:00
.box_shadow (0 0 5px #aaa);
2013-11-14 20:11:29 +01:00
}
/* Component containers
----------------------------------*/
.ui-widget {
2013-11-25 04:16:41 +01:00
.basefontfamily;
// font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 1.1em;
2013-11-14 20:11:29 +01:00
}
.ui-widget .ui-widget {
2013-11-25 04:16:41 +01:00
font-size: 1em;
2013-11-14 20:11:29 +01:00
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
2013-11-25 04:16:41 +01:00
.basefontfamily;
// font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
2014-03-10 17:08:59 +01:00
.fontsize_m;
2013-11-14 20:11:29 +01:00
}
.ui-widget-content {
2013-12-16 10:37:26 +01:00
/*.bordered (@color-hint,@color-hint,@color-hint,@color-hint);*/
2013-11-14 20:11:29 +01:00
2013-11-25 04:16:41 +01:00
// border: 1px solid #a6c9e2;
// background: #fcfdfd url(images/ui-bg_inset-hard_100_fcfdfd_1x100.png) 50% bottom repeat-x;
// color: #222222;
background-image: none;
2013-12-30 18:32:42 +01:00
.color_50_gray !important;
2013-11-25 04:16:41 +01:00
background: white;
2013-11-14 20:11:29 +01:00
}
.ui-widget-content a {
2013-11-25 04:16:41 +01:00
// color: #222222;
2013-12-30 18:32:42 +01:00
.color_40_gray;
2013-11-14 20:11:29 +01:00
}
.ui-widget-header {
2013-11-25 04:16:41 +01:00
// border: 1px solid #4297d7;
2013-12-20 10:36:43 +01:00
.bordered(0px, 0px, 0px,0px) !important;
2014-02-06 08:40:54 +01:00
/*.gradient_thead !important;*/
background-color: @egw_color_2_a;
2013-12-30 18:32:42 +01:00
/*border-color: @gray_10;*/
2013-11-25 04:16:41 +01:00
// background: #5c9ccc url(images/ui-bg_gloss-wave_55_5c9ccc_500x100.png) 50% 50% repeat-x;
// color: #ffffff;
2013-12-30 18:32:42 +01:00
color : @gray_100;
2013-11-25 04:16:41 +01:00
font-weight: bold;
background-image: none;
2013-12-20 10:36:43 +01:00
border: 0px !important;
2013-11-14 20:11:29 +01:00
}
.ui-widget-header a {
2013-11-25 04:16:41 +01:00
// color: #ffffff;
2013-12-30 18:32:42 +01:00
.color_0_gray;
2013-11-14 20:11:29 +01:00
}
/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
2013-11-25 04:16:41 +01:00
.bordered(1px, 1px, 1px,1px);
2014-02-06 08:40:54 +01:00
border-color: @gray_30;
2013-11-25 04:16:41 +01:00
// background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
background: transparent;
font-weight: normal;
.color_90_gray;
2013-11-25 04:16:41 +01:00
// float: left;
// position: relative;
2013-11-14 20:11:29 +01:00
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
2013-12-30 18:32:42 +01:00
.color_40_gray;
2013-11-25 04:16:41 +01:00
text-decoration: none;
2013-11-14 20:11:29 +01:00
}
2014-01-08 19:49:09 +01:00
.ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-focus{
border-color: @gray_10;
background: @color_hint;
2014-02-12 15:29:57 +01:00
background-image: none;
2014-02-19 09:20:52 +01:00
color: @gray_0;
2014-01-08 19:49:09 +01:00
}
2013-11-14 20:11:29 +01:00
.ui-state-hover,
.ui-widget-content .ui-state-hover,
2014-01-08 19:49:09 +01:00
.ui-widget-header .ui-state-hover{
2013-11-25 04:16:41 +01:00
.bordered(1px, 1px, 1px,1px);
2013-12-30 18:32:42 +01:00
border-color: @gray_10;
2013-11-25 04:16:41 +01:00
// background: #d0e5f5 url(images/ui-bg_glass_75_d0e5f5_1x400.png) 50% 50% repeat-x;
2014-01-08 08:57:35 +01:00
background: @color_hint;
2014-02-12 15:29:57 +01:00
background-image: none;
2013-11-25 04:16:41 +01:00
// font-size: 105%;
2014-02-19 09:20:52 +01:00
.color_0_gray;
2013-11-27 08:20:56 +01:00
// font-weight: normal !important;
2013-11-14 20:11:29 +01:00
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
2013-12-30 18:32:42 +01:00
.color_50_gray;
2013-11-25 04:16:41 +01:00
text-decoration: none;
2013-11-14 20:11:29 +01:00
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
2013-11-25 04:16:41 +01:00
.bordered(1px, 1px, 1px,1px);
2013-12-30 18:32:42 +01:00
border-color: @gray_20;
2013-11-25 04:16:41 +01:00
background-image: none;
font-weight: bold;
2013-12-30 18:32:42 +01:00
.color_50_gray;
2013-11-14 20:11:29 +01:00
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
2013-12-30 18:32:42 +01:00
.color_50_gray;
2013-11-25 04:16:41 +01:00
text-decoration: none;
2013-11-14 20:11:29 +01:00
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
2013-11-25 04:16:41 +01:00
.bordered(1px, 1px, 1px,1px);
2013-12-30 18:32:42 +01:00
border-color: @gray_30;
2014-12-05 10:46:57 +01:00
// background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
2013-12-30 18:32:42 +01:00
.color_50_gray;
2013-11-14 20:11:29 +01:00
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
2013-12-30 18:32:42 +01:00
.color_10_gray;
2013-11-14 20:11:29 +01:00
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
2013-11-25 04:16:41 +01:00
.bordered(1px, 1px, 1px,1px);
2013-12-30 18:32:42 +01:00
border-color: @gray_10;
2013-11-25 04:16:41 +01:00
// background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
2013-12-30 18:32:42 +01:00
.color_30_gray;
2013-11-14 20:11:29 +01:00
}
.ui-state-error a,
2013-11-15 18:05:59 +01:00
.ui-widget-content .ui-state-error a,{
2013-11-25 04:16:41 +01:00
color: @red;
2013-11-14 20:11:29 +01:00
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
2013-11-25 04:16:41 +01:00
color: @red;
2013-11-14 20:11:29 +01:00
}
// used in mail for drag and drop mails
.drop-hover {background-color: @egw_color_1_e}
2013-11-15 18:05:59 +01:00
2013-12-20 10:36:43 +01:00
.ui-icon-close{
/*visibility: hidden;*/
2014-01-10 06:26:09 +01:00
/*background-image: url(../images/search.png);*/
2014-01-14 17:05:31 +01:00
background-image: url("../images/cancel.png");
2013-12-20 10:36:43 +01:00
background-repeat: no-repeat;
2013-12-30 18:32:42 +01:00
background-color: @gray_0;
2014-01-14 17:05:31 +01:00
background-size: 12px 12px;
2013-12-20 10:36:43 +01:00
.dimension_width_height_s;
margin: 2px;
padding: 1px;
margin-top: 1px;
2014-01-14 17:05:31 +01:00
background-position: 0px 0px;
2013-12-20 10:36:43 +01:00
.rounded (2px);
2014-01-14 17:05:31 +01:00
&:hover{ background-color: @gray_30;}
2013-12-20 10:36:43 +01:00
2014-01-14 17:05:31 +01:00
&:active { background-color: @color_cancel_action_active !important; }
2013-12-20 10:36:43 +01:00
}
2014-01-17 09:10:35 +01:00
span.ui-icon-close {margin-top: 0px; top: 5px;}
.et2_link_entry .ui-icon-close {margin-top: -5px; top: 9px !important;}
2013-12-20 10:36:43 +01:00
2013-11-15 18:05:59 +01:00
/*Schliessen x*/
.ui-icon-closethick {
2013-12-20 10:36:43 +01:00
background-image: url(../images/close.png) !important;
background-repeat: no-repeat;
2013-12-30 18:32:42 +01:00
background-color: @gray_0;
2013-12-20 10:36:43 +01:00
background-size: contain;
background-position: 0 0 !important;
2013-12-30 18:32:42 +01:00
.color_0_gray;
2013-12-20 10:36:43 +01:00
.dimension_height_s;
2013-12-30 18:32:42 +01:00
&:hover{ background-color: @gray_10; color: @gray_90; .box_shadow_standard_light_hover;}
2013-12-20 10:36:43 +01:00
&:active {
.box_shadow_standard_light_active !important;
2013-12-30 18:32:42 +01:00
background-color: @color_cancel_action_active !important;
2013-12-20 10:36:43 +01:00
}
2013-11-20 09:41:08 +01:00
}
2014-02-19 09:20:52 +01:00
/*###########################################*/
/*Menu */
.ui-menu{
2014-02-19 09:20:52 +01:00
.ui-menu-item {
2014-03-10 17:08:59 +01:00
padding: 0px;
2014-03-10 17:08:59 +01:00
a {
line-height: 24px;
2014-03-10 17:08:59 +01:00
margin: 0px;
padding: 2px 5px;
2014-03-10 17:08:59 +01:00
input {padding: 0;}
img {padding: 0;}
}
a.ui-state-focus {
margin: 0px !important;
line-height: 24px;
2014-03-10 17:08:59 +01:00
padding: 2px 5px;
border: none;
}
2014-02-19 09:20:52 +01:00
}
2014-02-19 09:20:52 +01:00
}
/*###########################################*/
/* col selection */
span.ui-multiselect-header {color: @gray_0;}
2013-11-20 09:41:08 +01:00
span.ui-icon-search{
2013-11-25 04:16:41 +01:00
background-image: url(../images/search.png) !important;
background-position: 0px;
background-size: 10px 10px;
2013-11-20 09:41:08 +01:00
}
2014-02-19 09:20:52 +01:00
.ui-corner-all{.rounded(3px)}
2013-11-20 09:41:08 +01:00
// e.g. Corner Favorites
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 3px;
}
// e.g. Corner Favorites
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 3px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 3px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 3px;
}
2013-11-20 09:41:08 +01:00
/*###########################################*/
/*Dialog: edit row*/
.ui-widget-content {
2014-02-19 09:20:52 +01:00
border: 1px solid @egw_color_2_a;
2013-11-20 09:41:08 +01:00
2013-11-25 04:16:41 +01:00
.et2_selectbox {
button.et2_button_text,
2013-11-25 04:16:41 +01:00
select.et2_selectbox {height: 20px;}
2013-11-20 09:41:08 +01:00
2013-11-25 04:16:41 +01:00
button {background-image: none;}
2013-11-20 09:41:08 +01:00
2013-11-25 04:16:41 +01:00
div.ui-widget-header {
2013-11-20 09:41:08 +01:00
2013-12-30 18:32:42 +01:00
ul li label.ui-state-hover {background-color: @color_hint; font-weight: normal;}
2013-11-25 04:16:41 +01:00
}
2013-11-25 04:16:41 +01:00
}
2013-11-20 09:41:08 +01:00
}
2013-11-25 04:16:41 +01:00
/*###########################################*/
/*Dialog: calendar edit series*/
.ui-dialog-buttonpane {background-color: @egw_color_2_e;}
.ui-dialog-buttonset{
2013-11-25 04:16:41 +01:00
2013-12-16 10:37:26 +01:00
button{
2013-12-20 10:36:43 +01:00
.Complete_Button_text_icon_before;
2013-12-16 10:37:26 +01:00
2013-12-30 18:32:42 +01:00
&:hover{ background-color: @gray_30; color: @gray_90;}
2013-11-25 04:16:41 +01:00
}
button.ui-button-text-only {background-color: @gray_20;
background: inherit;
color: @gray_100 !important;
2013-11-25 04:16:41 +01:00
font-weight: normal !important;
2013-12-16 10:37:26 +01:00
2014-02-12 18:28:01 +01:00
&:hover{ background-color: @gray_30;}
2013-11-25 04:16:41 +01:00
}
}
2014-01-14 09:20:19 +01:00
/*###########################################*/
/*Dialog: calendar edit series*/
2014-02-06 08:40:54 +01:00
// Kalender Widget
div#ui-datepicker-div{
.rounded (3px);
border: 1px solid @gray_30;
.box_shadow_standard_light_inset;
}
2014-01-14 09:20:19 +01:00
.ui-datepicker {
2014-02-06 08:40:54 +01:00
/*padding: 1px 0em;*/
2014-01-14 09:20:19 +01:00
2014-02-06 08:40:54 +01:00
/* .ui-widget-header .ui-icon {
2014-01-14 09:20:19 +01:00
background-image: url("images/ui-icons_d8e7f3_256x240.png");
2014-02-06 08:40:54 +01:00
}*/
// Kalender Tabelle
table.ui-datepicker-calendar{
2014-02-06 08:40:54 +01:00
//aktiver Tag
.ui-state-active {background-color: @egw_color_2_a;color: @gray_0;}
}
div.ui-timepicker-div{
2014-02-06 08:40:54 +01:00
padding: 3px;
2014-02-06 08:40:54 +01:00
//Uhrzeit - Label
dt.ui_tpicker_time_label{font-size: 0.9em}
//Uhrzeit
dd.ui_tpicker_time{font-size: 1.3em; padding-left: 75px; background-color: @egw_color_1_a;}
2014-02-06 08:40:54 +01:00
//Stunde - Label
dt.ui_tpicker_time_label{font-size: 0.9em}
2014-02-06 08:40:54 +01:00
// Minute - Label
dt.ui_tpicker_minute_label {font-size: 0.9em}
// Schieberegler
2014-02-06 08:40:54 +01:00
div.ui_tpicker_hour_slider{
a.ui-slider-handle {background-color: @egw_color_2_a;}
}
div.ui_tpicker_minute_slider{
a.ui-slider-handle {background-color: @egw_color_2_a;}
}
2014-01-14 09:20:19 +01:00
}
2014-02-06 08:40:54 +01:00
//Buttons
div.ui-datepicker-buttonpane{
background-color: @color_button_panel_bg_color;
2014-02-06 08:40:54 +01:00
}
2014-02-06 08:40:54 +01:00
button.ui-datepicker-current .ui-state-hover{
background-color: @color_positive_action_active !important;
2014-02-06 08:40:54 +01:00
&:hover {background-color: @color_positive_action_active;}
&:active {background-color: @color_positive_action_active;}
}
2014-01-14 09:20:19 +01:00
2014-02-06 08:40:54 +01:00
}
2014-01-14 09:20:19 +01:00
2014-02-06 08:40:54 +01:00
// Button now
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
2014-02-06 08:40:54 +01:00
&:hover {background-color: @color_positive_action_active;}
&:active {background-color: @color_positive_action_active;}
2014-01-14 09:20:19 +01:00
}
2014-02-06 08:40:54 +01:00
// Button close
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
2014-02-06 08:40:54 +01:00
&:hover { background-color: @color_cancel_action_hover !important; color: @gray_100; }
&:active { background-color: @color_cancel_action_active !important; color: @gray_80; }
}
2013-12-20 10:36:43 +01:00
//