[pve-devel] [PATCH novnc v2 2/2] adjust novnc look, to better blend in with web gui

[Dominik Csapak]

this patch makes the bar white (instead of a blue gradient),
yellow in warning state, and red in error state

this also makes the buttons blue like our "Create VM"
Button

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
changes from v1:
    also remove font-weight: "bold"
    remove "old browsers" comment
 debian/patches/fix-base-css.patch | 112 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 108 insertions(+), 4 deletions(-)

diff --git a/debian/patches/fix-base-css.patch b/debian/patches/fix-base-css.patch
index 75f4d5d..16db3a3 100644
--- a/debian/patches/fix-base-css.patch
+++ b/debian/patches/fix-base-css.patch
@@ -48,7 +48,25 @@
    position: relative;
  }
  
-@@ -229,7 +248,7 @@
+@@ -95,8 +114,7 @@
+   padding-top: 4px;
+   height:32px;
+   text-align: center;
+-  font-weight: bold;
+-  color: #fff;
++  color: #000;
+ }
+ 
+ #noVNC_settings_menu {
+@@ -202,7 +220,6 @@
+   width:auto;
+ 
+   text-align:center;
+-  font-weight:bold;
+   word-wrap:break-word;
+   color:#fff;
+   background:rgba(0,0,0,0.65);
+@@ -229,7 +246,7 @@
    position:fixed;
  }
  #noVNC_clipboard.top:after {
@@ -57,7 +75,93 @@
  }
  
  #keyboardinput {
-@@ -389,7 +408,7 @@
+@@ -249,31 +266,13 @@
+  */
+ 
+ .noVNC_status_normal {
+-  background: #b2bdcd; /* Old browsers */
+-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
++  background: #fff;
+ }
+ .noVNC_status_error {
+-  background: #f04040; /* Old browsers */
+-  background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+-  background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+-  background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+-  background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+-  background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
++  background: #ff6666;
+ }
+ .noVNC_status_warn {
+-  background: #f0f040; /* Old browsers */
+-  background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+-  background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+-  background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+-  background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+-  background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
++  background: #ffff80;
+ }
+ 
+ /* Control bar */
+@@ -291,36 +290,25 @@
+ .noVNC_status_button {
+   padding: 4px 4px;
+   vertical-align: middle;
+-  border:1px solid #869dbc;
+-  -webkit-border-radius: 6px;
+-  -moz-border-radius: 6px;
+-  border-radius: 6px;
+-  background: #b2bdcd; /* Old browsers */
+-  background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
+-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
+-  background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
+-  background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
+-  background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
+-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2bdcd', endColorstr='#6e84a3',GradientType=0 ); /* IE6-9 */
+-  background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
+-  /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
++  height:20px;
++  margin: 3px 0;
++  border:1px solid #3892d4;
++  -webkit-border-radius: 3px;
++  -moz-border-radius: 3px;
++  border-radius: 3px;
++  background: #3892d4;
+ }
+ 
+ .noVNC_status_button_selected {
+   padding: 4px 4px;
+   vertical-align: middle;
+-  border:1px solid #4366a9;
+-  -webkit-border-radius: 6px;
+-  -moz-border-radius: 6px;
+-  background: #779ced; /* Old browsers */
+-  background: -moz-linear-gradient(top, #779ced 0%, #3970e0 49%, #2160dd 51%, #2463df 100%); /* FF3.6+ */
+-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#779ced), color-stop(49%,#3970e0), color-stop(51%,#2160dd), color-stop(100%,#2463df)); /* Chrome,Safari4+ */
+-  background: -webkit-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Chrome10+,Safari5.1+ */
+-  background: -o-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* Opera11.10+ */
+-  background: -ms-linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* IE10+ */
+-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#779ced', endColorstr='#2463df',GradientType=0 ); /* IE6-9 */
+-  background: linear-gradient(top, #779ced 0%,#3970e0 49%,#2160dd 51%,#2463df 100%); /* W3C */
+- /*box-shadow:inset 0.4px 0.4px 0.4px #000000;*/
++  height:20px;
++  margin: 3px 0;
++  border:1px solid #3892d4;
++  -webkit-border-radius: 3px;
++  -moz-border-radius: 3px;
++  border-radius: 3px;
++  background: #3892d4;
+ }
+ 
+ .noVNC_status_button:disabled {
+@@ -389,7 +377,7 @@
  }
  
  #noVNC_logo {
@@ -66,7 +170,7 @@
    margin-left: 10px;
    color:yellow;
    text-align:left;
-@@ -446,6 +465,7 @@
+@@ -446,6 +434,7 @@
  #toggleAltButton {  display: inline; }
  #sendTabButton { display: inline; }
  #sendEscButton { display: inline; }
@@ -74,7 +178,7 @@
  
  /* left-align the status text on lower resolutions */
  @media screen and (max-width: 800px){
-@@ -502,6 +522,14 @@
+@@ -502,6 +491,14 @@
      top: 135px;
      left: 0px;
    }
-- 
2.1.4