Das Farb-Thema werden jetzt mit Hilfe von LESS-Variablen umgesetzt

diff --git a/src/main/webapp/less/base/footer.less b/src/main/webapp/less/base/footer.less
index c4dc7c7..addab87 100644 (file)
--- a/src/main/webapp/less/base/footer.less
+++ b/src/main/webapp/less/base/footer.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+

 #footer
 {
   margin: 2em 0;
 #footer
 {
   margin: 2em 0;


@@ -7,7 +9,7 @@
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   position: relative;
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   position: relative;

-  border-top: 1.25em solid #0ACF00; /** 20px */
+  border-top: 1.25em solid @normal; /** 20px */

   margin: 0;
   padding: 0;
   list-style-type: none;
   margin: 0;
   padding: 0;
   list-style-type: none;


@@ -18,7 +20,7 @@
   line-height: .6666666667em; /* 20px */
   display: inline-block;
   margin: .5em 1em 0 0;
   line-height: .6666666667em; /* 20px */
   display: inline-block;
   margin: .5em 1em 0 0;

-  color: #0ACF00;
+  color: @normal;

   vertical-align: top;
 }
 #footerlinks > li#copyright
   vertical-align: top;
 }
 #footerlinks > li#copyright


@@ -27,18 +29,18 @@
   right: .625em;
   top: -1em; /** 30px */
   line-height: 1.4em; /* 42px */
   right: .625em;
   top: -1em; /** 30px */
   line-height: 1.4em; /* 42px */

-  color: #fff;
+  color: @hintergrund;

   margin: 0;
   font-size: 187.5%; /** 30px */
 }
 #footerlinks a.f
 {
   margin: 0;
   font-size: 187.5%; /** 30px */
 }
 #footerlinks a.f
 {

-  color: #0ACF00;
-  border-color: #0ACF00;
+  color: @normal;
+  border-color: @normal;

 }
 #footerlinks a.f:hover
 {
 }
 #footerlinks a.f:hover
 {

-  color: #078600;
-  border-color: #078600;
+  color: @dunkler;
+  border-color: @dunkler;

   border-style: solid;
 }
   border-style: solid;
 }

diff --git a/src/main/webapp/less/base/head.less b/src/main/webapp/less/base/head.less
index 4ca9abe..6befe52 100644 (file)
--- a/src/main/webapp/less/base/head.less
+++ b/src/main/webapp/less/base/head.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+

 #header
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
 #header
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;


@@ -14,21 +16,21 @@
   font-size: 812.5%; /* 130px */
   line-height: 1em;
   padding: 0 0 0 .230769231em; /* 30px */
   font-size: 812.5%; /* 130px */
   line-height: 1em;
   padding: 0 0 0 .230769231em; /* 30px */

