Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jordan Vidrine
|
7d9a8e6dec | ||
|
Jordan Vidrine
|
142a212ae9 | ||
|
Jordan Vidrine
|
c257071d56 | ||
|
Jordan Vidrine
|
249d30980b | ||
|
Jordan Vidrine
|
2f2d1b8607 | ||
|
Jordan Vidrine
|
4b188950e1 | ||
|
chapoi
|
6490217b4d |
+8
-63
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "Horizon Theme",
|
"name": "next-gen",
|
||||||
"authors": "Design Team",
|
"authors": "Design Team",
|
||||||
"about_url": "TODO: Put your theme's public repo or Meta topic URL here",
|
"about_url": "TODO: Put your theme's public repo or Meta topic URL here",
|
||||||
"license_url": "TODO: Put your theme's LICENSE URL here",
|
"license_url": "TODO: Put your theme's LICENSE URL here",
|
||||||
@@ -8,74 +8,19 @@
|
|||||||
"minimum_discourse_version": null,
|
"minimum_discourse_version": null,
|
||||||
"maximum_discourse_version": null,
|
"maximum_discourse_version": null,
|
||||||
"assets": {},
|
"assets": {},
|
||||||
"modifiers": {
|
"modifiers": {},
|
||||||
"svg_icons": ["fire"],
|
|
||||||
"serialize_topic_is_hot": true
|
|
||||||
},
|
|
||||||
"components": [
|
|
||||||
"https://github.com/discourse/discourse-sidebar-new-topic-button.git",
|
|
||||||
"https://github.com/discourse/discourse-full-width-component.git"
|
|
||||||
],
|
|
||||||
"color_schemes": {
|
"color_schemes": {
|
||||||
"Horizon": {
|
"next_gen": {
|
||||||
"primary": "1A1A1A",
|
"primary": "1A1A1A",
|
||||||
"secondary": "ffffff",
|
"secondary": "F5F8FF",
|
||||||
|
"header_background": "F5F8FF",
|
||||||
"tertiary": "595bca"
|
"tertiary": "595bca"
|
||||||
},
|
},
|
||||||
"Horizon Dark": {
|
"next_gen_dark": {
|
||||||
"primary": "ffffff",
|
"primary": "F5F8FF",
|
||||||
"secondary": "1A1A1A",
|
"secondary": "1A1A1A",
|
||||||
|
"header_background": "1A1A1A",
|
||||||
"tertiary": "595bca"
|
"tertiary": "595bca"
|
||||||
},
|
|
||||||
"Royal": {
|
|
||||||
"primary": "1A1A1A",
|
|
||||||
"secondary": "ffffff",
|
|
||||||
"tertiary": "4169e1"
|
|
||||||
},
|
|
||||||
"Royal Dark": {
|
|
||||||
"primary": "ffffff",
|
|
||||||
"secondary": "1A1A1A",
|
|
||||||
"tertiary": "4169e1"
|
|
||||||
},
|
|
||||||
"Clover": {
|
|
||||||
"primary": "1A1A1A",
|
|
||||||
"secondary": "ffffff",
|
|
||||||
"tertiary": "45a06e"
|
|
||||||
},
|
|
||||||
"Clover Dark": {
|
|
||||||
"primary": "ffffff",
|
|
||||||
"secondary": "1A1A1A",
|
|
||||||
"tertiary": "45a06e"
|
|
||||||
},
|
|
||||||
"Lily": {
|
|
||||||
"primary": "1A1A1A",
|
|
||||||
"secondary": "ffffff",
|
|
||||||
"tertiary": "cc338c"
|
|
||||||
},
|
|
||||||
"Lily Dark": {
|
|
||||||
"primary": "ffffff",
|
|
||||||
"secondary": "1A1A1A",
|
|
||||||
"tertiary": "cc338c"
|
|
||||||
},
|
|
||||||
"Violet": {
|
|
||||||
"primary": "1A1A1A",
|
|
||||||
"secondary": "ffffff",
|
|
||||||
"tertiary": "9b15de"
|
|
||||||
},
|
|
||||||
"Violet Dark": {
|
|
||||||
"primary": "ffffff",
|
|
||||||
"secondary": "1A1A1A",
|
|
||||||
"tertiary": "9b15de"
|
|
||||||
},
|
|
||||||
"Marigold": {
|
|
||||||
"primary": "1A1A1A",
|
|
||||||
"secondary": "ffffff",
|
|
||||||
"tertiary": "d3881f"
|
|
||||||
},
|
|
||||||
"Marigold Dark": {
|
|
||||||
"primary": "ffffff",
|
|
||||||
"secondary": "1A1A1A",
|
|
||||||
"tertiary": "d3881f"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
+9
-13
@@ -1,17 +1,13 @@
|
|||||||
@import "box-view";
|
@import "variables";
|
||||||
|
@import "header";
|
||||||
|
@import "sidebar";
|
||||||
|
@import "main";
|
||||||
|
@import "topic-cards";
|
||||||
|
@import "search-banner";
|
||||||
|
@import "nav-pills";
|
||||||
@import "buttons";
|
@import "buttons";
|
||||||
@import "chat";
|
@import "chat";
|
||||||
@import "color-choice";
|
|
||||||
@import "color-exploration";
|
|
||||||
@import "composer";
|
|
||||||
@import "header";
|
|
||||||
@import "hiddenstuff";
|
@import "hiddenstuff";
|
||||||
@import "main";
|
@import "topics";
|
||||||
@import "misc";
|
@import "misc";
|
||||||
@import "mobile-stuff";
|
@import "box-view";
|
||||||
@import "nav-pills";
|
|
||||||
@import "search-banner";
|
|
||||||
@import "sidebar";
|
|
||||||
@import "topic";
|
|
||||||
@import "topic-cards";
|
|
||||||
@import "variables";
|
|
||||||
|
|||||||
@@ -1,63 +0,0 @@
|
|||||||
.bulk-select-enabled {
|
|
||||||
.topic-list-header .topic-list-data.default {
|
|
||||||
position: sticky;
|
|
||||||
top: 10em;
|
|
||||||
}
|
|
||||||
.topic-author-avatar-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bulk-select.topic-list-data {
|
|
||||||
grid-area: bulk-select;
|
|
||||||
margin-left: -0.5em;
|
|
||||||
|
|
||||||
@media screen and (max-width: 576px) {
|
|
||||||
margin-top: 0;
|
|
||||||
label {
|
|
||||||
padding-block: 0.345em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-header {
|
|
||||||
tr {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-data {
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&:not(.default) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.default {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
.bulk-select,
|
|
||||||
span:not(.bulk-select-topics, .d-button-label) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bulk-select-topics {
|
|
||||||
position: absolute;
|
|
||||||
right: -1em;
|
|
||||||
@media screen and (max-width: 1048px) {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
background: var(--secondary);
|
|
||||||
border-radius: 0 0 0 var(--d-border-radius);
|
|
||||||
padding: 1em;
|
|
||||||
button {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
import CustomColorHtmlClass from "../components/custom-color-html-class";
|
|
||||||
import CustomUserPalette from "../components/custom-user-palette";
|
|
||||||
import ExperimentalScreen from "../components/experimental-screen";
|
|
||||||
|
|
||||||
export default apiInitializer("1.8.0", (api) => {
|
|
||||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
|
||||||
api.renderInOutlet("above-main-container", CustomColorHtmlClass);
|
|
||||||
api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
|
|
||||||
|
|
||||||
api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
|
|
||||||
return settings.enable_welcome_banner;
|
|
||||||
});
|
|
||||||
|
|
||||||
api.registerValueTransformer("site-setting-search-experience", () => {
|
|
||||||
return settings.search_experience;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import Component from "@glimmer/component";
|
||||||
|
import { apiInitializer } from "discourse/lib/api";
|
||||||
|
|
||||||
|
export default apiInitializer("1.8.0", (api) => {
|
||||||
|
api.renderInOutlet(
|
||||||
|
"above-main-container",
|
||||||
|
class ExperimentalScreen extends Component {
|
||||||
|
<template>
|
||||||
|
<ul class="experimental-screen">
|
||||||
|
<li class="experimental-screen__top-left"></li>
|
||||||
|
<li class="experimental-screen__top-right"></li>
|
||||||
|
<li class="experimental-screen__bottom-left"></li>
|
||||||
|
<li class="experimental-screen__bottom-right"></li>
|
||||||
|
<li class="experimental-screen__bottom-bar"></li>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { apiInitializer } from "discourse/lib/api";
|
|
||||||
|
|
||||||
export default apiInitializer("0.8.0", (api) => {
|
|
||||||
api.registerValueTransformer("bulk-select-in-nav-controls", () => {
|
|
||||||
return true;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import avatar from "discourse/helpers/avatar";
|
|
||||||
import formatDate from "discourse/helpers/format-date";
|
|
||||||
import { i18n } from "discourse-i18n";
|
|
||||||
import gt from "truth-helpers/helpers/gt";
|
|
||||||
|
|
||||||
export default class TopicActivityColumn extends Component {
|
|
||||||
get activityText() {
|
|
||||||
// this should handle any case where a topic was no bumped due to a reply/post
|
|
||||||
if (
|
|
||||||
moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
|
|
||||||
) {
|
|
||||||
return "user_updated";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.args.topic.posts_count > 1) {
|
|
||||||
return "user_replied";
|
|
||||||
} else if (this.args.topic.posts_count === 1) {
|
|
||||||
return "user_posted";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<span class="topic-activity">
|
|
||||||
<div class="topic-activity__user">
|
|
||||||
{{#if (gt @topic.replyCount 1)}}
|
|
||||||
{{avatar @topic.lastPosterUser imageSize="small"}}
|
|
||||||
<span
|
|
||||||
class="topic-activity__username"
|
|
||||||
>@{{@topic.last_poster_username}}</span>
|
|
||||||
{{else}}
|
|
||||||
{{avatar @topic.creator imageSize="small"}}
|
|
||||||
<span
|
|
||||||
class="topic-activity__username"
|
|
||||||
>@{{@topic.creator.username}}</span>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
<div class="topic-activity__reason">
|
|
||||||
{{i18n (themePrefix this.activityText)}}
|
|
||||||
</div>
|
|
||||||
<div class="topic-activity__time">
|
|
||||||
{{formatDate
|
|
||||||
@topic.bumpedAt
|
|
||||||
leaveAgo="true"
|
|
||||||
format="medium-with-ago-and-on"
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import avatar from "discourse/helpers/avatar";
|
|
||||||
|
|
||||||
const TopicAuthorAvatarColumn = <template>
|
|
||||||
<span class="topic-author-avatar">
|
|
||||||
{{avatar @topic.creator imageSize="large"}}
|
|
||||||
</span>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default TopicAuthorAvatarColumn;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
const TopicAuthorColumn = <template>
|
|
||||||
<span class="topic-author">@{{@topic.creator.username}}</span>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default TopicAuthorColumn;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import { categoryLinkHTML } from "discourse/helpers/category-link";
|
|
||||||
|
|
||||||
const TopicCategoryColumn = <template>
|
|
||||||
{{categoryLinkHTML @topic.category}}
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default TopicCategoryColumn;
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
|
|
||||||
const TopicLikesColumn = <template>
|
|
||||||
{{#if @topic.like_count}}
|
|
||||||
<span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
|
|
||||||
{{/if}}
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default TopicLikesColumn;
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
import gt from "truth-helpers/helpers/gt";
|
|
||||||
|
|
||||||
const TopicRepliesColumn = <template>
|
|
||||||
{{#if (gt @topic.replyCount 1)}}
|
|
||||||
<span class="topic-replies">{{icon "reply"}}{{@topic.replyCount}}</span>
|
|
||||||
{{/if}}
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default TopicRepliesColumn;
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
import { i18n } from "discourse-i18n";
|
|
||||||
|
|
||||||
export default class TopicStatusColumn extends Component {
|
|
||||||
@service siteSettings;
|
|
||||||
|
|
||||||
get badge() {
|
|
||||||
if (this.args.topic.is_hot) {
|
|
||||||
return {
|
|
||||||
icon: "fire",
|
|
||||||
text: "topic_hot",
|
|
||||||
className: "--hot",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.args.topic.pinned) {
|
|
||||||
return {
|
|
||||||
icon: "thumbtack",
|
|
||||||
text: "topic_pinned",
|
|
||||||
className: "--pinned",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{#if this.badge}}
|
|
||||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
|
||||||
this.badge.icon
|
|
||||||
}}{{i18n (themePrefix this.badge.text)}}</span>
|
|
||||||
{{/if}}
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { concat } from "@ember/helper";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import htmlClass from "discourse/helpers/html-class";
|
|
||||||
|
|
||||||
export default class CustomColorHtmlClass extends Component {
|
|
||||||
@service customColor;
|
|
||||||
|
|
||||||
<template>
|
|
||||||
{{htmlClass (concat "custom-color-" this.customColor.color)}}
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
import icon from "discourse/helpers/d-icon";
|
|
||||||
import DMenu from "float-kit/components/d-menu";
|
|
||||||
import SitePaletteMenuItem from "./site-palette-menu-item";
|
|
||||||
|
|
||||||
const PALETTES = [
|
|
||||||
{
|
|
||||||
label: "Marigold",
|
|
||||||
name: "marigold",
|
|
||||||
color: "#d3881f",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Violet",
|
|
||||||
name: "violet",
|
|
||||||
color: "#9b15de",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Lily",
|
|
||||||
name: "lily",
|
|
||||||
color: "#CC336F",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Clover",
|
|
||||||
name: "clover",
|
|
||||||
color: "#45a06e",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Royal",
|
|
||||||
name: "royal",
|
|
||||||
color: "#4169e1",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Horizon",
|
|
||||||
name: "horizon",
|
|
||||||
color: "#595bca",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export const DEFAULT_PALETTE_NAME = "horizon";
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<DMenu
|
|
||||||
@identifier="user-color-palette"
|
|
||||||
@placementStrategy="fixed"
|
|
||||||
class="btn-flat user-color-palette sidebar-footer-actions-button"
|
|
||||||
@inline={{true}}
|
|
||||||
>
|
|
||||||
<:trigger>
|
|
||||||
{{icon "paintbrush"}}
|
|
||||||
</:trigger>
|
|
||||||
<:content>
|
|
||||||
<div class="color-palette-menu">
|
|
||||||
<div class="color-palette-menu__content">
|
|
||||||
{{#each PALETTES as |colorPalette|}}
|
|
||||||
<SitePaletteMenuItem @colorPalette={{colorPalette}} />
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</:content>
|
|
||||||
</DMenu>
|
|
||||||
</template>
|
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { tracked } from "@glimmer/tracking";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
|
||||||
import { htmlSafe } from "@ember/template";
|
|
||||||
import { bind } from "discourse/lib/decorators";
|
|
||||||
|
|
||||||
export default class ExperimentalScreen extends Component {
|
|
||||||
@tracked left = 0;
|
|
||||||
@tracked right = 0;
|
|
||||||
resizeObserver;
|
|
||||||
|
|
||||||
willDestroy() {
|
|
||||||
super.willDestroy(...arguments);
|
|
||||||
this.resizeObserver.disconnect();
|
|
||||||
}
|
|
||||||
|
|
||||||
@bind
|
|
||||||
calculateDistance(element) {
|
|
||||||
const distance = element.getBoundingClientRect();
|
|
||||||
this.left = distance.left;
|
|
||||||
this.right = distance.right;
|
|
||||||
}
|
|
||||||
|
|
||||||
get distanceStyles() {
|
|
||||||
return htmlSafe(
|
|
||||||
`--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
onInsert(element) {
|
|
||||||
this.calculateDistance(element);
|
|
||||||
|
|
||||||
this.resizeObserver = new ResizeObserver((entries) => {
|
|
||||||
for (const entry of entries) {
|
|
||||||
this.calculateDistance(entry.target);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.resizeObserver.observe(element);
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ul
|
|
||||||
class="experimental-screen"
|
|
||||||
{{didInsert this.onInsert}}
|
|
||||||
style={{this.distanceStyles}}
|
|
||||||
>
|
|
||||||
<li class="experimental-screen__top-left"></li>
|
|
||||||
<li class="experimental-screen__top-right"></li>
|
|
||||||
<li class="experimental-screen__bottom-left"></li>
|
|
||||||
<li class="experimental-screen__bottom-right"></li>
|
|
||||||
<li class="experimental-screen__bottom-bar"></li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import Component from "@glimmer/component";
|
|
||||||
import { fn } from "@ember/helper";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
import { htmlSafe } from "@ember/template";
|
|
||||||
import DButton from "discourse/components/d-button";
|
|
||||||
import concatClass from "discourse/helpers/concat-class";
|
|
||||||
|
|
||||||
export default class SitePaletteMenuItem extends Component {
|
|
||||||
@service customColor;
|
|
||||||
|
|
||||||
get siteStyle() {
|
|
||||||
return `--icon-color: ${this.args.colorPalette.color}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
get activeClass() {
|
|
||||||
if (this.customColor.color === this.args.colorPalette.name) {
|
|
||||||
return "active";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
handleInput(colorPalette) {
|
|
||||||
this.customColor.setColor(colorPalette.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
|
|
||||||
<DButton
|
|
||||||
class={{concatClass
|
|
||||||
"btn-flat color-palette-menu__item-choice"
|
|
||||||
this.activeClass
|
|
||||||
}}
|
|
||||||
style={{htmlSafe this.siteStyle}}
|
|
||||||
@icon="circle"
|
|
||||||
@translatedLabel={{@colorPalette.label}}
|
|
||||||
@action={{fn this.handleInput @colorPalette}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
}
|
|
||||||
@@ -1,84 +0,0 @@
|
|||||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
|
||||||
import TopicActivityColumn from "../components/card/topic-activity-column";
|
|
||||||
import TopicCategoryColumn from "../components/card/topic-category-column";
|
|
||||||
import TopicLikesColumn from "../components/card/topic-likes-column";
|
|
||||||
import TopicRepliesColumn from "../components/card/topic-replies-column";
|
|
||||||
import TopicStatusColumn from "../components/card/topic-status-column";
|
|
||||||
|
|
||||||
const TopicActivity = <template>
|
|
||||||
<td class="topic-activity-data">
|
|
||||||
<TopicActivityColumn @topic={{@topic}} />
|
|
||||||
</td>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
const TopicStatus = <template>
|
|
||||||
<td class="topic-status-data">
|
|
||||||
<TopicStatusColumn @topic={{@topic}} />
|
|
||||||
</td>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
const TopicCategory = <template>
|
|
||||||
<td class="topic-category-data">
|
|
||||||
<TopicCategoryColumn @topic={{@topic}} />
|
|
||||||
</td>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
const TopicLikesReplies = <template>
|
|
||||||
<td class="topic-likes-replies-data">
|
|
||||||
<TopicLikesColumn @topic={{@topic}} />
|
|
||||||
<TopicRepliesColumn @topic={{@topic}} />
|
|
||||||
</td>
|
|
||||||
</template>;
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "topic-list-customizations",
|
|
||||||
|
|
||||||
initialize() {
|
|
||||||
withPluginApi("1.39.0", (api) => {
|
|
||||||
api.registerValueTransformer(
|
|
||||||
"topic-list-columns",
|
|
||||||
({ value: columns }) => {
|
|
||||||
columns.add("topic-activity", {
|
|
||||||
item: TopicActivity,
|
|
||||||
after: "title",
|
|
||||||
});
|
|
||||||
columns.add("topic-status", {
|
|
||||||
item: TopicStatus,
|
|
||||||
after: "topic-author",
|
|
||||||
});
|
|
||||||
columns.add("topic-category", {
|
|
||||||
item: TopicCategory,
|
|
||||||
after: "topic-status",
|
|
||||||
});
|
|
||||||
columns.add("topic-likes-replies", {
|
|
||||||
item: TopicLikesReplies,
|
|
||||||
after: "topic-author-avatar",
|
|
||||||
});
|
|
||||||
columns.delete("posters");
|
|
||||||
columns.delete("views");
|
|
||||||
columns.delete("replies");
|
|
||||||
columns.delete("activity");
|
|
||||||
return columns;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
api.registerValueTransformer(
|
|
||||||
"topic-list-item-class",
|
|
||||||
({ value: classes, context }) => {
|
|
||||||
if (
|
|
||||||
context.topic.is_hot ||
|
|
||||||
context.topic.pinned ||
|
|
||||||
context.topic.pinned_globally
|
|
||||||
) {
|
|
||||||
classes.push("--has-status-card");
|
|
||||||
}
|
|
||||||
return classes;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
api.registerValueTransformer("topic-list-item-mobile-layout", () => {
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
import { tracked } from "@glimmer/tracking";
|
|
||||||
import { action } from "@ember/object";
|
|
||||||
import Service, { service } from "@ember/service";
|
|
||||||
import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
|
|
||||||
|
|
||||||
const CUSTOM_COLOR_KEY = "d-custom-color-preference";
|
|
||||||
|
|
||||||
export default class CustomColor extends Service {
|
|
||||||
@service keyValueStore;
|
|
||||||
@tracked
|
|
||||||
color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
|
|
||||||
|
|
||||||
@action
|
|
||||||
setColor(color) {
|
|
||||||
this.color = color;
|
|
||||||
this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+3
-7
@@ -1,9 +1,5 @@
|
|||||||
en:
|
en:
|
||||||
theme_metadata:
|
theme_metadata:
|
||||||
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
description: ''
|
||||||
topic_pinned: "Pinned"
|
settings:
|
||||||
topic_hot: "Hot"
|
example_setting: A description of a setting.
|
||||||
user_replied: "replied"
|
|
||||||
user_posted: "posted"
|
|
||||||
user_updated: "updated"
|
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -7,7 +7,7 @@
|
|||||||
"prettier": "2.8.8"
|
"prettier": "2.8.8"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 18",
|
"node": ">= 22",
|
||||||
"npm": "please-use-pnpm",
|
"npm": "please-use-pnpm",
|
||||||
"yarn": "please-use-pnpm",
|
"yarn": "please-use-pnpm",
|
||||||
"pnpm": "9.x"
|
"pnpm": "9.x"
|
||||||
|
|||||||
+35
-46
@@ -1,42 +1,8 @@
|
|||||||
@media screen and (min-width: 1300px) {
|
|
||||||
#main-outlet {
|
|
||||||
border-top-right-radius: var(--d-border-radius-large);
|
|
||||||
border-top-left-radius: var(--d-border-radius-large);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-drawer-active.chat-drawer-expanded {
|
|
||||||
.experimental-screen {
|
.experimental-screen {
|
||||||
&__top-left,
|
@media screen and (max-width: 488px) {
|
||||||
&__top-right,
|
|
||||||
&__bottom-left,
|
|
||||||
&__bottom-right,
|
|
||||||
&__bottom-bar {
|
|
||||||
z-index: 199;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-full-page-chat .chat-replying-indicator-container {
|
|
||||||
margin-bottom: var(--d-border-radius-large);
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-full-page-chat .chat-selection-management {
|
|
||||||
margin-bottom: var(--d-border-radius-large);
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.experimental-screen {
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
max-width: unset !important;
|
@media screen and (min-width: 1600px) {
|
||||||
@media screen and (max-width: 488px) {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -57,8 +23,8 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
width: var(--d-border-radius-large);
|
width: var(--d-border-radius-large);
|
||||||
height: var(--d-border-radius-large);
|
height: var(--d-border-radius-large);
|
||||||
background-color: var(--background-color);
|
background-color: var(--secondary);
|
||||||
z-index: 399;
|
z-index: 999;
|
||||||
-webkit-mask: radial-gradient(
|
-webkit-mask: radial-gradient(
|
||||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||||
transparent var(--d-border-radius-large),
|
transparent var(--d-border-radius-large),
|
||||||
@@ -68,40 +34,63 @@
|
|||||||
}
|
}
|
||||||
&__top-left {
|
&__top-left {
|
||||||
top: var(--header-offset);
|
top: var(--header-offset);
|
||||||
left: var(--left-distance);
|
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
left: var(--main-grid-gap);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__top-right {
|
&__top-right {
|
||||||
top: var(--header-offset);
|
top: var(--header-offset);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
@container content-width (width > 1px) {
|
||||||
|
left: calc(
|
||||||
|
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
|
||||||
|
var(--d-border-radius-large)
|
||||||
|
);
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
left: calc(
|
||||||
|
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&__bottom-left {
|
&__bottom-left {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
bottom: var(--d-border-radius-large);
|
bottom: var(--d-border-radius-large);
|
||||||
left: var(--left-distance);
|
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
left: var(--main-grid-gap);
|
||||||
bottom: calc(var(--d-border-radius-large) * 2);
|
bottom: calc(var(--d-border-radius-large) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__bottom-right {
|
&__bottom-right {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
bottom: var(--d-border-radius-large);
|
bottom: var(--d-border-radius-large);
|
||||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
@container content-width (width > 1px) {
|
||||||
|
left: calc(
|
||||||
|
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
|
||||||
|
var(--d-border-radius-large)
|
||||||
|
);
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
left: calc(
|
||||||
|
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
|
||||||
|
);
|
||||||
bottom: calc(var(--d-border-radius-large) * 2);
|
bottom: calc(var(--d-border-radius-large) * 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&__bottom-bar {
|
&__bottom-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 399;
|
z-index: 999;
|
||||||
background-color: var(--background-color);
|
background-color: var(--secondary);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: var(--left-distance);
|
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
|
||||||
height: var(--d-border-radius-large);
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
|
left: var(--main-grid-gap);
|
||||||
height: calc(var(--d-border-radius-large) * 2);
|
height: calc(var(--d-border-radius-large) * 2);
|
||||||
}
|
}
|
||||||
|
height: var(--d-border-radius-large);
|
||||||
@container content-width (width > 1px) {
|
@container content-width (width > 1px) {
|
||||||
width: 100cqw;
|
width: 100cqw;
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-78
@@ -1,87 +1,15 @@
|
|||||||
:root {
|
.btn {
|
||||||
--d-button-border-radius: 6.25rem;
|
padding: 0.5em 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-no-touch .topic-body .actions .fade-out {
|
.sidebar-new-topic-button__wrapper {
|
||||||
transition: none;
|
margin: 1.5rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
|
.sidebar-new-topic-button__wrapper .btn {
|
||||||
background: var(--accent-color);
|
|
||||||
&:hover,
|
|
||||||
&:focus-visible {
|
|
||||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-no-touch .dropdown-menu__item .btn {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-no-touch .btn-default.sidebar-new-topic-button,
|
|
||||||
.discourse-no-touch .btn-default,
|
|
||||||
.discourse-no-touch .select-kit .select-kit-header.btn-default {
|
|
||||||
background: var(--primary-100);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: transparent;
|
|
||||||
box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
|
|
||||||
background: var(--d-content-background);
|
|
||||||
color: var(--accent-color);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
color: var(--accent-color);
|
|
||||||
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:active:not(:hover, :focus) {
|
|
||||||
color: var(--primary);
|
|
||||||
background: var(--tertiary-300);
|
|
||||||
background-image: none;
|
|
||||||
.d-icon {
|
|
||||||
color: var(--tertiary-high);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary,
|
|
||||||
#create-topic.btn {
|
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
color: var(--accent-text-color);
|
color: var(--accent-text-color);
|
||||||
.d-icon {
|
svg {
|
||||||
color: var(--accent-text-color);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.discourse-no-touch & {
|
|
||||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
|
||||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
|
||||||
color: var(--accent-text-color);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-text-color);
|
color: var(--accent-text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
.discourse-no-touch & {
|
|
||||||
background: oklch(from var(--accent-color) 40% c h) !important;
|
|
||||||
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
|
||||||
color: var(--accent-text-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
+9
-56
@@ -1,57 +1,10 @@
|
|||||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
// .c-navbar-container {
|
||||||
border: none;
|
// background-color: light-dark(#ffffff, #000000);
|
||||||
}
|
// border-top-right-radius: var(--d-border-radius-large);
|
||||||
|
// border-top-left-radius: var(--d-border-radius-large);
|
||||||
|
// }
|
||||||
|
|
||||||
.c-navbar-container {
|
// .chat-message-container,
|
||||||
padding: 0 1.5em;
|
// .chat-transcript {
|
||||||
background-color: var(--d-content-background);
|
// background: transparent;
|
||||||
}
|
// }
|
||||||
|
|
||||||
body.has-full-page-chat {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-drawer-container {
|
|
||||||
.is-expanded & {
|
|
||||||
box-shadow: 0px 0px 0px 2px var(--d-chat-border);
|
|
||||||
}
|
|
||||||
.chat-drawer.is-expanded & {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-drawer-outlet-container {
|
|
||||||
z-index: z("composer", "content");
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-drawer .channels-list-container .chat-channel-row {
|
|
||||||
margin-bottom: var(--spacing-block-xs);
|
|
||||||
font-size: var(--font-up-1);
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
border-bottom: none;
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--d-sidebar-active-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-title {
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-composer__wrapper {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-message-actions .more-buttons .btn-icon-text {
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--d-selected);
|
|
||||||
box-shadow: none;
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
|
||||||
z-index: z("composer", "content") + 1;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,49 +0,0 @@
|
|||||||
.color-palette-menu {
|
|
||||||
&__item .btn-icon-text.btn-flat {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
width: 100%;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
&__item .btn-icon-text.btn-flat:hover {
|
|
||||||
background-color: var(--d-selected);
|
|
||||||
box-shadow: none;
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
&__item .btn-icon-text.btn-flat:hover svg {
|
|
||||||
color: var(--icon-color);
|
|
||||||
}
|
|
||||||
&__item .btn-icon-text.btn-flat svg {
|
|
||||||
color: var(--icon-color);
|
|
||||||
}
|
|
||||||
&__item-choice.active.btn-icon-text.btn-flat {
|
|
||||||
background-color: var(--d-selected);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-color-palette-content .fk-d-menu__inner-content {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-horizon {
|
|
||||||
--accent-base-color: #595bca;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-marigold {
|
|
||||||
--accent-base-color: #d3881f;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-violet {
|
|
||||||
--accent-base-color: #9b15de;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-lily {
|
|
||||||
--accent-base-color: #cc338c;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-clover {
|
|
||||||
--accent-base-color: #45a06e;
|
|
||||||
}
|
|
||||||
|
|
||||||
html.custom-color-royal {
|
|
||||||
--accent-base-color: #4169e1;
|
|
||||||
}
|
|
||||||
@@ -1,121 +0,0 @@
|
|||||||
:root {
|
|
||||||
--accent-base-color: #595bca;
|
|
||||||
--accent-color: light-dark(
|
|
||||||
var(--accent-base-color),
|
|
||||||
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
|
||||||
);
|
|
||||||
// --background-color: light-dark(#f5f8ff, #101112);
|
|
||||||
--background-color: light-dark(
|
|
||||||
oklch(from var(--accent-color) 98% calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) 10% 0.025 h)
|
|
||||||
);
|
|
||||||
--header_primary-low-mid: light-dark(
|
|
||||||
oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--header_primary-medium: light-dark(
|
|
||||||
oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--d-content-background: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 2) 0 h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.375) 0 h)
|
|
||||||
);
|
|
||||||
--primary-100: light-dark(#f2f2f2, #333333);
|
|
||||||
--primary-300: light-dark(#d1d1d1, #838383);
|
|
||||||
--primary-low: light-dark(#e9e9e9, #313131);
|
|
||||||
--primary-high: light-dark(#646464, #a6a6a6);
|
|
||||||
--primary-very-high: light-dark(#434343, #c7c7c7);
|
|
||||||
--d-hover: oklch(from var(--d-selected) l c h / 0.75);
|
|
||||||
--tertiary: var(--accent-color);
|
|
||||||
--tertiary-medium: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--tertiary-very-low: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--tertiary-med-or-tertiary: var(--accent-color);
|
|
||||||
--tertiary-low: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--tertiary-300: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
|
|
||||||
);
|
|
||||||
--tertiary-high: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1) c h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1) c h)
|
|
||||||
);
|
|
||||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
|
|
||||||
--search-color: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
|
|
||||||
);
|
|
||||||
--search-banner-text-color: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
|
|
||||||
);
|
|
||||||
--topic-card-shadow: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
|
|
||||||
);
|
|
||||||
--button-box-shadow: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
|
||||||
);
|
|
||||||
--d-selected: light-dark(
|
|
||||||
oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--d-sidebar-highlight-hover-background: var(--d-selected);
|
|
||||||
--d-sidebar-border-color: light-dark(
|
|
||||||
oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--d-chat-border: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--accent-text-color: light-dark(#ffffff, #212121);
|
|
||||||
--d-nav-color--active: var(--accent-color);
|
|
||||||
--d-sidebar-background: var(--background-color);
|
|
||||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
|
||||||
--d-sidebar-link-color: light-dark(
|
|
||||||
oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
|
|
||||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
|
|
||||||
);
|
|
||||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color);
|
|
||||||
--d-sidebar-header-color: var(--d-sidebar-link-color);
|
|
||||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
|
|
||||||
--d-sidebar-suffix-color: light-dark(
|
|
||||||
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
|
|
||||||
oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
|
|
||||||
);
|
|
||||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
|
||||||
--link-color: light-dark(
|
|
||||||
var(--accent-base-color),
|
|
||||||
oklch(from var(--accent-base-color) calc(l * 0.95) c h)
|
|
||||||
);
|
|
||||||
--link-color-hover: light-dark(
|
|
||||||
var(--accent-base-color),
|
|
||||||
oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
|
|
||||||
);
|
|
||||||
--d-sidebar-prefix-background: var(--d-selected);
|
|
||||||
--d-sidebar-active-prefix-background: light-dark(
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
|
||||||
);
|
|
||||||
--d-sidebar-highlight-prefix-background: light-dark(
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.85) c h),
|
|
||||||
oklch(from var(--d-selected) calc(l * 0.7) c h)
|
|
||||||
);
|
|
||||||
--d-sidebar-highlight-suffix-color: var(--d-sidebar-active-suffix-color);
|
|
||||||
--d-sidebar-highlight-color: var(--primary);
|
|
||||||
--d-sidebar-highlight-background: var(--d-selected);
|
|
||||||
--d-sidebar-section-link-icon-size: 1em;
|
|
||||||
--d-input-bg-color: var(--d-content-background);
|
|
||||||
--tertiary-hover: var(--accent-color);
|
|
||||||
}
|
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
#reply-control
|
|
||||||
.select-kit.dropdown-select-box.composer-actions
|
|
||||||
.select-kit-header {
|
|
||||||
border: 1px solid var(--tertiary-700);
|
|
||||||
background: var(--secondary);
|
|
||||||
&:hover {
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control.hide-preview:not(.draft) {
|
|
||||||
@include breakpoint("mobile-extra-large", $rule: min-width) {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
|
|
||||||
border-top-right-radius: var(--d-border-radius);
|
|
||||||
border-top-left-radius: var(--d-border-radius);
|
|
||||||
|
|
||||||
.grippie {
|
|
||||||
background: var(--tertiary-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-and-category {
|
|
||||||
padding: 0 var(--spacing-inline-m);
|
|
||||||
width: calc(100% - var(--spacing-inline-m) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-editor-button-bar {
|
|
||||||
padding: 3px var(--spacing-inline-m);
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-editor-input {
|
|
||||||
padding: var(--spacing-inline-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:has(.in-focus) .grippie {
|
|
||||||
background: var(--tertiary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reply-area {
|
|
||||||
padding-inline: 0;
|
|
||||||
}
|
|
||||||
.reply-to,
|
|
||||||
.submit-panel {
|
|
||||||
padding-inline: var(--spacing-inline-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-editor-textarea-wrapper {
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid var(--primary-low);
|
|
||||||
border-radius: 0;
|
|
||||||
|
|
||||||
&.in-focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.d-editor-button-bar {
|
|
||||||
.btn:hover,
|
|
||||||
.toolbar-popup-menu-options.is-expanded {
|
|
||||||
.discourse-no-touch & {
|
|
||||||
background: var(--tertiary-very-low);
|
|
||||||
color: var(--accent-color);
|
|
||||||
|
|
||||||
.d-icon {
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
//to have parity with regular select-kit styling used elsewhere
|
|
||||||
.select-kit-row {
|
|
||||||
.d-icon {
|
|
||||||
color: var(--primary-high);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.d-icon {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-popup-menu-options.is-expanded {
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,92 +1,3 @@
|
|||||||
.d-header {
|
.d-header {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
background: var(--background-color);
|
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
|
||||||
padding-bottom: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-full-page-chat .d-header {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu .quick-access-panel,
|
|
||||||
.user-notifications-list {
|
|
||||||
li {
|
|
||||||
&.pending,
|
|
||||||
&.unread {
|
|
||||||
background: var(--d-hover);
|
|
||||||
|
|
||||||
.discourse-no-touch & {
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
background: var(--d-selected);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu.revamped .tabs-list .btn.active {
|
|
||||||
background: var(--d-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-no-touch .d-header-icons .icon:hover,
|
|
||||||
.discourse-no-touch .d-header-icons .icon:focus,
|
|
||||||
.header-sidebar-toggle button:focus:hover,
|
|
||||||
.discourse-no-touch .header-sidebar-toggle button:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
|
|
||||||
.drop-down-mode .d-header-icons .active .icon > .d-icon,
|
|
||||||
.drop-down-mode
|
|
||||||
.d-header-icons
|
|
||||||
.header-color-scheme-toggle
|
|
||||||
.-expanded
|
|
||||||
> .d-icon {
|
|
||||||
color: var(--header_primary-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-no-touch .interface-color-selector-content {
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
.btn {
|
|
||||||
border: none;
|
|
||||||
&:hover {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-down-mode .d-header-icons .active .icon,
|
|
||||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-down-mode .d-header-icons .active .icon,
|
|
||||||
.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-notification {
|
|
||||||
color: var(--accent-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu .quick-access-panel li,
|
|
||||||
.user-notifications-list li,
|
|
||||||
.user-menu .quick-access-panel li.do-not-disturb,
|
|
||||||
.menu-panel .panel-body-bottom .btn,
|
|
||||||
.menu-panel .panel-body-bottom .btn:hover {
|
|
||||||
// background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.login-page,
|
|
||||||
body.signup-page,
|
|
||||||
body.invite-page,
|
|
||||||
body.password-reset-page,
|
|
||||||
body.activate-account-page {
|
|
||||||
.d-header {
|
|
||||||
background: var(--background-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,5 @@
|
|||||||
.sidebar__panel-switch-button,
|
.sidebar__panel-switch-button,
|
||||||
.list-controls #create-topic,
|
.sidebar-section[data-section-name="messages"],
|
||||||
.notifications-button-footer .reason .text,
|
.list-controls #create-topic {
|
||||||
.pinned-button .reason .text,
|
|
||||||
.more-topics__browse-more,
|
|
||||||
//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
|
|
||||||
.footer-message {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
+53
-108
@@ -1,127 +1,72 @@
|
|||||||
:root {
|
|
||||||
--main-grid-gap: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
html:not(:has(.has-full-page-chat)) {
|
html:not(:has(.has-full-page-chat)) {
|
||||||
background-color: var(--background-color);
|
background-color: #f5f8ff;
|
||||||
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
@include breakpoint("mobile-extra-large") {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
gap: var(--main-grid-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
|
|
||||||
grid-column-gap: var(--main-grid-gap);
|
|
||||||
}
|
|
||||||
|
|
||||||
body.has-full-page-chat:not(.has-sidebar-page) {
|
|
||||||
.d-header {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
gap: var(--main-grid-gap);
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
gap: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body.has-sidebar-page #main-outlet-wrapper {
|
body.has-sidebar-page #main-outlet-wrapper {
|
||||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
|
grid-template-columns: 0px 1fr minmax(0, var(--d-max-width)) 1fr;
|
||||||
#main-outlet {
|
grid-template-areas:
|
||||||
max-width: unset;
|
"space sidebar content"
|
||||||
|
"space sidebar content";
|
||||||
|
gap: 0 var(--main-grid-gap);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 488px) {
|
||||||
|
#main-outlet-wrapper {
|
||||||
|
gap: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
.powered-by-discourse {
|
||||||
@include breakpoint(medium, $rule: min-width) {
|
display: none;
|
||||||
grid-template-columns: 0px minmax(0, 1fr) 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body:not(.has-full-page-chat) {
|
body:not(.has-full-page-chat) {
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
#main-outlet {
|
||||||
background-color: var(--background-color);
|
// background: radial-gradient(
|
||||||
|
// 100.59% 70.87% at 41.19% 73.28%,
|
||||||
|
// rgba(188, 241, 238, 0.2) 0%,
|
||||||
|
// rgba(255, 255, 255, 0) 100%
|
||||||
|
// ),
|
||||||
|
// radial-gradient(
|
||||||
|
// 67.07% 61.36% at 66.47% 64.15%,
|
||||||
|
// rgba(162, 164, 225, 0.2) 0%,
|
||||||
|
// rgba(255, 255, 255, 0) 100%
|
||||||
|
// ),
|
||||||
|
// #fff;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding-bottom: calc(var(--d-border-radius-large) * 2);
|
||||||
}
|
}
|
||||||
#main-outlet-wrapper {
|
#main-outlet-wrapper {
|
||||||
@include breakpoint(medium) {
|
// margin-top: 1.5rem;
|
||||||
--main-grid-gap: 0;
|
// gap: 2em !important;
|
||||||
}
|
// height: calc(100vh - var(--header-offset) - 4rem);
|
||||||
@include breakpoint(tablet, $rule: min-width) {
|
// box-sizing: border-box;
|
||||||
gap: var(--main-grid-gap);
|
// what does this do?
|
||||||
}
|
// > * {
|
||||||
|
// height: inherit;
|
||||||
|
// box-sizing: border-box;
|
||||||
|
// }
|
||||||
#main-outlet {
|
#main-outlet {
|
||||||
width: 100%;
|
position: relative;
|
||||||
padding-bottom: var(--spacing-block-l);
|
// height: inherit;
|
||||||
max-width: unset;
|
// overflow: scroll;
|
||||||
//thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
|
// &:has(.list-controls) {
|
||||||
.list-controls,
|
// padding-top: 0;
|
||||||
.list-container,
|
// }
|
||||||
#topic-title,
|
// &:has(#topic-title) {
|
||||||
.container.posts,
|
// padding-top: 0;
|
||||||
#topic-footer-buttons,
|
// }
|
||||||
.more-topics__container,
|
> *:not(.full-page-chat) {
|
||||||
.welcome-banner,
|
padding-inline: 1.5em;
|
||||||
.container .user-main,
|
|
||||||
.reviewable,
|
|
||||||
.admin-content,
|
|
||||||
.discourse-post-event-upcoming-events,
|
|
||||||
.container.groups-index,
|
|
||||||
.body-page,
|
|
||||||
.container.badges,
|
|
||||||
.topic-above-footer-buttons-outlet .presence-users,
|
|
||||||
.global-notice,
|
|
||||||
.container.tags-index {
|
|
||||||
@include breakpoint(medium, $rule: min-width) {
|
|
||||||
max-width: 1000px;
|
|
||||||
margin-inline: auto;
|
|
||||||
padding-inline: var(--spacing-inline-l);
|
|
||||||
}
|
}
|
||||||
}
|
// border-radius: var(--d-border-radius-large);
|
||||||
border-radius: var(--d-border-radius-large);
|
// border-radius: 1.25rem;
|
||||||
@include breakpoint(medium) {
|
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||||
border-radius: 0px;
|
// background-color: light-dark(#ffffff, #000000);
|
||||||
}
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#list-area {
|
.boxed.white {
|
||||||
.show-more.has-topics {
|
background-color: #fff;
|
||||||
@include breakpoint(medium, $rule: min-width) {
|
|
||||||
width: auto;
|
|
||||||
right: 50%;
|
|
||||||
transform: translateX(50%);
|
|
||||||
|
|
||||||
.alert {
|
|
||||||
padding: var(--spacing-block-sm) var(--spacing-inline-m);
|
|
||||||
border-radius: var(--d-border-radius-large);
|
|
||||||
font-size: var(--font-down-1-rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.topic-list-body {
|
|
||||||
padding-top: var(--spacing-block-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
aside.onebox {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-editor-preview-wrapper {
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
padding: 1em;
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-94
@@ -1,96 +1,3 @@
|
|||||||
.user-main .about.collapsed-info .details {
|
.user-main .about.collapsed-info .details {
|
||||||
background: var(--d-content-background);
|
background: #fff;
|
||||||
}
|
|
||||||
|
|
||||||
.user-menu .quick-access-panel .read,
|
|
||||||
.user-notifications-list .read {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.powered-by-discourse {
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.boxed.white {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-area .sidebar-wrapper .admin-panel {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-report .main .report-alert.no-data,
|
|
||||||
.admin-report .main .report-alert.rate-limited {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.admin-detail {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-kit.combo-box .select-kit-header,
|
|
||||||
.select-kit.multi-select .multi-select-header,
|
|
||||||
.d-editor-textarea-wrapper,
|
|
||||||
.fk-d-menu__inner-content,
|
|
||||||
.menu-panel {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fk-d-menu .btn {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.open .grippie {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-editor-textarea-wrapper.in-focus,
|
|
||||||
input[type="text"]:focus,
|
|
||||||
input[type="password"]:focus,
|
|
||||||
input[type="datetime"]:focus,
|
|
||||||
input[type="datetime-local"]:focus,
|
|
||||||
input[type="date"]:focus,
|
|
||||||
input[type="month"]:focus,
|
|
||||||
input[type="time"]:focus,
|
|
||||||
input[type="week"]:focus,
|
|
||||||
input[type="number"]:focus,
|
|
||||||
input[type="email"]:focus,
|
|
||||||
input[type="url"]:focus,
|
|
||||||
input[type="search"]:focus,
|
|
||||||
input[type="tel"]:focus,
|
|
||||||
input[type="color"]:focus,
|
|
||||||
.select-kit.multi-select.is-expanded .multi-select-header,
|
|
||||||
.select-kit.multi-select .multi-select-header:focus {
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
outline: 2px solid var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#reply-control {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container .search-header,
|
|
||||||
.search-container .search-bar,
|
|
||||||
.search-container .search-filters,
|
|
||||||
.search-container .search-filters .search-advanced-filters {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-main .about .details {
|
|
||||||
padding: 1em 1em 0;
|
|
||||||
border-bottom: 0px;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
background-color: var(--primary-50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.alert.alert-info {
|
|
||||||
background: var(--tertiary-very-low);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-reactions-list .reactions {
|
|
||||||
gap: 0.15em;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,203 +0,0 @@
|
|||||||
//temp sepeate file to avoid merge hell… to be distributed later
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
html,
|
|
||||||
.d-header {
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#main-outlet-wrapper {
|
|
||||||
*[class*="navigation-"] & {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#main-outlet {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-top: var(--spacing-block-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-controls {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-inline: var(
|
|
||||||
--spacing-inline-m
|
|
||||||
) !important; //override will be fixed when the whole chat page shenanigans is resolved
|
|
||||||
padding-block: var(--spacing-block-s);
|
|
||||||
border-bottom: 1px solid var(--primary-200);
|
|
||||||
}
|
|
||||||
.navigation-container {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
gap: var(--spacing-inline-s);
|
|
||||||
//dont know why we even hide this crucial navigation on mobile
|
|
||||||
.category-breadcrumb.hidden,
|
|
||||||
.category-breadcrumb {
|
|
||||||
display: flex !important;
|
|
||||||
column-gap: var(--spacing-inline-s);
|
|
||||||
row-gap: var(--spacing-block-xs);
|
|
||||||
flex-basis: 100%;
|
|
||||||
.select-kit-header {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
padding-block: var(--spacing-block-s);
|
|
||||||
padding-inline: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn-default {
|
|
||||||
border: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
.d-icon {
|
|
||||||
font-size: var(--font-up-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.fk-d-button-tooltip {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: var(
|
|
||||||
--spacing-inline-xs
|
|
||||||
); //pure visual correction for horitzontal alignment
|
|
||||||
&:has(#create-topic) {
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#navigation-bar,
|
|
||||||
.navigation-controls,
|
|
||||||
.category-breadcrumb {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navigation-controls {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
gap: var(--spacing-inline-s);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-container {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-inline: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-body {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
border-top: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-title {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-inline: var(--spacing-inline-s) !important;
|
|
||||||
|
|
||||||
.title-wrapper {
|
|
||||||
gap: var(--spacing-block-s);
|
|
||||||
}
|
|
||||||
.topic-category {
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
//make mixin of this
|
|
||||||
.badge-category__wrapper {
|
|
||||||
font-size: var(--font-down-2-rem);
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
|
||||||
background-color: light-dark(
|
|
||||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
|
||||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
|
||||||
);
|
|
||||||
border: 1px solid
|
|
||||||
light-dark(
|
|
||||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
|
||||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-category__name {
|
|
||||||
color: light-dark(
|
|
||||||
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
|
||||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.discourse-tags {
|
|
||||||
gap: var(--spacing-inline-xs);
|
|
||||||
&__tag-separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.discourse-tag {
|
|
||||||
font-size: var(--font-down-2-rem);
|
|
||||||
padding: var(--spacing-inline-xs) var(--spacing-inline-s);
|
|
||||||
gap: var(--spacing-inline-xs);
|
|
||||||
border-radius: var(--d-border-radius-large);
|
|
||||||
border: 1px solid var(--primary-low-mid);
|
|
||||||
background: var(--secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.container.posts {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-inline: var(--spacing-inline-xs) !important;
|
|
||||||
|
|
||||||
.main-avatar .avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-body {
|
|
||||||
.topic-meta-data {
|
|
||||||
.username {
|
|
||||||
font-size: var(--font-0-rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.contents {
|
|
||||||
padding-top: var(--spacing-block-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.small-action {
|
|
||||||
&-desc {
|
|
||||||
padding: var(--spacing-block-xs) 0;
|
|
||||||
}
|
|
||||||
//for core eventually, better way imo
|
|
||||||
.topic-avatar {
|
|
||||||
padding-top: 0;
|
|
||||||
align-items: center;
|
|
||||||
.d-icon {
|
|
||||||
font-size: var(--font-up-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#topic-footer-buttons {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
padding-inline: var(--spacing-inline-xs) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//should be changed in core, should not be a primary btn
|
|
||||||
//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
|
|
||||||
#topic-progress-wrapper {
|
|
||||||
.progress-back-container {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: var(--spacing-block-xs);
|
|
||||||
.btn-primary.progress-back {
|
|
||||||
border-radius: 0;
|
|
||||||
background: var(--secondary);
|
|
||||||
border: 1px solid var(--tertiary-low);
|
|
||||||
color: var(--accent-color);
|
|
||||||
padding: var(--spacing-inline-s) var(--spacing-inline-m);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.topic-admin-menu-trigger {
|
|
||||||
border-radius: 0;
|
|
||||||
background: var(--secondary);
|
|
||||||
border: 1px solid var(--tertiary-low);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+7
-34
@@ -1,51 +1,25 @@
|
|||||||
.list-controls {
|
.list-controls {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: var(--header-offset);
|
top: var(--header-offset);
|
||||||
background: var(--d-content-background);
|
background: #ffffff;
|
||||||
z-index: z("base");
|
z-index: 100;
|
||||||
padding: 1.5rem 0 1rem 0;
|
padding: 1.5rem 0 1rem 0;
|
||||||
max-width: unset;
|
max-width: unset;
|
||||||
|
|
||||||
.navigation-container {
|
.navigation-container {
|
||||||
gap: 1rem;
|
|
||||||
.category-breadcrumb {
|
.category-breadcrumb {
|
||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.combo-box .combo-box-header {
|
.combo-box .combo-box-header,
|
||||||
// needs more specificy than just in the button file
|
.select-kit.is-expanded .select-kit-body,
|
||||||
background-color: var(--secondary);
|
.discourse-post-event .discourse-post-event-widget {
|
||||||
border-radius: var(--d-border-radius-large);
|
background-color: #ffffff;
|
||||||
border: 1px solid var(--primary-300);
|
|
||||||
// font-size: var(--font-up-1-rem);
|
|
||||||
&:hover {
|
|
||||||
border: 1px solid var(--accent-color);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
.discourse-no-touch & {
|
|
||||||
background: var(--secondary);
|
|
||||||
color: var(--accent-color);
|
|
||||||
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
|
|
||||||
.d-icon {
|
|
||||||
color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.select-kit.combo-box.category-drop.has-selection
|
|
||||||
.category-drop-header:hover {
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-kit.is-expanded .select-kit-body {
|
|
||||||
border-radius: var(--d-border-radius);
|
border-radius: var(--d-border-radius);
|
||||||
background-color: var(--d-content-background);
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.nav-pills > li > a:hover,
|
.nav-pills > li > a:hover,
|
||||||
.nav-pills > li button:hover {
|
.nav-pills > li button:hover {
|
||||||
.discourse-no-touch & {
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
&::after {
|
&::after {
|
||||||
@@ -58,4 +32,3 @@
|
|||||||
background: var(--accent-color);
|
background: var(--accent-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|||||||
+12
-15
@@ -1,7 +1,3 @@
|
|||||||
.welcome-banner {
|
|
||||||
z-index: calc(z("base") + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-search-banner-wrap {
|
.custom-search-banner-wrap {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||||
@@ -9,19 +5,23 @@
|
|||||||
grid-column-gap: 1em;
|
grid-column-gap: 1em;
|
||||||
grid-row-gap: 0.5em;
|
grid-row-gap: 0.5em;
|
||||||
border-bottom: 1px solid var(--primary-300);
|
border-bottom: 1px solid var(--primary-300);
|
||||||
padding: 1.5em 0 2.5em;
|
padding: 2.5em 0 2.5em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 2.5em;
|
||||||
@media screen and (max-width: 768px) {
|
--search-color: #595bca;
|
||||||
padding: 1em;
|
@media screen and (max-width: 700px) {
|
||||||
|
padding: 1em 1em 0 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
grid-column: 1/2;
|
grid-column: 1/2;
|
||||||
grid-row: 1/-1;
|
grid-row: 1/-1;
|
||||||
|
padding: 0 1em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: var(--search-banner-text-color);
|
color: #350c73;
|
||||||
@media screen and (max-width: 1028px) {
|
@media screen and (max-width: 1028px) {
|
||||||
font-size: var(--font-up-4);
|
font-size: var(--font-up-4);
|
||||||
grid-column: 1/-1;
|
grid-column: 1/-1;
|
||||||
@@ -64,8 +64,8 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.search-input {
|
.search-input {
|
||||||
background: var(--d-content-background);
|
background: light-dark(#ffffff, #1f1f1f);
|
||||||
border: 1px solid var(--search-color);
|
border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
|
||||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||||
}
|
}
|
||||||
.search-menu .search-input:focus-within,
|
.search-menu .search-input:focus-within,
|
||||||
@@ -77,10 +77,7 @@
|
|||||||
.search-menu .searching .d-icon {
|
.search-menu .searching .d-icon {
|
||||||
color: var(--search-color);
|
color: var(--search-color);
|
||||||
}
|
}
|
||||||
.panel-body {
|
|
||||||
z-index: z("dropdown");
|
|
||||||
}
|
|
||||||
.results {
|
.results {
|
||||||
background: var(--d-content-background);
|
background: light-dark(#ffffff, #1f1f1f);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+12
-59
@@ -1,16 +1,15 @@
|
|||||||
.sidebar-wrapper,
|
:root {
|
||||||
.sidebar-hamburger-dropdown {
|
// --d-sidebar-background: #f5f8ff;
|
||||||
@include breakpoint(medium) {
|
|
||||||
background: var(--secondary);
|
|
||||||
.sidebar-footer-wrapper {
|
|
||||||
background: var(--secondary);
|
|
||||||
.sidebar-footer-container::before {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-section-link-wrapper .sidebar-section-link {
|
||||||
|
border-radius: var(--d-border-radius);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.has-full-page-chat &,
|
.sidebar-wrapper {
|
||||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
background: #f5f8ff;
|
||||||
|
|
||||||
|
.has-full-page-chat & {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
@@ -20,54 +19,8 @@
|
|||||||
.sidebar-sections {
|
.sidebar-sections {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.sidebar-section-link {
|
|
||||||
transition: none;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
.dropdown-menu__item .sidebar-section-link {
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sidebar-section-wrapper {
|
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
|
||||||
padding-block: 0.45em;
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
.hamburger-panel .revamped & {
|
|
||||||
margin-bottom: var(--spacing-block-m);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sidebar-section-header {
|
|
||||||
font-size: var(--font-down-2);
|
|
||||||
}
|
|
||||||
.sidebar-section-content {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
@include breakpoint(extra-large, $rule: min-width) {
|
|
||||||
gap: var(--spacing-block-xs);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-wrapper .sidebar-sections {
|
.admin-area .sidebar-wrapper .admin-panel {
|
||||||
--scrollbarThumbBg: var(--d-selected);
|
background-color: var(--secondary);
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
|
||||||
.sidebar-section-link-wrapper .sidebar-section-link:hover {
|
|
||||||
.d-icon {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-new-topic-button__wrapper {
|
|
||||||
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
|
|
||||||
.sidebar-new-topic-button .d-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-wrapper .sidebar-sections {
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-533
@@ -1,537 +1,7 @@
|
|||||||
.topic-list .topic-list-item-separator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list > .topic-list-body > .topic-list-item.last-visit {
|
|
||||||
border-bottom: 1px solid var(--primary-300);
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-body {
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1em;
|
|
||||||
@include breakpoint(medium) {
|
|
||||||
gap: 0.5em;
|
|
||||||
padding: 0 0.5em;
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
gap: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-body .topic-list-item {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding: 0.75em 1rem;
|
|
||||||
border: 1px solid var(--primary-300);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content;
|
|
||||||
grid-template-rows: auto minmax(20px, auto);
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . status"
|
|
||||||
"activity . . likes-replies category";
|
|
||||||
grid-column-gap: 12px;
|
|
||||||
grid-row-gap: 8px;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-row: 1/2;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 1/-2;
|
|
||||||
}
|
|
||||||
@include breakpoint(extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . status"
|
|
||||||
"activity . . likes-replies category";
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-row: 2/3;
|
|
||||||
grid-column: 1/-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
grid-template-columns: 20px repeat(5, 1fr);
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
"category category category category category status"
|
|
||||||
". . . . . ."
|
|
||||||
"activity . . . . likes-replies";
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid var(--primary-200);
|
|
||||||
box-shadow: none;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content;
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . status"
|
|
||||||
"activity . . . ."
|
|
||||||
"excerpt excerpt excerpt likes-replies category";
|
|
||||||
@include breakpoint(extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . status"
|
|
||||||
"activity . . . ."
|
|
||||||
"excerpt excerpt excerpt likes-replies category";
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-rows: auto auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
"category category category category status"
|
|
||||||
". . . . ."
|
|
||||||
"activity . . . likes-replies";
|
|
||||||
.topic-excerpt {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// display contents
|
|
||||||
td.main-link,
|
|
||||||
td.posters,
|
|
||||||
td.posts,
|
|
||||||
td.views,
|
|
||||||
td.activity {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.num.posts a {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// topic activity, avatar, text
|
|
||||||
.topic-activity-data {
|
|
||||||
grid-area: activity;
|
|
||||||
}
|
|
||||||
.topic-activity {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25em;
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
height: 100%;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-activity__user {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-activity__user .avatar {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-activity__username {
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// status
|
|
||||||
.topic-status-data {
|
|
||||||
grid-area: status;
|
|
||||||
}
|
|
||||||
.topic-status-data {
|
|
||||||
grid-area: status;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.topic-status-card {
|
|
||||||
@include breakpoint("large", min-width) {
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: -20px;
|
|
||||||
background-color: var(--d-content-background);
|
|
||||||
height: 20px;
|
|
||||||
font-size: var(--font-down-3);
|
|
||||||
}
|
|
||||||
height: min-content;
|
|
||||||
margin-left: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 4px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 6px;
|
|
||||||
font-size: var(--font-down-2);
|
|
||||||
font-weight: 600;
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
border: 1px solid var(--status-color);
|
|
||||||
color: var(--status-color);
|
|
||||||
width: min-content;
|
|
||||||
svg {
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
color: var(--status-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-status-card.--pinned {
|
|
||||||
--status-color: var(--primary-500);
|
|
||||||
}
|
|
||||||
.topic-status-card.--hot {
|
|
||||||
--status-color: #e45735;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-top-line .event-date {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
font-size: var(--font-down-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.main-link a.topic-status {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-data {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.main-link .link-top-line a.raw-topic-link {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-post-badges .badge-notification.unread-posts,
|
|
||||||
.topic-post-badges .badge-notification.new-topic {
|
|
||||||
background-color: var(--tertiary);
|
|
||||||
color: var(--tertiary);
|
|
||||||
overflow: hidden;
|
|
||||||
height: 8px;
|
|
||||||
width: 8px;
|
|
||||||
padding: 0;
|
|
||||||
top: -2px;
|
|
||||||
min-width: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
// excerpt
|
|
||||||
.topic-excerpt {
|
|
||||||
grid-row: 3 / -1;
|
|
||||||
grid-column: 1 / -2;
|
|
||||||
margin: 0;
|
|
||||||
font-size: var(--font-down-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// timestamp
|
|
||||||
td.activity .post-activity {
|
|
||||||
grid-area: activity;
|
|
||||||
font-size: var(--font-down-1);
|
|
||||||
color: var(--primary-500);
|
|
||||||
margin-left: auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// metadata
|
|
||||||
// metadata - category
|
|
||||||
td.main-link .link-bottom-line {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.topic-category-status-data {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
td.topic-category-data {
|
|
||||||
grid-area: category;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.topic-category-data .badge-category__wrapper,
|
|
||||||
td.main-link .link-bottom-line .badge-category__wrapper {
|
|
||||||
border-radius: var(--d-border-radius);
|
|
||||||
padding: 3px 6px;
|
|
||||||
background-color: light-dark(
|
|
||||||
oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
|
|
||||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
|
||||||
);
|
|
||||||
|
|
||||||
@include breakpoint(tablet) {
|
|
||||||
padding: 2px 6px;
|
|
||||||
font-size: var(--font-down-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-category__name {
|
|
||||||
color: light-dark(
|
|
||||||
oklch(from var(--category-badge-color) 20% calc(c * 1) h),
|
|
||||||
oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.main-link .discourse-tags {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// metadata - likes and replies
|
|
||||||
td.posts .badge-posts {
|
|
||||||
grid-area: replies;
|
|
||||||
align-self: center;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.topic-likes-replies-data {
|
|
||||||
grid-area: likes-replies;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5em;
|
|
||||||
justify-content: flex-end;
|
|
||||||
height: min-content;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.topic-likes-replies-data .topic-likes,
|
|
||||||
.topic-likes-replies-data .topic-replies {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 0.5em;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--primary-500);
|
|
||||||
svg {
|
|
||||||
color: var(--primary-600);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.topic-list-item {
|
.topic-list-item {
|
||||||
background: var(--d-content-background);
|
background: light-dark(#ffffff, #1f1f1f);
|
||||||
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.discourse-no-touch & {
|
background: light-dark(#fcfcfc, #161616);
|
||||||
border-color: var(--accent-color);
|
|
||||||
background: var(--d-content-background);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.selected {
|
|
||||||
box-shadow: 0px 0px 0px 2px var(--accent-color),
|
|
||||||
0px 0px 12px 1px var(--topic-card-shadow);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bookmarks
|
|
||||||
|
|
||||||
.topic-list-item.bookmark-list-item {
|
|
||||||
.link-bottom-line {
|
|
||||||
font-size: unset;
|
|
||||||
}
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata category dropdown";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata metadata category dropdown";
|
|
||||||
}
|
|
||||||
&.has-metadata {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata category dropdown";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata metadata category dropdown";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt . . dropdown"
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt category category dropdown";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
|
||||||
.post-excerpt {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.has-metadata {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"avatar update metadata metadata metadata metadata metadata dropdown"
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt . . dropdown"
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt category category dropdown";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.author-avatar {
|
|
||||||
grid-area: avatar;
|
|
||||||
}
|
|
||||||
td.main-link .link-bottom-line {
|
|
||||||
display: contents;
|
|
||||||
.badge-category__wrapper {
|
|
||||||
grid-area: category;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: min-content;
|
|
||||||
justify-self: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
display: contents;
|
|
||||||
.bookmark-metadata {
|
|
||||||
grid-area: metadata;
|
|
||||||
}
|
|
||||||
.bookmark-status-with-link {
|
|
||||||
grid-column: 1/-2;
|
|
||||||
grid-row: 1/2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.post-excerpt {
|
|
||||||
grid-area: excerpt;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.topic-list-data:last-of-type {
|
|
||||||
display: contents;
|
|
||||||
.bookmark-actions-dropdown {
|
|
||||||
grid-area: dropdown;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.post-metadata.topic-list-data.updated-at {
|
|
||||||
grid-area: update;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
td.activity .post-activity {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Assigned List
|
|
||||||
.topic-list-item.assigned-list-item {
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-column: 1/-3;
|
|
||||||
}
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . status dropdown"
|
|
||||||
"activity . . . likes-replies category dropdown";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-column: 1/-2 !important;
|
|
||||||
}
|
|
||||||
grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
|
|
||||||
grid-template-areas:
|
|
||||||
"category category . . . . status dropdown"
|
|
||||||
". . . . . . . dropdown"
|
|
||||||
"activity . . . . . likes-replies dropdown";
|
|
||||||
}
|
|
||||||
.assign-topic-buttons {
|
|
||||||
display: contents;
|
|
||||||
.assign-actions-dropdown {
|
|
||||||
grid-area: dropdown;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
td.topic-category-status-data {
|
|
||||||
display: contents;
|
|
||||||
}
|
|
||||||
.topic-status-card {
|
|
||||||
position: relative;
|
|
||||||
top: unset;
|
|
||||||
right: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// User Messages
|
|
||||||
|
|
||||||
body.user-messages-page .topic-list-item {
|
|
||||||
td.topic-category-data,
|
|
||||||
td.topic-likes-replies-data,
|
|
||||||
td.topic-status-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line {
|
|
||||||
grid-row: 1 / 2;
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . ."
|
|
||||||
"activity . . . . likes-replies likes-replies";
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-columns: 20px repeat(6, 1fr) auto;
|
|
||||||
grid-template-rows: 20px auto auto 30px;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . ."
|
|
||||||
"activity . . . . . . ."
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt excerpt . ."
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
|
||||||
@include breakpoint(extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . ."
|
|
||||||
"activity . . . . . . ."
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
|
||||||
"excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
|
||||||
grid-template-rows: auto auto;
|
|
||||||
grid-template-areas:
|
|
||||||
". . . . . . . ."
|
|
||||||
"activity . . . . . . .";
|
|
||||||
.topic-excerpt {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bulk select
|
|
||||||
|
|
||||||
.bulk-select-enabled .topic-list-body .topic-list-item {
|
|
||||||
td.topic-likes-replies-data {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 2/-1;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.topic-excerpt {
|
|
||||||
grid-area: excerpt;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
&.excerpt-expanded {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status" "bulk-select activity . . ."
|
|
||||||
"bulk-select excerpt excerpt excerpt category";
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select category . . . status"
|
|
||||||
"bulk-select . . . . ."
|
|
||||||
"bulk-select activity activity . . .";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status"
|
|
||||||
"bulk-select activity activity . category";
|
|
||||||
.bulk-select {
|
|
||||||
grid-area: bulk-select;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
align-self: center;
|
|
||||||
justify-self: center;
|
|
||||||
label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include breakpoint(large) {
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select . . . status"
|
|
||||||
"bulk-select activity activity . category";
|
|
||||||
}
|
|
||||||
@include breakpoint(mobile-extra-large) {
|
|
||||||
td.main-link .link-top-line,
|
|
||||||
&.--has-status-card td.main-link .link-top-line {
|
|
||||||
grid-column: 2/-1;
|
|
||||||
grid-row: 2;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
grid-template-areas:
|
|
||||||
"bulk-select category . . . status"
|
|
||||||
"bulk-select . . . . ."
|
|
||||||
"bulk-select activity activity . . .";
|
|
||||||
}
|
}
|
||||||
|
border: 1px solid #cedde3;
|
||||||
}
|
}
|
||||||
|
|||||||
-123
@@ -1,123 +0,0 @@
|
|||||||
.post-stream {
|
|
||||||
.contents {
|
|
||||||
font-size: var(--font-up-1);
|
|
||||||
line-height: 1.25;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.posts .topic-navigation {
|
|
||||||
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
|
|
||||||
top: calc(
|
|
||||||
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
|
||||||
);
|
|
||||||
z-index: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-container .topic-timeline {
|
|
||||||
min-width: unset; // why we have this?
|
|
||||||
.timeline-scrollarea {
|
|
||||||
border-left: 1px solid var(--accent-color);
|
|
||||||
|
|
||||||
.timeline-scroller {
|
|
||||||
@include breakpoint("medium", $rule: min-width) {
|
|
||||||
padding: 0.25em;
|
|
||||||
border: 1px solid var(--accent-color);
|
|
||||||
border-radius: 0.75em;
|
|
||||||
padding-left: 0.5em;
|
|
||||||
margin-left: calc(-0.5em - 2.5px);
|
|
||||||
background: var(--d-content-background);
|
|
||||||
height: 40px !important; // height is coming from element style have no other choice
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-scroller-content {
|
|
||||||
// display: flex;
|
|
||||||
// flex-direction: column;
|
|
||||||
// gap: 0.25em;
|
|
||||||
}
|
|
||||||
.timeline-replies,
|
|
||||||
.timeline-ago {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.timeline-handle {
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
@include breakpoint("medium", $rule: min-width) {
|
|
||||||
width: 3px;
|
|
||||||
border-radius: 2px;
|
|
||||||
height: calc(100% - 6px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//should probably get rid of this extra specificity class in core?
|
|
||||||
.timeline-container.timeline-fullscreen {
|
|
||||||
@include breakpoint("medium", $rule: max-width) {
|
|
||||||
.topic-timeline .timeline-scrollarea-wrapper {
|
|
||||||
}
|
|
||||||
.topic-timeline
|
|
||||||
.timeline-scrollarea
|
|
||||||
.timeline-scroller
|
|
||||||
.timeline-scroller-content {
|
|
||||||
padding-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.container.posts,
|
|
||||||
#topic-footer-buttons {
|
|
||||||
padding: 0 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container.posts {
|
|
||||||
grid-template-columns: auto 150px;
|
|
||||||
@media screen and (max-width: 924px) {
|
|
||||||
grid-template-columns: auto auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-container .topic-timeline .timeline-ago {
|
|
||||||
max-width: unset;
|
|
||||||
overflow: unset;
|
|
||||||
text-overflow: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-container .topic-timeline .timeline-scroller-content {
|
|
||||||
overflow: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-topics__container
|
|
||||||
.more-topics__list
|
|
||||||
.topic-list-body
|
|
||||||
.topic-list-item:last-of-type {
|
|
||||||
border-bottom: 1px solid var(--primary-300);
|
|
||||||
}
|
|
||||||
|
|
||||||
.discourse-post-event .discourse-post-event-widget {
|
|
||||||
background: var(--d-content-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-topics__container .nav {
|
|
||||||
position: unset;
|
|
||||||
margin-block: unset;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-container.timeline-fullscreen
|
|
||||||
.topic-timeline
|
|
||||||
.timeline-scrollarea
|
|
||||||
.timeline-scroller
|
|
||||||
.timeline-handle {
|
|
||||||
float: none;
|
|
||||||
width: 5px;
|
|
||||||
position: relative;
|
|
||||||
right: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.post-controls .actions button {
|
|
||||||
font-size: var(--font-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.archetype-private_message {
|
|
||||||
--pm-border-radius: var(--d-border-radius);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
#topic-title {
|
||||||
|
z-index: 999;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
padding: 1.5rem 2rem 0.5em;
|
||||||
|
position: sticky;
|
||||||
|
top: var(--header-offset);
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .container.posts,
|
||||||
|
// .more-topics__container,
|
||||||
|
// #topic-footer-buttons {
|
||||||
|
// padding: 0 24px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.container.posts .topic-navigation {
|
||||||
|
top: calc(var(--header-offset, 60px) + 6em);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discourse-post-event .discourse-post-event-widget {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.more-topics__container
|
||||||
|
.more-topics__list
|
||||||
|
.topic-list-body
|
||||||
|
.topic-list-item:last-of-type {
|
||||||
|
border-bottom: 1px solid #cedde3;
|
||||||
|
}
|
||||||
+8
-18
@@ -1,22 +1,12 @@
|
|||||||
:root {
|
:root {
|
||||||
--d-max-width: 1000px;
|
|
||||||
--d-border-radius-large: 20px;
|
--d-border-radius-large: 20px;
|
||||||
--d-border-radius: 8px;
|
--d-button-border-radius: 20px;
|
||||||
|
--d-border-radius: 6px;
|
||||||
--d-input-border-radius: 6px;
|
--d-input-border-radius: 6px;
|
||||||
// --d-sidebar-row-height: 2.8em;
|
--accent-color: #595bca;
|
||||||
//the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
--accent-text-color: #ffffff;
|
||||||
--spacing-block-xs: 0.25em;
|
--d-nav-color--active: var(--accent-color);
|
||||||
--spacing-block-s: 0.5em;
|
--primary: #0c0d27;
|
||||||
--spacing-block-sm: 0.75em;
|
--main-grid-gap: 2em;
|
||||||
--spacing-block-m: 1em;
|
--d-max-width: 1000px;
|
||||||
--spacing-block-l: 1.5em;
|
|
||||||
--spacing-block-xl: 2em;
|
|
||||||
--spacing-block-xxl: 4em;
|
|
||||||
--spacing-inline-xs: 0.25em;
|
|
||||||
--spacing-inline-s: 0.5rem;
|
|
||||||
--spacing-inline-sm: 0.75rem;
|
|
||||||
--spacing-inline-m: 1rem;
|
|
||||||
--spacing-inline-l: 1.5rem;
|
|
||||||
--spacing-inline-xl: 2rem;
|
|
||||||
--spacing-inline-xxl: 4rem;
|
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-10
@@ -1,11 +1,2 @@
|
|||||||
enable_welcome_banner:
|
example_setting:
|
||||||
default: true
|
default: true
|
||||||
description: "Overrides the core `enable welcome banner` site setting"
|
|
||||||
|
|
||||||
search_experience:
|
|
||||||
type: enum
|
|
||||||
default: search_field
|
|
||||||
choices:
|
|
||||||
- search_field
|
|
||||||
- search_icon
|
|
||||||
description: "Overrides the core `search experience` site setting"
|
|
||||||
|
|||||||
@@ -1,63 +0,0 @@
|
|||||||
# frozen_string_literal: true
|
|
||||||
|
|
||||||
describe "Horizon theme | High level", type: :system do
|
|
||||||
let!(:theme) { upload_theme }
|
|
||||||
fab!(:current_user) { Fabricate(:user) }
|
|
||||||
fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
|
|
||||||
fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
|
|
||||||
fab!(:category)
|
|
||||||
fab!(:topic_1) { Fabricate(:topic_with_op, category: category, tags: [tag_1, tag_2]) }
|
|
||||||
let(:topic_list) { PageObjects::Components::TopicList.new }
|
|
||||||
let(:topic_page) { PageObjects::Pages::Topic.new }
|
|
||||||
let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
|
|
||||||
|
|
||||||
def run_all_high_level_tests
|
|
||||||
expect(page).to have_css(".experimental-screen")
|
|
||||||
|
|
||||||
expect(sidebar).to have_categories_section
|
|
||||||
expect(sidebar).to have_section_link(category.name)
|
|
||||||
|
|
||||||
expect(topic_list).to have_topic(topic_1)
|
|
||||||
|
|
||||||
# Ensure the topic list columns are in the correct order via 'topic-list-columns' valueTransformer
|
|
||||||
#
|
|
||||||
# NOTE(martin): Maybe there is a better way to do this in a qunit test instead.
|
|
||||||
topic_item = find(topic_list.topic_list_item_class(topic_1))
|
|
||||||
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
|
||||||
[
|
|
||||||
"main-link topic-list-data",
|
|
||||||
"topic-activity-data",
|
|
||||||
"topic-status-data",
|
|
||||||
"topic-category-data",
|
|
||||||
"topic-likes-replies-data",
|
|
||||||
],
|
|
||||||
)
|
|
||||||
|
|
||||||
# Can see a topic in the list and navigate to it successfully
|
|
||||||
topic_list.visit_topic(topic_1)
|
|
||||||
expect(topic_page).to have_topic_title(topic_1.title)
|
|
||||||
|
|
||||||
# Can change site colors from the sidebar palette, which are remembered across page reloads
|
|
||||||
palette_menu =
|
|
||||||
PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
|
|
||||||
palette_menu.expand
|
|
||||||
find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
|
|
||||||
expect(page).to have_css(".custom-color-marigold")
|
|
||||||
page.refresh
|
|
||||||
expect(page).to have_css(".custom-color-marigold")
|
|
||||||
end
|
|
||||||
|
|
||||||
it "works for anon" do
|
|
||||||
visit "/"
|
|
||||||
run_all_high_level_tests
|
|
||||||
end
|
|
||||||
|
|
||||||
context "for signed in users" do
|
|
||||||
before { sign_in(current_user) }
|
|
||||||
|
|
||||||
it "works" do
|
|
||||||
visit "/"
|
|
||||||
run_all_high_level_tests
|
|
||||||
end
|
|
||||||
end
|
|
||||||
end
|
|
||||||
Reference in New Issue
Block a user