Non layout styling (#5)
This commit is contained in:
chapoi
+11
-8
@@ -1,10 +1,13 @@
|
||||
@import "variables";
|
||||
@import "header";
|
||||
@import "sidebar";
|
||||
@import "main";
|
||||
@import "topic-cards";
|
||||
@import "search-banner";
|
||||
@import "nav-pills";
|
||||
@import "buttons";
|
||||
@import "chat";
|
||||
@import "header";
|
||||
@import "hiddenstuff";
|
||||
@import "main";
|
||||
@import "nav-pills";
|
||||
@import "search-banner";
|
||||
@import "sidebar";
|
||||
@import "topic";
|
||||
@import "topic-cards";
|
||||
@import "variables";
|
||||
@import "box-view";
|
||||
@import "chat";
|
||||
@import "misc";
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import Component from "@glimmer/component";
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("1.8.0", (api) => {
|
||||
api.renderInOutlet(
|
||||
"above-main-container",
|
||||
class ExperimentalScreen extends Component {
|
||||
<template>
|
||||
<ul class="experimental-screen">
|
||||
<li class="experimental-screen__top-left"></li>
|
||||
<li class="experimental-screen__top-right"></li>
|
||||
<li class="experimental-screen__bottom-left"></li>
|
||||
<li class="experimental-screen__bottom-right"></li>
|
||||
<li class="experimental-screen__bottom-bar"></li>
|
||||
</ul>
|
||||
</template>
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -1,5 +0,0 @@
|
||||
import { apiInitializer } from "discourse/lib/api";
|
||||
|
||||
export default apiInitializer("1.8.0", (/* api */) => {
|
||||
// console.log("hello world from api initializer!");
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
#main-outlet-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
.experimental-screen {
|
||||
max-width: unset !important;
|
||||
.has-full-page-chat & {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 488px) {
|
||||
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: 9999;
|
||||
-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: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
}
|
||||
}
|
||||
&__top-right {
|
||||
top: var(--header-offset);
|
||||
transform: rotate(90deg);
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
|
||||
var(--d-border-radius-large)
|
||||
);
|
||||
@media screen and (max-width: 768px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__bottom-left {
|
||||
transform: rotate(-90deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
&__bottom-right {
|
||||
transform: rotate(180deg);
|
||||
bottom: var(--d-border-radius-large);
|
||||
@container content-width (width > 1px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + var(--d-sidebar-width) + 100cqw -
|
||||
var(--d-border-radius-large)
|
||||
);
|
||||
@media screen and (max-width: 768px) {
|
||||
left: calc(
|
||||
var(--main-grid-gap) + 100cqw - var(--d-border-radius-large)
|
||||
);
|
||||
bottom: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--secondary);
|
||||
bottom: 0;
|
||||
left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
|
||||
@media screen and (max-width: 768px) {
|
||||
left: var(--main-grid-gap);
|
||||
height: calc(var(--d-border-radius-large) * 2);
|
||||
}
|
||||
height: var(--d-border-radius-large);
|
||||
@container content-width (width > 1px) {
|
||||
width: 100cqw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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));
|
||||
}
|
||||
}
|
||||
+124
-6
@@ -2,18 +2,136 @@
|
||||
--d-button-border-radius: 6.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5em 1rem;
|
||||
.discourse-no-touch .topic-body .actions .fade-out {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border: 1px solid var(--accent-color);
|
||||
background: var(--secondary);
|
||||
.btn-default,
|
||||
.btn-primary,
|
||||
.btn-danger,
|
||||
.select-kit .select-kit-header {
|
||||
padding: var(--spacing-block-s) var(--spacing-inline-m);
|
||||
// font-size: var(--font-up-1-rem);
|
||||
// border-radius: var(--d-button-border-radius);
|
||||
|
||||
&.no-text {
|
||||
padding-inline: 0.665rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
|
||||
background: var(--accent-color);
|
||||
&:hover {
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
}
|
||||
svg {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default,
|
||||
.select-kit .select-kit-header {
|
||||
border: 1px solid var(--accent-color);
|
||||
//id like to use rgba of the accent colour but how to derive that?
|
||||
// box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
|
||||
background: var(--secondary);
|
||||
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: var(--secondary);
|
||||
color: var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
.d-icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//not shared with select-kit
|
||||
.btn-default {
|
||||
&:active {
|
||||
.discourse-no-touch & {
|
||||
color: var(--secondary);
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-primary,
|
||||
#create-topic.btn {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--accent-text-color);
|
||||
svg {
|
||||
.d-icon {
|
||||
color: var(--accent-text-color);
|
||||
}
|
||||
&:hover {
|
||||
.discourse-no-touch & {
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
&:focus-visible {
|
||||
.discourse-no-touch & {
|
||||
background: radial-gradient(
|
||||
90% 110% at 50% 50%,
|
||||
rgba(255, 255, 255, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
var(--accent-color);
|
||||
box-shadow: 0px 0px 0px 2px var(--secondary),
|
||||
0px 0px 0px 4px var(--accent-color);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
.discourse-no-touch & {
|
||||
// background: radial-gradient(
|
||||
// 65% 95% at 50% 50%,
|
||||
// rgba(0, 0, 0, 0.4) 0%,
|
||||
// rgba(0, 0, 0, 0) 100%
|
||||
// ),
|
||||
// var(--accent-color) !important;
|
||||
background: oklch(from var(--accent-color) 30% c h) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-controls {
|
||||
svg.d-icon {
|
||||
color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
|
||||
}
|
||||
}
|
||||
|
||||
//undoing the outline for select-kit, since Im using a custom visual cue
|
||||
.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
|
||||
.select-kit.single-select .select-kit-header:not(.btn):focus,
|
||||
.select-kit.single-select .select-kit-header:not(.btn):active {
|
||||
outline: transparent;
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
.full-page-chat.full-page-chat-sidebar-enabled {
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
z-index: 9999;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c-navbar-container {
|
||||
border-top-left-radius: var(--d-border-radius-large);
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
@@ -1,6 +1,3 @@
|
||||
.d-header {
|
||||
box-shadow: none;
|
||||
}
|
||||
.desktop-view .d-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
.sidebar__panel-switch-button,
|
||||
.sidebar-section[data-section-name="messages"],
|
||||
.list-controls #create-topic {
|
||||
.list-controls #create-topic,
|
||||
.notifications-button-footer .reason .text,
|
||||
.pinned-button .reason .text,
|
||||
.more-topics__browse-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
+48
-49
@@ -2,68 +2,67 @@ html:not(:has(.has-full-page-chat)) {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-grid-gap: 2em;
|
||||
}
|
||||
|
||||
body:not(.has-full-page-chat) {
|
||||
background-color: #f5f8ff;
|
||||
#main-outlet-wrapper {
|
||||
margin-top: 1.5rem;
|
||||
gap: 2em !important;
|
||||
height: calc(100vh - var(--header-offset) - 4rem);
|
||||
box-sizing: border-box;
|
||||
> * {
|
||||
height: inherit;
|
||||
box-sizing: border-box;
|
||||
// margin-top: 1.5rem;
|
||||
@media screen and (max-width: 485px) {
|
||||
--main-grid-gap: 0;
|
||||
}
|
||||
gap: var(--main-grid-gap);
|
||||
// height: calc(100vh - var(--header-offset) - 4rem);
|
||||
// box-sizing: border-box;
|
||||
// > * {
|
||||
// height: inherit;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
#main-outlet {
|
||||
width: 100%;
|
||||
height: inherit;
|
||||
overflow: scroll;
|
||||
&:has(.list-controls) {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:has(#topic-title) {
|
||||
padding-top: 0;
|
||||
}
|
||||
// height: inherit;
|
||||
// overflow: scroll;
|
||||
// &:has(.list-controls) {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
// &:has(#topic-title) {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
> *:not(.full-page-chat) {
|
||||
max-width: 1000px;
|
||||
margin-inline: auto;
|
||||
padding-inline: 1.5em;
|
||||
@media screen and (max-width: 425px) {
|
||||
padding-inline: 0.5em;
|
||||
}
|
||||
}
|
||||
border-radius: var(--d-border-radius-large);
|
||||
border-radius: 1.25rem;
|
||||
.navigation-topics & {
|
||||
background: radial-gradient(
|
||||
100.59% 70.87% at 41.19% 73.28%,
|
||||
rgba(188, 241, 238, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
67.07% 61.36% at 66.47% 64.15%,
|
||||
rgba(162, 164, 225, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
),
|
||||
#fff;
|
||||
}
|
||||
box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
background-color: light-dark(#ffffff, #000000);
|
||||
// border-radius: var(--d-border-radius-large);
|
||||
// border-radius: 1.25rem;
|
||||
// .navigation-topics & {
|
||||
// background: radial-gradient(
|
||||
// 100.59% 70.87% at 41.19% 73.28%,
|
||||
// rgba(188, 241, 238, 0.2) 0%,
|
||||
// rgba(255, 255, 255, 0) 100%
|
||||
// ),
|
||||
// radial-gradient(
|
||||
// 67.07% 61.36% at 66.47% 64.15%,
|
||||
// rgba(162, 164, 225, 0.2) 0%,
|
||||
// rgba(255, 255, 255, 0) 100%
|
||||
// ),
|
||||
// #fff;
|
||||
// }
|
||||
// box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
z-index: 999;
|
||||
margin-bottom: 1em;
|
||||
padding: 1.5rem 2rem 0.5em;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.container.posts,
|
||||
.more-topics__container,
|
||||
#topic-footer-buttons {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.container.posts .topic-navigation {
|
||||
top: calc(var(--header-offset, 60px) + 4em);
|
||||
.global-notice {
|
||||
margin-top: var(--spacing-block-m);
|
||||
}
|
||||
}
|
||||
|
||||
aside.onebox {
|
||||
background-color: var(--d-content-background);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
.user-main .about.collapsed-info .details {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel .read,
|
||||
.user-notifications-list .read {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.powered-by-discourse {
|
||||
z-index: 9999;
|
||||
}
|
||||
+11
-3
@@ -1,12 +1,13 @@
|
||||
.list-controls {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--secondary);
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
z-index: 100;
|
||||
padding: 1.5rem 0 1rem 0;
|
||||
max-width: unset;
|
||||
|
||||
.navigation-container {
|
||||
gap: 1rem;
|
||||
.category-breadcrumb {
|
||||
order: 1;
|
||||
}
|
||||
@@ -14,8 +15,15 @@
|
||||
.combo-box .combo-box-header,
|
||||
.select-kit.is-expanded .select-kit-body,
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
// needs more specificy than just in the button file
|
||||
background-color: var(--secondary);
|
||||
border-radius: 6.25rem;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--d-border-radius-large);
|
||||
// font-size: var(--font-up-1-rem);
|
||||
}
|
||||
.select-kit.combo-box.category-drop.has-selection
|
||||
.category-drop-header:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.nav-pills > li > a:hover,
|
||||
|
||||
+37
-3
@@ -1,13 +1,16 @@
|
||||
.custom-search-banner-wrap {
|
||||
display: grid;
|
||||
grid-template-rows: 0.33fr 0.33fr 0.33fr;
|
||||
grid-template-columns: 0.5fr 0.5fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
grid-row-gap: 0.5em;
|
||||
border-bottom: 1px solid var(--primary-300);
|
||||
padding: 2.5em 0 2.5em;
|
||||
margin-bottom: 2.5em;
|
||||
--search-color: #595bca;
|
||||
@media screen and (max-width: 700px) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h1 {
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
@@ -17,18 +20,49 @@
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: #350c73;
|
||||
@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 (max-width: 768px) {
|
||||
text-align: left;
|
||||
grid-column: 1/2;
|
||||
grid-row: 1/-1;
|
||||
font-size: var(--font-up-3);
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
.search-menu {
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/-1;
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
@media screen and (max-width: 1028px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
grid-column: 2/-1;
|
||||
grid-row: 1/-1;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
grid-row: 2/-1;
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
.search-input {
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
background: var(--d-content-background);
|
||||
border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
|
||||
box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
|
||||
}
|
||||
@@ -42,6 +76,6 @@
|
||||
color: var(--search-color);
|
||||
}
|
||||
.results {
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
}
|
||||
|
||||
+39
-2
@@ -1,6 +1,4 @@
|
||||
.sidebar-wrapper {
|
||||
background: #f5f8ff;
|
||||
|
||||
.has-full-page-chat & {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -11,4 +9,43 @@
|
||||
.sidebar-sections {
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar-section-link {
|
||||
// font-size: var(--font-up-1); // dont want to change fonts here just yet as font-size can be changed as a user pref.
|
||||
// font-family: "inter";
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 10px; //visually somewhat consistent with border on main outlet (?)
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.sidebar-section-wrapper {
|
||||
padding-block: 0.45em;
|
||||
.sidebar-section-header {
|
||||
// font-size: var(--font-down-1);
|
||||
}
|
||||
.sidebar-section-content {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-block-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:focus,
|
||||
.sidebar-section-link-wrapper .sidebar-section-link:hover {
|
||||
.d-icon {
|
||||
color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-new-topic-button__wrapper {
|
||||
margin-bottom: 1.5rem;
|
||||
@media screen and (max-width: 1000px) {
|
||||
.sidebar-new-topic-button .d-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper .sidebar-sections {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.topic-list-item {
|
||||
background: light-dark(#ffffff, #1f1f1f);
|
||||
background: var(--d-content-background);
|
||||
&:hover {
|
||||
background: light-dark(#fcfcfc, #161616);
|
||||
background: oklch(from var(--d-content-background) 97% c h);
|
||||
}
|
||||
border: 1px solid #cedde3;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
.post-stream {
|
||||
.contents p {
|
||||
// font-size: var(--font-up-1);
|
||||
line-height: 1.75;
|
||||
}
|
||||
}
|
||||
|
||||
.container.posts .topic-navigation {
|
||||
top: calc(var(--header-offset, 60px) + 6em);
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline {
|
||||
min-width: unset; //why we have this?
|
||||
.timeline-scrollarea {
|
||||
border-left: 1px solid var(--accent-color);
|
||||
}
|
||||
.timeline-scroller {
|
||||
padding: 0.25em;
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: 0.75em;
|
||||
padding-left: 0.5em;
|
||||
margin-left: calc(-0.5em - 2.5px);
|
||||
background: var(--secondary);
|
||||
height: 40px !important; //height is coming from element style have no other choice
|
||||
}
|
||||
.timelime-scroller-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.timeline-replies,
|
||||
.timeline-ago {
|
||||
line-height: 1;
|
||||
}
|
||||
.timeline-ago {
|
||||
// font-size: var(--font-down-1);
|
||||
}
|
||||
.timeline-handle {
|
||||
background-color: var(--accent-color);
|
||||
width: 3px;
|
||||
border-radius: 2px;
|
||||
height: calc(100% - 6px);
|
||||
}
|
||||
}
|
||||
|
||||
#topic-title {
|
||||
z-index: 999;
|
||||
margin-bottom: 1em;
|
||||
padding: 1.5rem 2rem 0.5em;
|
||||
position: sticky;
|
||||
top: var(--header-offset);
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.container.posts,
|
||||
.more-topics__container,
|
||||
#topic-footer-buttons {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.more-topics__container
|
||||
.more-topics__list
|
||||
.topic-list-body
|
||||
.topic-list-item:last-of-type {
|
||||
border-bottom: 1px solid #cedde3;
|
||||
}
|
||||
|
||||
.discourse-post-event .discourse-post-event-widget {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
+29
-3
@@ -1,9 +1,35 @@
|
||||
:root {
|
||||
--d-border-radius-large: 20px;
|
||||
--d-border-radius: 6px;
|
||||
--d-border-radius: 8px;
|
||||
--d-input-border-radius: 6px;
|
||||
--accent-color: #595bca;
|
||||
--accent-color: #3c41c3;
|
||||
--accent-text-color: #ffffff;
|
||||
--d-content-background: #fff;
|
||||
--d-nav-color--active: var(--accent-color);
|
||||
--primary: #0c0d27;
|
||||
--primary: #14171f;
|
||||
--header-background: #f5f8ff;
|
||||
--d-post-control-background--hover: #ebecf9;
|
||||
--d-post-control-text-color--hover: #242775;
|
||||
--d-sidebar-link-color: var(--primary);
|
||||
--d-sidebar-highlight-color: var(--primary);
|
||||
--d-sidebar-link-icon-color: #8591ad;
|
||||
--d-sidebar-section-link-icon-size: 1em;
|
||||
--d-sidebar-highlight-background: #ebecf9;
|
||||
--d-sidebar-active-background: #d8d9f3;
|
||||
// --d-sidebar-row-height: 2.8em;
|
||||
//the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
|
||||
--spacing-block-xs: 0.25em;
|
||||
--spacing-block-s: 0.5em;
|
||||
--spacing-block-sm: 0.75em;
|
||||
--spacing-block-m: 1em;
|
||||
--spacing-block-l: 1.5em;
|
||||
--spacing-block-xl: 2em;
|
||||
--spacing-block-xxl: 4em;
|
||||
--spacing-inline-xs: 0.25em;
|
||||
--spacing-inline-s: 0.5rem;
|
||||
--spacing-inline-sm: 0.75rem;
|
||||
--spacing-inline-m: 1rem;
|
||||
--spacing-inline-l: 1.5rem;
|
||||
--spacing-inline-xl: 2rem;
|
||||
--spacing-inline-xxl: 4rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user