Skip to content

Instantly share code, notes, and snippets.

@ninek9
Created February 18, 2011 19:41
Show Gist options
  • Save ninek9/834268 to your computer and use it in GitHub Desktop.
Save ninek9/834268 to your computer and use it in GitHub Desktop.
a hat tip to adam brault. added some additional features.
/* Convore Min-Width Userstyle */
/* author: Adam Brault */
/* http://andyet.net*/
/* Would love to see @etmaguire add his own version of something like this to the site. :D */
@media screen and (max-width: 450px) {
#topic-detail.group * {
float: none !important;
width: auto !important;
}
#topic-detail.group {
min-width: 300px !important;
}
#topic-detail.group #stripe {
z-index: 9999 !important;
top: 0 !important;
position: z-index !important;
width: 100% !important;
}
#topic-detail.group #header #logo a {
width: 24px !important;
left: 15px !important;
}
#topic-detail.group #message-list {
padding: 0px !important;
}
#topic-detail.group #main {
width: 100% !important;
}
#topic-detail.group #footer {
width: 100% !important;
}
#topic-detail.group #footer {
min-height: 50px !important;
}
#topic-detail.group .left, .copyright, #topic-detail.group #post-as-new-topic, #topic-detail.group .you-say {
display: none !important;
}
#topic-detail.group .topic-title {
position: absolute !important;
top: 0 !important;
z-index: 1000 !important;
}
#topic-detail.group .topic-title h2 {
width: auto !important;
}
#topic-detail.group .header-content {
width: 100% !mportant;
}
#topic-detail.group .message .user img {
position: absolute !important;
}
#topic-detail.group .embedded-images li img {
margin: 10px 30px !important;
}
#topic-detail.group #topic-detail-topic, #topic-detail.group .header-title {
border-top: 0px !important;
}
#topic-detail.group #header {
top: 4px !important;
z-index: 100 !important;
}
#topic-detail.group .topic-title {
padding: 0 !important;
margin: 0 !important;
left: 40px !important;
top: 10px !important;
border: 0 none !important;
width: 250px !important;
z-index: 99999 !important;
background: transparent !important;
border: 0px none transparent !important;
height: auto !important;
}
#topic-detail.group .topic-title h2 {
text-shadow: #000 0 0 5px;
color: white !important;
font-size: 16px !important;
border: 0 none !important;
z-index: 99999 !important;
background: transparent !important;
border: 0px none !important;
}
#topic-detail.group .topic-title .new-topic {
display: none !important;
}
#topic-detail.group #id-message {
width: 95% !important
}
#topic-detail.group #post-message span {
position: absolute !important;
display: none !important;
}
#topic-detail.group .btn {
display: none !important;
}
#topic-detail.group #topic-detail-topic.topic-title {
position: fixed !important;
background: transparent !important;
height: 30px !important;
z-index: 200 !important;
padding: 6px 9px 6px !important;
width: 100% !important;
}
#topic-detail.group #topic-detail-topic .thumb {
display: none !important;
}
#topic-detail.group .pad, #global-search, #topic-detail.group .global-unread-count {
display: none !important;
}
#topic-detail.group #header .header-content {
width: auto !important;
}
#topic-detail.group #main-menu {
display: none !important;
}
#topic-detail.group .settings-login-menu {
display: none !important;
}
#topic-detail.group .gray-btns {
display: none !important;
}
#topic-detail.group .message .user {
float: left !important;
margin: 1px 5px 0 0 !important;
}
/**** hack to display star and reply icons on message hover ****/
.message .message-entry {
padding-right: 6px;
line-height: 1.5em;
}
a.star-message.starred, .message:hover a.star-message, .message:hover a.reply-message {
display: block !important;
}
li.message:hover .star a, li.message:hover .reply a, li.message .star a.starred {
width: 16px !important;
max-width: 16px;
}
li.message:hover .star, li.message:hover .reply {
display: block;
position: relative;
}
li.message:hover .delete-message {
display: block;
right: 0;
min-width: 16px;
}
li.message:hover .star {
bottom: 14px;
left: 200px;
}
li.message:hover .reply {
bottom: 28px;
left: 217px;
}
li.message:hover div.meta {
max-height: 17px;
}
/**** end hack ****/
/**** displaying groups and mention menu ****/
#topic-detail.group #main-menu {
display: block !important;
float: left !important;
position: fixed;
right: 5px;
left: auto;
top: 7px;
}
#topic-detail.group #main-menu li:nth-child(2n),
#topic-detail.group #main-menu li:last-child {
display: none;
}
#topic-detail.group #main-menu li ul li:nth-child(2n),
#topic-detail.group #main-menu li ul li:last-child {
display: auto;
}
#topic-detail.group .topic-title h2 {
max-width: 80% !important;
text-overflow: ellipsis-word;
}
#topic-detail.group #main-menu li:first-child {
top: 21px;
}
#topic-detail.group #main-menu li ul li:first-child, #topic-detail.group #main-menu li ul li:nth-child(3n) {
top: auto;
}
#topic-detail.group #main-menu li:nth-child(3n) {
top: -17px;
}
#topic-detail.group #main-menu li a.dropdown {
margin-bottom: 0;
display: block;
}
#topic-detail.group #topic-detail-topic.topic-title {
pointer-events: none;
}
#main-menu li .dropdown-list {
left: auto;
right: 0;
width: 200px !important;
-webkit-border-radius: 5px 0 5px 5px;
}
/**** end groups and mentions menus ****/
/**** users online ****/
#topic-detail.group #header {
height: 45px;
}
#topic-detail.group #top-content,
#topic-detail.group #sidebar .box:first-child .title {
display: none;
}
#topic-detail.group #sidebar {
margin-top: -5px;
min-width: 100% !important;
}
#topic-detail.group #sidebar .box:first-child .pad {
display: block !important;
position: relative;
z-index: 1;
background: rgba(50,50,50,.35);
padding: 0 0 3px;
}
#topic-detail.group #sidebar .box:first-child .pad ul.userpics {
padding: 6px 12px 3px;
background: #fcfcfc;
border-bottom: 1px solid #999;
float: left !important;
min-width: 100% !important;
}
#topic-detail.group #sidebar .box:first-child .pad ul.userpics li {
float: left !important;
}
/**** end users online ****/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment