feat: export complete Discourse themes ecosystem (16 themes, SCSS, JS components and color schemes)
This commit is contained in:
eldov
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "Mint Theme",
|
||||
"authors": "Discourse",
|
||||
"about_url": "https://meta.discourse.org/t/mint-a-modern-theme-for-discourse/202822",
|
||||
"license_url": "https://github.com/discourse/discourse-mint-theme/blob/main/LICENSE",
|
||||
"color_schemes": {
|
||||
"mint-light": {
|
||||
"primary": "454545",
|
||||
"secondary": "F6FBFC",
|
||||
"tertiary": "4F8A7C",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "111111",
|
||||
"selected": "e3efec",
|
||||
"hover": "e3efec"
|
||||
},
|
||||
"mint-dark": {
|
||||
"primary": "e0e0e0",
|
||||
"secondary": "2d2d2d",
|
||||
"tertiary": "4F8A7C",
|
||||
"header_background": "202020",
|
||||
"header_primary": "e0e0e0",
|
||||
"highlight": "b2b235",
|
||||
"selected": "1c302b",
|
||||
"hover": "1c302b"
|
||||
}
|
||||
},
|
||||
"screenshots": ["screenshots/light.webp", "screenshots/dark.webp"]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
$color-circle-gradient: dark-light-choose(#e5f8ff, #2c2c2c);
|
||||
|
||||
:root {
|
||||
--color-circle-gradient: #{$color-circle-gradient};
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
@import "variables";
|
||||
@import "sidebar";
|
||||
@import "chat";
|
||||
|
||||
.d-editor-textarea-wrapper,
|
||||
.select-kit-header {
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
|
||||
:root {
|
||||
--d-input-border-radius: var(--mint-border-radius);
|
||||
--d-nav-underline-height: 0;
|
||||
}
|
||||
|
||||
.d-header {
|
||||
height: 5em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.d-header-mode .bootstrap-mode {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.alert.alert-info {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.navigation-categories .search-banner {
|
||||
border-radius: var(--mint-border-radius);
|
||||
height: 350px;
|
||||
box-sizing: border-box;
|
||||
padding: 2.5em 0 3em;
|
||||
margin: 1em auto;
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
||||
.category-box-inner {
|
||||
@include mint-card-bg;
|
||||
}
|
||||
|
||||
.navigation-topics {
|
||||
.container.list-container {
|
||||
border-radius: var(--mint-border-radius);
|
||||
box-shadow:
|
||||
0 8px 60px 0 rgb(103, 151, 255, 0.1),
|
||||
0 12px 90px 0 rgb(133, 255, 103, 0.1);
|
||||
padding: 2em;
|
||||
border-top: 8px solid var(--tertiary);
|
||||
margin-top: 0.8em;
|
||||
|
||||
@include mint-card-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.search-widget .search-context {
|
||||
padding: 10px;
|
||||
background-color: var(--tertiary-medium);
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
|
||||
.search-menu .search-context .show-help {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.search-menu .search-input {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.menu-panel .d-label {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--tertiary-hover);
|
||||
}
|
||||
|
||||
.category-boxes {
|
||||
gap: 2em;
|
||||
border-radius: var(--mint-border-radius);
|
||||
|
||||
.category-box {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-top: 8px solid;
|
||||
background: var(--secondary);
|
||||
border-radius: var(--mint-border-radius);
|
||||
box-shadow: 0 2px 3px 0 rgb(2, 47, 57, 0.14);
|
||||
|
||||
.category-box-inner {
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
||||
.category-details {
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 40px 30px 0 rgb(2, 47, 57, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 960px) {
|
||||
.category-boxes.with-logos.with-subcategories {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.category-list-item.category {
|
||||
border-radius: var(--mint-border-radius);
|
||||
border-right: 1px solid var(--primary-low) !important;
|
||||
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||
margin: 0 0.59em 2em 0.59em;
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
|
||||
#create-topic {
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary);
|
||||
transition: all 0.3s linear;
|
||||
border-radius: var(--mint-border-radius);
|
||||
text-transform: uppercase;
|
||||
border: 2px solid var(--tertiary);
|
||||
|
||||
.fa {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
box-shadow: var(--mint-hover-shadow);
|
||||
transition: all 0.3s linear;
|
||||
border-radius: var(--mint-border-radius);
|
||||
|
||||
.fa {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.open .grippie {
|
||||
background: var(--tertiary);
|
||||
}
|
||||
|
||||
.options.toolbar-popup-menu-options {
|
||||
button.single-select-header.dropdown-select-box-header {
|
||||
background: transparent;
|
||||
border-radius: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: var(--tertiary);
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-controls {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.list-controls .combo-box .combo-box-header {
|
||||
border: none;
|
||||
border-radius: var(--mint-border-radius);
|
||||
|
||||
@include mint-card-bg;
|
||||
}
|
||||
|
||||
.menu-panel .panel-body-bottom .btn {
|
||||
svg {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills li a {
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--mint-border-radius);
|
||||
|
||||
&:hover {
|
||||
border-radius: var(--mint-border-radius);
|
||||
transition: all 0.3s linear;
|
||||
background-color: transparent;
|
||||
color: var(--tertiary);
|
||||
border: 1px dashed var(--tertiary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-radius: var(--mint-border-radius);
|
||||
transition: all 0.3s linear;
|
||||
background: var(--mint-color-mint);
|
||||
color: var(--secondary);
|
||||
border: 1px solid var(--mint-color-mint);
|
||||
}
|
||||
}
|
||||
|
||||
.select-kit.dropdown-select-box .dropdown-select-box-header {
|
||||
background: var(--tertiary);
|
||||
border-radius: var(--mint-border-radius);
|
||||
border: 1px solid var(--tertiary);
|
||||
color: var(--secondary);
|
||||
|
||||
svg {
|
||||
color: var(--secondary);
|
||||
|
||||
&:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-button-bar
|
||||
.select-kit.dropdown-select-box
|
||||
.dropdown-select-box-header {
|
||||
background: transparent;
|
||||
color: var(--primary-medium);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
|
||||
svg {
|
||||
color: currentcolor;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary-hover);
|
||||
border: 1px solid var(--tertiary-hover);
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn:hover .d-icon,
|
||||
.discourse-no-touch .btn.btn-hover .d-icon {
|
||||
color: var(--tertiary-hover);
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn:not(.btn-flat):hover,
|
||||
.discourse-no-touch .btn:not(.btn-flat).btn-hover {
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary-hover);
|
||||
border-radius: 5px;
|
||||
|
||||
.fa {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-panel .widget-link:hover,
|
||||
.menu-panel .widget-link:focus,
|
||||
.menu-panel .categories-link:hover,
|
||||
.menu-panel .categories-link:focus {
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
color: var(--secondary);
|
||||
background: var(--tertiary);
|
||||
transition: all 0.3s linear;
|
||||
border-radius: var(--mint-border-radius);
|
||||
text-transform: uppercase;
|
||||
border: 1px solid var(--tertiary);
|
||||
|
||||
.fa {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
|
||||
.discourse-no-touch .btn-danger:hover {
|
||||
background: var(--danger-hover);
|
||||
}
|
||||
|
||||
.create {
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
|
||||
.select-kit .select-kit-row.is-selected {
|
||||
background-color: var(--secondary-very-high);
|
||||
}
|
||||
|
||||
.modal-inner-container,
|
||||
.edit-category-footer {
|
||||
.btn-primary {
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.user-menu .quick-access-panel li:hover {
|
||||
background-color: var(--tertiary-low);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--tertiary-hover);
|
||||
}
|
||||
|
||||
.image-upload-controls .btn-default {
|
||||
border: 1px solid var(--secondary);
|
||||
|
||||
.fa {
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-controls,
|
||||
.email-template,
|
||||
.admin-container {
|
||||
.nav-pills > li a.active {
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-radius: var(--mint-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-search-banner-wrap {
|
||||
border-radius: var(--mint-border-radius);
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
var(--tertiary-medium) 0%,
|
||||
var(--tertiary) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.custom-search-banner-wrap .custom-search-banner-headline,
|
||||
.custom-search-banner-wrap h1,
|
||||
.custom-search-banner-wrap p {
|
||||
color: var(--primary-very-low);
|
||||
}
|
||||
|
||||
summary.select-kit-header.single-select-header.dropdown-select-box-header {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.search-container .search-advanced-sidebar {
|
||||
.search-advanced-title {
|
||||
background: var(--tertiary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.search-advanced-filters {
|
||||
border: 1px dashed var(--tertiary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@import "variables";
|
||||
|
||||
body:not(.navigation-categories, .navigation-topics) #main-outlet {
|
||||
border-radius: var(--mint-border-radius);
|
||||
box-shadow:
|
||||
0 8px 60px 0 rgb(103, 151, 255, 0.1),
|
||||
0 12px 90px 0 rgb(133, 255, 103, 0.1);
|
||||
padding: 2em;
|
||||
border-top: 8px solid $tertiary;
|
||||
margin-top: 1em;
|
||||
|
||||
@include mint-card-bg;
|
||||
}
|
||||
|
||||
.boxed {
|
||||
&.white {
|
||||
@include mint-card-bg;
|
||||
}
|
||||
}
|
||||
|
||||
#main-outlet::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 2000px;
|
||||
background: var(--color-circle-gradient);
|
||||
right: 1px;
|
||||
top: -57px;
|
||||
}
|
||||
|
||||
#main-outlet::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 30px;
|
||||
background: $color-square-webkit-gradient;
|
||||
background: $color-square-gradient;
|
||||
left: 70px;
|
||||
top: 350px;
|
||||
transform: rotate(74deg);
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
html body.has-sidebar-page.has-full-page-chat {
|
||||
#main-outlet-wrapper {
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
#main-outlet {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-composer__wrapper {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.full-page-chat .chat-full-page-header {
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
|
||||
.desktop-view .has-full-page-chat {
|
||||
.chat-channel {
|
||||
height: calc(100vh - (var(--header-offset) + 3em));
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-container,
|
||||
.chat-transcript {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-drawer .chat-drawer-container {
|
||||
border-radius: var(--mint-border-radius) var(--mint-border-radius) 0 0;
|
||||
box-shadow:
|
||||
0 8px 60px 0 rgb(103, 151, 255, 0.1),
|
||||
0 12px 90px 0 rgb(133, 255, 103, 0.1);
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
:root {
|
||||
--d-sidebar-highlight-background: var(--tertiary-low);
|
||||
--d-sidebar-highlight-hover-background: var(--tertiary);
|
||||
--d-sidebar-header-icon-color: var(--tertiary);
|
||||
}
|
||||
|
||||
#main-outlet-wrapper {
|
||||
.sidebar-wrapper {
|
||||
background-color: var(--primary-very-low);
|
||||
box-shadow:
|
||||
0 8px 60px 0 rgb(103, 151, 255, 0.1),
|
||||
0 12px 90px 0 rgb(133, 255, 103, 0.1);
|
||||
margin-top: 1em;
|
||||
border-top: 8px solid var(--tertiary);
|
||||
border-radius: var(--mint-border-radius);
|
||||
height: calc(
|
||||
var(--composer-vh, var(--1dvh)) * 100 - var(--header-offset, 0px) - 3em
|
||||
);
|
||||
top: calc(var(--header-offset) + 1em);
|
||||
|
||||
.sidebar-container {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer-wrapper {
|
||||
background: var(--primary-very-low);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@mixin mint-card-bg {
|
||||
background: var(--primary-very-low);
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
// incorrect rule, see: https://github.com/stylelint-scss/stylelint-config-recommended-scss/issues/369
|
||||
/* stylelint-disable-next-line no-invalid-position-declaration */
|
||||
background: var(--header_background);
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--mint-border-radius: 10px;
|
||||
--mint-hover-shadow: 4px 4px var(--tertiary-high);
|
||||
--mint-color-mint: #75bdad;
|
||||
--mint-color-blue: #e5f8ff;
|
||||
}
|
||||
|
||||
$color-square-gradient: linear-gradient(
|
||||
4deg,
|
||||
rgb(143, 236, 202, 0.29) 55%,
|
||||
rgb(74, 247, 255, 0.08) 100%
|
||||
);
|
||||
$color-square-webkit-gradient: -webkit-linear-gradient(
|
||||
4deg,
|
||||
rgb(143, 236, 202, 0.29) 55%,
|
||||
rgb(74, 247, 255, 0.08) 100%
|
||||
);
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
/* eslint-disable ember/no-classic-components, ember/require-tagless-components */
|
||||
import Component from "@ember/component";
|
||||
import { classNames } from "@ember-decorators/component";
|
||||
import { optionalRequire } from "discourse/lib/utilities";
|
||||
|
||||
const SearchBanner = optionalRequire(
|
||||
"discourse/plugins/discourse-search-banner/discourse/components/search-banner"
|
||||
);
|
||||
|
||||
@classNames("above-main-container-outlet", "mint-component-extensions")
|
||||
export default class MintComponentExtensions extends Component {
|
||||
<template>
|
||||
{{#if SearchBanner}}
|
||||
<div class="search-banner">
|
||||
<SearchBanner />
|
||||
</div>
|
||||
{{/if}}
|
||||
</template>
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
.navigation-categories {
|
||||
.search-banner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
{
|
||||
"id": 24,
|
||||
"name": "Mint Theme",
|
||||
"user_selectable": true,
|
||||
"color_scheme": {
|
||||
"id": 39,
|
||||
"name": "mint-light",
|
||||
"theme_id": 24,
|
||||
"colors": {
|
||||
"secondary": "f6fbfc",
|
||||
"tertiary": "4f8a7c",
|
||||
"quaternary": "e45735",
|
||||
"header_background": "ffffff",
|
||||
"header_primary": "111111",
|
||||
"highlight": "ffff4d",
|
||||
"selected": "e3efec",
|
||||
"hover": "e3efec",
|
||||
"danger": "c80001",
|
||||
"success": "090",
|
||||
"love": "fa6c8d",
|
||||
"primary": "454545"
|
||||
}
|
||||
},
|
||||
"fields_count": 12,
|
||||
"files": [
|
||||
{
|
||||
"field_id": 682,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "color_definitions",
|
||||
"filename": "common_color_definitions.txt",
|
||||
"bytes": 126
|
||||
},
|
||||
{
|
||||
"field_id": 680,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "screenshot_dark",
|
||||
"filename": "common_screenshot_dark.txt",
|
||||
"bytes": 0
|
||||
},
|
||||
{
|
||||
"field_id": 679,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "screenshot_light",
|
||||
"filename": "common_screenshot_light.txt",
|
||||
"bytes": 0
|
||||
},
|
||||
{
|
||||
"field_id": 683,
|
||||
"target_id": 0,
|
||||
"target_name": "common",
|
||||
"name": "scss",
|
||||
"filename": "common_scss.scss",
|
||||
"bytes": 6927
|
||||
},
|
||||
{
|
||||
"field_id": 684,
|
||||
"target_id": 1,
|
||||
"target_name": "desktop",
|
||||
"name": "scss",
|
||||
"filename": "desktop_scss.scss",
|
||||
"bytes": 924
|
||||
},
|
||||
{
|
||||
"field_id": 687,
|
||||
"target_id": 2,
|
||||
"target_name": "mobile",
|
||||
"name": "scss",
|
||||
"filename": "mobile_scss.scss",
|
||||
"bytes": 69
|
||||
},
|
||||
{
|
||||
"field_id": 686,
|
||||
"target_id": 4,
|
||||
"target_name": "translations",
|
||||
"name": "en",
|
||||
"filename": "translations_en.yml",
|
||||
"bytes": 118
|
||||
},
|
||||
{
|
||||
"field_id": 688,
|
||||
"target_id": 5,
|
||||
"target_name": "extra_scss",
|
||||
"name": "chat",
|
||||
"filename": "extra_scss_chat.txt",
|
||||
"bytes": 686
|
||||
},
|
||||
{
|
||||
"field_id": 689,
|
||||
"target_id": 5,
|
||||
"target_name": "extra_scss",
|
||||
"name": "sidebar",
|
||||
"filename": "extra_scss_sidebar.txt",
|
||||
"bytes": 755
|
||||
},
|
||||
{
|
||||
"field_id": 690,
|
||||
"target_id": 5,
|
||||
"target_name": "extra_scss",
|
||||
"name": "variables",
|
||||
"filename": "extra_scss_variables.txt",
|
||||
"bytes": 728
|
||||
},
|
||||
{
|
||||
"field_id": 685,
|
||||
"target_id": 6,
|
||||
"target_name": "javascript",
|
||||
"name": "discourse/connectors/above-main-container/mint-component-extensions.gjs",
|
||||
"filename": "javascript_discourse_connectors_above-main-container_mint-component-extensions.gjs",
|
||||
"bytes": 641
|
||||
},
|
||||
{
|
||||
"field_id": 681,
|
||||
"target_id": 9,
|
||||
"target_name": "about",
|
||||
"name": "about",
|
||||
"filename": "about_about.yml",
|
||||
"bytes": 820
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
en:
|
||||
theme_metadata:
|
||||
description: "A minty colored theme with featured homepage categories and a search banner."
|
||||
Reference in New Issue
Block a user