Merge pull request #7 from Team-Kaleidoscope/devHEADv0.2main

Second Stage: Complete

1 files changed, 24 insertions, 103 deletions

diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css
index 1b88c7d..1015564 100644
--- a/src/app/components/post/post.component.css
+++ b/src/app/components/post/post.component.css
@@ -1,134 +1,55 @@
-.post {
-  display: flex;
-  width: 98%;
-
-  margin: .5em auto;
+.left-pane {
   box-sizing: border-box;
-  padding: .5em;
-  background-color: var(--card-bg);
-  position: relative;
-}
-
-.post:first-child {
-  margin-top: 0;
-}
-
-hr {
-  border: 1px solid black;
-  width: 90%;
 }
 
 /* Author */
 
-.author {
-  display: flex;
-  margin-bottom: .2em;
-}
-
-.author:hover {
-  cursor: pointer;
-}
-
-.author > img {
+.author-picture {
   width: 2.2em;
   height: 2.2em;
-  margin-right: .2em;
-}
-
-.author-info > .handle {
-  font-size: .9em;
-  color: gray;
 }
 
 /* Content */
 
 .content {
-  flex: 1;
+  padding: 0 var(--card-padding);
 }
 
 .message {
-  margin: .3em 0;
-  word-break: break-all;
-}
-
-.bottom-post {
-  font-size: .5em;
-  color: gray;
-  display: flex;
-  align-items: center;
-}
-
-.separator {
-  margin: 0 .5em;
-}
-
-.comment-count {
-  font-size: 1em;
+  word-break: break-word;
 }
 
-.comment-count > img {
-  height: .8em;
+.post-details {
+  margin-bottom: calc(var(--card-padding) / 1.5);
+  padding: 0.2em 0;
 }
 
-.message:hover, .timestamp:hover {
-  cursor: pointer;
+.post-details > * {
+  margin-left: 1.1em;
 }
 
-/* Rating */
-
-/* Temporary, until ratings are implemented fully */
-.rating {
-  display: none !important;
+.rating img {
+  height: 1.2em;
+  width: 1.2em;
 }
 
-.rating {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 4.4em;
-  margin: auto -.1em auto 0;
-}
+/* Edit */
 
-.score {
-  flex: 1;
-  display: flex;
-  align-items: center;
+#attachments-btns img, .file-button > input {
+  height: 1.4em;
+  width: 1.4em;
 }
 
-
-.vote {
-  display: flex;
-  align-items: center;
-  flex: 1;
-
-  background: var(--card-bg);
-  font-size: 1em;
-
-  border: 1px solid var(--card-bg);
-  box-sizing: border-box;
-  border-radius: .2em;
-
-  }
-
-.vote:hover {
-  border: 1px solid var(--focus-color);
-  color: var(--focus-color);
-  cursor: pointer;
-}
-
-/* Attachments */
-
-.attachments {
-  display: flex;
-  width: 98%;
-  margin: -.3em auto .5em auto;
-  flex-wrap: wrap;
+.file-button {
+  position: relative;
 }
 
-.attachments:empty {
-  display: none;
+.file-button > img {
+  position: absolute;
+  pointer-events: none;
 }
 
-.attachments > * {
-  flex: 1;
+.file-button > input {
+  font-size: inherit;
+  color: transparent;
 }