diff options
Diffstat (limited to 'js/stage/binding-view.reel/binding-hud.reel')
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.css | 46 | ||||
-rwxr-xr-x | js/stage/binding-view.reel/binding-hud.reel/binding-hud.html | 4 |
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> |