color stuff, building settings form

1 files changed, 68 insertions, 18 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index a0ad54e..2e00022 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -3,6 +3,7 @@ html {
 }
 body {
   background-color: #e6f0f0;
+  transition: background-color 100ms;
 	color: #111111;
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
@@ -336,12 +337,6 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
   width: 50%;
 }
 
-.comment {
-  padding: 10px;
-  border-bottom: 1px solid #ccc;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
-}
 #comments {
   width: 100%;
   max-width: 600px;
@@ -349,10 +344,10 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 }
 #comments tr .user {
   margin: 0;
-  padding: 0 3px 3px 0;
+  padding: 2px 2px 4px 0;
   text-align: center;
   font-size: 10px;
-  opacity: 0.8;
+  opacity: 0.9;
   vertical-align: top;
 }
 #comments .avatar {
@@ -367,20 +362,40 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 #comments tr:first-child .comment {
   border-top: 1px solid #ccc;
 }
-.comment div {
+.comment {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  position: relative;
+  vertical-align: top;
+  padding-right: 110px;
+}
+.comment .body {
   font-size: 12px;
+  line-height: 1.3;
+  max-width: 100%;
   padding-bottom: 3px;
 }
+.comment .date {
+  position: absolute;
+  bottom: 12px;
+  right: 8px;
+  display: inline-block;
+  text-align: right;
+}
 .comment .edit-links {
-  float: right;
+  position: absolute;
+  top: 12px;
+  right: 8px;
+  display: inline-block;
 }
 .comment .date,
 .comment .edit-links {
-  color: #d8cfcf;
-  opacity: 0;
+  color: #444;
+  font-size: 9px;
+  opacity: 0.8;
   transition: opacity 0.1s;
-  position: relative;
-  top: 4px;
 }
 .desktop .comment:hover .date,
 .mobile .date,
@@ -393,9 +408,8 @@ tr:nth-child(even) td.black       { background-color: #eee; border-bottom-color:
 .comment .edit-links a {
   color: #8f8ff8;
 }
-.desktop .comment .edit-links a:hover {
-  color: #11f;
-}
+.desktop .comment .edit-links:hover { opacity: 1.0; }
+.desktop .comment .edit-links a:hover { color: #11f; }
 .comment img {
   max-width: 100%;
 }
@@ -409,6 +423,7 @@ pre {
   width: 100%;
   overflow-x: hidden;
   background: #fefefe;
+  margin: 2px;
   padding: 5px;
   border: 1px solid #ddd;
 }
@@ -444,6 +459,9 @@ pre br {
 #thread_form input[type=submit] {
   margin: 0;
 }
+.settings_link {
+  font-weight: normal;
+}
 
 #comment_form {
   width: 100%;
@@ -481,11 +499,17 @@ pre br {
   opacity: 1;
 }
 #comment_form .inputs {
-  opacity: 0.4;
+  opacity: 1;
+}
+#comment_form input[type=submit] {
+  display: none;
 }
 #comment_form.focused .inputs {
   opacity: 1;
 }
+#comment_form.focused input[type=submit] {
+  display: block;
+}
 
 #files,
 #files tr {
@@ -547,6 +571,32 @@ pre br {
   max-width: 150px;
 }
 
+.modal {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.2);
+  opacity: 0;
+  transition: opacity 200ms;
+  pointer-events: none;
+}
+.modal.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.modal .inner {
+  position: absolute;
+  top: 30%;
+  left: 50%;
+  transform: translate3d(-50%,-20%,0);
+  background: white;
+  border: 1px solid #ddd;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
+}
+#thread_settings {
+}
+
 #search {
   padding: 5px;
   color: #333;