|
// ----------------------------------------------------------------------------
|
|
//
|
|
// MAIN (MAIN PROPERTIES)
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION:
|
|
//
|
|
//
|
|
//
|
|
// CONTENTS:
|
|
// - GENERAL FONT SIZES
|
|
// - HEADING
|
|
// - H1
|
|
// - H2
|
|
// - H3 & Caption
|
|
// - LINKS
|
|
// - COMPONENTS
|
|
// - DIVs & SPAN Dimensions
|
|
// - SPAN: Labels & Values
|
|
// - Select Functions (DIV)
|
|
// - Info-Container (DIV)
|
|
// - Wrapper
|
|
// - File Content (PRE)
|
|
// - CATEGORIES
|
|
// - Plus & Minus / Positive & Negative
|
|
// - Styled Text
|
|
// - SPECIALIZED PROPERTIES (REDUNANT)
|
|
// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// GENERAL FONT SIZES
|
|
// --------------------------------------
|
|
|
|
#content {
|
|
|
|
& > p,
|
|
& > div,
|
|
& > td,
|
|
& > th {
|
|
font-size: @font-size-small ;
|
|
}
|
|
input,
|
|
select, option,
|
|
textarea {
|
|
font-size: @font-size-smaller ;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// Headings (H1 - H6)
|
|
// --------------------------------------
|
|
// H1
|
|
//
|
|
h1{
|
|
display: block;
|
|
text-align: left;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-size: @h1-size;
|
|
line-height: 1.2em ;
|
|
}
|
|
// PENDENT: mit Child-Kombinator > versehen wenn fertig
|
|
// PENDENT: SIEHE AUCH .LISTTOP
|
|
#content > h1 {
|
|
position: fixed;
|
|
z-index: @zindex-h1; //hps:12
|
|
top: 60px;
|
|
width: 100%;
|
|
color: @brand-h1-color ;
|
|
background-color: @brand-h1-bg;
|
|
padding: @h1-padding;
|
|
|
|
}
|
|
#content .wrapper h1{
|
|
color: @headings-color;
|
|
font-size: @h2-size;
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
body > h1{
|
|
color: @brand-h1-color ;
|
|
background-color: @brand-h1-bg ;
|
|
padding: @h1-padding;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// H2
|
|
//
|
|
h2 {
|
|
color: @headings-color;
|
|
font-size: @h2-size ;
|
|
border-style: none;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
#content,
|
|
.admin {
|
|
& > h2 {
|
|
padding: 0.6em 0.2em ;
|
|
margin: 0.6em 0 0 0 ;
|
|
}
|
|
ui-tabs-panel {
|
|
.wrapper > h2 {
|
|
padding: 0 0.2em 0.6em 0.2em;
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
}
|
|
.wrapper > h2 {
|
|
padding: 0 0.2em 0.6em 0.2em;
|
|
}
|
|
} // /#content /.admin
|
|
h2.confirm { color: @headings-color-confirm ; }
|
|
h2.error { color: @headings-color-error ; }
|
|
// -------------------
|
|
// H2 RECORD-TITLE (e.g. Customer Name, Article Name)
|
|
// PENDENT: an verschiedenen Orten einfuegen
|
|
h2.record-title {
|
|
padding: 0.6em 0 0 0 !important;
|
|
font-size: @h2-size ;
|
|
color: @headings-color-accent ;
|
|
small{
|
|
color: @headings-color ;
|
|
letter-spacing: 0 ;
|
|
}
|
|
}
|
|
.wrapper > h2.record-title{
|
|
margin: 0em 1em 1em 0.2em !important;
|
|
}
|
|
.ui-tabs-panel > h2.record-title{
|
|
margin: 1em 1em 0.2em @margin-left-from-content !important;
|
|
padding: 0.8em 0 0 0.1em !important;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// H3
|
|
//
|
|
// see also caption in table.less
|
|
h3 {
|
|
.mx-h3-caption ; // Mixin
|
|
|
|
&.caption{
|
|
margin: 0.6em 0 0.4em 0 !important;
|
|
}
|
|
}
|
|
#content h3{
|
|
color: @headings-color ;
|
|
padding-left: 0 ;
|
|
margin: 0.8em 0 0.4em 0 ;
|
|
}
|
|
#content .wrapper h3 {
|
|
margin-top: 1.0em ;
|
|
}
|
|
#content table.tbl-horizontal > tbody > tr > th > h3,
|
|
#content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// LINKS
|
|
// --------------------------------------
|
|
|
|
a {
|
|
text-decoration: @link-decoration;
|
|
|
|
&:link,
|
|
&:visited,
|
|
&:active {
|
|
color: @link-color;
|
|
}
|
|
&:hover {
|
|
color: @link-hover-color;
|
|
text-decoration: @link-hover-decoration;
|
|
}
|
|
|
|
// Special classes
|
|
// PENDENT: some of them obsolete
|
|
&.selected:hover {
|
|
color:#EBEBEB;
|
|
}
|
|
&.nomobile {
|
|
background-color:transparent;
|
|
border:none;
|
|
}
|
|
&.green {
|
|
background-color: DarkGreen;
|
|
color: white !important;
|
|
border:none;
|
|
}
|
|
&.orange {
|
|
background-color:#FF8000;
|
|
border:none;
|
|
}
|
|
&.red {
|
|
background-color:#FF0000;
|
|
border:none;
|
|
}
|
|
|
|
|
|
// -------------------
|
|
// BUTTONS (.button)
|
|
// see file buttons.less
|
|
|
|
} // /a (Links)
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// COMPONENTS
|
|
// --------------------------------------
|
|
// --------------
|
|
// DIVs: Dimensions
|
|
//
|
|
div,
|
|
span,
|
|
div.list {
|
|
&.wi-smallest { width: @div-wi-smallest ; } // 2.0em
|
|
&.wi-verysmall { width: @div-wi-verysmall ; } // 4.0em
|
|
&.wi-small { width: @div-wi-small ; } // 8.8em
|
|
&.wi-mediumsmall { width: @div-wi-mediumsmall ; } // 8.8em
|
|
&.wi-normal { width: @div-wi-normal ; } // 12.0em
|
|
&.wi-lightwide { width: @div-wi-lightwide ; } // 12.0em
|
|
&.wi-wide { width: @div-wi-wide ; } // 18.0em
|
|
&.wi-wider { width: @div-wi-wider ; } // 24.0em
|
|
&.wi-verywide { width: @div-wi-verywide ; } // 36.0em
|
|
}
|
|
|
|
// --------------
|
|
// Long Description
|
|
// (see also TD.longdesc etc.)
|
|
|
|
div.long-description,
|
|
div.long-desc,
|
|
div.longdescription,
|
|
div.longdesc {
|
|
font-size: @font-size-smaller ;
|
|
|
|
&.small {
|
|
font-size: @font-size-smaller ;
|
|
}
|
|
p {
|
|
margin: 0 0 0.6em 0;
|
|
}
|
|
ul,
|
|
ol {
|
|
margin-top: 0 ;
|
|
li { font-size: @font-size-smaller ; }
|
|
}
|
|
}
|
|
|
|
// --------------
|
|
// SPAN: Labels & Values
|
|
//
|
|
|
|
span.label{
|
|
color: @brand-data-label-color ;
|
|
font-size: @font-size-smaller ;
|
|
font-style: normal ;
|
|
margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
|
|
}
|
|
span.value{
|
|
color: #000 ;
|
|
margin: 0 2.6em 0 0 ; // PENDENT: anschauen, margin-top seltsam
|
|
}
|
|
|
|
|
|
// --------------
|
|
// Info-Container (DIV)
|
|
//
|
|
|
|
// small info-boxes for the user
|
|
div.description{
|
|
display: block;
|
|
float: left ;
|
|
padding: 0 0 0.6em 0 ;
|
|
|
|
// Dimensions
|
|
&.wi-verysmall { width: @div-wi-verysmall ; }
|
|
&.wi-small { width: @div-wi-small ; }
|
|
&.wi-mediumsmall { width: @div-wi-mediumsmall ; }
|
|
&.wi-normal { width: @div-wi-normal ; }
|
|
&.wi-wide { width: @div-wi-wide ; }
|
|
&.wi-lightwide { width: @div-wi-lightwide ; }
|
|
&.wi-wider { width: @div-wi-wider ; }
|
|
&.wi-verywide { width: @div-wi-verywide ; }
|
|
|
|
}
|
|
|
|
// big info boxes for the user
|
|
// same as cols
|
|
// PENDENT: Mixin fuer Padding, Margin etc. anlegen
|
|
div.instructions {
|
|
background-color: @instructionbox-bg;
|
|
border: @instructionbox-border;
|
|
border-radius: @contentbox-radius ;
|
|
max-width: 70% ;
|
|
.mx-contentbox-properties ;
|
|
color: #4C4C4C;
|
|
font-size: 80%;
|
|
|
|
p { width: 30.0em }
|
|
}
|
|
|
|
|
|
|
|
// --------------
|
|
// Wrapper
|
|
//
|
|
// Wrapper for padding & columns
|
|
// TEST
|
|
.wrapper {
|
|
overflow: hidden ;
|
|
margin: @contentbox-margin ;
|
|
padding: 0 0 1.0em 0 ;
|
|
clear: both ;
|
|
display: block ;
|
|
border: 1px transparent solid ; // for nice alignment with folded wrapper
|
|
|
|
.wrapper { margin-left: 0 !important ; }
|
|
|
|
&.test { background-color: #FFE67C ; }
|
|
|
|
&.toggled { display: inline-block !important ; }
|
|
&.bordered { border: 1px @brand-strong solid ; }
|
|
|
|
|
|
// Toggle buttons
|
|
// must be placed on the first position in .wrapper
|
|
// PENDENT: Plazierung
|
|
& > .toggles {
|
|
display: inline-block ;
|
|
float: right ;
|
|
position: relative ;
|
|
top: 0 ;
|
|
margin-top: 4px ;
|
|
float: right ;
|
|
|
|
a.toggle {
|
|
display: inline-block;
|
|
width: 18px ;
|
|
height: 18px ;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
&.min { background-image: url(../image/toggle-down.png); }
|
|
&.max { background-image: url(../image/toggle-left.png); }
|
|
}
|
|
}
|
|
|
|
.tbl-horizontal,
|
|
.tbl-plain {
|
|
float: left ;
|
|
}
|
|
|
|
// --------------
|
|
// Columns
|
|
//
|
|
// DIV or TABLE
|
|
.col {
|
|
float: left ;
|
|
&.test {
|
|
background-color: #FFD7BA;
|
|
border: 1px #6CF solid;
|
|
}
|
|
&.wi-small { width: @div-wi-small ; }
|
|
&.wi-mediumsmall { width: @div-wi-mediumsmall; }
|
|
&.wi-normal { width: @div-wi-normal ; }
|
|
&.wi-wide { width: @div-wi-wide ; }
|
|
&.wi-lightwide { width: @div-wi-lightwide ; }
|
|
&.wi-wider { width: @div-wi-wider ; }
|
|
&.wi-verywide { width: @div-wi-verywide ; }
|
|
|
|
.tbl-horizontal,
|
|
.tbl-plain {
|
|
float: none ;
|
|
clear: left ;
|
|
}
|
|
}
|
|
& > p {
|
|
max-width: 36.0em ;
|
|
overflow: hidden ;
|
|
font-size: @font-size-smaller ;
|
|
line-height: 140%;
|
|
//color: @gray-darker ;
|
|
padding-bottom: 1.0em ;
|
|
}
|
|
}
|
|
|
|
// --------------
|
|
// Centered Elements
|
|
//
|
|
.center{
|
|
margin: auto;
|
|
}
|
|
// Centered blocks
|
|
.center {
|
|
margin: 0 auto;
|
|
width: auto;
|
|
}
|
|
|
|
|
|
// PENDENT: Neue Loesung
|
|
.accent{
|
|
div.label{
|
|
float: left ;
|
|
color: @brand-data-label-color ;
|
|
font-size: 80% ;
|
|
&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
|
|
padding-top: 0.8em ;
|
|
}
|
|
div.data{
|
|
float: left ;
|
|
input[type="text"]{
|
|
width: 20em !important ;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------
|
|
// Hidden Elements
|
|
//
|
|
.hidden {
|
|
display: none ;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// File Content
|
|
//
|
|
// PENDENT: wozu? genügt nicht PRE?
|
|
// /templates/webpages/am/edit_templates.html
|
|
pre.filecontent {
|
|
border: 1px solid blue;
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// Expanded
|
|
//
|
|
|
|
// Pendent: wozu einmalig?
|
|
// /templates/webpages/order/tabs/_row.html
|
|
// /templates/webpages/order/tabs/basic_data.html
|
|
// /js/kivi.Order.js
|
|
#expand_all,
|
|
.expand {
|
|
cursor: pointer;
|
|
display: block;
|
|
max-width: 16px;
|
|
max-height: 16px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// CATEGORIES
|
|
// --------------------------------------
|
|
|
|
|
|
// --------------
|
|
// Plus & Minus / Positive & negative
|
|
//
|
|
// Inline-Elements
|
|
.plus,
|
|
.minus,
|
|
.plus0,
|
|
.plus1 {
|
|
display: inline !important;
|
|
clear: none;
|
|
}
|
|
// Negative Values
|
|
.minus,
|
|
plus0 { color: @brand-negative; }
|
|
// Positive Values
|
|
.plus ,
|
|
.plus1 { color: @brand-positive; }
|
|
// unbalanced Ledger
|
|
// PENDENT: wo eingesetzt?
|
|
span.unbalanced_ledger {
|
|
background-color: @brand-warning-bg;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// Styled Text
|
|
//
|
|
|
|
// Dimmed Text
|
|
// /templates/webpages/requirement_spec_text_block/_text_block.html
|
|
// /templates/webpages/requirement_spec_item/_section_header.html
|
|
div.dimmed-text,
|
|
span.dimmed-text {
|
|
color: @gray;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// SPECIALIZED PROPERTIES (REDUNANT)
|
|
// --------------------------------------
|
|
|
|
|
|
// gemahnte Rechnung
|
|
// /templates/webpages/is/form_header.html
|
|
// /templates/webpages/ar/form_header.html
|
|
.dunned_invoice {
|
|
font-weight: bold;
|
|
color: #f00;
|
|
}
|
|
// gemahnte Rechnung
|
|
// /templates/webpages/is/form_header.html
|
|
// /templates/webpages/ar/form_header.html
|
|
.customer_dunning_level {
|
|
font-weight: bold;
|
|
}
|
|
// dunning
|
|
// /templates/webpages/dunning/show_invoices.html
|
|
#dunning_invoice_list .direct_debit td,
|
|
#dunning_invoice_list .direct_debit a {
|
|
color: @gray-medium;
|
|
}
|
|
|
|
// Bank transactions
|
|
// /templates/webpages/bank_transactions/tabs/automatic.html
|
|
#bank_transactions_proposals .invoice_number_highlight a,
|
|
#bank_transactions_proposals span.invoice_number_highlight {
|
|
background-color: @color-green-strong;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
|
|
// --------------------------------------
|
|
|
|
hr {
|
|
background-color: @color-green-light; // #006400
|
|
border: none;
|
|
//color: #79B61B;
|
|
height: 1px;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
font-size: @font-size-base ;
|
|
|
|
li {
|
|
font-size: @font-size-small ;
|
|
}
|
|
}
|
|
.wrapper .col{
|
|
ul {
|
|
list-style: circle outside;
|
|
padding: 0 ;
|
|
margin: 0 ;
|
|
li{
|
|
padding: 0 0 0 -0.6em ;
|
|
margin: 0 0 0 0 ;
|
|
}
|
|
}
|
|
}
|
|
|
|
// --------------------------------------
|
|
// Diverse Elements
|
|
// --------------------------------------
|
|
// make vertical Space between to elements
|
|
.spacer{
|
|
clear: both;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// DEPRACETED STUFF (BUT WILL IT BE AVAILABLE FOR A LONGER TIME?)
|
|
// --------------------------------------
|
|
// PENDENT: Programmmaesig loesen, vor allem primitive Ueberschriften und "Not records Found"-Meldungen
|
|
|
|
#content {
|
|
&>p { margin: 0.6em 2.0em 1.0em 0.7em }
|
|
&>p.message_hint {
|
|
margin: 0.6em 2.0em 1.0em 1.0em
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|