Stylizing file and folder cards

wil92 · Jul 4, 2019 · c586bfb · c586bfb
1 parent d752a7a
commit c586bfb
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/public/styles/files-list.css b/public/styles/files-list.css
@@ -10,6 +10,9 @@
 }
 
 .file-card {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-around;
     min-width: 15%;
     max-width: 15%;
     height: 200px;
@@ -18,13 +21,20 @@
     cursor: pointer;
     text-decoration: none;
     text-align: center;
-    vertical-align: middle;
     color: #fff;
     border: 2px solid transparent;
     word-wrap: break-word;
+    border: 2px solid rgba(1, 1, 1, .3);
+    border-radius: 5px;
+    transition: .2s ease-in-out all;
+    overflow: hidden;
+}
+
+.file-card:focus{
+    outline: none;
 }
 
-.file-card:focus {
+.file-card:focus, .file-card:hover, .file-card:active {
     border: 2px solid white;
 }
 
@@ -34,6 +44,11 @@
         max-width: 45%;
         height: 400px;
         font-size: 30px;
+        border: 4px solid rgba(1, 1, 1, .3);
+    }
+
+    .file-card:focus, .file-card:hover, .file-card:active {
+        border: 4px solid white;
     }
 }
 

diff --git a/public/styles/groups-list.css b/public/styles/groups-list.css
@@ -11,6 +11,9 @@
 }
 
 .group-card {
+    display: flex;
+    flex-direction: column-reverse;
+    justify-content: space-around;
     min-width: 200px;
     max-width: 200px;
     height: 200px;
@@ -21,10 +24,17 @@
     text-align: center;
     vertical-align: middle;
     color: #fff;
-    border: 2px solid transparent;
+    border: 2px solid rgba(1, 1, 1, .3);
+    border-radius: 5px;
+    transition: .2s ease-in-out all;
+    overflow: hidden;
 }
 
 .group-card:focus {
+    outline: none;
+}
+
+.group-card:focus, .group-card:hover, .group-card:active {
     border: 2px solid white;
 }
 
@@ -34,6 +44,11 @@
         max-width: 45%;
         height: 400px;
         font-size: 30px;
+        border: 4px solid rgba(1, 1, 1, .3);
+    }
+
+    .group-card:focus, .group-card:hover, .group-card:active {
+        border: 4px solid white;
     }
 }
 

diff --git a/public/styles/icons.css b/public/styles/icons.css
@@ -24,7 +24,7 @@
     height: 100px;
     position: relative;
     border: 4px solid #708090;
-    margin: auto auto 0;
+    margin: 0 auto 0;
     bottom: 0;
     border-radius: 54px;
     box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);

diff --git a/public/styles/media.css b/public/styles/media.css
@@ -1,15 +1,41 @@
 .page {
-    min-width: 100vw;
-    min-height: 100vh;
+    width: 100vw;
+    height: 100vh;
 
     display: flex;
     flex-direction: column;
     align-content: center;
     justify-content: center;
 }
 
+.page h1 {
+    height: 4vh;
+    text-align: center;
+    z-index: 10;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+}
+
+.page video {
+    width: auto;
+    height: 90vh;
+}
+
+.page video:focus{
+    outline: none;
+}
+
 @media only screen and (max-device-width: 824px) {
     .page {
         font-size: 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .page video{
+        margin: auto;
+        height: auto;
+        width: 100%;
     }
 }