-  color: #0ACF00;
-  text-shadow: .092307692em .046153846em 0 #fff; /** 12px 6px */
+  color: @normal;
+  text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */

   border: none;
   position: relative;
   z-index: 1;
 }
 #logo:hover
 {
   border: none;
   position: relative;
   z-index: 1;
 }
 #logo:hover
 {

-  color: #078600;
+  color: @dunkler;

 }
 #slogan
 {
   display: block;
 }
 #slogan
 {
   display: block;

-  color: #fff;
-  background-color: #0ACF00;
+  color: @hintergrund;
+  background-color: @normal;

   font-size: 187.5%; /** 30px */
   line-height: .6666666667em; /* 20px */
   height: .6em; /* 18px */
   font-size: 187.5%; /** 30px */
   line-height: .6666666667em; /* 20px */
   height: .6em; /* 18px */

diff --git a/src/main/webapp/less/base/layout.less b/src/main/webapp/less/base/layout.less
index f6d4984..efeddf9 100644 (file)
--- a/src/main/webapp/less/base/layout.less
+++ b/src/main/webapp/less/base/layout.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+

 .content
 {
   position: relative;
 .content
 {
   position: relative;


@@ -23,7 +25,7 @@
   padding: 0 2em 1.0625em 2em;
   position: relative;
   width: 20.375em;
   padding: 0 2em 1.0625em 2em;
   position: relative;
   width: 20.375em;

-  background-color: #6EE768;
+  background-color: @heller;

 }
 .content #nav
 {
 }
 .content #nav
 {

diff --git a/src/main/webapp/less/base/marginal.less b/src/main/webapp/less/base/marginal.less
index 008c694..b4f7bca 100644 (file)
--- a/src/main/webapp/less/base/marginal.less
+++ b/src/main/webapp/less/base/marginal.less
@@ -1,9 +1,11 @@
+@import '../variables.less';
+

 .marginal h1,
 .marginal h2,
 .marginal h3,
 .marginal h4
 {
 .marginal h1,
 .marginal h2,
 .marginal h3,
 .marginal h4
 {

-  color: #fff;
+  color: @hintergrund;

 }
 .marginal h1
 {
 }
 .marginal h1
 {

diff --git a/src/main/webapp/less/base/navigation.less b/src/main/webapp/less/base/navigation.less
index 9b1daa3..10e1572 100644 (file)
--- a/src/main/webapp/less/base/navigation.less
+++ b/src/main/webapp/less/base/navigation.less
@@ -1,3 +1,5 @@
+@import '../variables.less';
+

 #menu
 {
   position: relative;
 #menu
 {
   position: relative;


@@ -19,15 +21,15 @@
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   font-size: 250%; /** 40px */
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   font-size: 250%; /** 40px */

-  color: #0ACF00;
+  color: @normal;

 }
 #menu > li.m > a.m
 {
 }
 #menu > li.m > a.m
 {

-  border-color: #0ACF00;
+  border-color: @normal;

 }
 #menu > li.m > a.m:hover
 {
 }
 #menu > li.m > a.m:hover
 {

-  border-color: #078600;
+  border-color: @dunkler;

 }
 #menu > li.m > a.m:hover,
 #menu > li.m > strong.m
 }
 #menu > li.m > a.m:hover,
 #menu > li.m > strong.m


@@ -36,7 +38,7 @@
 }
 #menu > li.m > a.m:hover
 {
 }
 #menu > li.m > a.m:hover
 {

-  color: #078600;
+  color: @dunkler;

 }
 #menu > li.m > a.m:hover:before,
 #menu > li.m > a.m.selected:before,
 }
 #menu > li.m > a.m:hover:before,
 #menu > li.m > a.m.selected:before,


@@ -54,7 +56,7 @@
   z-index: 3;
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;
   z-index: 3;
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   font-weight: bold;

-  color: #0ACF00;
+  color: @normal;

 }
 #breadcrumb > strong.b
 {
 }
 #breadcrumb > strong.b
 {


@@ -85,17 +87,17 @@
 }
 #breadcrumb > ol.b > li.b > strong.b
 {
 }
 #breadcrumb > ol.b > li.b > strong.b
 {

-  border-bottom: 1px solid #0ACF00;
+  border-bottom: 1px solid @normal;

 }
 #breadcrumb > ol.b > li.b > a.b
 {
 }
 #breadcrumb > ol.b > li.b > a.b
 {

-  color: #0ACF00;
+  color: @normal;

 }
 #breadcrumb > ol.b > li.b > a.b:hover,
 #breadcrumb > ol.b > li.b > a.b:focus,
 #breadcrumb > ol.b > li.b > a.b:active
 {
 }
 #breadcrumb > ol.b > li.b > a.b:hover,
 #breadcrumb > ol.b > li.b > a.b:focus,
 #breadcrumb > ol.b > li.b > a.b:active
 {

-  color: #078600;
+  color: @dunkler;

 }
 
 #nav > h1.nav,
 }
 
 #nav > h1.nav,


@@ -121,9 +123,9 @@
 }
 #nav > h2.nav.submenu > a.s
 {
 }
 #nav > h2.nav.submenu > a.s
 {

-  color: #fff;
+  color: @hintergrund;

   border-style: dashed;
   border-style: dashed;

-  border-color: #fff;
+  border-color: @hintergrund;

 }
 #nav > h2.nav.submenu > a.s:hover,
 #nav > h2.nav.submenu > a.s:focus,
 }
 #nav > h2.nav.submenu > a.s:hover,
 #nav > h2.nav.submenu > a.s:focus,


@@ -159,12 +161,12 @@
 #submenu li.s > a.selected,
 #submenu li.s > strong.s
 {
 #submenu li.s > a.selected,
 #submenu li.s > strong.s
 {

-  color: #fff;
-  border-color: #fff;
+  color: @hintergrund;
+  border-color: @hintergrund;

 }
 #submenu li.s > strong.s
 {
 }
 #submenu li.s > strong.s
 {

-  border-bottom: 1px solid #fff;
+  border-bottom: 1px solid @hintergrund;

 }
 #submenu li.s > a.s.selected:before,
 #submenu li.s > a.s:hover:before,
 }
 #submenu li.s > a.s.selected:before,
 #submenu li.s > a.s:hover:before,

