Draggable windows

1 files changed, 54 insertions, 5 deletions

diff --git a/style.css b/style.css
index f7ec8e2..a710372 100644
--- a/style.css
+++ b/style.css
@@ -259,6 +259,9 @@ input[type=submit]:hover {
 	left: 0;
 	width: 100%;
 	z-index: -100;
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
 
@@ -282,7 +285,6 @@ input[type=submit]:hover {
 	padding: 0;
 	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
 	border-radius: var(--window-border-radius);
-	border: 1px solid #b9b9b9;
     overflow: hidden;
 
     position: absolute;
@@ -290,9 +292,10 @@ input[type=submit]:hover {
 
 .windowgrid {
     display: grid;
-    grid-template-columns: 10px auto 10px;
-    grid-template-rows: 10px auto 10px;
+    grid-template-columns: 4px auto 4px;
+    grid-template-rows: 4px auto 4px;
     height: 100%;
+	background: rgba(250, 250, 250, .9);
 }
 
 .window .wc {
@@ -304,12 +307,54 @@ input[type=submit]:hover {
     grid-column: 2;
 }
 
+.nw-resize, .w-resize, .sw-resize, .se-resize, .ne-resize, .n-resize, .e-resize, .s-resize {
+    background:rgba(220, 220, 220, .9);
+}
+
+.focus .nw-resize, .focus .w-resize, .focus .sw-resize, .focus .se-resize, .focus .ne-resize, .focus .n-resize, .focus .e-resize, .focus .s-resize {
+    background: #555;
+}
+
 .nw-resize {
-    background: red;
     grid-row: 1;
     grid-column: 1;
     cursor: nw-resize;
 }
+.w-resize {
+    grid-row: 2;
+    grid-column: 1;
+    cursor: w-resize;
+}
+.sw-resize {
+    grid-row: 3;
+    grid-column: 1;
+    cursor: sw-resize;
+}
+.s-resize {
+    grid-row: 3;
+    grid-column: 2;
+    cursor: s-resize;
+}
+.se-resize {
+    grid-row: 3;
+    grid-column: 3;
+    cursor: se-resize;
+}
+.e-resize {
+    grid-row: 2;
+    grid-column: 3;
+    cursor: e-resize;
+}
+.ne-resize {
+    grid-row: 1;
+    grid-column: 3;
+    cursor: ne-resize;
+}
+.n-resize {
+    grid-row: 1;
+    grid-column: 2;
+    cursor: n-resize;
+}
 
 .window.focus {
     border-color: black;
@@ -382,7 +427,11 @@ pre {
 }
 
 .window.dragged {
-    /* opacity: 0.9; */
+    opacity: 0.9;
+}
+
+.dragged {
+    z-index: 100000;
 }
 
 .files {