feat: export complete Discourse themes ecosystem (16 themes, SCSS, JS components and color schemes)
This commit is contained in:
eldov
@@ -0,0 +1,334 @@
|
||||
@use "sass:color";
|
||||
@import "common/foundation/variables";
|
||||
|
||||
@mixin boxShadow {
|
||||
box-shadow:
|
||||
0 2px 5px 0 rgb(0, 0, 0, 0.16),
|
||||
0 0 0 0 rgb(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@mixin buttonShadow {
|
||||
box-shadow:
|
||||
0 0 4px rgb(0, 0, 0, 0.14),
|
||||
0 4px 8px rgb(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
@mixin buttonTransition {
|
||||
transition:
|
||||
right 0.5s,
|
||||
bottom 0.5s,
|
||||
border-radius 0.5s,
|
||||
text-indent 0.2s,
|
||||
visibility 1s,
|
||||
width 0.2s ease,
|
||||
height 0.5s ease 0.4s,
|
||||
color 0.5s,
|
||||
background-color 2s,
|
||||
transform 0.5s;
|
||||
}
|
||||
|
||||
// make header icons semi-translucent
|
||||
.d-header-icons {
|
||||
.d-icon {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
// add shadow behind the list of topics on right in Category and Latest View
|
||||
// add shadow behind list of categories on left in Category and Latest View
|
||||
// add shadow behind topics in Latest view
|
||||
.category-list,
|
||||
.topic-list,
|
||||
.latest-topic-list {
|
||||
@include boxShadow;
|
||||
background-color: var(--material-lighter-secondary);
|
||||
}
|
||||
|
||||
.column {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
// fix color of user profile navigation icons
|
||||
.user-main .nav-pills {
|
||||
a.active i {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a:hover:not(.active) i {
|
||||
color: var(--quaternary);
|
||||
}
|
||||
}
|
||||
|
||||
// create conversation cards
|
||||
.topic-body {
|
||||
@include boxShadow;
|
||||
background-color: var(--material-lighter-secondary);
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
padding: 15px 20px 0 20px;
|
||||
}
|
||||
|
||||
// more space for avatars
|
||||
.topic-avatar {
|
||||
border-top: 0;
|
||||
padding-right: 10px;
|
||||
|
||||
.avatar-flair {
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// remove stray border from bottom of last post
|
||||
.topic-status-info {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
// improve format of embedded posts
|
||||
.embedded-posts {
|
||||
border: none;
|
||||
|
||||
.topic-avatar {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.top {
|
||||
padding-left: 2em;
|
||||
|
||||
.row .topic-avatar,
|
||||
.row .topic-body {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.collapse-down {
|
||||
transform: translate(-120%, 62%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.embedded-posts.top.topic-body {
|
||||
box-shadow: none;
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
// darken color, remove shadow and border when pressed
|
||||
.btn:active {
|
||||
background-color: rgb(0, 0, 0, 0.4);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// New Topic Fab
|
||||
.d-combo-button:has(#create-topic) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include buttonShadow;
|
||||
@include buttonTransition;
|
||||
margin: 0;
|
||||
height: 63px;
|
||||
width: 190px;
|
||||
border-radius: 40px;
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
z-index: z("composer", "content") - 1;
|
||||
background-color: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.d-button-label {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topic-drafts-menu-trigger {
|
||||
border-left: 1px solid var(--secondary);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.chat-drawer-active & {
|
||||
z-index: z("chat-drawer") - 1;
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
@media screen and (width <= 1520px) {
|
||||
body:has(#reply-control.draft.show-preview) & {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
margin: 0;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.d-button-label {
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
#create-topic.btn-default .fa-plus {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.timeline-container .topic-timeline .timeline-handle {
|
||||
background-color: var(--tertiary-medium);
|
||||
}
|
||||
|
||||
// Reply Fab
|
||||
.timeline-footer-controls {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-button.btn.create {
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
left: -10px;
|
||||
background-color: var(--tertiary);
|
||||
overflow: hidden;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
@include buttonShadow;
|
||||
@include buttonTransition;
|
||||
|
||||
.d-icon {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Increase size of reply icon
|
||||
.widget-button.btn.create .fa-reply {
|
||||
color: var(--secondary);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
// Proper spacing for iPad portrait
|
||||
@media only screen and (width >= 768px) and (width <= 1250px) {
|
||||
.timeline-container {
|
||||
margin-left: 820px;
|
||||
}
|
||||
|
||||
.topic-admin-popup-menu {
|
||||
left: -40% !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Properly space notifications button
|
||||
.widget-button.btn.notifications-dropdown {
|
||||
right: 4px;
|
||||
position: relative;
|
||||
border-radius: 40px;
|
||||
width: 30px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
// cards for search results
|
||||
.fps-result {
|
||||
@include boxShadow;
|
||||
background-color: var(--material-lighter-secondary);
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes background-fade-highlight {
|
||||
0% {
|
||||
background-color: color.adjust($tertiary, $lightness: 20%);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: var(--material-lighter-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// clipped user page button shadows
|
||||
.user-main .about .controls {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
// RTL Overrides
|
||||
.rtl {
|
||||
.topic-avatar {
|
||||
padding-right: initial;
|
||||
padding-left: 10px;
|
||||
|
||||
.avatar-flair {
|
||||
right: initial;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.embedded-posts .topic-avatar {
|
||||
padding-left: initial;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
#create-topic.btn-default {
|
||||
right: initial;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.widget-button.btn.create {
|
||||
left: initial;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.widget-button.btn.notifications-dropdown {
|
||||
right: initial;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.user-main .about .controls {
|
||||
padding-right: initial;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Overrides
|
||||
@media only screen and (width >= 768px) and (width <= 1250px) {
|
||||
.rtl {
|
||||
.timeline-container {
|
||||
margin-left: initial;
|
||||
margin-right: 820px;
|
||||
}
|
||||
|
||||
.topic-admin-popup-menu {
|
||||
left: initial !important;
|
||||
right: -40% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Personal messages
|
||||
.archetype-private_message {
|
||||
.topic-body {
|
||||
margin-left: -2em;
|
||||
}
|
||||
|
||||
.small-action {
|
||||
max-width: 758px;
|
||||
}
|
||||
}
|
||||
|
||||
// Chat
|
||||
.chat-channel {
|
||||
height: calc(100dvh - (var(--header-offset) + 6em));
|
||||
}
|
||||
|
||||
#main-chat-outlet {
|
||||
margin-top: 1.5em;
|
||||
box-shadow:
|
||||
0 2px 1px -1px rgb(0, 0, 0, 0.2),
|
||||
0 1px 1px 0 rgb(0, 0, 0, 0.14),
|
||||
0 1px 3px 0 rgb(0, 0, 0, 0.12);
|
||||
}
|
||||
Reference in New Issue
Block a user