.custom-navbar {

	.more {
		width: 24px;
		height: 18px;
		position: relative;

		&::before {
			content: "";
			top: calc(50% - 1px);
			width: 100%;
			height: 2px;
			position: absolute;
			background: rgba(0, 0, 0, .8);
		}

		&::after {
			content: "";
			top: 0;
			width: 100%;
			height: calc(100% - 4px);
			position: absolute;
			border-top: 2px solid rgba(0, 0, 0, .8);
			border-bottom: 2px solid rgba(0, 0, 0, .8);
		}
	}

	.more-menu {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, .1);

		.content {
			margin: 200rpx 0 0 12rpx;
			z-index: 1;
			position: fixed;
			background: rgba(255, 255, 255, .95);
			border-radius: 2px;
			box-shadow: 0 0 12px rgba(0, 0, 0, .2);
	
			&::before {
				content: "";
				margin: -10rpx 0 0 24rpx;
				border-top: 24rpx solid rgba(255, 255, 255, .95);
				border-left: 24rpx solid transparent;
				z-index: 1;
				position: fixed;
				transform: rotate(-45deg);
			}
		}
	}
}

.calendar {

	// .t-calendar__dates-item {
	// 	color: var(--td-text-color-disabled);

	// 	&.t-calendar__dates-item--selected {
	// 		color: var(--td-calendar-title-color);
	// 		background: transparent;
	// 	}
	// }
}

.journal-list {
	width: 100vw;
	
	.content {

		.date {
			font-weight: bold;
		}

		.text,
		.items {
			position: relative;
			font-size: 14px;
		}

		.text {
			width: calc(100% - 32px - 2rem);
			padding: 8px 16px;
			margin: .5rem 1rem 1rem 1rem;
			position: relative;
			background: #FFF8E1;
			box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
			border-radius: 2px;

			// 纸张纹理效果
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background:
					linear-gradient(90deg,
						rgba(255, 255, 255, 0) 0%,
						rgba(255, 255, 255, 0.3) 50%,
						rgba(255, 255, 255, 0) 100%),
					linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
					linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
				pointer-events: none;
				background-size: 100% 100%, 10px 10px, 10px 10px;
			}

			.location {
				color: #777;
				text-align: right;
			}
		}

		.items {
			column-gap: .25rem;
			column-count: 3;
			padding-bottom: 2rem;

			.item {
				overflow: hidden;
				background: #FFF;
				break-inside: avoid;
				margin-bottom: .25rem;

				&.thumbnail {
					width: 100%;
					display: block;
				}

				&.video {
					height: auto;
					position: relative;

					&::after {
						content: "";
						top: 50%;
						left: 53%;
						width: 0;
						height: 0;
						position: absolute;
						transform: translate(-50%, -50%);
						border-top: 16px solid transparent;
						border-left: 24px solid rgba(255, 255, 255, .9);
						border-bottom: 16px solid transparent;
						pointer-events: none;
					}
				}
			}
		}
	}

	.start {
		color: #777;
		padding: 1rem 0;
		font-size: 12px;
		text-align: center;
	}
}