Revision 7824720d
Von Cem Aydin vor etwa 4 Jahren hinzugefügt
| css/less/_developing_styles.less | ||
|---|---|---|
|
--gray-verylight: @gray-verylight;
|
||
|
--gray-superlight: @gray-superlight; // White
|
||
|
|
||
|
--color-standard: @brand-standard;
|
||
|
--color-superlight: @brand-superlight;
|
||
|
--color-verylight: @brand-verylight;
|
||
|
--color-lighter: @brand-lighter;
|
||
|
--color-light: @brand-light;
|
||
|
--color-dark: @brand-dark;
|
||
|
--color-darker: @brand-darker;
|
||
|
--color-verydark: @brand-verydark;
|
||
|
--color-superdark: @brand-superdark;
|
||
|
--color-standard: @base-standard;
|
||
|
--color-superlight: @base-superlight;
|
||
|
--color-verylight: @base-verylight;
|
||
|
--color-lighter: @base-lighter;
|
||
|
--color-light: @base-light;
|
||
|
--color-dark: @base-dark;
|
||
|
--color-darker: @base-darker;
|
||
|
--color-verydark: @base-verydark;
|
||
|
--color-superdark: @base-superdark;
|
||
|
|
||
|
// --msg-ok-strong: @color-green-strong;
|
||
|
// --msg-ok-light: @color-green-light;
|
||
| ... | ... | |
|
|
||
|
|
||
|
|
||
|
--spin_60 : spin(@brand-standard, 60);
|
||
|
--spin_120: spin(@brand-standard, 120);
|
||
|
--spin_180: spin(@brand-standard, 180);
|
||
|
--spin_240: spin(@brand-standard, 240);
|
||
|
--spin_60 : spin(@base-standard, 60);
|
||
|
--spin_120: spin(@base-standard, 120);
|
||
|
--spin_180: spin(@base-standard, 180);
|
||
|
--spin_240: spin(@base-standard, 240);
|
||
|
|
||
|
--style-ocean: @style_ocean;
|
||
|
--style-light_blue: @style_light_blue;
|
||
| css/less/control_panels.less | ||
|---|---|---|
|
|
||
|
// PENDENT: ggf. anpassen an Controlpanel-Farbtoene
|
||
|
.tbl-horizontal {
|
||
|
//th{ color: @brand-superdark ; }
|
||
|
//th{ color: @base-superdark ; }
|
||
|
}
|
||
|
|
||
|
}
|
||
| css/less/developing.less | ||
|---|---|---|
|
body.developing{
|
||
|
|
||
|
&>header{
|
||
|
background-color: @brand-h1-bg;
|
||
|
background-color: @base-h1-bg;
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
h1{
|
||
|
float: left;
|
||
|
color: @brand-h1-color ;
|
||
|
color: @base-h1-color ;
|
||
|
padding: 1.0em;
|
||
|
}
|
||
|
nav{
|
||
| css/less/developing_demo.less | ||
|---|---|---|
|
.rainbow-yellow { background-color: @rainbow-yellow }
|
||
|
|
||
|
// --------------
|
||
|
// Brand colors
|
||
|
// Base colors
|
||
|
|
||
|
// Text (Label & data)
|
||
|
.brand-primary { background-color: @brand-primary }
|
||
|
.brand-label { background-color: @brand-label }
|
||
|
.brand-label-bg { background-color: @brand-label-bg }
|
||
|
.base-primary { background-color: @base-primary }
|
||
|
.base-label { background-color: @base-label }
|
||
|
.base-label-bg { background-color: @base-label-bg }
|
||
|
|
||
|
// Messages & info types
|
||
|
.brand-info { background-color: @brand-info }
|
||
|
.brand-info-bg { background-color: @brand-info-bg }
|
||
|
.base-info { background-color: @base-info }
|
||
|
.base-info-bg { background-color: @base-info-bg }
|
||
|
|
||
|
.brand-ok { background-color: @brand-ok }
|
||
|
.brand-ok-bg { background-color: @brand-ok-bg }
|
||
|
.base-ok { background-color: @base-ok }
|
||
|
.base-ok-bg { background-color: @base-ok-bg }
|
||
|
|
||
|
.brand-warning { background-color: @brand-warning }
|
||
|
.brand-warning-bg { background-color: @brand-warning-bg }
|
||
|
.base-warning { background-color: @base-warning }
|
||
|
.base-warning-bg { background-color: @base-warning-bg }
|
||
|
|
||
|
.brand-error { background-color: @brand-error }
|
||
|
.brand-error-bg { background-color: @brand-error-bg }
|
||
|
.base-error { background-color: @base-error }
|
||
|
.base-error-bg { background-color: @base-error-bg }
|
||
|
|
||
|
// Positive & negative colors
|
||
|
.brand-positive { background-color: @brand-positive }
|
||
|
.brand-positive-bg { background-color: @brand-positive-bg }
|
||
|
.brand-negative { background-color: @brand-negative }
|
||
|
.brand-negative-bg { background-color: @brand-negative-bg }
|
||
|
.base-positive { background-color: @base-positive }
|
||
|
.base-positive-bg { background-color: @base-positive-bg }
|
||
|
.base-negative { background-color: @base-negative }
|
||
|
.base-negative-bg { background-color: @base-negative-bg }
|
||
|
|
||
|
|
||
|
// Buttons
|
||
| ... | ... | |
|
|
||
|
|
||
|
// -----------------------
|
||
|
// BRAND COLORS
|
||
|
// BASE COLORS
|
||
|
// -----------------------
|
||
|
.brand-superdark: @gray-superdark ; // Black
|
||
|
.brand-verydark: @gray-verydark ;
|
||
|
.brand-darker: @gray-darker ;
|
||
|
.brand-dark: @gray-dark ;
|
||
|
.base-superdark: @gray-superdark ; // Black
|
||
|
.base-verydark: @gray-verydark ;
|
||
|
.base-darker: @gray-darker ;
|
||
|
.base-dark: @gray-dark ;
|
||
|
|
||
|
.brand-standard: @gray-standard ;
|
||
|
.base-standard: @gray-standard ;
|
||
|
|
||
|
.brand-light: @gray-light ;
|
||
|
.brand-lighter: @gray-lighter ;
|
||
|
.brand-verylight: @gray-verylight ;
|
||
|
.brand-superlight: @gray-superlight ; // White
|
||
|
.base-light: @gray-light ;
|
||
|
.base-lighter: @gray-lighter ;
|
||
|
.base-verylight: @gray-verylight ;
|
||
|
.base-superlight: @gray-superlight ; // White
|
||
|
|
||
|
|
||
|
|
||
| css/less/forms.less | ||
|---|---|---|
|
vertical-align: top;
|
||
|
display: inline-block;
|
||
|
width: 88% ;
|
||
|
color: @brand-data-label-color ;
|
||
|
color: @base-data-label-color ;
|
||
|
|
||
|
&:link,
|
||
|
&:visited {
|
||
| css/less/jquery-ui.less | ||
|---|---|---|
|
.ui-menu-item {
|
||
|
a {
|
||
|
&:hover{
|
||
|
background-color: @brand-dark;
|
||
|
background-color: @base-dark;
|
||
|
color: #fff ;
|
||
|
}
|
||
|
}
|
||
| ... | ... | |
|
}
|
||
|
a.ui-state-hover{
|
||
|
color: #ffffff ;
|
||
|
background-color: @brand-darker;
|
||
|
background-color: @base-darker;
|
||
|
}
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
// current date
|
||
|
.ui-state-highlight{
|
||
|
color: #ffffff ;
|
||
|
background-color: @brand-darker;
|
||
|
background-color: @base-darker;
|
||
|
border: 1px @gray-standard solid
|
||
|
}
|
||
|
// Days
|
||
|
td a {
|
||
|
&.ui-state-default { color: @brand-dark; }
|
||
|
&.ui-state-default { color: @base-dark; }
|
||
|
&.ui-state-hover {
|
||
|
color: #ffffff ;
|
||
|
background-color: #000000;
|
||
|
border: #000000 ;
|
||
|
}
|
||
|
&.ui-state-active {
|
||
|
border: 1px solid @brand-dark;
|
||
|
background-color: @brand-dark;
|
||
|
color: @brand-verylight;
|
||
|
border: 1px solid @base-dark;
|
||
|
background-color: @base-dark;
|
||
|
color: @base-verylight;
|
||
|
}
|
||
|
} // /td
|
||
|
} // /.ui-datepicker-calendar
|
||
| ... | ... | |
|
.ui-dialog-titlebar {
|
||
|
padding: 0.4em 1.0em;
|
||
|
border: none;
|
||
|
background-color: @brand-h1-bg !important;
|
||
|
color: @brand-h1-color !important;
|
||
|
background-color: @base-h1-bg !important;
|
||
|
color: @base-h1-color !important;
|
||
|
font-weight: normal;
|
||
|
position: relative;
|
||
|
text-align: left;
|
||
| ... | ... | |
|
margin: 0;
|
||
|
padding: 0;
|
||
|
width: 100%;
|
||
|
background-color: @brand-lighter;
|
||
|
background-color: @base-lighter;
|
||
|
border-bottom: 1px @_menu_border_color solid ;
|
||
|
|
||
|
a {
|
||
| ... | ... | |
|
//background: #f6f6f6 url(ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
|
||
|
background: none ;
|
||
|
font-weight: bold;
|
||
|
color: @brand-darker;
|
||
|
color: @base-darker;
|
||
|
a,
|
||
|
a:link,
|
||
|
a:visited {
|
||
| css/less/jquery-ui_overrides.less | ||
|---|---|---|
|
// Days
|
||
|
td a {
|
||
|
&.ui-state-default {
|
||
|
color: @brand-dark;
|
||
|
color: @base-dark;
|
||
|
}
|
||
|
&.ui-state-hover {
|
||
|
color: #ffffff ;
|
||
| ... | ... | |
|
border: #000000 ;
|
||
|
}
|
||
|
&.ui-state-active {
|
||
|
border: 1px solid @brand-dark;
|
||
|
background-color: @brand-dark;
|
||
|
color: @brand-verylight;
|
||
|
border: 1px solid @base-dark;
|
||
|
background-color: @base-dark;
|
||
|
color: @base-verylight;
|
||
|
}
|
||
|
|
||
|
}
|
||
| css/less/lists.less | ||
|---|---|---|
|
font-weight: normal;
|
||
|
font-size: @font-size-medium;
|
||
|
font-family: "Helvetica Neue", Helvetica, Arial; // PENDENT: in Variablen verlegen
|
||
|
color: @brand-dark ;
|
||
|
color: @base-dark ;
|
||
|
}
|
||
|
// List Elements
|
||
|
& > p,
|
||
| css/less/main.less | ||
|---|---|---|
|
z-index: @zindex-h1; //hps:12
|
||
|
top: 60px;
|
||
|
width: 100%;
|
||
|
color: @brand-h1-color ;
|
||
|
background-color: @brand-h1-bg;
|
||
|
color: @base-h1-color ;
|
||
|
background-color: @base-h1-bg;
|
||
|
padding: @h1-padding;
|
||
|
border-top: @brand-h1-border-top;
|
||
|
border-top: @base-h1-border-top;
|
||
|
}
|
||
|
#content .wrapper h1{
|
||
|
color: @headings-color;
|
||
| ... | ... | |
|
margin: @margin-from-wrapper ;
|
||
|
}
|
||
|
body > h1{
|
||
|
color: @brand-h1-color ;
|
||
|
background-color: @brand-h1-bg ;
|
||
|
color: @base-h1-color ;
|
||
|
background-color: @base-h1-bg ;
|
||
|
padding: @h1-padding;
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
// Labels & Values (SPAN)
|
||
|
// -----------------------
|
||
|
span.label{
|
||
|
//color: @brand-data-label-color ;
|
||
|
//color: @base-data-label-color ;
|
||
|
font-size: @font-size-smaller ;
|
||
|
font-style: normal ;
|
||
|
//margin: 0 0.3em 0 0 ; // PENDENT: gehoert nicht hierher
|
||
| ... | ... | |
|
.accent{
|
||
|
div.label{
|
||
|
float: left ;
|
||
|
//color: @brand-data-label-color ;
|
||
|
//color: @base-data-label-color ;
|
||
|
font-size: 80% ;
|
||
|
//&.wi-mediumsmall{ width: 13.6em; } // PENDENT!
|
||
|
padding-top: 0.8em ;
|
||
| ... | ... | |
|
}
|
||
|
// Negative Values
|
||
|
.minus,
|
||
|
.plus0 { color: @brand-negative !important; }
|
||
|
.plus0 { color: @base-negative !important; }
|
||
|
// Positive Values
|
||
|
.plus,
|
||
|
.plus1 { color: @brand-positive !important; }
|
||
|
.plus1 { color: @base-positive !important; }
|
||
|
|
||
|
// unbalanced Ledger
|
||
|
// PENDENT: wo eingesetzt?
|
||
|
span.unbalanced_ledger {
|
||
|
background-color: @brand-warning-bg;
|
||
|
background-color: @base-warning-bg;
|
||
|
}
|
||
|
|
||
|
|
||
| css/less/menu.less | ||
|---|---|---|
|
.DHTMLSuite_menuItem_top_over,
|
||
|
.DHTMLSuite_menuItem_top_click {
|
||
|
color: @color-red-strong ;
|
||
|
background-color: @brand-superlight ;
|
||
|
background-color: @base-superlight ;
|
||
|
.DHTMLSuite_menuItem_top_arrowShowSub{
|
||
|
border: none !important ;
|
||
|
}
|
||
| ... | ... | |
|
padding: 0.1em 0 0.4em 0.4em !important;
|
||
|
margin: 11px 0 0 0;
|
||
|
border-top: none;
|
||
|
border-right: 1px solid @brand-lighter;
|
||
|
border-bottom: 1px solid @brand-lighter;
|
||
|
border-left: 1px solid @brand-lighter;
|
||
|
border-right: 1px solid @base-lighter;
|
||
|
border-bottom: 1px solid @base-lighter;
|
||
|
border-left: 1px solid @base-lighter;
|
||
|
|
||
|
// -----------------------
|
||
|
// Menu-Item Sub (2nd Level)
|
||
| ... | ... | |
|
.DHTMLSuite_menuItem_sub_over,
|
||
|
.DHTMLSuite_menuItem_sub_active {
|
||
|
color: @color-orange-strong ;
|
||
|
background-color: @brand-superlight;
|
||
|
background-color: @base-superlight;
|
||
|
}
|
||
|
|
||
|
} // /.DHTMLSuite_menuBar_sub
|
||
| css/less/requirement_spec.less | ||
|---|---|---|
|
font-size: 90% ;
|
||
|
font-weight: bold;
|
||
|
letter-spacing: 0.1em;
|
||
|
color: @brand-dark;
|
||
|
color: @base-dark;
|
||
|
}
|
||
|
} // /h3
|
||
|
|
||
| ... | ... | |
|
// special rows
|
||
|
&.section th {
|
||
|
line-height: 2.2em ;
|
||
|
//background-color: @brand-standard;
|
||
|
color: @brand-superdark ;
|
||
|
//background-color: @base-standard;
|
||
|
color: @base-superdark ;
|
||
|
b {
|
||
|
font-size: 116% ;
|
||
|
}
|
||
| ... | ... | |
|
td, th {
|
||
|
font-weight: bold ;
|
||
|
background-color: @gray-standard; // PENDENT: ZEBRA
|
||
|
border-top: 1px @brand-superdark solid ;
|
||
|
border-bottom: 1px @brand-superdark solid ;
|
||
|
border-top: 1px @base-superdark solid ;
|
||
|
border-bottom: 1px @base-superdark solid ;
|
||
|
text-align: right;
|
||
|
}
|
||
|
}
|
||
| css/less/scaffolding.less | ||
|---|---|---|
|
|
||
|
body {
|
||
|
margin: 0 ;
|
||
|
color: @brand-primary ;
|
||
|
color: @base-primary ;
|
||
|
font-family: @font-family-sans-serif;
|
||
|
font-size: @font-size-smaller ;
|
||
|
|
||
| css/less/tables.less | ||
|---|---|---|
|
// padding: 0.5em 0.4em 0.5em 0.3em ;
|
||
|
// font-weight: normal ;
|
||
|
// font-size: @h3-size ;
|
||
|
// color: @brand-heading-color ;
|
||
|
// color: @base-heading-color ;
|
||
|
.mx-h3-caption ;
|
||
|
border: none ;
|
||
|
}
|
||
| ... | ... | |
|
//padding-left: 0.8em !important;
|
||
|
}
|
||
|
tr:hover { background-color: @t-row-zebra-bg-hover ; }
|
||
|
tr.listrow_error { background-color: @brand-error-bg !important ; }
|
||
|
tr.listrow_error { background-color: @base-error-bg !important ; }
|
||
|
|
||
|
td, th {
|
||
|
color: @table-list-zebra-text-color ;
|
||
| ... | ... | |
|
}
|
||
|
&:link,
|
||
|
&:visited{
|
||
|
color: @brand-light ;
|
||
|
color: @base-light ;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
| css/less/variables.less | ||
|---|---|---|
|
// CONTENTS:
|
||
|
// - COLORS
|
||
|
// - Greys
|
||
|
// - Branding
|
||
|
// - Base
|
||
|
// - Divers Color Specifications
|
||
|
// - SCAFFOLDING
|
||
|
// - Body/Content Background color, Text color
|
||
| ... | ... | |
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// COLORS (GREYs, BRAND COLORS & OTHERS)
|
||
|
// COLORS (GREYs, BASE COLORS & OTHERS)
|
||
|
// --------------------------------------
|
||
|
// Base Colors see variables_color[*-9].less
|
||
|
// Include the preferred color scheme in style.less before including this less file
|
||
| ... | ... | |
|
// General text color (label & data)
|
||
|
// -----------------------
|
||
|
// Standard text
|
||
|
@brand-primary: @brand-text-color;
|
||
|
@brand-label: @brand-data-label-color;
|
||
|
@brand-label-bg: @brand-lighter;
|
||
|
@base-primary: @base-text-color;
|
||
|
@base-label: @base-data-label-color;
|
||
|
@base-label-bg: @base-lighter;
|
||
|
|
||
|
// -----------------------
|
||
|
// MESSAGES & INFO TYPES
|
||
|
// -----------------------
|
||
|
// color definitions in variables_color_[*-9].less
|
||
|
@brand-ok: @color-green-strong;
|
||
|
@brand-ok-bg: @color-green-light;
|
||
|
@base-ok: @color-green-strong;
|
||
|
@base-ok-bg: @color-green-light;
|
||
|
|
||
|
@brand-error: @color-red-strong;
|
||
|
@brand-error-bg: @color-red-light;
|
||
|
@base-error: @color-red-strong;
|
||
|
@base-error-bg: @color-red-light;
|
||
|
|
||
|
@brand-info: @color-blue-strong;
|
||
|
@brand-info-bg: @color-blue-light;
|
||
|
@base-info: @color-blue-strong;
|
||
|
@base-info-bg: @color-blue-light;
|
||
|
|
||
|
@brand-warning: @color-orange-strong;
|
||
|
@brand-warning-bg: @color-orange-light;
|
||
|
@base-warning: @color-orange-strong;
|
||
|
@base-warning-bg: @color-orange-light;
|
||
|
|
||
|
// Positive & negative colors
|
||
|
@brand-positive: @color-green-strong;
|
||
|
@brand-positive-bg: @color-green-light;
|
||
|
@brand-negative: @color-red-strong;
|
||
|
@brand-negative-bg: @color-red-light;
|
||
|
@base-positive: @color-green-strong;
|
||
|
@base-positive-bg: @color-green-light;
|
||
|
@base-negative: @color-red-strong;
|
||
|
@base-negative-bg: @color-red-light;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
@border-radius-large: 6px;
|
||
|
@border-radius-small: 3px;
|
||
|
|
||
|
@component-active-color: @brand-superlight;
|
||
|
@component-active-bg: @brand-primary; // PENDENT: Variable nicht vorgesehen dafuer
|
||
|
@component-active-color: @base-superlight;
|
||
|
@component-active-bg: @base-primary; // PENDENT: Variable nicht vorgesehen dafuer
|
||
|
|
||
|
@caret-width-base: 4px;
|
||
|
@caret-width-large: 5px;
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// LINKS
|
||
|
// --------------------------------------
|
||
|
@link-color: @brand-link-color;
|
||
|
@link-color: @base-link-color;
|
||
|
@link-hover-color: darken(@link-color, 15%);
|
||
|
@link-decoration: none;
|
||
|
@link-hover-decoration: underline;
|
||
| ... | ... | |
|
@headings-font-family: @font-family-base;
|
||
|
@headings-weight: 500;
|
||
|
@headings-line-height: 1.3em;
|
||
|
@headings-color: @brand-heading-color;
|
||
|
@headings-color: @base-heading-color;
|
||
|
@headings-color-accent: #000;
|
||
|
|
||
|
@headings-color-error: @brand-error;
|
||
|
@headings-color-confirm: @brand-ok;
|
||
|
@headings-color-error: @base-error;
|
||
|
@headings-color-confirm: @base-ok;
|
||
|
|
||
|
@h1-size: floor(@font-size-base * 1.1); // ~**px
|
||
|
@h2-size: floor(@font-size-base * 1.2); // ~**px
|
||
| ... | ... | |
|
// Heading 1 (H1)
|
||
|
// -----------------------
|
||
|
// Fixed on top of every page together with the action bar
|
||
|
@brand-h1-color: @_brand-h1-color;
|
||
|
@brand-h1-bg: @_brand-h1-bg;
|
||
|
@base-h1-color: @_base-h1-color;
|
||
|
@base-h1-bg: @_base-h1-bg;
|
||
|
@h1-padding: 0.7em 0.5em 0.7em 1.3em;
|
||
|
@h1-margin: 0;
|
||
|
@brand-h1-border-top: @_brand-h1-border-top;
|
||
|
@base-h1-border-top: @_base-h1-border-top;
|
||
|
// -----------------------
|
||
|
// Heading Controlpanels
|
||
|
// -----------------------
|
||
| ... | ... | |
|
// -----------------------
|
||
|
// Data types
|
||
|
// -----------------------
|
||
|
@heading-and-label-color: @brand-data-label-color ;
|
||
|
@heading-and-label-bg: @brand-data-label-color ;
|
||
|
@data-color: @brand-data-color ;
|
||
|
@heading-and-label-color: @base-data-label-color ;
|
||
|
@heading-and-label-bg: @base-data-label-color ;
|
||
|
@data-color: @base-data-color ;
|
||
|
|
||
|
@long-desc-size: @font-size-verysmall ;
|
||
|
@long-desc-color: @brand-text-color ;
|
||
|
@long-desc-color: @base-text-color ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
@controlpanel-radius: @contentbox-radius ;
|
||
|
|
||
|
// PENDENT: noetig?
|
||
|
@controlpanel-bg-hover: @brand-superdark ;
|
||
|
@controlpanel-bg-hover-text: @brand-light ;
|
||
|
@controlpanel-active-bg: @brand-darker ;
|
||
|
@controlpanel-active-text: @brand-lighter ;
|
||
|
@controlpanel-bg-hover: @base-superdark ;
|
||
|
@controlpanel-bg-hover-text: @base-light ;
|
||
|
@controlpanel-active-bg: @base-darker ;
|
||
|
@controlpanel-active-text: @base-lighter ;
|
||
|
|
||
|
@controlpanel-h3-color: @h3-size ;
|
||
|
@controlpanel-h3-size: 110% ;
|
||
| ... | ... | |
|
@message-padding: 0.6em 0.6em 0.5em 0.6em ;
|
||
|
|
||
|
// Error
|
||
|
@message_error_bg: @brand-error-bg ;
|
||
|
@message_error_border: 1px solid @brand-error ;
|
||
|
@message_error_text: @brand-error ;
|
||
|
@message_error_bg: @base-error-bg ;
|
||
|
@message_error_border: 1px solid @base-error ;
|
||
|
@message_error_text: @base-error ;
|
||
|
// OK
|
||
|
@message_ok_bg: @brand-ok-bg ;
|
||
|
@message_ok_border: 1px solid @brand-ok ;
|
||
|
@message_ok_text: @brand-ok ;
|
||
|
@message_ok_bg: @base-ok-bg ;
|
||
|
@message_ok_border: 1px solid @base-ok ;
|
||
|
@message_ok_text: @base-ok ;
|
||
|
// Info & Hint
|
||
|
@message_info_bg: @brand-info-bg ;
|
||
|
@message_info_border: 1px solid @brand-info ;
|
||
|
@message_info_text: @brand-info ;
|
||
|
@message_info_bg: @base-info-bg ;
|
||
|
@message_info_border: 1px solid @base-info ;
|
||
|
@message_info_text: @base-info ;
|
||
|
// Warning
|
||
|
@message_warning_bg: @brand-warning-bg ;
|
||
|
@message_warning_border: 1px solid @brand-warning ;
|
||
|
@message_warning_text: @brand-warning ;
|
||
|
@message_warning_bg: @base-warning-bg ;
|
||
|
@message_warning_border: 1px solid @base-warning ;
|
||
|
@message_warning_text: @base-warning ;
|
||
|
// Hint (like Info above, just to make it sure working)
|
||
|
@message_hint_bg: @message_info_bg ;
|
||
|
@message_hint_border: @message_info_border ;
|
||
| ... | ... | |
|
// -----------------------
|
||
|
// Date picker
|
||
|
// -----------------------
|
||
|
@jquery_datepicker-bg-color: @brand-superlight ;
|
||
|
@jquery_datepicker-bg-color: @base-superlight ;
|
||
|
|
||
|
// -----------------------
|
||
|
// UI-Dialog
|
||
|
// -----------------------
|
||
|
@jquery_ui_dialog-bg-color: @brand-verylight ;
|
||
|
@jquery_ui_dialog-bg-color: @base-verylight ;
|
||
|
@jquery_ui_dialog-bg-style: @_bg_style_body ;
|
||
|
|
||
|
// -----------------------
|
||
|
// TOOLTIPSTER
|
||
|
// -----------------------
|
||
|
@jquery_ui_tooltipster-bg-color: @brand-standard ;
|
||
|
@jquery_ui_tooltipster-border-color: @brand-lighter ;
|
||
|
@jquery_ui_tooltipster-color: @brand-verylight ;
|
||
|
@jquery_ui_tooltipster-bg-color: @base-standard ;
|
||
|
@jquery_ui_tooltipster-border-color: @base-lighter ;
|
||
|
@jquery_ui_tooltipster-color: @base-verylight ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
--gray-verylight: @gray-verylight;
|
||
|
--gray-superlight: @gray-superlight; // White
|
||
|
|
||
|
--color-standard: @brand-standard;
|
||
|
--color-superlight: @brand-superlight;
|
||
|
--color-verylight: @brand-verylight;
|
||
|
--color-lighter: @brand-lighter;
|
||
|
--color-light: @brand-light;
|
||
|
--color-dark: @brand-dark;
|
||
|
--color-darker: @brand-darker;
|
||
|
--color-verydark: @brand-verydark;
|
||
|
--color-superdark: @brand-superdark;
|
||
|
--color-standard: @base-standard;
|
||
|
--color-superlight: @base-superlight;
|
||
|
--color-verylight: @base-verylight;
|
||
|
--color-lighter: @base-lighter;
|
||
|
--color-light: @base-light;
|
||
|
--color-dark: @base-dark;
|
||
|
--color-darker: @base-darker;
|
||
|
--color-verydark: @base-verydark;
|
||
|
--color-superdark: @base-superdark;
|
||
|
|
||
|
--msg-ok-strong: @msg-green-strong;
|
||
|
--msg-ok-light: @msg-green-light;
|
||
| ... | ... | |
|
--msg-warning-light: @msg-orange-light;
|
||
|
|
||
|
}
|
||
|
|
||
| css/less/variables_color_style.less | ||
|---|---|---|
|
// DESCRIPTION:
|
||
|
//
|
||
|
// CONTENTS:
|
||
|
// - BRAND COLORS
|
||
|
// - BASE COLORS
|
||
|
// - Grey Shades
|
||
|
// - BRAND COLORS
|
||
|
// - BASE COLORS
|
||
|
// - MAIN PROPERTIES (STANDARD TEXT COLORS)
|
||
|
// - SCAFFOLDING (PAGE)
|
||
|
// - FRAME HEADER
|
||
| ... | ... | |
|
|
||
|
// ----------------------------------------------------------------------------
|
||
|
|
||
|
// --------------------------------------
|
||
|
// BRAND COLORS
|
||
|
// --------------------------------------
|
||
|
// used for h1 headers and buttons
|
||
|
//
|
||
|
// grey-brown-green: #406449;
|
||
|
|
||
|
@brand-color: #406449;
|
||
|
@on-brand-color: #fff;
|
||
|
|
||
|
@brand-color-light: lighten(@brand-color, 10%);
|
||
|
|
||
|
// --------------------------------------
|
||
|
// YOUR CUSTOM COLOR STYLE
|
||
|
// --------------------------------------
|
||
| ... | ... | |
|
|
||
|
|
||
|
// --------------------------------------
|
||
|
// BRAND COLORS (CALCULATED)
|
||
|
// BASE COLORS (CALCULATED)
|
||
|
// --------------------------------------
|
||
|
// Calculation of the variations of the brand colors
|
||
|
// Calculation of the variations of the base colors
|
||
|
// It is generally not necessary to touch the following code,
|
||
|
// change therefore the gray colors above
|
||
|
|
||
|
@colorstyle: "green_brown" ; // not style_*, only * like "plum"
|
||
|
@brandstyle: "style_@{colorstyle}" ; // DO NOT TOUCH
|
||
|
@basestyle: "style_@{colorstyle}" ; // DO NOT TOUCH
|
||
|
|
||
|
|
||
|
@brand-standard: @@brandstyle ; // DO NOT TOUCH
|
||
|
@base-standard: @@basestyle ; // DO NOT TOUCH
|
||
|
|
||
|
@brand-superdark: multiply( @brand-standard , @gray-superdark) ; // almost Black
|
||
|
@brand-verydark: multiply( @brand-standard , @gray-verydark) ;
|
||
|
@brand-darker: multiply( @brand-standard , @gray-darker) ;
|
||
|
@brand-dark: multiply( @brand-standard , @gray-dark) ;
|
||
|
@base-superdark: multiply( @base-standard , @gray-superdark) ; // almost Black
|
||
|
@base-verydark: multiply( @base-standard , @gray-verydark) ;
|
||
|
@base-darker: multiply( @base-standard , @gray-darker) ;
|
||
|
@base-dark: multiply( @base-standard , @gray-dark) ;
|
||
|
|
||
|
@brand-light: screen( @brand-standard , @gray-light) ;
|
||
|
@brand-lighter: screen( @brand-standard , @gray-lighter) ;
|
||
|
@brand-verylight: screen( @brand-standard , @gray-verylight) ;
|
||
|
@brand-superlight: @gray-superlight ; // White
|
||
|
@base-light: screen( @base-standard , @gray-light) ;
|
||
|
@base-lighter: screen( @base-standard , @gray-lighter) ;
|
||
|
@base-verylight: screen( @base-standard , @gray-verylight) ;
|
||
|
@base-superlight: @gray-superlight ; // White
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// -----------------------
|
||
|
|
||
|
// Body
|
||
|
@_bg_style_body: linear-gradient(to bottom, @brand-verylight, @brand-light);
|
||
|
@_bg_style_body: linear-gradient(to bottom, @base-verylight, @base-light);
|
||
|
// Control panels
|
||
|
@_bg_style_controlpanel: linear-gradient(to top, @brand-light, @brand-verylight);
|
||
|
@_bg_style_controlpanel: linear-gradient(to top, @base-light, @base-verylight);
|
||
|
// Buttons
|
||
|
@_bg_style_button: linear-gradient(to top, @brand-light, @brand-verylight);
|
||
|
@_bg_style_button: linear-gradient(to top, @base-light, @base-verylight);
|
||
|
@_bg_style_button_neutral: linear-gradient(to top, @gray-light, @gray-verylight);
|
||
|
|
||
|
|
||
| ... | ... | |
|
// a mixin for the body background
|
||
|
// CUSTOMIZE:
|
||
|
.bg-body {
|
||
|
//background-image: linear-gradient(to bottom, @brand-verylight, @brand-light); // GRADIENT
|
||
|
background-color: @brand-light ; // same as bottom stop-color bottom in background-image below
|
||
|
//background-image: linear-gradient(to bottom, @base-verylight, @base-light); // GRADIENT
|
||
|
background-color: @base-light ; // same as bottom stop-color bottom in background-image below
|
||
|
// background-image: none; // NO GRADIENT
|
||
|
}
|
||
|
.bg-content {
|
||
|
background-image: linear-gradient(to bottom, @brand-verylight, @brand-light); // GRADIENT
|
||
|
//background-color: @brand-light ; // same as bottom stop-color bottom in background-image below
|
||
|
background-image: linear-gradient(to bottom, @base-verylight, @base-light); // GRADIENT
|
||
|
//background-color: @base-light ; // same as bottom stop-color bottom in background-image below
|
||
|
// background-image: none; // NO GRADIENT
|
||
|
}
|
||
|
|
||
| ... | ... | |
|
// light is for background-colors
|
||
|
|
||
|
// Error (Red)
|
||
|
@msg-red-strong: mix(@brand-darker, @color-red-strong, 20);
|
||
|
@msg-red-light: mix(@brand-verylight, @color-red-light, 60);
|
||
|
@msg-red-strong: mix(@base-darker, @color-red-strong, 20);
|
||
|
@msg-red-light: mix(@base-verylight, @color-red-light, 60);
|
||
|
// OK (Green)
|
||
|
@msg-green-strong: mix(@brand-darker, @color-green-strong, 20);
|
||
|
@msg-green-light: mix(@brand-verylight, @color-green-light, 60);
|
||
|
@msg-green-strong: mix(@base-darker, @color-green-strong, 20);
|
||
|
@msg-green-light: mix(@base-verylight, @color-green-light, 60);
|
||
|
// Info/Hint (Blue)
|
||
|
@msg-blue-strong: mix(@brand-darker, @color-blue-strong, 20);
|
||
|
@msg-blue-light: mix(@brand-verylight, @color-blue-light, 20);
|
||
|
@msg-blue-strong: mix(@base-darker, @color-blue-strong, 20);
|
||
|
@msg-blue-light: mix(@base-verylight, @color-blue-light, 20);
|
||
|
// Warning (Orange)
|
||
|
@msg-orange-strong: mix(@brand-darker, @color-orange-strong, 20); // more brown
|
||
|
@msg-orange-light: mix(@brand-lighter, @color-orange-light, 50);
|
||
|
@msg-orange-strong: multiply(@brand-darker, @color-orange-strong); // more brown
|
||
|
@msg-orange-light: multiply(@brand-lighter, @color-orange-light);
|
||
|
@msg-orange-strong: mix(@base-darker, @color-orange-strong, 20); // more brown
|
||
|
@msg-orange-light: mix(@base-lighter, @color-orange-light, 50);
|
||
|
@msg-orange-strong: multiply(@base-darker, @color-orange-strong); // more brown
|
||
|
@msg-orange-light: multiply(@base-lighter, @color-orange-light);
|
||
|
|
||
|
//@msg-red-light: screen( @msg-red-strong , @gray-verylight) ;
|
||
|
//@msg-red-light: screen( @msg-red-strong , @brand-light) ;
|
||
|
//@msg-red-light: screen( @msg-red-strong , @base-light) ;
|
||
|
//@msg-green-light: screen( @msg-green-strong , @gray-verylight) ;
|
||
|
//@msg-green-light: screen( @msg-green-strong , @brand-light) ;
|
||
|
//@msg-green-light: screen( @msg-green-strong , @base-light) ;
|
||
|
//@msg-blue-light: screen( @msg-blue-strong , @gray-verylight) ;
|
||
|
//@msg-orange-light: screen( @msg-orange-strong , @gray-verylight) ;
|
||
|
|
||
| ... | ... | |
|
// MAIN PROPERTIES (STANDARD TEXT COLORS)
|
||
|
// --------------------------------------
|
||
|
// PENDENT: genauer anschauen
|
||
|
@brand-text-color: @gray-dark ; //
|
||
|
@brand-text-color-accent: @brand-standard ; //
|
||
|
@base-text-color: @gray-dark ; //
|
||
|
@base-text-color-accent: @base-standard ; //
|
||
|
|
||
|
@brand-link-color: @brand-dark ; //
|
||
|
@brand-link-color-hover: @brand-darker ; //
|
||
|
@base-link-color: @base-dark ; //
|
||
|
@base-link-color-hover: @base-darker ; //
|
||
|
|
||
|
@brand-table-text-color: @brand-superdark ; //
|
||
|
@base-table-text-color: @base-superdark ; //
|
||
|
|
||
|
@brand-heading-color: @brand-superdark ; // Standard heading color
|
||
|
@brand-heading-bg: @brand-dark ; //
|
||
|
@base-heading-color: @base-superdark ; // Standard heading color
|
||
|
@base-heading-bg: @base-dark ; //
|
||
|
|
||
|
@brand-data-color: @brand-standard ; //
|
||
|
@brand-data-label-color: @brand-darker ; // Standard-Label color
|
||
|
@base-data-color: @base-standard ; //
|
||
|
@base-data-label-color: @base-darker ; // Standard-Label color
|
||
|
|
||
|
// Text (Label & data)
|
||
|
@brand-primary: @brand-text-color;
|
||
|
@brand-label: @brand-data-label-color; // PENDENT: wozu?
|
||
|
@brand-label-bg: @brand-lighter; // PENDENT: wozu?
|
||
|
@base-primary: @base-text-color;
|
||
|
@base-label: @base-data-label-color; // PENDENT: wozu?
|
||
|
@base-label-bg: @base-lighter; // PENDENT: wozu?
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// SCAFFOLDING (PAGE)
|
||
|
// --------------------------------------
|
||
|
|
||
|
@body-bg: @brand-verylight; // general OBSOLETE
|
||
|
@content-bg: @brand-superlight; // background first tabs PENDENT: obsolete!
|
||
|
@heading-bg: @brand-lighter ; // controlpanels & other stuff PENDENT: obsolete!
|
||
|
@body-bg: @base-verylight; // general OBSOLETE
|
||
|
@content-bg: @base-superlight; // background first tabs PENDENT: obsolete!
|
||
|
@heading-bg: @base-lighter ; // controlpanels & other stuff PENDENT: obsolete!
|
||
|
|
||
|
@text-color: @brand-primary; // PENDENT: obsolete!
|
||
|
@heading-color: @brand-heading-color ; // labels & table headings // PENDENT: obsolete!
|
||
|
@caption-color: @brand-heading-color ; // caption // PENDENT: obsolete!
|
||
|
@text-color: @base-primary; // PENDENT: obsolete!
|
||
|
@heading-color: @base-heading-color ; // labels & table headings // PENDENT: obsolete!
|
||
|
@caption-color: @base-heading-color ; // caption // PENDENT: obsolete!
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// FRAME HEADER (DASHBOARD)
|
||
|
// --------------------------------------
|
||
|
|
||
|
@_dashbrd_bg: @brand-darker ;
|
||
|
@_dashbrd_text: @brand-verylight ;
|
||
|
@_dashbrd_link: @brand-light ;
|
||
|
@_dashbrd_link_hover: @brand-superlight ;
|
||
|
@_dashbrd_input_bg: @brand-light;
|
||
|
@_dashbrd_input_text: @brand-superdark ;
|
||
|
@_dashbrd_bg: @base-darker ;
|
||
|
@_dashbrd_text: @base-verylight ;
|
||
|
@_dashbrd_link: @base-light ;
|
||
|
@_dashbrd_link_hover: @base-superlight ;
|
||
|
@_dashbrd_input_bg: @base-light;
|
||
|
@_dashbrd_input_text: @base-superdark ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// MENU TOP (CSS)
|
||
|
// --------------------------------------
|
||
|
|
||
|
@_menu_bg: @brand-lighter ;
|
||
|
@_menu_border_color: @brand-standard ;
|
||
|
@_menu_bg: @base-lighter ;
|
||
|
@_menu_border_color: @base-standard ;
|
||
|
|
||
|
|
||
|
@_menu_link: @brand-darker ;
|
||
|
@_menu_link_bg: @brand-lighter ;
|
||
|
@_menu_link_hover: @brand-verydark ;
|
||
|
@_menu_link_hover_bg: @brand-light ;
|
||
|
@_menu_link: @base-darker ;
|
||
|
@_menu_link_bg: @base-lighter ;
|
||
|
@_menu_link_hover: @base-verydark ;
|
||
|
@_menu_link_hover_bg: @base-light ;
|
||
|
|
||
|
@_menu_link_bg_level1: @brand-light ;
|
||
|
@_menu_link_bg_level1_hover: @brand-light ;
|
||
|
@_menu_link_bg_level2: @brand-light ;
|
||
|
@_menu_link_bg_level2_hover: @brand-lighter ;
|
||
|
@_menu_link_bg_level3: @brand-lighter ;
|
||
|
@_menu_link_bg_level3_hover: @brand-light ;
|
||
|
@_menu_link_bg_level1: @base-light ;
|
||
|
@_menu_link_bg_level1_hover: @base-light ;
|
||
|
@_menu_link_bg_level2: @base-light ;
|
||
|
@_menu_link_bg_level2_hover: @base-lighter ;
|
||
|
@_menu_link_bg_level3: @base-lighter ;
|
||
|
@_menu_link_bg_level3_hover: @base-light ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// MENU LEFT (JS)
|
||
|
// --------------------------------------
|
||
|
@_menu_left_bg: @brand-standard ;
|
||
|
@_menu_left_bg: @base-standard ;
|
||
|
|
||
|
@_menu_left_level_1_color: @brand-darker ;
|
||
|
@_menu_left_level_1_bg: @brand-light ;
|
||
|
@_menu_left_level_1_hover_color: @brand-verylight ;
|
||
|
@_menu_left_level_1_hover_bg: @brand-dark ;
|
||
|
@_menu_left_level_1_color: @base-darker ;
|
||
|
@_menu_left_level_1_bg: @base-light ;
|
||
|
@_menu_left_level_1_hover_color: @base-verylight ;
|
||
|
@_menu_left_level_1_hover_bg: @base-dark ;
|
||
|
|
||
|
@_menu_left_level_2_color: @brand-darker ;
|
||
|
@_menu_left_level_2_bg: @brand-lighter ;
|
||
|
@_menu_left_level_2_hover_color: @brand-superdark ;
|
||
|
@_menu_left_level_2_hover_bg: @brand-light ;
|
||
|
@_menu_left_level_2_color: @base-darker ;
|
||
|
@_menu_left_level_2_bg: @base-lighter ;
|
||
|
@_menu_left_level_2_hover_color: @base-superdark ;
|
||
|
@_menu_left_level_2_hover_bg: @base-light ;
|
||
|
|
||
|
@_menu_left_level_3_color: @brand-darker ;
|
||
|
@_menu_left_level_3_bg: @brand-lighter ;
|
||
|
@_menu_left_level_3_hover_color: @brand-superdark ;
|
||
|
@_menu_left_level_3_hover_bg: @brand-light ;
|
||
|
@_menu_left_level_3_color: @base-darker ;
|
||
|
@_menu_left_level_3_bg: @base-lighter ;
|
||
|
@_menu_left_level_3_hover_color: @base-superdark ;
|
||
|
@_menu_left_level_3_hover_bg: @base-light ;
|
||
|
|
||
|
|
||
|
// Just additional stuff
|
||
|
@_menu_open_color: @brand-lighter ;
|
||
|
@_menu_open_bg: @brand-darker ;
|
||
|
@_menu_open_color: @base-lighter ;
|
||
|
@_menu_open_bg: @base-darker ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// HEADER H1
|
||
|
// --------------------------------------
|
||
|
// Header right on top of #content (h1 only once per page)
|
||
|
@_brand-h1-color: @brand-lighter ;
|
||
|
@_brand-h1-bg: @brand-dark ;
|
||
|
@_brand-h1-border-top: 1px @brand-standard solid ;
|
||
|
@_base-h1-color: @on-brand-color;
|
||
|
@_base-h1-bg: @brand-color;
|
||
|
@_base-h1-border-top: 1px @base-standard solid ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// ACTIONBAR
|
||
|
// --------------------------------------
|
||
|
// PENDENT: Button-Parameter anwenden
|
||
|
@_actionbar-bg: @brand-light;
|
||
|
@_actionbar-bg-active: @brand-lighter;
|
||
|
@_actionbar-bg: @base-light;
|
||
|
@_actionbar-bg-active: @base-lighter;
|
||
|
|
||
|
@_actionbar-font-color: @brand-dark;
|
||
|
@_actionbar-font-color-active: @brand-dark;
|
||
|
@_actionbar-font-color: @base-dark;
|
||
|
@_actionbar-font-color-active: @base-dark;
|
||
|
|
||
|
@_actionbar-border-color: @brand-dark;
|
||
|
@_actionbar-border-color-active: @brand-dark ;
|
||
|
@_actionbar-border-color: @base-dark;
|
||
|
@_actionbar-border-color-active: @base-dark ;
|
||
|
|
||
|
@_actionbar-hover-bg: @brand-lighter;
|
||
|
@_actionbar-hover-color: @brand-verydark;
|
||
|
@_actionbar-hover-bg: @base-lighter;
|
||
|
@_actionbar-hover-color: @base-verydark;
|
||
|
|
||
|
@_actionbar-font-color-disabled: @brand-standard;
|
||
|
@_actionbar-font-color-disabled: @base-standard;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// TABS
|
||
|
// --------------------------------------
|
||
|
// background tabs panel (data/content)
|
||
|
@_tabs-bg: @brand-superlight ;
|
||
|
@_tabs-panel-bg: @brand-verylight ; // like active
|
||
|
@_tabs-border-color: @brand-standard ;
|
||
|
@_tabs-bg: @base-superlight ;
|
||
|
@_tabs-panel-bg: @base-verylight ; // like active
|
||
|
@_tabs-border-color: @base-standard ;
|
||
|
|
||
|
@_tabs-default-bg: @brand-superlight;
|
||
|
@_tabs-default-color: @brand-darker;
|
||
|
@_tabs-default-hover-bg: @brand-lighter;
|
||
|
@_tabs-default-hover-color: @brand-darker;
|
||
|
@_tabs-default-bg: @base-superlight;
|
||
|
@_tabs-default-color: @base-darker;
|
||
|
@_tabs-default-hover-bg: @base-lighter;
|
||
|
@_tabs-default-hover-color: @base-darker;
|
||
|
|
||
|
@_tabs-active-bg: darken( @brand-verylight, 3% );
|
||
|
@_tabs-active-color: @brand-darker;
|
||
|
@_tabs-active-hover-bg: @brand-verylight;
|
||
|
@_tabs-active-hover-color: @brand-darker;
|
||
|
@_tabs-active-bg: darken( @base-verylight, 3% );
|
||
|
@_tabs-active-color: @base-darker;
|
||
|
@_tabs-active-hover-bg: @base-verylight;
|
||
|
@_tabs-active-hover-color: @base-darker;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// TABLES
|
||
|
// --------------------------------------
|
||
|
|
||
|
@_table-border-color: @brand-standard; // table and cell border
|
||
|
@_table-border-color: @base-standard; // table and cell border
|
||
|
|
||
|
@_table-bg: transparent; // overall background-color
|
||
|
@_table-bg-accent: @brand-lighter; // for striping
|
||
|
@_table-bg-hover: @brand-superlight;
|
||
|
@_table-bg-accent: @base-lighter; // for striping
|
||
|
@_table-bg-hover: @base-superlight;
|
||
|
@_table-bg-active: @_table-bg-hover;
|
||
|
|
||
|
@_table-caption-bg: transparent ;
|
||
|
@_table-caption-color: @brand-dark;
|
||
|
@_table-caption-color: @base-dark;
|
||
|
|
||
|
// --------------
|
||
|
// Table Cells
|
||
|
// --------------
|
||
|
@_t-cell-text-color: @brand-verydark;
|
||
|
@_t-cell-th-text-color: @brand-dark; // even for label/.label in tables
|
||
|
@_t-cell-text-color: @base-verydark;
|
||
|
@_t-cell-th-text-color: @base-dark; // even for label/.label in tables
|
||
|
|
||
|
@_t-cell-head-bg: @brand-dark;
|
||
|
@_t-cell-head-bg: @base-dark;
|
||
|
@_t-cell-head-bg-accent: @gray-light; // PENDENT: wo eingesetzt
|
||
|
@_t-cell-head-text: @brand-superlight;
|
||
|
@_t-cell-head-text-accent: @brand-lighter; // Links
|
||
|
@_t-cell-head-text: @base-superlight;
|
||
|
@_t-cell-head-text-accent: @base-lighter; // Links
|
||
|
|
||
|
@_t-cell-label-text: @brand-darker;
|
||
|
@_t-cell-label-text-accent: @brand-superdark;
|
||
|
@_t-cell-data-text: @brand-verydark;
|
||
|
@_t-cell-data-text-accent: @brand-superdark;
|
||
|
@_t-cell-label-text: @base-darker;
|
||
|
@_t-cell-label-text-accent: @base-superdark;
|
||
|
@_t-cell-data-text: @base-verydark;
|
||
|
@_t-cell-data-text-accent: @base-superdark;
|
||
|
|
||
|
@_t-cell-databox-text-color: @brand-darker ;
|
||
|
@_t-cell-databox-border-color: @brand-light ;
|
||
|
@_t-cell-databox-text-color: @base-darker ;
|
||
|
@_t-cell-databox-border-color: @base-light ;
|
||
|
|
||
|
@_t-cell-foot-text: @brand-superdark;
|
||
|
@_t-cell-foot-text: @base-superdark;
|
||
|
|
||
|
// -----------------------
|
||
|
// Zebra effect in list tables
|
||
|
// -----------------------
|
||
|
@_t-row-zebra-bg-odd: @brand-verylight;
|
||
|
@_t-row-zebra-bg-even: @brand-lighter;
|
||
|
@_t-row-zebra-bg-odd: @base-verylight;
|
||
|
@_t-row-zebra-bg-even: @base-lighter;
|
||
|
|
||
|
@_table-list-zebra-text-color: @brand-dark ;
|
||
|
@_table-list-zebra-link-color: @brand-standard ;
|
||
|
@_table-list-zebra-text-color: @base-dark ;
|
||
|
@_table-list-zebra-link-color: @base-standard ;
|
||
|
|
||
|
@_t-row-zebra-bg-hover: @brand-superlight;
|
||
|
@_t-row-zebra-bg-hover: @base-superlight;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// TABLE HORIZONTAL (tbl.horizontal)
|
||
|
// --------------------------------------
|
||
|
//@_table-horiz-th-color: @brand-darker ;
|
||
|
//@_table-horiz-td-color: @brand-verydark ;
|
||
|
//@_table-horiz-th-color: @base-darker ;
|
||
|
//@_table-horiz-td-color: @base-verydark ;
|
||
|
|
||
|
// -----------------------
|
||
|
// CAPTION (caption & th.caption)
|
||
|
// -----------------------
|
||
|
//@_table-horiz-caption-color: @brand-darker ;
|
||
|
//@_table-horiz-caption-bg: @brand-verylight ;
|
||
|
//@_table-horiz-caption-color: @base-darker ;
|
||
|
//@_table-horiz-caption-bg: @base-verylight ;
|
||
|
|
||
|
// -----------------------
|
||
|
// SPAN DATA
|
||
| ... | ... | |
|
// CONTROL PANELS
|
||
|
// --------------------------------------
|
||
|
|
||
|
@_controlpanel-bg-color: @brand-verylight ;
|
||
|
@_controlpanel-bg-color: @base-verylight ;
|
||
|
@_controlpanel-bg: @_bg_style_controlpanel ;
|
||
|
@_controlpanel-color: @brand-dark ;
|
||
|
@_controlpanel-header-color: @brand-dark ;
|
||
|
@_controlpanel-border-color: @brand-standard ;
|
||
|
@_controlpanel-color: @base-dark ;
|
||
|
@_controlpanel-header-color: @base-dark ;
|
||
|
@_controlpanel-border-color: @base-standard ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// --------------------------------------
|
||
|
// FORM ELEMENTS
|
||
|
// --------------------------------------
|
||
|
@_formelement-focus-bg: @brand-light ;
|
||
|
@_formelement-focus-text: @brand-darker ;
|
||
|
@_formelement-focus-border: 1px @brand-verydark solid ;
|
||
|
@_formelement-focus-bg: @base-light ;
|
||
|
@_formelement-focus-text: @base-darker ;
|
||
|
@_formelement-focus-border: 1px @base-verydark solid ;
|
||
|
|
||
|
|
||
|
|
||
| ... | ... | |
|
// With Manipulation
|
||
|
// -----------------------
|
||
|
// Button with manipulation (submit etc.)
|
||
|
@_button-strong-color: @brand-verylight;
|
||
|
@_button-strong-bg: @brand-dark;
|
||
|
@_button-strong-border-color: @brand-darker;
|
||
|
@_button-strong-color: @on-brand-color;
|
||
|
@_button-strong-bg: @brand-color;
|
||
|
@_button-strong-border-color: @brand-color;
|
||
|
|
||
|
@_button-strong-hover-color: @brand-lighter;
|
||
|
@_button-strong-hover-bg: @brand-darker;
|
||
|
@_button-strong-hover-border-color: @brand-superdark;
|
||
|
@_button-strong-hover-color: @on-brand-color;
|
||
|
@_button-strong-hover-bg: @brand-color-light;
|
||
|
@_button-strong-hover-border-color: @brand-color-light;
|
||
|
|
||
|
@_button-strong-active-color: @brand-lighter;
|
||
|
@_button-strong-active-bg: @brand-superdark;
|
||
|
@_button-strong-active-border-color: @brand-superdark;
|
||
|
@_button-strong-active-color: @on-brand-color;
|
||
|
@_button-strong-active-bg: @brand-color-light;
|
||
|
@_button-strong-active-border-color: @brand-color-light;
|
||
|
|
||
|
// -----------------------
|
||
|
// NEUTRAL
|
||
|
// -----------------------
|
||
|
// Button without data manipulation (reset, cancel, open, show etc.)
|
||
|
@_button-neutral-color: @brand-darker;
|
||
|
@_button-neutral-bg: @brand-lighter;
|
||
|
@_button-neutral-border-color: @brand-dark;
|
||
|
@_button-neutral-color: @base-darker;
|
||
|
@_button-neutral-bg: @base-lighter;
|
||
|
@_button-neutral-border-color: @base-dark;
|
||
|
|
||
|
@_button-neutral-hover-color: @brand-darker;
|
||
|
@_button-neutral-hover-bg: @brand-verylight;
|
||
|
@_button-neutral-hover-border-color: @brand-dark;
|
||
|
@_button-neutral-hover-color: @base-darker;
|
||
|
@_button-neutral-hover-bg: @base-verylight;
|
||
|
@_button-neutral-hover-border-color: @base-dark;
|
||
|
|
||
|
@_button-neutral-active-color: @brand-superdark;
|
||
|
@_button-neutral-active-bg: @brand-standard;
|
||
|
@_button-neutral-active-border-color: @brand-verydark;
|
||
|
@_button-neutral-active-color: @base-superdark;
|
||
|
@_button-neutral-active-bg: @base-standard;
|
||
|
@_button-neutral-active-border-color: @base-verydark;
|
||
|
|
||
|
|
||
|
// -------------------
|
||
| ... | ... | |
|
@_button-info-bg: @color-blue-light;
|
||
|
@_button-info-border-color: darken(@color-blue-strong, 5%) ;
|
||
|
|
||
|
@_button-link-disabled-color: @brand-light ;
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
@_button-link-disabled-color: @base-light ;
|
||
| css/style.css | ||
|---|---|---|
|
border-radius: 6px;
|
||
|
}
|
||
|
.mx-button-standard {
|
||
|
border: 1px #1b1b0e solid;
|
||
|
background-color: #292914;
|
||
|
color: #f5f5f1;
|
||
|
border: 1px #406449 solid;
|
||
|
background-color: #406449;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
.mx-button-standard-hover-focus:hover {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #1b1b0e;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
.mx-button-standard-hover-focus:active,
|
||
|
.mx-button-standard-hover-focus:focus {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #000000;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
.mx-button-neutral {
|
||
| ... | ... | |
|
input[type="button"].button,
|
||
|
button[type="submit"],
|
||
|
button[type="button"] {
|
||
|
color: #f5f5f1;
|
||
|
background-color: #292914;
|
||
|
border: 1px #1b1b0e solid;
|
||
|
color: #fff;
|
||
|
background-color: #406449;
|
||
|
border: 1px #406449 solid;
|
||
|
}
|
||
|
input[type="submit"]:hover,
|
||
|
input[type="button"]:hover,
|
||
|
input[type="button"].button:hover,
|
||
|
button[type="submit"]:hover,
|
||
|
button[type="button"]:hover {
|
||
|
color: #e0e0d6;
|
||
|
background-color: #1b1b0e;
|
||
|
border: 1px #000000 solid;
|
||
|
color: #fff;
|
||
|
background-color: #548360;
|
||
|
border: 1px #548360 solid;
|
||
|
}
|
||
|
input[type="submit"]:active,
|
||
|
input[type="button"]:active,
|
||
| ... | ... | |
|
input[type="button"].button:focus,
|
||
|
button[type="submit"]:focus,
|
||
|
button[type="button"]:focus {
|
||
|
color: #e0e0d6;
|
||
|
background-color: #000000;
|
||
|
border: 1px #000000 solid;
|
||
|
color: #fff;
|
||
|
background-color: #548360;
|
||
|
border: 1px #548360 solid;
|
||
|
}
|
||
|
input[type="button"].neutral,
|
||
|
input[type="submit"].neutral,
|
||
| ... | ... | |
|
border-style: solid;
|
||
|
border-width: 1px;
|
||
|
border-radius: 6px;
|
||
|
border: 1px #1b1b0e solid;
|
||
|
background-color: #292914;
|
||
|
color: #f5f5f1;
|
||
|
border: 1px #406449 solid;
|
||
|
background-color: #406449;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a.button.below {
|
||
|
clear: both !important;
|
||
|
}
|
||
|
a.button:hover {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #1b1b0e;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a.button:active,
|
||
|
a.button:focus {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #000000;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a.button.neutral:link,
|
||
| ... | ... | |
|
border-style: solid;
|
||
|
border-width: 1px;
|
||
|
border-radius: 6px;
|
||
|
border: 1px #1b1b0e solid;
|
||
|
background-color: #292914;
|
||
|
color: #f5f5f1;
|
||
|
border: 1px #406449 solid;
|
||
|
background-color: #406449;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
#content label.button:hover {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #1b1b0e;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
#content label.button:active,
|
||
|
#content label.button:focus {
|
||
|
border: 1px #000000 solid;
|
||
|
background-color: #000000;
|
||
|
color: #e0e0d6;
|
||
|
border: 1px #548360 solid;
|
||
|
background-color: #548360;
|
||
|
color: #fff;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
#content label.button.neutral {
|
||
| ... | ... | |
|
z-index: 1020;
|
||
|
top: 60px;
|
||
|
width: 100%;
|
||
|
color: #e0e0d6;
|
||
|
background-color: #292914;
|
||
|
color: #fff;
|
||
|
background-color: #406449;
|
||
|
padding: 0.7em 0.5em 0.7em 1.3em;
|
||
|
border-top: 1px #666633 solid;
|
||
|
}
|
||
| ... | ... | |
|
margin: 1.6em 0 0.4em 0;
|
||
|
}
|
||
|
body > h1 {
|
||
|
color: #e0e0d6;
|
||
|
background-color: #292914;
|
||
|
color: #fff;
|
||
|
background-color: #406449;
|
||
|
padding: 0.7em 0.5em 0.7em 1.3em;
|
||
|
}
|
||
|
h2 {
|
||
| ... | ... | |
|
.ui-dialog .ui-dialog-titlebar {
|
||
|
padding: 0.4em 1em;
|
||
|
border: none;
|
||
|
background-color: #292914 !important;
|
||
|
color: #e0e0d6 !important;
|
||
|
background-color: #406449 !important;
|
||
|
color: #fff !important;
|
||
|
font-weight: normal;
|
||
|
position: relative;
|
||
|
text-align: left;
|
||
| ... | ... | |
|
// Days
|
||
|
td a {
|
||
|
&.ui-state-default {
|
||
|
color: @brand-dark;
|
||
|
color: @base-dark;
|
||
|
}
|
||
|
&.ui-state-hover {
|
||
|
color: #ffffff ;
|
||
| ... | ... | |
|
border: #000000 ;
|
||
|
}
|
||
|
&.ui-state-active {
|
||
|
border: 1px solid @brand-dark;
|
||
|
background-color: @brand-dark;
|
||
|
color: @brand-verylight;
|
||
|
border: 1px solid @base-dark;
|
||
|
background-color: @base-dark;
|
||
|
color: @base-verylight;
|
||
|
}
|
||
|
|
||
|
}
|
||
| ... | ... | |
|
/* DEVELOPING (developing.less) */
|
||
|
/* ------------------------------------------------------------- */
|
||
|
body.developing > header {
|
||
|
background-color: #292914;
|
||
|
background-color: #406449;
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
}
|
||
|
body.developing > header h1 {
|
||
|
float: left;
|
||
|
color: #e0e0d6;
|
||
|
color: #fff;
|
||
|
padding: 1em;
|
||
|
}
|
||
|
body.developing > header nav {
|
||
| ... | ... | |
|
body.developing button[type="submit"],
|
||
|
body.developing button[type="button"],
|
||
|
body.developing a.button {
|
||
|
color: #f5f5f1;
|
||
|
background-color: #292914;
|
||
|
border: 1px #1b1b0e solid;
|
||
|
color: #fff;
|
||
|
background-color: #406449;
|
||
|
border: 1px #406449 solid;
|
||
|
}
|
||
|
body.developing input[type="submit"].hover,
|
||
|
body.developing input[type="button"].hover,
|
||
| ... | ... | |
|
body.developing button[type="submit"].hover,
|
||
Auch abrufbar als: Unified diff
Neues Design Anpassung: #386 Farben Überschriften und Buttons angepasst
Da bei einer Änderung der Brand Farbe oftmals ein unbrauchbarer
Hintergrund-Ton entstand, habe ich diese nun entkoppelt. Dazu:
- brand durchgehend in base umbenannt
- neuen Abschnitt brand eingefügt (css/less/variables_color_style.less)
- diesen für H1 Header und Buttons verwendet
- less/css neu kompiliert