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
-25
@@ -8,36 +8,19 @@
|
||||
"minimum_discourse_version": null,
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"modifiers": {
|
||||
"svg_icons": ["fa-fire"]
|
||||
},
|
||||
"components": [
|
||||
"https://github.com/discourse/discourse-sidebar-new-topic-button.git",
|
||||
"https://github.com/discourse/discourse-search-banner.git",
|
||||
"https://github.com/discourse/discourse-full-width-component.git"
|
||||
],
|
||||
"modifiers": {},
|
||||
"color_schemes": {
|
||||
"next_gen": {
|
||||
"primary": "1A1A1A",
|
||||
"primary-low": "ebecf9",
|
||||
"primary-500": "8591ad",
|
||||
"secondary": "ffffff",
|
||||
"header_background": "f5f8ff",
|
||||
"tertiary": "313270",
|
||||
"tertiary-low": "d8d9f3",
|
||||
"tertiary-50": "f5f8ff",
|
||||
"selected": "d8d9f3",
|
||||
"hover": "ebebf9"
|
||||
"secondary": "F5F8FF",
|
||||
"header_background": "F5F8FF",
|
||||
"tertiary": "595bca"
|
||||
},
|
||||
"next_gen_dark": {
|
||||
"primary": "F1EFF9",
|
||||
"secondary": "1e1a36",
|
||||
"header_background": "00091d",
|
||||
"header_primary": "F5F8FF",
|
||||
"tertiary": "6465ab",
|
||||
"tertiary-50": "131124",
|
||||
"selected": "1e1a36",
|
||||
"hover": "131124"
|
||||
"primary": "F5F8FF",
|
||||
"secondary": "1A1A1A",
|
||||
"header_background": "1A1A1A",
|
||||
"tertiary": "595bca"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
|
||||
|
||||
:root {
|
||||
--accent-color: #{$accent-color};
|
||||
--background-color: #f5f8ff;
|
||||
}
|
||||
+10
-10
@@ -1,13 +1,13 @@
|
||||
@import "buttons";
|
||||
@import "header";
|
||||
@import "hiddenstuff";
|
||||
@import "main";
|
||||
@import "nav-pills";
|
||||
@import "search-banner";
|
||||
@import "sidebar";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "variables";
|
||||
@import "box-view";
|
||||
@import "header";
|
||||
@import "sidebar";
|
||||
@import "main";
|
||||
@import "topic-cards";
|
||||
@import "search-banner";
|
||||
@import "nav-pills";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "hiddenstuff";
|
||||
@import "topics";
|
||||
@import "misc";
|
||||
@import "box-view";
|
||||
|
||||
@@ -1,6 +1,19 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
import ExperimentalScreen from "../components/experimental-screen";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet("above-main-container", ExperimentalScreen);
|
||||
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,14 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class="topic-author-avatar">
|
||||
{{avatar @topic.creator imageSize="large"}}
|
||||
</span>
|
||||
</template>
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class="topic-author">@{{@topic.creator.username}}</span>
|
||||
</template>
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { categoryLinkHTML } from "discourse/helpers/category-link";
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</template>
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
export default class TopicLikesColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @topic.like_count}}
|
||||
<span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
export default class TopicRepliesColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @topic.posts_count}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { and } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
export default class TopicStatusColumn extends Component {
|
||||
@service currentUser;
|
||||
@service siteSettings;
|
||||
|
||||
get canAct() {
|
||||
return this.currentUser && !this.args.disableActions;
|
||||
}
|
||||
|
||||
get statusClass() {
|
||||
let classes = ["topic-status-card"];
|
||||
if (this.args.topic.bookmarked) {
|
||||
classes.push("--bookmark");
|
||||
} else if (this.args.topic.closed && this.args.topic.archived) {
|
||||
classes.push("--locked --archived");
|
||||
} else if (this.args.topic.closed) {
|
||||
classes.push("--locked");
|
||||
} else if (this.args.topic.archived) {
|
||||
classes.push("--archived");
|
||||
} else if (this.args.topic.is_warning) {
|
||||
classes.push("--warning");
|
||||
} else if (
|
||||
this.args.showPrivateMessageIcon &&
|
||||
this.args.topic.isPrivateMessage
|
||||
) {
|
||||
classes.push("--private-message");
|
||||
} else if (this.args.topic.pinned) {
|
||||
classes.push("--pinned");
|
||||
} else if (this.args.topic.unpinned) {
|
||||
classes.push("--unpinned");
|
||||
}
|
||||
return classes.join(" ");
|
||||
}
|
||||
|
||||
get heatMap() {
|
||||
return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
|
||||
}
|
||||
|
||||
@action
|
||||
togglePinned(e) {
|
||||
e.preventDefault();
|
||||
this.args.topic.togglePinnedForUser();
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @topic.bookmarked}}
|
||||
<span class={{this.statusClass}}>{{icon "bookmark"}}Bookmarked</span>
|
||||
{{/if}}
|
||||
{{#if (and @topic.closed @topic.archived)~}}
|
||||
<span class={{this.statusClass}}>Locked and Archived</span>
|
||||
{{else if @topic.closed}}
|
||||
<span class={{this.statusClass}}>Locked</span>
|
||||
{{else if @topic.archived}}
|
||||
<span class={{this.statusClass}}>Archived</span>
|
||||
{{/if}}
|
||||
{{#if @topic.is_warning}}
|
||||
<span class={{this.statusClass}}>Warning</span>
|
||||
{{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
|
||||
<span class={{this.statusClass}}>Private Message</span>
|
||||
{{/if}}
|
||||
{{#if @topic.pinned}}
|
||||
{{#if this.canAct}}
|
||||
<button
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack"}}Pinned</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon "thumbtack"}}Pinned</span>
|
||||
{{/if}}
|
||||
{{else if @topic.unpinned}}
|
||||
{{#if this.canAct}}
|
||||
<button
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack" class="unpinned"}}Unpinned</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon
|
||||
"thumbtack"
|
||||
class="unpinned"
|
||||
}}Unpinned</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if this.heatMap}}
|
||||
<span class="topic-status-card --hot">{{icon "fa-fire"}}Hot</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@@ -1,67 +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 { cancel, throttle } from "@ember/runloop";
|
||||
import { htmlSafe } from "@ember/template";
|
||||
import { bind } from "discourse/lib/decorators";
|
||||
|
||||
export default class ExperimentalScreen extends Component {
|
||||
@tracked left = 0;
|
||||
@tracked right = 0;
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
cancel(this._throttledCalculateDistanceHandler);
|
||||
}
|
||||
|
||||
getDistance(element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
return rect;
|
||||
}
|
||||
|
||||
@bind
|
||||
calculateDistance() {
|
||||
this._throttledCalculateDistanceHandler = throttle(
|
||||
this,
|
||||
this._throttledCalculateDistance,
|
||||
50
|
||||
);
|
||||
}
|
||||
|
||||
_throttledCalculateDistance() {
|
||||
const element = document.getElementById("main-outlet");
|
||||
|
||||
if (element) {
|
||||
const distance = this.getDistance(element);
|
||||
this.left = distance.left;
|
||||
this.right = distance.right;
|
||||
}
|
||||
}
|
||||
|
||||
get distanceStyles() {
|
||||
return htmlSafe(
|
||||
`--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
|
||||
);
|
||||
}
|
||||
|
||||
@action
|
||||
onInsert() {
|
||||
this.calculateDistance();
|
||||
window.addEventListener("resize", this.calculateDistance);
|
||||
}
|
||||
|
||||
<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,81 +0,0 @@
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
|
||||
import TopicAuthorColumn from "../components/card/topic-author-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 TopicAuthor = <template>
|
||||
<td class="topic-author-data">
|
||||
<TopicAuthorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicAuthorAvatar = <template>
|
||||
<td class="topic-author-avatar-data">
|
||||
<TopicAuthorAvatarColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCategoryStatus = <template>
|
||||
<td class="topic-category-status-data">
|
||||
<TopicCategoryColumn @topic={{@topic}} />
|
||||
<TopicStatusColumn @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-author", {
|
||||
item: TopicAuthor,
|
||||
after: "activity",
|
||||
});
|
||||
columns.add("topic-category-status", {
|
||||
item: TopicCategoryStatus,
|
||||
after: "topic-author",
|
||||
});
|
||||
columns.add("topic-author-avatar", {
|
||||
item: TopicAuthorAvatar,
|
||||
after: "topic-category-status",
|
||||
});
|
||||
columns.add("topic-likes-replies", {
|
||||
item: TopicLikesReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.delete("posters");
|
||||
columns.delete("views");
|
||||
columns.delete("replies");
|
||||
return columns;
|
||||
}
|
||||
);
|
||||
|
||||
api.registerValueTransformer(
|
||||
"topic-list-item-class",
|
||||
({ value: classes, context }) => {
|
||||
if (context.topic.pinned || context.topic.pinned_globally) {
|
||||
classes.push("--pinned");
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
);
|
||||
|
||||
api.registerValueTransformer("topic-list-item-mobile-layout", () => {
|
||||
return false;
|
||||
});
|
||||
});
|
||||
},
|
||||
};
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: ""
|
||||
description: ''
|
||||
settings:
|
||||
example_setting: A description of a setting.
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
#main-outlet-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
+33
-24
@@ -1,20 +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);
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .experimental-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
max-width: unset !important;
|
||||
.has-full-page-chat & {
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 488px) {
|
||||
@media screen and (min-width: 1600px) {
|
||||
display: none;
|
||||
}
|
||||
width: 100%;
|
||||
@@ -35,8 +23,8 @@
|
||||
position: fixed;
|
||||
width: var(--d-border-radius-large);
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--tertiary-50);
|
||||
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),
|
||||
@@ -46,18 +34,32 @@
|
||||
}
|
||||
&__top-left {
|
||||
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: 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) * 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 {
|
||||
transform: rotate(-90deg);
|
||||
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) {
|
||||
left: var(--main-grid-gap);
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
@@ -65,8 +67,14 @@
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
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: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
@@ -74,14 +82,15 @@
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 399;
|
||||
background-color: var(--tertiary-50);
|
||||
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) * 2 + 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;
|
||||
}
|
||||
|
||||
+6
-128
@@ -1,137 +1,15 @@
|
||||
:root {
|
||||
--d-button-border-radius: 6.25rem;
|
||||
.btn {
|
||||
padding: 0.5em 1rem;
|
||||
}
|
||||
|
||||
.discourse-no-touch .topic-body .actions .fade-out {
|
||||
transition: none;
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
margin: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
}
|
||||
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 {
|
||||
.sidebar-new-topic-button__wrapper .btn {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-text-color);
|
||||
.d-icon {
|
||||
svg {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
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: 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 {
|
||||
.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);
|
||||
}
|
||||
|
||||
+9
-15
@@ -1,16 +1,10 @@
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0px 0px 1px 2px var(--tertiary-100),
|
||||
0px 0px 24px 4px var(--tertiary-100);
|
||||
border: none;
|
||||
}
|
||||
// .c-navbar-container {
|
||||
// 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 {
|
||||
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-message-container,
|
||||
// .chat-transcript {
|
||||
// background: transparent;
|
||||
// }
|
||||
|
||||
@@ -1,30 +1,3 @@
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
.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 {
|
||||
.list-controls #create-topic {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+42
-54
@@ -1,28 +1,53 @@
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 2em;
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
grid-template-columns: 0px 1fr minmax(0, var(--d-max-width)) 1fr;
|
||||
grid-template-areas:
|
||||
"space sidebar content"
|
||||
"space sidebar content";
|
||||
gap: 0 var(--main-grid-gap);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 488px) {
|
||||
#main-outlet-wrapper {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.powered-by-discourse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat) {
|
||||
background-color: var(--background-color);
|
||||
#main-outlet {
|
||||
// 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 {
|
||||
// margin-top: 1.5rem;
|
||||
@media screen and (max-width: 485px) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
gap: var(--main-grid-gap);
|
||||
// gap: 2em !important;
|
||||
// height: calc(100vh - var(--header-offset) - 4rem);
|
||||
// box-sizing: border-box;
|
||||
// what does this do?
|
||||
// > * {
|
||||
// height: inherit;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
padding-bottom: var(--spacing-block-l);
|
||||
position: relative;
|
||||
// height: inherit;
|
||||
// overflow: scroll;
|
||||
// &:has(.list-controls) {
|
||||
@@ -31,54 +56,17 @@ body:not(.has-full-page-chat) {
|
||||
// &:has(#topic-title) {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
//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,
|
||||
.search-banner,
|
||||
.container.viewing-self,
|
||||
.reviewable,
|
||||
.admin-content,
|
||||
.discourse-post-event-upcoming-events,
|
||||
.container.groups-index,
|
||||
.body-page,
|
||||
.container.badges {
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
> *:not(.full-page-chat) {
|
||||
padding-inline: 1.5em;
|
||||
@media screen and (max-width: 425px) {
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
}
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border-radius: 1.25rem;
|
||||
// border-radius: var(--d-border-radius-large);
|
||||
// border-radius: 1.25rem;
|
||||
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
background-color: var(--d-content-background);
|
||||
// background-color: light-dark(#ffffff, #000000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .global-notice {
|
||||
// margin-top: var(--spacing-block-m);
|
||||
// }
|
||||
}
|
||||
|
||||
.list-container {
|
||||
.topic-list-body {
|
||||
padding-top: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
aside.onebox {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
.d-editor-preview-wrapper {
|
||||
box-shadow: 0px 0px 1px 2px var(--tertiary-50),
|
||||
0px 0px 24px 4px var(--tertiary-50);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
padding: 1em;
|
||||
background-color: var(--d-content-background);
|
||||
.boxed.white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
+1
-43
@@ -1,45 +1,3 @@
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
+4
-17
@@ -1,36 +1,23 @@
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
background: #ffffff;
|
||||
z-index: 100;
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
max-width: unset;
|
||||
|
||||
.navigation-container {
|
||||
gap: 1rem;
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.combo-box .combo-box-header,
|
||||
.select-kit.is-expanded .select-kit-body,
|
||||
.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);
|
||||
// font-size: var(--font-up-1-rem);
|
||||
}
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.is-expanded .select-kit-body {
|
||||
background-color: #ffffff;
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
}
|
||||
.nav-pills > li > a:hover,
|
||||
.nav-pills > li button:hover {
|
||||
background: transparent;
|
||||
|
||||
+11
-12
@@ -5,11 +5,13 @@
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.5em;
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
--search-color: var(--tertiary-medium);
|
||||
@media screen and (max-width: 900px) {
|
||||
padding-bottom: 1em;
|
||||
padding: 2.5em 0 2.5em;
|
||||
margin-bottom: 2.5em;
|
||||
--search-color: #595bca;
|
||||
@media screen and (max-width: 700px) {
|
||||
padding: 1em 1em 0 1em;
|
||||
margin-bottom: 0.5em;
|
||||
border-bottom: none;
|
||||
}
|
||||
h1 {
|
||||
grid-column: 1/2;
|
||||
@@ -19,7 +21,7 @@
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--tertiary);
|
||||
color: #350c73;
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
@@ -62,8 +64,8 @@
|
||||
display: none;
|
||||
}
|
||||
.search-input {
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid var(--search-color);
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
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,
|
||||
@@ -75,10 +77,7 @@
|
||||
.search-menu .searching .d-icon {
|
||||
color: var(--search-color);
|
||||
}
|
||||
.panel-body {
|
||||
z-index: z("dropdown");
|
||||
}
|
||||
.results {
|
||||
background: var(--d-content-background);
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
}
|
||||
}
|
||||
|
||||
+13
-40
@@ -1,6 +1,15 @@
|
||||
:root {
|
||||
// --d-sidebar-background: #f5f8ff;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link {
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
.has-full-page-chat &,
|
||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
||||
background: #f5f8ff;
|
||||
|
||||
.has-full-page-chat & {
|
||||
background: transparent;
|
||||
}
|
||||
.sidebar-container {
|
||||
@@ -10,44 +19,8 @@
|
||||
.sidebar-sections {
|
||||
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.
|
||||
// – charlie: sure but I want it to be bigger by default
|
||||
// letter-spacing: 0.5px;
|
||||
border-radius: 10px; // visually somewhat consistent with border on main outlet (?)
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.sidebar-section-wrapper {
|
||||
padding-block: 0.45em;
|
||||
.sidebar-section-header {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.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-bottom: 1.5rem;
|
||||
@media screen and (max-width: 1000px) {
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
padding: 0 1rem;
|
||||
.admin-area .sidebar-wrapper .admin-panel {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
+3
-330
@@ -1,334 +1,7 @@
|
||||
// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
|
||||
// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
|
||||
// 1280x832 – desktop small – (Figma MacBook Air)
|
||||
|
||||
:root {
|
||||
--hot-color: oklch(63.79% 0.1823 34.77);
|
||||
}
|
||||
|
||||
$extra-small: 435px;
|
||||
$small: 576px;
|
||||
$medium: 980px;
|
||||
$extra-large: 1280px;
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
@media screen and (max-width: $extra-small) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
body.user-messages-page .topic-list-item {
|
||||
.topic-category-status-data {
|
||||
display: none;
|
||||
}
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
|
||||
@media screen and (max-width: $extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies";
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
|
||||
"avatar author . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
display: grid;
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
&.excerpt-expanded {
|
||||
grid-template-columns: 44px repeat(6, 1fr) auto;
|
||||
grid-template-rows: 22px auto auto 30px;
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt likes-replies category";
|
||||
@media screen and (max-width: $extra-large) {
|
||||
grid-template-areas:
|
||||
"avatar author status status . . . activity"
|
||||
"avatar topic-title topic-title topic-title topic-title . . ."
|
||||
". excerpt excerpt excerpt excerpt excerpt . likes-replies"
|
||||
". excerpt excerpt excerpt excerpt excerpt . category";
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
.topic-excerpt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
grid-column-gap: 12px;
|
||||
grid-row-gap: 8px;
|
||||
border-radius: var(--d-border-radius);
|
||||
@media screen and (max-width: $medium) {
|
||||
grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
|
||||
grid-template-rows: 22px minmax(22px, auto);
|
||||
grid-template-areas:
|
||||
"avatar author status status . . activity"
|
||||
". topic-title topic-title topic-title . . likes-replies"
|
||||
". topic-title topic-title topic-title . . category";
|
||||
}
|
||||
@media screen and (max-width: $small) {
|
||||
grid-template-columns: 25px auto repeat(6, 1fr);
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"category-status category-status category-status . . . . activity"
|
||||
"topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
|
||||
"avatar author . . . . . likes-replies";
|
||||
}
|
||||
@media screen and (max-width: $extra-small) {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--primary-200);
|
||||
}
|
||||
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0px 0px 26px 1px
|
||||
light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1));
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
background: light-dark(#fcfcfc, #161616);
|
||||
}
|
||||
|
||||
// display contents
|
||||
td.main-link,
|
||||
td.posters,
|
||||
td.posts,
|
||||
td.views,
|
||||
td.activity {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
td.num.posts a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// avatar & author
|
||||
.topic-author-avatar-data {
|
||||
grid-area: avatar;
|
||||
margin: 0;
|
||||
}
|
||||
.topic-author-avatar img.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: var(--d-border-radius);
|
||||
@media screen and (max-width: $small) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
td.topic-author-data {
|
||||
grid-area: author;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
.topic-author-data .topic-author {
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
// status
|
||||
.topic-status-card {
|
||||
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);
|
||||
height: min-content;
|
||||
grid-area: status;
|
||||
width: min-content;
|
||||
@media screen and (max-width: $small) {
|
||||
height: calc(100% - 2px);
|
||||
}
|
||||
svg {
|
||||
font-size: var(--font-down-1);
|
||||
color: var(--status-color);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-status-card.--bookmark {
|
||||
display: none;
|
||||
}
|
||||
.topic-status-card.--pinned,
|
||||
.topic-status-card.--unpinned {
|
||||
--status-color: var(--primary-500);
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
line-height: unset;
|
||||
}
|
||||
.topic-status-card.--hot {
|
||||
--status-color: var(--hot-color);
|
||||
}
|
||||
|
||||
// title
|
||||
td.main-link .link-top-line {
|
||||
font-size: var(--font-0);
|
||||
grid-area: topic-title;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-top-line .event-date {
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
|
||||
td.main-link a.topic-status {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td.main-link .link-top-line a.raw-topic-link {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.topic-post-badges .badge-notification.unread-posts {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--tertiary);
|
||||
overflow: hidden;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
padding: 0;
|
||||
top: -2px;
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
// excerpt
|
||||
.topic-excerpt {
|
||||
grid-area: excerpt;
|
||||
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;
|
||||
@media screen and (max-width: $small) {
|
||||
grid-area: category-status;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
td.topic-category-status-data .badge-category__wrapper {
|
||||
grid-area: category;
|
||||
}
|
||||
|
||||
td.topic-category-status-data .badge-category__wrapper {
|
||||
overflow: unset;
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 6px;
|
||||
align-self: flex-end;
|
||||
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)
|
||||
);
|
||||
|
||||
@media screen and (max-width: $small) {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.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: flex-end;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.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-header {
|
||||
display: none;
|
||||
border: 1px solid #cedde3;
|
||||
}
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
line-height: 1.25;
|
||||
}
|
||||
}
|
||||
|
||||
.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)
|
||||
);
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
z-index: z("composer", "content") - 1;
|
||||
padding: var(--spacing-block-l) var(--spacing-inline-xl);
|
||||
position: sticky;
|
||||
margin-bottom: 0;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
.container.posts,
|
||||
.more-topics__container,
|
||||
#topic-footer-buttons {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+7
-27
@@ -1,32 +1,12 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-button-border-radius: 20px;
|
||||
--d-border-radius: 6px;
|
||||
--d-input-border-radius: 6px;
|
||||
--accent-text-color: var(--secondary);
|
||||
--d-content-background: var(--secondary);
|
||||
--accent-color: #595bca;
|
||||
--accent-text-color: #ffffff;
|
||||
--d-nav-color--active: var(--accent-color);
|
||||
--d-sidebar-background: var(--tertiary-50);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-link-color: var(--primary);
|
||||
--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);
|
||||
// --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;
|
||||
--spacing-block-s: 0.5em;
|
||||
--spacing-block-sm: 0.75em;
|
||||
--spacing-block-m: 1em;
|
||||
--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;
|
||||
--primary: #0c0d27;
|
||||
--main-grid-gap: 2em;
|
||||
--d-max-width: 1000px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user