nodebb-theme-harmony 2.0.0-pre.9 → 2.0.1

package/scss/mixins.scss

@@ -1,177 +1,184 @@
-@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 {
-			padding-bottom: 2rem;
-
-			&: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;
-		}
-
-
-		[component="topic/event"], [component="topic/necro-post"] {
-			&.timeline-event {
-				.timeline-text {
-					line-height: 16px;
-					font-size: 0.75rem;
-				}
-			}
-		}
-	}
-
-	@include media-breakpoint-up(sm) {
-		> [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%;
-			}
-		}
-	}
+@mixin topic-avatars() {
+	.icon .avatar, .timeline-badge {
+		z-index: 1;
+
+		line-height: calc(var(--avatar-size) - 4px);
+	}
+
+	[component="user/locality"] {
+		transform: translate(-75%, -100%);
+		z-index: 2;
+		background-color: $body-bg;
+		font-size: .5rem;
+	}
+
+	[component="user/status"] {
+		transform: translate(-80%, -100%);
+		z-index: 2;
+	}
+
+	@include media-breakpoint-up(sm) {
+		[component="user/status"] {
+			padding: 5px;
+		}
+
+		[component="user/locality"] {
+			font-size: .75rem;
+		}
+	}
+}
+
+@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 {
+			padding-bottom: 2rem;
+
+			&: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;
+		}
+
+
+		[component="topic/event"], [component="topic/necro-post"] {
+			&.timeline-event {
+				.timeline-text {
+					line-height: 16px;
+					font-size: 0.75rem;
+				}
+			}
+		}
+	}
+
+	@include media-breakpoint-up(sm) {
+		> [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

@@ -1,6 +1,6 @@
-.tool-modal {
-	@include media-breakpoint-up(md) {
-		bottom: $spacer * 3;
-		right: $spacer * 4;
-	}
-}
+.tool-modal {
+	@include media-breakpoint-up(md) {
+		bottom: $spacer * 3;
+		right: $spacer * 4;
+	}
+}

package/scss/modules/breadcrumbs.scss

@@ -1,16 +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;
-	}
+.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/cover.scss

@@ -1,105 +1,103 @@
-// 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: 1;
-		}
-	}
-
-	.controls {
-		height: 200px;
-		line-height: 200px;
-		opacity: 0;
-		@include transition(opacity .15s linear);
-		cursor: pointer;
-		pointer-events: none;
-
-		> * {
-			pointer-events: all;
-		}
-	}
-
-	&.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;
-		}
-	}
+// 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, .controls:focus-within {
+		opacity: 1;
+	}
+
+	.controls {
+		height: 200px;
+		line-height: 200px;
+		opacity: 0;
+		@include transition(opacity .15s linear);
+		cursor: pointer;
+		pointer-events: none;
+
+		> * {
+			pointer-events: all;
+		}
+	}
+
+	&.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/filters.scss

@@ -1,8 +1,8 @@
-[component="search/filters"], [component="flags/filters"] {
-	.filter-btn {
-		border-color: $gray-300!important;
-		&.active-filter {
-			border-color: $primary!important;
-		}
-	}
+[component="search/filters"], [component="flags/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
 }