Revision 1b62523f
Von Hans P. Schlaepfer vor etwa 4 Jahren hinzugefügt
| css/less/OBSOLETE.less | ||
|---|---|---|
| 1 |
// This file is not effacious. It is intended to delete it in the end. |
|
| 2 |
// Nicht gefundene CSS-Klassen und IDs |
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
// -------------------------------------- |
|
| 7 |
// FORMER MAIN.LESS |
|
| 8 |
// -------------------------------------- |
|
| 9 |
|
|
| 10 |
|
|
| 11 |
// OBSOLETE: gibt es nicht |
|
| 12 |
body.admin > h1{
|
|
| 13 |
top: 21px; |
|
| 14 |
} |
|
| 15 |
|
|
| 16 |
// PENDENT: obsolete? |
|
| 17 |
body.menu {
|
|
| 18 |
color: #000000; |
|
| 19 |
} |
|
| 20 |
|
|
| 21 |
|
|
| 22 |
|
|
| 23 |
// PENDENT: welche Selektoren??? |
|
| 24 |
.accountlistheading {
|
|
| 25 |
padding: 0.3em; |
|
| 26 |
color: #006400; |
|
| 27 |
font-weight: bold; |
|
| 28 |
text-align: left; |
|
| 29 |
background-color: #EBEBEB; |
|
| 30 |
} |
|
| 31 |
|
|
| 32 |
|
|
| 33 |
.link_separator {
|
|
| 34 |
margin-left: 6px; |
|
| 35 |
margin-right: 6px; |
|
| 36 |
} |
|
| 37 |
|
|
| 38 |
span.toggle_selected {
|
|
| 39 |
font-weight: bold; |
|
| 40 |
} |
|
| 41 |
|
|
| 42 |
|
|
| 43 |
// Infos ueber Suchergebnissen |
|
| 44 |
div.info{
|
|
| 45 |
padding: 1.0em; |
|
| 46 |
span.info-detail{
|
|
| 47 |
margin: 0 5.0em 0 0; |
|
| 48 |
} |
|
| 49 |
} |
|
| 50 |
|
|
| 51 |
|
|
| 52 |
|
|
| 53 |
// -------------------------------------- |
|
| 54 |
// FORMER COMMON.CSS |
|
| 55 |
// -------------------------------------- |
|
| 56 |
// This file is not effacious. It is intended to delete it in the end. |
|
| 57 |
|
|
| 58 |
|
|
| 59 |
|
|
| 60 |
input.grow_on_focus {
|
|
| 61 |
width: 20px; |
|
| 62 |
transition: width 0.1s; |
|
| 63 |
-moz-transition: width 0.1s; |
|
| 64 |
-webkit-transition: width 0.1s; |
|
| 65 |
-o-transition: width 0.1s; |
|
| 66 |
|
|
| 67 |
&:focus { width: 150px }
|
|
| 68 |
|
|
| 69 |
} |
|
| 70 |
|
|
| 71 |
/* quirk to force certain constructs to block context */ |
|
| 72 |
.block-context { overflow: hidden }
|
|
| 73 |
|
|
| 74 |
|
|
| 75 |
/* various oneshot decoration for legacy purpose. dont use */ |
|
| 76 |
.small-text { font-size: @font-size-small; }
|
|
| 77 |
.bold { font-weight: bold ;}
|
|
| 78 |
|
|
| 79 |
.float-left { float: left; }
|
|
| 80 |
.float-right { float: right; }
|
|
| 81 |
|
|
| 82 |
|
|
| 83 |
/* position */ |
|
| 84 |
.position-relative { position: relative; }
|
|
| 85 |
.position-absolute { position: absolute; }
|
|
| 86 |
|
|
| 87 |
|
|
| css/less/READ_ME.md | ||
|---|---|---|
| 11 | 11 |
First set the cursor of your terminal to <code>/css/less/</code> (<code>cd /css/less</code>)<br> |
| 12 | 12 |
Use following command: <code>lessc style.less ../style.css</code><br> |
| 13 | 13 |
For minifiying the output css: <code>lessc -x style.less ../style.css</code><br> |
| 14 |
Then a new <code>/css/style.css</code> is created except when errors occurs.
|
|
| 14 |
Then a new <code>/css/style.css</code> is created except if errors occur.
|
|
| 15 | 15 |
|
| 16 | 16 |
## Developing kivitendo CSS (not customizing) |
| 17 | 17 |
Read style.less.<br> |
| 18 |
This is the comand center for the whole less stuff.<br>
|
|
| 18 |
This is the control center for the whole less stuff.<br>
|
|
| 19 | 19 |
Variables can be set or changed in variables.less.<br> |
| 20 | 20 |
Variables are efficacious in the other less files. |
| 21 | 21 |
|
| ... | ... | |
| 23 | 23 |
There are several overriding LESS files. Some of the files are for |
| 24 | 24 |
customizing the original kivitendo LESS stuff. |
| 25 | 25 |
|
| 26 |
* <b>jquery-ui-overrides.less</b> (overrides original jquery css) |
|
| 26 |
* <b>jquery-ui-overrides.less</b> (overrides original jquery css in jquery.less)
|
|
| 27 | 27 |
* <b>main-overrides</b> (overrides a lot of kivitendo less/css stuff) |
| 28 | 28 |
* <b>custom-variables.less</b> (overrides variables in variable.less) |
| 29 | 29 |
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff) |
| ... | ... | |
| 47 | 47 |
Therefore it is recommended to edit only these two files: |
| 48 | 48 |
|
| 49 | 49 |
* <b>custom-variables.less</b> (overrides variables in variable.less) |
| 50 |
* <b>custom.less</b> (overrides all the original kivitendo LESS stuff) |
|
| 50 |
* <b>custom.less</b> (overrides in the end all the original kivitendo LESS stuff)
|
|
| 51 | 51 |
|
| 52 | 52 |
These files can be empty if you do not want to customize the kivitendo CSS |
| 53 | 53 |
stuff. The original custom files contains only comments and deactivated example |
| css/less/_developing_styles.less | ||
|---|---|---|
| 1 |
|
|
| 2 |
|
|
| 3 |
|
|
| 4 |
|
|
| 5 |
|
|
| 6 |
|
|
| 7 |
|
|
| 8 |
|
|
| 9 |
|
|
| 10 |
|
|
| 11 |
@import 'variables_color_style'; |
|
| 12 |
|
|
| 13 |
|
|
| 14 |
|
|
| 15 |
|
|
| 16 |
// -------------------------------------- |
|
| 17 |
// CLASSES FOR DESIGNERS |
|
| 18 |
// -------------------------------------- |
|
| 19 |
|
|
| 20 |
// Output in designer/developer CSS File (just for developer) |
|
| 21 |
// don't hesitage to deactivate the following code |
|
| 22 |
// these classed are not used in kivitendo |
|
| 23 |
|
|
| 24 |
h1::after { content: " @{colorstyle}"; } // display style name
|
|
| 25 |
|
|
| 26 |
|
|
| 27 |
:root {
|
|
| 28 |
|
|
| 29 |
|
|
| 30 |
--gray-standard: @gray-standard; |
|
| 31 |
--gray-superdark: @gray-superdark; // Black |
|
| 32 |
--gray-verydark: @gray-verydark; |
|
| 33 |
--gray-darker: @gray-darker; |
|
| 34 |
--gray-dark: @gray-dark; |
|
| 35 |
--gray-light: @gray-light; |
|
| 36 |
--gray-lighter: @gray-lighter; |
|
| 37 |
--gray-verylight: @gray-verylight; |
|
| 38 |
--gray-superlight: @gray-superlight; // White |
|
| 39 |
|
|
| 40 |
--color-standard: @brand-standard; |
|
| 41 |
--color-superlight: @brand-superlight; |
|
| 42 |
--color-verylight: @brand-verylight; |
|
| 43 |
--color-lighter: @brand-lighter; |
|
| 44 |
--color-light: @brand-light; |
|
| 45 |
--color-dark: @brand-dark; |
|
| 46 |
--color-darker: @brand-darker; |
|
| 47 |
--color-verydark: @brand-verydark; |
|
| 48 |
--color-superdark: @brand-superdark; |
|
| 49 |
|
|
| 50 |
// --msg-ok-strong: @color-green-strong; |
|
| 51 |
// --msg-ok-light: @color-green-light; |
|
| 52 |
// --msg-error-strong: @color-red-strong; |
|
| 53 |
// --msg-error-light: @color-red-light; |
|
| 54 |
// --msg-hint-strong: @color-blue-strong; |
|
| 55 |
// --msg-hint-light: @color-blue-light; |
|
| 56 |
// --msg-warning-strong: @color-orange-strong; |
|
| 57 |
// --msg-warning-light: @color-orange-light; |
|
| 58 |
--msg-ok-strong: @msg-green-strong; |
|
| 59 |
--msg-ok-light: @msg-green-light; |
|
| 60 |
--msg-error-strong: @msg-red-strong; |
|
| 61 |
--msg-error-light: @msg-red-light; |
|
| 62 |
--msg-hint-strong: @msg-blue-strong; |
|
| 63 |
--msg-hint-light: @msg-blue-light; |
|
| 64 |
--msg-warning-strong: @msg-orange-strong; |
|
| 65 |
--msg-warning-light: @msg-orange-light; |
|
| 66 |
|
|
| 67 |
--color-green-strong: @color-green-strong; |
|
| 68 |
--color-green-light: @color-green-light; |
|
| 69 |
--color-red-strong: @color-red-strong; |
|
| 70 |
--color-red-light: @color-red-light; |
|
| 71 |
--color-blue-strong: @color-blue-strong; |
|
| 72 |
--color-blue-light: @color-blue-light; |
|
| 73 |
--color-orange-strong: @color-orange-strong; |
|
| 74 |
--color-orange-light: @color-orange-light; |
|
| 75 |
|
|
| 76 |
|
|
| 77 |
|
|
| 78 |
--spin_60 : spin(@brand-standard, 60); |
|
| 79 |
--spin_120: spin(@brand-standard, 120); |
|
| 80 |
--spin_180: spin(@brand-standard, 180); |
|
| 81 |
--spin_240: spin(@brand-standard, 240); |
|
| 82 |
|
|
| 83 |
--style-ocean: @style_ocean; |
|
| 84 |
--style-light_blue: @style_light_blue; |
|
| 85 |
--style-aqua: @style_aqua; |
|
| 86 |
--style-turquoise: @style_turquoise; |
|
| 87 |
--style-pine: @style_pine; |
|
| 88 |
--style-asparagus: @style_asparagus; |
|
| 89 |
--style-petrol: @style_petrol; |
|
| 90 |
--style-salmona: @style_salmona; |
|
| 91 |
--style-salmon: @style_salmon; |
|
| 92 |
--style-tangerine: @style_tangerine; |
|
| 93 |
--style-marascino: @style_marascino; |
|
| 94 |
--style-maroon: @style_maroon; |
|
| 95 |
--style-strawberry: @style_strawberry; |
|
| 96 |
--style-pure_red: @style_pure_red; |
|
| 97 |
--style-old_lemon: @style_old_lemon; |
|
| 98 |
--style-yellow_to_green: @style_yellow_to_green; |
|
| 99 |
--style-eggplant: @style_eggplant; |
|
| 100 |
--style-plum: @style_plum; |
|
| 101 |
--style-grape: @style_grape; |
|
| 102 |
--style-magenta: @style_magenta; |
|
| 103 |
--style-lavender: @style_lavender; |
|
| 104 |
--style-cayenne: @style_cayenne; |
|
| 105 |
--style-mocha: @style_mocha; |
|
| 106 |
--style-cantaloupe: @style_cantaloupe; |
|
| 107 |
--style-dark_brown: @style_dark_brown; |
|
| 108 |
--style-orange_brown: @style_orange_brown; |
|
| 109 |
--style-smack_brown: @style_smack_brown; |
|
| 110 |
--style-green_brown: @style_green_brown; |
|
| 111 |
|
|
| 112 |
|
|
| 113 |
} |
|
| 114 |
|
|
| 115 |
.color-standard { color: var(--color-standard); }
|
|
| 116 |
.color-superlight { color: var(--color-superlight); }
|
|
| 117 |
.color-verylight { color: var(--color-verylight); }
|
|
| 118 |
.color-lighter { color: var(--color-lighter); }
|
|
| 119 |
.color-light { color: var(--color-light); }
|
|
| 120 |
.color-dark { color: var(--color-dark); }
|
|
| 121 |
.color-darker { color: var(--color-darker); }
|
|
| 122 |
.color-verydark { color: var(--color-verydark); }
|
|
| 123 |
.color-superdark { color: var(--color-superdark); }
|
|
| 124 |
|
|
| 125 |
.bg-standard { background-color: var(--color-standard); }
|
|
| 126 |
.bg-superlight { background-color: var(--color-superlight); }
|
|
| 127 |
.bg-verylight { background-color: var(--color-verylight); }
|
|
| 128 |
.bg-lighter { background-color: var(--color-lighter); }
|
|
| 129 |
.bg-light { background-color: var(--color-light); }
|
|
| 130 |
.bg-dark { background-color: var(--color-dark); }
|
|
| 131 |
.bg-darker { background-color: var(--color-darker); }
|
|
| 132 |
.bg-verydark { background-color: var(--color-verydark); }
|
|
| 133 |
.bg-superdark { background-color: var(--color-superdark); }
|
|
| 134 |
|
|
| 135 |
|
|
| 136 |
// Messages |
|
| 137 |
.msg-ok { background-color: var(--msg-ok-light); color: var(--msg-ok-strong); border-color: var(--msg-ok-strong); }
|
|
| 138 |
.msg-error { background-color: var(--msg-error-light); color: var(--msg-error-strong); border-color: var(--msg-error-strong); }
|
|
| 139 |
.msg-hint { background-color: var(--msg-hint-light); color: var(--msg-hint-strong); border-color: var(--msg-hint-strong); }
|
|
| 140 |
.msg-warning { background-color: var(--msg-warning-light); color: var(--msg-warning-strong); border-color: var(--msg-warning-strong); }
|
|
| 141 |
// Message Original Colors |
|
| 142 |
.color-ok { background-color: var(--color-green-light); color: var(--color-green-strong); border-color: var(--color-green-strong); }
|
|
| 143 |
.color-error { background-color: var(--color-red-light); color: var(--color-red-strong); border-color: var(--color-red-strong); }
|
|
| 144 |
.color-hint { background-color: var(--color-blue-light); color: var(--color-blue-strong); border-color: var(--color-blue-strong); }
|
|
| 145 |
.color-warning { background-color: var(--color-orange-light); color: var(--color-orange-strong); border-color: var(--color-orange-strong); }
|
|
| 146 |
|
|
| 147 |
.style-ocean { background-color: var( --style-ocean ); }
|
|
| 148 |
.style-light_blue { background-color: var( --style-light_blue ); }
|
|
| 149 |
.style-aqua { background-color: var( --style-aqua ); }
|
|
| 150 |
.style-turquoise { background-color: var( --style-turquoise ); }
|
|
| 151 |
.style-pine { background-color: var( --style-pine ); }
|
|
| 152 |
.style-asparagus { background-color: var( --style-asparagus ); }
|
|
| 153 |
.style-petrol { background-color: var( --style-petrol ); }
|
|
| 154 |
.style-salmona { background-color: var( --style-salmona ); }
|
|
| 155 |
.style-salmon { background-color: var( --style-salmon ); }
|
|
| 156 |
.style-tangerine { background-color: var( --style-tangerine ); }
|
|
| 157 |
.style-marascino { background-color: var( --style-marascino ); }
|
|
| 158 |
.style-maroon { background-color: var( --style-maroon ); }
|
|
| 159 |
.style-strawberry { background-color: var( --style-strawberry ); }
|
|
| 160 |
.style-pure_red { background-color: var( --style-pure_red ); }
|
|
| 161 |
.style-old_lemon { background-color: var( --style-old_lemon ); }
|
|
| 162 |
.style-yellow_to_green { background-color: var( --style-yellow_to_green ); }
|
|
| 163 |
.style-eggplant { background-color: var( --style-eggplant ); }
|
|
| 164 |
.style-plum { background-color: var( --style-plum ); }
|
|
| 165 |
.style-grape { background-color: var( --style-grape ); }
|
|
| 166 |
.style-magenta { background-color: var( --style-magenta ); }
|
|
| 167 |
.style-lavender { background-color: var( --style-lavender ); }
|
|
| 168 |
.style-cayenne { background-color: var( --style-cayenne ); }
|
|
| 169 |
.style-mocha { background-color: var( --style-mocha ); }
|
|
| 170 |
.style-cantaloupe { background-color: var( --style-cantaloupe ); }
|
|
| 171 |
.style-dark_brown { background-color: var( --style-dark_brown ); }
|
|
| 172 |
.style-orange_brown { background-color: var( --style-orange_brown ); }
|
|
| 173 |
.style-smack_brown { background-color: var( --style-smack_brown ); }
|
|
| 174 |
.style-green_brown { background-color: var( --style-green_brown ); }
|
|
| css/less/admin.less | ||
|---|---|---|
| 39 | 39 |
top: 0 important; |
| 40 | 40 |
} |
| 41 | 41 |
|
| 42 |
|
|
| 43 |
|
|
| 44 | 42 |
div.admin {
|
| 45 |
margin: 60px 0 0 0 ;
|
|
| 46 |
//top: 60px;
|
|
| 43 |
padding: 60px 0 0 0 ;
|
|
| 44 |
.bg-content ;
|
|
| 47 | 45 |
|
| 48 | 46 |
h1 {
|
| 49 | 47 |
background-color: #fe5f14 !important; |
| 50 |
color: #ffffff; |
|
| 51 |
top: 30px ; |
|
| 52 |
position: fixed; |
|
| 53 |
width: 100% ; |
|
| 54 |
padding: 0.6em 0.5em 0.5em 0.6em; |
|
| 55 |
z-index: 1000; |
|
| 48 |
color: #ffffff;
|
|
| 49 |
top: 30px ;
|
|
| 50 |
position: fixed;
|
|
| 51 |
width: 100% ;
|
|
| 52 |
padding: 0.6em 0.5em 0.5em 0.6em;
|
|
| 53 |
z-index: 1000;
|
|
| 56 | 54 |
|
| 57 | 55 |
& + .wrapper {
|
| 58 | 56 |
padding-top: 1.2em; |
| 59 |
//margin-top: 1.0em ; |
|
| 60 |
//top: 1.0em; |
|
| 61 |
//&:first-child{
|
|
| 62 |
//padding-top: 2.0em; |
|
| 63 |
//} |
|
| 64 | 57 |
} |
| 65 | 58 |
} |
| 66 | 59 |
|
| 60 |
// Login-Form with big logo |
|
| 61 |
|
|
| 62 |
.logo {
|
|
| 63 |
width: auto; |
|
| 64 |
clear: both; |
|
| 65 |
margin: 3.0em auto 1.0em auto; |
|
| 66 |
padding: 2.0em 0 0 0; |
|
| 67 |
} |
|
| 68 |
|
|
| 69 |
.separate-form{
|
|
| 70 |
background-color: #ddd ; |
|
| 71 |
border: 1px @gray-standard solid; |
|
| 72 |
border-radius: @controlpanel-radius ; |
|
| 73 |
display: block ; |
|
| 74 |
width: 24.0em; |
|
| 75 |
margin: 0 auto ; |
|
| 76 |
padding: 0.7em 0.6em 1.0em 0.6em ; |
|
| 77 |
} |
|
| 78 |
|
|
| 67 | 79 |
.tabwidget {
|
| 68 |
//top: 35px ; |
|
| 69 |
padding: 2.4em 0 0 0 !important; |
|
| 80 |
padding: 2.4em 0 0 0 !important; |
|
| 70 | 81 |
.ui-tabs-nav{
|
| 71 |
top: 66px; |
|
| 82 |
top: 66px;
|
|
| 72 | 83 |
} |
| 73 | 84 |
.ui-tabs-panel {
|
| 74 |
padding: 2.0em 1.0em 1.0em 1.0em ; |
|
| 75 |
overflow: hidden; |
|
| 76 |
height: auto; |
|
| 77 |
min-height: 300px ; |
|
| 85 |
padding: 2.0em 1.0em 1.0em 1.0em ;
|
|
| 86 |
overflow: hidden;
|
|
| 87 |
height: auto;
|
|
| 88 |
min-height: 300px ;
|
|
| 78 | 89 |
} |
| 79 | 90 |
} |
| 91 |
|
|
| 80 | 92 |
& > form{
|
| 81 | 93 |
display: block ; |
| 82 | 94 |
margin-top: 1px ; |
| 83 | 95 |
padding-top: 1.2em ; |
| 84 | 96 |
} |
| 85 |
&> form {
|
|
| 86 |
//padding-top: 3.8em ; |
|
| 87 |
} |
|
| 88 |
|
|
| 89 |
|
|
| 90 | 97 |
|
| 91 | 98 |
.message{
|
| 92 | 99 |
&_error, |
| ... | ... | |
| 95 | 102 |
&_warning, |
| 96 | 103 |
&_ok{
|
| 97 | 104 |
//margin-top: 70px ; |
| 98 |
|
|
| 99 | 105 |
} |
| 100 | 106 |
} |
| 101 |
|
|
| 102 |
|
|
| 103 |
|
|
| 104 |
} |
|
| 105 |
|
|
| 106 |
|
|
| 107 |
} |
|
| 107 |
|
|
| 108 |
} // /div.admin |
|
| 109 |
} // /body |
|
| 108 | 110 |
|
| 109 | 111 |
|
| 110 | 112 |
|
| css/less/buttons.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* BUTTONS (buttons.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// BUTTONS (FORM BUTTONS & LINKS AS BUTTONS) |
| ... | ... | |
| 28 | 32 |
// At first we tried to nest the buttons within the form element, |
| 29 | 33 |
// but it is not possible because some forms do not have a form element |
| 30 | 34 |
// (e.g. print dialog) |
| 35 |
|
|
| 36 |
// A lot of buttons are outside of a form, so let be this tag deactivated |
|
| 31 | 37 |
//form {
|
| 32 | 38 |
|
| 33 | 39 |
// General |
| ... | ... | |
| 50 | 56 |
&.wi-wider { width: @input-wi-wider ; }
|
| 51 | 57 |
&.wi-verywide { width: @input-wi-verywide ; }
|
| 52 | 58 |
&.wi-tiny {
|
| 53 |
width: auto ; |
|
| 54 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 55 |
margin: -0.3em 0 0 0.2em; |
|
| 56 |
//float: right; |
|
| 57 |
display: inline-block; |
|
| 58 |
font-size: 84% ; |
|
| 59 |
min-height: 23px; |
|
| 60 |
max-height: 23px; |
|
| 59 |
width: auto ;
|
|
| 60 |
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
| 61 |
margin: -0.3em 0 0 0.2em;
|
|
| 62 |
//float: right;
|
|
| 63 |
display: inline-block;
|
|
| 64 |
font-size: 84% ;
|
|
| 65 |
min-height: 23px;
|
|
| 66 |
max-height: 23px;
|
|
| 61 | 67 |
} |
| 62 | 68 |
&.wi-verytiny{
|
| 63 |
font-size: 8pt !important; |
|
| 64 |
padding: 0.0em 0.3em 0.1em 0.3em; |
|
| 65 |
display: inline-block; |
|
| 66 |
min-height: 17px; |
|
| 67 |
max-height: 17px; |
|
| 69 |
font-size: 8pt !important;
|
|
| 70 |
padding: 0.0em 0.3em 0.1em 0.3em;
|
|
| 71 |
display: inline-block;
|
|
| 72 |
min-height: 17px;
|
|
| 73 |
max-height: 17px;
|
|
| 68 | 74 |
} |
| 69 | 75 |
|
| 70 |
|
|
| 71 |
} // /input[type="button etc."] /button |
|
| 76 |
} // /input[type="button etc."] |
|
| 72 | 77 |
|
| 73 | 78 |
button.icon{
|
| 74 |
padding: 0 ; |
|
| 75 |
margin: 0 ; |
|
| 76 |
background: none !important; |
|
| 77 |
border: none;
|
|
| 78 |
display: inline-block; |
|
| 79 |
padding: 0 ;
|
|
| 80 |
margin: 0 ;
|
|
| 81 |
background: none !important;
|
|
| 82 |
border: 0 !important;
|
|
| 83 |
display: inline-block;
|
|
| 79 | 84 |
img { vertical-align: middle ; }
|
| 80 | 85 |
} |
| 81 | 86 |
|
| ... | ... | |
| 86 | 91 |
input[type="button"].button, |
| 87 | 92 |
button[type="submit"], |
| 88 | 93 |
button[type="button"] {
|
| 89 |
color: @btn-default-color ;
|
|
| 90 |
background-color: @btn-default-bg;
|
|
| 91 |
border-color: @btn-default-border ;
|
|
| 94 |
color: @button-strong-color ;
|
|
| 95 |
background-color: @button-strong-bg;
|
|
| 96 |
border: @button-strong-border ;
|
|
| 92 | 97 |
&:hover{
|
| 93 |
color: @btn-default-hover-color ;
|
|
| 94 |
background-color: @btn-default-hover-bg;
|
|
| 95 |
border-color: @btn-default-hover-border ;
|
|
| 98 |
color: @button-strong-hover-color ;
|
|
| 99 |
background-color: @button-strong-hover-bg;
|
|
| 100 |
border: @button-strong-hover-border ;
|
|
| 96 | 101 |
} |
| 97 | 102 |
&:active, |
| 98 | 103 |
&:focus{
|
| 99 |
color: @btn-default-active-color ;
|
|
| 100 |
background-color: @btn-default-active-bg;
|
|
| 101 |
border-color: @btn-default-active-border ;
|
|
| 104 |
color: @button-strong-active-color ;
|
|
| 105 |
background-color: @button-strong-active-bg;
|
|
| 106 |
border: @button-strong-active-border ;
|
|
| 102 | 107 |
} |
| 103 | 108 |
} |
| 104 | 109 |
|
| ... | ... | |
| 110 | 115 |
input[type="reset"].neutral, |
| 111 | 116 |
button.neutral, |
| 112 | 117 |
button[type="reset"] {
|
| 113 |
color: @btn-neutral-color ;
|
|
| 114 |
background-color: @btn-neutral-bg;
|
|
| 115 |
border-color: @btn-neutral-border ;
|
|
| 118 |
color: @button-neutral-color ;
|
|
| 119 |
background-color: @button-neutral-bg;
|
|
| 120 |
border: @button-neutral-border ;
|
|
| 116 | 121 |
&:hover {
|
| 117 |
color: @btn-neutral-hover-color ;
|
|
| 118 |
background-color: @btn-neutral-hover-bg;
|
|
| 119 |
border-color: @btn-neutral-hover-border ;
|
|
| 122 |
color: @button-neutral-hover-color ;
|
|
| 123 |
background-color: @button-neutral-hover-bg;
|
|
| 124 |
border: @button-neutral-hover-border ;
|
|
| 120 | 125 |
} |
| 121 | 126 |
&:active, |
| 122 | 127 |
&:focus {
|
| 123 |
color: @btn-neutral-active-color;
|
|
| 124 |
background-color: @btn-neutral-active-bg;
|
|
| 125 |
border-color: @btn-neutral-active-border ;
|
|
| 128 |
color: @button-neutral-active-color;
|
|
| 129 |
background-color: @button-neutral-active-bg;
|
|
| 130 |
border: @button-neutral-active-border ;
|
|
| 126 | 131 |
} |
| 127 |
} |
|
| 132 |
|
|
| 133 |
// Toggle-Button (e.g. for position details in tables) |
|
| 134 |
&.positions {
|
|
| 135 |
padding-right: 1.2em ; |
|
| 136 |
// ::after does not work in buttons |
|
| 137 |
// input#cb_show_details {
|
|
| 138 |
// &::after {
|
|
| 139 |
// content: "▸" !important ; |
|
| 140 |
// } |
|
| 141 |
// } |
|
| 142 |
// input#cb_hide_details::after {
|
|
| 143 |
// content: "▾" !important ; |
|
| 144 |
// } |
|
| 145 |
} // /.positions |
|
| 146 |
|
|
| 147 |
} // /input[type="*"].neutral |
|
| 128 | 148 |
|
| 129 | 149 |
// PENDENT: Neu |
| 130 | 150 |
input[type="button"]{
|
| 131 | 151 |
&.below{
|
| 132 | 152 |
clear: both !important; |
| 133 | 153 |
float: none; |
| 134 |
margin-top: 0.3em; |
|
| 154 |
//margin-top: 0.3em;
|
|
| 135 | 155 |
overflow: hidden ; |
| 136 | 156 |
} |
| 137 | 157 |
} |
| ... | ... | |
| 140 | 160 |
|
| 141 | 161 |
|
| 142 | 162 |
|
| 163 |
|
|
| 164 |
|
|
| 165 |
|
|
| 143 | 166 |
// -------------------------------------- |
| 144 | 167 |
// LINKS DESIGNED AS BUTTONS |
| 145 | 168 |
// They may be placed inside or outside a form |
| ... | ... | |
| 175 | 198 |
&.wi-verywide { min-width: @input-wi-verywide ; }
|
| 176 | 199 |
// Tiny button (one letter button) |
| 177 | 200 |
&.wi-tiny {
|
| 178 |
display: inline-block;
|
|
| 179 |
width: auto ;
|
|
| 180 |
padding: 0.16em 0.2em 0.1em 0.2em;
|
|
| 181 |
margin: -0.3em 0 0 0.2em;
|
|
| 182 |
font-size: 84% ;
|
|
| 201 |
display: inline-block; |
|
| 202 |
width: auto ; |
|
| 203 |
padding: 0.16em 0.2em 0.1em 0.2em; |
|
| 204 |
margin: -0.3em 0 0 0.2em; |
|
| 205 |
font-size: 84% ; |
|
| 183 | 206 |
} |
| 184 | 207 |
|
| 185 | 208 |
// Toggle (for filters e.g.) |
| 186 | 209 |
&.toggle {
|
| 210 |
background-color: @controlpanel-bg-color !important ; |
|
| 211 |
|
|
| 187 | 212 |
&.off::after{
|
| 188 | 213 |
content: " ▸"; |
| 189 | 214 |
padding-right: 1.0em; |
| ... | ... | |
| 197 | 222 |
border-bottom: none; |
| 198 | 223 |
border-bottom-left-radius: 0px ; |
| 199 | 224 |
border-bottom-right-radius: 0px ; |
| 225 |
&:hover {
|
|
| 226 |
border-top: @controlpanel-border !important ; |
|
| 227 |
border-right: @controlpanel-border !important ; |
|
| 228 |
border-bottom: 0 !important; |
|
| 229 |
border-left: @controlpanel-border !important ; |
|
| 230 |
} |
|
| 200 | 231 |
} |
| 201 | 232 |
&:hover{
|
| 202 |
background-color: @btn-neutral-bg !important;
|
|
| 203 |
border-color: @btn-neutral-border !important ;
|
|
| 204 |
color: @btn-neutral-color;
|
|
| 233 |
background-color: @button-neutral-bg !important;
|
|
| 234 |
border: @controlpanel-border !important ;
|
|
| 235 |
color: @button-neutral-color;
|
|
| 205 | 236 |
text-decoration: none; |
| 206 | 237 |
} |
| 207 | 238 |
} // /.toggle |
| ... | ... | |
| 238 | 269 |
// -------------------------------------- |
| 239 | 270 |
// Container fuer Buttons |
| 240 | 271 |
div.buttons {
|
| 241 |
padding: 1.0em ;
|
|
| 242 |
clear: left ;
|
|
| 243 |
display: block;
|
|
| 244 |
// PENDENT: anschauen, ist fuer Anzeige von Positionsdetails
|
|
| 272 |
padding: 1.0em ; |
|
| 273 |
clear: left ; |
|
| 274 |
display: block; |
|
| 275 |
// PENDENT: anschauen, steht fuer Anzeige von Positionsdetails in Listen-Tabellen
|
|
| 245 | 276 |
&.positions {
|
| 246 |
margin: 0 0 -2.0em 26.0em; |
|
| 247 |
padding: 0em; |
|
| 277 |
margin: 0 0 -1.9em 26.0em; |
|
| 278 |
padding: 0em; |
|
| 279 |
label.button.neutral, |
|
| 280 |
input.positions {
|
|
| 281 |
border-bottom-left-radius: 0 !important; |
|
| 282 |
border-bottom-right-radius: 0 !important; |
|
| 283 |
padding-bottom: 0.6em !important; |
|
| 284 |
margin-bottom: -0.8em !important; |
|
| 285 |
background: none !important; |
|
| 286 |
border-bottom: none !important; |
|
| 287 |
} |
|
| 288 |
input.positions{
|
|
| 289 |
|
|
| 290 |
} |
|
| 248 | 291 |
} |
| 249 | 292 |
&.below {
|
| 250 |
padding: 0 ;
|
|
| 251 |
margin: 0 ;
|
|
| 293 |
padding: 0 ; |
|
| 294 |
margin: 0 ; |
|
| 252 | 295 |
} |
| 253 | 296 |
} |
| 254 | 297 |
.col > .buttons, |
| 255 | 298 |
.wrapper * .buttons {
|
| 256 |
padding: 1.0em 1.0em 1.0em 0 !important;
|
|
| 299 |
padding: 1.0em 1.0em 1.0em 0 !important; |
|
| 257 | 300 |
} |
| 258 | 301 |
|
| 259 | 302 |
|
| ... | ... | |
| 278 | 321 |
} |
| 279 | 322 |
input[type="button"].button-image{
|
| 280 | 323 |
&.delete {
|
| 281 |
background-image: url("image/cross.png");
|
|
| 282 |
background-repeat: no-repeat;
|
|
| 283 |
background-position: 0 0;
|
|
| 284 |
color: #fff;
|
|
| 285 |
background-color:transparent;
|
|
| 286 |
border-color: none;
|
|
| 287 |
border-width: 0;
|
|
| 324 |
background-image: url("image/cross.png");
|
|
| 325 |
background-repeat: no-repeat;
|
|
| 326 |
background-position: 0 0;
|
|
| 327 |
color: #fff;
|
|
| 328 |
background-color: transparent;
|
|
| 329 |
border-color: none;
|
|
| 330 |
border-width: 0;
|
|
| 288 | 331 |
} |
| 289 | 332 |
} |
| 290 | 333 |
|
| css/less/common.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* COMMON PROPERTIES (common.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// COMMON PROPERTIES |
| ... | ... | |
| 44 | 48 |
//behavior:url("csshover.htc") ;
|
| 45 | 49 |
padding: 0; |
| 46 | 50 |
margin: 0 ; |
| 51 |
font-size: @font-size-smaller ; |
|
| 47 | 52 |
} |
| 48 | 53 |
|
| 49 | 54 |
|
| ... | ... | |
| 56 | 61 |
div, |
| 57 | 62 |
p, |
| 58 | 63 |
span, |
| 64 |
table, |
|
| 65 |
th, |
|
| 66 |
td, |
|
| 59 | 67 |
input, |
| 60 | 68 |
textarea, |
| 61 | 69 |
select, |
| 62 | 70 |
button, |
| 63 |
a.button, |
|
| 64 |
table, |
|
| 65 |
col, |
|
| 66 |
th, |
|
| 67 |
td |
|
| 71 |
a.button |
|
| 68 | 72 |
{
|
| 69 | 73 |
box-sizing: border-box; |
| 70 | 74 |
} |
| ... | ... | |
| 72 | 76 |
|
| 73 | 77 |
|
| 74 | 78 |
|
| 79 |
|
|
| 80 |
|
|
| 81 |
|
|
| 82 |
|
|
| 83 |
|
|
| 84 |
|
|
| 75 | 85 |
// -------------------------------------- |
| 76 | 86 |
// CLEARFIX |
| 77 | 87 |
// -------------------------------------- |
| css/less/control_panels.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* CONTROL PANELS (control_panels.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// CONTROL PANELS |
| ... | ... | |
| 21 | 25 |
// -------------------------------------- |
| 22 | 26 |
// General Class for all control panels |
| 23 | 27 |
.control-panel {
|
| 24 |
border: @controlpanel-border; |
|
| 25 |
background-color: @controlpanel-bg; |
|
| 28 |
border: @controlpanel-border !important; |
|
| 29 |
background-color: @controlpanel-bg-color; |
|
| 30 |
background: @controlpanel-bg-style ; |
|
| 26 | 31 |
border-radius: @controlpanel-radius; |
| 27 |
color: red ; |
|
| 32 |
//color: red ;
|
|
| 28 | 33 |
overflow: hidden ; |
| 34 |
|
|
| 35 |
span.label{
|
|
| 36 |
padding-right: 0.6em ; |
|
| 37 |
} |
|
| 29 | 38 |
} |
| 30 | 39 |
|
| 40 |
|
|
| 41 |
|
|
| 42 |
|
|
| 31 | 43 |
// -------------------------------------- |
| 32 | 44 |
// FORM-ADDITION |
| 33 | 45 |
// -------------------------------------- |
| 34 | 46 |
// Settings for including fields in a report |
| 35 | 47 |
.form-addition{
|
| 36 |
padding: @controlpanel-padding-bold ; |
|
| 48 |
padding: @controlpanel-padding-bold !important ;
|
|
| 37 | 49 |
margin: @controlpanel-margin !important ; |
| 38 | 50 |
width: auto !important ; |
| 39 | 51 |
display: inline-block ; |
| 40 | 52 |
|
| 41 | 53 |
h3{
|
| 42 |
color: @controlpanel-h3-color !important; |
|
| 43 |
font-size: @controlpanel-h3-size !important; |
|
| 44 |
font-weight: @controlpanel-h3-weight !important; |
|
| 45 |
margin: 0.3em 0 0.1em 0 !important; |
|
| 46 |
padding: 0 ; |
|
| 54 |
// color: @controlpanel-h3-color !important;
|
|
| 55 |
// font-size: @controlpanel-h3-size !important;
|
|
| 56 |
// font-weight: @controlpanel-h3-weight !important;
|
|
| 57 |
margin: 0.3em 0 0.1em 0 !important;
|
|
| 58 |
padding: 0 ;
|
|
| 47 | 59 |
} |
| 48 | 60 |
h4{
|
| 49 |
color: @controlpanel-h4-color !important;;
|
|
| 50 |
font-size: @controlpanel-h4-size;
|
|
| 51 |
font-weight: @controlpanel-h4-weight;
|
|
| 52 |
font-style: @controlpanel-h4-style;
|
|
| 61 |
color: @controlpanel-h4-color !important;;
|
|
| 62 |
font-size: @controlpanel-h4-size;
|
|
| 63 |
font-weight: @controlpanel-h4-weight;
|
|
| 64 |
font-style: @controlpanel-h4-style;
|
|
| 53 | 65 |
} |
| 54 | 66 |
|
| 55 | 67 |
div.list{
|
| ... | ... | |
| 66 | 78 |
// -------------------------------------- |
| 67 | 79 |
// SELECT ITEM |
| 68 | 80 |
// -------------------------------------- |
| 69 |
// for selecting a hidden Record (e.g. Contacts, Delivery Address etc.) |
|
| 81 |
// Panel for selecting a hidden Record (e.g. Contacts, Delivery Address etc.)
|
|
| 70 | 82 |
.select-item{
|
| 71 | 83 |
display: inline-block ; |
| 72 | 84 |
width: auto ; |
| 73 | 85 |
height: auto; |
| 74 | 86 |
padding: @controlpanel-select-item-padding ; |
| 75 | 87 |
margin: @controlpanel-margin ; |
| 76 |
border: @controlpanel-border ; |
|
| 77 |
border-radius: @controlpanel-radius ; |
|
| 78 |
background-color: @controlpanel-bg ; |
|
| 79 | 88 |
color: @controlpanel-color ; |
| 80 | 89 |
font-size: @font-size-smaller ; |
| 90 |
border: @controlpanel-border ; |
|
| 91 |
border-radius: @controlpanel-radius ; |
|
| 92 |
background-color: @controlpanel-bg-color ; |
|
| 93 |
background: @_bg_style_button ; // PENDENT: |
|
| 94 |
|
|
| 81 | 95 |
input, |
| 82 | 96 |
select{
|
| 83 | 97 |
margin-left: 0.6em ; |
| ... | ... | |
| 117 | 131 |
select { margin: -0.3em 0 0 0; }
|
| 118 | 132 |
} |
| 119 | 133 |
} |
| 134 |
|
|
| 120 | 135 |
} // /.select-item |
| 136 |
|
|
| 121 | 137 |
// Select function within standard wrapper |
| 122 | 138 |
.ui-tabs-panel > .select-item {
|
| 123 |
margin: @contentbox-margin; |
|
| 139 |
margin: @contentbox-margin; |
|
| 140 |
vertical-align: top ; |
|
| 141 |
|
|
| 124 | 142 |
} |
| 125 | 143 |
.wrapper > .select-item {
|
| 126 | 144 |
margin: 0.8em 0 1.0em 0 ; |
| ... | ... | |
| 128 | 146 |
|
| 129 | 147 |
|
| 130 | 148 |
|
| 149 |
|
|
| 150 |
|
|
| 151 |
|
|
| 152 |
|
|
| 131 | 153 |
// -------------------------------------- |
| 132 | 154 |
// FILTER-TOGGLE-PANEL |
| 133 | 155 |
// -------------------------------------- |
| 134 | 156 |
// for togglin a filter panel |
| 135 | 157 |
// see inlcude file /templates/webpages/common/filter-toggle.html |
| 158 |
.toggle_panel.control-panel{
|
|
| 159 |
border: none !important; |
|
| 160 |
background: none !important; |
|
| 161 |
border-radius: 0 !important; |
|
| 162 |
overflow: visible !important; |
|
| 163 |
} |
|
| 136 | 164 |
.toggle_panel{
|
| 137 | 165 |
& > a.button.toggle {
|
| 138 |
padding: 0.2em 0 0.2em 1.4em; |
|
| 166 |
padding: 0.2em 0 0.2em 1.4em;
|
|
| 139 | 167 |
&:hover {
|
| 140 |
background-color: @controlpanel-bg !important; |
|
| 141 |
text-decoration: underline ; |
|
| 168 |
background-color: @controlpanel-bg-color !important;
|
|
| 169 |
text-decoration: underline ;
|
|
| 142 | 170 |
} |
| 143 | 171 |
} |
| 144 | 172 |
span.summary {
|
| 145 |
font-size: @font-size-small; |
|
| 173 |
font-size: @font-size-small;
|
|
| 146 | 174 |
padding-left: 2.0em; |
| 147 |
color: @gray-mediumdark;
|
|
| 175 |
color: @controlpanel-color;
|
|
| 148 | 176 |
} |
| 149 | 177 |
.toggle_panel_block {
|
| 150 |
display: block; |
|
| 151 |
overflow: hidden; |
|
| 178 |
display: block;
|
|
| 179 |
overflow: hidden;
|
|
| 152 | 180 |
padding: @controlpanel-padding ; |
| 153 |
margin: 2em 1em 0em 0; ; |
|
| 181 |
margin: 2em 1em 0em 0; ; |
|
| 182 |
background-color: @controlpanel-bg-color; |
|
| 154 | 183 |
|
| 184 |
border: @controlpanel-border ; |
|
| 155 | 185 |
border-bottom-left-radius: @controlpanel-radius ; |
| 156 | 186 |
border-bottom-right-radius: @controlpanel-radius ; |
| 157 | 187 |
border-top-right-radius: @controlpanel-radius ; |
| 158 | 188 |
margin-top: -1px ; |
| 159 | 189 |
|
| 160 | 190 |
.buttons{
|
| 161 |
clear: left ; |
|
| 162 |
padding: 0 !important; |
|
| 163 |
margin: 0; |
|
| 191 |
clear: left ;
|
|
| 192 |
padding: 0 !important;
|
|
| 193 |
margin: 0;
|
|
| 164 | 194 |
} |
| 165 | 195 |
} |
| 166 | 196 |
|
| 197 |
// PENDENT: ggf. anpassen an Controlpanel-Farbtoene |
|
| 167 | 198 |
.tbl-horizontal {
|
| 168 |
th{ color: @brand-darkest ; }
|
|
| 199 |
//th{ color: @brand-superdark ; }
|
|
| 169 | 200 |
} |
| 170 | 201 |
|
| 171 | 202 |
} |
| ... | ... | |
| 178 | 209 |
// -------------------------------------- |
| 179 | 210 |
// Panel for entering data via jQuery-Scripts etc. |
| 180 | 211 |
#content .input-panel {
|
| 181 |
overflow: hidden; |
|
| 182 |
padding: @controlpanel-padding ; |
|
| 212 |
display: inline-block; |
|
| 213 |
overflow: hidden ; |
|
| 214 |
padding: @controlpanel-padding-narrow ; |
|
| 183 | 215 |
margin: @margin-from-wrapper ; |
| 184 |
background-color: @controlpanel-bg; |
|
| 216 |
background-color: @controlpanel-bg-color;
|
|
| 185 | 217 |
border: @controlpanel-border ; |
| 186 |
border-bottom-left-radius: @controlpanel-radius ; |
|
| 187 |
border-bottom-right-radius: @controlpanel-radius ; |
|
| 188 |
border-top-right-radius: @controlpanel-radius ; |
|
| 189 |
border-top-left-radius: @controlpanel-radius ; |
|
| 190 |
width: auto ; |
|
| 191 |
min-width: 30% ; |
|
| 218 |
border-radius: @controlpanel-radius ; |
|
| 219 |
// border-bottom-left-radius: @controlpanel-radius ; |
|
| 220 |
// border-bottom-right-radius: @controlpanel-radius ; |
|
| 221 |
// border-top-right-radius: @controlpanel-radius ; |
|
| 222 |
// border-top-left-radius: @controlpanel-radius ; |
|
| 223 |
width: auto ; |
|
| 224 |
min-width: 30% ; |
|
| 192 | 225 |
//max-width: 70% ; |
| 193 |
display: inline-block; |
|
| 194 | 226 |
|
| 195 | 227 |
& > h3 {
|
| 196 | 228 |
margin-top: 0 ; |
| 197 | 229 |
} |
| 198 | 230 |
p {
|
| 199 |
font-size: @font-size-smaller ; |
|
| 200 |
margin: 0 0 0.4em 0 ; |
|
| 231 |
font-size: @font-size-smaller ; |
|
| 232 |
margin: 0 0 0.4em 0 ; |
|
| 233 |
} |
|
| 234 |
table.condensed {
|
|
| 235 |
margin-bottom: 0.1em; |
|
| 236 |
caption { padding-top: 0.1em ; }
|
|
| 237 |
td span.label {
|
|
| 238 |
padding-right: 0.6em ; |
|
| 239 |
&.above{ margin-bottom: 0em ; }
|
|
| 240 |
} |
|
| 201 | 241 |
} |
| 202 | 242 |
} |
| 203 |
|
|
| 243 |
#content .ui-tabs-panel > .input-panel { margin-left: @margin-left-from-content }
|
|
| 204 | 244 |
|
| 205 | 245 |
|
| 206 | 246 |
// -------------------------------------- |
| 207 | 247 |
// PAGINATE |
| 208 | 248 |
// -------------------------------------- |
| 209 |
.paginate{
|
|
| 249 |
.paginate {
|
|
| 210 | 250 |
display: inline-block ; |
| 211 | 251 |
width: auto ; |
| 212 |
height: auto; |
|
| 213 |
padding: 0; |
|
| 252 |
height: auto ;
|
|
| 253 |
padding: 0 ;
|
|
| 214 | 254 |
margin: @controlpanel-margin ; |
| 215 |
border: @controlpanel-border; |
|
| 255 |
border: @controlpanel-border ;
|
|
| 216 | 256 |
border-radius: @controlpanel-radius ; |
| 217 |
background-color: @controlpanel-bg; |
|
| 257 |
background-color: @controlpanel-bg-color ;
|
|
| 218 | 258 |
color: @controlpanel-color ; |
| 219 | 259 |
|
| 220 | 260 |
& > a, |
| 221 | 261 |
& > span {
|
| 222 |
padding: 0.4em 0.6em !important; |
|
| 223 |
margin-top: -1px; |
|
| 262 |
padding: 0.4em 0.6em !important ;
|
|
| 263 |
margin-top: -1px ;
|
|
| 224 | 264 |
} |
| 225 | 265 |
|
| 226 | 266 |
.paginate-prev {
|
| 227 | 267 |
display: inline-block ; |
| 228 |
&::before{ content: "◄"; }
|
|
| 268 |
&::before{ content: "◄" ; }
|
|
| 229 | 269 |
&:hover{
|
| 230 |
border-bottom-left-radius: @controlpanel-radius; |
|
| 231 |
border-top-left-radius: @controlpanel-radius; |
|
| 270 |
border-bottom-left-radius: @controlpanel-radius ;
|
|
| 271 |
border-top-left-radius: @controlpanel-radius ;
|
|
| 232 | 272 |
} |
| 233 | 273 |
} |
| 234 | 274 |
.paginate-next {
|
| 235 | 275 |
display: inline-block ; |
| 236 | 276 |
&::after{ content: "►"; }
|
| 237 | 277 |
&:hover{
|
| 238 |
border-bottom-right-radius: @controlpanel-radius; |
|
| 239 |
border-top-right-radius: @controlpanel-radius; |
|
| 278 |
border-bottom-right-radius: @controlpanel-radius ;
|
|
| 279 |
border-top-right-radius: @controlpanel-radius ;
|
|
| 240 | 280 |
} |
| 241 | 281 |
} |
| 242 | 282 |
.paginate-page {
|
| ... | ... | |
| 267 | 307 |
&.right { float: right; }
|
| 268 | 308 |
|
| 269 | 309 |
border: @controlpanel-border; |
| 270 |
border-radius: 0.2em ;
|
|
| 271 |
background-color: @controlpanel-bg; |
|
| 310 |
border-radius: @controlpanel-radius ;
|
|
| 311 |
background-color: @controlpanel-bg-color;
|
|
| 272 | 312 |
margin: 0.8em 2.0em 0 1.2em !important; |
| 273 | 313 |
} |
| 274 | 314 |
|
| ... | ... | |
| 309 | 349 |
|
| 310 | 350 |
|
| 311 | 351 |
|
| 352 |
|
|
| 353 |
|
|
| 354 |
// -------------------------------------- |
|
| 355 |
// DEZIDIERTE ELEMENTE |
|
| 356 |
// -------------------------------------- |
|
| 357 |
|
|
| 358 |
.control-panel select#contact_cp_id {
|
|
| 359 |
|
|
| 360 |
} |
|
| 361 |
|
|
| 362 |
|
|
| css/less/custom.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* CUSTOM LESS STUFF (custom.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// CUSTOM LESS STUFF (ONLY FOR OVERRIDES OF THE STANDARD-KIVITENDO-STUFF) |
| ... | ... | |
| 31 | 35 |
// This is just an exemple |
| 32 | 36 |
// Do run "lessc style.less ../style.css" in your terminal session with cursor on the folder /css/less |
| 33 | 37 |
|
| 34 |
/* Custom overrides */ |
|
| 35 |
|
|
| 36 |
/* |
|
| 37 |
table.tbl-horizontal {
|
|
| 38 |
display: table ; |
|
| 39 |
background-color: #ccc; |
|
| 40 |
border-bottom: 12px #ccc solid ; |
|
| 41 |
border-top-left-radius: 0 ; |
|
| 42 |
border-top-right-radius: 0 ; |
|
| 43 |
border-bottom-left-radius: 6px ; |
|
| 44 |
border-bottom-right-radius: 6px ; |
|
| 45 |
|
|
| 46 |
& > caption{
|
|
| 47 |
color: #ffffff !important; |
|
| 48 |
background-color: @gray-mediumdark; |
|
| 49 |
padding-left: 0.8em; |
|
| 50 |
border-top-left-radius: 6px ; |
|
| 51 |
border-top-right-radius: 6px ; |
|
| 52 |
//margin: -24px -12px 0.6em -12px ; |
|
| 53 |
& > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
|
|
| 54 |
} |
|
| 55 |
th{ padding-left: 0.3em; }
|
|
| 56 |
td{ padding-right: 0.3em; }
|
|
| 57 |
tbody { border-top: 8px #ccc solid; }
|
|
| 58 |
&.checkered {
|
|
| 59 |
tbody { border-top: none ; }
|
|
| 60 |
border-bottom: none; |
|
| 61 |
} |
|
| 62 |
tbody > tr > td:first-child, |
|
| 63 |
tbody > tr > th:first-child, |
|
| 64 |
thead > tr > th:first-child{
|
|
| 65 |
padding-left: 1.0em ; |
|
| 66 |
} |
|
| 67 |
tbody > tr:first-child {
|
|
| 68 |
& > th { padding-top: 0.5em ; }
|
|
| 69 |
& > td { padding-top: 0.5em ; }
|
|
| 70 |
} |
|
| 71 |
th.caption{
|
|
| 72 |
color: #fff !important; |
|
| 73 |
background-color: @gray-mediumdark; |
|
| 74 |
padding: 0.4em 0 0.3em 0.8em; |
|
| 75 |
border-top: 6px solid #ccc; |
|
| 76 |
border-bottom: 8px solid #ccc; |
|
| 77 |
margin-bottom: 0.6em ; |
|
| 78 |
//margin: -24px -12px 0.6em -18px ; |
|
| 79 |
} |
|
| 80 |
} |
|
| 81 |
|
|
| 82 |
.col{
|
|
| 83 |
padding-bottom: 0.4em ; |
|
| 84 |
|
|
| 85 |
& > table.tbl-horizontal {
|
|
| 86 |
margin-right: 0 !important; |
|
| 87 |
//border-top-left-radius: 0 ; |
|
| 88 |
//border-top-right-radius: 0 ; |
|
| 89 |
border-radius: 0 ; |
|
| 90 |
padding-bottom: 0 ; |
|
| 91 |
|
|
| 92 |
caption{
|
|
| 93 |
border-top-left-radius: 0 ; |
|
| 94 |
border-top-right-radius: 0 ; |
|
| 95 |
} |
|
| 96 |
} |
|
| 97 |
& > table.tbl-horizontal:first-child{
|
|
| 98 |
border-top-left-radius: 0 ; |
|
| 99 |
border-top-right-radius: 0 ; |
|
| 100 |
border-bottom-left-radius: 0 ; |
|
| 101 |
border-bottom-right-radius: 0 ; |
|
| 102 |
margin-bottom: 0 ; |
|
| 103 |
caption{
|
|
| 104 |
border-top-left-radius: 6px ; |
|
| 105 |
border-top-right-radius: 6px ; |
|
| 106 |
} |
|
| 107 |
} |
|
| 108 |
& > table.tbl-horizontal:last-child{
|
|
| 109 |
border-bottom-left-radius: 6px ; |
|
| 110 |
border-bottom-right-radius: 6px ; |
|
| 111 |
margin-bottom: 0 ; |
|
| 112 |
} |
|
| 113 |
} |
|
| 114 |
|
|
| 115 |
.cke_editable{
|
|
| 116 |
margin-left: 0.0em !important; |
|
| 117 |
} |
|
| 118 |
*/ |
|
| 38 |
// Custom overrides |
|
| 39 |
|
|
| 40 |
|
|
| 41 |
// -------------------------------------- |
|
| 42 |
// DISABLE CAPTIONS IN HORIZONTAL TABLES |
|
| 43 |
// -------------------------------------- |
|
| 44 |
// Captions are good. It is a nice guidance thru Kivitendo and captions also force |
|
| 45 |
// programmers |
|
| 46 |
|
|
| 47 |
|
|
| 48 |
|
|
| 49 |
//table.tbl-horizontal {
|
|
| 50 |
// caption, |
|
| 51 |
// th.caption, |
|
| 52 |
// td.caption{
|
|
| 53 |
// display: none ; // instead of: table-caption |
|
| 54 |
// } |
|
| 55 |
//} |
|
| 56 |
// |
|
| 57 |
//div.wrapper.bordered {
|
|
| 58 |
// padding: 0.6em 0 0.2em 0.4em; |
|
| 59 |
// |
|
| 60 |
// &::before{
|
|
| 61 |
// content: "Detail Information"; //instead of caption in toggled wrapper |
|
| 62 |
// z-index: 9000 ; |
|
| 63 |
// } |
|
| 64 |
// .tbl-horizontal{ display: none ; }
|
|
| 65 |
// .toggles { margin-top: -3px; }
|
|
| 66 |
// .toggles.max {
|
|
| 67 |
// width: 100%; |
|
| 68 |
// z-index: 9001 ; |
|
| 69 |
// margin-top: -17px; |
|
| 70 |
// text-align: right; |
|
| 71 |
// display: block; |
|
| 72 |
// margin-right: 10px; |
|
| 73 |
// a.toggle.max{
|
|
| 74 |
// width: 100%; |
|
| 75 |
// background-position: right center; |
|
| 76 |
// } |
|
| 77 |
// } |
|
| 78 |
//} |
|
| 79 |
// /DISABLE CAPTIONS IN HORIZONTAL TABLES |
|
| 80 |
|
|
| 81 |
|
|
| 82 |
|
|
| 83 |
|
|
| 84 |
//table.tbl-horizontal {
|
|
| 85 |
// display: table ; |
|
| 86 |
// background-color: #ccc; |
|
| 87 |
// border-bottom: 12px #ccc solid ; |
|
| 88 |
// border-top-left-radius: 0 ; |
|
| 89 |
// border-top-right-radius: 0 ; |
|
| 90 |
// border-bottom-left-radius: @controlpanel-radius ; |
|
| 91 |
// border-bottom-right-radius: @controlpanel-radius ; |
|
| 92 |
// |
|
| 93 |
// & > caption{
|
|
| 94 |
// color: #ffffff !important; |
|
| 95 |
// background-color: @gray-dark; |
|
| 96 |
// padding-left: 0.8em; |
|
| 97 |
// border-top-left-radius: @controlpanel-radius ; |
|
| 98 |
// border-top-right-radius: @controlpanel-radius ; |
|
| 99 |
// //margin: -24px -12px 0.6em -12px ; |
|
| 100 |
// & > a, & > a:link, & > a:visited { decoration: none; color: #fff !important; }
|
|
| 101 |
// } |
|
| 102 |
// th{ padding-left: 0.3em; }
|
|
| 103 |
// td{ padding-right: 0.3em; }
|
|
| 104 |
// tbody { border-top: 8px #ccc solid; }
|
|
| 105 |
// &.checkered {
|
|
| 106 |
// tbody { border-top: none ; }
|
|
| 107 |
// border-bottom: none; |
|
| 108 |
// } |
|
| 109 |
// tbody > tr > td:first-child, |
|
| 110 |
// tbody > tr > th:first-child, |
|
| 111 |
// thead > tr > th:first-child{
|
|
| 112 |
// padding-left: 1.0em ; |
|
| 113 |
// } |
|
| 114 |
// tbody > tr:first-child {
|
|
| 115 |
// & > th { padding-top: 0.5em ; }
|
|
| 116 |
// & > td { padding-top: 0.5em ; }
|
|
| 117 |
// } |
|
| 118 |
// th.caption{
|
|
| 119 |
// color: #fff !important; |
|
| 120 |
// background-color: @gray-dark; |
|
| 121 |
// padding: 0.4em 0 0.3em 0.8em; |
|
| 122 |
// border-top: 6px solid #ccc; |
|
| 123 |
// border-bottom: 8px solid #ccc; |
|
| 124 |
// margin-bottom: 0.6em ; |
|
| 125 |
// //margin: -24px -12px 0.6em -18px ; |
|
| 126 |
// } |
|
| 127 |
//} |
|
| 128 |
// |
|
| 129 |
//.col{
|
|
| 130 |
// padding-bottom: 0.4em ; |
|
| 131 |
// |
|
| 132 |
// & > table.tbl-horizontal {
|
|
| 133 |
// margin-right: 0 !important; |
|
| 134 |
// //border-top-left-radius: 0 ; |
|
| 135 |
// //border-top-right-radius: 0 ; |
|
| 136 |
// border-radius: 0 ; |
|
| 137 |
// padding-bottom: 0 ; |
|
| 138 |
// |
|
| 139 |
// caption{
|
|
| 140 |
// border-top-left-radius: 0 ; |
|
| 141 |
// border-top-right-radius: 0 ; |
|
| 142 |
// } |
|
| 143 |
// } |
|
| 144 |
// & > table.tbl-horizontal:first-child{
|
|
| 145 |
// border-top-left-radius: 0 ; |
|
| 146 |
// border-top-right-radius: 0 ; |
|
| 147 |
// border-bottom-left-radius: 0 ; |
|
| 148 |
// border-bottom-right-radius: 0 ; |
|
| 149 |
// margin-bottom: 0 ; |
|
| 150 |
// caption{
|
|
| 151 |
// border-top-left-radius: @controlpanel-radius ; |
|
| 152 |
// border-top-right-radius: @controlpanel-radius ; |
|
| 153 |
// } |
|
| 154 |
// } |
|
| 155 |
// & > table.tbl-horizontal:last-child{
|
|
| 156 |
// border-bottom-left-radius: @controlpanel-radius ; |
|
| 157 |
// border-bottom-right-radius: @controlpanel-radius ; |
|
| 158 |
// margin-bottom: 0 ; |
|
| 159 |
// } |
|
| 160 |
//} |
|
| 161 |
// |
|
| 162 |
//.cke_editable{
|
|
| 163 |
// margin-left: 0.0em !important; |
|
| 164 |
//} |
|
| 165 |
|
|
| 166 |
|
|
| 119 | 167 |
|
| 168 |
// -------------------------------------- |
|
| 169 |
// Centered Aligned Tables |
|
| 170 |
// -------------------------------------- |
|
| 171 |
// Do everybody a favor: do not activate it |
|
| 120 | 172 |
|
| 173 |
//table.tbl-list{
|
|
| 174 |
// margin: 0 auto 1.0em auto; |
|
| 175 |
//} |
|
| css/less/custom_less_variables.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* CUSTOM VARIABLES (custom_variables.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 5 |
|
|
| 6 |
// ---------------------------------------------------------------------------- |
|
| 7 |
// |
|
| 8 |
// CUSTOM VARIABLES (ONLY FOR OVERRIDES IN CUSTOM.LESS) |
|
| 9 |
// |
|
| 10 |
// ---------------------------------------------------------------------------- |
|
| 11 |
// DESCRIPTION: Place your custom variables here |
|
| 12 |
// For more information about variables see variables.less |
|
| 13 |
// Copy variables from variable.less into this files here |
|
| 14 |
// Do not change variables and less stuff in the original source files |
|
| 15 |
// then you will be happy with your git work |
|
| 16 |
// |
|
| 17 |
// CONTENTS: |
|
| 18 |
// - SUBJECT |
|
| 19 |
// - - My override variables |
|
| 20 |
// - - My own variables |
|
| 21 |
// ---------------------------------------------------------------------------- |
|
| 22 |
|
|
| 23 |
|
|
| 24 |
// |
|
| 25 |
// ********************************** |
|
| 26 |
// MY OVERRIDE VARIABLES |
|
| 27 |
// ********************************** |
|
| 28 |
|
|
| 29 |
|
|
| 30 |
// ----------------------- |
|
| 31 |
// BORDER-COLORS |
|
| 32 |
// ----------------------- |
|
| 33 |
// Change (or darken!) the borders colors if they are looking to fancy |
|
| 34 |
|
|
| 35 |
|
|
| 36 |
|
|
| 37 |
|
|
| 38 |
// |
|
| 39 |
// ********************************** |
|
| 40 |
// MY SPECIAL VARIABLES |
|
| 41 |
// ********************************** |
|
| 42 |
|
|
| 43 |
//@my-class-padding: 0.2em ; // just an example |
|
| css/less/developing.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* DEVELOPING (developing.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// Developing-Section |
| ... | ... | |
| 20 | 24 |
body.developing{
|
| 21 | 25 |
|
| 22 | 26 |
&>header{
|
| 23 |
background-color: @h1-bg; |
|
| 27 |
background-color: @brand-h1-bg;
|
|
| 24 | 28 |
display: block; |
| 25 | 29 |
overflow: hidden; |
| 26 | 30 |
h1{
|
| 27 | 31 |
float: left; |
| 28 |
color: @h1-color ; |
|
| 32 |
color: @brand-h1-color ;
|
|
| 29 | 33 |
padding: 1.0em; |
| 30 | 34 |
} |
| 31 | 35 |
nav{
|
| ... | ... | |
| 80 | 84 |
p.picture{
|
| 81 | 85 |
background-color: #fff; |
| 82 | 86 |
padding: 0.8em; |
| 83 |
border: 1px @gray-medium solid;
|
|
| 87 |
border: 1px @gray-standard solid;
|
|
| 84 | 88 |
display: inline-block; |
| 85 | 89 |
width: auto; |
| 86 | 90 |
} |
| ... | ... | |
| 111 | 115 |
//border: 1px black solid ; |
| 112 | 116 |
display: block; |
| 113 | 117 |
overflow: visible; |
| 114 |
border-bottom: 1px @gray-mediumdark solid ;
|
|
| 118 |
border-bottom: 1px @gray-dark solid ; |
|
| 115 | 119 |
} |
| 116 | 120 |
tr:last-child td { border: none ;}
|
| 117 | 121 |
|
| ... | ... | |
| 139 | 143 |
|
| 140 | 144 |
} // /.wrapper |
| 141 | 145 |
|
| 146 |
// Buttons |
|
| 147 |
// Action SOFT/NEUTRAL (no submission to server page) |
|
| 148 |
input[type="submit"], |
|
| 149 |
input[type="button"], |
|
| 150 |
input[type="button"].button, |
|
| 151 |
button[type="submit"], |
|
| 152 |
button[type="button"], |
|
| 153 |
a.button {
|
|
| 154 |
color: @button-strong-color; |
|
| 155 |
background-color: @button-strong-bg; |
|
| 156 |
border: @button-strong-border; |
|
| 157 |
|
|
| 158 |
&.hover{
|
|
| 159 |
color: @button-strong-hover-color; |
|
| 160 |
background-color: @button-strong-hover-bg; |
|
| 161 |
border: @button-strong-hover-border; |
|
| 162 |
} |
|
| 163 |
&.active{
|
|
| 164 |
color: @button-strong-active-color; |
|
| 165 |
background-color: @button-strong-active-bg; |
|
| 166 |
border: @button-strong-active-border; |
|
| 167 |
} |
|
| 168 |
} |
|
| 169 |
// Action SOFT/NEUTRAL (no submission to server page) |
|
| 170 |
input[type="button"].neutral, |
|
| 171 |
input[type="submit"].neutral, |
|
| 172 |
input[type="reset"], |
|
| 173 |
input[type="reset"].neutral, |
|
| 174 |
button.neutral, |
|
| 175 |
button[type="reset"] {
|
|
| 176 |
color: @button-neutral-color ; |
|
| 177 |
background-color: @button-neutral-bg; |
|
| 178 |
border: @button-neutral-border ; |
|
| 179 |
&.neutral-hover {
|
|
| 180 |
color: @button-neutral-hover-color ; |
|
| 181 |
background-color: @button-neutral-hover-bg; |
|
| 182 |
border: @button-neutral-hover-border ; |
|
| 183 |
} |
|
| 184 |
&.neutral-active, |
|
| 185 |
&.neutral-focus {
|
|
| 186 |
color: @button-neutral-active-color; |
|
| 187 |
background-color: @button-neutral-active-bg; |
|
| 188 |
border: @button-neutral-active-border ; |
|
| 189 |
} |
|
| 190 |
} |
|
| 191 |
|
|
| 192 |
|
|
| 193 |
|
|
| 194 |
|
|
| 195 |
|
|
| 196 |
|
|
| 142 | 197 |
} // /body.developing |
| css/less/developing_demo.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* DEVELOPING DEMO (developing_demo.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// DEVELOPERS DEMO |
| ... | ... | |
| 13 | 17 |
// ---------------------------------------------------------------------------- |
| 14 | 18 |
|
| 15 | 19 |
|
| 16 |
@import 'variables'; |
|
| 20 |
@import 'variables.less';
|
|
| 17 | 21 |
|
| 18 | 22 |
// -------------- |
| 19 | 23 |
// Grey shades |
| 20 |
.gray-darker { background-color: @gray-darker }
|
|
| 21 |
.gray-dark { background-color: @gray-dark }
|
|
| 22 |
.gray-mediumdark { background-color: @gray-mediumdark }
|
|
| 23 |
.gray { background-color: @gray }
|
|
| 24 |
.gray-medium { background-color: @gray-medium }
|
|
| 25 |
.gray-light { background-color: @gray-light }
|
|
| 26 |
.gray-lighter { background-color: @gray-lighter }
|
|
| 27 |
.gray-morelighter { background-color: @gray-morelighter }
|
|
| 24 |
.gray-darker { background-color: @gray-darker }
|
|
| 25 |
.gray-verydark { background-color: @gray-verydark }
|
|
| 26 |
.gray-dark { background-color: @gray-dark }
|
|
| 27 |
.gray-standard { background-color: @gray-standard }
|
|
| 28 |
.gray-light { background-color: @gray-light }
|
|
| 29 |
.gray-lighter { background-color: @gray-lighter }
|
|
| 28 | 30 |
.gray-verylight { background-color: @gray-verylight }
|
| 29 |
.gray-superlight { background-color: @gray-superlight }
|
|
| 31 |
.gray-superlight{ background-color: @gray-superlight }
|
|
| 30 | 32 |
// -------------- |
| 31 | 33 |
// Divers Color Specications |
| 32 | 34 |
// for message and other coloured stuff |
| ... | ... | |
| 102 | 104 |
// -------------------------------------- |
| 103 | 105 |
// SCAFFOLDING |
| 104 | 106 |
// -------------------------------------- |
| 105 |
.body-bg { background-color: @body-bg } // general
|
|
| 107 |
.body-bg { background-color: @body-bg } // general PENDENT: obsolete
|
|
| 106 | 108 |
.content-bg { background-color: @content-bg } // background first tabs
|
Auch abrufbar als: Unified diff
css/less -> Geaenderte & Neue Less-Dateien