Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jordan Vidrine
|
d887ad9475 |
@@ -1,2 +0,0 @@
|
||||
< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
|
||||
|
||||
|
||||
+44
-60
@@ -1,9 +1,8 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (8.0.2)
|
||||
activesupport (7.2.1.1)
|
||||
base64
|
||||
benchmark (>= 0.3)
|
||||
bigdecimal
|
||||
concurrent-ruby (~> 1.0, >= 1.3.1)
|
||||
connection_pool (>= 2.2.5)
|
||||
@@ -13,83 +12,68 @@ GEM
|
||||
minitest (>= 5.1)
|
||||
securerandom (>= 0.3)
|
||||
tzinfo (~> 2.0, >= 2.0.5)
|
||||
uri (>= 0.13.1)
|
||||
ast (2.4.3)
|
||||
base64 (0.3.0)
|
||||
benchmark (0.4.1)
|
||||
bigdecimal (3.2.2)
|
||||
concurrent-ruby (1.3.5)
|
||||
connection_pool (2.5.3)
|
||||
drb (2.2.3)
|
||||
i18n (1.14.7)
|
||||
ast (2.4.2)
|
||||
base64 (0.2.0)
|
||||
bigdecimal (3.1.8)
|
||||
concurrent-ruby (1.3.4)
|
||||
connection_pool (2.4.1)
|
||||
drb (2.2.1)
|
||||
i18n (1.14.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
json (2.12.2)
|
||||
language_server-protocol (3.17.0.5)
|
||||
lint_roller (1.1.0)
|
||||
logger (1.7.0)
|
||||
minitest (5.25.5)
|
||||
parallel (1.27.0)
|
||||
parser (3.3.8.0)
|
||||
json (2.7.2)
|
||||
language_server-protocol (3.17.0.3)
|
||||
logger (1.6.1)
|
||||
minitest (5.25.1)
|
||||
parallel (1.26.3)
|
||||
parser (3.3.5.0)
|
||||
ast (~> 2.4.1)
|
||||
racc
|
||||
prettier_print (1.2.1)
|
||||
prism (1.4.0)
|
||||
racc (1.8.1)
|
||||
rack (3.1.15)
|
||||
rack (3.1.10)
|
||||
rainbow (3.1.1)
|
||||
regexp_parser (2.10.0)
|
||||
rubocop (1.76.0)
|
||||
regexp_parser (2.9.2)
|
||||
rubocop (1.67.0)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (~> 3.17.0.2)
|
||||
lint_roller (~> 1.1.0)
|
||||
language_server-protocol (>= 3.17.0)
|
||||
parallel (~> 1.10)
|
||||
parser (>= 3.3.0.2)
|
||||
rainbow (>= 2.2.2, < 4.0)
|
||||
regexp_parser (>= 2.9.3, < 3.0)
|
||||
rubocop-ast (>= 1.45.0, < 2.0)
|
||||
regexp_parser (>= 2.4, < 3.0)
|
||||
rubocop-ast (>= 1.32.2, < 2.0)
|
||||
ruby-progressbar (~> 1.7)
|
||||
unicode-display_width (>= 2.4.0, < 4.0)
|
||||
rubocop-ast (1.45.0)
|
||||
parser (>= 3.3.7.2)
|
||||
prism (~> 1.4)
|
||||
rubocop-capybara (2.22.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-discourse (3.12.1)
|
||||
unicode-display_width (>= 2.4.0, < 3.0)
|
||||
rubocop-ast (1.32.3)
|
||||
parser (>= 3.3.1.0)
|
||||
rubocop-capybara (2.21.0)
|
||||
rubocop (~> 1.41)
|
||||
rubocop-discourse (3.8.2)
|
||||
activesupport (>= 6.1)
|
||||
lint_roller (>= 1.1.0)
|
||||
rubocop (>= 1.73.2)
|
||||
rubocop-capybara (>= 2.22.0)
|
||||
rubocop-factory_bot (>= 2.27.0)
|
||||
rubocop-rails (>= 2.30.3)
|
||||
rubocop (>= 1.59.0)
|
||||
rubocop-capybara (>= 2.0.0)
|
||||
rubocop-factory_bot (>= 2.0.0)
|
||||
rubocop-rails (>= 2.25.0)
|
||||
rubocop-rspec (>= 3.0.1)
|
||||
rubocop-rspec_rails (>= 2.31.0)
|
||||
rubocop-factory_bot (2.27.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rails (2.32.0)
|
||||
rubocop-rspec_rails (>= 2.30.0)
|
||||
rubocop-factory_bot (2.26.1)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rails (2.26.2)
|
||||
activesupport (>= 4.2.0)
|
||||
lint_roller (~> 1.1)
|
||||
rack (>= 1.1)
|
||||
rubocop (>= 1.75.0, < 2.0)
|
||||
rubocop-ast (>= 1.44.0, < 2.0)
|
||||
rubocop-rspec (3.6.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec_rails (2.31.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec (~> 3.5)
|
||||
rubocop (>= 1.52.0, < 2.0)
|
||||
rubocop-ast (>= 1.31.1, < 2.0)
|
||||
rubocop-rspec (3.1.0)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rspec_rails (2.30.0)
|
||||
rubocop (~> 1.61)
|
||||
rubocop-rspec (~> 3, >= 3.0.1)
|
||||
ruby-progressbar (1.13.0)
|
||||
securerandom (0.4.1)
|
||||
securerandom (0.3.1)
|
||||
syntax_tree (6.2.0)
|
||||
prettier_print (>= 1.2.0)
|
||||
tzinfo (2.0.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
unicode-display_width (3.1.4)
|
||||
unicode-emoji (~> 4.0, >= 4.0.4)
|
||||
unicode-emoji (4.0.4)
|
||||
uri (1.0.3)
|
||||
unicode-display_width (2.6.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
@@ -99,4 +83,4 @@ DEPENDENCIES
|
||||
syntax_tree
|
||||
|
||||
BUNDLED WITH
|
||||
2.6.9
|
||||
2.5.21
|
||||
|
||||
+1
-2
@@ -130,6 +130,5 @@
|
||||
"header_primary": "ffffff",
|
||||
"hover": "584B3E"
|
||||
}
|
||||
},
|
||||
"screenshots": ["screenshots/light.png", "screenshots/dark.png"]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
html {
|
||||
--accent-color: #{$tertiary} !important;
|
||||
--accent-text-color: #fff;
|
||||
|
||||
--accent-text-color: #ffffff;
|
||||
// Background Colors
|
||||
--background-color: light-dark(
|
||||
oklch(from #{$tertiary} 96% calc(c * 0.125) h),
|
||||
@@ -11,7 +10,6 @@ html {
|
||||
oklch(from #{$secondary} calc(2 * l) c h),
|
||||
oklch(from #{$secondary} l c h)
|
||||
) !important;
|
||||
|
||||
// HeaderColors
|
||||
--header_primary-low-mid: light-dark(
|
||||
oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
|
||||
@@ -42,14 +40,17 @@ html {
|
||||
oklch(from #{$tertiary} 92% calc(c * 0.5) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
|
||||
) !important;
|
||||
|
||||
--d-nav-color--active: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
|
||||
--d-nav-color--hover: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 1.2) c h)
|
||||
) !important;
|
||||
|
||||
--link-color: light-dark(
|
||||
oklch(from #{$tertiary} l c h),
|
||||
oklch(from #{$tertiary} calc(l * 0.95) c h)
|
||||
@@ -77,6 +78,7 @@ html {
|
||||
oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
|
||||
oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
|
||||
) !important;
|
||||
|
||||
--d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
|
||||
--d-sidebar-highlight-hover-background: var(--d-selected) !important;
|
||||
--d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@import "box-view";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "categories-view";
|
||||
@import "color-choice";
|
||||
@import "composer";
|
||||
@import "composer-peek-mode";
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
if (!CSS.supports("(color: hsl(from white h s l))")) {
|
||||
if(!CSS.supports("(color: hsl(from white h s l))")){
|
||||
window.unsupportedBrowser = true;
|
||||
window.I18n.translations[I18n.locale].js.browser_update =
|
||||
'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||
window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
@@ -1,10 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("0.8", (api) => {
|
||||
api.registerValueTransformer(
|
||||
"hamburger-dropdown-click-outside-exceptions",
|
||||
({ value }) => {
|
||||
return [...value, ".topic-drafts-menu-content"];
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -1,6 +1,9 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import formatDate from "discourse/helpers/format-date";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class TopicActivityColumn extends Component {
|
||||
get topicUser() {
|
||||
@@ -24,25 +27,37 @@ export default class TopicActivityColumn extends Component {
|
||||
};
|
||||
} else if (this.args.topic.posts_count === 1) {
|
||||
return {
|
||||
user: this.args.topic.firstPosterUser,
|
||||
username: this.args.topic.last_poster_username,
|
||||
class: "--created",
|
||||
user: this.args.topic.creator,
|
||||
username: this.args.topic.creator.username,
|
||||
activityText: "user_posted",
|
||||
class: "--posted",
|
||||
};
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
<template>
|
||||
<span class={{concatClass "topic-activity" this.topicUser.class}}>
|
||||
<div class="topic-activity__user">
|
||||
{{#if this.topicUser.user}}
|
||||
{{avatar this.topicUser.user imageSize="small"}}
|
||||
{{else}}
|
||||
{{icon "pencil"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if this.topicUser.username}}
|
||||
<span
|
||||
class="topic-activity__username"
|
||||
>{{this.topicUser.username}}</span>
|
||||
<span class="dot-separator"></span>
|
||||
{{/if}}
|
||||
<div class="topic-activity__reason">
|
||||
{{i18n (themePrefix this.topicUser.activityText)}}
|
||||
</div>
|
||||
<div class="topic-activity__time">
|
||||
{{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
|
||||
{{formatDate
|
||||
@topic.bumpedAt
|
||||
leaveAgo="true"
|
||||
format="medium-with-ago-and-on"
|
||||
}}
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
import Component from "@glimmer/component";
|
||||
import avatar from "discourse/helpers/avatar";
|
||||
|
||||
export default class TopicCreatorColumn extends Component {
|
||||
get topicCreator() {
|
||||
return {
|
||||
user: this.args.topic.creator,
|
||||
class: "--topic-creator",
|
||||
};
|
||||
}
|
||||
|
||||
<template>
|
||||
<div class={{this.topicCreator.class}}>
|
||||
{{avatar this.topicCreator.user}}
|
||||
</div>
|
||||
</template>
|
||||
}
|
||||
@@ -1,12 +1,9 @@
|
||||
import { gt } from "truth-helpers";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import number from "discourse/helpers/number";
|
||||
import gt from "truth-helpers/helpers/gt";
|
||||
|
||||
const TopicRepliesColumn = <template>
|
||||
{{#if (gt @topic.replyCount 1)}}
|
||||
<span class="topic-replies">{{icon "reply"}}{{number
|
||||
@topic.posts_count
|
||||
}}</span>
|
||||
<span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
|
||||
{{/if}}
|
||||
</template>;
|
||||
|
||||
|
||||
@@ -30,9 +30,7 @@ export default class TopicStatusColumn extends Component {
|
||||
{{#if this.badge}}
|
||||
<span class="topic-status-card {{this.badge.className}}">{{icon
|
||||
this.badge.icon
|
||||
}}<p class="topic-status-card__name">{{i18n
|
||||
(themePrefix this.badge.text)
|
||||
}}</p></span>
|
||||
}}{{i18n (themePrefix this.badge.text)}}</span>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
|
||||
@@ -10,7 +10,6 @@ const DO_NOT_RENDER_LIST = ["login"];
|
||||
|
||||
export default class ExperimentalScreen extends Component {
|
||||
@service router;
|
||||
|
||||
@tracked left = 0;
|
||||
@tracked right = 0;
|
||||
resizeObserver;
|
||||
|
||||
@@ -3,18 +3,16 @@ import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import didUpdate from "@ember/render-modifiers/modifiers/did-update";
|
||||
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
|
||||
import { service } from "@ember/service";
|
||||
import { gt, not } from "truth-helpers";
|
||||
import { gt } from "truth-helpers";
|
||||
import CreateTopicButton from "discourse/components/create-topic-button";
|
||||
import not from "truth-helpers/helpers/not";
|
||||
|
||||
export default class SidebarNewTopicButton extends Component {
|
||||
@service composer;
|
||||
@service currentUser;
|
||||
@service siteSettings;
|
||||
@service router;
|
||||
@service header;
|
||||
@service appEvents;
|
||||
|
||||
@tracked category;
|
||||
@tracked tag;
|
||||
@@ -76,30 +74,12 @@ export default class SidebarNewTopicButton extends Component {
|
||||
this.tag = this.router.currentRoute.attributes?.tag || null;
|
||||
}
|
||||
|
||||
@action
|
||||
watchForComposer() {
|
||||
// this covers opening drafts from the hamburger menu
|
||||
this.appEvents.on("composer:will-open", this, this.closeHamburger);
|
||||
}
|
||||
|
||||
@action
|
||||
stopWatchingForComposer() {
|
||||
this.appEvents.off("composer:will-open", this, this.closeHamburger);
|
||||
}
|
||||
|
||||
@action
|
||||
closeHamburger() {
|
||||
this.header.hamburgerVisible = false;
|
||||
}
|
||||
|
||||
<template>
|
||||
{{#if this.shouldRender}}
|
||||
<div
|
||||
class="sidebar-new-topic-button__wrapper"
|
||||
{{didInsert this.getCategoryandTag}}
|
||||
{{didUpdate this.getCategoryandTag this.router.currentRoute}}
|
||||
{{didInsert this.watchForComposer}}
|
||||
{{willDestroy this.stopWatchingForComposer}}
|
||||
>
|
||||
<CreateTopicButton
|
||||
@canCreateTopic={{this.canCreateTopic}}
|
||||
|
||||
@@ -31,14 +31,13 @@ export default class UserColorPaletteSelector extends Component {
|
||||
@service site;
|
||||
@service session;
|
||||
@service interfaceColor;
|
||||
|
||||
@tracked anonColorPaletteId = this.#loadAnonColorPalette();
|
||||
@tracked userColorPaletteId = this.session.userColorSchemeId;
|
||||
@tracked cssLoaded = true;
|
||||
|
||||
get userColorPalettes() {
|
||||
const availablePalettes = listColorSchemes(this.site)
|
||||
?.map((userPalette) => {
|
||||
.map((userPalette) => {
|
||||
return {
|
||||
...userPalette,
|
||||
accent: `#${
|
||||
@@ -56,7 +55,7 @@ export default class UserColorPaletteSelector extends Component {
|
||||
// Match the light scheme with the corresponding dark id based in the name
|
||||
return (
|
||||
availablePalettes
|
||||
?.map((palette) => {
|
||||
.map((palette) => {
|
||||
if (palette.is_dark) {
|
||||
return palette;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { withPluginApi } from "discourse/lib/plugin-api";
|
||||
import TopicActivityColumn from "../components/card/topic-activity-column";
|
||||
import TopicCategoryColumn from "../components/card/topic-category-column";
|
||||
import TopicCreatorColumn from "../components/card/topic-creator-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";
|
||||
|
||||
@@ -23,18 +23,13 @@ const TopicCategory = <template>
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicReplies = <template>
|
||||
const TopicLikesReplies = <template>
|
||||
<td class="topic-likes-replies-data">
|
||||
<TopicLikesColumn @topic={{@topic}} />
|
||||
<TopicRepliesColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
const TopicCreator = <template>
|
||||
<td class="topic-creator-data">
|
||||
<TopicCreatorColumn @topic={{@topic}} />
|
||||
</td>
|
||||
</template>;
|
||||
|
||||
export default {
|
||||
name: "topic-list-customizations",
|
||||
|
||||
@@ -54,11 +49,7 @@ export default {
|
||||
});
|
||||
|
||||
columns.add("topic-likes-replies", {
|
||||
item: TopicReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.add("topic-creator", {
|
||||
item: TopicCreator,
|
||||
item: TopicLikesReplies,
|
||||
after: "topic-author-avatar",
|
||||
});
|
||||
columns.delete("views");
|
||||
@@ -85,9 +76,6 @@ export default {
|
||||
) {
|
||||
classes.push("--has-status-card");
|
||||
}
|
||||
if (context.topic.replyCount > 1) {
|
||||
classes.push("has-replies");
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
);
|
||||
@@ -95,34 +83,6 @@ export default {
|
||||
api.registerValueTransformer("topic-list-item-mobile-layout", () => {
|
||||
return false;
|
||||
});
|
||||
|
||||
api.registerBehaviorTransformer(
|
||||
"topic-list-item-click",
|
||||
({ context: { event }, next }) => {
|
||||
if (event.target.closest("a, button, input")) {
|
||||
return next();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const topicLink = event.target
|
||||
.closest("tr")
|
||||
.querySelector("a.raw-topic-link");
|
||||
|
||||
// Redespatch the click on the topic link, so that all key-handing is sorted
|
||||
topicLink.dispatchEvent(
|
||||
new MouseEvent("click", {
|
||||
ctrlKey: event.ctrlKey,
|
||||
metaKey: event.metaKey,
|
||||
shiftKey: event.shiftKey,
|
||||
button: event.button,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6,3 +6,4 @@ en:
|
||||
user_replied: "replied"
|
||||
user_posted: "posted"
|
||||
user_updated: "updated"
|
||||
|
||||
|
||||
+5
-6
@@ -1,14 +1,13 @@
|
||||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@discourse/lint-configs": "2.25.0",
|
||||
"ember-template-lint": "7.8.1",
|
||||
"eslint": "9.28.0",
|
||||
"prettier": "3.5.3",
|
||||
"stylelint": "16.20.0"
|
||||
"@discourse/lint-configs": "2.4.0",
|
||||
"ember-template-lint": "6.1.0",
|
||||
"eslint": "9.19.0",
|
||||
"prettier": "2.8.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22",
|
||||
"node": ">= 18",
|
||||
"npm": "please-use-pnpm",
|
||||
"yarn": "please-use-pnpm",
|
||||
"pnpm": "9.x"
|
||||
|
||||
Generated
+1766
-1085
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
+21
-62
@@ -1,6 +1,4 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
@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);
|
||||
@@ -21,46 +19,40 @@
|
||||
|
||||
.has-full-page-chat .chat-replying-indicator-container {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.has-full-page-chat .chat-selection-management {
|
||||
margin-bottom: var(--main-grid-gap);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.experimental-screen {
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
max-width: unset !important;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
container: content-width / inline-size;
|
||||
@media screen and (max-width: 488px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width <= 488px) {
|
||||
@include breakpoint(tablet) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__top-left,
|
||||
&__top-right,
|
||||
&__bottom-left,
|
||||
@@ -76,39 +68,38 @@
|
||||
transparent var(--d-border-radius-large),
|
||||
black var(--d-border-radius-large)
|
||||
);
|
||||
-webkit-mask: radial-gradient(
|
||||
circle at var(--d-border-radius-large) var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
transparent var(--d-border-radius-large),
|
||||
black var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
|
||||
&__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));
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: var(--left-distance);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--main-grid-gap);
|
||||
left: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@@ -117,48 +108,16 @@
|
||||
bottom: 0;
|
||||
left: var(--left-distance);
|
||||
height: var(--main-grid-gap);
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .experimental-screen {
|
||||
&__top-left {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__top-right {
|
||||
transform: rotate(-90deg) !important;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-left {
|
||||
transform: rotate(90deg);
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
left: unset;
|
||||
right: calc(var(--right-distance) - var(--d-border-radius-large));
|
||||
}
|
||||
|
||||
&__bottom-bar {
|
||||
right: var(--left-distance);
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
@@ -167,7 +126,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(
|
||||
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
|
||||
@@ -176,7 +135,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= 400px) {
|
||||
@media screen and (max-width: 400px) {
|
||||
.with-topic-progress {
|
||||
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
|
||||
}
|
||||
|
||||
+5
-19
@@ -8,13 +8,11 @@
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -28,37 +26,31 @@
|
||||
.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: 0 0 8px 1px var(--button-box-shadow);
|
||||
box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
|
||||
background: var(--d-content-background);
|
||||
color: var(--accent-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
background: var(--d-content-background);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--button-box-shadow);
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -66,41 +58,35 @@
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
#create-topic.btn,
|
||||
.discourse-no-touch .btn-default.ai-new-question-button {
|
||||
#create-topic.btn {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
box-shadow: 0 0 6px 1px var(--button-box-shadow);
|
||||
box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
oklch(from var(--accent-color) 50% c h)
|
||||
);
|
||||
box-shadow: 0 0 0 4px var(--button-box-shadow);
|
||||
box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: light-dark(
|
||||
oklch(from var(--accent-color) 40% c h),
|
||||
|
||||
@@ -1,357 +0,0 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.categories-and-latest {
|
||||
.category-list {
|
||||
border-collapse: separate;
|
||||
|
||||
th.topics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
padding-top: 1em;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"title topics"
|
||||
"category category"
|
||||
"subcategory subcategory";
|
||||
row-gap: 1em;
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
|
||||
td.category {
|
||||
display: contents;
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
border-bottom-left-radius: var(--d-border-radius-large);
|
||||
border-width: 2px;
|
||||
padding: 1em 1.5rem;
|
||||
}
|
||||
|
||||
tbody h3 {
|
||||
grid-area: title;
|
||||
padding: 1em 0 0 1.5rem;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.category-name {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
font-size: var(--font-up-1-rem);
|
||||
|
||||
.d-icon:first-of-type:not(.d-icon-lock),
|
||||
&.--style-square::before,
|
||||
&.--style-emoji .emoji {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon.d-icon-lock {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.topics {
|
||||
width: auto;
|
||||
padding: 1em 1.5rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.category-description {
|
||||
grid-area: category;
|
||||
padding: 0 1.5rem;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
grid-area: subcategory;
|
||||
gap: 0.25em 0.5em;
|
||||
padding: 0 1.5rem 1em;
|
||||
margin: 0;
|
||||
|
||||
.badge-category__wrapper {
|
||||
background-color: light-dark(
|
||||
oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
|
||||
oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
|
||||
);
|
||||
padding: 0.25em 0.5rem;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.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)
|
||||
);
|
||||
}
|
||||
|
||||
.badge-category.--style-square::before {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.latest-topic-list {
|
||||
.table-heading {
|
||||
border: 0;
|
||||
font-size: var(--font-up-1-rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: grid;
|
||||
grid-template-columns: min-content min-content auto min-content;
|
||||
grid-template-areas:
|
||||
"creator title title status"
|
||||
". category activity activity";
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.5rem;
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
text-overflow: ellipsis;
|
||||
padding: 0.75em 1rem;
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.main-link,
|
||||
.topic-stats {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.bottom-row {
|
||||
grid-area: category;
|
||||
|
||||
.discourse-tags {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-category__wrapper {
|
||||
border-radius: var(--d-border-radius);
|
||||
padding: 0.25em 0.5rem;
|
||||
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 viewport.until(md) {
|
||||
padding: 0.25em 0.5rem;
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-data {
|
||||
grid-area: likes-replies;
|
||||
}
|
||||
|
||||
.num.posts-map {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topic-last-activity {
|
||||
grid-area: activity;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: var(--font-down-1-rem);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.25em;
|
||||
height: 0.25em;
|
||||
background-color: var(--primary-500);
|
||||
border-radius: 100%;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-poster {
|
||||
grid-area: creator;
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
|
||||
.avatar {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: var(--d-border-radius-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.category-list.with-topics {
|
||||
margin-inline: 1rem;
|
||||
|
||||
.num.posts,
|
||||
.category-topics-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
&-item {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
tr:first-of-type {
|
||||
order: -2;
|
||||
}
|
||||
|
||||
tr.subcategories-list {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
tr:nth-last-of-type(2) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th.main-link {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes.with-subcategories {
|
||||
@include viewport.from(sm) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@include viewport.until(md) {
|
||||
padding-inline: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category {
|
||||
border: 0;
|
||||
|
||||
&-box-inner {
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
background: var(--d-content-background);
|
||||
box-shadow: 0 0 12px 1px var(--topic-card-shadow);
|
||||
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border-color: var(--accent-color);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-color),
|
||||
0 0 12px 1px var(--topic-card-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-box-heading {
|
||||
h3 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.badge-category {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 1em;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&.--style-square::before {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
&__name {
|
||||
flex-basis: 100%;
|
||||
font-size: var(--font-up-1-rem);
|
||||
}
|
||||
|
||||
.d-icon:not(.d-icon-lock),
|
||||
img.emoji {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: auto;
|
||||
width: 13%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: var(--font-down-1-rem);
|
||||
}
|
||||
|
||||
.subcategories {
|
||||
margin-top: auto;
|
||||
row-gap: 0.5em;
|
||||
|
||||
.subcategory {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+3
-35
@@ -1,13 +1,9 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
.full-page-chat & {
|
||||
padding: 0 1.5em;
|
||||
}
|
||||
padding: 0 1.5em;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
@@ -17,43 +13,21 @@ body.has-full-page-chat {
|
||||
|
||||
.chat-drawer-container {
|
||||
.is-expanded & {
|
||||
box-shadow: 0 0 0 2px var(--tertiary-medium);
|
||||
box-shadow: 0px 0px 0px 2px var(--tertiary-medium);
|
||||
}
|
||||
|
||||
.chat-drawer.is-expanded & {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar__title {
|
||||
padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer-outlet-container {
|
||||
z-index: z("composer", "content");
|
||||
|
||||
.peek-mode-active & {
|
||||
padding-bottom: 0;
|
||||
left: unset;
|
||||
right: var(--main-grid-gap);
|
||||
|
||||
&:has(.is-expanded) {
|
||||
z-index: calc(z("composer", "dropdown") + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer {
|
||||
.peek-mode-active & {
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-drawer .channels-list-container .chat-channel-row {
|
||||
margin-bottom: var(--spacing-block-xs);
|
||||
font-size: var(--font-up-1);
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--d-sidebar-active-background);
|
||||
}
|
||||
@@ -78,11 +52,5 @@ body.has-full-page-chat {
|
||||
}
|
||||
|
||||
.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
|
||||
z-index: z("modal", "dialog");
|
||||
}
|
||||
|
||||
.chat-replying-indicator-container {
|
||||
@include viewport.from(sm) {
|
||||
margin-left: calc(0.65em + 0.2rem);
|
||||
}
|
||||
z-index: z("composer", "content") + 1;
|
||||
}
|
||||
|
||||
@@ -4,21 +4,17 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
--d-sidebar-header-icon-color: var(--d-sidebar-link-color);
|
||||
--d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
|
||||
--d-sidebar-background: var(--background-color);
|
||||
--d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
|
||||
--d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
|
||||
--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),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (width >= 1300px) {
|
||||
@media screen and (min-width: 1300px) {
|
||||
html:not(.fullscreen-composer) {
|
||||
.peek-mode-toggle svg {
|
||||
transform: scaleX(-1);
|
||||
@@ -18,7 +18,6 @@
|
||||
transition: none;
|
||||
box-shadow: none;
|
||||
border-radius: var(--d-border-radius-large);
|
||||
|
||||
.grippie {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+3
-174
@@ -1,11 +1,8 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
#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);
|
||||
@@ -13,20 +10,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#reply-control.hide-preview:not(.draft) {
|
||||
@include viewport.from(sm) {
|
||||
@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);
|
||||
border-top-right-radius: var(--d-border-radius);
|
||||
border-top-left-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.user-selector,
|
||||
@@ -51,7 +43,6 @@
|
||||
.reply-area {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.reply-to,
|
||||
.submit-panel {
|
||||
padding-inline: var(--spacing-inline-sm);
|
||||
@@ -68,7 +59,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-button-bar {
|
||||
.btn:hover,
|
||||
.toolbar-popup-menu-options.is-expanded {
|
||||
@@ -80,12 +70,11 @@
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// to have parity with regular select-kit styling used elsewhere
|
||||
//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);
|
||||
@@ -99,163 +88,3 @@
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .translation-selector-dropdown {
|
||||
.select-kit-header.btn-default {
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
||||
#reply-control.composer-action-add_translation {
|
||||
.d-editor-preview .d-editor-translation-preview-wrapper {
|
||||
border-color: var(--d-sidebar-border-color);
|
||||
}
|
||||
|
||||
.d-editor-preview .d-editor-translation-preview-wrapper__header {
|
||||
top: 6.5rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: var(--background-color);
|
||||
color: var(--accent-color);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
}
|
||||
|
||||
.topic-title-translator input {
|
||||
width: 47.25vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.composer-open {
|
||||
body::after {
|
||||
height: 100vh;
|
||||
content: "";
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: black;
|
||||
z-index: calc(z("mobile-composer") - 1);
|
||||
user-select: none;
|
||||
animation: fade 0.3s forwards;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
background: var(--secondary);
|
||||
|
||||
&.open {
|
||||
top: 0;
|
||||
transform: none;
|
||||
height: 100dvh;
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#reply-title {
|
||||
border: 0;
|
||||
padding: var(--space-3) 0;
|
||||
border-radius: 0;
|
||||
background: var(--secondary);
|
||||
font-size: var(--font-up-1);
|
||||
margin: 0;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
padding-inline: var(--space-4);
|
||||
}
|
||||
|
||||
.d-editor {
|
||||
&-textarea-wrapper {
|
||||
border: 0;
|
||||
|
||||
&.in-focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
p[data-placeholder] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&-button-bar {
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border: 1px solid var(--primary-low);
|
||||
border-radius: var(--d-border-radius);
|
||||
background: var(--secondary-very-high);
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
margin-block: var(--space-3);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: var(--font-up-1);
|
||||
color: var(--primary-high);
|
||||
|
||||
&:not(a) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.composer-toggle-switch__slider {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.submit-panel {
|
||||
.cancel {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 3rem;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-0);
|
||||
padding: 0.4em 0.467em;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-preview {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// Full width layout. Ported from the Discourse Full Width theme component here
|
||||
// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
|
||||
// intend to move into core over time.
|
||||
@@ -15,31 +13,12 @@ $sidebar-width: 17em;
|
||||
}
|
||||
|
||||
.d-header #site-logo {
|
||||
// constraining the logo to fit its grid container
|
||||
// this prevents the logo from shifting header content
|
||||
// when the sidebar is opened
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: contain; // contains logo without squishing/stretching
|
||||
|
||||
// allows some flexibility for wide logos
|
||||
body:not(.has-sidebar-page) & {
|
||||
max-width: unset;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
max-width: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-header #site-text-logo {
|
||||
font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
|
||||
|
||||
.has-sidebar-page & {
|
||||
white-space: wrap;
|
||||
line-height: var(--line-height-medium);
|
||||
|
||||
@include line-clamp(2);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@@ -105,7 +84,7 @@ $sidebar-width: 17em;
|
||||
grid-area: extra-info;
|
||||
white-space: nowrap;
|
||||
|
||||
@include viewport.until(md) {
|
||||
@include breakpoint("tablet") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -129,7 +108,7 @@ $sidebar-width: 17em;
|
||||
// at narrower widths, when 1fr = 0
|
||||
// we can center without matching the sidebar's width
|
||||
// which allows the title to take up the remaining width
|
||||
@media screen and (width <= 1400px) {
|
||||
@media screen and (max-width: 1400px) {
|
||||
grid-template-columns:
|
||||
calc(var(--d-sidebar-width) - 11px)
|
||||
1fr
|
||||
@@ -138,7 +117,7 @@ $sidebar-width: 17em;
|
||||
auto;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1000px) {
|
||||
@media screen and (max-width: 1000px) {
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
@@ -159,7 +138,7 @@ $sidebar-width: 17em;
|
||||
|
||||
.d-header-mode {
|
||||
.bootstrap-mode {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,7 +150,7 @@ $sidebar-width: 17em;
|
||||
overflow: visible;
|
||||
|
||||
.title {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -191,11 +170,11 @@ $sidebar-width: 17em;
|
||||
.header-search--enabled .floating-search-input-wrapper {
|
||||
grid-area: extra-info;
|
||||
|
||||
@include viewport.until(md) {
|
||||
@include breakpoint(tablet) {
|
||||
grid-area: rspace;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -210,7 +189,7 @@ body.has-sidebar-page {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
@media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
|
||||
#reply-control.show-preview {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@@ -221,7 +200,7 @@ body.has-sidebar-page {
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (width <= calc($reply-area-max-width + ($sidebar-width * 2))) and (width >= calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
@media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
|
||||
#reply-control.show-preview:not(.fullscreen) {
|
||||
margin-left: $sidebar-width;
|
||||
width: auto;
|
||||
@@ -267,7 +246,7 @@ body.sidebar-animate {
|
||||
}
|
||||
|
||||
// provides some extra space for login buttons
|
||||
@media screen and (width >= 1400px) {
|
||||
@media screen and (min-width: 1400px) {
|
||||
.anon {
|
||||
.d-header .panel {
|
||||
grid-column-start: -4;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// Fixing bulk select (only needed for desktop)
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header {
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bulk-select-enabled {
|
||||
.topic-list-header .topic-list-data.default {
|
||||
position: sticky;
|
||||
top: 10em;
|
||||
}
|
||||
.topic-author-avatar-data {
|
||||
display: none;
|
||||
}
|
||||
@@ -13,9 +13,8 @@
|
||||
grid-area: bulk-select;
|
||||
margin-left: -0.5em;
|
||||
|
||||
@media screen and (width <= 576px) {
|
||||
@media screen and (max-width: 576px) {
|
||||
margin-top: 0;
|
||||
|
||||
label {
|
||||
padding-block: 0.345em;
|
||||
}
|
||||
@@ -40,6 +39,8 @@
|
||||
}
|
||||
|
||||
&.default {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.bulk-select,
|
||||
span:not(.bulk-select-topics, .d-button-label) {
|
||||
display: none;
|
||||
@@ -47,19 +48,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// bulk select
|
||||
.bulk-select-topics {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--secondary);
|
||||
border-radius: 0 0 0 var(--d-border-radius);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem;
|
||||
|
||||
padding: 1em;
|
||||
@media screen and (max-width: 1048px) {
|
||||
right: 0;
|
||||
}
|
||||
button {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+5
-6
@@ -1,10 +1,7 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
background: var(--background-color);
|
||||
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-bottom: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
@@ -51,10 +48,8 @@
|
||||
.discourse-no-touch .interface-color-selector-content {
|
||||
border: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
@@ -64,6 +59,10 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,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;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ body.static-login {
|
||||
"sidebar below-content";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.login-welcome {
|
||||
border-radius: none;
|
||||
border: none;
|
||||
|
||||
+14
-34
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 0.5em;
|
||||
}
|
||||
@@ -7,19 +5,17 @@
|
||||
html:not(:has(.has-full-page-chat)) {
|
||||
background-color: var(--background-color);
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
@@ -33,61 +29,52 @@ 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 viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.has-sidebar-page #main-outlet-wrapper {
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
|
||||
|
||||
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 viewport.from(lg) {
|
||||
grid-template-columns: 0 minmax(0, 1fr) 0;
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
grid-template-columns: 0px minmax(0, 1fr) 0px;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat, .wizard) {
|
||||
@include viewport.from(xl) {
|
||||
body:not(.has-full-page-chat) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint(medium) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
|
||||
@media screen and (width >= 768px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
gap: var(--main-grid-gap);
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
padding-bottom: var(--spacing-block-l);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
background-color: var(--d-content-background);
|
||||
|
||||
@include viewport.until(lg) {
|
||||
border-radius: 0;
|
||||
@include breakpoint(medium) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
html.composer-open & {
|
||||
padding-bottom: var(--composer-height);
|
||||
}
|
||||
|
||||
> *:not(.experimental-screen, .activate-account) {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
box-sizing: border-box;
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
@@ -98,15 +85,9 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
}
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
.welcome-banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#list-area {
|
||||
.show-more.has-topics {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint(medium, $rule: min-width) {
|
||||
width: auto;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
@@ -118,7 +99,6 @@ body:not(.has-full-page-chat, .wizard) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
padding-top: var(--spacing-block-m);
|
||||
}
|
||||
|
||||
+6
-36
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
@@ -67,7 +65,11 @@ input[type="color"]:focus,
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
#reply-control {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
// pinned topic excerpts are hidden on small screens too
|
||||
.fk-d-menu__trigger.topic-list-layout-trigger {
|
||||
display: none;
|
||||
@@ -83,7 +85,7 @@ input[type="color"]:focus,
|
||||
|
||||
.user-main .about .details {
|
||||
padding: 1em 1em 0;
|
||||
border-bottom: 0;
|
||||
border-bottom: 0px;
|
||||
border-radius: var(--d-border-radius);
|
||||
background-color: var(--primary-50);
|
||||
}
|
||||
@@ -103,35 +105,3 @@ input[type="color"]:focus,
|
||||
.period-chooser-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// compatibility with the top contributors sidebar theme component
|
||||
// https://meta.discourse.org/t/top-contributors-sidebar/215110
|
||||
.list-container
|
||||
#list-area
|
||||
> .contents
|
||||
> .topic-list:has(.discourse-top-contributors) {
|
||||
grid-template-areas: "head head" "body sidebar";
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
grid-template-areas: "head head" "body body";
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.discourse-top-contributors {
|
||||
width: auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include viewport.until(lg) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-contributors-heading {
|
||||
font-size: var(--font-up-2);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+22
-51
@@ -1,93 +1,77 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
// temp separate file to avoid merge hell… to be distributed later
|
||||
@include viewport.until(lg) {
|
||||
//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 viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-top: var(--spacing-block-sm);
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(
|
||||
--spacing-inline-m
|
||||
) !important; // override will be fixed when the whole chat page shenanigans is resolved
|
||||
) !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 viewport.until(sm) {
|
||||
@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-m);
|
||||
column-gap: var(--spacing-inline-s);
|
||||
row-gap: var(--spacing-block-xs);
|
||||
flex-basis: 100%;
|
||||
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: calc(
|
||||
(var(--spacing-block-s) - 2px) * -1
|
||||
); // 2px is width of the outline
|
||||
}
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
background: var(--d-content-background);
|
||||
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 horizontal alignment
|
||||
|
||||
); //pure visual correction for horitzontal alignment
|
||||
&:has(#create-topic) {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-bar,
|
||||
.navigation-controls,
|
||||
.category-breadcrumb {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-controls {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
gap: var(--spacing-inline-s);
|
||||
}
|
||||
}
|
||||
@@ -95,12 +79,12 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.topic-list-body {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
@@ -108,18 +92,16 @@
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
@include viewport.until(sm) {
|
||||
@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
|
||||
//make mixin of this
|
||||
.badge-category__wrapper {
|
||||
font-size: var(--font-down-2-rem);
|
||||
border-radius: var(--d-border-radius);
|
||||
@@ -141,15 +123,12 @@
|
||||
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);
|
||||
@@ -160,9 +139,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts {
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
padding-inline: var(--spacing-inline-xs) !important;
|
||||
|
||||
.main-avatar .avatar {
|
||||
@@ -176,22 +154,18 @@
|
||||
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
|
||||
//for core eventually, better way imo
|
||||
.topic-avatar {
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
|
||||
.d-icon {
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
@@ -201,32 +175,29 @@
|
||||
}
|
||||
|
||||
#topic-footer-buttons {
|
||||
@include viewport.until(sm) {
|
||||
@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 doesn't work well with rounded corners
|
||||
//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);
|
||||
|
||||
+3
-10
@@ -8,35 +8,29 @@
|
||||
|
||||
.navigation-container {
|
||||
gap: 1rem;
|
||||
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.combo-box .combo-box-header {
|
||||
// needs more specificity than just in the button file
|
||||
// needs more specificy than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border-radius: var(--d-border-radius);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border: 1px solid var(--primary-300);
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0 0 0 3px var(--button-box-shadow);
|
||||
|
||||
box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
border-color: transparent;
|
||||
@@ -53,7 +47,6 @@
|
||||
.discourse-no-touch & {
|
||||
background: transparent;
|
||||
color: var(--d-nav-color--hover);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@@ -5,12 +5,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.has-ai-conversations-sidebar {
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button {
|
||||
flex: 1 1 auto;
|
||||
|
||||
@@ -51,7 +45,6 @@
|
||||
border-radius: 0 var(--d-button-border-radius)
|
||||
var(--d-button-border-radius) 0;
|
||||
padding-right: 0.65em;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
+7
-27
@@ -1,24 +1,18 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.sidebar-wrapper,
|
||||
.sidebar-hamburger-dropdown {
|
||||
@include viewport.until(lg) {
|
||||
@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 {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
border-right: none;
|
||||
}
|
||||
@@ -26,38 +20,31 @@
|
||||
.sidebar-sections {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sidebar-section-link {
|
||||
transition: none;
|
||||
border-radius: var(--d-border-radius);
|
||||
}
|
||||
|
||||
.dropdown-menu__item .sidebar-section-link {
|
||||
border-radius: 0;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-wrapper {
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
padding-block: 0.45em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
.hamburger-panel .revamped & {
|
||||
margin-bottom: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-header {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include viewport.from(xl) {
|
||||
@include breakpoint(extra-large, $rule: min-width) {
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
@@ -65,7 +52,6 @@
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
--scrollbarThumbBg: var(--d-selected);
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
@@ -77,17 +63,11 @@
|
||||
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
|
||||
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// put the draft menu above the slide-out hamburger on small desktop screens
|
||||
@include viewport.until(md) {
|
||||
html:not(.mobile-view) {
|
||||
.topic-drafts-menu-content {
|
||||
z-index: z("modal", "overlay");
|
||||
}
|
||||
}
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
+400
-496
File diff suppressed because it is too large
Load Diff
+13
-11
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.post-stream {
|
||||
.contents {
|
||||
font-size: var(--font-up-1);
|
||||
@@ -8,14 +6,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts .topic-navigation:not(.with-topic-progress) {
|
||||
// super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
|
||||
top: calc(
|
||||
var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
|
||||
);
|
||||
z-index: 300;
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; // why we have this?
|
||||
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
|
||||
.timeline-scroller {
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
margin-left: -4.5px;
|
||||
background: var(--d-content-background);
|
||||
height: 40px !important; // height is coming from element style have no other choice
|
||||
@@ -26,11 +31,9 @@
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
|
||||
@include viewport.from(lg) {
|
||||
@include breakpoint("medium", $rule: min-width) {
|
||||
width: 8px;
|
||||
border-radius: 10px;
|
||||
height: calc(100% - 6px);
|
||||
@@ -39,9 +42,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
// should probably get rid of this extra specificity class in core?
|
||||
//should probably get rid of this extra specificity class in core?
|
||||
.timeline-container.timeline-fullscreen {
|
||||
@include viewport.until(lg) {
|
||||
@include breakpoint("medium", $rule: max-width) {
|
||||
.topic-timeline
|
||||
.timeline-scrollarea
|
||||
.timeline-scroller
|
||||
@@ -53,8 +56,7 @@
|
||||
|
||||
.container.posts {
|
||||
grid-template-columns: auto 8em;
|
||||
|
||||
@media screen and (width <= 924px) {
|
||||
@media screen and (max-width: 924px) {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
|
||||
+2
-2
@@ -3,8 +3,8 @@
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
|
||||
// the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
||||
// --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;
|
||||
|
||||
+11
-27
@@ -1,5 +1,3 @@
|
||||
@use "lib/viewport";
|
||||
|
||||
.welcome-banner {
|
||||
&__wrap {
|
||||
display: grid;
|
||||
@@ -11,11 +9,11 @@
|
||||
padding: 1.5em 0 2.5em;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin-top: 0;
|
||||
@@ -26,27 +24,22 @@
|
||||
grid-row: 1/-1;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
|
||||
@media screen and (width <= 1028px) {
|
||||
@media screen and (max-width: 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
@@ -56,29 +49,24 @@
|
||||
.search-menu-container .search-input {
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid var(--search-color);
|
||||
box-shadow: 0 4px 10px rgb(52, 6, 121, 15%);
|
||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||
}
|
||||
|
||||
.search-menu .search-input:focus-within,
|
||||
.search-menu-container .search-input:focus-within {
|
||||
border: 1px solid var(--search-color);
|
||||
outline: 2px solid var(--search-color);
|
||||
}
|
||||
|
||||
.search-menu .d-icon,
|
||||
.search-menu .searching .d-icon,
|
||||
.search-menu .searching .show-advanced-search .d-icon {
|
||||
color: var(--search-color);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
z-index: z("dropdown");
|
||||
}
|
||||
|
||||
.results {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
&__title {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
@@ -87,30 +75,26 @@
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: var(--search-color);
|
||||
|
||||
@media screen and (width <= 1028px) {
|
||||
@media screen and (max-width: 1028px) {
|
||||
font-size: var(--font-up-4);
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@media screen and (width <= 768px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
|
||||
@media screen and (width <= 600px) {
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
@include viewport.until(sm) {
|
||||
@include breakpoint("mobile-extra-large") {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,8 +36,9 @@ describe "Horizon theme | High level", type: :system do
|
||||
expect(topic_item.all("td").map { |el| el["class"] }).to eq(
|
||||
[
|
||||
"main-link topic-list-data",
|
||||
"topic-status-data",
|
||||
"topic-category-data",
|
||||
"topic-creator-data",
|
||||
"topic-likes-replies-data",
|
||||
"topic-activity-data",
|
||||
],
|
||||
)
|
||||
@@ -48,7 +49,7 @@ describe "Horizon theme | High level", type: :system do
|
||||
|
||||
# Can change site colors from the sidebar palette, which are remembered
|
||||
# across page reloads.
|
||||
marigold_palette = theme.color_schemes.find_by(name: "Marigold")
|
||||
marigold_palette = ColorScheme.find_by(name: "Marigold")
|
||||
palette_selector.open_palette_menu
|
||||
palette_selector.click_palette_menu_item(marigold_palette.name)
|
||||
expect(palette_selector).to have_no_palette_menu
|
||||
|
||||
@@ -26,9 +26,7 @@ module PageObjects
|
||||
end
|
||||
|
||||
def has_selected_palette?(palette)
|
||||
has_css?(
|
||||
".user-color-palette-selector-trigger[data-selected-color-palette-id=\"#{palette.id}\"]",
|
||||
)
|
||||
has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
|
||||
end
|
||||
|
||||
def has_loaded_css?
|
||||
|
||||
@@ -6,7 +6,7 @@ describe "Horizon theme | User color palette selector", type: :system do
|
||||
let(:set_theme_as_default) { true }
|
||||
let!(:theme) do
|
||||
horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
|
||||
horizon_theme.color_schemes.update_all(user_selectable: true)
|
||||
ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
|
||||
horizon_theme
|
||||
end
|
||||
fab!(:current_user) { Fabricate(:user) }
|
||||
@@ -16,8 +16,8 @@ describe "Horizon theme | User color palette selector", type: :system do
|
||||
let(:interface_color_selector) do
|
||||
PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
|
||||
end
|
||||
let(:marigold_palette) { theme.color_schemes.find_by(name: "Marigold") }
|
||||
let(:marigold_palette_dark) { theme.color_schemes.find_by(name: "Marigold Dark") }
|
||||
let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
|
||||
let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
|
||||
|
||||
before { SiteSetting.interface_color_selector = "sidebar_footer" }
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export default {
|
||||
extends: ["@discourse/lint-configs/stylelint"],
|
||||
};
|
||||
Reference in New Issue
Block a user