diff --git a/src/main/webapp/less/base/typo.less b/src/main/webapp/less/base/typo.less
index 1403333..edd8b46 100644 (file)
--- a/src/main/webapp/less/base/typo.less
+++ b/src/main/webapp/less/base/typo.less
@@ -1,12 +1,6 @@
 /** Typografische Grundeinstellungen ******************************************/
 
 /** Typografische Grundeinstellungen ******************************************/
 

-/** Farben:
-  * 1: 0ACF00 Normal
-  * 2: 2D9B27 
-  * 3: 078600 Dunkler
-  * 4: 42E73A Heller
-  * 5: 6EE768
-  */
+@import '../variables.less';

 
 body
 {
 
 body
 {


@@ -14,14 +8,14 @@ body
   letter-spacing: 0;
   line-height: 1.5em;
   padding: 1em 3em 1em 5em;
   letter-spacing: 0;
   line-height: 1.5em;
   padding: 1em 3em 1em 5em;

-  background-color: #fff;
+  background-color: @hintergrund;

 }
 h1, h2, h3, h4, h5, h6
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   letter-spacing: 0;
   font-weight: bold;
 }
 h1, h2, h3, h4, h5, h6
 {
   font-family: 'BPreplay', Helvetica, Arial, sans-serif;
   letter-spacing: 0;
   font-weight: bold;

-  color: #0ACF00;
+  color: @normal;

   margin: 1em 0 .5em 0; /** 16px 0 8px 0 */
 }
 h1
   margin: 1em 0 .5em 0; /** 16px 0 8px 0 */
 }
 h1


@@ -48,7 +42,7 @@ h4
 }
 h1 a, h2 a, h3 a, h4 a
 {
 }
 h1 a, h2 a, h3 a, h4 a
 {

-  color: #0ACF00;
+  color: @normal;

   border-style: none;
 }
 h1 a:hover,
   border-style: none;
 }
 h1 a:hover,


@@ -56,8 +50,8 @@ h2 a:hover,
 h3 a:hover,
 h4 a:hover
 {
 h3 a:hover,
 h4 a:hover
 {

-  color: #078600;
-  border-bottom: 1px solid #078600;
+  color: @dunkler;
+  border-bottom: 1px solid @dunkler;

 }
 h1 a:focus,
 h2 a:focus,
 }
 h1 a:focus,
 h2 a:focus,


@@ -68,8 +62,8 @@ h2 a:active,
 h3 a:active,
 h4 a:active
 {
 h3 a:active,
 h4 a:active
 {

-  color: #2D9B27;
-  border-bottom: 1px solid #2D9B27;
+  color: @dunkel;
+  border-bottom: 1px solid @dunkel;

 }
 p
 {
 }
 p
 {


@@ -111,22 +105,22 @@ hr
 }
 a
 {
 }
 a
 {

-  color: #078600;
-  border-bottom: 1px dashed #078600;
+  color: @dunkler;
+  border-bottom: 1px dashed @dunkler;

 }
 a:hover
 {
 }
 a:hover
 {

-  color: #077600;
-  border-bottom: 1px solid #077600;
+  color: @nochdunkler;
+  border-bottom: 1px solid @nochdunkler;

 }
 a:focus,
 a:active
 {
 }
 a:focus,
 a:active
 {

-  color: #078600;
-  border-bottom: 1px solid #078600;
+  color: @dunkler;
+  border-bottom: 1px solid @dunkler;

 }
 a:visited
 {
 }
 a:visited
 {

-  border-bottom: 1px dotted #077600;
+  border-bottom: 1px dotted @nochdunkler;

 }
 
 }
 

diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less
new file mode 100644 (file)
index 0000000..ba55128
--- /dev/null
+++ b/src/main/webapp/less/variables.less
@@ -0,0 +1,9 @@
+/** Farben */
+
+@normal:      #0ACF00;
+@dunkel:      #2D9B27;
+@dunkler:     #078600;
+@nochdunkler: #077600;
+@hell:        #42E73A;
+@heller:      #6EE768;
+@hintergrund: #FFFFFF;