diff --git a/app/images/connect.svg b/app/images/connect.svg index 56cde414..521c3c28 100644 --- a/app/images/connect.svg +++ b/app/images/connect.svg @@ -79,9 +79,9 @@ inkscape:connector-curvature="0" id="rect5096" d="m 11,1040.3622 -5,0 c -1.108,0 -2,-0.892 -2,-2 l 0,-4 c 0,-1.108 0.892,-2 2,-2 l 5,0" - style="opacity:1;fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="opacity:1;fill:none;fill-opacity:1;stroke:#223;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /> + style="fill:none;fill-rule:evenodd;stroke:#223;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> diff --git a/app/images/handle.svg b/app/images/handle.svg index 4a7a126f..323115f4 100644 --- a/app/images/handle.svg +++ b/app/images/handle.svg @@ -1,82 +1,4 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - + + + diff --git a/app/images/icons/novnc-icon-sm.svg b/app/images/icons/novnc-icon-sm.svg index aa1c6f18..104748b3 100644 --- a/app/images/icons/novnc-icon-sm.svg +++ b/app/images/icons/novnc-icon-sm.svg @@ -1,163 +1 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/app/images/icons/novnc-icon.svg b/app/images/icons/novnc-icon.svg index 1efff912..104748b3 100644 --- a/app/images/icons/novnc-icon.svg +++ b/app/images/icons/novnc-icon.svg @@ -1,163 +1 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/app/images/icons/novnc-ios-120.png b/app/images/icons/novnc-ios-120.png index 8da7bab3..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-120.png and b/app/images/icons/novnc-ios-120.png differ diff --git a/app/images/icons/novnc-ios-152.png b/app/images/icons/novnc-ios-152.png index 60b2bcef..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-152.png and b/app/images/icons/novnc-ios-152.png differ diff --git a/app/images/icons/novnc-ios-167.png b/app/images/icons/novnc-ios-167.png index 98fade2e..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-167.png and b/app/images/icons/novnc-ios-167.png differ diff --git a/app/images/icons/novnc-ios-180.png b/app/images/icons/novnc-ios-180.png index 5d24df70..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-180.png and b/app/images/icons/novnc-ios-180.png differ diff --git a/app/images/icons/novnc-ios-40.png b/app/images/icons/novnc-ios-40.png index cf14894d..1886ac8e 100644 Binary files a/app/images/icons/novnc-ios-40.png and b/app/images/icons/novnc-ios-40.png differ diff --git a/app/images/icons/novnc-ios-58.png b/app/images/icons/novnc-ios-58.png index f6dfbebd..1886ac8e 100644 Binary files a/app/images/icons/novnc-ios-58.png and b/app/images/icons/novnc-ios-58.png differ diff --git a/app/images/icons/novnc-ios-60.png b/app/images/icons/novnc-ios-60.png index 8cda2953..1886ac8e 100644 Binary files a/app/images/icons/novnc-ios-60.png and b/app/images/icons/novnc-ios-60.png differ diff --git a/app/images/icons/novnc-ios-80.png b/app/images/icons/novnc-ios-80.png index 6c417c47..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-80.png and b/app/images/icons/novnc-ios-80.png differ diff --git a/app/images/icons/novnc-ios-87.png b/app/images/icons/novnc-ios-87.png index 4377d874..91c6d69b 100644 Binary files a/app/images/icons/novnc-ios-87.png and b/app/images/icons/novnc-ios-87.png differ diff --git a/app/images/icons/novnc-ios-icon.svg b/app/images/icons/novnc-ios-icon.svg index 009452ac..104748b3 100644 --- a/app/images/icons/novnc-ios-icon.svg +++ b/app/images/icons/novnc-ios-icon.svg @@ -1,183 +1 @@ - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/app/images/icons/novnc.ico b/app/images/icons/novnc.ico index c3bc58e3..a11ae2b4 100644 Binary files a/app/images/icons/novnc.ico and b/app/images/icons/novnc.ico differ diff --git a/app/images/logo.png b/app/images/logo.png new file mode 100644 index 00000000..d022f137 Binary files /dev/null and b/app/images/logo.png differ diff --git a/app/styles/base.css b/app/styles/base.css index f83ad4b9..c9cdda7f 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -37,7 +37,7 @@ body { margin:0; padding:0; /*Background image with light grey curve.*/ - background-color:#494949; + background-color:#1D1D2E; background-repeat:no-repeat; background-position:right bottom; height:100%; @@ -241,16 +241,16 @@ html { transition: 0.5s ease-in-out; - background-color: rgb(110, 132, 163); - border-radius: 0 10px 10px 0; - + background-color: #0A0A16; + border-radius: 25px; + user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* Disable iOS image long-press popup */ } #noVNC_control_bar.noVNC_open { - box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); - left: 0; + /* box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); */ + left: 10px; } #noVNC_control_bar::before { /* This extra element is to get a proper shadow */ @@ -261,16 +261,17 @@ html { width: 30px; left: -30px; transition: box-shadow 0.5s ease-in-out; + display: none; } #noVNC_control_bar.noVNC_open::before { box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); } .noVNC_right #noVNC_control_bar { left: 100%; - border-radius: 10px 0 0 10px; + border-radius: 25px; } .noVNC_right #noVNC_control_bar.noVNC_open { - left: 0; + left: -10px; } .noVNC_right #noVNC_control_bar::before { visibility: hidden; @@ -278,29 +279,29 @@ html { #noVNC_control_bar_handle { position: absolute; - left: -15px; - top: 0; + left: 40px; + /* top: 0; */ transform: translateY(35px); - width: calc(100% + 30px); + width: 35px; height: 50px; z-index: -1; cursor: pointer; - border-radius: 5px; - background-color: rgb(83, 99, 122); - background-image: url("../images/handle_bg.svg"); + border-radius: 12px; + background-color: #0A0A16; + /* background-image: url("../images/handle_bg.svg"); */ background-repeat: no-repeat; background-position: right; - box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); + /* box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5); */ } #noVNC_control_bar_handle:after { content: ""; transition: transform 0.5s ease-in-out; background: url("../images/handle.svg"); position: absolute; - top: 22px; /* (50px-6px)/2 */ + top: 18.2px; /* (50px-13.2px)/2 */ right: 5px; - width: 5px; - height: 6px; + width: 11px; + height: 13.2px; } #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after { transform: translateX(1px) rotate(180deg); @@ -389,8 +390,8 @@ html { #noVNC_control_bar .noVNC_button { padding: 4px 4px; vertical-align: middle; - border:1px solid rgba(255, 255, 255, 0.2); - border-radius: 6px; + border: 0px; + border-radius: 20px; background-color: transparent; background-image: unset; /* we don't want the gradiant from input.css */ } @@ -707,7 +708,7 @@ html { #noVNC_connect_dlg { transition: 0.5s ease-in-out; - + width: 35%; transform: scale(0, 0); visibility: hidden; opacity: 0; @@ -721,11 +722,13 @@ html { transition: 0.5s ease-in-out; padding: 10px; margin-bottom: 10px; - font-size: 80px; text-align: center; - border-radius: 5px; + margin: 0 auto; + display: flex; + justify-content: center; + padding-bottom: 70px; } @media (max-width: 440px) { #noVNC_connect_dlg { @@ -737,36 +740,39 @@ html { } #noVNC_connect_dlg div { padding: 12px; - - background-color: rgb(110, 132, 163); + background-color: #C1C1FF; + color: #223; border-radius: 12px; text-align: center; - font-size: 20px; - - box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5); + font-size: 30px; + width: 80%; + margin: auto; + /* box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.2); */ } #noVNC_connect_button { width: 100%; padding: 5px 30px; - + text-transform: uppercase; cursor: pointer; - - border-color: rgb(83, 99, 122); - border-radius: 5px; - - background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147)); - color: white; + background: #C1C1FF; + color: #223; + letter-spacing: 0.06em; + font-weight: 550; + border: 0px; /* This avoids it jumping around when :active */ vertical-align: middle; } #noVNC_connect_button:hover { - background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); + background: #C1C1FF; } #noVNC_connect_button img { vertical-align: bottom; + color: #223; height: 1.3em; + margin-left: -27px !important; + float: left; } /* ---------------------------------------- @@ -851,7 +857,7 @@ html { #noVNC_container { width: 100%; height: 100%; - background-color: #313131; + background-color: #1D1D2E; border-bottom-right-radius: 800px 600px; /*border-top-left-radius: 800px 600px;*/ @@ -889,6 +895,7 @@ html { font-family: 'Orbitron', 'OrbitronTTF', sans-serif; line-height: 0.9; text-shadow: 0.1em 0.1em 0 black; + width: 90%; } .noVNC_logo span{ color:green; diff --git a/app/ui.js b/app/ui.js index 2345b031..071e5b00 100644 --- a/app/ui.js +++ b/app/ui.js @@ -18,7 +18,7 @@ import Keyboard from "../core/input/keyboard.js"; import RFB from "../core/rfb.js"; import * as WebUtil from "./webutil.js"; -const PAGE_TITLE = "noVNC"; +const PAGE_TITLE = "auto-mcs"; const UI = { @@ -582,9 +582,11 @@ const UI = { if (anchor.classList.contains("noVNC_right")) { WebUtil.writeSetting('controlbar_pos', 'left'); anchor.classList.remove("noVNC_right"); + document.getElementById("noVNC_control_bar_handle").style.left = "40px"; } else { WebUtil.writeSetting('controlbar_pos', 'right'); anchor.classList.add("noVNC_right"); + document.getElementById("noVNC_control_bar_handle").style.left = "-20px"; } // Consider this a movement of the handle @@ -618,10 +620,12 @@ const UI = { const anchor = document.getElementById('noVNC_control_bar_anchor'); if (ptr.clientX < (window.innerWidth * 0.1)) { if (anchor.classList.contains("noVNC_right")) { + document.getElementById("noVNC_control_bar_handle").style.left = "40px"; UI.toggleControlbarSide(); } } else if (ptr.clientX > (window.innerWidth * 0.9)) { if (!anchor.classList.contains("noVNC_right")) { + document.getElementById("noVNC_control_bar_handle").style.left = "-20px"; UI.toggleControlbarSide(); } } @@ -1734,7 +1738,7 @@ const UI = { updateDesktopName(e) { UI.desktopName = e.detail.name; // Display the desktop name in the document title - document.title = e.detail.name + " - " + PAGE_TITLE; + document.title = PAGE_TITLE + " (connected)"; }, bell(e) { diff --git a/vnc.html b/vnc.html index 24a118db..4bb239a0 100644 --- a/vnc.html +++ b/vnc.html @@ -13,7 +13,7 @@ or the fragment: http://example.com/#host=HOST&port=PORT&encrypt=1 --> - noVNC + auto-mcs
-
+
@@ -261,7 +261,7 @@
- +