From 77d2f9657f9a1a90aa86d46a753209df6b2f7184 Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Wed, 3 Aug 2016 11:40:51 +0200 Subject: [PATCH] adjust novnc look, to better blend in with web gui 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 --- 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; }