nodebb-theme-harmony 0.0.1 → 0.0.2

package/scss/mixins.scss

@@ -0,0 +1,183 @@
+@mixin topic-avatars() {
+	.icon .avatar, .timeline-badge {
+		z-index: 1;
+
+		line-height: calc(var(--avatar-size) - 4px);
+	}
+
+	[component="user/status"] {
+		top: 20px;
+		left: 12px;
+
+		z-index: 2;
+	}
+
+	@include media-breakpoint-up(sm) {
+		[component="user/status"] {
+			padding: 5px;
+			top: 36px;
+			left: 36px;
+		}
+	}
+}
+
+@mixin timeline-style() {
+	> [component="post"], .timeline-event, > [component="post/placeholder"] {
+		position: relative;	// for absolutely positioned pseudo-element, below
+		border: 0;
+		margin-left: 1.5rem;
+		transition: border-color 1s ease-out;
+
+		&:first-child {
+			&:before {
+				content: '';
+				position: absolute;
+				top: 0;
+				height: 16px;
+				width: 16px;
+				background-color: $border-color;
+				border-radius: 100%;
+				transform: translate(calc(-50% - .5px), -100%);
+				transition: background-color 1s ease-out;
+			}
+
+			&.highlight:before {
+				background-color: $primary;
+			}
+		}
+
+		&:last-child {
+			min-height: 7rem;
+
+			&:after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				height: 16px;
+				width: 16px;
+				background-color: $border-color;
+				border-radius: 100%;
+				transform: translate(calc(-50% - .5px), 100%);
+				transition: background-color 1s ease-out;
+			}
+
+			&.highlight:after {
+				background-color: $primary;
+			}
+		}
+
+		> div:first-of-type {
+			margin-left: -1.5rem;
+		}
+
+		&.highlight {
+			.bookmarked {
+				opacity: 1 !important;
+			}
+		}
+
+		@include topic-avatars();
+	}
+
+	[component="topic/event"], [component="topic/necro-post"] {
+		&.timeline-event {
+			text-align: left;
+			justify-content: left;
+			font-size: 1em;
+
+			.timeline-badge {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+
+				width: 20px;
+				height: 20px;
+				padding: 0;
+				margin-right: 1rem;
+				color: $gray-500;
+				background-color: $body-bg;
+			}
+
+			.timeline-text {
+				line-height: 32px;
+				text-transform: initial;
+			}
+		}
+	}
+
+	@include media-breakpoint-down(sm) {
+		> [component="post"], .timeline-event {
+			&:first-child:before, &:last-child:after {
+				display: none;
+			}
+		}
+
+		[component="post"] {
+			margin-left: initial;
+			> div:not(.content) {
+				margin-left: 0;
+			}
+		}
+
+		[component="post"]:last-child:after {
+			display: none;
+		}
+
+		.timeline-event {
+			.timeline-text.timeago {
+				display: none;
+			}
+		}
+	}
+
+	@include media-breakpoint-up(sm) {
+		&.minimal {
+			.post-footer, .timeline-event, [component="topic/quickreply/container"], .bookmarked {
+				display: none !important;
+			}
+
+			[component="post/content"] {
+				@include line-clamp(1);
+			}
+		}
+
+		> [component="post"], .timeline-event, > [component="post/placeholder"] {
+			border-left: 2px solid $border-color;
+
+			&.highlight {
+				border-left: 2px solid $primary;
+			}
+		}
+
+		.timeline-event {
+			margin-left: 1.5rem;
+
+			[component="topic/event/delete"] {
+				visibility: hidden;
+			}
+
+			&:hover {
+				[component="topic/event/delete"] {
+					visibility: visible;
+
+					&:hover {
+						color: $danger;
+					}
+				}
+			}
+		}
+
+		[component="topic/event"], [component="topic/necro-post"] {
+			&.timeline-event .timeline-badge {
+				width: 24px;
+				height: 24px;
+				padding: 0;
+				margin-left: -0.75rem;
+				margin-right: 1.25rem;
+				border: 2px solid $border-color;
+				border-radius: 50%;
+			}
+		}
+	}
+}

