Merge pull request #352 from alfajango/updated-styles

Updated styles
kandanapp · May 7, 2014 · 6289b9d · 6289b9d
2 parents 3cbfae7 + 0e97451
commit 6289b9d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/app/assets/stylesheets/chat_area/_activity.sass b/app/assets/stylesheets/chat_area/_activity.sass
@@ -4,29 +4,50 @@
 .activity
   background: #FFF
   +clearfix
-  min-height: 50px
   position: relative
 
   &:last-child
     border-bottom: none
 
   .readable
     +clearfix
-    margin: 0 100px 0 30px
     padding: 0 10px
+    margin: 0 0 0 25px
+
+    @media (min-width: $medium)
+      margin: 0 90px 0 25px
 
     .user
-      color: #AEB9BD
-      font-weight: bold
+      color: #949C93
       float: left
-      width: 100%
+      margin-right: 10px
+      margin-top: 7px
       margin-bottom: 4px
-      font-size: 14px
+      font-size: 11px
+      line-height: 16px
+      display: block
+      overflow: hidden
+      white-space: nowrap
+      text-overflow: ellipsis
+
+      @media (min-width: $medium)
+        width: 75px
+        text-align: right
 
     .content
       float: left
       color: #797D7F
-      font-size: 14px
+      font-size: 12px
+      width: 100%
+      line-height: 16px
+      margin-bottom: 0
+      padding-top: 7px
+      padding-bottom: 7px
+
+      @media (min-width: $medium)
+        width: calc(100% - 85px)
+        border-left: solid 1px #C8D3C5
+        padding-left: 10px
 
       .image-preview, .youtube-preview
         background: #F3F8F9
@@ -49,6 +70,15 @@
       img.image-embed
         max-width: 100%
         height: auto
+        max-height: 300px
+        -moz-transition: 0.15s
+        -ms-transition: 0.15s
+        -o-transition: 0.15s
+        -webkit-transition: 0.15s
+        transition: 0.15s
+
+        &:hover
+          max-height: 999px
 
       .color-preview
         width: 15px
@@ -65,13 +95,15 @@
         color: black
         padding: 2px 3px
         border-radius: 5px
+        margin-left: 3px
 
       .emoticon-embed
         vertical-align: bottom
 
       .emoticon-embed.small
         height: 20px
         width: 20px
+        vertical-align: middle
 
       .emoticon-embed.big
         height: 40px
@@ -85,6 +117,7 @@
     float: right
     text-align: right
     padding: 4px
+    margin-top: 3px
 
   .avatar
     display: block
@@ -106,23 +139,26 @@
       color: #6F7477
 
   &.connect
-    background-color: #C4DF9B
+    .content
+      color: #5F9906
   &.disconnect
-    background-color: #FBAF5C
+    .content
+      color: #AA0101
 
   &.connect, &.disconnect
     opacity: 0.5
     min-height: 0
-    padding: 3px
-    padding-left: 10px
-    padding-right: 10px
+    padding: 3px 0
 
     .posted_at
       line-height: normal
+      margin-top: 0
     .avatar, .user
       display: none
     .user, .content
       float: none
+      @media (min-width: $medium)
+        margin-left: 85px
 
 .pagination
   font-size: 14px
@@ -137,4 +173,3 @@
 .activity,
 .pagination
   border-bottom: 1px solid #DEE6E8
-  padding: 10px
diff --git a/app/assets/stylesheets/chat_area/_chatbox.sass b/app/assets/stylesheets/chat_area/_chatbox.sass
@@ -38,4 +38,4 @@
   textarea, button
     height: 40px
     margin: 0
-    padding: 0
+    padding: 4px 6px
diff --git a/app/assets/stylesheets/layout/_nav.sass b/app/assets/stylesheets/layout/_nav.sass
@@ -33,7 +33,6 @@
       border-radius: 20px
       background: $search-bg
       +box-sizing(border-box)
-      +box-shadow(inset 0px 7px 6px -5px #3a4547, 2px 7px 7px -6px #7f8587)
       border: 2px solid darken($search-bg, 10%)
       width: 100%
       color: $search-color
@@ -84,6 +83,7 @@
 
     li
       position: relative
+      float: left
 
       a
         text-decoration: none