nodebb-theme-persona 13.3.32 → 13.3.34

package/scss/header.scss

@@ -1,361 +1,229 @@
-.header, .slideout-menu {
-	.notifications.dropdown, .chats.dropdown {
-		.dropdown-menu {
-			padding: 0;
-		}
-	}
-
-	@mixin notification-list() {
-		overflow-x: hidden;
-		overflow-y: auto;
-		max-height: 250px;
-		padding: 0;
-
-		li {
-			display: flex;
-			gap: 1rem;
-			width: 400px;
-			text-align: left;
-			list-style-type: none;
-			padding: .75em 0.5em;
-
-			&.loading-text, &.no-notifs {
-				justify-content: center;
-
-				a {
-					color: inherit;
-				}
-			}
-
-			.notification-chat-content {
-				flex: 1;
-
-				a {
-					white-space: normal;
-					margin: 0;
-					text-overflow: ellipsis;
-
-					.text {
-						margin-left: 40px;
-						margin-right: 60px;
-						display: block;
-						min-height: 32px;
-					}
-				}
-			}
-
-			.notification-chat-controls {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				gap: .5rem;
-
-				.relTime {
-					font-size: 10px;
-				}
-			}
-
-			.mark-read {
-				color: $secondary;
-				.read {
-					display: block;
-				}
-				.unread {
-					display: none;
-				}
-				&:hover {
-					color: darken($secondary, 10%);
-					@include pointer;
-				}
-			}
-
-			&.unread {
-				background-color: $warning;
-
-				&:hover {
-					background-color: darken($warning, 5%);
-				}
-
-				.mark-read {
-					.read {
-						display: none;
-					}
-					.unread {
-						display: block;
-					}
-				}
-			}
-		}
-	}
-
-	.notification-list {
-		@include notification-list;
-	}
-
-	.chat-list {
-		@include notification-list;
-
-		> li {
-			@include pointer;
-			width: 500px;
-			padding: 0;
-			margin: 0;
-			gap: 0;
-			overflow-y: hidden;
-
-			.notification-chat-content {
-				padding: 0.5rem;
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			.teaser-content {
-				white-space: nowrap;
-				max-height: 19px;
-			}
-
-			&:not(:last-child) {
-				border-bottom: 1px solid $dropdown-border-color;
-			}
-
-			&.no_active a {
-				text-align: center;
-				white-space: normal;
-			}
-
-			a {
-				line-height: 24px;
-			}
-
-			.members {
-				padding-left: 1rem;
-
-				li {
-					display: inline-block;
-					width: 16px;
-					padding: 0;
-					margin: 0;
-				}
-			}
-		}
-	}
-}
-
-.header {
-
-	[component="navbar/title"] {
-		display: none !important; //temp
-	}
-
-	#user_dropdown {
-		padding: 9px 15px;
-
-		img, .user-icon {
-			@include user-icon-style(30px, 1.8rem, 50%);
-			border: 0px none;
-
-			span {
-				font-size: 14px;
-				font-weight: 400;
-			}
-		}
-	}
-
-	.forum-logo {
-		max-height: 50px;
-		width: auto;
-	}
-
-	.header-topic-title {
-		text-align: right;
-		padding: 15px 15px;
-		font-size: 18px;
-		line-height: 20px;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		span {
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			color: $primary;
-		}
-	}
-}
-
-.breadcrumb {
-	li {
-		max-width: 100%;
-		@include text-ellipsis;
-		position: relative;
-	}
-
-	.fa {
-		margin-left: 10px;
-		color: rgb(153, 153, 153);
-	}
-
-	@include media-breakpoint-down(sm) {
-		li {
-			display: none;
-		}
-
-		li:nth-last-child(2), li:nth-last-child(1), li:last-child {
-			display: inline-block;
-		}
-
-		li:nth-last-child(2):before {
-			display: none;
-		}
-
-		li:last-child {
-			white-space: normal;
-		}
-	}
-}
-
-#reconnect {
-	font-size: 14px;
-	-webkit-transition: opacity 250ms linear;
-	-moz-transition: opacity 250ms linear;
-	-ms-transition: opacity 250ms linear;
-	-o-transition: opacity 250ms linear;
-	transition: opacity 250ms linear;
-	-moz-opacity: 0.00;
-	opacity: 0.00;
-	min-width: 45px;
-
-	&.active {
-		-moz-opacity: 1;
-		opacity: 1;
-	}
-
-	& +div.tooltip .tooltip-inner {
-		width: 350px;
-	}
-}
-.unread-count {
-	position: relative;
-	&:after {
-		position: absolute;
-		left: 10px;
-		top: -10px;
-		font-size: 10px;
-		text-align: center;
-		border: 1px solid #890405;
-		color: #fff;
-		font-weight: bold;
-		min-width: 16px;
-		-webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-		border-radius: 3px;
-		background: #c91106;
-		padding: 1px 2px;
-		font-family: $font-family-sans-serif;
-	}
-}
-
-.unread-count[data-content]:not([data-content=""]):not([data-content="0"]):after {
-	content: attr(data-content);
-}
-
-.navbar-toggler {
-	.notification-icon {
-		position: absolute;
-		&[component="unread/icon"]::after {
-			left: -10px;
-		}
-		&[component="notifications/icon"]:after {
-			left: -5px;
-			top: -5px;
-		}
-		&[component="chat/icon"]:after {
-			left: 20px;
-			top: -5px;
-		}
-
-		&:before {
-			display: none;
-		}
-	}
-}
-
-.slideout-menu .unread-count:after {
-	position: relative;
-	left: -6px;
-	top: -7px;
-}
-
-#search-form {
-	#search-button {
-		max-width: 60px;
-		width: auto;
-		transition-property: max-width, padding-left, padding-right;
-		transition-duration: .2s;
-		transition-timing-function: ease;
-		overflow: hidden;
-	}
-	#search-button.hidden {
-		display: inline-block !important;
-		visibility: visible !important;
-		max-width: 0;
-		padding-left: 0;
-		padding-right: 0;
-	}
-	#search-fields {
-		overflow: hidden;
-		transition: max-width 0.2s ease 0s;
-		display: inline-block !important;
-		visibility: visible !important;
-
-		&.hidden {
-			max-width: 0;
-		}
-
-		input.form-control {
-			white-space: nowrap;
-			outline: none;
-			box-shadow: none;
-		}
-	}
-}
-
-body.skin-default .header {
-	.notification-list {
-		li {
-			a {
-				color: inherit;
-			}
-		}
-	}
-}
-
-label.dropdown-toggle {
-	cursor: pointer;
-	margin: 0;
-}
-
-#user-control-list-check:checked + #user-control-list {
-	display: block;
-}
-
-.dropdown-menu > li > form {
-	> button, > .btn-link {
-		text-align: left;
-		width: 100%;
-		background: none;
-		border: none;
-		display: block;
-		padding: 3px 20px;
-		clear: both;
-		font-weight: normal;
-		line-height: $line-height-base;
-		white-space: nowrap; // prevent links from randomly breaking onto new lines
-
-		&:hover,
-		&:focus {
-			text-decoration: none;
-			color: $dropdown-link-hover-color;
-			background-color: $dropdown-link-hover-bg;
-		}
-	}
-}
+.header {
+	.notification-list, .chat-list {
+		overflow-x: hidden;
+		overflow-y: auto;
+		max-height: 250px;
+		padding: 0;
+		width: 300px;
+		min-width: 300px;
+	}
+}
+
+.header {
+
+	[component="navbar/title"] {
+		display: none !important; //temp
+	}
+
+	#user_dropdown {
+		padding: 9px 15px;
+
+		img, .user-icon {
+			@include user-icon-style(30px, 1.8rem, 50%);
+			border: 0px none;
+
+			span {
+				font-size: 14px;
+				font-weight: 400;
+			}
+		}
+	}
+
+	.forum-logo {
+		max-height: 50px;
+		width: auto;
+	}
+
+	.header-topic-title {
+		text-align: right;
+		padding: 15px 15px;
+		font-size: 18px;
+		line-height: 20px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		span {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			color: $primary;
+		}
+	}
+}
+
+.breadcrumb {
+	li {
+		max-width: 100%;
+		@include text-ellipsis;
+		position: relative;
+	}
+
+	.fa {
+		margin-left: 10px;
+		color: rgb(153, 153, 153);
+	}
+
+	@include media-breakpoint-down(sm) {
+		li {
+			display: none;
+		}
+
+		li:nth-last-child(2), li:nth-last-child(1), li:last-child {
+			display: inline-block;
+		}
+
+		li:nth-last-child(2):before {
+			display: none;
+		}
+
+		li:last-child {
+			white-space: normal;
+		}
+	}
+}
+
+#reconnect {
+	font-size: 14px;
+	-webkit-transition: opacity 250ms linear;
+	-moz-transition: opacity 250ms linear;
+	-ms-transition: opacity 250ms linear;
+	-o-transition: opacity 250ms linear;
+	transition: opacity 250ms linear;
+	-moz-opacity: 0.00;
+	opacity: 0.00;
+	min-width: 45px;
+
+	&.active {
+		-moz-opacity: 1;
+		opacity: 1;
+	}
+
+	& +div.tooltip .tooltip-inner {
+		width: 350px;
+	}
+}
+.unread-count {
+	position: relative;
+	&:after {
+		position: absolute;
+		left: 10px;
+		top: -10px;
+		font-size: 10px;
+		text-align: center;
+		border: 1px solid #890405;
+		color: #fff;
+		font-weight: bold;
+		min-width: 16px;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		border-radius: 3px;
+		background: #c91106;
+		padding: 1px 2px;
+		font-family: $font-family-sans-serif;
+	}
+}
+
+.unread-count[data-content]:not([data-content=""]):not([data-content="0"]):after {
+	content: attr(data-content);
+}
+
+.navbar-toggler {
+	.notification-icon {
+		position: absolute;
+		&[component="unread/icon"]::after {
+			left: -10px;
+		}
+		&[component="notifications/icon"]:after {
+			left: -5px;
+			top: -5px;
+		}
+		&[component="chat/icon"]:after {
+			left: 20px;
+			top: -5px;
+		}
+
+		&:before {
+			display: none;
+		}
+	}
+}
+
+.slideout-menu .unread-count:after {
+	position: relative;
+	left: -6px;
+	top: -7px;
+}
+
+#search-form {
+	#search-button {
+		max-width: 60px;
+		width: auto;
+		transition-property: max-width, padding-left, padding-right;
+		transition-duration: .2s;
+		transition-timing-function: ease;
+		overflow: hidden;
+	}
+	#search-button.hidden {
+		display: inline-block !important;
+		visibility: visible !important;
+		max-width: 0;
+		padding-left: 0;
+		padding-right: 0;
+	}
+	#search-fields {
+		overflow: hidden;
+		transition: max-width 0.2s ease 0s;
+		display: inline-block !important;
+		visibility: visible !important;
+
+		&.hidden {
+			max-width: 0;
+		}
+
+		input.form-control {
+			white-space: nowrap;
+			outline: none;
+			box-shadow: none;
+		}
+	}
+}
+
+body.skin-default .header {
+	.notification-list {
+		li {
+			a {
+				color: inherit;
+			}
+		}
+	}
+}
+
+label.dropdown-toggle {
+	cursor: pointer;
+	margin: 0;
+}
+
+#user-control-list-check:checked + #user-control-list {
+	display: block;
+}
+
+.dropdown-menu > li > form {
+	> button, > .btn-link {
+		text-align: left;
+		width: 100%;
+		background: none;
+		border: none;
+		display: block;
+		padding: 3px 20px;
+		clear: both;
+		font-weight: normal;
+		line-height: $line-height-base;
+		white-space: nowrap; // prevent links from randomly breaking onto new lines
+
+		&:hover,
+		&:focus {
+			text-decoration: none;
+			color: $dropdown-link-hover-color;
+			background-color: $dropdown-link-hover-bg;
+		}
+	}
+}