package/scss/modals.scss

@@ -0,0 +1,4 @@
+.tool-modal {
+	bottom: $spacer * 3;
+	right: $spacer * 4;
+}

package/scss/modules/bottom-sheet.scss

@@ -0,0 +1,52 @@
+.bottom-sheet {
+	@include media-breakpoint-down(sm) {
+		.dropdown-menu {
+			display: block;
+			visibility: hidden;
+
+			position: fixed!important;
+			inset: auto 0 0 0!important;
+
+			margin: 0 -1px -1px -1px;
+			padding: 0 5px;
+			max-height: 60%;
+
+			box-shadow: 0 2px 6px rgba(0,0,0,0.35);
+			overflow: auto;
+			-webkit-overflow-scrolling: touch;
+			transform: translate3d(0, 350px, 0);
+			transition: transform 0.3s, visibility 0s 0.3s;
+			z-index: $zindex-popover;
+			padding: 5px 0 10px;
+
+			border-radius: 0;
+			border: 0px;
+			border-top: 1px solid $border-color;
+
+			> li {
+				> a, .dropdown-item {
+					padding: 10px 20px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				&.divider {
+					padding: 0;
+				}
+			}
+		}
+
+		.dropdown-menu.show {
+			transform: none!important;
+			visibility: visible;
+			transition-delay: 0s;
+			top: auto;
+			width: auto;
+		}
+
+		.dropdown-backdrop {
+			background-color: rgba(0, 0, 0, .3);
+		}
+	}
+}

package/scss/modules/breadcrumbs.scss

@@ -0,0 +1,16 @@
+.breadcrumb .breadcrumb-item {
+	font-family: $font-family-secondary;
+
+	&::before {
+		font-family: $font-family-sans-serif;
+		font-weight: $font-weight-semibold;
+		font-size: $small-font-size;
+		line-height: $h4-font-size;
+	}
+
+	a, span {
+		color: $body-color;
+		font-size: $small-font-size;
+		line-height: 16px;
+	}
+}

package/scss/modules/composer.scss

@@ -0,0 +1,21 @@
+$composer-color: $body-color !default;
+$composer-bg: $body-bg !default;
+
+@mixin composer-text-bg($color, $bg) {
+	color: $color !important;
+	background-color: $bg !important;
+}
+
+.composer {
+	z-index: 3 !important;
+}
+
+.skin-noskin {
+	// only using colors when there is no bootswatch skin applied
+	$composer-color: $secondary;
+	$composer-bg: $light;
+
+	.composer {
+		@include composer-text-bg($composer-color, $composer-bg);
+	}
+}

package/scss/modules/cover.scss

@@ -0,0 +1,115 @@
+// used in group and account pages
+.cover {
+	background-size: cover;
+	background-repeat: no-repeat;
+	height: 200px;
+	position: absolute;
+	background-origin: content-box;
+	width: 100%;
+	top: var(--panel-offset);
+	left: auto;
+	right: 0px;
+
+	&:hover {
+		.controls {
+			opacity: 0.8;
+		}
+	}
+
+	.controls {
+		text-align: center;
+		height: 200px;
+		line-height: 200px;
+		opacity: 0;
+		@include transition(opacity .15s linear);
+		cursor: pointer;
+		pointer-events: none;
+
+		> * {
+			pointer-events: all;
+		}
+
+		.fa {
+			color: white;
+			background-color: #333;
+			opacity: 1;
+			margin: 15px;
+			padding: 5px;
+			border-radius: 4px;
+		}
+	}
+
+	&.active {
+		&:hover {
+			cursor: move;
+		}
+
+		.controls {
+			> * {
+				display: none;
+			}
+		}
+
+		.save {
+			display: inline-block;
+		}
+	}
+
+	&.saving {
+		.save {
+			display: none;
+		}
+
+		.indicator {
+			display: inline-block;
+		}
+	}
+
+	.save, .indicator {
+		display: inline-block;
+		position: absolute;
+		top: 1em;
+		right: 2em;
+		opacity: 1;
+		padding: 0.5em;
+		font-weight: bold;
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+
+	.save {
+		display: none;
+	}
+
+	.indicator {
+		display: none;
+	}
+}
+
+.cover > .container {
+	height: 200px;
+	position: relative;
+	pointer-events: none;
+	.save {
+		pointer-events: all;
+	}
+	.controls {
+		pointer-events: none;
+		> * {
+			pointer-events: all;
+		}
+	}
+}
+
+@include media-breakpoint-up(md) {
+	.cover,  .cover > .container {
+		height: 300px;
+
+		.controls {
+			height: 300px;
+			line-height: 300px;
+		}
+	}
+}

package/scss/modules/tags.scss

@@ -0,0 +1,6 @@
+.tag-list {
+	.tag {
+		background-color: $gray-200;
+		color: $gray-700;
+	}
+}

package/scss/modules/topic-navigator.scss

@@ -0,0 +1,61 @@
+[component="topic/navigator"] {
+	max-height: calc(200px + (2rem * 4));
+	user-select: none;
+
+	.track {
+		width: 2px;
+		background-color: mix($dark, $light, 10%);
+
+		.handle {
+			cursor: grab;
+			transition: $transition-base;
+
+			&:active {
+				transition: none;
+				cursor: grabbing;
+			}
+
+			.meta {
+				display: none;
+				top: -8px;
+				left: calc($spacer + 8px);
+				font-size: 13px;
+			}
+		}
+
+		.knob {
+			width: 16px;
+			height: 16px;
+			background-color: $link-color;
+			margin-left: 1px;
+		}
+
+		.unread {
+			width: 2px;
+			height: 0; // initial
+			bottom: 0;
+			background: $primary;
+			transition: $transition-base;
+
+			.meta {
+				display: none;
+				left: calc($spacer + 8px);
+				font-size: 13px;
+			}
+		}
+	}
+}
+
+.sidebar.open {
+	[component="topic/navigator"] {
+		align-self: flex-start;
+	}
+
+	[component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
+		margin-top: 0 !important;
+	}
+
+	.handle .meta, .unread .meta {
+		display: block;
+	}
+}

package/scss/modules/topics-list.scss

@@ -0,0 +1,20 @@
+.topic-list {
+	overflow-x: hidden!important;
+}
+[component="category/topic"] {
+	&.selected {
+		[component="topic/select"] {
+			color: $success!important;
+		}
+	}
+	.lastpost .post-content {
+		p { margin-bottom: 0; }
+	}
+
+	&.unread .title {
+		color: $link-color;
+	}
+	.ui-sortable-handle {
+		cursor: move;
+	}
+}

package/scss/modules/user-menu.scss

@@ -0,0 +1,5 @@
+[component="header/usercontrol"] {
+	[component="header/profilelink"] > div, .user-status > div {
+		min-width: 1.25em; // match fontawesome fixed width
+	}
+}

package/scss/overrides.scss

@@ -1 +1,66 @@
 // only overrides to bs5 variables here
+
+// Harmony colours
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #0d6efd !default;
+// $indigo:  #6610f2 !default;
+// $purple:  #6f42c1 !default;
+// $pink:    #d63384 !default;
+$red:     #dc3545 !default;
+// $orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #198754 !default;
+// $teal:    #20c997 !default;
+$cyan:    #0dcaf0 !default;
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-900 !default;
+
+$body-color: $gray-800 !default;
+$body-bg: $white !default;
+$text-muted: $gray-600 !default;
+$border-color: $gray-200 !default;
+$link-color: shade-color($blue, 20%) !default;
+
+// no caret on dropdown-toggle
+$enable-caret: false;
+
+// disable smooth scroll, this makes window.scrollTo(0,0) in ajaxify.js take x milliseconds
+$enable-smooth-scroll: false;
+
+// used in site title
+$enable-shadows: true;
+
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Custom fonts
+$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-secondary: "Poppins" !default;
+$font-weight-semibold: 500 !default;
+
+$breadcrumb-divider: quote("→");
+$breadcrumb-divider-color: $gray-500 !default;
+$breadcrumb-active-color: $body-color !default;
+$breadcrumb-item-padding-x: 12px !default;
+
+.form-control::placeholder, .bootstrap-tagsinput::placeholder {
+	color: $gray-500 !important;
+}

package/scss/sidebar.scss

@@ -0,0 +1,125 @@
+.skin-noskin {
+	// only using colors when there is no bootswatch skin applied
+	.sidebar, .bottombar {
+		color: $secondary !important;
+		background-color: $light !important;
+	}
+	.bottombar {
+		.dropdown-menu {
+			color: $secondary !important;
+			background-color: $light !important;
+		}
+	}
+}
+
+.sidebar {
+	$hover-color: mix($light, $dark, 90);
+
+	&.open {
+		min-width: 200px;
+		max-width: 200px;
+		width: 200px;
+
+		.sidebar-toggle {
+			.fa-angles-right { display: none; }
+			.fa-angles-left { display: inline-block; }
+		}
+		.visible-open { display: initial; }
+		.visible-closed { display: none; }
+		hr.visible-open { display: block; }
+		.truncate-open {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	.visible-open {	display: none; }
+	.visible-closed {display: initial; }
+
+	.truncate-open {
+		overflow: initial;
+		text-overflow: initial;
+		white-space: initial;
+	}
+
+	.nav-link {
+		padding: 0;
+		&.active {
+			background-color: $hover-color;
+		}
+	}
+	#user_dropdown .avatar {
+		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
+	}
+
+	.nav-btn {
+		padding: ($spacer * 0.25) ($spacer * 0.5);
+		border-radius: $border-radius-sm;
+		cursor: pointer;
+		&:hover {
+			background-color: $hover-color;
+		}
+	}
+
+	.sidebar-toggle {
+		justify-content: start;
+		.fa-angles-right { display: inline-block; }
+		.fa-angles-left { display: none; }
+	}
+
+	.search-dropdown {
+		width: 300px;
+	}
+
+	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		min-width: 300px;
+		ul {
+			max-height: 400px;
+			overflow-y: auto;
+		}
+	}
+
+	.badge {
+		font-size: 9px;
+		line-height: 12px;
+		&.visible-open {
+			font-size:12px;
+			line-height: 16px;
+		}
+	}
+
+	[data-widget-area="sidebar-footer"] {
+		font-size: $font-size-base * 0.75;
+	}
+}
+
+.bottombar {
+	z-index: $zindex-dropdown;
+	.nav-text {
+		font-size: 1rem;
+		color: $body-color;
+	}
+	.nav-btn {
+		padding: 8px;
+		border-radius: $border-radius-sm;
+	}
+	.usermenu, .chats, .notifications, .drafts, .search, .logged-out-menu {
+		.visible-open { display: none; }
+	}
+	.badge {
+		font-size: 9px;
+		line-height: 12px;
+	}
+	.search.bottom-sheet .dropdown-menu {
+		max-height: 100%;
+	}
+}
+
+.sidebar-left {
+	border-right: 1px solid $border-color;
+	left: 0px;
+}
+.sidebar-right {
+	border-left: 1px solid $border-color;
+	right: 0px;
+}

package/scss/skins.scss

@@ -0,0 +1,13 @@
+.skin-quartz {
+	// $body-bg-image is gradient in quartz
+	.icon {
+		background-color: transparent !important;
+	}
+}
+
+.skin-quartz, .skin-lux, .skin-morph {
+	// $spacer being modified looks bad on this element
+	.topic-list-header .btn, .topic-main-buttons .btn {
+		padding: 6px 12px;
+	}
+}