|
/* ------------------------------------------------------------- */
|
|
/* MAIN PROPERTIES (main.less) */
|
|
/* ------------------------------------------------------------- */
|
|
|
|
|
|
// ----------------------------------------------------------------------------
|
|
//
|
|
// MAIN (MAIN PROPERTIES)
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION:
|
|
//
|
|
// CONTENTS:
|
|
// - GENERAL FONT SIZES
|
|
// - HEADINGS (H1-H3)
|
|
// - H1
|
|
// - H2
|
|
// - H3 & Caption
|
|
// - LINKS
|
|
// - OTHER STANDARD HTML-ELEMENTS (SELECTORS)
|
|
// - Lists (UL & OL)
|
|
// - Horizontal Rule
|
|
// - COMPONENTS
|
|
// - Dimensions for DIVs & SPANs
|
|
// - Long Description
|
|
// - Info-Container (description & instructions)
|
|
// - Labels & Values (SPAN)
|
|
// - Centered Elements
|
|
// - Accent
|
|
// - File Content
|
|
// - Expanded
|
|
// - Hidden Elements
|
|
// - Visibility, Height utility classes
|
|
// - WRAPPER
|
|
// - Toggled Wrapper
|
|
// - Toggle buttons
|
|
// - Columns
|
|
// - Paragraph within Wrapper
|
|
// - Horizontal Scroll
|
|
// - CATEGORIES
|
|
// - Plus & Minus / Positive & Negative
|
|
// - Styled Text
|
|
// - SPECIALIZED PROPERTIES (REDUNANT)
|
|
// - Dunned Invoices
|
|
// - Bank transactions
|
|
// - Diverse Elements
|
|
// - DEPRACETED STUFF
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// GENERAL FONT SIZES
|
|
// --------------------------------------
|
|
|
|
#content {
|
|
|
|
& > p,
|
|
& > div,
|
|
& > td,
|
|
& > th {
|
|
font-size: @font-size-smaller ;
|
|
}
|
|
input,
|
|
select, option,
|
|
textarea {
|
|
font-size: @font-size-smaller ;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// Headings (H1 - H3)
|
|
// --------------------------------------
|
|
|
|
// -----------------------
|
|
// H1
|
|
// -----------------------
|
|
h1 {
|
|
display: block;
|
|
text-align: left;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-size: @h1-size;
|
|
line-height: 1.2em ;
|
|
}
|
|
// PENDENT: SIEHE AUCH .LISTTOP
|
|
#content > h1 {
|
|
position: fixed;
|
|
z-index: @zindex-h1; //hps:12
|
|
top: 60px;
|
|
width: 100%;
|
|
color: @base-h1-color ;
|
|
background-color: @base-h1-bg;
|
|
padding: @h1-padding;
|
|
border-top: @base-h1-border-top;
|
|
}
|
|
#content .wrapper h1{
|
|
color: @headings-color;
|
|
font-size: @h2-size;
|
|
margin: @margin-from-wrapper ;
|
|
}
|
|
body > h1{
|
|
color: @base-h1-color ;
|
|
background-color: @base-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: 2.0em 0.2em 0.6em 0.2em ;
|
|
margin: 0 ;
|
|
font-weight: normal;
|
|
clear: both;
|
|
&:first-child{ padding-top: 0 ; }
|
|
}
|
|
} // /#content /.admin
|
|
|
|
h2.confirm { color: @headings-color-confirm ; }
|
|
h2.error { color: @headings-color-error ; }
|
|
|
|
|
|
// -----------------------
|
|
// H2 Record-Title
|
|
// -----------------------
|
|
// (e.g. Customer Name, Article Name)
|
|
// PENDENT: in verschiedenen Templates 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 mixin .mx-h3-caption and 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 ;
|
|
&:first-child { margin-top: 0 ; }
|
|
}
|
|
#content table.tbl-horizontal > tbody > tr > th > h3,
|
|
#content table.tbl-horizontal > tbody > tr > td > h3 { margin-top: 0.2em !important; }
|
|
|
|
// PENDENT: H4
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// LINKS
|
|
// --------------------------------------
|
|
|
|
a {
|
|
text-decoration: @link-decoration;
|
|
font-weight: @link-weight;
|
|
&: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)
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// OTHER STANDARD HTML-ELEMENTS (SELECTORS)
|
|
// --------------------------------------
|
|
|
|
// -----------------------
|
|
// Lists (UL & OL)
|
|
// -----------------------
|
|
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 ;
|
|
}
|
|
}
|
|
}
|
|
|
|
// -----------------------
|
|
// Horizontal Rule
|
|
// -----------------------
|
|
hr {
|
|
background-color: @base-standard; // same as table border
|
|
border: none;
|
|
height: 2px; // same as table border
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// COMPONENTS
|
|
// --------------------------------------
|
|
|
|
// -----------------------
|
|
// Dimensions for DIVs & SPANs
|
|
// -----------------------
|
|
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 ; }
|
|
}
|
|
}
|
|
|
|
// -----------------------
|
|
// Info-Container (description & instructions)
|
|
// -----------------------
|
|
// Description
|
|
// 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 ; }
|
|
|
|
}
|
|
|
|
// Instructions
|
|
// 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 }
|
|
}
|
|
|
|
// -----------------------
|
|
// Labels & Values (SPAN)
|
|
// -----------------------
|
|
span.label{
|
|
//color: @base-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
|
|
}
|
|
|
|
// -----------------------
|
|
// Centered Elements
|
|
// -----------------------
|
|
// Centered blocks
|
|
.center {
|
|
margin: 0 auto;
|
|
width: auto;
|
|
}
|
|
|
|
// -----------------------
|
|
// Accent
|
|
// -----------------------
|
|
// PENDENT: Neue Loesung
|
|
.accent{
|
|
div.label{
|
|
float: left ;
|
|
//color: @base-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 ;
|
|
}
|
|
}
|
|
} // /.accent
|
|
|
|
// -----------------------
|
|
// 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;
|
|
}
|
|
|
|
// -----------------------
|
|
// Hidden Elements
|
|
// -----------------------
|
|
.hidden {
|
|
display: none ;
|
|
}
|
|
|
|
|
|
// -----------------------
|
|
// Visibility, Height utility classes
|
|
// -----------------------
|
|
.overflow-visible {
|
|
overflow: visible;
|
|
}
|
|
|
|
.height-auto {
|
|
height: auto;
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// Wrapper
|
|
// --------------------------------------
|
|
|
|
// Wrapper for columns & horizontal tables
|
|
.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/toggled wrapper
|
|
width: 98.6%;
|
|
|
|
.wrapper { margin-left: 0 !important ; }
|
|
|
|
&.test { background-color: #FFE67C ; }
|
|
|
|
.tbl-horizontal,
|
|
.tbl-plain { float: left ; }
|
|
|
|
& > table.tbl-horizontal:last-child{
|
|
margin-right: 0 ;
|
|
}
|
|
|
|
|
|
// -----------------------
|
|
// Toggled Wrapper
|
|
// -----------------------
|
|
&.toggled {
|
|
display: inline-block !important ;
|
|
width: 98.6% ;
|
|
& > table.tbl-horizontal,
|
|
& > div.col {
|
|
margin-top: -1.8em ;
|
|
}
|
|
|
|
// -----------------------
|
|
// Toggle buttons
|
|
// -----------------------
|
|
// must be placed on the first position in .wrapper
|
|
// PENDENT: Plazierung
|
|
& > .toggles {
|
|
display: block ;
|
|
float: right ;
|
|
position: relative ;
|
|
top: 0 ;
|
|
margin-top: 4px ;
|
|
float: right ;
|
|
width: 100% ;
|
|
|
|
a.toggle {
|
|
//display: inline-block;
|
|
display: block;
|
|
//width: 18px ;
|
|
width: 100% ;
|
|
height: 18px ;
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
&.min,
|
|
&.max { background-position-x: 99% ; }
|
|
&.min { background-image: url(../../image/toggle-down.png); }
|
|
&.max { background-image: url(../../image/toggle-left.png); }
|
|
}
|
|
} // /.toggles
|
|
|
|
|
|
|
|
}
|
|
|
|
&.bordered {
|
|
border: @controlpanel-border ;
|
|
border-radius: 4px ;
|
|
}
|
|
|
|
|
|
// -----------------------
|
|
// 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 ;
|
|
}
|
|
} // /.col
|
|
|
|
// -----------------------
|
|
// Paragraph within Wrapper
|
|
// -----------------------
|
|
& > p {
|
|
max-width: 36.0em ;
|
|
overflow: hidden ;
|
|
font-size: @font-size-smaller ;
|
|
line-height: 140%;
|
|
//color: @gray-darker ;
|
|
padding-bottom: 1.0em ;
|
|
}
|
|
|
|
} // /.wrapper
|
|
|
|
// --------------------------------------
|
|
// wrapper / classes to override scroll
|
|
// behaviour
|
|
// E.g. used for tables / image preview
|
|
// --------------------------------------
|
|
|
|
.horizontal-scroll-wrapper {
|
|
overflow-x: auto !important;
|
|
}
|
|
|
|
.scroll {
|
|
overflow: scroll !important;;
|
|
}
|
|
|
|
// --------------------------------------
|
|
// wrapper to align input-/control-panels
|
|
// next to each other, so that they are
|
|
// using the same height
|
|
// --------------------------------------
|
|
|
|
.panel-wrapper {
|
|
display: flex !important;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
// --------------------------------------
|
|
// CATEGORIES
|
|
// --------------------------------------
|
|
|
|
// -----------------------
|
|
// Plus & Minus / Positive & negative
|
|
// -----------------------
|
|
// Inline-Elements
|
|
.plus,
|
|
.minus,
|
|
.plus0,
|
|
.plus1 {
|
|
clear: none;
|
|
}
|
|
// Negative Values
|
|
.minus,
|
|
.plus0 { color: @base-negative !important; }
|
|
// Positive Values
|
|
.plus,
|
|
.plus1 { color: @base-positive !important; }
|
|
|
|
// unbalanced Ledger
|
|
// PENDENT: wo eingesetzt?
|
|
span.unbalanced_ledger {
|
|
background-color: @base-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-standard;
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// SPECIALIZED PROPERTIES (REDUNANT)
|
|
// --------------------------------------
|
|
|
|
// -----------------------
|
|
// Dunned Invoices
|
|
// -----------------------
|
|
// /templates/webpages/is/form_header.html
|
|
// /templates/webpages/ar/form_header.html
|
|
.dunned_invoice {
|
|
font-weight: bold;
|
|
color: #f00;
|
|
}
|
|
// /templates/webpages/is/form_header.html
|
|
// /templates/webpages/ar/form_header.html
|
|
.customer_dunning_level {
|
|
font-weight: bold;
|
|
height: auto !important; // override: table td > span.data (forms.less)
|
|
}
|
|
// dunning invoice list
|
|
// /templates/webpages/dunning/show_invoices.html
|
|
#dunning_invoice_list .direct_debit td,
|
|
#dunning_invoice_list .direct_debit a {
|
|
color: @gray-standard;
|
|
}
|
|
|
|
// -----------------------
|
|
// 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;
|
|
}
|
|
|
|
// --------------------------------------
|
|
// 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 wandeln
|
|
#content {
|
|
&>p { margin: 0.6em 2.0em 1.0em 0.7em }
|
|
&>p.message_hint {
|
|
margin: 0.6em 2.0em 1.0em 1.0em
|
|
}
|
|
}
|