Binding HUD - CSS Update

author: Eric Guzman 2012-06-21 14:21:16 -0700
committer: Eric Guzman 2012-06-21 14:21:16 -0700
commit: da85f402b9a8c4e1142d7e43120e5991285b89d5 (patch)
tree: b924c5b75e96e1c3d31e79febf88c816d318e5bb /js/stage
parent: e2891e2c44ac6c58fe3158e2caddb62eb1067213 (diff)
download: ninja-da85f402b9a8c4e1142d7e43120e5991285b89d5.tar.gz
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 3cc4bb0a..ef1423c4 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 @@
    font-size: 11px;
    box-shadow: inset 0px 0px 0px 0px #CCC;
    border-radius: 6px;
-    padding: 3px 3px 8px;
+    padding: 3px 1px 1px;
    border:1px solid #000;
    text-shadow: 1px 1px 0px #000;
 }
@@ -38,16 +38,18 @@
    position:relative;
    /*border-bottom:1px solid #505050;*/
    line-height:16px;
-    padding:1px 20px 1px 10px;
+    padding:1px 25px 1px 8px;
 }
 .bindingHud .hudOption .connectorBubble:hover {
-    box-shadow: inset 0px 0px 6px #5e9eff;
+    background-color: #1B52A7;
+    box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747;
    cursor: pointer;
 }
 .bindingHud .hudOption.bound .connectorBubble {
    background:  -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
+    box-shadow: none;
 }
 .bindingHud .hudOption:last-child {
@@ -56,28 +58,46 @@
 .bindingHud .hudOption .connectorBubble {
    position: absolute;
-    right: 3px;
+    right: 5px;
    top: 3px;
    border-radius: 50%;
-    width: 12px;
+    width: 10px;
-    height: 12px;
+    height: 10px;
    border-left: 0px;
    display: block;
-    box-shadow: inset 0px 0px 0px 4px rgba(170, 170, 170, 0.34);/*inset 0px 0px 6px #AAA;*/
+    background-color: #313131;
-    /*border-bottom-right-radius: 50%;
+    box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242;
-    border-top-right-radius: 50%;*/
 }
-.scrollArea {
+.splitter.scrollArea {
-    background-color:#666;
+    background-color: transparent;
-    height:12px;
+    background-size: 12%;
-    text-align: center;
+    background-position-y: 2px;
    display: none;
+    height:11px;
+    text-align: center;
+}
+.splitter.scrollAreaTop {
+    border-top: 1px solid #353535;
+    box-shadow: 0 -1px 0 0 #141414;
+}
+.splitter.scrollAreaBottom {
+    -webkit-transform: rotate(180deg);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    border-bottom: 1px solid #353535;
+    box-shadow: 0 1px 0 0 #141414;
+    margin-top: 4px;
 }
 .scrollArea.disabled {
    opacity: 0.5;
 }
+.splitter.scrollArea:hover:not(.disabled) {
+    background-color: #252525;
+}
 .hudRepetition {
    max-height:54px;
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 @@
 <body>
    <section data-montage-id="bindingHud" class="bindingHud">
        <div data-montage-id="title" class="bindingTitle"></div>
-        <div data-montage-id="scrollUp" class="scrollArea scrollAreaTop disabled">Up</div>
+        <div data-montage-id="scrollUp" class=" splitter scrollArea scrollAreaTop"></div>
        <div data-montage-id="hudRepetition" class="hudRepetition">
            <div data-montage-id="hudOption"></div>
        </div>
-        <div data-montage-id="scrollDown" class="scrollArea scrollAreaBottom">Down</div>
+        <div data-montage-id="scrollDown" class="splitter scrollArea scrollAreaBottom"></div>
    </section>
 </body>
author	Eric Guzman	2012-06-21 14:21:16 -0700
committer	Eric Guzman	2012-06-21 14:21:16 -0700
commit	da85f402b9a8c4e1142d7e43120e5991285b89d5 (patch)
tree	b924c5b75e96e1c3d31e79febf88c816d318e5bb /js/stage
parent	e2891e2c44ac6c58fe3158e2caddb62eb1067213 (diff)
download	ninja-da85f402b9a8c4e1142d7e43120e5991285b89d5.tar.gz

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 3cc4bb0a..ef1423c4 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	max-height:54px;	103	max-height:54px;


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>