aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.css46
-rwxr-xr-xjs/stage/binding-view.reel/binding-hud.reel/binding-hud.html4
2 files changed, 35 insertions, 15 deletions
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index 0f31a073..680f9183 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -12,7 +12,7 @@
12 font-size: 11px; 12 font-size: 11px;
13 box-shadow: inset 0px 0px 0px 0px #CCC; 13 box-shadow: inset 0px 0px 0px 0px #CCC;
14 border-radius: 6px; 14 border-radius: 6px;
15 padding: 3px 3px 8px; 15 padding: 3px 1px 1px;
16 border:1px solid #000; 16 border:1px solid #000;
17 text-shadow: 1px 1px 0px #000; 17 text-shadow: 1px 1px 0px #000;
18} 18}
@@ -38,16 +38,18 @@
38 position:relative; 38 position:relative;
39 /*border-bottom:1px solid #505050;*/ 39 /*border-bottom:1px solid #505050;*/
40 line-height:16px; 40 line-height:16px;
41 padding:1px 20px 1px 10px; 41 padding:1px 25px 1px 8px;
42} 42}
43 43
44.bindingHud .hudOption .connectorBubble:hover { 44.bindingHud .hudOption .connectorBubble:hover {
45 box-shadow: inset 0px 0px 6px #5e9eff; 45 background-color: #1B52A7;
46 box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747;
46 cursor: pointer; 47 cursor: pointer;
47} 48}
48 49
49.bindingHud .hudOption.bound .connectorBubble { 50.bindingHud .hudOption.bound .connectorBubble {
50 background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); 51 background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
52 box-shadow: none;
51} 53}
52 54
53.bindingHud .hudOption:last-child { 55.bindingHud .hudOption:last-child {
@@ -56,28 +58,46 @@
56 58
57.bindingHud .hudOption .connectorBubble { 59.bindingHud .hudOption .connectorBubble {
58 position: absolute; 60 position: absolute;
59 right: 3px; 61 right: 5px;
60 top: 3px; 62 top: 3px;
61 border-radius: 50%; 63 border-radius: 50%;
62 width: 12px; 64 width: 10px;
63 height: 12px; 65 height: 10px;
64 border-left: 0px; 66 border-left: 0px;
65 display: block; 67 display: block;
66 box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/ 68 background-color: #313131;
67 /*border-bottom-right-radius: 50%; 69 box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242;
68 border-top-right-radius: 50%;*/ 70
69} 71}
70 72
71.scrollArea { 73.splitter.scrollArea {
72 background-color:#666; 74 background-color: transparent;
73 height:12px; 75 background-size: 12%;
74 text-align: center; 76 background-position-y: 2px;
75 display: none; 77 display: none;
78 height:11px;
79 text-align: center;
80}
81.splitter.scrollAreaTop {
82 border-top: 1px solid #353535;
83 box-shadow: 0 -1px 0 0 #141414;
84}
85.splitter.scrollAreaBottom {
86 -webkit-transform: rotate(180deg);
87 border-top-left-radius: 6px;
88 border-top-right-radius: 6px;
89 border-bottom: 1px solid #353535;
90 box-shadow: 0 1px 0 0 #141414;
91 margin-top: 4px;
76} 92}
77 93
78.scrollArea.disabled { 94.scrollArea.disabled {
79 opacity: 0.5; 95 opacity: 0.5;
80} 96}
97.splitter.scrollArea:hover:not(.disabled) {
98 background-color: #252525;
99}
100
81 101
82.hudRepetition { 102.hudRepetition {
83 overflow: hidden; 103 overflow: hidden;
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index 56234557..7bb888d5 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -67,11 +67,11 @@
67<body> 67<body>
68 <section data-montage-id="bindingHud" class="bindingHud"> 68 <section data-montage-id="bindingHud" class="bindingHud">
69 <div data-montage-id="title" class="bindingTitle"></div> 69 <div data-montage-id="title" class="bindingTitle"></div>
70 <div data-montage-id="scrollUp" class="scrollArea scrollAreaTop disabled">Up</div> 70 <div data-montage-id="scrollUp" class=" splitter scrollArea scrollAreaTop"></div>
71 <div data-montage-id="hudRepetition" class="hudRepetition"> 71 <div data-montage-id="hudRepetition" class="hudRepetition">
72 <div data-montage-id="hudOption"></div> 72 <div data-montage-id="hudOption"></div>
73 </div> 73 </div>
74 <div data-montage-id="scrollDown" class="scrollArea scrollAreaBottom">Down</div> 74 <div data-montage-id="scrollDown" class="splitter scrollArea scrollAreaBottom"></div>
75 </section> 75 </section>
76 76
77</body> 77</body>