From 69e5811baed686a7f768c5db25856d04cd15d145 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 13:24:43 +0200 Subject: The X Window System, part 1 of N --- css/style.css | 79 ++++++++++++++++++++++++++++++++++------------------------- 1 file changed, 46 insertions(+), 33 deletions(-) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index fb6a093..3504c84 100644 --- a/css/style.css +++ b/css/style.css @@ -141,7 +141,6 @@ form > .content { justify-content: center; } -.filesystem > h2, form > h2 { color: #4d4d4d; margin: 0; @@ -152,11 +151,31 @@ form > h2 { border-top-right-radius: 0.5rem; } + +.window > h2 button { + border: none; + padding: 0.3rem 1rem; + background: inherit; + border-radius: 0; +} + +.window > h2 button:not(.pathentry):hover { + background: white; +} + +.window > h2 > .separator { + flex: 0 0 1px; + align-self: stretch; + background: #bbb; +} + +.window > h2 > *:first-child { + border-top-left-radius: 0.5rem; +} form p { margin: 1rem 0px 0.3rem 0px; } - .hero_form_error { animation: fadein 0.2s; background-color: #ff4d4d; @@ -241,17 +260,40 @@ input[type=submit]:hover { display: none; } -.filesystem { +.window { background: #fafafa; - margin: 1rem; + margin: 0rem; padding: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); border-radius: 0.5rem; border: 1px solid #b9b9b9; display: block; + position: absolute; + top: 0; + left: 0; + width: 800px; + height: 600px; +} + +.window > h2 { + color: #4d4d4d; + background: #f0f0f0; + margin: 0; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + + cursor: grab; + + display: flex; + align-items: stretch; + font-weight: normal; + padding: 0rem; + border-bottom: 1px solid #bbb; + font-size: 1.3rem; } + .files { padding: 0.3rem; display: grid; @@ -297,35 +339,6 @@ input[type=submit]:hover { filter: brightness(120%); } -.filesystem > h2 { - display: flex; - align-items: stretch; - font-weight: normal; - padding: 0rem; - border-bottom: 1px solid #bbb; - font-size: 1.3rem; -} - -.filesystem > h2 button { - border: none; - padding: 0.3rem 1rem; - background: inherit; - border-radius: 0; -} - -.filesystem > h2 button:not(.pathentry):hover { - background: white; -} - -.filesystem > h2 > .separator { - flex: 0 0 1px; - align-self: stretch; - background: #bbb; -} - -.filesystem > h2 > *:first-child { - border-top-left-radius: 0.5rem; -} .path { display: flex; -- cgit v1.2.3 From 0d02fe02d61bfc4db1418c9bfad2206bbfc2f3c5 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 14:10:34 +0200 Subject: The X Window System, part 2 of N --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index 3504c84..651140d 100644 --- a/css/style.css +++ b/css/style.css @@ -14,6 +14,10 @@ body { display: flex; flex: 1 0 0; align-items: stretch; + + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; } #page > * { -- cgit v1.2.3 From 03e20f71b4b9339dd0459363978e10dea457990c Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 14:23:29 +0200 Subject: The X Window System, part 3 of N --- css/style.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index 651140d..32e017f 100644 --- a/css/style.css +++ b/css/style.css @@ -156,18 +156,20 @@ form > h2 { } -.window > h2 button { +.window h3 button, +.window > h2 button +{ border: none; padding: 0.3rem 1rem; background: inherit; border-radius: 0; } -.window > h2 button:not(.pathentry):hover { +.window h3 button:not(.pathentry):hover { background: white; } -.window > h2 > .separator { +.window h3 > .separator { flex: 0 0 1px; align-self: stretch; background: #bbb; @@ -280,6 +282,7 @@ input[type=submit]:hover { height: 600px; } +.window h3, .window > h2 { color: #4d4d4d; background: #f0f0f0; @@ -294,9 +297,15 @@ input[type=submit]:hover { font-weight: normal; padding: 0rem; border-bottom: 1px solid #bbb; +} + +.window > h2 { font-size: 1.3rem; } +.window h3 { + font-size: 1.2rem; +} .files { padding: 0.3rem; @@ -343,11 +352,9 @@ input[type=submit]:hover { filter: brightness(120%); } - .path { display: flex; align-items: stretch; - font-size: 0.8em; } .path > .separator { -- cgit v1.2.3 From 3bf7662dbdd5c7641e5a2758db88e89e31af7d68 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 14:44:01 +0200 Subject: The X Window System, part 4 of N --- css/style.css | 36 ++++++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index 32e017f..07e2bf3 100644 --- a/css/style.css +++ b/css/style.css @@ -267,7 +267,6 @@ input[type=submit]:hover { } .window { - background: #fafafa; margin: 0rem; padding: 0; box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2); @@ -280,6 +279,15 @@ input[type=submit]:hover { left: 0; width: 800px; height: 600px; + + transition: opacity 0.3s; + display: flex; + flex-direction: column; +} + +.foldercontents, .filecontents { + background: rgba(250, 250, 250, .8); + flex: 1 0 0; } .window h3, @@ -287,10 +295,7 @@ input[type=submit]:hover { color: #4d4d4d; background: #f0f0f0; margin: 0; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; - cursor: grab; display: flex; align-items: stretch; @@ -301,12 +306,19 @@ input[type=submit]:hover { .window > h2 { font-size: 1.3rem; + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; + cursor: grab; } .window h3 { font-size: 1.2rem; } +.window.dragged { + opacity: 0.9; +} + .files { padding: 0.3rem; display: grid; @@ -327,7 +339,7 @@ input[type=submit]:hover { display: flex; flex-direction: column; align-items: center; - border: 1px solid #fafafa; + border: 1px solid rgba(0,0,0,0); border-radius: 0.1rem; } @@ -337,7 +349,7 @@ input[type=submit]:hover { } .file:hover:not(.dragged) { - background: white; + background: rgba(255,255,255, 0.5); color: black; border-color: #ddd; } @@ -396,3 +408,15 @@ input[type=submit]:hover { background: #2e91db; color: white; } + +.backdrop { + position: absolute; + width: 100%; + height: 100%; + + user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + background-image: url("/img/backdrop.jpg"); + background-size: cover; +} -- cgit v1.2.3 From 32c7c9fa90212e9743573604672e893c4f9e8109 Mon Sep 17 00:00:00 2001 From: Alex Vitkov Date: Sat, 13 Feb 2021 14:48:20 +0200 Subject: css --- css/style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'css/style.css') diff --git a/css/style.css b/css/style.css index 07e2bf3..d60a4cf 100644 --- a/css/style.css +++ b/css/style.css @@ -290,6 +290,11 @@ input[type=submit]:hover { flex: 1 0 0; } +.filecontents { + padding: 0.8rem; + font-size: 1.1rem; +} + .window h3, .window > h2 { color: #4d4d4d; @@ -316,7 +321,7 @@ input[type=submit]:hover { } .window.dragged { - opacity: 0.9; + /* opacity: 0.9; */ } .files { -- cgit v1.2.3