aboutsummaryrefslogtreecommitdiffstats
path: root/css/style.css
diff options
context:
space:
mode:
authoradam <adam@>2021-02-13 14:51:43 +0200
committeradam <adam@>2021-02-13 14:51:43 +0200
commit25923c67bcf8c404174acca72fc888c42ff13e57 (patch)
tree2c1ef2e5c5b9500658f5fd99270ee6922b5d927d /css/style.css
parenta346874ea858d43ee2336e315dba056fb81b6439 (diff)
parent714b2e851734447a6701af88fc56091a3d75d7c1 (diff)
downloadfileup-25923c67bcf8c404174acca72fc888c42ff13e57.tar.gz
Merge https://github.com/alexvitkov/india
Diffstat (limited to 'css/style.css')
-rw-r--r--css/style.css129
1 files changed, 91 insertions, 38 deletions
diff --git a/css/style.css b/css/style.css
index fb6a093..d60a4cf 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 > * {
@@ -141,7 +145,6 @@ form > .content {
justify-content: center;
}
-.filesystem > h2,
form > h2 {
color: #4d4d4d;
margin: 0;
@@ -152,11 +155,33 @@ form > h2 {
border-top-right-radius: 0.5rem;
}
+
+.window h3 button,
+.window > h2 button
+{
+ border: none;
+ padding: 0.3rem 1rem;
+ background: inherit;
+ border-radius: 0;
+}
+
+.window h3 button:not(.pathentry):hover {
+ background: white;
+}
+
+.window h3 > .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,15 +266,62 @@ input[type=submit]:hover {
display: none;
}
-.filesystem {
- background: #fafafa;
- margin: 1rem;
+.window {
+ 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;
+
+ transition: opacity 0.3s;
+ display: flex;
+ flex-direction: column;
+}
+
+.foldercontents, .filecontents {
+ background: rgba(250, 250, 250, .8);
+ flex: 1 0 0;
+}
+
+.filecontents {
+ padding: 0.8rem;
+ font-size: 1.1rem;
+}
+
+.window h3,
+.window > h2 {
+ color: #4d4d4d;
+ background: #f0f0f0;
+ margin: 0;
+
+
+ display: flex;
+ align-items: stretch;
+ font-weight: normal;
+ padding: 0rem;
+ border-bottom: 1px solid #bbb;
+}
+
+.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 {
@@ -272,7 +344,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;
}
@@ -282,7 +354,7 @@ input[type=submit]:hover {
}
.file:hover:not(.dragged) {
- background: white;
+ background: rgba(255,255,255, 0.5);
color: black;
border-color: #ddd;
}
@@ -297,40 +369,9 @@ 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;
align-items: stretch;
- font-size: 0.8em;
}
.path > .separator {
@@ -372,3 +413,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;
+}