up

public/Cesium/Widgets/NavigationHelpButton/NavigationHelpButton.css

@@ -0,0 +1,112 @@
+.cesium-navigationHelpButton-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.cesium-navigation-help {
+    visibility: hidden;
+    position: absolute;
+    top: 38px;
+    right: 2px;
+    width: 250px;
+    border-radius: 10px;
+    transform: scale(0.01);
+    transform-origin: 234px -10px;
+    transition: visibility 0s 0.25s, transform 0.25s ease-in;
+}
+
+.cesium-navigation-help-visible {
+    visibility: visible;
+    transform: scale(1);
+    transition: transform 0.25s ease-out;
+}
+
+.cesium-navigation-help-instructions {
+    border: 1px solid #444;
+    background-color: rgba(38, 38, 38, 0.75);
+    padding-bottom: 5px;
+    border-radius: 0 0 10px 10px;
+}
+
+.cesium-click-navigation-help {
+    display: none;
+}
+
+.cesium-touch-navigation-help {
+    display: none;
+    padding-top: 5px;
+}
+
+.cesium-click-navigation-help-visible {
+    display: block;
+}
+
+.cesium-touch-navigation-help-visible {
+    display: block;
+}
+
+.cesium-navigation-help-pan {
+    color: #66ccff;
+    font-weight: bold;
+}
+
+.cesium-navigation-help-zoom {
+    color: #65fd00;
+    font-weight: bold;
+}
+
+.cesium-navigation-help-rotate {
+    color: #ffd800;
+    font-weight: bold;
+}
+
+.cesium-navigation-help-tilt {
+    color: #d800d8;
+    font-weight: bold;
+}
+
+.cesium-navigation-help-details {
+    color: #ffffff;
+}
+
+.cesium-navigation-button {
+    color: #fff;
+    background-color: transparent;
+    border-bottom: none;
+    border-top: 1px solid #444;
+    border-right: 1px solid #444;
+    margin: 0;
+    width: 50%;
+    cursor: pointer;
+}
+
+.cesium-navigation-button-icon {
+    vertical-align: middle;
+    padding: 5px 1px;
+}
+
+.cesium-navigation-button:focus {
+    outline: none;
+}
+
+.cesium-navigation-button-left {
+    border-radius: 10px 0 0 0;
+    border-left: 1px solid #444;
+}
+
+.cesium-navigation-button-right {
+    border-radius: 0 10px 0 0;
+    border-left: none;
+}
+
+.cesium-navigation-button-selected {
+    background-color: rgba(38, 38, 38, 0.75);
+}
+
+.cesium-navigation-button-unselected {
+    background-color: rgba(0, 0, 0, 0.75);
+}
+
+.cesium-navigation-button-unselected:hover {
+    background-color: rgba(76, 76, 76, 0.75);
+}

public/Cesium/Widgets/NavigationHelpButton/lighter.css

@@ -0,0 +1,46 @@
+.cesium-lighter .cesium-navigation-help-instructions {
+    border: 1px solid #759dc0;
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.cesium-lighter .cesium-navigation-help-pan {
+    color: #66ccee;
+    font-weight: bold;
+}
+
+.cesium-lighter .cesium-navigation-help-zoom {
+    color: #65ec00;
+    font-weight: bold;
+}
+
+.cesium-lighter .cesium-navigation-help-rotate {
+    color: #eec722;
+    font-weight: bold;
+}
+
+.cesium-lighter .cesium-navigation-help-tilt {
+    color: #d800d8;
+    font-weight: bold;
+}
+
+.cesium-lighter .cesium-navigation-help-details {
+    color: #222222;
+}
+
+.cesium-lighter .cesium-navigation-button {
+    color: #222222;
+    border-top: 1px solid #759dc0;
+    border-right: 1px solid #759dc0;
+}
+
+.cesium-lighter .cesium-navigation-button-selected {
+    background-color: rgba(196, 225, 255, 0.9);
+}
+
+.cesium-lighter .cesium-navigation-button-unselected {
+    background-color: rgba(226, 240, 255, 0.9);
+}
+
+.cesium-lighter .cesium-navigation-button-unselected:hover {
+    background-color: rgba(166, 210, 255, 0.9);
+}