Created
August 3, 2013 03:48
-
-
Save cdharrison/6145101 to your computer and use it in GitHub Desktop.
A SCSS version of buddypress.css that comes with bp-default. Converted using http://css2sass.heroku.com/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*-------------------------------------------------------------- | |
| Hello, this is the BuddyPress Legacy stylesheet. | |
| ---------------------------------------------------------------- | |
| >>> TABLE OF CONTENTS: | |
| ---------------------------------------------------------------- | |
| 1.0 - Navigation | |
| 1.1 - Pagination | |
| 2.0 - WordPress | |
| 2.1 - Images | |
| 3.0 - BuddyPress | |
| 3.1 - Activity | |
| 3.1.1 - Activity Listing | |
| 3.1.2 - Activity Comments | |
| 3.2 - Toolbar | |
| 3.3 - Directories - Members, Groups, Blogs, Forums | |
| 3.4 - Error / Success Messages | |
| 3.5 - Forms | |
| 3.6 - Ajax Loading | |
| 3.7 - Topics and Tables - Forums and General | |
| 3.8 - Headers, Lists and Tabs - Activity, Groups, Blogs, Forums | |
| 3.9 - Private Messaging Threads | |
| 3.10 - Extended Profiles | |
| 3.11 - Widgets | |
| 4.0 - Media Queries | |
| 4.1 - Smartphones Landscape | |
| 4.2 - Smartphones Portrait | |
| 4.3 - Smartphones - smaller screen sizes | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 1 - Navigation | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 1.1 - Pagination | |
| --------------------------------------------------------------*/ | |
| #buddypress { | |
| div.pagination { | |
| background: transparent; | |
| border: none; | |
| color: #888; | |
| font-size: 90%; | |
| margin: 0; | |
| position: relative; | |
| display: block; | |
| float: left; | |
| width: 100%; | |
| padding: 10px 0; | |
| .pag-count { | |
| float: left; | |
| margin-left: 10px; | |
| } | |
| .pagination-links { | |
| float: right; | |
| margin-right: 10px; | |
| span { | |
| font-size: 90%; | |
| padding: 0 5px; | |
| } | |
| a { | |
| font-size: 90%; | |
| padding: 0 5px; | |
| &:hover { | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| } | |
| noscript div.pagination { | |
| margin-bottom: 15px; | |
| } | |
| #nav-above { | |
| display: none; | |
| } | |
| .paged #nav-above { | |
| display: block; | |
| } | |
| img.wp-smiley { | |
| border: none !important; | |
| clear: none !important; | |
| float: none !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| #activity-stream { | |
| margin-top: -5px; | |
| p { | |
| margin: 5px 0; | |
| } | |
| } | |
| #item-body form#whats-new-form { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .home-page form#whats-new-form { | |
| border-bottom: none; | |
| padding-bottom: 0; | |
| } | |
| form#whats-new-form { | |
| #whats-new-avatar { | |
| float: left; | |
| } | |
| #whats-new-content { | |
| margin-left: 55px; | |
| padding: 0 0 20px 20px; | |
| } | |
| p.activity-greeting { | |
| line-height: 0.5em; | |
| margin-bottom: 15px; | |
| margin-left: 75px; | |
| } | |
| textarea { | |
| background: #fff; | |
| color: #555; | |
| font-family: inherit; | |
| font-size: 90%; | |
| height: 20px; | |
| padding: 6px; | |
| width: 98%; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 2 - WordPress | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 2.1 - Images | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 3.0 - BuddyPress | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 3.1 - Activity | |
| --------------------------------------------------------------*/ | |
| body.no-js #buddypress form#whats-new-form textarea { | |
| height: 50px; | |
| } | |
| #buddypress { | |
| form#whats-new-form { | |
| #whats-new-options select { | |
| max-width: 200px; | |
| margin-top: 12px; | |
| } | |
| #whats-new-submit { | |
| float: right; | |
| margin-top: 12px; | |
| } | |
| } | |
| #whats-new-options { | |
| overflow: auto; | |
| height: 0; | |
| } | |
| } | |
| body.no-js #buddypress #whats-new-options { | |
| height: auto; | |
| } | |
| #buddypress { | |
| #whats-new:focus { | |
| border-color: rgba(31, 179, 221, 0.9) !important; | |
| outline-color: rgba(31, 179, 221, 0.9); | |
| } | |
| ul.activity-list li { | |
| overflow: hidden; | |
| padding: 15px 0 0; | |
| list-style: none; | |
| } | |
| .activity-list .activity-avatar { | |
| float: left; | |
| } | |
| ul.item-list.activity-list li.has-comments { | |
| padding-bottom: 15px; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.1.1 - Activity Listing | |
| --------------------------------------------------------------*/ | |
| body.activity-permalink #buddypress ul.activity-list li.has-comments { | |
| padding-bottom: 0; | |
| } | |
| #buddypress { | |
| .activity-list li.mini { | |
| font-size: 80%; | |
| position: relative; | |
| .activity-avatar img { | |
| &.avatar, &.FB_profile_pic { | |
| height: 20px; | |
| margin-left: 30px; | |
| width: 20px; | |
| } | |
| } | |
| } | |
| .activity-permalink .activity-list li.mini .activity-avatar img { | |
| &.avatar, &.FB_profile_pic { | |
| height: auto; | |
| margin-left: 0; | |
| width: auto; | |
| } | |
| } | |
| } | |
| body.activity-permalink #buddypress .activity-list > li:first-child { | |
| padding-top: 0; | |
| } | |
| #buddypress .activity-list li { | |
| .activity-content { | |
| position: relative; | |
| } | |
| &.mini { | |
| .activity-content p { | |
| margin: 0; | |
| } | |
| .activity-comments { | |
| clear: both; | |
| font-size: 120%; | |
| } | |
| } | |
| } | |
| body.activity-permalink #buddypress li.mini .activity-meta { | |
| margin-top: 4px; | |
| } | |
| #buddypress .activity-list { | |
| li .activity-inreplyto { | |
| color: #888; | |
| font-size: 80%; | |
| > p { | |
| margin: 0; | |
| display: inline; | |
| } | |
| blockquote, div.activity-inner { | |
| background: none; | |
| border: none; | |
| display: inline; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| } | |
| } | |
| .activity-content { | |
| margin: 0 0 0 70px; | |
| } | |
| } | |
| body.activity-permalink #buddypress .activity-list li { | |
| .activity-content { | |
| border: none; | |
| font-size: 100%; | |
| line-height: 150%; | |
| margin-left: 170px; | |
| margin-right: 0; | |
| padding: 0; | |
| } | |
| .activity-header > p { | |
| margin: 0; | |
| padding: 5px 0 0 0; | |
| } | |
| } | |
| #buddypress { | |
| .activity-list .activity-content { | |
| .activity-header, .comment-header { | |
| color: #888; | |
| line-height: 220%; | |
| } | |
| } | |
| .activity-header { | |
| margin-right: 20px; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| .comment-meta a, .acomment-meta a { | |
| text-decoration: none; | |
| } | |
| .activity-list .activity-content .activity-header img.avatar { | |
| float: none !important; | |
| margin: 0 5px -8px 0 !important; | |
| } | |
| a.bp-secondary-action, span.highlight { | |
| font-size: 80%; | |
| padding: 0; | |
| margin-right: 5px; | |
| text-decoration: none; | |
| } | |
| .activity-list { | |
| .activity-content { | |
| .activity-inner, blockquote { | |
| margin: 10px 10px 5px 0; | |
| overflow: hidden; | |
| } | |
| } | |
| li { | |
| &.new_forum_post .activity-content .activity-inner, &.new_forum_topic .activity-content .activity-inner { | |
| border-left: 2px solid #EAEAEA; | |
| margin-left: 5px; | |
| padding-left: 10px; | |
| } | |
| } | |
| } | |
| } | |
| body.activity-permalink #buddypress .activity-content { | |
| .activity-inner, blockquote { | |
| margin-left: 0; | |
| margin-top: 5px; | |
| } | |
| } | |
| #buddypress { | |
| .activity-inner > { | |
| p { | |
| word-wrap: break-word; | |
| } | |
| .activity-inner, blockquote { | |
| margin: 0; | |
| } | |
| } | |
| .activity-list .activity-content img.thumbnail { | |
| border: 2px solid #eee; | |
| float: left; | |
| margin: 0 10px 5px 0; | |
| } | |
| .activity-read-more { | |
| margin-left: 1em; | |
| white-space: nowrap; | |
| } | |
| .activity-list li.load-more { | |
| background: #f0f0f0; | |
| font-size: 110%; | |
| margin: 15px 0; | |
| padding: 10px 15px; | |
| text-align: center; | |
| a { | |
| color: #4D4D4D; | |
| } | |
| } | |
| div.activity-meta { | |
| margin: 18px 0 0; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.1.2 - Activity Comments | |
| --------------------------------------------------------------*/ | |
| body.activity-permalink #buddypress div.activity-meta { | |
| margin-bottom: 6px; | |
| } | |
| #buddypress { | |
| div.activity-meta a { | |
| padding: 4px 8px; | |
| } | |
| a { | |
| &.activity-time-since { | |
| color: #aaa; | |
| text-decoration: none; | |
| &:hover { | |
| color: #888; | |
| text-decoration: underline; | |
| } | |
| } | |
| &.bp-primary-action { | |
| font-size: 80%; | |
| margin-right: 5px; | |
| text-decoration: none; | |
| } | |
| } | |
| #reply-title small a { | |
| font-size: 80%; | |
| margin-right: 5px; | |
| text-decoration: none; | |
| } | |
| a.bp-primary-action span, #reply-title small a span { | |
| background: #999; | |
| color: #fff; | |
| font-size: 90%; | |
| margin-left: 2px; | |
| padding: 0 5px; | |
| } | |
| a.bp-primary-action:hover span, #reply-title small a:hover span { | |
| background: #555; | |
| color: #fff; | |
| } | |
| div.activity-comments { | |
| margin: 0 0 0 70px; | |
| overflow: hidden; | |
| /* IE fix */ | |
| position: relative; | |
| width: auto; | |
| clear: both; | |
| } | |
| } | |
| body.activity-permalink #buddypress div.activity-comments { | |
| background: none; | |
| margin-left: 170px; | |
| width: auto; | |
| } | |
| #buddypress div.activity-comments { | |
| > ul { | |
| padding: 0 0 0 10px; | |
| } | |
| ul { | |
| border: none; | |
| list-style: none; | |
| li { | |
| border: none; | |
| list-style: none; | |
| border-top: 1px solid #eee; | |
| padding: 10px 0 0; | |
| } | |
| clear: both; | |
| margin: 0; | |
| } | |
| } | |
| body.activity-permalink #buddypress { | |
| .activity-list li.mini .activity-comments { | |
| clear: none; | |
| margin-top: 0; | |
| } | |
| div.activity-comments ul li { | |
| border-width: 1px; | |
| padding: 10px 0 0 0; | |
| } | |
| } | |
| #buddypress div.activity-comments { | |
| > ul > li:first-child { | |
| border-top: none; | |
| } | |
| ul li { | |
| &:last-child { | |
| margin-bottom: 0; | |
| } | |
| > ul { | |
| margin-left: 30px; | |
| margin-top: 0; | |
| padding-left: 10px; | |
| } | |
| } | |
| } | |
| body.activity-permalink #buddypress div.activity-comments { | |
| ul li > ul { | |
| margin-top: 10px; | |
| } | |
| > ul { | |
| padding: 0 10px 0 15px; | |
| } | |
| } | |
| #buddypress div { | |
| &.activity-comments div { | |
| &.acomment-avatar img { | |
| border-width: 1px; | |
| float: left; | |
| height: 25px; | |
| margin-right: 10px; | |
| width: 25px; | |
| } | |
| &.acomment-content { | |
| font-size: 80%; | |
| margin: 5px 0 0 40px; | |
| } | |
| } | |
| &.acomment-content { | |
| .time-since, .activity-delete-link, .comment-header { | |
| display: none; | |
| } | |
| } | |
| } | |
| body.activity-permalink #buddypress div.activity-comments div.acomment-content { | |
| font-size: 90%; | |
| } | |
| #buddypress { | |
| div { | |
| &.activity-comments { | |
| div.acomment-meta { | |
| color: #888; | |
| font-size: 80%; | |
| } | |
| form.ac-form { | |
| display: none; | |
| padding: 10px; | |
| } | |
| li form.ac-form { | |
| margin-right: 15px; | |
| clear: both; | |
| } | |
| form.root { | |
| margin-left: 0; | |
| } | |
| div#message { | |
| margin-top: 15px; | |
| margin-bottom: 0; | |
| } | |
| form { | |
| .ac-textarea { | |
| background: #fff; | |
| border: 1px inset #ccc; | |
| margin-bottom: 10px; | |
| padding: 8px; | |
| } | |
| textarea { | |
| border: none; | |
| background: transparent; | |
| box-shadow: none; | |
| outline: none; | |
| color: #555; | |
| font-family: inherit; | |
| font-size: 100%; | |
| height: 60px; | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| input { | |
| margin-top: 5px; | |
| } | |
| div.ac-reply-avatar { | |
| float: left; | |
| } | |
| } | |
| } | |
| &.ac-reply-avatar img { | |
| border: 1px solid #eee; | |
| } | |
| &.activity-comments form div.ac-reply-content { | |
| color: #888; | |
| margin-left: 50px; | |
| padding-left: 15px; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| } | |
| .acomment-options { | |
| float: left; | |
| margin: 5px 0 5px 40px; | |
| a { | |
| color: #999; | |
| &:hover { | |
| color: inherit; | |
| } | |
| } | |
| } | |
| div.dir-search { | |
| float: right; | |
| margin: -39px 0 0 0; | |
| input[type=text] { | |
| font-size: 90%; | |
| padding: 1px 3px; | |
| } | |
| } | |
| .dir-form { | |
| clear: both; | |
| } | |
| div#message { | |
| margin: 0 0 15px; | |
| } | |
| #message.info { | |
| margin-bottom: 0; | |
| } | |
| div#message { | |
| &.updated { | |
| clear: both; | |
| } | |
| p { | |
| font-size: 90%; | |
| display: block; | |
| padding: 10px 15px; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.3 - Directories - Members, Groups, Blogs, Forums | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 3.4 - Errors / Success Messages | |
| --------------------------------------------------------------*/ | |
| #sitewide-notice p { | |
| font-size: 90%; | |
| display: block; | |
| padding: 10px 15px; | |
| } | |
| #buddypress { | |
| div#message { | |
| &.error p { | |
| background-color: #fdc; | |
| border: 1px solid #a00; | |
| clear: left; | |
| color: #800; | |
| } | |
| &.updated p { | |
| background-color: #efc; | |
| border: 1px solid #591; | |
| color: #250; | |
| } | |
| } | |
| .standard-form#signup_form div div.error { | |
| background: #faa; | |
| color: #a00; | |
| margin: 0 0 10px 0; | |
| padding: 6px; | |
| width: 90%; | |
| } | |
| div { | |
| &.accept, &.reject { | |
| float: left; | |
| margin-left: 10px; | |
| } | |
| } | |
| ul.button-nav li { | |
| float: left; | |
| margin: 0 10px 10px 0; | |
| list-style: none; | |
| &.current a { | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| #sitewide-notice { | |
| #message { | |
| left: 2%; | |
| position: fixed; | |
| top: 1em; | |
| width: 96%; | |
| z-index: 9999; | |
| } | |
| &.admin-bar-on #message { | |
| top: 3.3em; | |
| } | |
| strong { | |
| display: block; | |
| margin-bottom: -1em; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.5 - Forms | |
| --------------------------------------------------------------*/ | |
| #buddypress { | |
| .standard-form { | |
| textarea { | |
| border: 1px solid #ccc; | |
| background: #fafafa; | |
| border-radius: 0; | |
| color: #888; | |
| font: inherit; | |
| font-size: 100%; | |
| padding: 6px; | |
| } | |
| input { | |
| &[type=text], &[type=color], &[type=date], &[type=datetime], &[type=datetime-local], &[type=email], &[type=month], &[type=number], &[type=range], &[type=search], &[type=tel], &[type=time], &[type=url], &[type=week] { | |
| border: 1px solid #ccc; | |
| background: #fafafa; | |
| border-radius: 0; | |
| color: #888; | |
| font: inherit; | |
| font-size: 100%; | |
| padding: 6px; | |
| } | |
| } | |
| select, input[type=password] { | |
| border: 1px solid #ccc; | |
| background: #fafafa; | |
| border-radius: 0; | |
| color: #888; | |
| font: inherit; | |
| font-size: 100%; | |
| padding: 6px; | |
| } | |
| } | |
| .dir-search input { | |
| &[type=search], &[type=text] { | |
| border: 1px solid #ccc; | |
| background: #fafafa; | |
| border-radius: 0; | |
| color: #888; | |
| font: inherit; | |
| font-size: 100%; | |
| padding: 6px; | |
| } | |
| } | |
| .standard-form { | |
| select { | |
| padding: 3px; | |
| } | |
| input[type=password] { | |
| margin-bottom: 5px; | |
| } | |
| label, span.label { | |
| display: block; | |
| font-weight: bold; | |
| margin: 15px 0 5px 0; | |
| } | |
| div { | |
| &.checkbox label, &.radio label { | |
| color: #888; | |
| font-size: 100%; | |
| font-weight: normal; | |
| margin: 5px 0 0 0; | |
| } | |
| } | |
| &#sidebar-login-form label { | |
| margin-top: 5px; | |
| } | |
| input[type=text] { | |
| width: 75%; | |
| } | |
| &#sidebar-login-form input { | |
| &[type=text], &[type=password] { | |
| padding: 4px; | |
| width: 95%; | |
| } | |
| } | |
| #basic-details-section input[type=password], #blog-details-section input#signup_blog_url { | |
| width: 35%; | |
| } | |
| &#signup_form { | |
| input[type=text], textarea { | |
| width: 90%; | |
| } | |
| } | |
| } | |
| .form-allowed-tags { | |
| width: 90%; | |
| } | |
| #commentform { | |
| input[type=text], textarea { | |
| width: 90%; | |
| } | |
| } | |
| .standard-form#signup_form div.submit { | |
| float: right; | |
| } | |
| div#signup-avatar img { | |
| margin: 0 15px 10px 0; | |
| } | |
| .standard-form { | |
| textarea { | |
| width: 75%; | |
| height: 120px; | |
| &#message_content { | |
| height: 200px; | |
| } | |
| } | |
| &#send-reply textarea { | |
| width: 97.5%; | |
| } | |
| p.description { | |
| color: #888; | |
| font-size: 80%; | |
| margin: 5px 0; | |
| } | |
| div.submit { | |
| clear: both; | |
| padding: 15px 0 0 0; | |
| } | |
| p.submit { | |
| margin-bottom: 0; | |
| padding: 15px 0 0 0; | |
| } | |
| div { | |
| &.submit input { | |
| margin-right: 15px; | |
| } | |
| &.radio ul { | |
| margin: 10px 0 15px 38px; | |
| list-style: disc; | |
| li { | |
| margin-bottom: 5px; | |
| } | |
| } | |
| } | |
| a.clear-value { | |
| display: block; | |
| margin-top: 5px; | |
| outline: none; | |
| } | |
| #basic-details-section, #blog-details-section { | |
| float: left; | |
| width: 48%; | |
| } | |
| #profile-details-section { | |
| float: left; | |
| width: 48%; | |
| float: right; | |
| } | |
| #blog-details-section { | |
| clear: left; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| background: #fafafa; | |
| color: #555; | |
| } | |
| } | |
| form#send-invite-form { | |
| margin-top: 20px; | |
| } | |
| div#invite-list { | |
| background: #f5f5f5; | |
| height: 400px; | |
| margin: 0 0 10px; | |
| overflow: auto; | |
| padding: 5px; | |
| width: 160px; | |
| } | |
| button, a.button { | |
| background: #fff; | |
| /* Old browsers */ | |
| border: 1px solid #ccc; | |
| color: #777; | |
| font-size: .8rem; | |
| cursor: pointer; | |
| outline: none; | |
| padding: 4px 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| input { | |
| &[type=submit], &[type=button], &[type=reset] { | |
| background: #fff; | |
| /* Old browsers */ | |
| border: 1px solid #ccc; | |
| color: #777; | |
| font-size: .8rem; | |
| cursor: pointer; | |
| outline: none; | |
| padding: 4px 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| } | |
| ul.button-nav li a, div.generic-button a, .comment-reply-link { | |
| background: #fff; | |
| /* Old browsers */ | |
| border: 1px solid #ccc; | |
| color: #777; | |
| font-size: .8rem; | |
| cursor: pointer; | |
| outline: none; | |
| padding: 4px 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| } | |
| a.bp-title-button { | |
| background: #fff; | |
| /* Old browsers */ | |
| border: 1px solid #ccc; | |
| color: #777; | |
| font-size: .8rem; | |
| cursor: pointer; | |
| outline: none; | |
| padding: 4px 10px; | |
| text-align: center; | |
| text-decoration: none; | |
| } | |
| #buddypress { | |
| button:hover { | |
| background: #ededed; | |
| border: 1px solid #bbb; | |
| color: #555; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| a.button { | |
| &:hover, &:focus { | |
| background: #ededed; | |
| border: 1px solid #bbb; | |
| color: #555; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| } | |
| input { | |
| &[type=submit]:hover, &[type=button]:hover, &[type=reset]:hover { | |
| background: #ededed; | |
| border: 1px solid #bbb; | |
| color: #555; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| } | |
| ul.button-nav li { | |
| a:hover, &.current a { | |
| background: #ededed; | |
| border: 1px solid #bbb; | |
| color: #555; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| } | |
| div.generic-button a:hover, .comment-reply-link:hover { | |
| background: #ededed; | |
| border: 1px solid #bbb; | |
| color: #555; | |
| outline: none; | |
| text-decoration: none; | |
| } | |
| form.standard-form { | |
| .left-menu { | |
| float: left; | |
| #invite-list ul { | |
| margin: 1%; | |
| list-style: none; | |
| li { | |
| margin: 0 0 0 1%; | |
| } | |
| } | |
| } | |
| .main-column { | |
| margin-left: 190px; | |
| ul#friend-list { | |
| clear: none; | |
| h4 { | |
| clear: none; | |
| } | |
| } | |
| } | |
| } | |
| a.loading, input.loading { | |
| -webkit-animation: loader-pulsate .5s infinite ease-in-out alternate; | |
| -moz-animation: loader-pulsate .5s infinite ease-in-out alternate; | |
| border-color: #aaa; | |
| } | |
| a.loading:hover { | |
| color: #777; | |
| } | |
| input { | |
| &.loading:hover { | |
| color: #777; | |
| } | |
| &[type="submit"].pending, &[type="button"].pending, &[type="reset"].pending, &[type="submit"].disabled, &[type="button"].disabled, &[type="reset"].disabled { | |
| border-color: #eee; | |
| color: #bbb; | |
| cursor: default; | |
| } | |
| } | |
| button { | |
| &.pending, &.disabled { | |
| border-color: #eee; | |
| color: #bbb; | |
| cursor: default; | |
| } | |
| } | |
| div.pending a, a.disabled { | |
| border-color: #eee; | |
| color: #bbb; | |
| cursor: default; | |
| } | |
| input { | |
| &[type="submit"]:hover.pending, &[type="button"]:hover.pending, &[type="reset"]:hover.pending, &[type="submit"]:hover.disabled, &[type="button"]:hover.disabled, &[type="reset"]:hover.disabled { | |
| border-color: #eee; | |
| color: #bbb; | |
| } | |
| } | |
| button { | |
| &.pending:hover, &.disabled:hover { | |
| border-color: #eee; | |
| color: #bbb; | |
| } | |
| } | |
| div.pending a:hover, a.disabled:hover { | |
| border-color: #eee; | |
| color: #bbb; | |
| } | |
| ul#topic-post-list { | |
| margin: 0; | |
| width: auto; | |
| li { | |
| padding: 15px; | |
| position: relative; | |
| &.alt { | |
| background: #f5f5f5; | |
| } | |
| div { | |
| &.poster-meta { | |
| color: #888; | |
| margin-bottom: 10px; | |
| } | |
| &.post-content { | |
| margin-left: 54px; | |
| } | |
| } | |
| } | |
| } | |
| div { | |
| &.topic-tags { | |
| font-size: 80%; | |
| } | |
| &.admin-links { | |
| color: #888; | |
| font-size: 80%; | |
| position: absolute; | |
| top: 15px; | |
| right: 25px; | |
| } | |
| &#topic-meta { | |
| margin: 0; | |
| padding: 5px 19px 30px; | |
| position: relative; | |
| div.admin-links { | |
| right: 19px; | |
| top: -36px; | |
| } | |
| h3 { | |
| margin: 5px 0; | |
| } | |
| } | |
| &#new-topic-post { | |
| display: none; | |
| margin: 20px 0 0 0; | |
| padding: 1px 0 0 0; | |
| } | |
| } | |
| table { | |
| width: 100%; | |
| thead tr { | |
| background: #eaeaea; | |
| } | |
| &#message-threads { | |
| clear: both; | |
| margin: 0; | |
| width: auto; | |
| } | |
| &.profile-fields { | |
| margin-bottom: 20px; | |
| &:last-child { | |
| margin-bottom: 0; | |
| } | |
| p { | |
| margin: 0; | |
| &:last-child { | |
| margin-top: 0; | |
| } | |
| } | |
| } | |
| tr { | |
| td, th { | |
| padding: 8px; | |
| vertical-align: middle; | |
| } | |
| td { | |
| &.label { | |
| border-right: 1px solid #eaeaea; | |
| font-weight: bold; | |
| width: 25%; | |
| } | |
| &.thread-info p { | |
| margin: 0; | |
| &.thread-excerpt { | |
| color: #888; | |
| font-size: 80%; | |
| margin-top: 3px; | |
| } | |
| } | |
| } | |
| } | |
| &.forum td { | |
| text-align: center; | |
| } | |
| tr.alt td { | |
| background: #f5f5f5; | |
| } | |
| &.notification-settings { | |
| margin-bottom: 20px; | |
| text-align: left; | |
| } | |
| } | |
| #groups-notification-settings { | |
| margin-bottom: 0; | |
| } | |
| table { | |
| &.notification-settings { | |
| th.icon, td:first-child { | |
| display: none; | |
| } | |
| th.title { | |
| width: 80%; | |
| } | |
| .yes, .no { | |
| text-align: center; | |
| width: 40px; | |
| } | |
| } | |
| &.forum { | |
| margin: 0; | |
| width: auto; | |
| clear: both; | |
| tr { | |
| &.sticky td { | |
| font-size: 110%; | |
| background: #fff9db; | |
| border-top: 1px solid #ffe8c4; | |
| border-bottom: 1px solid #ffe8c4; | |
| } | |
| &.closed td.td-title { | |
| padding-left: 35px; | |
| } | |
| } | |
| td p.topic-text { | |
| color: #888; | |
| font-size: 100%; | |
| } | |
| tr { | |
| > { | |
| td:first-child, th:first-child { | |
| padding-left: 15px; | |
| } | |
| td:last-child, th:last-child { | |
| padding-right: 15px; | |
| } | |
| } | |
| th { | |
| &#th-title, &#th-poster, &#th-group { | |
| text-align: left; | |
| } | |
| } | |
| } | |
| td { | |
| &.td-poster, &.td-group, &.td-title { | |
| text-align: left; | |
| } | |
| } | |
| tr td.td-title a.topic-title { | |
| font-size: 110%; | |
| } | |
| td { | |
| &.td-freshness { | |
| white-space: nowrap; | |
| span.time-since { | |
| font-size: 80%; | |
| color: #888; | |
| } | |
| } | |
| img.avatar { | |
| float: none; | |
| margin: 0 5px -8px 0; | |
| } | |
| &.td-poster, &.td-group { | |
| min-width: 140px; | |
| } | |
| } | |
| th { | |
| &#th-title { | |
| width: 80%; | |
| } | |
| &#th-freshness { | |
| width: 25%; | |
| } | |
| &#th-postcount { | |
| width: 15%; | |
| } | |
| } | |
| p.topic-meta { | |
| font-size: 80%; | |
| margin: 5px 0 0 0; | |
| } | |
| } | |
| } | |
| .item-body { | |
| margin: 20px 0; | |
| } | |
| span { | |
| &.activity { | |
| display: inline-block; | |
| font-size: 80%; | |
| opacity: 0.8; | |
| padding: 0; | |
| } | |
| &.user-nicename { | |
| color: #777; | |
| display: inline-block; | |
| font-size: 120%; | |
| font-weight: bold; | |
| } | |
| } | |
| div#message p { | |
| font-weight: normal; | |
| margin-top: 3px; | |
| text-decoration: none; | |
| background-color: #ffd; | |
| border: 1px solid #cb2; | |
| color: #440; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.6 - Ajax Loading | |
| --------------------------------------------------------------*/ | |
| @-webkit-keyframes loader-pulsate { | |
| from { | |
| border-color: #aaa; | |
| -webkit-box-shadow: 0 0 6px #ccc; | |
| box-shadow: 0 0 6px #ccc; | |
| } | |
| to { | |
| border-color: #ccc; | |
| -webkit-box-shadow: 0 0 6px #f8f8f8; | |
| box-shadow: 0 0 6px #f8f8f8; | |
| } | |
| } | |
| @-moz-keyframes loader-pulsate { | |
| from { | |
| border-color: #aaa; | |
| -moz-box-shadow: 0 0 6px #ccc; | |
| box-shadow: 0 0 6px #ccc; | |
| } | |
| to { | |
| border-color: #ccc; | |
| -moz-box-shadow: 0 0 6px #f8f8f8; | |
| box-shadow: 0 0 6px #f8f8f8; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.7 - Forums, Tables and Topics | |
| --------------------------------------------------------------*/ | |
| /*------------------------------------------------------------------------- | |
| 3.8 - Headers, Lists and Tabs - Activity, Groups, Blogs, Forums, Profiles | |
| -------------------------------------------------------------------------*/ | |
| #sitewide-notice p { | |
| font-weight: normal; | |
| margin-top: 3px; | |
| text-decoration: none; | |
| background-color: #ffd; | |
| border: 1px solid #cb2; | |
| color: #440; | |
| } | |
| #buddypress { | |
| div#item-header { | |
| overflow: hidden; | |
| div#item-header-content { | |
| float: left; | |
| margin-left: 0; | |
| } | |
| h2 { | |
| line-height: 120%; | |
| margin: 0 0 15px 0; | |
| a { | |
| color: #777; | |
| text-decoration: none; | |
| } | |
| } | |
| img.avatar { | |
| float: left; | |
| margin: 0 15px 19px 0; | |
| } | |
| h2 { | |
| margin-bottom: 5px; | |
| span.highlight { | |
| font-size: 60%; | |
| font-weight: normal; | |
| line-height: 170%; | |
| vertical-align: middle; | |
| display: inline-block; | |
| span { | |
| background: #a1dcfa; | |
| color: #fff; | |
| cursor: pointer; | |
| font-weight: bold; | |
| font-size: 80%; | |
| margin-bottom: 2px; | |
| padding: 1px 4px; | |
| position: relative; | |
| right: -2px; | |
| top: -2px; | |
| vertical-align: middle; | |
| } | |
| } | |
| } | |
| div { | |
| &#item-meta { | |
| font-size: 80%; | |
| color: #aaa; | |
| overflow: hidden; | |
| margin: 15px 0 5px 0; | |
| padding-bottom: 10px; | |
| } | |
| &#item-actions { | |
| float: right; | |
| margin: 0 0 15px 15px; | |
| text-align: right; | |
| width: 20%; | |
| h3 { | |
| margin: 0 0 5px 0; | |
| } | |
| } | |
| } | |
| ul { | |
| margin-bottom: 15px; | |
| overflow: hidden; | |
| h5, span, hr { | |
| display: none; | |
| } | |
| li { | |
| float: right; | |
| list-style: none; | |
| } | |
| img.avatar, &.avatars img.avatar { | |
| height: 30px; | |
| margin: 2px; | |
| width: 30px; | |
| } | |
| } | |
| div.generic-button, a.button { | |
| float: left; | |
| margin: 10px 10px 0 0; | |
| } | |
| div#message.info { | |
| line-height: 80%; | |
| } | |
| } | |
| ul.item-list { | |
| border-top: 1px solid #eaeaea; | |
| width: 100%; | |
| list-style: none; | |
| clear: both; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| } | |
| body.activity-permalink #buddypress ul.item-list { | |
| border: none; | |
| li.activity-item { | |
| border: none; | |
| } | |
| } | |
| #buddypress { | |
| ul { | |
| &.item-list li { | |
| border-bottom: 1px solid #eaeaea; | |
| padding: 15px 0; | |
| margin: 0; | |
| position: relative; | |
| list-style: none; | |
| } | |
| &.single-line li { | |
| border: none; | |
| } | |
| &.item-list li { | |
| img.avatar { | |
| float: left; | |
| margin: 0 10px 0 0; | |
| } | |
| div.item-title, h4 { | |
| font-weight: normal; | |
| font-size: 90%; | |
| margin: 0; | |
| width: 75%; | |
| } | |
| div { | |
| &.item-title span { | |
| color: #999; | |
| font-size: 80%; | |
| } | |
| &.item-desc { | |
| color: #888; | |
| font-size: 80%; | |
| margin: 10px 0 0 60px; | |
| width: 50%; | |
| } | |
| &.action { | |
| position: absolute; | |
| top: 15px; | |
| right: 0; | |
| text-align: right; | |
| } | |
| &.meta { | |
| color: #888; | |
| font-size: 80%; | |
| margin-top: 10px; | |
| } | |
| } | |
| h5 span.small { | |
| float: right; | |
| font-size: 80%; | |
| font-weight: normal; | |
| } | |
| } | |
| } | |
| div { | |
| &.item-list-tabs { | |
| background: transparent; | |
| clear: left; | |
| overflow: hidden; | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| li { | |
| float: left; | |
| margin: 0; | |
| list-style: none; | |
| } | |
| } | |
| &#subnav ul li { | |
| margin-top: 0; | |
| } | |
| ul li.last { | |
| float: right; | |
| margin: 7px 0 0; | |
| } | |
| &#subnav ul li.last { | |
| margin-top: 4px; | |
| } | |
| ul li { | |
| &.last select { | |
| max-width: 175px; | |
| } | |
| a, span { | |
| display: block; | |
| padding: 5px 10px; | |
| text-decoration: none; | |
| } | |
| a span { | |
| background: #eee; | |
| border-radius: 50%; | |
| border: 1px solid #ccc; | |
| color: #999; | |
| display: inline; | |
| font-size: 70%; | |
| margin-left: 2px; | |
| padding: 3px 6px; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| &.selected a, &.current a { | |
| background-color: #eee; | |
| color: #555; | |
| opacity: .8; | |
| font-weight: bold; | |
| } | |
| &.selected a span, &.current a span, a:hover span { | |
| background-color: #eee; | |
| } | |
| &.selected a span, &.current a span { | |
| background-color: #fff; | |
| } | |
| } | |
| } | |
| &#item-nav ul li.loading a { | |
| background-position: 88% 50%; | |
| } | |
| &.item-list-tabs { | |
| &#object-nav { | |
| margin-top: 0; | |
| } | |
| &#subnav { | |
| background: transparent; | |
| margin: 10px 0 10px; | |
| overflow: hidden; | |
| } | |
| } | |
| } | |
| #admins-list li, #mods-list li, #members-list li { | |
| overflow: auto; | |
| list-style: none; | |
| } | |
| table#message-threads tr.unread td { | |
| background: #fff9db; | |
| border-top: 1px solid #ffe8c4; | |
| border-bottom: 1px solid #ffe8c4; | |
| font-weight: bold; | |
| } | |
| li span.unread-count, tr.unread span.unread-count { | |
| background: #dd0000; | |
| color: #fff; | |
| font-weight: bold; | |
| padding: 2px 8px; | |
| } | |
| div { | |
| &.item-list-tabs ul li a span.unread-count { | |
| padding: 1px 6px; | |
| color: #fff; | |
| } | |
| &.messages-options-nav { | |
| background: #eee; | |
| font-size: 80%; | |
| margin: 0; | |
| padding: 5px 15px; | |
| text-align: right; | |
| } | |
| &#message-thread { | |
| div { | |
| &.message-box { | |
| margin: 0; | |
| padding: 15px; | |
| } | |
| &.alt { | |
| background: #f4f4f4; | |
| } | |
| } | |
| p#message-recipients { | |
| margin: 10px 0 20px 0; | |
| } | |
| img.avatar { | |
| float: left; | |
| margin: 0 10px 0 0; | |
| vertical-align: middle; | |
| } | |
| strong { | |
| font-size: 100%; | |
| margin: 0; | |
| a { | |
| text-decoration: none; | |
| } | |
| span.activity { | |
| margin-top: 4px; | |
| } | |
| } | |
| div { | |
| &.message-metadata { | |
| overflow: hidden; | |
| } | |
| &.message-content { | |
| margin-left: 45px; | |
| } | |
| &.message-options { | |
| text-align: right; | |
| } | |
| } | |
| } | |
| } | |
| #message-threads img.avatar { | |
| max-width: none; | |
| } | |
| div { | |
| &.message-search { | |
| float: right; | |
| margin: 0 20px; | |
| } | |
| &.profile h4 { | |
| margin-bottom: auto; | |
| margin-top: 15px; | |
| } | |
| } | |
| #profile-edit-form ul.button-nav { | |
| margin-top: 15px; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.9 - Private Messaging Threads | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 3.10 - Extended Profiles | |
| --------------------------------------------------------------*/ | |
| body.no-js #buddypress { | |
| .field-visibility-settings-toggle, .field-visibility-settings-close { | |
| display: none; | |
| } | |
| } | |
| #buddypress .field-visibility-settings { | |
| display: none; | |
| margin-top: 10px; | |
| } | |
| body.no-js #buddypress .field-visibility-settings { | |
| display: block; | |
| } | |
| #buddypress { | |
| .current-visibility-level { | |
| font-weight: bold; | |
| font-style: normal; | |
| } | |
| .field-visibility-settings, .field-visibility-settings-toggle, .field-visibility-settings-notoggle { | |
| color: #888; | |
| } | |
| .field-visibility-settings-toggle a, .field-visibility-settings a { | |
| font-size: 80%; | |
| } | |
| } | |
| body.register #buddypress div.page ul { | |
| list-style: none; | |
| } | |
| #buddypress { | |
| .standard-form .field-visibility-settings label { | |
| margin: 0; | |
| font-weight: normal; | |
| } | |
| .field-visibility-settings legend, .field-visibility-settings-toggle { | |
| font-style: italic; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 3.11 - Widgets | |
| --------------------------------------------------------------*/ | |
| .widget.buddypress { | |
| div.item-avatar img.avatar { | |
| float: left; | |
| margin: 0 10px 15px 0; | |
| } | |
| span.activity { | |
| display: inline-block; | |
| font-size: 80%; | |
| opacity: 0.8; | |
| padding: 0; | |
| } | |
| div { | |
| &.item-options { | |
| font-size: 90%; | |
| margin: 0 0 1em 0; | |
| padding: 1em 0; | |
| } | |
| &.item { | |
| margin: 0 0 1em 0; | |
| } | |
| &.item-meta, &.item-content { | |
| font-size: 11px; | |
| margin-left: 38px; | |
| } | |
| } | |
| ul.item-list img.avatar { | |
| height: 20px; | |
| margin-right: 10px; | |
| width: 20px; | |
| } | |
| div { | |
| &.item-avatar img { | |
| height: 40px; | |
| margin: 1px; | |
| width: 40px; | |
| } | |
| &.avatar-block { | |
| overflow: hidden; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 4.0 - Media Queries | |
| --------------------------------------------------------------*/ | |
| /*-------------------------------------------------------------- | |
| 4.1 - Smartphones - landscape | |
| --------------------------------------------------------------*/ | |
| @media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) { | |
| -webkit-text-size-adjust: none; | |
| } | |
| @media only screen and (max-width: 480px) { | |
| #buddypress div.dir-search { | |
| float: right; | |
| margin-top: -50px; | |
| text-align: right; | |
| input[type="text"] { | |
| margin-bottom: 1em; | |
| width: 50%; | |
| } | |
| } | |
| a.bp-title-button { | |
| margin-left: 10px; | |
| } | |
| #buddypress form.standard-form .main-column { | |
| div.action { | |
| position: relative; | |
| margin-bottom: 1em; | |
| } | |
| ul#friend-list h4 { | |
| width: 100%; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 4.2 - Smartphones - portrait | |
| --------------------------------------------------------------*/ | |
| @media only screen and (max-width: 320px) { | |
| #buddypress { | |
| div.dir-search { | |
| clear: left; | |
| float: left; | |
| margin-top: 0; | |
| text-align: left; | |
| } | |
| li#groups-order-select { | |
| clear: left; | |
| float: left; | |
| } | |
| ul.item-list li div { | |
| &.action { | |
| clear: left; | |
| float: left; | |
| margin-top: 0; | |
| margin-left: 70px; | |
| position: relative; | |
| top: 0; | |
| right: 0; | |
| text-align: left; | |
| } | |
| &.item-desc { | |
| clear: left; | |
| float: left; | |
| margin: 10px 0 0; | |
| width: auto; | |
| } | |
| } | |
| li div.item { | |
| margin-left: 70px; | |
| width: auto; | |
| } | |
| ul.item-list li div.meta { | |
| margin-top: 0; | |
| } | |
| .item-desc p { | |
| margin: 0 0 10px; | |
| } | |
| div.pagination .pag-count { | |
| margin-left: 0; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| 4.2 - Smartphones - smaller screen sizes | |
| --------------------------------------------------------------*/ | |
| @media only screen and (max-width: 240px) { | |
| #buddypress { | |
| div.dir-search { | |
| float: left; | |
| margin: 0; | |
| input[type="text"] { | |
| width: 50%; | |
| } | |
| } | |
| li#groups-order-select { | |
| float: left; | |
| } | |
| ul.item-list li { | |
| img.avatar { | |
| width: 30px; | |
| height: auto; | |
| } | |
| div.action { | |
| margin-left: 45px; | |
| } | |
| } | |
| li div.item { | |
| margin-left: 45px; | |
| } | |
| } | |
| h1 a.bp-title-button { | |
| clear: left; | |
| float: left; | |
| margin: 10px 0 20px; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment