From a716de5029921a6102f0b60b881251aab5a2e866 Mon Sep 17 00:00:00 2001 From: psychobunny Date: Tue, 4 Jun 2013 15:52:26 -0400 Subject: [PATCH] moved category and topic into their own less files. removed .caret-left I don't believe its being used. --- public/css/category.less | 214 ++++++++++++++++++++++ public/css/nodebb.less | 5 +- public/css/style.less | 385 +-------------------------------------- public/css/topic.less | 165 +++++++++++++++++ 4 files changed, 386 insertions(+), 383 deletions(-) create mode 100644 public/css/category.less create mode 100644 public/css/topic.less diff --git a/public/css/category.less b/public/css/category.less new file mode 100644 index 0000000000..17ede00df7 --- /dev/null +++ b/public/css/category.less @@ -0,0 +1,214 @@ + +.category { + a { + li { + list-style: none; + //border-bottom: 1px solid #eee; + margin-bottom: 10px; + padding-bottom: 10px; + + &.deleted { + -moz-opacity: 0.30; + opacity: 0.30; + } + } + + &:last-child li { + border-bottom: 0; + } + + color: #333; + &:hover { + color: #333 + } + } + + ul { + margin-left: 0; + } + + .thread-rating { + color: #444; + text-align: center; + margin-top: 7px; + + span { + display: inline-block; margin-left: 5px; + i { + padding-left: 2.4px; + } + + + @media (max-width: 1200px) + { + margin-left: -1px; + } + } + + + } + + .topic-row { + border-radius: 5px; + padding-left: 20px; + + small { + vertical-align: 2px; + strong { + color: #666; + } + color: #999; + font-size: 14px; + } + + h3 { + padding: 0; + margin: 0; + margin-top: 4px; + color: rgb(0, 136, 204); + line-height: 25px; + + .topic-title { + width: 50%; + display: inline-block; + font-size: 20px; + white-space: nowrap; + text-overflow:ellipsis; + overflow: hidden; + + + .badge { + margin-right: 6px; + } + + @media (max-width: 979px) + { + width: 100%; + } + } + } + + @media (max-width: 979px) + { + width: 100%; + margin-left: 0px; + } + + } + + .latest-post { + float: right; + padding-top: 2px; + margin-right: 0px; + width: 40%; + + .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: 32px; + } + span { + display: block; + float: left; + width: 70%; + margin-left: 10px; + overflow: hidden; + height: 16px; + margin-top: -10px; + color: #666; + } + } + } + + .recent-replies { + overflow-y: auto; + overflow-x: hidden; + + ul { + width: 100%; + height: 50px; + line-height: 16px; + margin-left: 1px; + padding: 5px; + + li { + line-height: 16px; + img { + display: block; + float: left; + } + p { + display: block; + float: left; + width: 70%; + margin-left: 10px; + overflow: hidden; + height: 32px; + } + span { + display: block; + float: left; + width: 70%; + margin-left: 10px; + overflow: hidden; + height: 16px; + margin-top: -10px; + color: #666; + } + } + } + } + + + + .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; + + } + } + + + +} + + + + diff --git a/public/css/nodebb.less b/public/css/nodebb.less index 232b362f19..c9423a17b8 100644 --- a/public/css/nodebb.less +++ b/public/css/nodebb.less @@ -1 +1,4 @@ -@import "style"; \ No newline at end of file +@import "style"; + +@import "topic"; +@import "category"; diff --git a/public/css/style.less b/public/css/style.less index ea293b2b41..4ee5ea8583 100644 --- a/public/css/style.less +++ b/public/css/style.less @@ -1,10 +1,3 @@ -.caret-left { - border-left: 0; - border-right: 4px solid black; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; -} - .no-select { -webkit-touch-callout: none; -webkit-user-select: none; @@ -26,7 +19,7 @@ } body { - /*background: #fdfdfd;*/ + /*background: #fdfdfd;*/ // port to default theme when it is implemented. -webkit-transition: margin-bottom 250ms ease; -moz-transition: margin-bottom 250ms ease; -ms-transition: margin-bottom 250ms ease; @@ -128,379 +121,7 @@ footer.footer { -.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; - - &.deleted { - -moz-opacity: 0.30; - opacity: 0.30; - } - } - - &:last-child li { - border-bottom: 0; - } - - color: #333; - &:hover { - color: #333 - } - } - - ul { - margin-left: 0; - } - - .thread-rating { - color: #444; - text-align: center; - margin-top: 7px; - - span { - display: inline-block; margin-left: 5px; - i { - padding-left: 2.4px; - } - - - @media (max-width: 1200px) - { - margin-left: -1px; - } - } - - - } - - .topic-row { - border-radius: 5px; - padding-left: 20px; - - small { - vertical-align: 2px; - strong { - color: #666; - } - color: #999; - font-size: 14px; - } - - h3 { - padding: 0; - margin: 0; - margin-top: 4px; - color: rgb(0, 136, 204); - line-height: 25px; - - .topic-title { - width: 50%; - display: inline-block; - font-size: 20px; - white-space: nowrap; - text-overflow:ellipsis; - overflow: hidden; - - - .badge { - margin-right: 6px; - } - - @media (max-width: 979px) - { - width: 100%; - } - } - } - - @media (max-width: 979px) - { - width: 100%; - margin-left: 0px; - } - - } - - .latest-post { - float: right; - padding-top: 2px; - margin-right: 0px; - width: 40%; - - .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: 32px; - } - span { - display: block; - float: left; - width: 70%; - margin-left: 10px; - overflow: hidden; - height: 16px; - margin-top: -10px; - color: #666; - } - } - } - - .recent-replies { - overflow-y: auto; - overflow-x: hidden; - - ul { - width: 100%; - height: 50px; - line-height: 16px; - margin-left: 1px; - padding: 5px; - - li { - line-height: 16px; - img { - display: block; - float: left; - } - p { - display: block; - float: left; - width: 70%; - margin-left: 10px; - overflow: hidden; - height: 32px; - } - span { - display: block; - float: left; - width: 70%; - margin-left: 10px; - overflow: hidden; - height: 16px; - margin-top: -10px; - color: #666; - } - } - } - } -} - - - -.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; - margin-right: 5px; - - 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; - } - - - .main-post { - h3 { - margin: 0; - - .topic-title { - width: auto; - white-space: nowrap; - text-overflow:ellipsis; - overflow: hidden; - margin: 0; - padding: 0; - padding-top: 5px; - margin-bottom: -5px; - padding-bottom: 5px; - } - } - - .main-avatar { - color: white; - position: relative; - float: left; - margin-right: 15px; - margin-bottom: 0px; - padding-bottom: 0px; - text-align: center; - - @media (max-width: 767px) { - display: none; - } - } - - .main-avatar:hover .hover-overlay { - opacity: 0.75; - } - - .hover-overlay { - margin: 5px; - position: absolute; - bottom: 0px; - height: 35px; - padding-top: 2px; - width: 80px; - font-size: 13px; - line-height: 16px; - background: #000; - opacity: 0; - transition: opacity 0.3s; - } - - .post-content { - min-height: 80px; - } - hr { - margin-top: 0; - margin-right: 10px; - margin-bottom: 0; - } - .post-block { - .post-buttons { - div { - border: 0; - } - } - } - .favourite { - cursor: pointer; - } - .btn { - display: inline-block; - } - - .topic-buttons { - margin-top: 8px; - } - - } -} - -#user_label { +#user_label { //belongs in header.less img { border: 1px solid #454; margin-right: 8px; @@ -631,7 +252,7 @@ footer.footer { .category-row h4 { font-weight: 700; text-align: left; - /*color: #555;*/ + /*color: #555;*/ // NOTE: color for cat/topic header links should be grey in the default theme when we get around to it. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/public/css/topic.less b/public/css/topic.less new file mode 100644 index 0000000000..510fc3967a --- /dev/null +++ b/public/css/topic.less @@ -0,0 +1,165 @@ + +.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; + margin-right: 5px; + + 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; + } + + + .main-post { + h3 { + margin: 0; + + .topic-title { + width: auto; + white-space: nowrap; + text-overflow:ellipsis; + overflow: hidden; + margin: 0; + padding: 0; + padding-top: 5px; + margin-bottom: -5px; + padding-bottom: 5px; + } + } + + .main-avatar { + color: white; + position: relative; + float: left; + margin-right: 15px; + margin-bottom: 0px; + padding-bottom: 0px; + text-align: center; + + @media (max-width: 767px) { + display: none; + } + } + + .main-avatar:hover .hover-overlay { + opacity: 0.75; + } + + .hover-overlay { + margin: 5px; + position: absolute; + bottom: 0px; + height: 35px; + padding-top: 2px; + width: 80px; + font-size: 13px; + line-height: 16px; + background: #000; + opacity: 0; + transition: opacity 0.3s; + } + + .post-content { + min-height: 80px; + } + hr { + margin-top: 0; + margin-right: 10px; + margin-bottom: 0; + } + .post-block { + .post-buttons { + div { + border: 0; + } + } + } + .favourite { + cursor: pointer; + } + .btn { + display: inline-block; + } + + .topic-buttons { + margin-top: 8px; + } + + } +}