// -------------------------------------------------- // Topic lists // -------------------------------------------------- // List controls // -------------------------------------------------- .list-controls { margin: 5px; .nav { float: left; margin-right: 15px; li { margin-top: 5px; } } .btn { float: right; margin-left: 8px; } } #navigation-bar { .has-icon span:before { margin-right: 4px; font: 15px/0.9 "FontAwesome"; } .has-icon .starred:before { content: "\f005"; } .has-icon .unread:before { content: "\f02e"; } } .list-container .full-width { margin-left: 0; } // Base list // -------------------------------------------------- #topic-list { width: 100%; border-collapse: separate; border-spacing: 0; border-top: 1px solid scale-color($primary, $lightness: 90%);; border-bottom: 1px solid scale-color($primary, $lightness: 90%);; > tbody > tr { background-color: $secondary; &:nth-child(even) { background-color: darken($secondary, 4%); } &.archived a { opacity: 0.6; } &.category-description { td { color: #000; } } &.highlighted { background-color: scale-color($tertiary, $lightness: 75%); } } th, td { padding: 7px 5px; line-height: 1.25; text-align: left; vertical-align: middle; &:first-of-type { padding-left: 5px; } &:last-of-type { padding-right: 5px; } } th { color: $primary; font-weight: bold; font-size: 13px; &:first-of-type { @include border-radius-all(4px 0 0 0); } &:last-of-type { @include border-radius-all(0 4px 0 0); } } td { color: $primary; font-size: 14px; } .main-link { font-size: 16px; i.score { color: $success; cursor: pointer; } } .topic-excerpt { font-size: 14px; margin-top: 8px; color: scale-color($primary, $lightness: 50%); word-break: break-word; } .topic-statuses:empty { display: none; } .topic-status { margin-right: 4px; padding: 0; &:last-of-type { margin-right: 0; } } .badge-notification { position: relative; top: -1px; } .topic-item-stats { margin-top: 8px; } .topic-item-stats { .category, .num, .last-poster { float: left; margin-right: 14px; } .fa { color: scale-color($primary, $lightness: 50%); } .fa-heart{ position: relative; left: -1px; } .fa-comment{ position: relative; top: -1px; left: 1px; } } .num { text-align: center; a:not(.badge-posts) { color: inherit; } } .age { white-space: nowrap; } } // Category list // -------------------------------------------------- #topic-list.categories { td.latest { vertical-align: top; padding: 5px; } td.category { vertical-align: top; padding-top: 15px; padding-bottom: 15px; } .badge-category { display: inline-block; margin-top: 1px; } .category-description { margin-top: 8px; } .featured-users { @include mobile-portrait { margin-bottom: 10px; padding-top: 8px; clear: left; } @include not-mobile-portrait { float: right; } } .latest { @include mobile-portrait { width: 150px; } @include mobile-landscape { width: 270px; } @include tablet-landscape { width: 450px; } .featured-topic { margin: 8px 0; a.last-posted-at, a.last-posted-at:visited { color: scale-color($primary, $lightness: 50%); } } } .stats { @include not-tablet-landscape { display: none; } @include tablet-landscape { min-width: 80px; } } td.stats { .unit { font-size: 11px; } } table.categoryStats { td { padding: 2px; vertical-align: bottom; line-height: 17px; &.value { text-align: right; } &.unit { text-align: left; } } } } .category-list-item { margin-bottom: 10px; #topic-list tbody tr:nth-child(even) { background-color: $secondary; } .badge-category { float: left; margin: 1px 4px 0 0; } .posters { float: left; display: none; } > footer { border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-top: 0; padding: 7px 10px; background-color: scale-color($primary, $lightness: 95%); @include box-shadow(0 1px 3px rgba($primary, 0.22)); figure { float: left; margin: 3px 7px 0 0; color: scale-color($primary, $lightness: 10%); font-weight: bold; font-size: 12px; } figcaption { display: inline; font-weight: normal; } .btn { float: right; margin-left: 7px; } } } // Loading // -------------------------------------------------- // List .loading #topic-list { border: 0; @include box-shadow(none); tr { background-color: transparent; } } // Topics #topic-list-bottom { margin: 20px 12px 0 12px; } .topics-loading { width: 200px; margin: 0 auto; padding: 10px 0 10px 43px; color: $secondary; font-size: 18px; line-height: 25px; background: { color: #000; image: image-url("spinner_96_w.gif"); repeat: no-repeat; position: 10px 50%; size: 25px; }; @include border-radius-all(12px); } // Misc. stuff // -------------------------------------------------- .list-controls { .home { color: $primary; background-color: scale-color($primary, $lightness: 90%); } .badge-category { margin-top: 6px; padding: 4px 10px; display: inline-block; line-height: 24px; float: left; } .category-dropdown-button { padding: 4px 10px 3px 8px; border-left: 1px solid rgba(0, 0, 0, 0.15); font-size: 16px; width: 10px; text-align: center; &:hover { opacity: 0.8; } } clear: both; } #list-area { margin-bottom: 300px; .empty-topic-list { padding: 10px; } .unseen { background-color: transparent; padding: 0; border: 0; color: scale-color($danger, $lightness: 20%); font-size: 13px; cursor: default; } } #topic-list { .alert { margin-bottom: 0; font-size: 14px; } .spinner { margin-top: 40px; } } span.posted { display: inline-block; text-indent: -9999em; width: 15px; height: 15px; background: { image: image-url("posted.png"); }; } .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle { outline: 0; } .dropdown { position: relative; } .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; } .caret { display: inline-block; width: 0; height: 0; vertical-align: middle; border-top: 4px solid $primary; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; margin-left: 5px; } .dropdown-menu { position: relative; top: 100%; left: 0; z-index: 1000; display: none; float: left; width: 280px; padding: 4px 0; margin: 1px 0 0; list-style: none; background-color: $secondary; border: 1px solid scale-color($primary, $lightness: 90%);; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); background-clip: padding-box; margin-bottom: 20px; .title {font-weight: bold; display: block;} } .dropdown-menu a { display: block; padding: 3px 15px; clear: both; font-weight: normal; line-height: 18px; color: $primary; } .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: $secondary; text-decoration: none; background-color: $tertiary; } .open > .dropdown-menu { display: block; clear: both; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .fade.in { opacity: 1; } ol.category-breadcrumb { display: block; float: left; list-style: none; margin: 0 10px 0 0; padding: 0; li { float: left; margin-right: 5px; } } .category-dropdown-menu { overflow-x: hidden; overflow-y: scroll; position: absolute; border: 1px solid scale-color($primary, $lightness: 90%);; background-color: $secondary; width: 200px; height: 200px; padding: 8px 5px 0 7px; z-index: 100; margin-top: 31px; .badge-category { font-size: 13px; line-height: 26px; padding: 0 8px; float: none; } div { margin-bottom: 10px; } }