mirror of
https://github.com/discourse/discourse.git
synced 2024-12-01 10:44:50 +08:00
c937afc75e
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
554 lines
9.4 KiB
SCSS
554 lines
9.4 KiB
SCSS
// --------------------------------------------------
|
|
// Topic lists
|
|
// --------------------------------------------------
|
|
|
|
// List controls
|
|
// --------------------------------------------------
|
|
|
|
.list-controls {
|
|
margin: 10px -3px 5px -3px;
|
|
.category-breadcrumb.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
#create-topic {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-self: stretch;
|
|
align-items: center;
|
|
margin: 0 3px 10px 3px;
|
|
order: 10; // always last for consistent placement
|
|
}
|
|
}
|
|
|
|
.dropdown-select-box-header {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
.navigation-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
margin: 5px 0;
|
|
|
|
button {
|
|
margin: 0 3px;
|
|
|
|
&.select-kit-header {
|
|
display: flex;
|
|
height: 100%;
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-kit:not(.is-hidden) {
|
|
display: flex;
|
|
align-self: stretch;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.btn:not(.select-kit-header) {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.categories-admin-dropdown,
|
|
.tag-notifications-button {
|
|
order: 2; // after main nav
|
|
}
|
|
|
|
.category-navigation {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
.edit-category {
|
|
.d-icon {
|
|
margin: 0;
|
|
}
|
|
@media screen and (max-width: 374px) {
|
|
// Hide edit label on very tiny screens
|
|
.d-button-label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-pills {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
margin: 0 3px 5px 3px;
|
|
position: relative;
|
|
.navigation-toggle {
|
|
flex: 0 1 auto;
|
|
margin-bottom: 5px;
|
|
}
|
|
> li {
|
|
margin-right: 0;
|
|
font-size: $font-down-1;
|
|
border: 1px solid var(--primary-medium);
|
|
}
|
|
> li > a {
|
|
line-height: $line-height-large;
|
|
display: flex;
|
|
align-items: center;
|
|
.d-icon {
|
|
margin-left: 5px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.drop {
|
|
border: 1px solid var(--primary-low);
|
|
position: absolute;
|
|
z-index: z("dropdown") - 1;
|
|
background-color: var(--secondary);
|
|
padding: 0 10px 10px 10px;
|
|
width: 150px;
|
|
top: 100%;
|
|
margin: 0;
|
|
left: 0; // iOS6 alignment
|
|
li {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
margin-top: 5px;
|
|
padding-top: 10px;
|
|
a {
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-container .full-width {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Base list
|
|
// --------------------------------------------------
|
|
|
|
.topic-list {
|
|
.right {
|
|
margin-left: 55px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 7px 0;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.main-link {
|
|
line-height: $line-height-medium;
|
|
position: relative;
|
|
z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
|
|
a.title {
|
|
color: var(--primary);
|
|
padding: 0.5em 0 1.2em 0;
|
|
}
|
|
.topic-statuses {
|
|
a {
|
|
line-height: 0.8;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-notification,
|
|
.category-topic-link td.num .badge-notification {
|
|
position: relative;
|
|
display: inline-block;
|
|
top: -1px;
|
|
font-size: $font-0;
|
|
line-height: $line-height-small;
|
|
padding: 0.15em 0.4em 0.2em 0.4em;
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
&.new-topic::before {
|
|
margin-right: 0;
|
|
}
|
|
&.new-topic {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.category-topic-link td.num .badge-notification {
|
|
&.new-posts,
|
|
&.unread-posts {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.topic-item-stats {
|
|
position: relative;
|
|
margin-top: 0.25em;
|
|
z-index: z("base");
|
|
.category,
|
|
.num,
|
|
.last-poster {
|
|
float: left;
|
|
}
|
|
.category a {
|
|
max-width: 160px;
|
|
}
|
|
.num .fa,
|
|
a,
|
|
a:visited {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
}
|
|
|
|
.age {
|
|
white-space: nowrap;
|
|
a {
|
|
// let's make all ages dim on mobile so we're not
|
|
// overwhelming people with info about each topic
|
|
color: var(--primary-low-mid-or-secondary-high) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Category list
|
|
// --------------------------------------------------
|
|
.categories-list .category-list {
|
|
margin-bottom: 2em;
|
|
|
|
td {
|
|
padding: 12px 5px;
|
|
color: var(--primary-med-or-secondary-high);
|
|
vertical-align: top;
|
|
}
|
|
|
|
th {
|
|
padding: 10px 0 0;
|
|
}
|
|
|
|
td:first-of-type {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
tbody {
|
|
border-top: none;
|
|
.category {
|
|
border-left: 6px solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-list-item.category {
|
|
tr:first-of-type {
|
|
border: none;
|
|
}
|
|
// Allow percentage widths on table cells to include their padding
|
|
box-sizing: border-box;
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
.posts {
|
|
width: 10%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.age {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
// numbers get dimmer as they get colder
|
|
.coldmap {
|
|
&-high {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&-med {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&-low {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subcategory-list-item.category {
|
|
display: block;
|
|
width: calc(100% + 20px);
|
|
margin: 1.25em 10px 0;
|
|
border-bottom: none !important;
|
|
border-top: 1px solid var(--primary-low) !important;
|
|
&:last-of-type {
|
|
margin-top: 0;
|
|
margin-bottom: 1.25em;
|
|
border-bottom: 1px solid var(--primary-low) !important;
|
|
}
|
|
td:first-of-type {
|
|
padding: 12px 0px;
|
|
}
|
|
.category-logo.aspect-image {
|
|
display: none;
|
|
}
|
|
.subcategories {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
tr.category-topic-link {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
&:last-of-type {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.category-list-item,
|
|
.subcategory-list-item {
|
|
padding: 0 0 0 3px;
|
|
border-left: 6px solid;
|
|
|
|
h3,
|
|
h4 {
|
|
max-width: 100%;
|
|
padding: 0 0 0 10px;
|
|
.d-icon {
|
|
margin-right: 5px;
|
|
}
|
|
a[href] {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
h3 {
|
|
font-size: $font-up-2;
|
|
}
|
|
|
|
h4 {
|
|
font-size: $font-up-1;
|
|
}
|
|
|
|
.category-name {
|
|
max-width: 80vw;
|
|
}
|
|
|
|
.category-topic-link .main-link,
|
|
.subcategories-list td,
|
|
.category-description td {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.category-topic-link .main-link .age {
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.category-description td {
|
|
padding-top: 0;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.subcategories-list {
|
|
border-bottom: none;
|
|
td {
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
|
|
th .badge-category {
|
|
margin: 0;
|
|
}
|
|
|
|
.category-topic-link {
|
|
.num {
|
|
white-space: nowrap;
|
|
}
|
|
.topic-excerpt {
|
|
width: 110%;
|
|
}
|
|
}
|
|
|
|
.posters {
|
|
float: left;
|
|
}
|
|
> footer {
|
|
border-top: 1px solid var(--primary-low);
|
|
padding: 7px 10px;
|
|
figure {
|
|
float: left;
|
|
margin: 3px 7px 0 0;
|
|
font-weight: bold;
|
|
font-size: $font-down-1;
|
|
}
|
|
figcaption {
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
.btn {
|
|
float: right;
|
|
margin-left: 7px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-list-item {
|
|
padding: 0.5em 0 0.25em;
|
|
border-top: 1px solid var(--primary-low) !important;
|
|
border-bottom: 1px solid var(--primary-low) !important;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.category-box {
|
|
h3 {
|
|
margin: 0 0 0.5em 0;
|
|
}
|
|
}
|
|
|
|
.topic-list-bottom {
|
|
margin: 20px 0 0 0;
|
|
}
|
|
|
|
// Misc. stuff
|
|
// --------------------------------------------------
|
|
.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 var(--primary);
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent;
|
|
content: "";
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.fade.in {
|
|
opacity: 1;
|
|
}
|
|
|
|
ol.category-breadcrumb {
|
|
margin: 0 0 5px 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1 1 100%;
|
|
li.select-kit {
|
|
flex: 1 1 33%;
|
|
margin: 0 3px 5px 3px;
|
|
.select-kit-header .selected-name {
|
|
max-width: 80vw;
|
|
.badge-wrapper {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-lists {
|
|
h2 {
|
|
margin-left: 10px;
|
|
}
|
|
.topic-list {
|
|
padding-bottom: 10px;
|
|
}
|
|
.btn-default.pull-right {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.tags-admin-menu {
|
|
display: none;
|
|
}
|
|
|
|
.staff.tags-page #create-topic {
|
|
clear: right;
|
|
}
|
|
|
|
.topic-list-bottom h3 {
|
|
clear: both;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.category-logo.aspect-image {
|
|
display: block;
|
|
margin: 8px 0;
|
|
|
|
img {
|
|
width: auto;
|
|
max-width: 100%;
|
|
max-height: 150px;
|
|
}
|
|
}
|
|
|
|
@supports (--custom: property) {
|
|
.category-logo.aspect-image {
|
|
--max-height: 150px;
|
|
max-height: var(--max-height);
|
|
width: calc(var(--max-height) * var(--aspect-ratio));
|
|
max-width: 100%;
|
|
height: auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: inherit;
|
|
max-width: initial;
|
|
max-height: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
button.dismiss-read {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
// base defines extra padding for easier click/top of title field
|
|
// this is a bit too much for mobile
|
|
td .main-link {
|
|
width: 78%;
|
|
display: inline-block;
|
|
a.title {
|
|
padding: 5px 10px 5px 0;
|
|
word-wrap: break-word;
|
|
}
|
|
}
|
|
.topic-list {
|
|
.posts-map {
|
|
font-size: $font-up-1;
|
|
}
|
|
// so the topic excerpt is full width
|
|
// as the containing div is 80%
|
|
.topic-excerpt {
|
|
padding-right: 0;
|
|
width: 120%;
|
|
}
|
|
}
|
|
|
|
.category-list.with-topics .category-list-item .category-description {
|
|
display: none;
|
|
}
|
|
|
|
.category-list .category.muted a.category-title-link {
|
|
color: var(--primary-medium);
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.muted-categories-link {
|
|
margin-left: 0;
|
|
}
|