shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more changes

Browse Source
This commit is contained in:
Jordan Vidrine
2025-02-27 15:23:42 -06:00
parent 4b188950e1
commit 2f2d1b8607
10 changed files with 215 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/common.scss
+2
View File
@@ -8,3 +8,5 @@
@import "buttons";
@import "chat";
@import "hiddenstuff";
@import "topics";
@import "misc";
javascripts/discourse/api-initializers/next-gen.gjs
+18
View File
@@ -0,0 +1,18 @@
import Component from "@glimmer/component";
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("above-main-container",
class ExperimentalScreen extends Component {
<template>
<ul class="experimental-screen">
<li class="experimental-screen__top-left"></li>
<li class="experimental-screen__top-right"></li>
<li class="experimental-screen__bottom-left"></li>
<li class="experimental-screen__bottom-right"></li>
<li class="experimental-screen__bottom-bar"></li>
</ul>
</template>
}
);
});
javascripts/discourse/api-initializers/next-gen.js
-5
View File
@@ -1,5 +0,0 @@
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer("1.8.0", (/* api */) => {
// console.log("hello world from api initializer!");
});
scss/buttons.scss
+4 -8
View File
@@ -1,16 +1,12 @@
:root {
--d-button-border-radius: 6.25rem;
}
.btn {
padding: 0.5em 1rem;
}
.btn-default {
border: 1px solid var(--accent-color);
background: var(--secondary);
.sidebar-new-topic-button__wrapper {
margin: 1.5rem 1rem;
}
#create-topic.btn {
.sidebar-new-topic-button__wrapper .btn {
background-color: var(--accent-color);
color: var(--accent-text-color);
svg {
scss/main.scss
+145 -27
View File
@@ -2,21 +2,34 @@ html:not(:has(.has-full-page-chat)) {
background-color: #f5f8ff;
}
body.has-sidebar-page #main-outlet-wrapper {
grid-template-columns: 0px 1fr minmax(0, var(--d-max-width)) 1fr;
grid-template-areas:
"space sidebar content"
"space sidebar content";
gap: 0 var(--main-grid-gap);
}
.powered-by-discourse {
display: none;
}
body:not(.has-full-page-chat) {
&.navigation-topics #main-outlet {
background: radial-gradient(
100.59% 70.87% at 41.19% 73.28%,
rgba(188, 241, 238, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
67.07% 61.36% at 66.47% 64.15%,
rgba(162, 164, 225, 0.2) 0%,
rgba(255, 255, 255, 0) 100%
),
#fff;
#main-outlet {
// background: radial-gradient(
// 100.59% 70.87% at 41.19% 73.28%,
// rgba(188, 241, 238, 0.2) 0%,
// rgba(255, 255, 255, 0) 100%
// ),
// radial-gradient(
// 67.07% 61.36% at 66.47% 64.15%,
// rgba(162, 164, 225, 0.2) 0%,
// rgba(255, 255, 255, 0) 100%
// ),
// #fff;
background-color: #ffffff;
padding-bottom: calc(var(--d-border-radius-large) * 2);
}
background-color: #f5f8ff;
#main-outlet-wrapper {
// margin-top: 1.5rem;
// gap: 2em !important;
@@ -28,7 +41,7 @@ body:not(.has-full-page-chat) {
// box-sizing: border-box;
// }
#main-outlet {
max-width: 1000px;
position: relative;
// height: inherit;
// overflow: scroll;
// &:has(.list-controls) {
@@ -46,23 +59,128 @@ body:not(.has-full-page-chat) {
// background-color: light-dark(#ffffff, #000000);
}
}
}
#topic-title {
.experimental-screen {
@media screen and (max-width: 425px) {
display: none;
}
width: 100%;
display: block;
margin: 0;
padding: 0;
position: relative;
container: content-width / inline-size;
li {
list-style: none;
margin: 0;
padding: 0;
}
&__top-left,
&__top-right,
&__bottom-left,
&__bottom-right {
position: fixed;
width: var(--d-border-radius-large);
height: var(--d-border-radius-large);
background-color: var(--secondary);
z-index: 999;
margin-bottom: 1em;
padding: 1.5rem 2rem 0.5em;
position: sticky;
-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);
background: var(--secondary);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
}
.container.posts,
.more-topics__container,
#topic-footer-buttons {
padding: 0 24px;
}
.container.posts .topic-navigation {
top: calc(var(--header-offset, 60px) + 4em);
&__top-right {
top: var(--header-offset);
transform: rotate(90deg);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
}
}
}
&__bottom-left {
transform: rotate(-90deg);
bottom: var(--d-border-radius-large);
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
&__bottom-right {
transform: rotate(180deg);
bottom: var(--d-border-radius-large);
@container content-width (width > 1px) {
left: calc(
var(--main-grid-gap) * 2 + var(--d-sidebar-width) + 100cqw -
var(--d-border-radius-large)
);
@media screen and (max-width: 768px) {
left: calc(
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
);
bottom: calc(var(--d-border-radius-large) * 2);
}
}
}
&__bottom-bar {
position: fixed;
width: 100%;
z-index: 999;
background-color: var(--secondary);
bottom: 0;
left: calc(var(--main-grid-gap) * 2 + var(--d-sidebar-width));
@media screen and (max-width: 768px) {
left: var(--main-grid-gap);
height: calc(var(--d-border-radius-large) * 2);
}
height: var(--d-border-radius-large);
@container content-width (width > 1px) {
width: 100cqw;
}
}
}
@media screen and (min-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
var(--d-border-radius-large)
);
}
}
@media screen and (max-width: 768px) {
.with-topic-progress {
bottom: calc(
env(safe-area-inset-bottom) + var(--composer-height, 0px) +
calc(var(--d-border-radius-large) * 2)
);
}
}
@media screen and (max-width: 400px) {
.with-topic-progress {
bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
}
}
.boxed.white {
background-color: #fff;
}
scss/misc.scss
+3
View File
@@ -0,0 +1,3 @@
.user-main .about.collapsed-info .details {
background: #fff;
}
scss/nav-pills.scss
+3 -3
View File
@@ -1,7 +1,7 @@
.list-controls {
position: sticky;
top: var(--header-offset);
background: var(--secondary);
background: #ffffff;
z-index: 100;
padding: 1.5rem 0 1rem 0;
max-width: unset;
@@ -14,8 +14,8 @@
.combo-box .combo-box-header,
.select-kit.is-expanded .select-kit-body,
.discourse-post-event .discourse-post-event-widget {
background-color: var(--secondary);
border-radius: 6.25rem;
background-color: #ffffff;
border-radius: var(--d-border-radius);
}
}
.nav-pills > li > a:hover,
scss/sidebar.scss
+8
View File
@@ -2,6 +2,10 @@
// --d-sidebar-background: #f5f8ff;
}
.sidebar-section-link-wrapper .sidebar-section-link {
border-radius: var(--d-border-radius);
}
.sidebar-wrapper {
background: #f5f8ff;
@@ -16,3 +20,7 @@
padding: 0;
}
}
.admin-area .sidebar-wrapper .admin-panel {
background-color: var(--secondary);
}
scss/topics.scss
+29
View File
@@ -0,0 +1,29 @@
#topic-title {
z-index: 999;
margin-bottom: 1em;
padding: 1.5rem 2rem 0.5em;
position: sticky;
top: var(--header-offset);
background: #ffffff;
}
// .container.posts,
// .more-topics__container,
// #topic-footer-buttons {
// padding: 0 24px;
// }
.container.posts .topic-navigation {
top: calc(var(--header-offset, 60px) + 4em);
}
.discourse-post-event .discourse-post-event-widget {
background-color: #ffffff;
}
.more-topics__container
.more-topics__list
.topic-list-body
.topic-list-item:last-of-type {
border-bottom: 1px solid #cedde3;
}
scss/variables.scss
+3
View File
@@ -1,9 +1,12 @@
:root {
--d-border-radius-large: 20px;
--d-button-border-radius: 20px;
--d-border-radius: 6px;
--d-input-border-radius: 6px;
--accent-color: #595bca;
--accent-text-color: #ffffff;
--d-nav-color--active: var(--accent-color);
--primary: #0c0d27;
--main-grid-gap: 2em;
--d-max-width: 1000px;
}