My Activity Box Input Design Change On Timeline Mentions

Thought the activity update box looked a little plain so decided to adjust it a little. This is on the slate skin but could be adjusted for any by editing the colours etc. The CSS I added to the Profile Page CSS and here is the little code I used but stopped the styling for smaller screens so not to hinder bandwidth downloading the styles.

/* This is for the timeline status box on the profile pages but the styles only come into affect above the media query */

@media only screen and ( min-width:800px){

#new_action.item{ background-color: rgba(0, 0, 0, 0.19);
background-image: linear-gradient(#FDF5E6, rgba(227, 225, 225, 0.81)); }


form#action_form{ background-color: rgba(0, 0, 0, 0.44);
background-image: linear-gradient(rgba(11, 7, 0, 0.47), rgba(227, 225, 225, 0.56)); }

.mentions-input-box{ padding: 4px;
background: rgba(0, 0, 0, 0.23); }

form#action_form .form_button{ background-color: #24C0EB;
background-image: linear-gradient(#24C0EB, rgba(0, 0, 0, 0.16));
color: #FFF;border-radius:20px; box-shadow: 2px 4px 7px rgba(69, 38, 38, 0.99);border:none;
margin-bottom: 6px;
margin-left: 6px; }

form#action_form .form_button:hover{ background-color: #2F4F4F;background-image: linear-gradient(#24C0EB, rgba(0, 0, 0, 0.12)); }
}

Added an image showing the box which I added twice so you can see the button when hovered over which is the bottom of the two.

John
updated by @john-bizley: 01/01/15 09:00:42PM

That looks good...


--

Ken Rich
indiegospel.net