Revision f9812a52
Von Sven Schöling vor mehr als 2 Jahren hinzugefügt
| css/design40/README.stylesheets | ||
|---|---|---|
| 1 |
Some notes about stylesheets: |
|
| 2 |
|
|
| 3 |
* NOT every directory in css/ is considered a style to be chosen. The available |
|
| 4 |
stylesheets are hardcoded in at least 3 places: |
|
| 5 |
- SL/Auth.pm:read_user |
|
| 6 |
- SL/Controller/Admin.pm:init_stylesheets |
|
| 7 |
- bin/mozilla/am.pl:config |
|
| 8 |
yes it sucks. change it, if you like. |
|
| 9 |
|
|
| 10 |
* If a stylesheet is requests from controller code, it is searched in this order: |
|
| 11 |
- css/<stylesheet_of_current_user>/<path> |
|
| 12 |
- css/<path> |
|
| 13 |
- <path> |
|
| 14 |
|
|
| 15 |
so common libraries can be put higher here, to be included by any stylesheet |
|
| 16 |
|
|
| 17 |
* 'kivitendo' is used as the fallback style if no style was found or the style |
|
| 18 |
chosen was invalid. |
|
| 19 |
|
|
| 20 |
* Pay attention to the position of relative image urls. Most should not be |
|
| 21 |
included in css anyway but should use the generated icon maps. For the rest, |
|
| 22 |
a couple of ../ may be needed to get the right path. |
|
| 23 |
|
|
| 24 |
* If you edit another styles, these are things that are known to get broken. |
|
| 25 |
Be sure to test them thoroughly: |
|
| 26 |
- tabs |
|
| 27 |
- calendars |
|
| 28 |
- all menus |
|
| 29 |
- autocompletion (parts/customers) |
|
| 30 |
- charts of accounts |
|
| 31 |
- multiselect |
|
| 32 |
- ckeeditor |
|
| 33 |
- jquery-ui widgets (i hate those things) |
|
| css/design40/admin.css | ||
|---|---|---|
| 1 |
a.no-underlined-links, |
|
| 2 |
a.no-underlined-links:visited, |
|
| 3 |
a.no-underlined-links:hover {
|
|
| 4 |
text-decoration: none !important; |
|
| 5 |
background-color: transparent !important; |
|
| 6 |
border: none; |
|
| 7 |
} |
|
| 8 |
a.no-underlined-links:hover {
|
|
| 9 |
background: none; |
|
| 10 |
} |
|
| 11 |
body div.admin {
|
|
| 12 |
margin: 0 ; |
|
| 13 |
} |
|
| 14 |
body div.admin h1 {
|
|
| 15 |
background-color: #fe5f14 !important; |
|
| 16 |
color: #ffffff; |
|
| 17 |
top: 0px ; |
|
| 18 |
position: fixed; |
|
| 19 |
width: 100% ; |
|
| 20 |
padding: 0.1em 0.5em 0.3em 0.6em ; |
|
| 21 |
} |
|
| 22 |
body div.admin .tabwidget {
|
|
| 23 |
top: 35px ; |
|
| 24 |
padding: 1.8em 0 0 0 !important; |
|
| 25 |
} |
|
| 26 |
body div.admin .tabwidget .ui-tabs-panel {
|
|
| 27 |
padding: 2.0em 1.0em 1.0em 1.0em ; |
|
| 28 |
} |
|
| 29 |
body div.admin form {
|
|
| 30 |
display: block ; |
|
| 31 |
margin-top: 1px ; |
|
| 32 |
} |
|
| 33 |
body div.admin > form {
|
|
| 34 |
padding-top: 3.8em ; |
|
| 35 |
} |
|
| 36 |
body div.admin .wrapper {
|
|
| 37 |
margin-top: 4.0em ; |
|
| 38 |
} |
|
| css/design40/background_jobs.css | ||
|---|---|---|
| 1 |
/* Jobverwaltung */ |
|
| 2 |
.background_job_list tbody pre, |
|
| 3 |
.background_job_details tbody pre {
|
|
| 4 |
margin: 0px; |
|
| 5 |
} |
|
| 6 |
|
|
| 7 |
.background_job_details tbody th {
|
|
| 8 |
text-align: right; |
|
| 9 |
vertical-align: top; |
|
| 10 |
} |
|
| 11 |
|
|
| 12 |
.background_job_details tbody td {
|
|
| 13 |
vertical-align: top; |
|
| 14 |
} |
|
| css/design40/bwa.css | ||
|---|---|---|
| 1 |
/* Allgemeine Schriftdefinition */ |
|
| 2 |
th,td {
|
|
| 3 |
font-size:small; |
|
| 4 |
} |
|
| 5 |
|
|
| 6 |
@page {
|
|
| 7 |
size: landscape; |
|
| 8 |
margin: 0.5cm; |
|
| 9 |
} |
|
| 10 |
|
|
| 11 |
/* Definition Tabellenueberschrift */ |
|
| 12 |
|
|
| 13 |
.left { text-align:left; }
|
|
| 14 |
.center { text-align:center; }
|
|
| 15 |
.right { text-align:right; }
|
|
| 16 |
|
|
| 17 |
tr.headline { border:0; }
|
|
| 18 |
tr.headline td { border:0; }
|
|
| 19 |
h3 { font-size:120%; }
|
|
| 20 |
h3 { font-size:100%; }
|
|
| 21 |
|
|
| 22 |
/* Tabellenkopf */ |
|
| 23 |
th {
|
|
| 24 |
font-weight: bold; |
|
| 25 |
border-bottom: solid thin black; |
|
| 26 |
padding:0 10px; |
|
| 27 |
text-align:right; |
|
| 28 |
} |
|
| 29 |
|
|
| 30 |
th.left { border-left: solid thin black; }
|
|
| 31 |
th.right { border-right: solid thin black; }
|
|
| 32 |
|
|
| 33 |
.querkopf th.right { text-align:center; }
|
|
| 34 |
.querkopf th {
|
|
| 35 |
border-top: solid thin black; |
|
| 36 |
border-bottom:0; |
|
| 37 |
} |
|
| 38 |
|
|
| 39 |
/* Tabelleninhalt */ |
|
| 40 |
td {
|
|
| 41 |
text-align:right; |
|
| 42 |
padding:0 0.5em; |
|
| 43 |
} |
|
| 44 |
td.left { border-left: solid thin black; }
|
|
| 45 |
td.right { border-right: solid thin black; }
|
|
| 46 |
|
|
| 47 |
|
|
| 48 |
/* jede zweite Zeile grau hinterlegen */ |
|
| 49 |
tr.grey {
|
|
| 50 |
background:#f0f0f0; |
|
| 51 |
} |
|
| 52 |
|
|
| 53 |
/* letzte Zeile in der Tabelle */ |
|
| 54 |
#last td{ border-bottom: solid thin black; }
|
|
| 55 |
|
|
| 56 |
/* Zwischensumme/-ueberschriften */ |
|
| 57 |
tr.subtotal td { font-weight: bold; }
|
|
| 58 |
|
|
| 59 |
/* Fusszeile unter der Tabelle */ |
|
| 60 |
td.footer {
|
|
| 61 |
text-align:right; |
|
| 62 |
font-size:smaller; |
|
| 63 |
} |
|
| css/design40/common.css | ||
|---|---|---|
| 1 |
|
|
| 2 |
/* class for numeric columns in tables */ |
|
| 3 |
.numeric { text-align: right }
|
|
| 4 |
|
|
| 5 |
/* various oneshot decoration for legacy purpose. dont use */ |
|
| 6 |
.small-text { font-size: 70% }
|
|
| 7 |
.bold { font-weight: bold }
|
|
| 8 |
|
|
| 9 |
.float-left { float: left }
|
|
| 10 |
.float-right { float: right }
|
|
| 11 |
|
|
| 12 |
/* quirk to force certain constructs to block context */ |
|
| 13 |
.block-context { overflow: hidden }
|
|
| 14 |
|
|
| 15 |
/* position */ |
|
| 16 |
.position-relative { position: relative }
|
|
| 17 |
.position-absolute { position: absolute }
|
|
| 18 |
|
|
| 19 |
.hidden { display: none; }
|
|
| 20 |
|
|
| 21 |
/* media stuff */ |
|
| 22 |
@media screen { .noscreen { display: none } }
|
|
| 23 |
@media print { .noprint { display: none } }
|
|
| 24 |
@media handheld { .nomobile { display: none } }
|
|
| 25 |
|
|
| 26 |
body { behavior:url("csshover.htc") }
|
|
| 27 |
|
|
| 28 |
/* class to fix container around floats */ |
|
| 29 |
.clearfix:after {
|
|
| 30 |
clear:both; |
|
| 31 |
content:"."; |
|
| 32 |
display:block; |
|
| 33 |
font-size:0; |
|
| 34 |
height:0; |
|
| 35 |
visibility:hidden; |
|
| 36 |
} |
|
| 37 |
|
|
| 38 |
/* CTI */ |
|
| 39 |
a.cti_call_action {
|
|
| 40 |
display: inline-block; |
|
| 41 |
padding-left: 18px; |
|
| 42 |
height: 16px; |
|
| 43 |
position: relative; |
|
| 44 |
top: 2px; |
|
| 45 |
vertical-align: center; |
|
| 46 |
background-image: url(../image/icons/16x16/phone.png); |
|
| 47 |
background-repeat: no-repeat; |
|
| 48 |
} |
|
| 49 |
|
|
| 50 |
/* the cvars table in the 2. row */ |
|
| 51 |
.row2-cvars-table tr { vertical-align: top }
|
|
| 52 |
.row2-cvars-table th { text-align: right; padding-left: 15px; padding-right: 0 }
|
|
| 53 |
.row2-cvars-table td, .row2-cvars-table th { padding-top: 10px }
|
|
| 54 |
|
|
| 55 |
input.grow_on_focus {
|
|
| 56 |
width: 20px; |
|
| 57 |
transition: width 0.1s; |
|
| 58 |
-moz-transition: width 0.1s; |
|
| 59 |
-webkit-transition: width 0.1s; |
|
| 60 |
-o-transition: width 0.1s; |
|
| 61 |
} |
|
| 62 |
input.grow_on_focus:focus { width: 150px }
|
|
| 63 |
|
|
| 64 |
/* clickable text anchors, usually with attached javascript handlers */ |
|
| 65 |
.interact { color: gray }
|
|
| 66 |
.interact:hover { color: black; }
|
|
| 67 |
.cursor-default { cursor: default }
|
|
| 68 |
.cursor-pointer { cursor: pointer }
|
|
| 69 |
.cursor-help { cursor: help }
|
|
| 70 |
|
|
| 71 |
/* dunning */ |
|
| 72 |
#dunning_invoice_list .direct_debit td, |
|
| 73 |
#dunning_invoice_list .direct_debit a {
|
|
| 74 |
color: #aaa; |
|
| 75 |
} |
|
| 76 |
/* orderitems */ |
|
| 77 |
.shipped { color: green }
|
|
| 78 |
.not_shipped { color: red }
|
|
| 79 |
|
|
| 80 |
/* actionbar styling */ |
|
| 81 |
div.layout-actionbar {
|
|
| 82 |
position: fixed; |
|
| 83 |
height: 28px; |
|
| 84 |
top: 20px; |
|
| 85 |
z-index: 20; |
|
| 86 |
width: 100%; |
|
| 87 |
padding: 2px; |
|
| 88 |
} |
|
| 89 |
|
|
| 90 |
div.layout-actionbar-action {
|
|
| 91 |
-webkit-touch-callout: none; /* iOS Safari */ |
|
| 92 |
-webkit-user-select: none; /* Chrome/Safari/Opera */ |
|
| 93 |
-khtml-user-select: none; /* Konqueror */ |
|
| 94 |
-moz-user-select: none; /* Firefox */ |
|
| 95 |
-ms-user-select: none; /* Internet Explorer/Edge */ |
|
| 96 |
user-select: none; /* don't select text on double click */ |
|
| 97 |
} |
|
| 98 |
|
|
| 99 |
div.layout-actionbar ~ div:first {
|
|
| 100 |
padding-top: 25px; |
|
| 101 |
} |
|
| 102 |
|
|
| 103 |
div.layout-actionbar > div + div {
|
|
| 104 |
margin-left: 2px; |
|
| 105 |
} |
|
| 106 |
|
|
| 107 |
div.layout-actionbar-separator {
|
|
| 108 |
display: inline-block; |
|
| 109 |
width: 20px; |
|
| 110 |
} |
|
| 111 |
|
|
| 112 |
div.layout-actionbar div.layout-actionbar-link, |
|
| 113 |
div.layout-actionbar div.layout-actionbar-submit, |
|
| 114 |
div.layout-actionbar div.layout-actionbar-scriptbutton, |
|
| 115 |
div.layout-actionbar div.layout-actionbar-link:focus, |
|
| 116 |
div.layout-actionbar div.layout-actionbar-submit:focus, |
|
| 117 |
div.layout-actionbar div.layout-actionbar-scriptbutton:focus {
|
|
| 118 |
display: inline-block; |
|
| 119 |
width: 120px; |
|
| 120 |
box-sizing: border-box; |
|
| 121 |
text-align: center; |
|
| 122 |
border-width: 1px; |
|
| 123 |
border-style: solid; |
|
| 124 |
padding: 4px 4px; |
|
| 125 |
cursor: default; |
|
| 126 |
} |
|
| 127 |
|
|
| 128 |
div.layout-actionbar div.layout-actionbar-link:hover, |
|
| 129 |
div.layout-actionbar div.layout-actionbar-submit:hover, |
|
| 130 |
div.layout-actionbar div.layout-actionbar-scriptbutton:hover {
|
|
| 131 |
border-width: 1px; |
|
| 132 |
border-style: solid; |
|
| 133 |
} |
|
| 134 |
|
|
| 135 |
div.layout-actionbar-combobox {
|
|
| 136 |
position: relative; |
|
| 137 |
display: inline-block; |
|
| 138 |
} |
|
| 139 |
|
|
| 140 |
div.layout-actionbar div.layout-actionbar-action {
|
|
| 141 |
height: 25px; |
|
| 142 |
} |
|
| 143 |
|
|
| 144 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head div {
|
|
| 145 |
width: 100px; |
|
| 146 |
height: 25px; |
|
| 147 |
} |
|
| 148 |
|
|
| 149 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head span {
|
|
| 150 |
display: inline-block; |
|
| 151 |
border-width: 1px 1px 1px 1px; |
|
| 152 |
border-style: solid; |
|
| 153 |
padding: 4px; |
|
| 154 |
width: 14px; |
|
| 155 |
height: 15px; |
|
| 156 |
position: absolute; |
|
| 157 |
top: 0; |
|
| 158 |
right: 0; |
|
| 159 |
} |
|
| 160 |
|
|
| 161 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head span:after {
|
|
| 162 |
content: ""; |
|
| 163 |
width: 0; |
|
| 164 |
height: 0; |
|
| 165 |
position: absolute; |
|
| 166 |
right: 8px; |
|
| 167 |
top: 50%; |
|
| 168 |
margin-top: -3px; |
|
| 169 |
border-width: 3px 3px 0 3px; |
|
| 170 |
border-style: solid; |
|
| 171 |
} |
|
| 172 |
|
|
| 173 |
div.layout-actionbar-combobox.active div.layout-actionbar-combobox-head span:after {
|
|
| 174 |
border-width: 0 3px 3px 3px; |
|
| 175 |
} |
|
| 176 |
|
|
| 177 |
|
|
| 178 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-head {
|
|
| 179 |
padding-right: 20px; |
|
| 180 |
white-space: nowrap; |
|
| 181 |
display: block; |
|
| 182 |
} |
|
| 183 |
|
|
| 184 |
div.layout-actionbar-combobox div.layout-actionbar-combobox-list {
|
|
| 185 |
position: absolute; |
|
| 186 |
display: none; |
|
| 187 |
min-width: 120px; |
|
| 188 |
} |
|
| 189 |
|
|
| 190 |
div.layout-actionbar-combobox.active div.layout-actionbar-combobox-list {
|
|
| 191 |
display: inline-block; |
|
| 192 |
z-index: 10; |
|
| 193 |
} |
|
| 194 |
|
|
| 195 |
div.layout-actionbar-combobox-list div.layout-actionbar-action {
|
|
| 196 |
white-space: nowrap; |
|
| 197 |
display: block; |
|
| 198 |
position: relative; |
|
| 199 |
width: 100%; |
|
| 200 |
text-align: left; |
|
| 201 |
padding: 4px; |
|
| 202 |
} |
|
| 203 |
|
|
| 204 |
div.cke_textarea_inline > :first-child {
|
|
| 205 |
margin-top: 0; |
|
| 206 |
} |
|
| 207 |
div.cke_textarea_inline > :last-child {
|
|
| 208 |
margin-bottom: 0; |
|
| 209 |
} |
|
| 210 |
div.cke_textarea_inline {
|
|
| 211 |
overflow-y: auto; |
|
| 212 |
} |
|
| 213 |
div.cke_textarea_inline:focus {
|
|
| 214 |
outline: 0; |
|
| 215 |
} |
|
| css/design40/csshover.htc | ||
|---|---|---|
| 1 |
<attach event="ondocumentready" handler="parseStylesheets" /> |
|
| 2 |
<script> |
|
| 3 |
/** |
|
| 4 |
* Whatever:hover - V2.02.060206 - hover, active & focus |
|
| 5 |
* ------------------------------------------------------------ |
|
| 6 |
* (c) 2005 - Peter Nederlof |
|
| 7 |
* Peterned - http://www.xs4all.nl/~peterned/ |
|
| 8 |
* License - http://creativecommons.org/licenses/LGPL/2.1/ |
|
| 9 |
* |
|
| 10 |
* Whatever:hover is free software; you can redistribute it and/or |
|
| 11 |
* modify it under the terms of the GNU Lesser General Public |
|
| 12 |
* License as published by the Free Software Foundation; either |
|
| 13 |
* version 2.1 of the License, or (at your option) any later version. |
|
| 14 |
* |
|
| 15 |
* Whatever:hover is distributed in the hope that it will be useful, |
|
| 16 |
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
| 17 |
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
|
| 18 |
* Lesser General Public License for more details. |
|
| 19 |
* |
|
| 20 |
* Credits and thanks to: |
|
| 21 |
* Arnoud Berendsen, Martin Reurings, Robert Hanson |
|
| 22 |
* |
|
| 23 |
* howto: body { behavior:url("csshover.htc"); }
|
|
| 24 |
* ------------------------------------------------------------ |
|
| 25 |
*/ |
|
| 26 |
|
|
| 27 |
var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i, |
|
| 28 |
currentSheet, doc = window.document, hoverEvents = [], activators = {
|
|
| 29 |
onhover:{on:'onmouseover', off:'onmouseout'},
|
|
| 30 |
onactive:{on:'onmousedown', off:'onmouseup'},
|
|
| 31 |
onunknown:{on:'onfocus', off:'onblur'}
|
|
| 32 |
} |
|
| 33 |
|
|
| 34 |
function parseStylesheets() {
|
|
| 35 |
if(!/MSIE (5|6)/.test(navigator.userAgent)) return; |
|
| 36 |
window.attachEvent('onunload', unhookHoverEvents);
|
|
| 37 |
var sheets = doc.styleSheets, l = sheets.length; |
|
| 38 |
for(var i=0; i<l; i++) |
|
| 39 |
parseStylesheet(sheets[i]); |
|
| 40 |
} |
|
| 41 |
function parseStylesheet(sheet) {
|
|
| 42 |
if(sheet.imports) {
|
|
| 43 |
try {
|
|
| 44 |
var imports = sheet.imports, l = imports.length; |
|
| 45 |
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]); |
|
| 46 |
} catch(securityException){}
|
|
| 47 |
} |
|
| 48 |
|
|
| 49 |
try {
|
|
| 50 |
var rules = (currentSheet = sheet).rules, l = rules.length; |
|
| 51 |
for(var j=0; j<l; j++) parseCSSRule(rules[j]); |
|
| 52 |
} catch(securityException){}
|
|
| 53 |
} |
|
| 54 |
|
|
| 55 |
function parseCSSRule(rule) {
|
|
| 56 |
var select = rule.selectorText, style = rule.style.cssText; |
|
| 57 |
if(!csshoverReg.test(select) || !style) return; |
|
| 58 |
|
|
| 59 |
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1'); |
|
| 60 |
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo); |
|
| 61 |
var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1]; |
|
| 62 |
var affected = select.replace(/:(hover|active|unknown).*$/, ''); |
|
| 63 |
var elements = getElementsBySelect(affected); |
|
| 64 |
if(elements.length == 0) return; |
|
| 65 |
|
|
| 66 |
currentSheet.addRule(newSelect, style); |
|
| 67 |
for(var i=0; i<elements.length; i++) |
|
| 68 |
new HoverElement(elements[i], className, activators[pseudo]); |
|
| 69 |
} |
|
| 70 |
|
|
| 71 |
function HoverElement(node, className, events) {
|
|
| 72 |
if(!node.hovers) node.hovers = {};
|
|
| 73 |
if(node.hovers[className]) return; |
|
| 74 |
node.hovers[className] = true; |
|
| 75 |
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
|
|
| 76 |
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
|
|
| 77 |
} |
|
| 78 |
function hookHoverEvent(node, type, handler) {
|
|
| 79 |
node.attachEvent(type, handler); |
|
| 80 |
hoverEvents[hoverEvents.length] = {
|
|
| 81 |
node:node, type:type, handler:handler |
|
| 82 |
}; |
|
| 83 |
} |
|
| 84 |
|
|
| 85 |
function unhookHoverEvents() {
|
|
| 86 |
for(var e,i=0; i<hoverEvents.length; i++) {
|
|
| 87 |
e = hoverEvents[i]; |
|
| 88 |
e.node.detachEvent(e.type, e.handler); |
|
| 89 |
} |
|
| 90 |
} |
|
| 91 |
|
|
| 92 |
function getElementsBySelect(rule) {
|
|
| 93 |
var parts, nodes = [doc]; |
|
| 94 |
parts = rule.split(' ');
|
|
| 95 |
for(var i=0; i<parts.length; i++) {
|
|
| 96 |
nodes = getSelectedNodes(parts[i], nodes); |
|
| 97 |
} return nodes; |
|
| 98 |
} |
|
| 99 |
function getSelectedNodes(select, elements) {
|
|
| 100 |
var result, node, nodes = []; |
|
| 101 |
var identify = (/\#([a-z0-9_-]+)/i).exec(select); |
|
| 102 |
if(identify) {
|
|
| 103 |
var element = doc.getElementById(identify[1]); |
|
| 104 |
return element? [element]:nodes; |
|
| 105 |
} |
|
| 106 |
|
|
| 107 |
var classname = (/\.([a-z0-9_-]+)/i).exec(select); |
|
| 108 |
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ''); |
|
| 109 |
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
|
|
| 110 |
for(var i=0; i<elements.length; i++) {
|
|
| 111 |
result = tagName? elements[i].all.tags(tagName):elements[i].all; |
|
| 112 |
for(var j=0; j<result.length; j++) {
|
|
| 113 |
node = result[j]; |
|
| 114 |
if(classReg && !classReg.test(node.className)) continue; |
|
| 115 |
nodes[nodes.length] = node; |
|
| 116 |
} |
|
| 117 |
} |
|
| 118 |
|
|
| 119 |
return nodes; |
|
| 120 |
} |
|
| 121 |
</script> |
|
| css/design40/development/index.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<link href="../style.css" rel="stylesheet"> |
|
| 6 |
<title>Test und Entwicklung des Kivitendo-CSS</title> |
|
| 7 |
</head> |
|
| 8 |
<body class="developing"> |
|
| 9 |
<div class="wrapper"> |
|
| 10 |
<header> |
|
| 11 |
<h1>Entwicklung & Dokumentation des Kivitendo-CSS</h1> |
|
| 12 |
<nav></nav> |
|
| 13 |
</header> |
|
| 14 |
|
|
| 15 |
<p>Diese Mini-Site dient zur Entwicklung und Dokumentation des neuen Designs von Kivitendo. Das bedeutet auch, dass die neuen, aktuellen Kivitendo-Stylesheets hier ebenfalls angewendet werden.</p> |
|
| 16 |
<ul> |
|
| 17 |
<li><a href="form-elements.html" title="Formular-Elemente">Formular-Elemente</a></li> |
|
| 18 |
<li><a href="form-elements-special.html" title="Formular-Elemente">Spezielle Formular-Elemente</a></li> |
|
| 19 |
<li><a href="tables.html" title="Tabellen in Kivitendo">Tabellen</a></li> |
|
| 20 |
<li><a href="table-dimensions.html" title="Tabellen-Abmessungen in Kivitendo">Tabellen-Abmessungen</a></li> |
|
| 21 |
<li><a href="farben.html" title="Details zum Einsatz von Farben in Kivitendo">Einsatz von Farben</a></li> |
|
| 22 |
<li><a href="farben-demo.html" title="Anzeige aller Farben in Kivitendo">Alle Farben in Kivitendo</a></li> |
|
| 23 |
<li><a href="anleitung.html" title="Anzeige aller Farben in Kivitendo">Anleitung & Grundregeln</a></li> |
|
| 24 |
</ul> |
|
| 25 |
|
|
| 26 |
</div> |
|
| 27 |
</body> |
|
| 28 |
</html> |
|
| css/design40/development/kivi-colors.html | ||
|---|---|---|
| 1 |
<!DOCTYPE html> |
|
| 2 |
<html lang="de"> |
|
| 3 |
<head> |
|
| 4 |
<meta charset="utf-8" /> |
|
| 5 |
<title>Kivitendo: Entwicklung von Farben</title> |
|
| 6 |
<link type="text/css" href="style.css" rel="stylesheet"> |
|
| 7 |
<style type="text/css"> |
|
| 8 |
|
|
| 9 |
|
|
| 10 |
h2 {
|
|
| 11 |
clear: both; |
|
| 12 |
margin: 2.0em 0 0 0; |
|
| 13 |
display: block; |
|
| 14 |
} |
|
| 15 |
|
|
| 16 |
h3 {
|
|
| 17 |
clear: both; |
|
| 18 |
padding: 2.0em 0 0 0; |
|
| 19 |
margin: 0; |
|
| 20 |
display: block; |
|
| 21 |
} |
|
| 22 |
|
|
| 23 |
|
|
| 24 |
|
|
| 25 |
/* ----------------------- */ |
|
| 26 |
/* ELEMENTS WITH GREY COLORS */ |
|
| 27 |
/* ----------------------- */ |
|
| 28 |
div.gray-superdark { background-color: var( --gray-superdark ); }/* Black */
|
|
| 29 |
div.gray-verydark { background-color: var( --gray-verydark ); }
|
|
| 30 |
div.gray-darker { background-color: var( --gray-darker ); }
|
|
| 31 |
div.gray-dark { background-color: var( --gray-dark ); }
|
|
| 32 |
div.gray-standard { background-color: var( --gray-standard ); }
|
|
| 33 |
div.gray-light { background-color: var( --gray-light ); }
|
|
| 34 |
div.gray-lighter { background-color: var( --gray-lighter ); }
|
|
| 35 |
div.gray-verylight { background-color: var( --gray-verylight ); }
|
|
| 36 |
div.gray-superlight { background-color: var( --gray-superlight ); }/* White */
|
|
| 37 |
|
|
| 38 |
p.gray-superdark { color: var( --gray-superdark ); } /* Black */
|
|
| 39 |
p.gray-verydark { color: var( --gray-verydark ); }
|
|
| 40 |
p.gray-darker { color: var( --gray-darker ); }
|
|
| 41 |
p.gray-dark { color: var( --gray-dark ); }
|
|
| 42 |
p.gray-standard { color: var( --gray-standard ); }
|
|
| 43 |
p.gray-light { color: var( --gray-light ); }
|
|
| 44 |
p.gray-lighter { color: var( --gray-lighter ); }
|
|
| 45 |
p.gray-verylight { color: var( --gray-verylight ); }
|
|
| 46 |
p.gray-superlight { color: var( --gray-superlight ); } /* White */
|
|
| 47 |
|
|
| 48 |
/* ----------------------- */ |
|
| 49 |
/* ELEMENTS WITH BRAND COLORS */ |
|
| 50 |
/* ----------------------- */ |
|
| 51 |
div.brand-superdark { background-color: var( --color-superdark ); }/* Black */
|
|
| 52 |
div.brand-verydark { background-color: var( --color-verydark ); }
|
|
| 53 |
div.brand-darker { background-color: var( --color-darker ); }
|
|
| 54 |
div.brand-dark { background-color: var( --color-dark ); }
|
|
| 55 |
div.brand-standard { background-color: var( --color-standard ); }
|
|
| 56 |
div.brand-light { background-color: var( --color-light ); }
|
|
| 57 |
div.brand-lighter { background-color: var( --color-lighter ); }
|
|
| 58 |
div.brand-verylight { background-color: var( --color-verylight ); }
|
|
| 59 |
div.brand-superlight { background-color: var( --color-superlight ); }/* White */
|
|
| 60 |
|
|
| 61 |
|
|
| 62 |
/* ----------------------- */ |
|
| 63 |
/* MAIN ELEMENTS WITH BORDERS */ |
|
| 64 |
/* ----------------------- */ |
|
| 65 |
|
|
| 66 |
div.gray-superdark, |
|
| 67 |
div.gray-verydark, |
|
| 68 |
div.gray-darker, |
|
| 69 |
div.gray-dark, |
|
| 70 |
div.gray-standard, |
|
| 71 |
div.gray-light, |
|
| 72 |
div.gray-lighter, |
|
| 73 |
div.gray-verylight, |
|
| 74 |
div.brand-superdark, |
|
| 75 |
div.brand-verydark, |
|
| 76 |
div.brand-darker, |
|
| 77 |
div.brand-dark, |
|
| 78 |
div.brand-standard, |
|
| 79 |
div.brand-light, |
|
| 80 |
div.brand-lighter, |
|
| 81 |
div.brand-verylight {
|
|
| 82 |
border: 1px transparent solid ; |
|
| 83 |
} |
|
| 84 |
div.brand-superlight, |
|
| 85 |
div.gray-superlight {
|
|
| 86 |
border: 1px #dcdcdc solid; |
|
| 87 |
} |
|
| 88 |
|
|
| 89 |
p.brand-superdark { color: var( --color-superdark ); } /* Black */
|
|
| 90 |
p.brand-verydark { color: var( --color-verydark ); }
|
|
| 91 |
p.brand-darker { color: var( --color-darker ); }
|
|
| 92 |
p.brand-dark { color: var( --color-dark ); }
|
|
| 93 |
p.brand-standard { color: var( --color-standard ); }
|
|
| 94 |
p.brand-light { color: var( --color-light ); }
|
|
| 95 |
p.brand-lighter { color: var( --color-lighter ); }
|
|
| 96 |
p.brand-verylight { color: var( --color-verylight ); }
|
|
| 97 |
p.brand-superlight { color: var( --color-superlight ); } /* White */
|
|
| 98 |
|
|
| 99 |
div.tiny-box |
|
| 100 |
{
|
|
| 101 |
width: 10%; |
|
| 102 |
height: 16em; |
|
| 103 |
float: left; |
|
| 104 |
display: inline-block; |
|
| 105 |
overflow: hidden; |
|
| 106 |
vertical-align: middle; |
|
| 107 |
text-align: center; |
|
| 108 |
font-size: 70%; |
|
| 109 |
padding: 0; |
|
| 110 |
margin: 0; |
|
| 111 |
} |
|
| 112 |
div.box{
|
|
| 113 |
padding: 1.2em; |
|
| 114 |
vertical-align: middle; |
|
| 115 |
} |
|
| 116 |
|
|
| 117 |
div.inner |
|
| 118 |
{
|
|
| 119 |
display: table-cell; |
|
| 120 |
text-align: center; |
|
| 121 |
vertical-align: middle; |
|
| 122 |
height: 16em; |
|
| 123 |
} |
|
| 124 |
|
|
| 125 |
div.tiny-box p { vertical-align: middle; font-size: 120%; }
|
|
| 126 |
div.tiny-box p b { font-size: 120%; }
|
|
| 127 |
|
|
| 128 |
div.main-box{ overflow: hidden; padding: 1.0em ;s}
|
|
| 129 |
div.main-box .wrapper{ clear: left ; margin-bottom: 1.0em ; overflow: hidden ; }
|
|
| 130 |
|
|
| 131 |
.wrapper.lighter { color: var(--color-dark) ;}
|
|
| 132 |
.wrapper.light { color: var(--color-darker) ;}
|
|
| 133 |
.wrapper.standard { color: var(--color-verydark) ;}
|
|
| 134 |
.wrapper.dark { color: var(--color-verylight) ;}
|
|
| 135 |
.wrapper.darker { color: var(--color-lighter) ;}
|
|
| 136 |
.wrapper.verydark { color: var(--color-light) ;}
|
|
| 137 |
|
|
| 138 |
div.mbox |
|
| 139 |
{
|
|
| 140 |
border-width: 3px; |
|
| 141 |
border-style: solid; |
|
| 142 |
padding: 1.0em; |
|
| 143 |
width: 20% ; |
|
| 144 |
margin: 0 1.0em 0.3em 0 ; |
|
| 145 |
float: left; |
|
| 146 |
} |
|
| 147 |
|
|
| 148 |
div.msg, |
|
| 149 |
div.spin, |
|
| 150 |
div.msg_color |
|
| 151 |
{
|
|
| 152 |
border-width: 1px; |
|
| 153 |
border-style: solid; |
|
| 154 |
padding: 1.0em; |
|
| 155 |
width: 20% ; |
|
| 156 |
margin: 0 1.0em 0.3em 0 ; |
|
| 157 |
float: left; |
|
| 158 |
border-radius: 6px ; |
|
| 159 |
} |
|
| 160 |
div.msg.ok{ background-color: var(--msg-ok-light); color: var(--msg-ok-strong) ; }
|
|
| 161 |
div.msg.hint{ background-color: var(--msg-hint-light); color: var(--msg-hint-strong) ; }
|
|
| 162 |
div.msg.warning{ background-color: var(--msg-warning-light); color: var(--msg-warning-strong) ; }
|
|
| 163 |
div.msg.error{ background-color: var(--msg-error-light); color: var(--msg-error-strong) ; }
|
|
| 164 |
|
|
| 165 |
/* |
|
| 166 |
div.msg_color.ok{ background-color: var(--color-green-light); color: var(--color-green-strong) ; }
|
|
| 167 |
div.msg_color.hint{ background-color: var(--color-blue-light); color: var(--color-blue-strong) ; }
|
|
| 168 |
div.msg_color.warning{ background-color: var(--color-orange-light); color: var(--color-orange-strong) ; }
|
|
| 169 |
div.msg_color.error{ background-color: var(--color-red-light); color: var(--color-red-strong) ; }
|
|
| 170 |
*/ |
|
| 171 |
|
|
| 172 |
div.spin.spin_60{ background-color: var(--spin_60); color: var(--msg-ok-strong) ; }
|
|
| 173 |
div.spin.spin_120{ background-color: var(--spin_120); color: var(--msg-hint-strong) ; }
|
|
| 174 |
div.spin.spin_180{ background-color: var(--spin_180); color: var(--msg-warning-strong) ; }
|
|
| 175 |
div.spin.spin_240{ background-color: var(--spin_240); color: var(--msg-error-strong) ; }
|
|
| 176 |
|
|
| 177 |
|
|
| 178 |
|
|
| 179 |
|
|
| 180 |
|
|
| 181 |
|
|
| 182 |
|
|
| 183 |
|
|
| 184 |
</style> |
|
| 185 |
|
|
| 186 |
</head> |
|
| 187 |
<body> |
|
| 188 |
<h1>Color Style </h1> |
|
| 189 |
<h2>GREY COLORS</H2> |
|
| 190 |
|
|
| 191 |
<div class="gray-superdark tiny-box"><div class="inner"><p class="gray-verylight">Class <b>.gray-superdark</b><br>with .gray-verylight as text</p></div></div> |
|
| 192 |
<div class="gray-verydark tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-verydark</b><br>with .gray-standard as text</p></div></div> |
|
| 193 |
<div class="gray-darker tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-darker</b><br>with .gray-standard as text</p></div></div> |
|
| 194 |
<div class="gray-dark tiny-box"><div class="inner"><p class="gray-XXX">Class <b>.gray-dark</b><br>with .gray-XXXX as text</p></div></div> |
|
| 195 |
|
|
| 196 |
<div class="gray-standard tiny-box"><div class="inner"><p class="gray-superdark">Class <b>.gray-standard</b><br>with .gray-superdark as text</p></div></div> |
|
| 197 |
|
|
| 198 |
<div class="gray-light tiny-box"><div class="inner"><p class="gray-XXX">Class <b>.gray-light</b><br>with .gray-XXXX as text</p></div></div> |
|
| 199 |
<div class="gray-lighter tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-lighter</b><br>with .gray-standard as text</p></div></div> |
|
| 200 |
<div class="gray-verylight tiny-box"><div class="inner"><p class="gray-standard">Class <b>.gray-verylight</b><br>with .gray-standard as text</p></div></div> |
|
| 201 |
<div class="gray-superlight tiny-box"><div class="inner"><p class="gray-verydark">Class <b>.gray-superlight</b><br>with .gray-verydark as text</p></div></div> |
|
| 202 |
|
|
| 203 |
|
|
| 204 |
<h2>BRAND COLORS</H2> |
|
| 205 |
|
|
| 206 |
<div class="brand-superdark tiny-box"><div class="inner"><p class="brand-verylight">Class <b>.brand-superdark</b><br>with .brand-verylight as text</p></div></div> |
|
| 207 |
<div class="brand-verydark tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-verydark</b><br>with .brand-standard as text</p></div></div> |
|
| 208 |
<div class="brand-darker tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-darker</b><br>with .brand-standard as text</p></div></div> |
|
| 209 |
<div class="brand-dark tiny-box"><div class="inner"><p class="brand-XXX">Class <b>.brand-dark</b><br>with .brand-XXXX as text</p></div></div> |
|
| 210 |
|
|
| 211 |
<div class="brand-standard tiny-box"><div class="inner"><p class="brand-superdark">Class <b>.brand-standard</b><br>with .brand-superdark as text</p></div></div> |
|
| 212 |
|
|
| 213 |
<div class="brand-light tiny-box"><div class="inner"><p class="brand-XXX">Class <b>.brand-light</b><br>with .brand-XXXX as text</p></div></div> |
|
| 214 |
<div class="brand-lighter tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-lighter</b><br>with .brand-standard as text</p></div></div> |
|
| 215 |
<div class="brand-verylight tiny-box"><div class="inner"><p class="brand-standard">Class <b>.brand-verylight</b><br>with .brand-standard as text</p></div></div> |
|
| 216 |
<div class="brand-superlight tiny-box"><div class="inner"><p class="brand-verydark">Class <b>.brand-superlight</b><br>with .brand-verydark as text</p></div></div> |
|
| 217 |
|
|
| 218 |
<h2>LAYOUTS</h2> |
|
| 219 |
|
|
| 220 |
<div class="brand-lighter main-box"> |
|
| 221 |
<p class="brand-standard">Class <b>.brand-verylight</b><br>with .brand-standard as text</p> |
|
| 222 |
<div class="wrapper lighter"> |
|
| 223 |
<div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-standard);">BG: LIGHTER<br>Border: STANDARD<br>Text: DARK</div> |
|
| 224 |
<div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-dark);">BG: LIGHTER<br>Border: DARK<br>Text: DARK</div> |
|
| 225 |
<div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-darker);">BG: LIGHTER<br>Border: DARKER<br>Text: DARK</div> |
|
| 226 |
<div class="mbox" style="background-color:var(--color-lighter);border-color:var(--color-verydark);">BG: LIGHTER<br>Border: VERYDARK<br>Text: DARK</div> |
|
| 227 |
</div> |
|
| 228 |
<div class="wrapper light"> |
|
| 229 |
<div class="mbox" style="background-color:var(--color-light);border-color:var(--color-standard);">BG: LIGHT<br>Border: STANDARD<br>Text: DARKER</div> |
|
| 230 |
<div class="mbox" style="background-color:var(--color-light);border-color:var(--color-dark);">BG: LIGHT<br>Border: DARK<br>Text: DARKER</div> |
|
| 231 |
<div class="mbox" style="background-color:var(--color-light);border-color:var(--color-darker);">BG: LIGHT<br>Border: DARKER<br>Text: DARKER</div> |
|
| 232 |
<div class="mbox" style="background-color:var(--color-light);border-color:var(--color-verydark);">BG: LIGHT<br>Border: VERYDARK<br>Text: DARKER</div> |
|
| 233 |
</div> |
|
| 234 |
<div class="wrapper standard"> |
|
| 235 |
<div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-standard);">BG: STANDARD<br>Border: STANDARD<br>Text: VERYDARK</div> |
|
| 236 |
<div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-dark);">BG: STANDARD<br>Border: DARK<br>Text: VERYDARK</div> |
|
| 237 |
<div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-darker);">BG: STANDARD<br>Border: DARKER<br>Text: VERYDARK</div> |
|
| 238 |
<div class="mbox" style="background-color:var(--color-standard);border-color:var(--color-verydark);">BG: STANDARD<br>Border: VERYDARK<br>Text: VERYDARK</div> |
|
| 239 |
</div> |
|
| 240 |
<div class="wrapper dark"> |
|
| 241 |
<div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-standard);">BG: DARK<br>Border: STANDARD<br>Text: VERYLIGHT</div> |
|
| 242 |
<div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-dark);">BG: DARK<br>Border: DARK<br>Text: VERYLIGHT</div> |
|
| 243 |
<div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-darker);">BG: DARK<br>Border: DARKER<br>Text: VERYLIGHT</div> |
|
| 244 |
<div class="mbox" style="background-color:var(--color-dark);border-color:var(--color-verydark);">BG: DARK<br>Border: VERYDARK<br>Text: VERYLIGHT</div> |
|
| 245 |
</div> |
|
| 246 |
<div class="wrapper darker"> |
|
| 247 |
<div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-standard);">BG: DARKER<br>Border: STANDARD<br>Text: LIGHTER</div> |
|
| 248 |
<div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-dark);">BG: DARKER<br>Border: DARK<br>Text: LIGHTER</div> |
|
| 249 |
<div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-darker);">BG: DARKER<br>Border: DARKER<br>Text: LIGHTER</div> |
|
| 250 |
<div class="mbox" style="background-color:var(--color-darker);border-color:var(--color-verydark);">BG: DARKER<br>Border: VERYDARK<br>Text: LIGHTER</div> |
|
| 251 |
</div> |
|
| 252 |
<div class="wrapper verydark"> |
|
| 253 |
<div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-standard);">BG: VERYDARK<br>Border: STANDARD<br>Text: LIGHT</div> |
|
| 254 |
<div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-dark);">BG: VERYDARK<br>Border: DARK<br>Text: LIGHT</div> |
|
| 255 |
<div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-darker);">BG: VERYDARK<br>Border: DARKER<br>Text: LIGHT</div> |
|
| 256 |
<div class="mbox" style="background-color:var(--color-verydark);border-color:var(--color-verydark);">BG: VERYDARK<br>Border: VERYDARK<br>Text: LIGHT</div> |
|
| 257 |
</div> |
|
| 258 |
<h3>Messages (Colors mixed with Color Style)</h3> |
|
| 259 |
<div class="wrapper verydark"> |
|
| 260 |
<div class="msg msg-ok">This is a OK message</div> |
|
| 261 |
<div class="msg msg-hint">This is a HINT message</div> |
|
| 262 |
<div class="msg msg-warning">This is a WARNING message</div> |
|
| 263 |
<div class="msg msg-error">This is a ERROR message</div> |
|
| 264 |
</div> |
|
| 265 |
<h3>Original Message Colors</h3> |
|
| 266 |
<div class="wrapper verydark"> |
|
| 267 |
<div class="msg color-ok">This is a OK message</div> |
|
| 268 |
<div class="msg color-hint">This is a HINT message</div> |
|
| 269 |
<div class="msg color-warning">This is a WARNING message</div> |
|
| 270 |
<div class="msg color-error">This is a ERROR message</div> |
|
| 271 |
</div> |
|
| 272 |
<!-- |
|
| 273 |
<h3>Spins (Just Research)</h3> |
|
| 274 |
<div class="wrapper verydark"> |
|
| 275 |
<div class="spin spin_60"> This is Spin 60</div> |
|
| 276 |
<div class="spin spin_120">This is Spin 120</div> |
|
| 277 |
<div class="spin spin_180">This is Spin 180</div> |
|
| 278 |
<div class="spin spin_240">This is Spin 240</div> |
|
| 279 |
</div> |
|
| 280 |
--> |
|
| 281 |
|
|
| 282 |
|
|
| 283 |
</div> |
|
| 284 |
|
|
| 285 |
|
|
| 286 |
<h2>COLOR STYLES</h2> |
|
| 287 |
<div class="main-box"> |
|
| 288 |
<div class="mbox style-ocean"><p><b>ocean</b></p></div> |
|
| 289 |
<div class="mbox style-light_blue"><p><b>light_blue</b></p></div> |
|
| 290 |
<div class="mbox style-aqua"><p><b>aqua</b></p></div> |
|
| 291 |
<h3>Green</h3> |
|
| 292 |
<div class="mbox style-turquoise"><p><b>turquoise</b></p></div> |
|
| 293 |
<div class="mbox style-pine"><p><b>pine</b></p></div> |
|
| 294 |
<div class="mbox style-asparagus"><p><b>asparagus</b></p></div> |
|
| 295 |
<div class="mbox style-petrol"><p><b>petrol</b></p></div> |
|
| 296 |
<h3>Red</h3> |
|
| 297 |
<div class="mbox style-salmona"><p><b>salmona</b></p></div> |
|
| 298 |
<div class="mbox style-salmon"><p><b>salmon</b></p></div> |
|
| 299 |
<div class="mbox style-tangerine"><p><b>tangerine</b></p></div> |
|
| 300 |
<div class="mbox style-marascino"><p><b>marascino</b></p></div> |
|
| 301 |
<div class="mbox style-maroon"><p><b>maroon</b></p></div> |
|
| 302 |
<div class="mbox style-strawberry"><p><b>strawberry</b></p></div> |
|
| 303 |
<div class="mbox style-pure_red"><p><b>pure_red</b></p></div> |
|
| 304 |
<h3>Yellow</h3> |
|
| 305 |
<div class="mbox style-old_lemon"><p><b>old_lemon</b></p></div> |
|
| 306 |
<div class="mbox style-yellow_to_green"><p><b>yellow_to_green</b></p></div> |
|
| 307 |
<h3>Violets & Purple</h3> |
|
| 308 |
<div class="mbox style-eggplant"><p><b>eggplant</b></p></div> |
|
| 309 |
<div class="mbox style-plum"><p><b>plum</b></p></div> |
|
| 310 |
<div class="mbox style-grape"><p><b>grape</b></p></div> |
|
| 311 |
<div class="mbox style-magenta"><p><b>magenta</b></p></div> |
|
| 312 |
<div class="mbox style-lavender"><p><b>lavender</b></p></div> |
|
| 313 |
<h3>Browns</h3> |
|
| 314 |
<div class="mbox style-cayenne"><p><b>cayenne</b></p></div> |
|
| 315 |
<div class="mbox style-mocha"><p><b>mocha</b></p></div> |
|
| 316 |
<div class="mbox style-cantaloupe"><p><b>cantaloupe</b></p></div> |
|
| 317 |
<div class="mbox style-dark_brown"><p><b>dark_brown</b></p></div> |
|
| 318 |
<div class="mbox style-orange_brown"><p><b>orange_brown</b></p></div> |
|
| 319 |
<div class="mbox style-smack_brown"><p><b>smack_brown</b></p></div> |
|
| 320 |
<div class="mbox style-green_brown"><p><b>green_brown</b></p></div> |
|
| 321 |
</div> |
|
| 322 |
</body> |
|
| 323 |
</html> |
|
| css/design40/development/style.css | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* VARIABLES COLOR (variables_color_gray_standard.less) Standard Grey */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
.bg-body {
|
|
| 5 |
background-color: #b0d5bf; |
|
| 6 |
} |
|
| 7 |
.bg-content {
|
|
| 8 |
background-image: linear-gradient(to bottom, #eff7f2, #b0d5bf); |
|
| 9 |
} |
|
| 10 |
h1::after {
|
|
| 11 |
content: " pine"; |
|
| 12 |
} |
|
| 13 |
:root {
|
|
| 14 |
--gray-standard: #888888; |
|
| 15 |
--gray-superdark: #000000; |
|
| 16 |
--gray-verydark: #222222; |
|
| 17 |
--gray-darker: #444444; |
|
| 18 |
--gray-dark: #666666; |
|
| 19 |
--gray-light: #aaaaaa; |
|
| 20 |
--gray-lighter: #cccccc; |
|
| 21 |
--gray-verylight: #eeeeee; |
|
| 22 |
--gray-superlight: #ffffff; |
|
| 23 |
--color-standard: #118040; |
|
| 24 |
--color-superlight: #ffffff; |
|
| 25 |
--color-verylight: #eff7f2; |
|
| 26 |
--color-lighter: #cfe6d9; |
|
| 27 |
--color-light: #b0d5bf; |
|
| 28 |
--color-dark: #07331a; |
|
| 29 |
--color-darker: #052211; |
|
| 30 |
--color-verydark: #021109; |
|
| 31 |
--color-superdark: #000000; |
|
| 32 |
--msg-ok-strong: #013717; |
|
| 33 |
--msg-ok-light: #a7fac9; |
|
| 34 |
--msg-error-strong: #8c0713; |
|
| 35 |
--msg-error-light: #f5dadb; |
|
| 36 |
--msg-hint-strong: #1b85a3; |
|
| 37 |
--msg-hint-light: #ecf7fa; |
|
| 38 |
--msg-warning-strong: #725c03; |
|
| 39 |
--msg-warning-light: #e7e4b3; |
|
| 40 |
--color-green-strong: #003c18; |
|
| 41 |
--color-green-light: #3cff8a; |
|
| 42 |
--color-red-strong: #ae0014; |
|
| 43 |
--color-red-light: #ffaeb7; |
|
| 44 |
--color-blue-strong: #209ec8; |
|
| 45 |
--color-blue-light: #ebf8fc; |
|
| 46 |
--color-orange-strong: #8d6a00; |
|
| 47 |
--color-orange-light: #ffe38d; |
|
| 48 |
--spin_60: #115180; |
|
| 49 |
--spin_120: #401180; |
|
| 50 |
--spin_180: #801151; |
|
| 51 |
--spin_240: #804011; |
|
| 52 |
--style-ocean: #2e6ffd; |
|
| 53 |
--style-light_blue: #336699; |
|
| 54 |
--style-aqua: #0f80ff; |
|
| 55 |
--style-turquoise: #21ffff; |
|
| 56 |
--style-pine: #118040; |
|
| 57 |
--style-asparagus: #808004; |
|
| 58 |
--style-petrol: #108080; |
|
| 59 |
--style-salmona: #990033; |
|
| 60 |
--style-salmon: #fc6666; |
|
| 61 |
--style-tangerine: #fd8008; |
|
| 62 |
--style-marascino: #fb0207; |
|
| 63 |
--style-maroon: #800040; |
|
| 64 |
--style-strawberry: #fb0280; |
|
| 65 |
--style-pure_red: #fc7d86; |
|
| 66 |
--style-old_lemon: #e0e00a; |
|
| 67 |
--style-yellow_to_green: #cad008; |
|
| 68 |
--style-eggplant: #400080; |
|
| 69 |
--style-plum: #800080; |
|
| 70 |
--style-grape: #8000ff; |
|
| 71 |
--style-magenta: #fb02ff; |
|
| 72 |
--style-lavender: #cc66ff; |
|
| 73 |
--style-cayenne: #800002; |
|
| 74 |
--style-mocha: #804003; |
|
| 75 |
--style-cantaloupe: #fecc66; |
|
| 76 |
--style-dark_brown: #6d3702; |
|
| 77 |
--style-orange_brown: #cc6600; |
|
| 78 |
--style-smack_brown: #996600; |
|
| 79 |
--style-green_brown: #666633; |
|
| 80 |
} |
|
| 81 |
.color-standard {
|
|
| 82 |
color: var(--color-standard); |
|
| 83 |
} |
|
| 84 |
.color-superlight {
|
|
| 85 |
color: var(--color-superlight); |
|
| 86 |
} |
|
| 87 |
.color-verylight {
|
|
| 88 |
color: var(--color-verylight); |
|
| 89 |
} |
|
| 90 |
.color-lighter {
|
|
| 91 |
color: var(--color-lighter); |
|
| 92 |
} |
|
| 93 |
.color-light {
|
|
| 94 |
color: var(--color-light); |
|
| 95 |
} |
|
| 96 |
.color-dark {
|
|
| 97 |
color: var(--color-dark); |
|
| 98 |
} |
|
| 99 |
.color-darker {
|
|
| 100 |
color: var(--color-darker); |
|
| 101 |
} |
|
| 102 |
.color-verydark {
|
|
| 103 |
color: var(--color-verydark); |
|
| 104 |
} |
|
| 105 |
.color-superdark {
|
|
| 106 |
color: var(--color-superdark); |
|
| 107 |
} |
|
| 108 |
.bg-standard {
|
|
| 109 |
background-color: var(--color-standard); |
|
| 110 |
} |
|
| 111 |
.bg-superlight {
|
|
| 112 |
background-color: var(--color-superlight); |
|
| 113 |
} |
|
| 114 |
.bg-verylight {
|
|
| 115 |
background-color: var(--color-verylight); |
|
| 116 |
} |
|
| 117 |
.bg-lighter {
|
|
| 118 |
background-color: var(--color-lighter); |
|
| 119 |
} |
|
| 120 |
.bg-light {
|
|
| 121 |
background-color: var(--color-light); |
|
| 122 |
} |
|
| 123 |
.bg-dark {
|
|
| 124 |
background-color: var(--color-dark); |
|
| 125 |
} |
|
| 126 |
.bg-darker {
|
|
| 127 |
background-color: var(--color-darker); |
|
| 128 |
} |
|
| 129 |
.bg-verydark {
|
|
| 130 |
background-color: var(--color-verydark); |
|
| 131 |
} |
|
| 132 |
.bg-superdark {
|
|
| 133 |
background-color: var(--color-superdark); |
|
| 134 |
} |
|
| 135 |
.msg-ok {
|
|
| 136 |
background-color: var(--msg-ok-light); |
|
| 137 |
color: var(--msg-ok-strong); |
|
| 138 |
border-color: var(--msg-ok-strong); |
|
| 139 |
} |
|
| 140 |
.msg-error {
|
|
| 141 |
background-color: var(--msg-error-light); |
|
| 142 |
color: var(--msg-error-strong); |
|
| 143 |
border-color: var(--msg-error-strong); |
|
| 144 |
} |
|
| 145 |
.msg-hint {
|
|
| 146 |
background-color: var(--msg-hint-light); |
|
| 147 |
color: var(--msg-hint-strong); |
|
| 148 |
border-color: var(--msg-hint-strong); |
|
| 149 |
} |
|
| 150 |
.msg-warning {
|
|
| 151 |
background-color: var(--msg-warning-light); |
|
| 152 |
color: var(--msg-warning-strong); |
|
| 153 |
border-color: var(--msg-warning-strong); |
|
| 154 |
} |
|
| 155 |
.color-ok {
|
|
| 156 |
background-color: var(--color-green-light); |
|
| 157 |
color: var(--color-green-strong); |
|
| 158 |
border-color: var(--color-green-strong); |
|
| 159 |
} |
|
| 160 |
.color-error {
|
|
| 161 |
background-color: var(--color-red-light); |
|
| 162 |
color: var(--color-red-strong); |
|
| 163 |
border-color: var(--color-red-strong); |
|
| 164 |
} |
|
| 165 |
.color-hint {
|
|
| 166 |
background-color: var(--color-blue-light); |
|
| 167 |
color: var(--color-blue-strong); |
|
| 168 |
border-color: var(--color-blue-strong); |
|
| 169 |
} |
|
| 170 |
.color-warning {
|
|
| 171 |
background-color: var(--color-orange-light); |
|
| 172 |
color: var(--color-orange-strong); |
|
| 173 |
border-color: var(--color-orange-strong); |
|
| 174 |
} |
|
| 175 |
.style-ocean {
|
|
| 176 |
background-color: var(--style-ocean); |
|
| 177 |
} |
|
| 178 |
.style-light_blue {
|
|
| 179 |
background-color: var(--style-light_blue); |
|
| 180 |
} |
|
| 181 |
.style-aqua {
|
|
| 182 |
background-color: var(--style-aqua); |
|
| 183 |
} |
|
| 184 |
.style-turquoise {
|
|
| 185 |
background-color: var(--style-turquoise); |
|
| 186 |
} |
|
| 187 |
.style-pine {
|
|
| 188 |
background-color: var(--style-pine); |
|
| 189 |
} |
|
| 190 |
.style-asparagus {
|
|
| 191 |
background-color: var(--style-asparagus); |
|
| 192 |
} |
|
| 193 |
.style-petrol {
|
|
| 194 |
background-color: var(--style-petrol); |
|
| 195 |
} |
|
| 196 |
.style-salmona {
|
|
| 197 |
background-color: var(--style-salmona); |
|
| 198 |
} |
|
| 199 |
.style-salmon {
|
|
| 200 |
background-color: var(--style-salmon); |
|
| 201 |
} |
|
| 202 |
.style-tangerine {
|
|
| 203 |
background-color: var(--style-tangerine); |
|
| 204 |
} |
|
| 205 |
.style-marascino {
|
|
| 206 |
background-color: var(--style-marascino); |
|
| 207 |
} |
|
| 208 |
.style-maroon {
|
|
| 209 |
background-color: var(--style-maroon); |
|
| 210 |
} |
|
| 211 |
.style-strawberry {
|
|
| 212 |
background-color: var(--style-strawberry); |
|
| 213 |
} |
|
| 214 |
.style-pure_red {
|
|
| 215 |
background-color: var(--style-pure_red); |
|
| 216 |
} |
|
| 217 |
.style-old_lemon {
|
|
| 218 |
background-color: var(--style-old_lemon); |
|
| 219 |
} |
|
| 220 |
.style-yellow_to_green {
|
|
| 221 |
background-color: var(--style-yellow_to_green); |
|
| 222 |
} |
|
| 223 |
.style-eggplant {
|
|
| 224 |
background-color: var(--style-eggplant); |
|
| 225 |
} |
|
| 226 |
.style-plum {
|
|
| 227 |
background-color: var(--style-plum); |
|
| 228 |
} |
|
| 229 |
.style-grape {
|
|
| 230 |
background-color: var(--style-grape); |
|
| 231 |
} |
|
| 232 |
.style-magenta {
|
|
| 233 |
background-color: var(--style-magenta); |
|
| 234 |
} |
|
| 235 |
.style-lavender {
|
|
| 236 |
background-color: var(--style-lavender); |
|
| 237 |
} |
|
| 238 |
.style-cayenne {
|
|
| 239 |
background-color: var(--style-cayenne); |
|
| 240 |
} |
|
| 241 |
.style-mocha {
|
|
| 242 |
background-color: var(--style-mocha); |
|
| 243 |
} |
|
| 244 |
.style-cantaloupe {
|
|
| 245 |
background-color: var(--style-cantaloupe); |
|
| 246 |
} |
|
| 247 |
.style-dark_brown {
|
|
| 248 |
background-color: var(--style-dark_brown); |
|
| 249 |
} |
|
| 250 |
.style-orange_brown {
|
|
| 251 |
background-color: var(--style-orange_brown); |
|
| 252 |
} |
|
| 253 |
.style-smack_brown {
|
|
| 254 |
background-color: var(--style-smack_brown); |
|
| 255 |
} |
|
| 256 |
.style-green_brown {
|
|
| 257 |
background-color: var(--style-green_brown); |
|
| 258 |
} |
|
| css/design40/email_journal.css | ||
|---|---|---|
| 1 |
/* E-Mail-Journal */ |
|
| 2 |
.email_journal_details tbody pre {
|
|
| 3 |
margin: 0px; |
|
| 4 |
} |
|
| 5 |
|
|
| 6 |
.email_journal_details tbody th {
|
|
| 7 |
text-align: right; |
|
| 8 |
vertical-align: top; |
|
| 9 |
} |
|
| 10 |
|
|
| 11 |
.email_journal_details tbody td {
|
|
| 12 |
vertical-align: top; |
|
| 13 |
} |
|
| css/design40/icons16.css | ||
|---|---|---|
| 1 |
.icon16 { background: url(../image/maps/icons16.png) 16px 0px no-repeat; padding: 0; width: 16px; height: 16px; }
|
|
| 2 |
.icon16.admin { background-position: -0px 0px; }
|
|
| 3 |
.icon16.ap { background-position: -16px 0px; }
|
|
| 4 |
.icon16.ap_aging { background-position: -32px 0px; }
|
|
| 5 |
.icon16.ap_report { background-position: -48px 0px; }
|
|
| 6 |
.icon16.ap_transaction_add { background-position: -64px 0px; }
|
|
| 7 |
.icon16.appointment { background-position: -80px 0px; }
|
|
| 8 |
.icon16.ar { background-position: -96px 0px; }
|
|
| 9 |
.icon16.ar_aging { background-position: -112px 0px; }
|
|
| 10 |
.icon16.ar_report { background-position: -128px 0px; }
|
|
| 11 |
.icon16.ar_transaction_add { background-position: -144px 0px; }
|
|
| 12 |
.icon16.assembly_add { background-position: -160px 0px; }
|
|
| 13 |
.icon16.assembly_produce { background-position: -176px 0px; }
|
|
| 14 |
.icon16.assembly_report { background-position: -192px 0px; }
|
|
| 15 |
.icon16.balance_sheet { background-position: -208px 0px; }
|
|
| 16 |
.icon16.cash { background-position: -224px 0px; }
|
|
| 17 |
.icon16.cash_report { background-position: -240px 0px; }
|
|
| 18 |
.icon16.chart_of_accounts { background-position: -256px 0px; }
|
|
| 19 |
.icon16.contact { background-position: -272px 0px; }
|
|
| 20 |
.icon16.credit_note_add { background-position: -288px 0px; }
|
|
| 21 |
.icon16.crm { background-position: -304px 0px; }
|
|
| 22 |
.icon16.customer { background-position: -320px 0px; }
|
|
| 23 |
.icon16.customer_add { background-position: -336px 0px; }
|
|
| 24 |
.icon16.customer_report { background-position: -352px 0px; }
|
|
| 25 |
.icon16.datev { background-position: -368px 0px; }
|
|
| 26 |
.icon16.delivery_order_add { background-position: -384px 0px; }
|
|
| 27 |
.icon16.delivery_order_report { background-position: -400px 0px; }
|
|
| 28 |
.icon16.document_template { background-position: -416px 0px; }
|
|
| 29 |
.icon16.dunning_add { background-position: -432px 0px; }
|
|
| 30 |
.icon16.dunnings_report { background-position: -448px 0px; }
|
|
| 31 |
.icon16.email { background-position: -464px 0px; }
|
|
| 32 |
.icon16.follow_up { background-position: -480px 0px; }
|
|
| 33 |
.icon16.gl { background-position: -496px 0px; }
|
|
| 34 |
.icon16.gl_report { background-position: -512px 0px; }
|
|
| 35 |
.icon16.help { background-position: -528px 0px; }
|
|
| 36 |
.icon16.income_statement { background-position: -544px 0px; }
|
|
| 37 |
.icon16.invoices_report { background-position: -560px 0px; }
|
|
| 38 |
.icon16.journal { background-position: -576px 0px; }
|
|
| 39 |
.icon16.knowledge { background-position: -592px 0px; }
|
|
| 40 |
.icon16.label { background-position: -608px 0px; }
|
|
| 41 |
.icon16.license_add { background-position: -624px 0px; }
|
|
| 42 |
.icon16.license_report { background-position: -640px 0px; }
|
|
| 43 |
.icon16.logout { background-position: -656px 0px; }
|
|
| 44 |
.icon16.master_data { background-position: -672px 0px; }
|
|
| 45 |
.icon16.master_data_report { background-position: -688px 0px; }
|
|
| 46 |
.icon16.mdi_text_editor { background-position: -704px 0px; }
|
|
| 47 |
.icon16.memo { background-position: -720px 0px; }
|
|
| 48 |
.icon16.message { background-position: -736px 0px; }
|
|
| 49 |
.icon16.opportunity { background-position: -752px 0px; }
|
|
| 50 |
.icon16.package_lists { background-position: -768px 0px; }
|
|
| 51 |
.icon16.part_add { background-position: -784px 0px; }
|
|
| 52 |
.icon16.part_report { background-position: -800px 0px; }
|
|
| 53 |
.icon16.payment { background-position: -816px 0px; }
|
|
| 54 |
.icon16.payment_report { background-position: -832px 0px; }
|
|
| 55 |
.icon16.phone { background-position: -848px 0px; }
|
|
| 56 |
.icon16.preferences { background-position: -864px 0px; }
|
|
| 57 |
.icon16.prices_update { background-position: -880px 0px; }
|
|
| 58 |
.icon16.printing { background-position: -896px 0px; }
|
|
| 59 |
.icon16.program { background-position: -912px 0px; }
|
|
| 60 |
.icon16.project_add { background-position: -928px 0px; }
|
|
| 61 |
.icon16.project_report { background-position: -944px 0px; }
|
|
| 62 |
.icon16.project_transaction_report { background-position: -960px 0px; }
|
|
| 63 |
.icon16.purchase_order_add { background-position: -976px 0px; }
|
|
| 64 |
.icon16.purchase_order_printing { background-position: -992px 0px; }
|
|
| 65 |
.icon16.purchase_order_report { background-position: -1008px 0px; }
|
|
| 66 |
.icon16.quotation_add { background-position: -1024px 0px; }
|
|
| 67 |
.icon16.quotation_printing { background-position: -1040px 0px; }
|
|
| 68 |
.icon16.receipt { background-position: -1056px 0px; }
|
|
| 69 |
.icon16.receipt_printing { background-position: -1072px 0px; }
|
|
| 70 |
.icon16.receipt_report { background-position: -1088px 0px; }
|
|
| 71 |
.icon16.reconcilliation { background-position: -1104px 0px; }
|
|
| 72 |
.icon16.report { background-position: -1120px 0px; }
|
|
| 73 |
.icon16.report_quotations { background-position: -1136px 0px; }
|
|
| 74 |
.icon16.report_sales_orders { background-position: -1152px 0px; }
|
|
| 75 |
.icon16.rfq_add { background-position: -1168px 0px; }
|
|
| 76 |
.icon16.rfq_printing { background-position: -1184px 0px; }
|
|
| 77 |
.icon16.rfq_report { background-position: -1200px 0px; }
|
|
| 78 |
.icon16.sales_invoice_add { background-position: -1216px 0px; }
|
|
| 79 |
.icon16.sales_invoice_printing { background-position: -1232px 0px; }
|
|
| 80 |
.icon16.sales_order_add { background-position: -1248px 0px; }
|
|
| 81 |
.icon16.sales_order_printing { background-position: -1264px 0px; }
|
|
| 82 |
.icon16.search { background-position: -1280px 0px; }
|
|
| 83 |
.icon16.service { background-position: -1296px 0px; }
|
|
| 84 |
.icon16.service_add { background-position: -1312px 0px; }
|
|
| 85 |
.icon16.service_report { background-position: -1328px 0px; }
|
|
| 86 |
.icon16.status { background-position: -1344px 0px; }
|
|
| 87 |
.icon16.system { background-position: -1360px 0px; }
|
|
| 88 |
.icon16.transaction_add { background-position: -1376px 0px; }
|
|
| 89 |
.icon16.user { background-position: -1392px 0px; }
|
|
| 90 |
.icon16.user_group { background-position: -1408px 0px; }
|
|
| 91 |
.icon16.ustva { background-position: -1424px 0px; }
|
|
| 92 |
.icon16.vendor { background-position: -1440px 0px; }
|
|
| 93 |
.icon16.vendor_add { background-position: -1456px 0px; }
|
|
| 94 |
.icon16.vendor_report { background-position: -1472px 0px; }
|
|
| 95 |
.icon16.version { background-position: -1488px 0px; }
|
|
| 96 |
.icon16.warehouse { background-position: -1504px 0px; }
|
|
| 97 |
.icon16.window_new { background-position: -1520px 0px; }
|
|
| css/design40/icons24.css | ||
|---|---|---|
| 1 |
.icon24 { background: url(../image/maps/icons24.png) 24px 0px no-repeat; padding: 0; width: 24px; height: 24px; }
|
|
| 2 |
.icon24.admin { background-position: -0px 0px; }
|
|
| 3 |
.icon24.ap { background-position: -24px 0px; }
|
|
| 4 |
.icon24.ap_aging { background-position: -48px 0px; }
|
|
| 5 |
.icon24.ap_report { background-position: -72px 0px; }
|
|
| 6 |
.icon24.ap_transaction_add { background-position: -96px 0px; }
|
|
| 7 |
.icon24.appointment { background-position: -120px 0px; }
|
|
| 8 |
.icon24.ar { background-position: -144px 0px; }
|
|
| 9 |
.icon24.ar_aging { background-position: -168px 0px; }
|
|
| 10 |
.icon24.ar_report { background-position: -192px 0px; }
|
|
| 11 |
.icon24.ar_transaction_add { background-position: -216px 0px; }
|
|
| 12 |
.icon24.assembly_add { background-position: -240px 0px; }
|
|
| 13 |
.icon24.assembly_report { background-position: -264px 0px; }
|
|
| 14 |
.icon24.balance_sheet { background-position: -288px 0px; }
|
|
| 15 |
.icon24.cash { background-position: -312px 0px; }
|
|
| 16 |
.icon24.cash_report { background-position: -336px 0px; }
|
|
| 17 |
.icon24.chart_of_accounts { background-position: -360px 0px; }
|
|
| 18 |
.icon24.contact { background-position: -384px 0px; }
|
|
| 19 |
.icon24.crm { background-position: -408px 0px; }
|
|
| 20 |
.icon24.customer { background-position: -432px 0px; }
|
|
| 21 |
.icon24.customer_add { background-position: -456px 0px; }
|
|
| 22 |
.icon24.customer_report { background-position: -480px 0px; }
|
|
| 23 |
.icon24.datev { background-position: -504px 0px; }
|
|
| 24 |
.icon24.document_template { background-position: -528px 0px; }
|
|
| 25 |
.icon24.dunning_add { background-position: -552px 0px; }
|
|
| 26 |
.icon24.dunnings_report { background-position: -576px 0px; }
|
|
| 27 |
.icon24.email { background-position: -600px 0px; }
|
|
| 28 |
.icon24.follow_up { background-position: -624px 0px; }
|
|
| 29 |
.icon24.gl { background-position: -648px 0px; }
|
|
| 30 |
.icon24.gl_report { background-position: -672px 0px; }
|
|
| 31 |
.icon24.help { background-position: -696px 0px; }
|
|
| 32 |
.icon24.income_statement { background-position: -720px 0px; }
|
|
| 33 |
.icon24.invoices_report { background-position: -744px 0px; }
|
|
| 34 |
.icon24.journal { background-position: -768px 0px; }
|
|
| 35 |
.icon24.knowledge { background-position: -792px 0px; }
|
|
| 36 |
.icon24.label { background-position: -816px 0px; }
|
|
| 37 |
.icon24.leftarrow_24 { background-position: -840px 0px; }
|
|
| 38 |
.icon24.license_add { background-position: -864px 0px; }
|
|
| 39 |
.icon24.license_report { background-position: -888px 0px; }
|
|
| 40 |
.icon24.logout { background-position: -912px 0px; }
|
|
| 41 |
.icon24.master_data { background-position: -936px 0px; }
|
|
| 42 |
.icon24.master_data_report { background-position: -960px 0px; }
|
|
| 43 |
.icon24.memo { background-position: -984px 0px; }
|
|
| 44 |
.icon24.message { background-position: -1008px 0px; }
|
|
| 45 |
.icon24.opportunity { background-position: -1032px 0px; }
|
|
| 46 |
.icon24.package_lists { background-position: -1056px 0px; }
|
|
| 47 |
.icon24.part_add { background-position: -1080px 0px; }
|
|
| 48 |
.icon24.part_report { background-position: -1104px 0px; }
|
|
| 49 |
.icon24.payment { background-position: -1128px 0px; }
|
|
| 50 |
.icon24.payment_report { background-position: -1152px 0px; }
|
|
| 51 |
.icon24.preferences { background-position: -1176px 0px; }
|
|
| 52 |
.icon24.printing { background-position: -1200px 0px; }
|
|
| 53 |
.icon24.productivity { background-position: -1224px 0px; }
|
|
| 54 |
.icon24.program { background-position: -1248px 0px; }
|
|
| 55 |
.icon24.project_add { background-position: -1272px 0px; }
|
|
| 56 |
.icon24.project_report { background-position: -1296px 0px; }
|
|
| 57 |
.icon24.project_transaction_report { background-position: -1320px 0px; }
|
|
| 58 |
.icon24.purchase_order_add { background-position: -1344px 0px; }
|
|
| 59 |
.icon24.purchase_order_printing { background-position: -1368px 0px; }
|
|
| 60 |
.icon24.purchase_order_report { background-position: -1392px 0px; }
|
|
| 61 |
.icon24.quotation_add { background-position: -1416px 0px; }
|
|
| 62 |
.icon24.quotation_printing { background-position: -1440px 0px; }
|
|
| 63 |
.icon24.receipt { background-position: -1464px 0px; }
|
|
| 64 |
.icon24.receipt_printing { background-position: -1488px 0px; }
|
|
| 65 |
.icon24.receipt_report { background-position: -1512px 0px; }
|
|
| 66 |
.icon24.reconcilliation { background-position: -1536px 0px; }
|
|
| 67 |
.icon24.report { background-position: -1560px 0px; }
|
|
| 68 |
.icon24.report_quotations { background-position: -1584px 0px; }
|
|
| 69 |
.icon24.report_sales_orders { background-position: -1608px 0px; }
|
|
| 70 |
.icon24.rfq_add { background-position: -1632px 0px; }
|
|
| 71 |
.icon24.rfq_printing { background-position: -1656px 0px; }
|
|
| 72 |
.icon24.rfq_report { background-position: -1680px 0px; }
|
|
| 73 |
.icon24.rightarrow_24 { background-position: -1704px 0px; }
|
|
| 74 |
.icon24.sales_invoice_add { background-position: -1728px 0px; }
|
|
| 75 |
.icon24.sales_invoice_printing { background-position: -1752px 0px; }
|
|
| 76 |
.icon24.sales_order_add { background-position: -1776px 0px; }
|
|
| 77 |
.icon24.sales_order_printing { background-position: -1800px 0px; }
|
|
| 78 |
.icon24.search { background-position: -1824px 0px; }
|
|
| 79 |
.icon24.service { background-position: -1848px 0px; }
|
|
| 80 |
.icon24.service_add { background-position: -1872px 0px; }
|
|
| 81 |
.icon24.service_report { background-position: -1896px 0px; }
|
|
| 82 |
.icon24.status { background-position: -1920px 0px; }
|
|
| 83 |
.icon24.system { background-position: -1944px 0px; }
|
|
| 84 |
.icon24.transaction_add { background-position: -1968px 0px; }
|
|
| 85 |
.icon24.user { background-position: -1992px 0px; }
|
|
| 86 |
.icon24.user_group { background-position: -2016px 0px; }
|
|
| 87 |
.icon24.ustva { background-position: -2040px 0px; }
|
|
| 88 |
.icon24.vendor { background-position: -2064px 0px; }
|
|
| 89 |
.icon24.vendor_add { background-position: -2088px 0px; }
|
|
| 90 |
.icon24.vendor_report { background-position: -2112px 0px; }
|
|
| 91 |
.icon24.version { background-position: -2136px 0px; }
|
|
| 92 |
.icon24.warehouse { background-position: -2160px 0px; }
|
|
| 93 |
.icon24.window_new { background-position: -2184px 0px; }
|
|
| css/design40/icons32.css | ||
|---|---|---|
| 1 |
.icon32 { background: url(../image/maps/icons32.png) 32px 0px no-repeat; padding: 0; width: 32px; height: 32px; }
|
|
| 2 |
.icon32.admin { background-position: -0px 0px; }
|
|
| 3 |
.icon32.ap { background-position: -32px 0px; }
|
|
| 4 |
.icon32.ap_aging { background-position: -64px 0px; }
|
|
| 5 |
.icon32.ap_report { background-position: -96px 0px; }
|
|
| 6 |
.icon32.ap_transaction_add { background-position: -128px 0px; }
|
|
| 7 |
.icon32.appointment { background-position: -160px 0px; }
|
|
| 8 |
.icon32.ar { background-position: -192px 0px; }
|
|
| 9 |
.icon32.ar_aging { background-position: -224px 0px; }
|
|
| 10 |
.icon32.ar_report { background-position: -256px 0px; }
|
|
| 11 |
.icon32.ar_transaction_add { background-position: -288px 0px; }
|
|
| 12 |
.icon32.assembly_add { background-position: -320px 0px; }
|
|
| 13 |
.icon32.assembly_produce { background-position: -352px 0px; }
|
|
| 14 |
.icon32.assembly_report { background-position: -384px 0px; }
|
|
| 15 |
.icon32.balance_sheet { background-position: -416px 0px; }
|
|
| 16 |
.icon32.cash { background-position: -448px 0px; }
|
|
| 17 |
.icon32.cash_report { background-position: -480px 0px; }
|
|
| 18 |
.icon32.chart_of_accounts { background-position: -512px 0px; }
|
|
| 19 |
.icon32.contact { background-position: -544px 0px; }
|
|
| 20 |
.icon32.crm { background-position: -576px 0px; }
|
|
| 21 |
.icon32.customer { background-position: -608px 0px; }
|
|
| 22 |
.icon32.customer_add { background-position: -640px 0px; }
|
|
| 23 |
.icon32.customer_report { background-position: -672px 0px; }
|
|
| 24 |
.icon32.datev { background-position: -704px 0px; }
|
|
| 25 |
.icon32.document_template { background-position: -736px 0px; }
|
|
| 26 |
.icon32.dunning_add { background-position: -768px 0px; }
|
|
| 27 |
.icon32.dunnings_report { background-position: -800px 0px; }
|
|
| 28 |
.icon32.email { background-position: -832px 0px; }
|
|
| 29 |
.icon32.follow_up { background-position: -864px 0px; }
|
|
| 30 |
.icon32.gl { background-position: -896px 0px; }
|
|
| 31 |
.icon32.gl_report { background-position: -928px 0px; }
|
|
| 32 |
.icon32.help { background-position: -960px 0px; }
|
|
| 33 |
.icon32.income_statement { background-position: -992px 0px; }
|
|
| 34 |
.icon32.invoices_report { background-position: -1024px 0px; }
|
|
| 35 |
.icon32.journal { background-position: -1056px 0px; }
|
|
| 36 |
.icon32.knowledge { background-position: -1088px 0px; }
|
|
| 37 |
.icon32.label { background-position: -1120px 0px; }
|
|
| 38 |
.icon32.license_add { background-position: -1152px 0px; }
|
|
| 39 |
.icon32.license_report { background-position: -1184px 0px; }
|
|
| 40 |
.icon32.logout { background-position: -1216px 0px; }
|
|
| 41 |
.icon32.master_data { background-position: -1248px 0px; }
|
|
| 42 |
.icon32.master_data_report { background-position: -1280px 0px; }
|
|
| 43 |
.icon32.memo { background-position: -1312px 0px; }
|
|
| 44 |
.icon32.message { background-position: -1344px 0px; }
|
|
| 45 |
.icon32.opportunity { background-position: -1376px 0px; }
|
|
| 46 |
.icon32.package_lists { background-position: -1408px 0px; }
|
|
| 47 |
.icon32.part_add { background-position: -1440px 0px; }
|
|
| 48 |
.icon32.part_report { background-position: -1472px 0px; }
|
|
| 49 |
.icon32.payment { background-position: -1504px 0px; }
|
|
| 50 |
.icon32.payment_report { background-position: -1536px 0px; }
|
|
| 51 |
.icon32.preferences { background-position: -1568px 0px; }
|
|
| 52 |
.icon32.printing { background-position: -1600px 0px; }
|
|
| 53 |
.icon32.program { background-position: -1632px 0px; }
|
|
| 54 |
.icon32.project_add { background-position: -1664px 0px; }
|
|
| 55 |
.icon32.project_report { background-position: -1696px 0px; }
|
|
| 56 |
.icon32.project_transaction_report { background-position: -1728px 0px; }
|
|
| 57 |
.icon32.purchase_order_add { background-position: -1760px 0px; }
|
|
| 58 |
.icon32.purchase_order_printing { background-position: -1792px 0px; }
|
|
| 59 |
.icon32.purchase_order_report { background-position: -1824px 0px; }
|
|
| 60 |
.icon32.quotation_add { background-position: -1856px 0px; }
|
|
| 61 |
.icon32.quotation_printing { background-position: -1888px 0px; }
|
|
| 62 |
.icon32.receipt { background-position: -1920px 0px; }
|
|
| 63 |
.icon32.receipt_printing { background-position: -1952px 0px; }
|
|
| 64 |
.icon32.receipt_report { background-position: -1984px 0px; }
|
|
| 65 |
.icon32.reconcilliation { background-position: -2016px 0px; }
|
|
| 66 |
.icon32.report { background-position: -2048px 0px; }
|
|
| 67 |
.icon32.report_quotations { background-position: -2080px 0px; }
|
|
| 68 |
.icon32.report_sales_orders { background-position: -2112px 0px; }
|
|
| 69 |
.icon32.rfq_add { background-position: -2144px 0px; }
|
|
| 70 |
.icon32.rfq_printing { background-position: -2176px 0px; }
|
|
| 71 |
.icon32.rfq_report { background-position: -2208px 0px; }
|
|
| 72 |
.icon32.sales_invoice_add { background-position: -2240px 0px; }
|
|
| 73 |
.icon32.sales_invoice_printing { background-position: -2272px 0px; }
|
|
| 74 |
.icon32.sales_order_add { background-position: -2304px 0px; }
|
|
| 75 |
.icon32.sales_order_printing { background-position: -2336px 0px; }
|
|
| 76 |
.icon32.search { background-position: -2368px 0px; }
|
|
| 77 |
.icon32.service { background-position: -2400px 0px; }
|
|
| 78 |
.icon32.service_add { background-position: -2432px 0px; }
|
|
| 79 |
.icon32.service_report { background-position: -2464px 0px; }
|
|
| 80 |
.icon32.status { background-position: -2496px 0px; }
|
|
| 81 |
.icon32.system { background-position: -2528px 0px; }
|
|
| 82 |
.icon32.transaction_add { background-position: -2560px 0px; }
|
|
| 83 |
.icon32.user { background-position: -2592px 0px; }
|
|
| 84 |
.icon32.user_group { background-position: -2624px 0px; }
|
|
| 85 |
.icon32.ustva { background-position: -2656px 0px; }
|
|
| 86 |
.icon32.vendor { background-position: -2688px 0px; }
|
|
| 87 |
.icon32.vendor_add { background-position: -2720px 0px; }
|
|
| 88 |
.icon32.vendor_report { background-position: -2752px 0px; }
|
|
| 89 |
.icon32.version { background-position: -2784px 0px; }
|
|
| 90 |
.icon32.window_new { background-position: -2816px 0px; }
|
|
| css/design40/jquery.autocomplete.css | ||
|---|---|---|
| 1 |
.ac_results {
|
|
| 2 |
padding: 0px; |
|
| 3 |
border: 1px solid black; |
|
| 4 |
background-color: white; |
|
| 5 |
overflow: hidden; |
|
| 6 |
z-index: 99999; |
|
| 7 |
} |
|
| 8 |
|
|
| 9 |
.ac_results ul {
|
|
| 10 |
width: 100%; |
|
| 11 |
list-style-position: outside; |
|
| 12 |
list-style: none; |
|
| 13 |
padding: 0; |
|
| 14 |
margin: 0; |
|
| 15 |
} |
|
| 16 |
|
|
| 17 |
.ac_results li {
|
|
Auch abrufbar als: Unified diff
design40: Kopie der css Dateien
ohne die kivitendo und lx-office-erp dirs
dafür mit einem Symlink main.css -> style.css