kivitendo/css/less/jquery-ui_overrides.less @ b8114b70
| fb33dc99 | Hans Peter Schlaepfer | // ----------------------------------------------------------------------------
|
|
//
|
|||
// jQuery UI CUSTOM
|
|||
//
|
|||
// ----------------------------------------------------------------------------
|
|||
// DESCRIPTION:
|
|||
// Overrides of jQuery UI.less stuff
|
|||
//
|
|||
// Contents:
|
|||
// - UI WIDGETS IN GENERAL
|
|||
// - TAB WIDGET
|
|||
// - DIV-Container with Tabs & Panels
|
|||
// - LIST WITH TABS (UL)
|
|||
// - SINGLE TAB (LI)
|
|||
// - LINKS
|
|||
// - STATES (Active, Default, Hover)
|
|||
// - UI-TABS-NAV (Class)
|
|||
// - UI-TABS-COLLAPSIBLE
|
|||
// - DIV (UI-TABS-PANEL)
|
|||
// - UI-TABS-PANEL (CLASS)
|
|||
// UI-AUTOCOMPLETE
|
|||
// ----------------------------------------------------------------------------
|
|||
// --------------------------------------
|
|||
// UI WIDGETS IN GENERAL
|
|||
// --------------------------------------
|
|||
.ui-widget-content {
|
|||
background: white;
|
|||
}
|
|||
// --------------------------------------
|
|||
// TAB WIDGET
|
|||
// --------------------------------------
|
|||
// Container with Tabs & Panels (DIV)
|
|||
.tabwidget {
|
|||
background: white;
|
|||
position: relative;
|
|||
padding: 0 !important; // hps
|
|||
zoom: 1;
|
|||
// -webkit-border-radius: 4px;
|
|||
// border-radius: 4px;
|
|||
border: 0;
|
|||
color: #333333;
|
|||
overflow: hidden;
|
|||
width: 100%;
|
|||
// --------------------------------------
|
|||
// LIST WITH TABS (UL)
|
|||
// --------------------------------------
|
|||
> ul {
|
|||
margin: 0;
|
|||
padding: 0.2em 0.2em 0 0;
|
|||
outline: 0;
|
|||
line-height: 1.3;
|
|||
text-decoration: none;
|
|||
font-size: @font-size-base; // hps
|
|||
font-weight: bold;
|
|||
list-style: none;
|
|||
display: block;
|
|||
background-color: none;
|
|||
border: 1px #dddddd;
|
|||
color: #fe5f14;
|
|||
margin: 0;
|
|||
&::after {
|
|||
content: ".";
|
|||
display: block;
|
|||
height: 0;
|
|||
clear: both;
|
|||
visibility: hidden;
|
|||
}
|
|||
// --------------------------------------
|
|||
// SINGLE TAB (LI)
|
|||
// --------------------------------------
|
|||
li {
|
|||
list-style: none;
|
|||
float: left;
|
|||
position: relative;
|
|||
top: 1px;
|
|||
//margin: 0 0.4em 1px 0;
|
|||
margin: 1px 0.2em 0 0;
|
|||
border-bottom: 0 !important;
|
|||
border-top-right-radius: 4px;
|
|||
border-top-left-radius: 4px;
|
|||
padding: 0;
|
|||
white-space: nowrap;
|
|||
border: 1px solid #cccccc;
|
|||
background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
|
|||
font-size: @font-size-smaller ;
|
|||
font-weight: bold;
|
|||
color: #1c94c4;
|
|||
&.ui-tabs-selected {
|
|||
margin-bottom: 0;
|
|||
padding-bottom: 1px;
|
|||
a { cursor: pointer; }
|
|||
}
|
|||
// --------------
|
|||
// LINKS
|
|||
//
|
|||
a {
|
|||
float: left;
|
|||
//padding: 0.8em 1.2em;
|
|||
padding: 0.2em 0.7em;
|
|||
text-decoration: none;
|
|||
cursor: pointer;
|
|||
}
|
|||
// --------------
|
|||
// STATES (Active, Default, Hover)
|
|||
// Outline: 0 ; in anchor to avoid dotted frame after click
|
|||
&.ui-state-hover{
|
|||
a,
|
|||
a:hover {
|
|||
color: @tabs-text-hover;
|
|||
background-color: @tabs-bg-hover;
|
|||
}
|
|||
}
|
|||
&.ui-state-active {
|
|||
color: #000;
|
|||
background-color: @tabs-bg;
|
|||
a,
|
|||
a:link,
|
|||
a:visited {
|
|||
color: #000;
|
|||
background-color: @tabs-bg; // PENDENT: NOETIG???
|
|||
outline: 0 ;
|
|||
}
|
|||
&.ui-state-hover {
|
|||
a,
|
|||
a:hover {
|
|||
color: #000;
|
|||
background-color: @brand-light;// PENDENT: NOETIG???
|
|||
}
|
|||
}
|
|||
}
|
|||
&.ui-state-default{
|
|||
border: 1px solid @brand-darkest;
|
|||
background: #fff;
|
|||
font-weight: normal;
|
|||
color: @brand-darkest;
|
|||
margin: 0 0 0 0.6em;
|
|||
a,
|
|||
a:link { color: @brand-darkest; }
|
|||
}
|
|||
&.ui-state-disabled a {
|
|||
cursor: text;
|
|||
outline: 0 ;
|
|||
}
|
|||
&.ui-state-processing a { cursor: text; }
|
|||
&.ui-state-loading a { outline: 0 ; }
|
|||
}
|
|||
// /li
|
|||
// LI (List Elements)
|
|||
// These statements have been active, probably we can trash them once
|
|||
//.ui-state-default,
|
|||
//.ui-widget-content .ui-state-default,
|
|||
//.ui-widget-header .ui-state-default {
|
|||
// border: 1px solid @gray-medium;
|
|||
// background: #fff;
|
|||
// font-weight: normal;
|
|||
// color: #1c94c4;
|
|||
// margin: 0 0 0 0.6em;
|
|||
//}
|
|||
//.ui-state-active,
|
|||
//.ui-widget-content .ui-state-active,
|
|||
//.ui-widget-header .ui-state-active {
|
|||
// border: 1px solid @gray-medium; // hps
|
|||
// // background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
|
|||
// background: none;
|
|||
// background-color: @gray-verylight; // hps
|
|||
// font-weight: normal; // hps
|
|||
// color: #000; // hps
|
|||
//}
|
|||
// UL
|
|||
&.ui-widget-header {
|
|||
//background: transparent;
|
|||
//border: 0px;
|
|||
//color: #fe5f14;
|
|||
}
|
|||
// --------------------------------------
|
|||
// UI-TABS-NAV (Class)
|
|||
// --------------------------------------
|
|||
// UL
|
|||
&.ui-tabs-nav {
|
|||
margin: 0 0.4em 0.6em 0;
|
|||
padding: 0.4em 0.2em 0 0.7em;
|
|||
background-color: #ffffff;
|
|||
position: fixed;
|
|||
top: 100px;
|
|||
width: 100%;
|
|||
z-index: 1029;
|
|||
border-bottom: 1px solid #999 !important;
|
|||
li {
|
|||
margin: 1px 0.2em 0 0;
|
|||
a { padding: 0.2em 0.7em; }
|
|||
&.ui-tabs-active {
|
|||
border-bottom: 1px @tabs-bg solid !important ;
|
|||
margin-bottom: -1px;
|
|||
padding-bottom: 0;
|
|||
}
|
|||
}
|
|||
} // /.ui-tabs-nav
|
|||
}
|
|||
// /ul
|
|||
// --------------------------------------
|
|||
// UI-TABS-COLLAPSIBLE
|
|||
// --------------------------------------
|
|||
&.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
|
|||
cursor: pointer;
|
|||
}
|
|||
// --------------------------------------
|
|||
// DIV (UI-Tabs-Panel)
|
|||
// --------------------------------------
|
|||
// Single Panel, selected via Tabs
|
|||
// Some of the Panels do not have a class
|
|||
& > div {
|
|||
display: none;
|
|||
//border-top: 1px solid #999 !important;
|
|||
//border-left: 1px solid #999 !important;
|
|||
//border-right: 1px solid #999 !important;
|
|||
padding-top: 1.8em !important;
|
|||
border-bottom: none;
|
|||
width: 100%;
|
|||
height: 100%;
|
|||
min-height: 400px;
|
|||
overflow: hidden ;
|
|||
//--------------------------
|
|||
// UI-Tabs-Panel (CLASS)
|
|||
// --------------------------
|
|||
&.ui-tabs-panel{
|
|||
width: 100%;
|
|||
overflow: hidden;
|
|||
// aus Original oben
|
|||
//background: none;
|
|||
background-color: @tabs-bg;
|
|||
//overflow: hidden; // show scrollbar vertical if overflown
|
|||
display: block;
|
|||
// further tabwidget within a tabwidget (documents tab etc.)
|
|||
& > .tabwidget{
|
|||
//background-color: rgb(239, 239, 239) ;
|
|||
position: relative ;
|
|||
.ui-tabs-panel {
|
|||
//background-color: rgb(239, 239, 239) !important;
|
|||
background-color: @tabs-bg ;
|
|||
position: relative ;
|
|||
top: auto;
|
|||
padding-top: 0 !important ;
|
|||
}
|
|||
.ui-tabs-nav{ background-color: @tabs-bg; }
|
|||
}
|
|||
}
|
|||
// .ui-tabs-panel
|
|||
} // /div (.ui-tabs-panel)
|
|||
}
|
|||
// /.tabwidget
|
|||
#content > form > .tabwidget > .ui-tabs-panel{
|
|||
// further tabwidget within a tabwidget (documents tab etc.)
|
|||
& > .tabwidget{
|
|||
background-color: rgb(239, 239, 239) ;
|
|||
position: relative ;
|
|||
& > .ui-tabs-nav{
|
|||
position: relative ;
|
|||
top: auto;
|
|||
background-color: none;
|
|||
}
|
|||
& > .ui-tabs-panel {
|
|||
background-color: rgb(239, 239, 239);
|
|||
position: relative ;
|
|||
top: auto;
|
|||
}
|
|||
}
|
|||
}
|
|||
// Dialog
|
|||
.ui-dialog {
|
|||
.ui-dialog-titlebar {
|
|||
}
|
|||
}
|
|||
// jstree
|
|||
.jstree a {
|
|||
border-bottom: none;
|
|||
}
|
|||
.ui-widget input[type="button"]{
|
|||
}
|
|||
// -------------------
|
|||
// Part_Picker
|
|||
// Select Parts in input-fields
|
|||
span.part_picker,
|
|||
span.chart_picker{
|
|||
margin: 0 !important;
|
|||
padding: 0 !important;
|
|||
}
|
|||
// -------------------
|
|||
// Part_Picker
|
|||
// Select Customer in input-fields
|
|||
// PENDENT: Ausrichtung vertikal in Zelle
|
|||
span.customer_vendor_picker{
|
|||
margin: 0 !important;
|
|||
padding: 0 !important;
|
|||
}
|
|||
// -------------------
|
|||
// Date_Picker
|
|||
// Select Date in Popover
|
|||
// PENDENT: Ausrichtung vertikal in Zelle
|
|||
input.datepicker{
|
|||
margin: -0.3em 0 0 0 !important;
|
|||
//padding: 0 !important;
|
|||
}
|
|||
// --------------------------------------
|
|||
// AUTOCOMPLETE
|
|||
// --------------------------------------
|
|||
.ui-autocomplete {
|
|||
z-index: 9000 ;
|
|||
li{
|
|||
a{
|
|||
display: block ;
|
|||
font-size: 80% ;
|
|||
padding-top: 0.4em !important;
|
|||
padding-bottom: 0.4em !important;
|
|||
&:hover{
|
|||
background-color: #C9C9C9;
|
|||
border: none ;
|
|||
color: #000 ;
|
|||
}
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// DATEPICKER
|
|||
// --------------------------------------
|
|||
// Forward / Backward Arrows
|
|||
.ui-widget-header {
|
|||
.ui-icon {
|
|||
background-image: url(ui-lightness/images/ui-icons_222222_256x240.png);
|
|||
}
|
|||
.ui-state-hover{
|
|||
.ui-icon{
|
|||
background-image: url(ui-lightness/images/ui-icons_ef8c08_256x240.png);
|
|||
//background: #ffffff !important;
|
|||
}
|
|||
}
|
|||
}
|
|||
// Days
|
|||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
|||
color: @gray-mediumdark;
|
|||
}
|
|||
// Calendar symbol
|
|||
img.ui-datepicker-trigger{
|
|||
vertical-align: middle;
|
|||
margin-left: 0.2em ;
|
|||
}
|
|||
.ui-datepicker-calendar .ui-state-highlight {
|
|||
color: #ffffff ;
|
|||
background-color: @gray-mediumdark;
|
|||
border: #000000 ;
|
|||
}
|
|||
.ui-datepicker-calendar td a.ui-state-hover {
|
|||
color: #ffffff ;
|
|||
background-color: #000000;
|
|||
border: #000000 ;
|
|||
}
|
|||
.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 {
|
|||
border: 1px solid #000000;
|
|||
background: #ffffff;
|
|||
color: #000000;
|
|||
}
|
|||
.ui-widget-header .ui-datepicker-header .ui-state-hover .ui-icon {
|
|||
background: #ffffff; ;
|
|||
}
|
|||
.ui-state-default .ui-icon {
|
|||
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|||
}
|
|||
.ui-state-hover .ui-icon,
|
|||
.ui-state-focus .ui-icon {
|
|||
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|||
}
|
|||
.ui-state-active .ui-icon {
|
|||
background-image: url(ui-lightness/images/ui-icons_777777_256x240.png) !important;
|
|||
}
|
|||
.ui-datepicker select.ui-datepicker-month,
|
|||
.ui-datepicker select.ui-datepicker-year {
|
|||
width: 48%;
|
|||
}
|
|||
// --------------------------------------
|
|||
// CKEditor
|
|||
// --------------------------------------
|
|||
.cke_editable {
|
|||
background-color: white;
|
|||
padding: 6px;
|
|||
//margin-left: -0.3em ;
|
|||
border-top: 1px #999 solid;
|
|||
border-right: 1px #ddd solid;
|
|||
border-left: 1px #ddd solid;
|
|||
overflow: auto ;
|
|||
font-size: 11pt ;
|
|||
min-width: @textarea-wi-lightwide ;
|
|||
min-height: 4.0em ;
|
|||
&:focus {
|
|||
outline: none ;
|
|||
background-color: @formelement-focus-bg ;
|
|||
border: @formelement-focus-border ;
|
|||
}
|
|||
p {
|
|||
font-size: 10pt !important;
|
|||
padding: 0 ;
|
|||
margin: 0 0 0.4em 0 ;
|
|||
font-weight: normal;
|
|||
}
|
|||
}
|
|||
div.cke_editable.wi-small-wide{
|
|||
margin-right: 24px !important ;
|
|||
}
|
|||
body > .ui-dialog > .ui-dialog-content > p > .cke_editable {
|
|||
border: 1px #dcdcdc solid !important;
|
|||
padding: 0.4em;
|
|||
margin: 0;
|
|||
font-size: 100%;
|
|||
width: 100% !important;
|
|||
}
|
|||
// --------------------------------------
|
|||
// UI-DIALOG
|
|||
// --------------------------------------
|
|||
.ui-dialog-titlebar.ui-widget-header {
|
|||
button.ui-dialog-titlebar-close {
|
|||
right: 0.3em;
|
|||
top: 0;
|
|||
width: 21px;
|
|||
margin: 5px 0 0 0;
|
|||
}
|
|||
}
|
|||