Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ty Correll
|
6c4f6de211 |
+8
-63
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "Horizon Theme",
|
||||
"name": "next-gen",
|
||||
"authors": "Design Team",
|
||||
"about_url": "TODO: Put your theme's public repo or Meta topic URL here",
|
||||
"license_url": "TODO: Put your theme's LICENSE URL here",
|
||||
@@ -8,74 +8,19 @@
|
||||
"minimum_discourse_version": null,
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"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"
|
||||
],
|
||||
"modifiers": {},
|
||||
"color_schemes": {
|
||||
"Horizon": {
|
||||
"next_gen": {
|
||||
"primary": "1A1A1A",
|
||||
"secondary": "ffffff",
|
||||
"secondary": "F5F8FF",
|
||||
"header_background": "F5F8FF",
|
||||
"tertiary": "595bca"
|
||||
},
|
||||
"Horizon Dark": {
|
||||
"primary": "ffffff",
|
||||
"next_gen_dark": {
|
||||
"primary": "F5F8FF",
|
||||
"secondary": "1A1A1A",
|
||||
"header_background": "1A1A1A",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
+4
-7
@@ -1,17 +1,14 @@
|
||||
@import "box-view";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "color-choice";
|
||||
@import "color-exploration";
|
||||
@import "composer";
|
||||
@import "compose";
|
||||
@import "header";
|
||||
@import "hiddenstuff";
|
||||
@import "main";
|
||||
@import "misc";
|
||||
@import "mobile-stuff";
|
||||
@import "nav-pills";
|
||||
@import "search-banner";
|
||||
@import "sidebar";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "variables";
|
||||
@import "box-view";
|
||||
@import "chat";
|
||||
@import "misc";
|
||||
|
||||
@@ -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:
|
||||
theme_metadata:
|
||||
description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
|
||||
topic_pinned: "Pinned"
|
||||
topic_hot: "Hot"
|
||||
user_replied: "replied"
|
||||
user_posted: "posted"
|
||||
user_updated: "updated"
|
||||
|
||||
description: ''
|
||||
settings:
|
||||
example_setting: A description of a setting.
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
#main-outlet-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
"prettier": "2.8.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18",
|
||||
"node": ">= 22",
|
||||
"npm": "please-use-pnpm",
|
||||
"yarn": "please-use-pnpm",
|
||||
"pnpm": "9.x"
|
||||
|
||||
+37
-41
@@ -4,38 +4,11 @@
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded {
|
||||
.experimental-screen {
|
||||
&__top-left,
|
||||
&__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) {
|
||||
max-width: unset !important;
|
||||
.has-full-page-chat & {
|
||||
display: none;
|
||||
}
|
||||
max-width: unset !important;
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
@@ -57,8 +30,8 @@
|
||||
position: fixed;
|
||||
width: var(--d-border-radius-large);
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--background-color);
|
||||
z-index: 399;
|
||||
background-color: var(--secondary);
|
||||
z-index: 999;
|
||||
-webkit-mask: radial-gradient(
|
||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
@@ -68,40 +41,63 @@
|
||||
}
|
||||
&__top-left {
|
||||
top: var(--header-offset);
|
||||
left: var(--left-distance);
|
||||
left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
&__top-right {
|
||||
top: var(--header-offset);
|
||||
transform: rotate(90deg);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + 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 {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: var(--left-distance);
|
||||
left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + 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: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 399;
|
||||
background-color: var(--background-color);
|
||||
z-index: 999;
|
||||
background-color: var(--secondary);
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--d-border-radius-large);
|
||||
left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
height: var(--d-border-radius-large);
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
|
||||
+104
-54
@@ -6,57 +6,79 @@
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-default,
|
||||
.btn-primary,
|
||||
.btn-danger,
|
||||
.select-kit .select-kit-header {
|
||||
padding: var(--spacing-block-s) var(--spacing-inline-m);
|
||||
// font-size: var(--font-up-1-rem);
|
||||
// border-radius: var(--d-button-border-radius);
|
||||
|
||||
&.no-text {
|
||||
padding-inline: 0.665rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
|
||||
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);
|
||||
}
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
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);
|
||||
}
|
||||
svg {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default,
|
||||
.select-kit .select-kit-header {
|
||||
border: 1px solid var(--accent-color);
|
||||
//id like to use rgba of the accent colour but how to derive that?
|
||||
// box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
|
||||
background: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//not shared with select-kit
|
||||
.btn-default {
|
||||
&:active {
|
||||
.discourse-no-touch & {
|
||||
color: var(--secondary);
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-primary,
|
||||
#create-topic.btn {
|
||||
background-color: var(--accent-color);
|
||||
@@ -66,22 +88,50 @@
|
||||
}
|
||||
&: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);
|
||||
}
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
&: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);
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
.discourse-no-touch & {
|
||||
// background: radial-gradient(
|
||||
// 65% 95% at 50% 50%,
|
||||
// rgba(0, 0, 0, 0.4) 0%,
|
||||
// rgba(0, 0, 0, 0) 100%
|
||||
// ),
|
||||
// var(--accent-color) !important;
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-controls {
|
||||
svg.d-icon {
|
||||
color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
|
||||
}
|
||||
}
|
||||
|
||||
//undoing the outline for select-kit, since Im using a custom visual cue
|
||||
.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
|
||||
.select-kit.single-select .select-kit-header:not(.btn):focus,
|
||||
.select-kit.single-select .select-kit-header:not(.btn):active {
|
||||
outline: transparent;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
+8
-50
@@ -1,57 +1,15 @@
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.has-full-page-chat .d-header {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
padding: 0 1.5em;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
padding: 0 1.5rem;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#reply-control {
|
||||
z-index: 999;
|
||||
}
|
||||
@@ -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 {
|
||||
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,8 @@
|
||||
.sidebar__panel-switch-button,
|
||||
.sidebar-section[data-section-name="messages"],
|
||||
.list-controls #create-topic,
|
||||
.notifications-button-footer .reason .text,
|
||||
.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 {
|
||||
.more-topics__browse-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+49
-101
@@ -1,119 +1,66 @@
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 2em;
|
||||
}
|
||||
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@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 {
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
|
||||
#main-outlet {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-sidebar-page) #main-outlet-wrapper {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
grid-template-columns: 0px minmax(0, 1fr) 0px;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
background-color: #f5f8ff;
|
||||
#main-outlet-wrapper {
|
||||
@include breakpoint(medium) {
|
||||
// margin-top: 1.5rem;
|
||||
@media screen and (max-width: 485px) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
@include breakpoint(tablet, $rule: min-width) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
gap: var(--main-grid-gap);
|
||||
// height: calc(100vh - var(--header-offset) - 4rem);
|
||||
// box-sizing: border-box;
|
||||
// > * {
|
||||
// height: inherit;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-block-l);
|
||||
max-width: unset;
|
||||
//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
|
||||
.list-controls,
|
||||
.list-container,
|
||||
#topic-title,
|
||||
.container.posts,
|
||||
#topic-footer-buttons,
|
||||
.more-topics__container,
|
||||
.welcome-banner,
|
||||
.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);
|
||||
// height: inherit;
|
||||
// overflow: scroll;
|
||||
// &:has(.list-controls) {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
// &:has(#topic-title) {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
> *:not(.full-page-chat) {
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1.5em;
|
||||
@media screen and (max-width: 425px) {
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
}
|
||||
border-radius: var(--d-border-radius-large);
|
||||
@include breakpoint(medium) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
// border-radius: var(--d-border-radius-large);
|
||||
// border-radius: 1.25rem;
|
||||
// .navigation-topics & {
|
||||
// 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;
|
||||
// }
|
||||
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#list-area {
|
||||
.show-more.has-topics {
|
||||
@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);
|
||||
}
|
||||
// .global-notice {
|
||||
// margin-top: var(--spacing-block-m);
|
||||
// }
|
||||
}
|
||||
|
||||
aside.onebox {
|
||||
@@ -121,7 +68,8 @@ aside.onebox {
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
border-radius: var(--d-border-radius-large);
|
||||
padding: 1em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
+2
-53
@@ -40,57 +40,6 @@
|
||||
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;
|
||||
.d-editor-button-bar {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
+15
-28
@@ -2,7 +2,7 @@
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: z("base");
|
||||
z-index: 100;
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
max-width: unset;
|
||||
|
||||
@@ -12,25 +12,13 @@
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.combo-box .combo-box-header {
|
||||
.combo-box .combo-box-header,
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
// needs more specificy than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
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 {
|
||||
@@ -40,22 +28,21 @@
|
||||
|
||||
.select-kit.is-expanded .select-kit-body {
|
||||
border-radius: var(--d-border-radius);
|
||||
border: 1px solid var(--accent-color);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.nav-pills > li > a:hover,
|
||||
.nav-pills > li button:hover {
|
||||
.discourse-no-touch & {
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: var(--d-nav-underline-height);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
background: transparent;
|
||||
color: var(--accent-color);
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: var(--d-nav-underline-height);
|
||||
background: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
.welcome-banner {
|
||||
z-index: calc(z("base") + 1);
|
||||
}
|
||||
|
||||
.custom-search-banner-wrap {
|
||||
display: grid;
|
||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||
@@ -11,17 +7,19 @@
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 1em;
|
||||
--search-color: #595bca;
|
||||
@media screen and (max-width: 900px) {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
h1 {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
padding: 0 1em;
|
||||
text-align: left;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--search-banner-text-color);
|
||||
color: #350c73;
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
@@ -65,7 +63,7 @@
|
||||
}
|
||||
.search-input {
|
||||
background: var(--d-content-background);
|
||||
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%);
|
||||
}
|
||||
.search-menu .search-input:focus-within,
|
||||
|
||||
+14
-36
@@ -1,16 +1,5 @@
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include breakpoint(medium) {
|
||||
background: var(--secondary);
|
||||
.sidebar-footer-wrapper {
|
||||
background: var(--secondary);
|
||||
.sidebar-footer-container::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.has-full-page-chat &,
|
||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
||||
.sidebar-wrapper {
|
||||
.has-full-page-chat & {
|
||||
background: transparent;
|
||||
}
|
||||
.sidebar-container {
|
||||
@@ -21,39 +10,26 @@
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar-section-link {
|
||||
// font-size: var(--font-up-1); // dont want to change fonts here just yet as font-size can be changed as a user pref.
|
||||
// font-family: "inter";
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
|
||||
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);
|
||||
}
|
||||
}
|
||||
padding-block: 0.45em;
|
||||
.sidebar-section-header {
|
||||
font-size: var(--font-down-2);
|
||||
// font-size: var(--font-down-1);
|
||||
}
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
--scrollbarThumbBg: var(--d-selected);
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:hover {
|
||||
.d-icon {
|
||||
@@ -62,9 +38,11 @@
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
margin-bottom: 1.5rem;
|
||||
@media screen and (max-width: 1000px) {
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-532
@@ -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 {
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
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 . . .";
|
||||
background: oklch(from var(--d-content-background) 97% c h);
|
||||
}
|
||||
border: 1px solid #cedde3;
|
||||
}
|
||||
|
||||
+41
-88
@@ -1,96 +1,68 @@
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
.contents p {
|
||||
// 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;
|
||||
top: calc(var(--header-offset, 60px) + 6em);
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeline-scroller {
|
||||
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(--secondary);
|
||||
height: 40px !important; //height is coming from element style have no other choice
|
||||
}
|
||||
.timelime-scroller-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.timeline-replies,
|
||||
.timeline-ago {
|
||||
line-height: 1;
|
||||
}
|
||||
.timeline-ago {
|
||||
// font-size: var(--font-down-1);
|
||||
}
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
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;
|
||||
}
|
||||
}
|
||||
#topic-title {
|
||||
z-index: 999;
|
||||
margin-bottom: 1em;
|
||||
padding: 1.5rem 2rem 0.5em;
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.container.posts,
|
||||
.more-topics__container,
|
||||
#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);
|
||||
border-bottom: 1px solid #cedde3;
|
||||
}
|
||||
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
@@ -102,22 +74,3 @@
|
||||
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);
|
||||
}
|
||||
|
||||
+15
-1
@@ -1,8 +1,22 @@
|
||||
:root {
|
||||
--d-max-width: 1000px;
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
--accent-color: #3c41c3;
|
||||
--accent-text-color: #ffffff;
|
||||
--d-content-background: #fff;
|
||||
--d-nav-color--active: var(--accent-color);
|
||||
--primary: #14171f;
|
||||
--header-background: #f5f8ff;
|
||||
--d-post-control-background--hover: #ebecf9;
|
||||
--d-post-control-text-color--hover: #242775;
|
||||
--d-sidebar-link-color: var(--primary);
|
||||
--d-sidebar-highlight-color: var(--primary);
|
||||
--d-sidebar-link-icon-color: #8591ad;
|
||||
--d-sidebar-section-link-icon-size: 1em;
|
||||
--d-sidebar-highlight-background: #ebecf9;
|
||||
--d-sidebar-active-background: #d8d9f3;
|
||||
--d-input-bg-color: var(--d-content-background);
|
||||
// --d-sidebar-row-height: 2.8em;
|
||||
//the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
||||
--spacing-block-xs: 0.25em;
|
||||
|
||||
+1
-10
@@ -1,11 +1,2 @@
|
||||
enable_welcome_banner:
|
||||
example_setting:
|
||||
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