Use fill and stroke colors from bootstrap buttons

Button background for keys, border of hovered buttons for key borders.

grafik/flat/tastatur.css

@@ -0,0 +1,64 @@
+text.mod, text.key, text.dead {
+	fill:#111;
+	fill-opacity:1;
+	stroke:none;
+	font-style:normal;
+	font-variant:normal;
+	font-weight:normal;
+	font-stretch:normal;
+	display:inline;
+	font-family:DejaVu Sans;
+	writing-mode:lr-tb;
+}
+
+text.key {
+	font-family:Linux Libertine O,Linux Libertine;
+}
+
+text.mod {
+	text-align:start;
+	text-anchor:start;
+}
+
+text.deadcircle, text.dead, text.center, text.key {
+	text-align:center;
+	text-anchor:middle;
+}
+
+text.key { font-size:22px; }
+text.dead { font-size:20px; }
+text.deadcircle { font-size:14px; }
+text.mod { font-size:10px; }
+text.big { font-size:14px; }
+
+.key {
+	stroke-width:1.25;
+}
+
+.grey { fill:#949494; stroke:#696969; }
+.grey { fill:#9f9f9f; stroke:#747474; }
+
+/* bootstrap colors */
+.l2, .r2 { fill:#337ab7; }
+.l3, .r3 { fill:#5cb85c; }
+.l4, .r4 { fill:#d9534f; }
+.l5, .r5 { fill:#f0ad4e; }
+
+/* btn bg hover, unused */
+.l2, .r2 { stroke:#3071a9; }
+.l3, .r3 { stroke:#449d44; }
+.l4, .r4 { stroke:#c9302c; }
+.l5, .r5 { stroke:#ec971f; }
+
+/* btn border hover */
+.l2, .r2 { stroke:#204d74; }
+.l3, .r3 { stroke:#398439; }
+.l4, .r4 { stroke:#ac2925; }
+.l5, .r5 { stroke:#d58512; }
+
+text.nubkey { fill:#eee; }
+
+.pressed {
+	opacity:0.5;
+	fill:#555;
+}

grafik/flat/tastatur_base.svg

@@ -62,42 +62,27 @@
       .key {
         stroke-width:4;
       }
-      .grey, .grey2 {
-        fill:#9f9f9f;
-        stroke:#858585;
-      }
-      .grey2 { stroke:#747474; }
+
+      .grey { fill:#949494; stroke:#696969; }
+      .grey { fill:#9f9f9f; stroke:#747474; }
 
       /* bootstrap colors */
-      .l2, .r2 { fill:#428bca; }
+      .l2, .r2 { fill:#337ab7; }
       .l3, .r3 { fill:#5cb85c; }
       .l4, .r4 { fill:#d9534f; }
       .l5, .r5 { fill:#f0ad4e; }
 
-/* contextual text colors (too dark) */
-      .l2, .r2 { stroke:#31708f; }
-      .l3, .r3 { stroke:#3c763d; }
-      .l4, .r4 { stroke:#a94442; }
-      .l5, .r5 { stroke:#8a6d3b; }
-
-/* btn border (too light) */
-      .l2, .r2 { stroke:#357ebd; }
-      .l3, .r3 { stroke:#4cae4c; }
-      .l4, .r4 { stroke:#d43f3a; }
-      .l5, .r5 { stroke:#eea236; }
-
-/* btn bg hover */
-      .l2, .l2 { stroke:#3071a9; }
-      .l3, .l3 { stroke:#449d44; }
-      .l4, .l4 { stroke:#c9302c; }
-      .l5, .l5 { stroke:#ec971f; }
-
-/* btn border hover */
-      .r2, .r2 { stroke:#285e8e; }
-      .r3, .r3 { stroke:#398439; }
-      .r4, .r4 { stroke:#ac2925; }
-      .r5, .r5 { stroke:#d58512; }
+      /* btn bg hover */
+      .l2, .r2 { stroke:#3071a9; }
+      .l3, .r3 { stroke:#449d44; }
+      .l4, .r4 { stroke:#c9302c; }
+      .l5, .r5 { stroke:#ec971f; }
 
+      /* btn border hover */
+      .l2, .r2 { stroke:#204d74; }
+      .l3, .r3 { stroke:#398439; }
+      .l4, .r4 { stroke:#ac2925; }
+      .l5, .r5 { stroke:#d58512; }
     </style>
     <rect id="basekey" width="94" height="94" rx="10" class="key" />
     </defs>
@@ -181,22 +166,22 @@
 <use xlink:href="#basekey" y="315" x="1185" class="r5" />
 
 
-<rect id="backspace" y="0" x="1365" width="189" height="94" rx="10" class="key grey2" />
+<rect id="backspace" y="0" x="1365" width="189" height="94" rx="10" class="key grey" />
 
 <rect id="tab" x="0" y="105" width="144" height="94" rx="10" class="key grey" />
 
 <rect id="m3l" x="0" y="210" width="164" height="94" rx="10" class="key grey" />
-<use id="m3r" xlink:href="#basekey" x="1330" y="210" class="grey2" />
+<use id="m3r" xlink:href="#basekey" x="1330" y="210" class="grey" />
 
 <rect id="shiftl" x="0" y="315" width="117" height="94" rx="10" class="key grey" />
 <rect id="m4l" x="128" y="315" width="102" height="94" rx="10" class="key grey" />
-<rect id="shiftr" x="1290" y="315" width="264" height="94" rx="10" class="key grey2" />
+<rect id="shiftr" x="1290" y="315" width="264" height="94" rx="10" class="key grey" />
 
 <rect id="ctrll" x="0" y="420" width="160" height="94" rx="10" class="key grey" />
 <rect id="altl" x="290" y="420" width="109" height="94" rx="10" class="key grey" />
-<rect id="space" x="410" y="420" width="614" height="94" rx="10" class="key grey2" />
-<rect id="m4r" x="1035" y="420" width="120" height="94" rx="10" class="key grey2" />
-<rect id="ctrlr" x="1425" y="420" width="129" height="94" rx="10" class="key grey2" />
+<rect id="space" x="410" y="420" width="614" height="94" rx="10" class="key grey" />
+<rect id="m4r" x="1035" y="420" width="120" height="94" rx="10" class="key grey" />
+<rect id="ctrlr" x="1425" y="420" width="129" height="94" rx="10" class="key grey" />
 
 <path
      fill-rule="evenodd"
@@ -211,7 +196,7 @@
      z"
      transform="translate(1415,105)"
      id="return"
-     class="key grey2"/>
+     class="key grey"/>
 </g>
 
 <g transform="translate(-0.5,-0.5)">

grafik/flat/tastatur_e2.svg

@@ -62,7 +62,7 @@
         text-anchor:middle;
         font-family:Linux Libertine O,Linux Libertine;
       }
-      text.nubkey { fill:#cccccc; }
+      text.nubkey { fill:#eee; }
 
       .pressed {
         opacity:0.5;

grafik/flat/tastatur_e5.svg

@@ -65,7 +65,7 @@
         text-anchor:middle;
         writing-mode:lr-tb;
       }
-      text.nubkey { fill:#cccccc; }
+      text.nubkey { fill:#eee; }
 
       .grey { fill:#788; }
       .yellow { fill:#f0c40a; }