spot/src/styles/_page.project.feed.scss

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

#feed {
	#feed-panel {
		#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;
						}
					}
				}
			}

			.archived {
				background: color.$default-bg-light;
			}
		}

		#feed-posts {
			position: relative;
		}

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

		.post-item {
			margin-bottom: var.$block-spacing;
			background: color.$post-bg;
			color: color.$post;
			border-radius: var.$block-radius;
			width: calc(100% - var.$block-spacing);
			box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;

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

			.header {
				display: flex;
				align-items: center;
				padding: 0 var.$block-spacing;
				position: relative;

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

					&.index {
						flex: 0 0 auto;

						.link {
							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;
			}

			&.headerless {
				.body {
					padding-top: var.$block-spacing;
					text-align: center;

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

			.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 0.3s;
				cursor: auto;
				font-size: 0.9em;
			}

			&.message {
				background: color.$message-bg;
				color: color.$message;

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

				.drill {

					.drill-icon {

						.drill-hover-icon {
							display: none;
							filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
						}
					}

					&:hover {
						.sub {
							display: none;
						}
						.drill-hover-icon {
							color: color.$message-flashy;
						}
						.comment {
							opacity: 0.3;
						}
					}

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

						&:hover {
							opacity: 1;
						}
						p {
							margin: 0;
						}

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

				.weather {
					position: absolute;
					top: var.$block-spacing;
					right: var.$block-spacing;
					
					.spot-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;
						margin-right: 0;
					}

					.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 {
					padding: 0 var.$block-spacing var.$elem-spacing;
					
					.message {
						margin: 0;
					}

					.signature {
						margin: var.$elem-spacing 0 0 0;
						text-align: right;
						font-style: italic;

						img {
							vertical-align: baseline;
							margin: 0 0.2em calc((1em - 24px)/2) 0;
							position: relative;
						}
					}
				}
			}

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

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

				.body {
					a {
						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(0px 1px 1px color.$over-img-shadow);
									}
								}

								.comment {
									opacity: 0;
								}
							}
						}

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