diff --git a/public/css/style.less b/public/css/style.less index 8a39505d37..843655f481 100644 --- a/public/css/style.less +++ b/public/css/style.less @@ -1,503 +1,536 @@ - -.caret-left { - border-left: 0; - border-right: 4px solid black; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; -} - - - -.pointer { - cursor: pointer; - *cursor: hand; -} - -.inline-block { - display: inline-block; - *display: inline; - zoom: 1; -} - -body { - background: #fdfdfd; - -webkit-transition: margin-bottom 250ms ease; - -moz-transition: margin-bottom 250ms ease; - -ms-transition: margin-bottom 250ms ease; - -o-transition: margin-bottom 250ms ease; - transition: margin-bottom 250ms ease; - - &.composing { - margin-bottom: 350px; - } -} - -.none { - display: none !important; -} - -.block, .show { - display: block; -} -.badge { - vertical-align: 17%; -} -.nav .badge { - vertical-align: 10%; -} - -@media (min-width: 979px) -{ body { - padding-top: 70px; - } -} - -#notification_window { - position: absolute; - right: 20px; - top: 80px; - width: 300px; - height: 0px; -} - -.toaster-alert { - - cursor: pointer; -} - -footer.footer { - color: #555; - text-align: center; - - a { - color: #222; - } -} - -#post_window { - width: 100%; - position: fixed; - height: 350px; - left: 0px; - bottom: 0px; - background: white; - z-index: 1500; - - input { - width: 100%; - height: 30px; - padding: 5px; - } - - textarea { - width: 100%; - background: #222; - height: 220px; - resize: none; - border-radius: 0; - border: 1px solid #111; - font-size: 16px; - color: #bebebe; - outline: 0; - - &:focus { - outline: 0; - border:none !important; - box-shadow:none !important; - } - } - - .post-title-container { - opacity: 0.8; - height: 50px; - } - - .post-content-container { - opacity: 0.8; - background: #000; - width: 100%; - height: 300px; - } -} - - - - - -.category { - .block { - strong { - margin-bottom: 10px; - display: block - - } - border: 1px solid #eee; - background: white; - padding: 10px; - .img-polaroid { - margin-top: 2px; - - } - } - - li { - list-style: none; - border-bottom: 1px solid #eee; - margin-bottom: 10px; - padding-bottom: 10px; - } -} - - -@media (max-width: 767px) -{ - .topic-row-icon { - border-radius: 5px 5px 0 0; - } -} - -.top-posters { - float: right; - padding-top: 2px; - margin-right: 30px; - - div.latest-post { - width: 100%; - height: 50px; - line-height: 16px; - img { - display: block; - float: left; - } - p { - display: block; - float: left; - width: 400px; - margin-left: 10px; - overflow: hidden; - height: 50px; - } - } - .latest-post { - margin-left: 1px; - border: 1px solid rgba(0,0,0,0.05); - padding: 5px; - } -} - -.topic-row { - width: 100%; - padding-left: 20px; -} - -.topic-row h3 { - padding: 0; - margin: 0; - margin-top: 4px; - line-height: 30px; -} - -.topic-row h3 small { - vertical-align: 3px; -} - -.post-container { - list-style-type: none; - padding: 0; - margin: 0; - clear: both; - - .profile-image-block { - background: white; - display: inline-block; - text-align: center; - font-size: 12px; - } - - li { - padding-bottom: 15px; - - &.deleted { - -moz-opacity: 0.30; - opacity: 0.30; - } - } - - .profile-block, .post-block { - border: 1px solid #f0f0f0; - border-radius: 5px; - - padding: 10px; - } - - img { - margin: 5px; - } - - .profile-block { - background: #fafafa; - margin-right: -11px; - margin-left: -11px; - margin-bottom: -11px; - margin-top: 15px; - border-radius: 0 0 5px 5px; - font-size: 10px; - line-height: 18px; - padding: 5px; - padding-left: 10px; - - img.hidden-desktop { - max-width: 10px; - max-height: 10px; - } - } - .post-content { - min-height: 50px; - padding: 2px 5px 0 5px; - word-wrap: break-word; - } - - .post-block { - .post-buttons { - font-size: 12px; - float: right; - - div { - display: inline-block; - padding-left: 15px; - padding-right: 15px; - border-left: 1px solid #f0f0f0; - cursor: pointer; - - &:last-child { - padding-right: 5px; - } - } - - .icon-star { - //theme this to make it yellow eventually - } - } - background: #fff; - } - - &.deleted { - -moz-opacity: 0.30; - opacity: 0.30; - } -} - -#user_label { - img { - border: 1px solid #454; - margin-right: 8px; - margin-top: -2px; - float: left; - width:24px; - height:24px; - } - - span { - font-size: 14px; - font-weight: 400; - color: #ded; - } -} - -#reply_title { - font-size: 17px; - padding-top: 14px; - font-weight: 600; -} - -.alt-logins { - margin: 0; - padding: 0; - - li { - vertical-align: top; - background: transparent; - display: none; - .pointer; - - &.google { - width: 32px; - height: 32px; - background-image: url('../images/google_login.png'); - } - - &.twitter { - width: 32px; - height: 32px; - background-image: url('../images/twitter_login.png'); - } - - &.facebook { - width: 32px; - height: 32px; - background-image: url('../images/facebook_login.png'); - } - - &.active { - .inline-block; - } - } -} - - -#thread_active_users { - float: right; - color: rgb(153,153,153); - -} - -#thread_active_users strong { - color: rgb(100,100,100); - font-weight: 600; - cursor: pointer; -} - -.account-username-box{ - border-bottom:1px solid #e3e3e3; - margin-bottom:10px; -} - -.account-username{ - font-size:20px; - font-weight:bold; -} - -.account-picture-block{ - display:inline-block; - margin-right:20px; - vertical-align:top; -} - -.user-profile-picture { - width:128px; - height:128px; - margin-bottom:10px; -} - -.user-8080-picture { - width:80px; - height:80px; -} - -.user-picture-label { - font-size:20px; -} - -.account-bio-block{ - display:inline-block; - vertical-align:top; -} - -.account-bio-label{ - display:inline-block; - width:100px; -} - - -.category-icon { - width: 100%; - height: 90px; - text-align: center; - border-radius: 5px; - margin: 0; - padding-top:25px; - cursor: pointer; - margin-bottom: 20px; -} -.category-row h4 { - font-weight: 700; - text-align: center; - color: #555; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.category-row a { - text-decoration: none; - border: 0; -} - -.category-purple { - @color: #ab1290; - background: @color; - color: white; - - &:hover { - background: lighten(@color, 10%); - } -} - -.category-darkblue { - @color: #004C66; - background: @color; - color: white; - - &:hover { - background: lighten(@color, 10%); - } -} - -.category-blue { - @color: #0059B2; - background: @color; - color: white; - - &:hover { - background: lighten(@color, 10%); - } -} - -.category-darkgreen { - @color: #004000; - background: @color; - color: white; - - &:hover { - background: lighten(@color, 10%); - } -} -.category-orange { - @color: #FF7A4D; - color: white; - background: @color; - - &:hover { - background: lighten(@color, 10%); - } -} - -.category-list { - li { - .inline-block; - .pointer; - padding: 0.5em 0; - text-align: center; - margin: 0.5em; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding: 0.5em; - } -} - -.hero-unit { - background: #56BCDA; - color: white; - padding: 30px; -} - -.users-box{ - display:inline-block; - margin-right:20px; - margin-top: 20px; - text-align:center; -} - -a:hover { - text-decoration:none; -} + +.caret-left { + border-left: 0; + border-right: 4px solid black; + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + + + +.pointer { + cursor: pointer; + *cursor: hand; +} + +.inline-block { + display: inline-block; + *display: inline; + zoom: 1; +} + +body { + background: #fdfdfd; + -webkit-transition: margin-bottom 250ms ease; + -moz-transition: margin-bottom 250ms ease; + -ms-transition: margin-bottom 250ms ease; + -o-transition: margin-bottom 250ms ease; + transition: margin-bottom 250ms ease; + + &.composing { + margin-bottom: 350px; + } +} + +.none { + display: none !important; +} + +.block, .show { + display: block; +} +.badge { + vertical-align: 17%; +} +.nav .badge { + vertical-align: 10%; +} + +@media (min-width: 979px) +{ body { + padding-top: 70px; + } +} + +#notification_window { + position: absolute; + right: 20px; + top: 80px; + width: 300px; + height: 0px; +} + +.toaster-alert { + + cursor: pointer; +} + +footer.footer { + color: #555; + text-align: center; + + a { + color: #222; + } +} + +#post_window { + width: 100%; + position: fixed; + height: 350px; + left: 0px; + bottom: 0px; + background: white; + z-index: 1500; + + input { + width: 100%; + height: 30px; + padding: 5px; + } + + textarea { + width: 100%; + background: #222; + height: 220px; + resize: none; + border-radius: 0; + border: 1px solid #111; + font-size: 16px; + color: #bebebe; + outline: 0; + + &:focus { + outline: 0; + border:none !important; + box-shadow:none !important; + } + } + + .post-title-container { + opacity: 0.8; + height: 50px; + } + + .post-content-container { + opacity: 0.8; + background: #000; + width: 100%; + height: 300px; + } +} + + + +.sidebar-block { + .block-header { + padding: 8px; + padding-left: 13px; + display: block; + background: rgb(245,245,245); + color: #676; + font-weight: 400; + font-size: 14px; + border-radius: 5px 5px 0 0; + border-bottom: 1px solid #ddd; + + } + .block-content { + padding: 10px; + } + + border-radius: 5px; + background: white; + padding: 0; + margin-bottom: 20px; + + .img-polaroid { + margin-top: 2px; + + } +} + +.category { + a { + li { + list-style: none; + border-bottom: 1px solid #eee; + margin-bottom: 10px; + padding-bottom: 10px; + + } + + &:last-child li { + border-bottom: 0; + } + + color: #333; + &:hover { + color: #333 + } + } + + @media (max-width: 767px) + { + + } + +} + +.category { + ul { + margin-left: 0; + } +} +.topic-row { + border-radius: 5px; +} + +.latest-post { + float: right; + padding-top: 2px; + margin-right: 30px; + width: 50%; + + .pull-right { + width: 100%; + height: 50px; + line-height: 16px; + margin-left: 1px; + padding: 5px; + border-left: 1px solid #bbb; + padding-left: 20px; + + img { + display: block; + float: left; + } + p { + display: block; + float: left; + width: 70%; + margin-left: 10px; + overflow: hidden; + height: 50px; + } + } +} + +.topic-row { + width: 100%; + padding-left: 20px; + + h3 { + padding: 0; + margin: 0; + margin-top: 4px; + line-height: 30px; + color: rgb(0, 136, 204); + + small { + vertical-align: 3px; + } + } +} + + +.post-container { + list-style-type: none; + padding: 0; + margin: 0; + clear: both; + + .profile-image-block { + background: white; + display: inline-block; + text-align: center; + font-size: 12px; + } + + li { + padding-bottom: 15px; + + &.deleted { + -moz-opacity: 0.30; + opacity: 0.30; + } + } + + .profile-block, .post-block { + border: 1px solid #f0f0f0; + border-radius: 5px; + + padding: 10px; + } + + img { + margin: 5px; + } + + .profile-block { + background: #fafafa; + margin-right: -11px; + margin-left: -11px; + margin-bottom: -11px; + margin-top: 15px; + border-radius: 0 0 5px 5px; + font-size: 10px; + line-height: 18px; + padding: 5px; + padding-left: 10px; + + img.hidden-desktop { + max-width: 10px; + max-height: 10px; + } + } + .post-content { + min-height: 50px; + padding: 2px 5px 0 5px; + word-wrap: break-word; + } + + .post-block { + .post-buttons { + font-size: 12px; + float: right; + + div { + display: inline-block; + padding-left: 15px; + padding-right: 15px; + border-left: 1px solid #f0f0f0; + cursor: pointer; + + &:last-child { + padding-right: 5px; + } + } + + .icon-star { + //theme this to make it yellow eventually + } + } + background: #fff; + } + + &.deleted { + -moz-opacity: 0.30; + opacity: 0.30; + } +} + +#user_label { + img { + border: 1px solid #454; + margin-right: 8px; + margin-top: -2px; + float: left; + width:24px; + height:24px; + } + + span { + font-size: 14px; + font-weight: 400; + color: #ded; + } +} + +#reply_title { + font-size: 17px; + padding-top: 14px; + font-weight: 600; +} + +.alt-logins { + margin: 0; + padding: 0; + + li { + vertical-align: top; + background: transparent; + display: none; + .pointer; + + &.google { + width: 32px; + height: 32px; + background-image: url('../images/google_login.png'); + } + + &.twitter { + width: 32px; + height: 32px; + background-image: url('../images/twitter_login.png'); + } + + &.facebook { + width: 32px; + height: 32px; + background-image: url('../images/facebook_login.png'); + } + + &.active { + .inline-block; + } + } +} + + +#thread_active_users { + float: right; + color: rgb(153,153,153); + +} + +#thread_active_users strong { + color: rgb(100,100,100); + font-weight: 600; + cursor: pointer; +} + +.account-username-box{ + border-bottom:1px solid #e3e3e3; + margin-bottom:10px; +} + +.account-username{ + font-size:20px; + font-weight:bold; +} + +.account-picture-block{ + display:inline-block; + margin-right:20px; + vertical-align:top; +} + +.user-profile-picture { + width:128px; + height:128px; + margin-bottom:10px; +} + +.user-8080-picture { + width:80px; + height:80px; +} + +.user-picture-label { + font-size:20px; +} + +.account-bio-block{ + display:inline-block; + vertical-align:top; +} + +.account-bio-label{ + display:inline-block; + width:100px; +} + + +.category-icon { + width: 100%; + height: 90px; + text-align: center; + border-radius: 5px; + margin: 0; + padding-top:25px; + cursor: pointer; + margin-bottom: 20px; +} +.category-row h4 { + font-weight: 700; + text-align: center; + color: #555; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.category-row a { + text-decoration: none; + border: 0; +} + +.category-purple { + @color: #ab1290; + background: @color; + color: white; + + &:hover { + background: lighten(@color, 10%); + } +} + +.category-darkblue { + @color: #004C66; + background: @color; + color: white; + + &:hover { + background: lighten(@color, 10%); + } +} + +.category-blue { + @color: #0059B2; + background: @color; + color: white; + + &:hover { + background: lighten(@color, 10%); + } +} + +.category-darkgreen { + @color: #004000; + background: @color; + color: white; + + &:hover { + background: lighten(@color, 10%); + } +} +.category-orange { + @color: #FF7A4D; + color: white; + background: @color; + + &:hover { + background: lighten(@color, 10%); + } +} + +.category-list { + li { + .inline-block; + .pointer; + padding: 0.5em 0; + text-align: center; + margin: 0.5em; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding: 0.5em; + } +} + +.hero-unit { + background: #56BCDA; + color: white; + padding: 30px; +} + +.users-box{ + display:inline-block; + margin-right:20px; + margin-top: 20px; + text-align:center; +} + +a:hover { + text-decoration:none; +} diff --git a/public/templates/category.tpl b/public/templates/category.tpl index aa85ee9536..148c328788 100644 --- a/public/templates/category.tpl +++ b/public/templates/category.tpl @@ -6,34 +6,16 @@
-
-
- Top posters in {category_name} - - - - - - - - - - -
-
+
-
+
+
+
+ Recent Replies +
+
+ + + + + + + + + +
+
+
+
+ Top posters +
+
+ + + + + + + + + +
+
+