Revision 1b62523f
Von Hans P. Schlaepfer vor mehr als 4 Jahren hinzugefügt
| css/less/OBSOLETE.less | ||
|---|---|---|
|
// This file is not effacious. It is intended to delete it in the end.
|
||
|
// Nicht gefundene CSS-Klassen und IDs
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// FORMER MAIN.LESS
|
||
|
// --------------------------------------
|
||
|
|
||
|
|
||
|
// OBSOLETE: gibt es nicht
|
||
|
body.admin > h1{
|
||
|
top: 21px;
|
||
|
}
|
||
|
|
||
|
// PENDENT: obsolete?
|
||
|
body.menu {
|
||
|
color: #000000;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
// PENDENT: welche Selektoren???
|
||
|
.accountlistheading {
|
||
|
padding: 0.3em;
|
||
|
color: #006400;
|
||
|
font-weight: bold;
|
||
|
text-align: left;
|
||
|
background-color: #EBEBEB;
|
||
|
}
|
||
|
|
||
|
|
||
|
.link_separator {
|
||
|
margin-left: 6px;
|
||
|
margin-right: 6px;
|
||
|
}
|
||
|
|
||
|
span.toggle_selected {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
|
||
|
|
||
|
// Infos ueber Suchergebnissen
|
||
|
div.info{
|
||
|
padding: 1.0em;
|
||
|
span.info-detail{
|
||
|
margin: 0 5.0em 0 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// FORMER COMMON.CSS
|
||
|
// --------------------------------------
|
||
|
// This file is not effacious. It is intended to delete it in the end.
|
||
|
|
||
|
|
||
|
|
||
|
input.grow_on_focus {
|
||
|
width: 20px;
|
||
|
transition: width 0.1s;
|
||
|
-moz-transition: width 0.1s;
|
||
|
-webkit-transition: width 0.1s;
|
||
|
-o-transition: width 0.1s;
|
||
|
|
||
|
&:focus { width: 150px }
|
||
|
|
||
|
}
|
||
|
|
||
|
/* quirk to force certain constructs to block context */
|
||
|
.block-context { overflow: hidden }
|
||
|
|
||
|
|
||
|
/* various oneshot decoration for legacy purpose. dont use */
|
||
|
.small-text { font-size: @font-size-small; }
|
||
|
.bold { font-weight: bold ;}
|
||
|
|
||
|
.float-left { float: left; }
|
||
|
.float-right { float: right; }
|
||
|
|
||
|
|
||
|
/* position */
|
||
|
.position-relative { position: relative; }
|
||
|
.position-absolute { position: absolute; }
|
||
|
|
||
|
|
||
| css/less/READ_ME.md | ||
|---|---|---|
|
First set the cursor of your terminal to <code>/css/less/</code> (<code>cd /css/less</code>)<br>
|
||
|
Use following command: <code>lessc style.less ../style.css</code><br>
|
||
|
For minifiying the output css: <code>lessc -x style.less ../style.css</code><br>
|
||
|
Then a new <code>/css/style.css</code> is created except when errors occurs.
|
||
|
Then a new <code>/css/style.css</code> is created except if errors occur.
|
||
|
|
||
|
## Developing kivitendo CSS (not customizing)
|
||
|
Read style.less.<br>
|
||
|
This is the comand center for the whole less stuff.<br>
|
||
|
This is the control center for the whole less stuff.<br>
|
||
|
Variables can be set or changed in variables.less.<br>
|
||
|
Variables are efficacious in the other less files.
|
||
|
|
||
| ... | ... | |
|
There are several overriding LESS files. Some of the files are for
|
||
|
customizing the original kivitendo LESS stuff.
|
||
|
|
||
|
* <b>jquery-ui-overrides.less</b> (overrides original jquery css)
|
||
|
* <b>jquery-ui-overrides.less</b> (overrides original jquery css in jquery.less)
|
||
|
* <b>main-overrides</b> (overrides a lot of kivitendo less/css stuff)
|
||
|
* <b>custom-variables.less</b> (overrides variables in variable.less)
|
||
|
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff)
|
||
| ... | ... | |
|
Therefore it is recommended to edit only these two files:
|
||
|
|
||
|
* <b>custom-variables.less</b> (overrides variables in variable.less)
|
||
|
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff)
|
||
|
* <b>custom.less</b> (overrides in the end all the original kivitendo LESS stuff)
|
||
|
|
||
|
These files can be empty if you do not want to customize the kivitendo CSS
|
||
|
stuff. The original custom files contains only comments and deactivated example
|
||
| css/less/_developing_styles.less | ||
|---|---|---|
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
@import 'variables_color_style';
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// CLASSES FOR DESIGNERS
|
||
|
// --------------------------------------
|
||
|
|
||
|
// Output in designer/developer CSS File (just for developer)
|
||
|
// don't hesitage to deactivate the following code
|
||
|
// these classed are not used in kivitendo
|
||
|
|
||
|
h1::after { content: " @{colorstyle}"; } // display style name
|
||
|
|
||
|
|
||
|
:root {
|
||
|
|
||
|
|
||
|
--gray-standard: @gray-standard;
|
||
|
--gray-superdark: @gray-superdark; // Black
|
||
|
--gray-verydark: @gray-verydark;
|
||
|
--gray-darker: @gray-darker;
|
||
|
--gray-dark: @gray-dark;
|
||
|
--gray-light: @gray-light;
|
||
|
--gray-lighter: @gray-lighter;
|
||
|
--gray-verylight: @gray-verylight;
|
||
|
--gray-superlight: @gray-superlight; // White
|
||
|
|
||
|
--color-standard: @brand-standard;
|
||
|
--color-superlight: @brand-superlight;
|
||
|
--color-verylight: @brand-verylight;
|
||
|
--color-lighter: @brand-lighter;
|
||
|
--color-light: @brand-light;
|
||
|
--color-dark: @brand-dark;
|
||
|
--color-darker: @brand-darker;
|
||
|
--color-verydark: @brand-verydark;
|
||
|
--color-superdark: @brand-superdark;
|
||
|
|
||
|
// --msg-ok-strong: @color-green-strong;
|
||
|
// --msg-ok-light: @color-green-light;
|
||
|
// --msg-error-strong: @color-red-strong;
|
||
|
// --msg-error-light: @color-red-light;
|
||
|
// --msg-hint-strong: @color-blue-strong;
|
||
|
// --msg-hint-light: @color-blue-light;
|
||
|
// --msg-warning-strong: @color-orange-strong;
|
||
|
// --msg-warning-light: @color-orange-light;
|
||
|
--msg-ok-strong: @msg-green-strong;
|
||
|
--msg-ok-light: @msg-green-light;
|
||
|
--msg-error-strong: @msg-red-strong;
|
||
|
--msg-error-light: @msg-red-light;
|
||
|
--msg-hint-strong: @msg-blue-strong;
|
||
|
--msg-hint-light: @msg-blue-light;
|
||
|
--msg-warning-strong: @msg-orange-strong;
|
||
|
--msg-warning-light: @msg-orange-light;
|
||
|
|
||
|
--color-green-strong: @color-green-strong;
|
||
|
--color-green-light: @color-green-light;
|
||
|
--color-red-strong: @color-red-strong;
|
||
|
--color-red-light: @color-red-light;
|
||
|
--color-blue-strong: @color-blue-strong;
|
||
|
--color-blue-light: @color-blue-light;
|
||
|
--color-orange-strong: @color-orange-strong;
|
||
|
--color-orange-light: @color-orange-light;
|
||
|
|
||
|
|
||
|
|
||
|
--spin_60 : spin(@brand-standard, 60);
|
||
|
--spin_120: spin(@brand-standard, 120);
|
||
|
--spin_180: spin(@brand-standard, 180);
|
||
|
--spin_240: spin(@brand-standard, 240);
|
||
|
|
||
|
--style-ocean: @style_ocean;
|
||
|
--style-light_blue: @style_light_blue;
|
||
|
--style-aqua: @style_aqua;
|
||
|
--style-turquoise: @style_turquoise;
|
||
|
--style-pine: @style_pine;
|
||
|
--style-asparagus: @style_asparagus;
|
||
|
--style-petrol: @style_petrol;
|
||
|
--style-salmona: @style_salmona;
|
||
|
--style-salmon: @style_salmon;
|
||
|
--style-tangerine: @style_tangerine;
|
||
|
--style-marascino: @style_marascino;
|
||
|
--style-maroon: @style_maroon;
|
||
|
--style-strawberry: @style_strawberry;
|
||
|
--style-pure_red: @style_pure_red;
|
||
|
--style-old_lemon: @style_old_lemon;
|
||
|
--style-yellow_to_green: @style_yellow_to_green;
|
||
|
--style-eggplant: @style_eggplant;
|
||
|
--style-plum: @style_plum;
|
||
|
--style-grape: @style_grape;
|
||
|
--style-magenta: @style_magenta;
|
||
|
--style-lavender: @style_lavender;
|
||
|
--style-cayenne: @style_cayenne;
|
||
|
--style-mocha: @style_mocha;
|
||
|
--style-cantaloupe: @style_cantaloupe;
|
||
|
--style-dark_brown: @style_dark_brown;
|
||
|
--style-orange_brown: @style_orange_brown;
|
||
|
--style-smack_brown: @style_smack_brown;
|
||
|
--style-green_brown: @style_green_brown;
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
.color-standard { color: var(--color-standard); }
|
||
|
.color-superlight { color: var(--color-superlight); }
|
||
|
.color-verylight { color: var(--color-verylight); }
|
||
|
.color-lighter { color: var(--color-lighter); }
|
||
|
.color-light { color: var(--color-light); }
|
||
|
.color-dark { color: var(--color-dark); }
|
||
|
.color-darker { color: var(--color-darker); }
|
||
|
.color-verydark { color: var(--color-verydark); }
|
||
|
.color-superdark { color: var(--color-superdark); }
|
||
|
|
||
|
.bg-standard { background-color: var(--color-standard); }
|
||
|
.bg-superlight { background-color: var(--color-superlight); }
|
||
|
.bg-verylight { background-color: var(--color-verylight); }
|
||
|
.bg-lighter { background-color: var(--color-lighter); }
|
||
|
.bg-light { background-color: var(--color-light); }
|
||
|
.bg-dark { background-color: var(--color-dark); }
|
||
|
.bg-darker { background-color: var(--color-darker); }
|
||
|
.bg-verydark { background-color: var(--color-verydark); }
|
||
|
.bg-superdark { background-color: var(--color-superdark); }
|
||
|
|
||
|
|
||
|
// Messages
|
||
|
.msg-ok { background-color: var(--msg-ok-light); color: var(--msg-ok-strong); border-color: var(--msg-ok-strong); }
|
||
|
.msg-error { background-color: var(--msg-error-light); color: var(--msg-error-strong); border-color: var(--msg-error-strong); }
|
||
|
.msg-hint { background-color: var(--msg-hint-light); color: var(--msg-hint-strong); border-color: var(--msg-hint-strong); }
|
||
|
.msg-warning { background-color: var(--msg-warning-light); color: var(--msg-warning-strong); border-color: var(--msg-warning-strong); }
|
||
|
// Message Original Colors
|
||
|
.color-ok { background-color: var(--color-green-light); color: var(--color-green-strong); border-color: var(--color-green-strong); }
|
||
|
.color-error { background-color: var(--color-red-light); color: var(--color-red-strong); border-color: var(--color-red-strong); }
|
||
|
.color-hint { background-color: var(--color-blue-light); color: var(--color-blue-strong); border-color: var(--color-blue-strong); }
|
||
|
.color-warning { background-color: var(--color-orange-light); color: var(--color-orange-strong); border-color: var(--color-orange-strong); }
|
||
|
|
||
|
.style-ocean { background-color: var( --style-ocean ); }
|
||
|
.style-light_blue { background-color: var( --style-light_blue ); }
|
||
|
.style-aqua { background-color: var( --style-aqua ); }
|
||
|
.style-turquoise { background-color: var( --style-turquoise ); }
|
||
|
.style-pine { background-color: var( --style-pine ); }
|
||
|
.style-asparagus { background-color: var( --style-asparagus ); }
|
||
|
.style-petrol { background-color: var( --style-petrol ); }
|
||
|
.style-salmona { background-color: var( --style-salmona ); }
|
||
|
.style-salmon { background-color: var( --style-salmon ); }
|
||
|
.style-tangerine { background-color: var( --style-tangerine ); }
|
||
|
.style-marascino { background-color: var( --style-marascino ); }
|
||
|
.style-maroon { background-color: var( --style-maroon ); }
|
||
|
.style-strawberry { background-color: var( --style-strawberry ); }
|
||
|
.style-pure_red { background-color: var( --style-pure_red ); }
|
||
|
.style-old_lemon { background-color: var( --style-old_lemon ); }
|
||
|
.style-yellow_to_green { background-color: var( --style-yellow_to_green ); }
|
||
|
.style-eggplant { background-color: var( --style-eggplant ); }
|
||
|
.style-plum { background-color: var( --style-plum ); }
|
||
|
.style-grape { background-color: var( --style-grape ); }
|
||
|
.style-magenta { background-color: var( --style-magenta ); }
|
||
|
.style-lavender { background-color: var( --style-lavender ); }
|
||
|
.style-cayenne { background-color: var( --style-cayenne ); }
|
||
|
.style-mocha { background-color: var( --style-mocha ); }
|
||
|
.style-cantaloupe { background-color: var( --style-cantaloupe ); }
|
||
|
.style-dark_brown { background-color: var( --style-dark_brown ); }
|
||
|
.style-orange_brown { background-color: var( --style-orange_brown ); }
|
||
|
.style-smack_brown { background-color: var( --style-smack_brown ); }
|
||
|
.style-green_brown { background-color: var( --style-green_brown ); }
|
||
| css/less/admin.less | ||
|---|---|---|
|
top: 0 important;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
div.admin {
|
||
|
margin: 60px 0 0 0 ;
|
||
|
//top: 60px;
|
||
|
padding: 60px 0 0 0 ;
|
||
|
.bg-content ;
|
||
|
|
||
|
h1 {
|
||
|
background-color: #fe5f14 !important;
|
||
|
color: #ffffff;
|
||
|
top: 30px ;
|
||
|
position: fixed;
|
||
|
width: 100% ;
|
||
|
padding: 0.6em 0.5em 0.5em 0.6em;
|
||
|
z-index: 1000;
|
||
|
color: #ffffff;
|
||
|
top: 30px ;
|
||
|
position: fixed;
|
||
|
width: 100% ;
|
||
|
padding: 0.6em 0.5em 0.5em 0.6em;
|
||
|
z-index: 1000;
|
||
|
|
||
|
& + .wrapper {
|
||
|
padding-top: 1.2em;
|
||
|
//margin-top: 1.0em ;
|
||
|
//top: 1.0em;
|
||
|
//&:first-child{
|
||
|
//padding-top: 2.0em;
|
||
|
//}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Login-Form with big logo
|
||
|
|
||
|
.logo {
|
||
|
width: auto;
|
||
|
clear: both;
|
||
|
margin: 3.0em auto 1.0em auto;
|
||
|
padding: 2.0em 0 0 0;
|
||
|
}
|
||
|
|
||
|
.separate-form{
|
||
|
background-color: #ddd ;
|
||
|
border: 1px @gray-standard solid;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
display: block ;
|
||
|
width: 24.0em;
|
||
|
margin: 0 auto ;
|
||
|
padding: 0.7em 0.6em 1.0em 0.6em ;
|
||
|
}
|
||
|
|
||
|
.tabwidget {
|
||
|
//top: 35px ;
|
||
|
padding: 2.4em 0 0 0 !important;
|
||
|
padding: 2.4em 0 0 0 !important;
|
||
|
.ui-tabs-nav{
|
||
|
top: 66px;
|
||
|
top: 66px;
|
||
|
}
|
||
|
.ui-tabs-panel {
|
||
|
padding: 2.0em 1.0em 1.0em 1.0em ;
|
||
|
overflow: hidden;
|
||
|
height: auto;
|
||
|
min-height: 300px ;
|
||
|
padding: 2.0em 1.0em 1.0em 1.0em ;
|
||
|
overflow: hidden;
|
||
|
height: auto;
|
||
|
min-height: 300px ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
& > form{
|
||
|
display: block ;
|
||
|
margin-top: 1px ;
|
||
|
padding-top: 1.2em ;
|
||
|
}
|
||
|
&> form {
|
||
|
//padding-top: 3.8em ;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
.message{
|
||
|
&_error,
|
||
| ... | ... | |
|
&_warning,
|
||
|
&_ok{
|
||
|
//margin-top: 70px ;
|
||
|
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
} // /div.admin
|
||
|
} // /body
|
||
|
|
||
|
|
||
|
|
||
| css/less/buttons.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* BUTTONS (buttons.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS)
|
||
| ... | ... | |
|
// At first we tried to nest the buttons within the form element,
|
||
|
// but it is not possible because some forms do not have a form element
|
||
|
// (e.g. print dialog)
|
||
|
|
||
|
// A lot of buttons are outside of a form, so let be this tag deactivated
|
||
|
//form {
|
||
|
|
||
|
// General
|
||
| ... | ... | |
|
&.wi-wider { width: @input-wi-wider ; }
|
||
|
&.wi-verywide { width: @input-wi-verywide ; }
|
||
|
&.wi-tiny {
|
||
|
width: auto ;
|
||
|
padding: 0.16em 0.2em 0.1em 0.2em;
|
||
|
margin: -0.3em 0 0 0.2em;
|
||
|
//float: right;
|
||
|
display: inline-block;
|
||
|
font-size: 84% ;
|
||
|
min-height: 23px;
|
||
|
max-height: 23px;
|
||
|
width: auto ;
|
||
|
padding: 0.16em 0.2em 0.1em 0.2em;
|
||
|
margin: -0.3em 0 0 0.2em;
|
||
|
//float: right;
|
||
|
display: inline-block;
|
||
|
font-size: 84% ;
|
||
|
min-height: 23px;
|
||
|
max-height: 23px;
|
||
|
}
|
||
|
&.wi-verytiny{
|
||
|
font-size: 8pt !important;
|
||
|
padding: 0.0em 0.3em 0.1em 0.3em;
|
||
|
display: inline-block;
|
||
|
min-height: 17px;
|
||
|
max-height: 17px;
|
||
|
font-size: 8pt !important;
|
||
|
padding: 0.0em 0.3em 0.1em 0.3em;
|
||
|
display: inline-block;
|
||
|
min-height: 17px;
|
||
|
max-height: 17px;
|
||
|
}
|
||
|
|
||
|
|
||
|
} // /input[type="button etc."] /button
|
||
|
} // /input[type="button etc."]
|
||
|
|
||
|
button.icon{
|
||
|
padding: 0 ;
|
||
|
margin: 0 ;
|
||
|
background: none !important;
|
||
|
border: none;
|
||
|
display: inline-block;
|
||
|
padding: 0 ;
|
||
|
margin: 0 ;
|
||
|
background: none !important;
|
||
|
border: 0 !important;
|
||
|
display: inline-block;
|
||
|
img { vertical-align: middle ; }
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
input[type="button"].button,
|
||
|
button[type="submit"],
|
||
|
button[type="button"] {
|
||
|
color: @btn-default-color ;
|
||
|
background-color: @btn-default-bg;
|
||
|
border-color: @btn-default-border ;
|
||
|
color: @button-strong-color ;
|
||
|
background-color: @button-strong-bg;
|
||
|
border: @button-strong-border ;
|
||
|
&:hover{
|
||
|
color: @btn-default-hover-color ;
|
||
|
background-color: @btn-default-hover-bg;
|
||
|
border-color: @btn-default-hover-border ;
|
||
|
color: @button-strong-hover-color ;
|
||
|
background-color: @button-strong-hover-bg;
|
||
|
border: @button-strong-hover-border ;
|
||
|
}
|
||
|
&:active,
|
||
|
&:focus{
|
||
|
color: @btn-default-active-color ;
|
||
|
background-color: @btn-default-active-bg;
|
||
|
border-color: @btn-default-active-border ;
|
||
|
color: @button-strong-active-color ;
|
||
|
background-color: @button-strong-active-bg;
|
||
|
border: @button-strong-active-border ;
|
||
|
}
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
input[type="reset"].neutral,
|
||
|
button.neutral,
|
||
|
button[type="reset"] {
|
||
|
color: @btn-neutral-color ;
|
||
|
background-color: @btn-neutral-bg;
|
||
|
border-color: @btn-neutral-border ;
|
||
|
color: @button-neutral-color ;
|
||
|
background-color: @button-neutral-bg;
|
||
|
border: @button-neutral-border ;
|
||
|
&:hover {
|
||
|
color: @btn-neutral-hover-color ;
|
||
|
background-color: @btn-neutral-hover-bg;
|
||
|
border-color: @btn-neutral-hover-border ;
|
||
|
color: @button-neutral-hover-color ;
|
||
|
background-color: @button-neutral-hover-bg;
|
||
|
border: @button-neutral-hover-border ;
|
||
|
}
|
||
|
&:active,
|
||
|
&:focus {
|
||
|
color: @btn-neutral-active-color;
|
||
|
background-color: @btn-neutral-active-bg;
|
||
|
border-color: @btn-neutral-active-border ;
|
||
|
color: @button-neutral-active-color;
|
||
|
background-color: @button-neutral-active-bg;
|
||
|
border: @button-neutral-active-border ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Toggle-Button (e.g. for position details in tables)
|
||
|
&.positions {
|
||
|
padding-right: 1.2em ;
|
||
|
// ::after does not work in buttons
|
||
|
// input#cb_show_details {
|
||
|
// &::after {
|
||
|
// content: "▸" !important ;
|
||
|
// }
|
||
|
// }
|
||
|
// input#cb_hide_details::after {
|
||
|
// content: "▾" !important ;
|
||
|
// }
|
||
|
} // /.positions
|
||
|
|
||
|
} // /input[type="*"].neutral
|
||
|
|
||
|
// PENDENT: Neu
|
||
|
input[type="button"]{
|
||
|
&.below{
|
||
|
clear: both !important;
|
||
|
float: none;
|
||
|
margin-top: 0.3em;
|
||
|
//margin-top: 0.3em;
|
||
|
overflow: hidden ;
|
||
|
}
|
||
|
}
|
||
| ... | ... | |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// LINKS DESIGNED AS BUTTONS
|
||
|
// They may be placed inside or outside a form
|
||
| ... | ... | |
|
&.wi-verywide { min-width: @input-wi-verywide ; }
|
||
|
// Tiny button (one letter button)
|
||
|
&.wi-tiny {
|
||
|
display: inline-block;
|
||
|
width: auto ;
|
||
|
padding: 0.16em 0.2em 0.1em 0.2em;
|
||
|
margin: -0.3em 0 0 0.2em;
|
||
|
font-size: 84% ;
|
||
|
display: inline-block;
|
||
|
width: auto ;
|
||
|
padding: 0.16em 0.2em 0.1em 0.2em;
|
||
|
margin: -0.3em 0 0 0.2em;
|
||
|
font-size: 84% ;
|
||
|
}
|
||
|
|
||
|
// Toggle (for filters e.g.)
|
||
|
&.toggle {
|
||
|
background-color: @controlpanel-bg-color !important ;
|
||
|
|
||
|
&.off::after{
|
||
|
content: " ▸";
|
||
|
padding-right: 1.0em;
|
||
| ... | ... | |
|
border-bottom: none;
|
||
|
border-bottom-left-radius: 0px ;
|
||
|
border-bottom-right-radius: 0px ;
|
||
|
&:hover {
|
||
|
border-top: @controlpanel-border !important ;
|
||
|
border-right: @controlpanel-border !important ;
|
||
|
border-bottom: 0 !important;
|
||
|
border-left: @controlpanel-border !important ;
|
||
|
}
|
||
|
}
|
||
|
&:hover{
|
||
|
background-color: @btn-neutral-bg !important;
|
||
|
border-color: @btn-neutral-border !important ;
|
||
|
color: @btn-neutral-color;
|
||
|
background-color: @button-neutral-bg !important;
|
||
|
border: @controlpanel-border !important ;
|
||
|
color: @button-neutral-color;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
} // /.toggle
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// Container fuer Buttons
|
||
|
div.buttons {
|
||
|
padding: 1.0em ;
|
||
|
clear: left ;
|
||
|
display: block;
|
||
|
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails
|
||
|
padding: 1.0em ;
|
||
|
clear: left ;
|
||
|
display: block;
|
||
|
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
||
|
&.positions {
|
||
|
margin: 0 0 -2.0em 26.0em;
|
||
|
padding: 0em;
|
||
|
margin: 0 0 -1.9em 26.0em;
|
||
|
padding: 0em;
|
||
|
label.button.neutral,
|
||
|
input.positions {
|
||
|
border-bottom-left-radius: 0 !important;
|
||
|
border-bottom-right-radius: 0 !important;
|
||
|
padding-bottom: 0.6em !important;
|
||
|
margin-bottom: -0.8em !important;
|
||
|
background: none !important;
|
||
|
border-bottom: none !important;
|
||
|
}
|
||
|
input.positions{
|
||
|
|
||
|
}
|
||
|
}
|
||
|
&.below {
|
||
|
padding: 0 ;
|
||
|
margin: 0 ;
|
||
|
padding: 0 ;
|
||
|
margin: 0 ;
|
||
|
}
|
||
|
}
|
||
|
.col > .buttons,
|
||
|
.wrapper * .buttons {
|
||
|
padding: 1.0em 1.0em 1.0em 0 !important;
|
||
|
padding: 1.0em 1.0em 1.0em 0 !important;
|
||
|
}
|
||
|
|
||
|
|
||
| ... | ... | |
|
}
|
||
|
input[type="button"].button-image{
|
||
|
&.delete {
|
||
|
background-image: url("image/cross.png");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: 0 0;
|
||
|
color: #fff;
|
||
|
background-color:transparent;
|
||
|
border-color: none;
|
||
|
border-width: 0;
|
||
|
background-image: url("image/cross.png");
|
||
|
background-repeat: no-repeat;
|
||
|
background-position: 0 0;
|
||
|
color: #fff;
|
||
|
background-color: transparent;
|
||
|
border-color: none;
|
||
|
border-width: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
| css/less/common.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* COMMON PROPERTIES (common.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// COMMON PROPERTIES
|
||
| ... | ... | |
|
//behavior:url("csshover.htc") ;
|
||
|
padding: 0;
|
||
|
margin: 0 ;
|
||
|
font-size: @font-size-smaller ;
|
||
|
}
|
||
|
|
||
|
|
||
| ... | ... | |
|
div,
|
||
|
p,
|
||
|
span,
|
||
|
table,
|
||
|
th,
|
||
|
td,
|
||
|
input,
|
||
|
textarea,
|
||
|
select,
|
||
|
button,
|
||
|
a.button,
|
||
|
table,
|
||
|
col,
|
||
|
th,
|
||
|
td
|
||
|
a.button
|
||
|
{
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
| ... | ... | |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// CLEARFIX
|
||
|
// --------------------------------------
|
||
| css/less/control_panels.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* CONTROL PANELS (control_panels.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// CONTROL PANELS
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// General Class for all control panels
|
||
|
.control-panel {
|
||
|
border: @controlpanel-border;
|
||
|
background-color: @controlpanel-bg;
|
||
|
border: @controlpanel-border !important;
|
||
|
background-color: @controlpanel-bg-color;
|
||
|
background: @controlpanel-bg-style ;
|
||
|
border-radius: @controlpanel-radius;
|
||
|
color: red ;
|
||
|
//color: red ;
|
||
|
overflow: hidden ;
|
||
|
|
||
|
span.label{
|
||
|
padding-right: 0.6em ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// FORM-ADDITION
|
||
|
// --------------------------------------
|
||
|
// Settings for including fields in a report
|
||
|
.form-addition{
|
||
|
padding: @controlpanel-padding-bold ;
|
||
|
padding: @controlpanel-padding-bold !important ;
|
||
|
margin: @controlpanel-margin !important ;
|
||
|
width: auto !important ;
|
||
|
display: inline-block ;
|
||
|
|
||
|
h3{
|
||
|
color: @controlpanel-h3-color !important;
|
||
|
font-size: @controlpanel-h3-size !important;
|
||
|
font-weight: @controlpanel-h3-weight !important;
|
||
|
margin: 0.3em 0 0.1em 0 !important;
|
||
|
padding: 0 ;
|
||
|
// color: @controlpanel-h3-color !important;
|
||
|
// font-size: @controlpanel-h3-size !important;
|
||
|
// font-weight: @controlpanel-h3-weight !important;
|
||
|
margin: 0.3em 0 0.1em 0 !important;
|
||
|
padding: 0 ;
|
||
|
}
|
||
|
h4{
|
||
|
color: @controlpanel-h4-color !important;;
|
||
|
font-size: @controlpanel-h4-size;
|
||
|
font-weight: @controlpanel-h4-weight;
|
||
|
font-style: @controlpanel-h4-style;
|
||
|
color: @controlpanel-h4-color !important;;
|
||
|
font-size: @controlpanel-h4-size;
|
||
|
font-weight: @controlpanel-h4-weight;
|
||
|
font-style: @controlpanel-h4-style;
|
||
|
}
|
||
|
|
||
|
div.list{
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// SELECT ITEM
|
||
|
// --------------------------------------
|
||
|
// for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
|
||
|
// Panel for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
|
||
|
.select-item{
|
||
|
display: inline-block ;
|
||
|
width: auto ;
|
||
|
height: auto;
|
||
|
padding: @controlpanel-select-item-padding ;
|
||
|
margin: @controlpanel-margin ;
|
||
|
border: @controlpanel-border ;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
background-color: @controlpanel-bg ;
|
||
|
color: @controlpanel-color ;
|
||
|
font-size: @font-size-smaller ;
|
||
|
border: @controlpanel-border ;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
background-color: @controlpanel-bg-color ;
|
||
|
background: @_bg_style_button ; // PENDENT:
|
||
|
|
||
|
input,
|
||
|
select{
|
||
|
margin-left: 0.6em ;
|
||
| ... | ... | |
|
select { margin: -0.3em 0 0 0; }
|
||
|
}
|
||
|
}
|
||
|
|
||
|
} // /.select-item
|
||
|
|
||
|
// Select function within standard wrapper
|
||
|
.ui-tabs-panel > .select-item {
|
||
|
margin: @contentbox-margin;
|
||
|
margin: @contentbox-margin;
|
||
|
vertical-align: top ;
|
||
|
|
||
|
}
|
||
|
.wrapper > .select-item {
|
||
|
margin: 0.8em 0 1.0em 0 ;
|
||
| ... | ... | |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// FILTER-TOGGLE-PANEL
|
||
|
// --------------------------------------
|
||
|
// for togglin a filter panel
|
||
|
// see inlcude file /templates/webpages/common/filter-toggle.html
|
||
|
.toggle_panel.control-panel{
|
||
|
border: none !important;
|
||
|
background: none !important;
|
||
|
border-radius: 0 !important;
|
||
|
overflow: visible !important;
|
||
|
}
|
||
|
.toggle_panel{
|
||
|
& > a.button.toggle {
|
||
|
padding: 0.2em 0 0.2em 1.4em;
|
||
|
padding: 0.2em 0 0.2em 1.4em;
|
||
|
&:hover {
|
||
|
background-color: @controlpanel-bg !important;
|
||
|
text-decoration: underline ;
|
||
|
background-color: @controlpanel-bg-color !important;
|
||
|
text-decoration: underline ;
|
||
|
}
|
||
|
}
|
||
|
span.summary {
|
||
|
font-size: @font-size-small;
|
||
|
font-size: @font-size-small;
|
||
|
padding-left: 2.0em;
|
||
|
color: @gray-mediumdark;
|
||
|
color: @controlpanel-color;
|
||
|
}
|
||
|
.toggle_panel_block {
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
padding: @controlpanel-padding ;
|
||
|
margin: 2em 1em 0em 0; ;
|
||
|
margin: 2em 1em 0em 0; ;
|
||
|
background-color: @controlpanel-bg-color;
|
||
|
|
||
|
border: @controlpanel-border ;
|
||
|
border-bottom-left-radius: @controlpanel-radius ;
|
||
|
border-bottom-right-radius: @controlpanel-radius ;
|
||
|
border-top-right-radius: @controlpanel-radius ;
|
||
|
margin-top: -1px ;
|
||
|
|
||
|
.buttons{
|
||
|
clear: left ;
|
||
|
padding: 0 !important;
|
||
|
margin: 0;
|
||
|
clear: left ;
|
||
|
padding: 0 !important;
|
||
|
margin: 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// PENDENT: ggf. anpassen an Controlpanel-Farbtoene
|
||
|
.tbl-horizontal {
|
||
|
th{ color: @brand-darkest ; }
|
||
|
//th{ color: @brand-superdark ; }
|
||
|
}
|
||
|
|
||
|
}
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// Panel for entering data via jQuery-Scripts etc.
|
||
|
#content .input-panel {
|
||
|
overflow: hidden;
|
||
|
padding: @controlpanel-padding ;
|
||
|
display: inline-block;
|
||
|
overflow: hidden ;
|
||
|
padding: @controlpanel-padding-narrow ;
|
||
|
margin: @margin-from-wrapper ;
|
||
|
background-color: @controlpanel-bg;
|
||
|
background-color: @controlpanel-bg-color;
|
||
|
border: @controlpanel-border ;
|
||
|
border-bottom-left-radius: @controlpanel-radius ;
|
||
|
border-bottom-right-radius: @controlpanel-radius ;
|
||
|
border-top-right-radius: @controlpanel-radius ;
|
||
|
border-top-left-radius: @controlpanel-radius ;
|
||
|
width: auto ;
|
||
|
min-width: 30% ;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
// border-bottom-left-radius: @controlpanel-radius ;
|
||
|
// border-bottom-right-radius: @controlpanel-radius ;
|
||
|
// border-top-right-radius: @controlpanel-radius ;
|
||
|
// border-top-left-radius: @controlpanel-radius ;
|
||
|
width: auto ;
|
||
|
min-width: 30% ;
|
||
|
//max-width: 70% ;
|
||
|
display: inline-block;
|
||
|
|
||
|
& > h3 {
|
||
|
margin-top: 0 ;
|
||
|
}
|
||
|
p {
|
||
|
font-size: @font-size-smaller ;
|
||
|
margin: 0 0 0.4em 0 ;
|
||
|
font-size: @font-size-smaller ;
|
||
|
margin: 0 0 0.4em 0 ;
|
||
|
}
|
||
|
table.condensed {
|
||
|
margin-bottom: 0.1em;
|
||
|
caption { padding-top: 0.1em ; }
|
||
|
td span.label {
|
||
|
padding-right: 0.6em ;
|
||
|
&.above{ margin-bottom: 0em ; }
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#content .ui-tabs-panel > .input-panel { margin-left: @margin-left-from-content }
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// PAGINATE
|
||
|
// --------------------------------------
|
||
|
.paginate{
|
||
|
.paginate {
|
||
|
display: inline-block ;
|
||
|
width: auto ;
|
||
|
height: auto;
|
||
|
padding: 0;
|
||
|
height: auto ;
|
||
|
padding: 0 ;
|
||
|
margin: @controlpanel-margin ;
|
||
|
border: @controlpanel-border;
|
||
|
border: @controlpanel-border ;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
background-color: @controlpanel-bg;
|
||
|
background-color: @controlpanel-bg-color ;
|
||
|
color: @controlpanel-color ;
|
||
|
|
||
|
& > a,
|
||
|
& > span {
|
||
|
padding: 0.4em 0.6em !important;
|
||
|
margin-top: -1px;
|
||
|
padding: 0.4em 0.6em !important ;
|
||
|
margin-top: -1px ;
|
||
|
}
|
||
|
|
||
|
.paginate-prev {
|
||
|
display: inline-block ;
|
||
|
&::before{ content: "◄"; }
|
||
|
&::before{ content: "◄" ; }
|
||
|
&:hover{
|
||
|
border-bottom-left-radius: @controlpanel-radius;
|
||
|
border-top-left-radius: @controlpanel-radius;
|
||
|
border-bottom-left-radius: @controlpanel-radius ;
|
||
|
border-top-left-radius: @controlpanel-radius ;
|
||
|
}
|
||
|
}
|
||
|
.paginate-next {
|
||
|
display: inline-block ;
|
||
|
&::after{ content: "►"; }
|
||
|
&:hover{
|
||
|
border-bottom-right-radius: @controlpanel-radius;
|
||
|
border-top-right-radius: @controlpanel-radius;
|
||
|
border-bottom-right-radius: @controlpanel-radius ;
|
||
|
border-top-right-radius: @controlpanel-radius ;
|
||
|
}
|
||
|
}
|
||
|
.paginate-page {
|
||
| ... | ... | |
|
&.right { float: right; }
|
||
|
|
||
|
border: @controlpanel-border;
|
||
|
border-radius: 0.2em ;
|
||
|
background-color: @controlpanel-bg;
|
||
|
border-radius: @controlpanel-radius ;
|
||
|
background-color: @controlpanel-bg-color;
|
||
|
margin: 0.8em 2.0em 0 1.2em !important;
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// DEZIDIERTE ELEMENTE
|
||
|
// --------------------------------------
|
||
|
|
||
|
.control-panel select#contact_cp_id {
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
| css/less/custom.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* CUSTOM LESS STUFF (custom.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// CUSTOM LESS STUFF (ONLY FOR OVERRIDES OF THE STANDARD-KIVITENDO-STUFF)
|
||
| ... | ... | |
|
// This is just an exemple
|
||
|
// Do run "lessc style.less ../style.css" in your terminal session with cursor on the folder /css/less
|
||
|
|
||
|
/* Custom overrides */
|
||
|
|
||
|
/*
|
||
|
table.tbl-horizontal {
|
||
|
display: table ;
|
||
|
background-color: #ccc;
|
||
|
border-bottom: 12px #ccc solid ;
|
||
|
border-top-left-radius: 0 ;
|
||
|
border-top-right-radius: 0 ;
|
||
|
border-bottom-left-radius: 6px ;
|
||
|
border-bottom-right-radius: 6px ;
|
||
|
|
||
|
& > caption{
|
||
|
color: #ffffff !important;
|
||
|
background-color: @gray-mediumdark;
|
||
|
padding-left: 0.8em;
|
||
|
border-top-left-radius: 6px ;
|
||
|
border-top-right-radius: 6px ;
|
||
|
//margin: -24px -12px 0.6em -12px ;
|
||
|
& > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
|
||
|
}
|
||
|
th{ padding-left: 0.3em; }
|
||
|
td{ padding-right: 0.3em; }
|
||
|
tbody { border-top: 8px #ccc solid; }
|
||
|
&.checkered {
|
||
|
tbody { border-top: none ; }
|
||
|
border-bottom: none;
|
||
|
}
|
||
|
tbody > tr > td:first-child,
|
||
|
tbody > tr > th:first-child,
|
||
|
thead > tr > th:first-child{
|
||
|
padding-left: 1.0em ;
|
||
|
}
|
||
|
tbody > tr:first-child {
|
||
|
& > th { padding-top: 0.5em ; }
|
||
|
& > td { padding-top: 0.5em ; }
|
||
|
}
|
||
|
th.caption{
|
||
|
color: #fff !important;
|
||
|
background-color: @gray-mediumdark;
|
||
|
padding: 0.4em 0 0.3em 0.8em;
|
||
|
border-top: 6px solid #ccc;
|
||
|
border-bottom: 8px solid #ccc;
|
||
|
margin-bottom: 0.6em ;
|
||
|
//margin: -24px -12px 0.6em -18px ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.col{
|
||
|
padding-bottom: 0.4em ;
|
||
|
|
||
|
& > table.tbl-horizontal {
|
||
|
margin-right: 0 !important;
|
||
|
//border-top-left-radius: 0 ;
|
||
|
//border-top-right-radius: 0 ;
|
||
|
border-radius: 0 ;
|
||
|
padding-bottom: 0 ;
|
||
|
|
||
|
caption{
|
||
|
border-top-left-radius: 0 ;
|
||
|
border-top-right-radius: 0 ;
|
||
|
}
|
||
|
}
|
||
|
& > table.tbl-horizontal:first-child{
|
||
|
border-top-left-radius: 0 ;
|
||
|
border-top-right-radius: 0 ;
|
||
|
border-bottom-left-radius: 0 ;
|
||
|
border-bottom-right-radius: 0 ;
|
||
|
margin-bottom: 0 ;
|
||
|
caption{
|
||
|
border-top-left-radius: 6px ;
|
||
|
border-top-right-radius: 6px ;
|
||
|
}
|
||
|
}
|
||
|
& > table.tbl-horizontal:last-child{
|
||
|
border-bottom-left-radius: 6px ;
|
||
|
border-bottom-right-radius: 6px ;
|
||
|
margin-bottom: 0 ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.cke_editable{
|
||
|
margin-left: 0.0em !important;
|
||
|
}
|
||
|
*/
|
||
|
// Custom overrides
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// DISABLE CAPTIONS IN HORIZONTAL TABLES
|
||
|
// --------------------------------------
|
||
|
// Captions are good. It is a nice guidance thru Kivitendo and captions also force
|
||
|
// programmers
|
||
|
|
||
|
|
||
|
|
||
|
//table.tbl-horizontal {
|
||
|
// caption,
|
||
|
// th.caption,
|
||
|
// td.caption{
|
||
|
// display: none ; // instead of: table-caption
|
||
|
// }
|
||
|
//}
|
||
|
//
|
||
|
//div.wrapper.bordered {
|
||
|
// padding: 0.6em 0 0.2em 0.4em;
|
||
|
//
|
||
|
// &::before{
|
||
|
// content: "Detail Information"; //instead of caption in toggled wrapper
|
||
|
// z-index: 9000 ;
|
||
|
// }
|
||
|
// .tbl-horizontal{ display: none ; }
|
||
|
// .toggles { margin-top: -3px; }
|
||
|
// .toggles.max {
|
||
|
// width: 100%;
|
||
|
// z-index: 9001 ;
|
||
|
// margin-top: -17px;
|
||
|
// text-align: right;
|
||
|
// display: block;
|
||
|
// margin-right: 10px;
|
||
|
// a.toggle.max{
|
||
|
// width: 100%;
|
||
|
// background-position: right center;
|
||
|
// }
|
||
|
// }
|
||
|
//}
|
||
|
// /DISABLE CAPTIONS IN HORIZONTAL TABLES
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//table.tbl-horizontal {
|
||
|
// display: table ;
|
||
|
// background-color: #ccc;
|
||
|
// border-bottom: 12px #ccc solid ;
|
||
|
// border-top-left-radius: 0 ;
|
||
|
// border-top-right-radius: 0 ;
|
||
|
// border-bottom-left-radius: @controlpanel-radius ;
|
||
|
// border-bottom-right-radius: @controlpanel-radius ;
|
||
|
//
|
||
|
// & > caption{
|
||
|
// color: #ffffff !important;
|
||
|
// background-color: @gray-dark;
|
||
|
// padding-left: 0.8em;
|
||
|
// border-top-left-radius: @controlpanel-radius ;
|
||
|
// border-top-right-radius: @controlpanel-radius ;
|
||
|
// //margin: -24px -12px 0.6em -12px ;
|
||
|
// & > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
|
||
|
// }
|
||
|
// th{ padding-left: 0.3em; }
|
||
|
// td{ padding-right: 0.3em; }
|
||
|
// tbody { border-top: 8px #ccc solid; }
|
||
|
// &.checkered {
|
||
|
// tbody { border-top: none ; }
|
||
|
// border-bottom: none;
|
||
|
// }
|
||
|
// tbody > tr > td:first-child,
|
||
|
// tbody > tr > th:first-child,
|
||
|
// thead > tr > th:first-child{
|
||
|
// padding-left: 1.0em ;
|
||
|
// }
|
||
|
// tbody > tr:first-child {
|
||
|
// & > th { padding-top: 0.5em ; }
|
||
|
// & > td { padding-top: 0.5em ; }
|
||
|
// }
|
||
|
// th.caption{
|
||
|
// color: #fff !important;
|
||
|
// background-color: @gray-dark;
|
||
|
// padding: 0.4em 0 0.3em 0.8em;
|
||
|
// border-top: 6px solid #ccc;
|
||
|
// border-bottom: 8px solid #ccc;
|
||
|
// margin-bottom: 0.6em ;
|
||
|
// //margin: -24px -12px 0.6em -18px ;
|
||
|
// }
|
||
|
//}
|
||
|
//
|
||
|
//.col{
|
||
|
// padding-bottom: 0.4em ;
|
||
|
//
|
||
|
// & > table.tbl-horizontal {
|
||
|
// margin-right: 0 !important;
|
||
|
// //border-top-left-radius: 0 ;
|
||
|
// //border-top-right-radius: 0 ;
|
||
|
// border-radius: 0 ;
|
||
|
// padding-bottom: 0 ;
|
||
|
//
|
||
|
// caption{
|
||
|
// border-top-left-radius: 0 ;
|
||
|
// border-top-right-radius: 0 ;
|
||
|
// }
|
||
|
// }
|
||
|
// & > table.tbl-horizontal:first-child{
|
||
|
// border-top-left-radius: 0 ;
|
||
|
// border-top-right-radius: 0 ;
|
||
|
// border-bottom-left-radius: 0 ;
|
||
|
// border-bottom-right-radius: 0 ;
|
||
|
// margin-bottom: 0 ;
|
||
|
// caption{
|
||
|
// border-top-left-radius: @controlpanel-radius ;
|
||
|
// border-top-right-radius: @controlpanel-radius ;
|
||
|
// }
|
||
|
// }
|
||
|
// & > table.tbl-horizontal:last-child{
|
||
|
// border-bottom-left-radius: @controlpanel-radius ;
|
||
|
// border-bottom-right-radius: @controlpanel-radius ;
|
||
|
// margin-bottom: 0 ;
|
||
|
// }
|
||
|
//}
|
||
|
//
|
||
|
//.cke_editable{
|
||
|
// margin-left: 0.0em !important;
|
||
|
//}
|
||
|
|
||
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// Centered Aligned Tables
|
||
|
// --------------------------------------
|
||
|
// Do everybody a favor: do not activate it
|
||
|
|
||
|
//table.tbl-list{
|
||
|
// margin: 0 auto 1.0em auto;
|
||
|
//}
|
||
| css/less/custom_less_variables.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* CUSTOM VARIABLES (custom_variables.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS)
|
||
|
//
|
||
|
// ----------------------------------------------------------------------------
|
||
|
// DESCRIPTION: Place your custom variables here
|
||
|
// For more information about variables see variables.less
|
||
|
// Copy variables from variable.less into this files here
|
||
|
// Do not change variables and less stuff in the original source files
|
||
|
// then you will be happy with your git work
|
||
|
//
|
||
|
// CONTENTS:
|
||
|
// - SUBJECT
|
||
|
// - - My override variables
|
||
|
// - - My own variables
|
||
|
// ----------------------------------------------------------------------------
|
||
|
|
||
|
|
||
|
//
|
||
|
// **********************************
|
||
|
// MY OVERRIDE VARIABLES
|
||
|
// **********************************
|
||
|
|
||
|
|
||
|
// -----------------------
|
||
|
// BORDER-COLORS
|
||
|
// -----------------------
|
||
|
// Change (or darken!) the borders colors if they are looking to fancy
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
//
|
||
|
// **********************************
|
||
|
// MY SPECIAL VARIABLES
|
||
|
// **********************************
|
||
|
|
||
|
//@my-class-padding: 0.2em ; // just an example
|
||
| css/less/developing.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* DEVELOPING (developing.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// Developing-Section
|
||
| ... | ... | |
|
body.developing{
|
||
|
|
||
|
&>header{
|
||
|
background-color: @h1-bg;
|
||
|
background-color: @brand-h1-bg;
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
h1{
|
||
|
float: left;
|
||
|
color: @h1-color ;
|
||
|
color: @brand-h1-color ;
|
||
|
padding: 1.0em;
|
||
|
}
|
||
|
nav{
|
||
| ... | ... | |
|
p.picture{
|
||
|
background-color: #fff;
|
||
|
padding: 0.8em;
|
||
|
border: 1px @gray-medium solid;
|
||
|
border: 1px @gray-standard solid;
|
||
|
display: inline-block;
|
||
|
width: auto;
|
||
|
}
|
||
| ... | ... | |
|
//border: 1px black solid ;
|
||
|
display: block;
|
||
|
overflow: visible;
|
||
|
border-bottom: 1px @gray-mediumdark solid ;
|
||
|
border-bottom: 1px @gray-dark solid ;
|
||
|
}
|
||
|
tr:last-child td { border: none ;}
|
||
|
|
||
| ... | ... | |
|
|
||
|
} // /.wrapper
|
||
|
|
||
|
// Buttons
|
||
|
// Action SOFT/NEUTRAL (no submission to server page)
|
||
|
input[type="submit"],
|
||
|
input[type="button"],
|
||
|
input[type="button"].button,
|
||
|
button[type="submit"],
|
||
|
button[type="button"],
|
||
|
a.button {
|
||
|
color: @button-strong-color;
|
||
|
background-color: @button-strong-bg;
|
||
|
border: @button-strong-border;
|
||
|
|
||
|
&.hover{
|
||
|
color: @button-strong-hover-color;
|
||
|
background-color: @button-strong-hover-bg;
|
||
|
border: @button-strong-hover-border;
|
||
|
}
|
||
|
&.active{
|
||
|
color: @button-strong-active-color;
|
||
|
background-color: @button-strong-active-bg;
|
||
|
border: @button-strong-active-border;
|
||
|
}
|
||
|
}
|
||
|
// Action SOFT/NEUTRAL (no submission to server page)
|
||
|
input[type="button"].neutral,
|
||
|
input[type="submit"].neutral,
|
||
|
input[type="reset"],
|
||
|
input[type="reset"].neutral,
|
||
|
button.neutral,
|
||
|
button[type="reset"] {
|
||
|
color: @button-neutral-color ;
|
||
|
background-color: @button-neutral-bg;
|
||
|
border: @button-neutral-border ;
|
||
|
&.neutral-hover {
|
||
|
color: @button-neutral-hover-color ;
|
||
|
background-color: @button-neutral-hover-bg;
|
||
|
border: @button-neutral-hover-border ;
|
||
|
}
|
||
|
&.neutral-active,
|
||
|
&.neutral-focus {
|
||
|
color: @button-neutral-active-color;
|
||
|
background-color: @button-neutral-active-bg;
|
||
|
border: @button-neutral-active-border ;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
} // /body.developing
|
||
| css/less/developing_demo.less | ||
|---|---|---|
|
/* ------------------------------------------------------------- */
|
||
|
/* DEVELOPING DEMO (developing_demo.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
//
|
||
|
// DEVELOPERS DEMO
|
||
| ... | ... | |
|
// ----------------------------------------------------------------------------
|
||
|
|
||
|
|
||
|
@import 'variables';
|
||
|
@import 'variables.less';
|
||
|
|
||
|
// --------------
|
||
|
// Grey shades
|
||
|
.gray-darker { background-color: @gray-darker }
|
||
|
.gray-dark { background-color: @gray-dark }
|
||
|
.gray-mediumdark { background-color: @gray-mediumdark }
|
||
|
.gray { background-color: @gray }
|
||
|
.gray-medium { background-color: @gray-medium }
|
||
|
.gray-light { background-color: @gray-light }
|
||
|
.gray-lighter { background-color: @gray-lighter }
|
||
|
.gray-morelighter { background-color: @gray-morelighter }
|
||
|
.gray-darker { background-color: @gray-darker }
|
||
|
.gray-verydark { background-color: @gray-verydark }
|
||
|
.gray-dark { background-color: @gray-dark }
|
||
|
.gray-standard { background-color: @gray-standard }
|
||
|
.gray-light { background-color: @gray-light }
|
||
|
.gray-lighter { background-color: @gray-lighter }
|
||
|
.gray-verylight { background-color: @gray-verylight }
|
||
|
.gray-superlight { background-color: @gray-superlight }
|
||
|
.gray-superlight{ background-color: @gray-superlight }
|
||
|
// --------------
|
||
|
// Divers Color Specications
|
||
|
// for message and other coloured stuff
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// SCAFFOLDING
|
||
|
// --------------------------------------
|
||
|
.body-bg { background-color: @body-bg } // general
|
||
|
.body-bg { background-color: @body-bg } // general PENDENT: obsolete
|
||
|
.content-bg { background-color: @content-bg } // background first tabs
|
||
Auch abrufbar als: Unified diff
css/less -> Geaenderte & Neue Less-Dateien