One Hat Cyber Team

Your IP : 172.71.120.56

Server IP : 188.114.97.7

Server : Linux advantage-project 5.14.0-503.26.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Feb 19 16:28:19 UTC 2025 x86_64

Server Software : Apache/2.4.62 (Rocky Linux) OpenSSL/3.2.2

PHP Version : 8.3.17

Buat File | Buat Folder

Dir : ~/var/www/htmlOld/theme/dev/components/post/

View File Name : _post-shadow.scss

// Base
.post-shadow {
	max-width: 370px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 10px 20px rgba( $gray-900, 0.15 );

	.post-media {
		width: 100%;
		background-color: $gray-900;

		> img {
			width: 100%;
			transition: $transition-base;
		}
	}

	.post-hover-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		width: px-to-rem( 84px );
		height: px-to-rem( 84px );
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: $font-size-sm;
		text-transform: uppercase;
		color: $white;
		background-color: $primary;
		transform: translate( -50%, -50% );
		border-radius: 50%;
		transition: $transition-base;

		&::before {
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc( 100% + 14px );
			height: calc( 100% + 14px );
			content: '';
			border-radius: inherit;
			border: 1px solid $primary;
			transform: translate( -50%, -50% );
		}
	}

	.post-content {
		padding: px-to-rem( 20px, 15px );
	}

	.post-tag {
		display: inline-block;
		padding: px-to-rem( 2px, 10px, 0 );
		color: $primary;
		background-color: rgba( $primary, .2 );
		transition: $transition-base;
		min-width: 120px;
		text-align: center;

		&:hover {
			color: $white;
			background-color: $primary;
		}
	}

	.post-title {
		padding-bottom: 28px;

		&::after {
			width: 51px;
			height: 1px;
			background-color: $border-color;
		}
	}

	.post-date {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: .04em;
	}

	* + .post-title { margin-top: px-to-rem( 8px ) }
	* + .post-date { margin-top: px-to-rem( 15px ) }
}


// Owl carousel context
.owl-carousel-shadow {
	.owl-stage-outer {
		margin: 0 -30px;
		padding: 0 30px 30px;
	}

	.owl-item:not(.active) {
		.post-shadow {
			box-shadow: none;
		}
	}
}


// Desktop content
.desktop {
	.post-shadow {
		.post-hover-btn {
			opacity: 0;
		}

		.post-media:hover {
			> img {
				opacity: .8;
			}

			.post-hover-btn {
				opacity: 1;
			}
		}
	}
}


// Media
@include media-breakpoint-up( lg ) {
	.post-shadow {
		box-shadow: $box-shadow-md;

		.post-content {
			padding: px-to-rem( 35px, 40px, 35px, 30px );
		}

		* + .post-title { margin-top: px-to-rem( 14px ) }
		* + .post-date { margin-top: px-to-rem( 20px ) }
	}

	.owl-carousel-shadow {
		.owl-stage-outer {
			padding-bottom: 50px;
		}
	}
}