Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 David Taylor
|
ab76fd345d | ||
|
David Taylor
|
3777405f0b | ||
|
Jordan Vidrine
|
e18b9e89eb | ||
|
Jordan Vidrine
|
9381e56c47 | ||
|
Jordan Vidrine
|
9a8a9d4ad3 | ||
|
chapoi
|
91f3cc3ebb | ||
|
Jordan Vidrine
|
7d53fe08ce | ||
|
Jordan Vidrine
|
328b8cbab5 | ||
|
Martin Brennan
|
ef2925a663 | ||
|
Jordan Vidrine
|
41ee5a5358 |
+4
-4
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "next-gen",
|
||||
"name": "Horizon Theme",
|
||||
"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",
|
||||
@@ -9,7 +9,7 @@
|
||||
"maximum_discourse_version": null,
|
||||
"assets": {},
|
||||
"modifiers": {
|
||||
"svg_icons": ["fa-fire"]
|
||||
"svg_icons": ["fire"]
|
||||
},
|
||||
"components": [
|
||||
"https://github.com/discourse/discourse-sidebar-new-topic-button.git",
|
||||
@@ -17,7 +17,7 @@
|
||||
"https://github.com/discourse/discourse-full-width-component.git"
|
||||
],
|
||||
"color_schemes": {
|
||||
"next_gen": {
|
||||
"Horizon": {
|
||||
"primary": "1A1A1A",
|
||||
"primary-low": "ebecf9",
|
||||
"primary-500": "8591ad",
|
||||
@@ -29,7 +29,7 @@
|
||||
"selected": "d8d9f3",
|
||||
"hover": "ebebf9"
|
||||
},
|
||||
"next_gen_dark": {
|
||||
"Horizon Dark": {
|
||||
"primary": "F1EFF9",
|
||||
"secondary": "1e1a36",
|
||||
"header_background": "00091d",
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
|
||||
|
||||
:root {
|
||||
--accent-color: #{$accent-color};
|
||||
--background-color: #f5f8ff;
|
||||
}
|
||||
@@ -11,3 +11,4 @@
|
||||
@import "box-view";
|
||||
@import "chat";
|
||||
@import "misc";
|
||||
@import "mobile-stuff";
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
const TopicAuthorAvatarColumn = <template>
|
||||
<span class="topic-author-avatar">
|
||||
{{avatar @topic.creator imageSize="large"}}
|
||||
</span>
|
||||
</template>;
|
||||
|
||||
<template>
|
||||
<span class="topic-author-avatar">
|
||||
{{avatar @topic.creator imageSize="large"}}
|
||||
</span>
|
||||
</template>
|
||||
}
|
||||
export default TopicAuthorAvatarColumn;
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
import Component from "@glimmer/component";
|
||||
const TopicAuthorColumn = <template>
|
||||
<span class="topic-author">@{{@topic.creator.username}}</span>
|
||||
</template>;
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class="topic-author">@{{@topic.creator.username}}</span>
|
||||
</template>
|
||||
}
|
||||
export default TopicAuthorColumn;
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { categoryLinkHTML } from "discourse/helpers/category-link";
|
||||
|
||||
export default class TopicAuthorColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
const TopicCategoryColumn = <template>
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</template>;
|
||||
|
||||
<template>
|
||||
{{categoryLinkHTML @topic.category}}
|
||||
</template>
|
||||
}
|
||||
export default TopicCategoryColumn;
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
import Component from "@glimmer/component";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
export default class TopicLikesColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
const TopicLikesColumn = <template>
|
||||
{{#if @topic.like_count}}
|
||||
<span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
<template>
|
||||
{{#if @topic.like_count}}
|
||||
<span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
export default TopicLikesColumn;
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
import Component from "@glimmer/component";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
|
||||
export default class TopicRepliesColumn extends Component {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
}
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if @topic.posts_count}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
<template>
|
||||
{{#if @topic.posts_count}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
export default TopicRepliesColumn;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { action } from "@ember/object";
|
||||
import { service } from "@ember/service";
|
||||
import { and } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicStatusColumn extends Component {
|
||||
@service currentUser;
|
||||
@@ -43,26 +44,38 @@ export default class TopicStatusColumn extends Component {
|
||||
}
|
||||
|
||||
@action
|
||||
togglePinned(e) {
|
||||
e.preventDefault();
|
||||
togglePinned(event) {
|
||||
event.preventDefault();
|
||||
this.args.topic.togglePinnedForUser();
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if @topic.bookmarked}}
|
||||
<span class={{this.statusClass}}>{{icon "bookmark"}}Bookmarked</span>
|
||||
<span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
|
||||
(themePrefix "topic_bookmarked")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if (and @topic.closed @topic.archived)~}}
|
||||
<span class={{this.statusClass}}>Locked and Archived</span>
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_closed_and_archived")
|
||||
}}</span>
|
||||
{{else if @topic.closed}}
|
||||
<span class={{this.statusClass}}>Locked</span>
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_closed")
|
||||
}}</span>
|
||||
{{else if @topic.archived}}
|
||||
<span class={{this.statusClass}}>Archived</span>
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_archived")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if @topic.is_warning}}
|
||||
<span class={{this.statusClass}}>Warning</span>
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_warning")
|
||||
}}</span>
|
||||
{{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
|
||||
<span class={{this.statusClass}}>Private Message</span>
|
||||
<span class={{this.statusClass}}>{{i18n
|
||||
(themePrefix "topic_personal_message")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{#if @topic.pinned}}
|
||||
{{#if this.canAct}}
|
||||
@@ -70,9 +83,11 @@ export default class TopicStatusColumn extends Component {
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack"}}Pinned</button>
|
||||
>{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon "thumbtack"}}Pinned</span>
|
||||
<span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
|
||||
(themePrefix "topic_pinned")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
{{else if @topic.unpinned}}
|
||||
{{#if this.canAct}}
|
||||
@@ -80,17 +95,21 @@ export default class TopicStatusColumn extends Component {
|
||||
type="button"
|
||||
{{on "click" this.togglePinned}}
|
||||
class={{this.statusClass}}
|
||||
>{{icon "thumbtack" class="unpinned"}}Unpinned</button>
|
||||
>{{icon "thumbtack" class="unpinned"}}{{i18n
|
||||
(themePrefix "topic_unpinned")
|
||||
}}</button>
|
||||
{{else}}
|
||||
<span class={{this.statusClass}}>{{icon
|
||||
"thumbtack"
|
||||
class="unpinned"
|
||||
}}Unpinned</span>
|
||||
}}{{i18n (themePrefix "topic_unpinned")}}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if this.heatMap}}
|
||||
<span class="topic-status-card --hot">{{icon "fa-fire"}}Hot</span>
|
||||
<span class="topic-status-card --hot">{{icon "fire"}}{{i18n
|
||||
(themePrefix "topic_hot")
|
||||
}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -1,67 +1,11 @@
|
||||
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";
|
||||
const ExperimentalScreen = <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>;
|
||||
|
||||
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>
|
||||
}
|
||||
export default ExperimentalScreen;
|
||||
|
||||
+10
-3
@@ -1,5 +1,12 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: ""
|
||||
settings:
|
||||
example_setting: A description of a setting.
|
||||
description: "A simple, beautiful theme for the future of Discourse that improves the out of the box experience for sites."
|
||||
topic_bookmarked: "Bookmarked"
|
||||
topic_closed_archived: "Closed and archived"
|
||||
topic_closed: "Closed"
|
||||
topic_archived: "Archived"
|
||||
topic_warning: "Warning"
|
||||
topic_personal_message: "Personal message"
|
||||
topic_pinned: "Pinned"
|
||||
topic_unpinned: "Unpinned"
|
||||
topic_hot: "Hot"
|
||||
|
||||
+1
-1
@@ -7,7 +7,7 @@
|
||||
"prettier": "2.8.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22",
|
||||
"node": ">= 18",
|
||||
"npm": "please-use-pnpm",
|
||||
"yarn": "please-use-pnpm",
|
||||
"pnpm": "9.x"
|
||||
|
||||
+21
-11
@@ -5,11 +5,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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 .experimental-screen {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
max-width: unset !important;
|
||||
.has-full-page-chat & {
|
||||
display: none;
|
||||
@@ -35,7 +50,7 @@
|
||||
position: fixed;
|
||||
width: var(--d-border-radius-large);
|
||||
height: var(--d-border-radius-large);
|
||||
background-color: var(--tertiary-50);
|
||||
background-color: var(--background-color);
|
||||
z-index: 399;
|
||||
-webkit-mask: radial-gradient(
|
||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||
@@ -46,17 +61,15 @@
|
||||
}
|
||||
&__top-left {
|
||||
top: var(--header-offset);
|
||||
left: var(--left-distance);
|
||||
}
|
||||
&__top-right {
|
||||
top: var(--header-offset);
|
||||
transform: rotate(90deg);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
right: var(--d-border-radius-large);
|
||||
}
|
||||
&__bottom-left {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: var(--left-distance);
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
@@ -64,20 +77,17 @@
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
right: var(--d-border-radius-large);
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 399;
|
||||
background-color: var(--tertiary-50);
|
||||
background-color: var(--background-color);
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--d-border-radius-large);
|
||||
@media screen and (max-width: 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
|
||||
+28
-12
@@ -30,26 +30,42 @@
|
||||
var(--accent-color);
|
||||
}
|
||||
svg {
|
||||
color: var(--secondary);
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
.discourse-no-touch .btn-default.sidebar-new-topic-button,
|
||||
.discourse-no-touch .interface-color-selector-content .btn-default {
|
||||
border: none;
|
||||
&:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
|
||||
border: none;
|
||||
margin-left: 2px;
|
||||
&:hover {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 1px solid var(--primary-300);
|
||||
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);
|
||||
border: 1px solid var(--accent-color);
|
||||
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
@@ -60,7 +76,7 @@
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
0px 0px 0px 4px var(--button-box-shadow);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
@@ -94,7 +110,7 @@
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
@@ -106,7 +122,7 @@
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
0px 0px 0px 4px var(--button-box-shadow);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
|
||||
+24
-3
@@ -1,16 +1,37 @@
|
||||
.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-top-right-radius: var(--d-border-radius-large);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
padding: 0 1.5rem;
|
||||
border-top-right-radius: var(--d-border-radius-large);
|
||||
padding: 0 1.5em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
body.has-full-page-chat {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.chat-drawer .chat-drawer-container {
|
||||
box-shadow: 0px 0px 0px 2px var(--d-chat-border);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
+3
-1
@@ -1,7 +1,9 @@
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
padding-bottom: 1.5em;
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .d-header {
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
.list-controls #create-topic,
|
||||
.notifications-button-footer .reason .text,
|
||||
.pinned-button .reason .text,
|
||||
.more-topics__browse-more {
|
||||
.more-topics__browse-more,
|
||||
//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
|
||||
.footer-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+45
-9
@@ -1,19 +1,53 @@
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
// @include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
// }
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 2em;
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat) {
|
||||
background-color: var(--background-color);
|
||||
#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 {
|
||||
// margin-top: 1.5rem;
|
||||
@media screen and (max-width: 485px) {
|
||||
--main-grid-gap: 0;
|
||||
.full-page-chat.full-page-chat-sidebar-enabled,
|
||||
.c-navbar-container {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
grid-template-columns: var(--d-sidebar-width) 1fr 0px;
|
||||
#main-outlet {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
#main-outlet-wrapper {
|
||||
@include breakpoint(medium) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
gap: var(--main-grid-gap);
|
||||
@include breakpoint(tablet, $rule: min-width) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
// height: calc(100vh - var(--header-offset) - 4rem);
|
||||
// box-sizing: border-box;
|
||||
// > * {
|
||||
@@ -45,15 +79,17 @@ body:not(.has-full-page-chat) {
|
||||
.discourse-post-event-upcoming-events,
|
||||
.container.groups-index,
|
||||
.body-page,
|
||||
.container.badges {
|
||||
.container.badges,
|
||||
.topic-above-footer-buttons-outlet .presence-users,
|
||||
.global-notice {
|
||||
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: 1.25rem;
|
||||
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
@@ -43,3 +43,8 @@
|
||||
.d-editor-button-bar {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
//temp sepeate file to avoid merge hell… to be distributed later
|
||||
@include breakpoint(medium) {
|
||||
html,
|
||||
.d-header {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
}
|
||||
#main-outlet-wrapper {
|
||||
.navigation-topics & {
|
||||
@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;
|
||||
gap: var(--spacing-inline-sm);
|
||||
.select-kit-header {
|
||||
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 {
|
||||
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-list-item {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
//to be moved to topic card segment for general use
|
||||
// .navigation-category & {
|
||||
// .badge-category__wrapper {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-m) !important;
|
||||
.topic-category {
|
||||
order: -1;
|
||||
}
|
||||
//make mixin of this
|
||||
// .badge-category__wrapper {
|
||||
// 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)
|
||||
// );
|
||||
// }
|
||||
|
||||
// .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)
|
||||
// );
|
||||
// }
|
||||
}
|
||||
}
|
||||
.container.posts {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-m) !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);
|
||||
p {
|
||||
line-height: 1.65;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+6
-3
@@ -12,13 +12,16 @@
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.combo-box .combo-box-header,
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
.combo-box .combo-box-header {
|
||||
// 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);
|
||||
box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
|
||||
}
|
||||
}
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
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;
|
||||
}
|
||||
@@ -19,7 +18,7 @@
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--tertiary);
|
||||
color: var(--search-banner-text-color);
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
|
||||
+10
-1
@@ -1,4 +1,10 @@
|
||||
.sidebar-wrapper {
|
||||
@include breakpoint(medium) {
|
||||
background: var(--secondary);
|
||||
.sidebar-footer-wrapper {
|
||||
background: var(--secondary);
|
||||
}
|
||||
}
|
||||
.has-full-page-chat &,
|
||||
.has-full-page-chat & .sidebar-footer-wrapper {
|
||||
background: transparent;
|
||||
@@ -15,8 +21,11 @@
|
||||
// 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;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
.dropdown-menu__item .sidebar-section-link {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
.sidebar-section-wrapper {
|
||||
|
||||
+43
-10
@@ -24,11 +24,43 @@ $extra-large: 1280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
@media screen and (max-width: $extra-small) {
|
||||
@include breakpoint(medium) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
body.bulk-select-enabled .topic-list-item {
|
||||
grid-template-areas:
|
||||
"bulk-select avatar author status status . activity"
|
||||
". topic-title topic-title topic-title likes-replies likes-replies category";
|
||||
.bulk-select {
|
||||
grid-area: bulk-select;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
label {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@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:
|
||||
"bulk-select 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:
|
||||
"bulk-select 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";
|
||||
}
|
||||
}
|
||||
|
||||
body.user-messages-page .topic-list-item {
|
||||
.topic-category-status-data {
|
||||
display: none;
|
||||
@@ -121,19 +153,11 @@ body.user-messages-page .topic-list-item {
|
||||
"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) {
|
||||
@include breakpoint(medium) {
|
||||
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));
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
// display contents
|
||||
td.main-link,
|
||||
td.posters,
|
||||
@@ -332,3 +356,12 @@ body.user-messages-page .topic-list-item {
|
||||
.topic-list-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-list-item {
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
+36
-1
@@ -47,6 +47,14 @@
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
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);
|
||||
}
|
||||
z-index: z("composer", "content") - 1;
|
||||
padding: var(--spacing-block-l) var(--spacing-inline-xl);
|
||||
position: sticky;
|
||||
@@ -55,13 +63,29 @@
|
||||
background: var(--d-content-background);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
.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
|
||||
@@ -78,3 +102,14 @@
|
||||
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;
|
||||
}
|
||||
|
||||
+29
-3
@@ -1,12 +1,38 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
--accent-color: #393edb;
|
||||
--background-color: light-dark(#f5f8ff, #1b1c1e);
|
||||
--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 * 2) calc(c * 0.1) h / 0.5),
|
||||
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 * 2) calc(c * 0.125) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
|
||||
);
|
||||
--d-selected: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
|
||||
oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
|
||||
);
|
||||
--d-chat-border: light-dark(
|
||||
oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
|
||||
oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
|
||||
);
|
||||
--d-max-width: 1000px;
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
--accent-text-color: var(--secondary);
|
||||
--accent-text-color: light-dark(#ffffff, #0f1024);
|
||||
--d-content-background: var(--secondary);
|
||||
--d-nav-color--active: var(--accent-color);
|
||||
--d-sidebar-background: var(--tertiary-50);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-link-color: var(--primary);
|
||||
--d-sidebar-highlight-color: var(--primary);
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
example_setting:
|
||||
default: true
|
||||
Reference in New Issue
Block a user