livetrail/src/styles/_page.project.panel.feed.scss

@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

#feed {
	#feed-panel {
		.quote {
			display: flex;
			align-items: center;
			gap: var.$elem-spacing;
			padding: var.$elem-spacing;
			border-radius: var.$block-radius;
			border-left-width: var.$border-thick;
			border-left-style: solid;
			font-size: 0.9em;
			box-shadow: var.$elem-shadow;

			&.post {
				border-left-color: color.$post;
				background: color.$post-bg;
				color: color.$post;
			}

			&.message {
				border-left-color: color.$message;
				background: color.$message-bg;
				color: color.$message;
			}

			&.media {
				border-left-color: color.$media;
				background: color.$media-bg;
				color: color.$media;
			}

			.image {
				flex: 0 0 auto;
				width: 3 * var.$block-spacing;
				height: 3 * var.$block-spacing;
				object-fit: cover;
				border-radius: var.$block-radius;
			}

			.text {
				flex: 1 1 auto;
				min-width: 0;
				display: flex;
				flex-direction: column;
				gap: var.$text-spacing;

				.content {
					margin: 0;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				img {
					transform: scaleX(90%) scaleY(90%);
				}
			}
		}

		#feed-header {
			.poster {
				.poster-form {
					display: flex;
					flex-direction: column;
					gap: var.$block-spacing;

					.poster-actions {
						display: flex;
						align-items: stretch;
						gap: var.$block-spacing;

						input[name=name] {
							flex: 1 1 auto;
							min-width: 0;
						}

						button[name=submit] {
							flex: 0 0 auto;
						}
					}
				}
			}
		}

		#feed-posts {
			position: relative;
		}

		.body-box {
			position:relative;
			display: flex;
			flex-direction: column;
		}

		.post-item {
			margin-bottom: var.$block-spacing;
			width: calc(100% - var.$block-spacing);
			box-shadow: var.$map-shadow;
			color: color.$default;

			a {
				color: color.$post;
				&:hover {
					color: color.$post-hover;
				}
			}

			.header {
				display: flex;
				align-items: center;
				padding: 0 var.$block-spacing;
				position: relative;
				border-radius: var.$block-radius var.$block-radius 0 0;
				@include common.topo-bg(linear, 0deg, color.$default-bg);

				div {
					font-size: 0.8em;
					padding: var.$elem-spacing 0px;

					&.index {
						display: flex;
						align-items: center;
						gap: var.$elem-spacing;
						flex: 0 0 auto;

						.link, .reply {
							padding: 0;
							line-height: 1;
						}
					}

					&.time {
						flex: 1 1 auto;
						text-align: right;
						font-style: italic;
					}
				}
			}

			.body {
				clear: both;
				padding: 0em var.$block-spacing var.$block-spacing;
				border-radius: 0 0 var.$block-radius var.$block-radius;
				background: color.$default-bg;
			}

			.drill {
				&:hover .comment {
					opacity: 0.3;
				}

				.comment {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					margin: 0;
					padding: var.$elem-spacing;
					line-height: normal;
					box-sizing: border-box;
					border-radius: 0 0 var.$block-radius var.$block-radius;
					transition: opacity var.$trans-quick;
					cursor: auto;
					font-size: 0.9em;

					&:hover {
						opacity: 1;
					}

					p {
						margin: 0;
					}

					p + p {
						margin-top: var.$elem-spacing;
					}
				}
			}

			&.headerless {
				.body {
					padding-top: var.$block-spacing;
					text-align: center;
					border-radius: var.$block-radius;
					@include common.topo-bg(radial, circle, color.$default-bg-light, 20%);

					p {
						margin: 0;
						
						.app-icon {
							display: inline-block;
							font-size: 2em;
							margin: var.$elem-spacing 0;
						}
					}
				}
			}

			&.message {
				color: color.$message;

				.header {
					@include common.topo-bg(linear, 0deg, color.$message-bg);
				}

				.body {
					background: color.$message-bg;
				}

				a {
					color: color.$message;
					&:hover {
						color: color.$message-hover;
					}
				}

				.comment {
					background: color.$message-bg-light;
				}

				.weather {
					position: absolute;
					top: var.$block-spacing;
					right: var.$block-spacing;
					
					.app-icon-with-text {
						gap: 0;
					
						.app-icon {
							font-size: 1.3em;
							vertical-align: middle;
							height: var.$block-spacing;
							background: color.$message;
							color: color.$message-bg;
							border-radius: var.$block-radius 0 0 var.$block-radius;
							padding: var.$elem-spacing;
						}

						.temperature {
							display: inline-block;
							line-height: var.$block-spacing;
							vertical-align: middle;
							padding: var.$elem-spacing;
							background: color.$message-bg;
							color: color.$message;
							border-radius: 0 var.$block-radius var.$block-radius 0;
						}
					}
				}

				.staticmap {
					width: 100%;
					border-radius: var.$block-radius;
				}
			}

			&.post {
				.body {
					display: flex;
					flex-direction: column;
					gap: var.$elem-spacing;
					padding-bottom: var.$elem-spacing;

					.message p {
						margin: 0;

						& + p {
							margin-top: var.$text-spacing;
						}
					}
				}
			}

			&.media {
				color: color.$media;
				
				.header {
					@include common.topo-bg(linear, 0deg, color.$media-bg);
				}

				a {
					color: color.$media;
					&:hover {
						color: color.$media-hover;
					}
				}

				.body {
					background: color.$media-bg;

					a.media-link {
						display: inline-block;
						width: 100%;
						margin: 0;
						position: relative;
						line-height: 0;

						&.drill {
							.comment {
								background: color.$media-bg-light;
							}

							.drill-icon {
								.drill-image {
									color: transparent;
								}
								.drill-video {
									color: color.$over-img-bg;
								}
							}

							&:hover {
								.drill-icon {
									.drill-image, .drill-video {
										color: color.$media-bg;
										filter: drop-shadow(var.$elem-shadow);
									}
								}
							}
						}

						img {
							width: 100%;
							height: auto;
							image-orientation: from-image;
							outline: none;
							border-radius: var.$block-radius;
						}
					}
				}
			}
		}
	}
}