kivitendo-CSS: Inputs konsistent durch Browser gestylt

Damit wird verhindert, dass teilweise das Plattform-UI-Toolkit für das
Styling verantwortlich ist. Das sieht nicht nur inkonsistent aus,
sondern stört richtiggehend, wenn oft zwischen nativ gestylt und vom
Browser via CSS gestylt gewechselt wird (z.B. wenn ein Element Focus
erlangt/verliert).

diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css
index c11529af706e2457153f5f34e9e6f5bf1ce3ed78..32209d313966d9948cc3d44198b14426d898b775 100644 (file)
--- a/css/kivitendo/main.css
+++ b/css/kivitendo/main.css
@@ -16,6 +16,60 @@ body {
     font-size: 9pt;
 }
 
     font-size: 9pt;
 }
 

+/* Input elements */
+input,
+textarea,
+select {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -khtml-border-radius: 0;
+  background-color: white;
+  border: 1px;
+  border-color: darkgray lightgray lightgray;
+  border-radius: 0;
+  border-style: solid;
+  outline: none;
+  padding: 1px;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -o-appearance: none;
+  appearance : none;
+  background: white url('../../image/select-down.png') no-repeat scroll right center;
+  padding: 0 14px 0 0;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  background-color: #ffffa0;
+  border: 1px solid #fe5f14;
+}
+
+input[type="button"],
+input[type="submit"],
+button {
+  background-color: whitesmoke;
+  border: 1px;
+  border-color: darkgray;
+  border-style: solid;
+  padding: 0px 4px;
+}
+
+input[type="button"]:focus,
+input[type="submit"]:focus,
+button:focus {
+  background-color: #ffffa0;
+  border-color: #fe5f14;
+}
+
+button:hover:enabled,
+input[type="button"]:hover:enabled,
+input[type="submit"]:hover:enabled {
+  color: #fe5f14;
+}

 
 /* The look of links */
 a {
 
 /* The look of links */
 a {


@@ -78,23 +132,6 @@ tr.rule-before th, tr.rule-before td {
   border-top: 2px solid #EBEBEB;
 }
 
   border-top: 2px solid #EBEBEB;
 }
 

-/* I.E. & Chrome können das nicht! */
-/* input[type="radio"], input[type="checkbox"]{
-       width:1.15em;
-       height:1.15em;
-       border:1px solid;
-       color: #006400;
-} */
-input:focus, textarea:focus, select:focus {
-       background-color: #FFFFA0;
-       border: 2px solid #FE5F14;
-       /* border-bottom: medium solid #FE5F14; */
-}
-/* Fängt den "Schrink" beim focus - problem für i.e. und chrome */
-/* input[type="radio"]:focus, input[type="checkbox"]:focus{
-       width:1.2em;
-       height:1.2em;
-} */

 td {
        color: #000000;
        font-weight: normal;
 td {
        color: #000000;
        font-weight: normal;


@@ -425,9 +462,7 @@ div.chart_picker_chart {
 }
 div.part_picker_part:hover,
 div.chart_picker_chart:hover {
 }
 div.part_picker_part:hover,
 div.chart_picker_chart:hover {

-  background-color: #CCCCCC;

   color: #FE5F14;
   color: #FE5F14;

-  border-color: gray;

 }
 
 div.ppp_block {
 }
 
 div.ppp_block {


@@ -454,11 +489,6 @@ span.part_picker input {
 span.part_picker {
   white-space: nowrap;
 }
 span.part_picker {
   white-space: nowrap;
 }

-/* div.cpc_block { */
-/*   overflow:hidden; */
-/*   float:left; */
-/*   width: 350px; */
-/* } */

 div.ppp_block span.ppp_block_number,
 div.cpc_block span.cpc_block_number
 {
 div.ppp_block span.ppp_block_number,
 div.cpc_block span.cpc_block_number
 {

diff --git a/image/select-down.png b/image/select-down.png
index 33454f3a637467a8a60b453a46f59a57041e2aab..cea13be5a425c1ae82c60e9117620f4db21f2437 100644 (file)
Binary files a/image/select-down.png and b/image/select-down.png differ