Beta - door visual adjustments

cyruzzo · Oct 18, 2023 · 23a19dc · 23a19dc
1 parent 84ee09a
commit 23a19dc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/Fog.js b/Fog.js
@@ -1388,11 +1388,11 @@ function redraw_light_walls(clear=true){
 
 			let doorType = (type == 1 || type == 3) ? `window` : `door`;
 
-			let locked = (type == 2 || type == 3 || type == 5) ? `locked` : ``;
-			let secret = (type == 4 || type == 5) ? `secret` : ``;
-			open = (/rgba.*0\.5\)/g).test(color) ? `open` : `closed`;
+			let locked = (type == 2 || type == 3 || type == 5) ? ` locked` : ``;
+			let secret = (type == 4 || type == 5) ? ` secret` : ``;
+			open = (/rgba.*0\.5\)/g).test(color) ? ` open` : ` closed`;
 			if(window.DM || secret == ''){
-				let openCloseDoorButton = $(`<div class='door-button ${locked} ${secret} ${open}' data-x1='${x}' data-y1='${y}' data-x2='${width}' data-y2='${height}' style='--mid-x: ${midX}px; --mid-y: ${midY}px;'>
+				let openCloseDoorButton = $(`<div class='door-button${locked}${secret}${open}' data-x1='${x}' data-y1='${y}' data-x2='${width}' data-y2='${height}' style='--mid-x: ${midX}px; --mid-y: ${midY}px;'>
 													<div class='${doorType} background'><div></div></div>
 													<div class='${doorType} foreground'><div></div></div>
 													<div class='door-icon'></div>

diff --git a/abovevtt.css b/abovevtt.css
@@ -314,17 +314,18 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     width: 420px;
 }
 .door-button{
-    width: max(15px, calc(20px / var(--window-zoom)));
-    height: max(15px, calc(20px / var(--window-zoom)));   
-    cursor: pointer; 
-    position:absolute;
-    left: calc(var(--mid-x) - (10px / var(--window-zoom)));
-    top: calc(var(--mid-y) - (10px / var(--window-zoom)));
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: absolute;
+    left: calc(var(--mid-x) - 10px );
+    top: calc(var(--mid-y) - 10px);
     opacity: 0.8;
+    transform: scale(Max(1, calc(1 / var(--window-zoom))));
 }
 
 .door.background{
-    border:2px solid #060606;
+    border: 2px ridge #060606;
     height: 130%;
     width: 100%;
     position: absolute;
@@ -360,9 +361,6 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     background: #000;
 }
 
-.locked .door.foreground>div{
-    display: none;
-}
 
 .door-button.open .door.foreground{
     transform: rotateY(57deg);
@@ -373,7 +371,7 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
 .door-button.locked .door-icon{
     content: "";
     display: block;
-    background: #000;
+    background: #0008;
     width: 50%;
     height: 30%;
     position: absolute;
@@ -389,7 +387,7 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     height: 100%;
     bottom: 100%;
     position: absolute;
-    border: 2px solid #000;
+    border: 2px solid #0008;
     border-top-right-radius: 50%;
     border-top-left-radius: 50%;
     border-bottom: 0;
@@ -398,7 +396,7 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
 .door-button.secret .door-icon:before {
     content: "S";
     font-weight: 600;
-    font-size: max(12px, var(--font-size, calc(20px / var(--window-zoom))));
+    font-size: max(12px, var(--font-size, 20px));
     color: #F008;
     display: block;
     width: 100%;
@@ -425,16 +423,16 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     height: 100%;
     bottom: 100%;
     position: absolute;
-    border: 2px solid #000;
+    border: 2px solid #0008;
     border-top-right-radius: 50%;
     border-top-left-radius: 50%;
     border-bottom: 0;
 }
 .door-button.secret.locked .door-icon:after {
     content: "S";
     font-weight: 600;
-    font-size: max(12px, var(--font-size, calc(20px / var(--window-zoom))));
-    color: #F004;
+    font-size: max(12px, var(--font-size, 20px));
+    color: #F008;
     display: block;
     width: 100%;
     height: 100%;
@@ -444,7 +442,7 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
 .door-button.secret.locked .door-icon{
     content: "";
     display: block;
-    background: #000;
+    background: #0008;
     width: 50%;
     height: 30%;
     position: absolute;
@@ -454,7 +452,7 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     margin: auto;
 }
 .window.background{
-    border:2px solid #060606;
+    border: 2px ridge #060606;
     height: 130%;
     width: 100%;
     position: absolute;
@@ -494,6 +492,29 @@ div.ct-sidebar__pane-content--is-dark-mode .sidebar-panel-content {
     transition: 200ms transform 400ms linear;
     will-change: transform;
 }
+.door-button:not(.locked):hover .window.background>div{
+    transform: translateY(35%);
+    transition: 100ms transform 100ms linear;
+    will-change: transform;
+}
+.door-button.open:hover .window.background>div{
+    transform: translateY(20%);
+    transition: 100ms transform 100ms linear;
+    will-change: transform;
+}
+
+.door-button:not(.locked):hover .door.foreground{
+    transform: rotateY(35deg);
+    transition: 100ms transform 100ms linear;
+    will-change: transform;
+}
+.door-button.open:hover .door.foreground{
+    transform: rotateY(40deg);
+    transition: 100ms transform 100ms linear;
+    will-change: transform;
+}
+
+
 
 /*for resizable and moveable monsters and sheets in DM view*/