Просмотр кода страницы Шаблон:JobPageHeader/styles.css

.jobpageheader {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 0.5rem 0;
	line-height: 1.3em;
	background-color: var(--jobheader-transparent);
	border: var(--border-classic);
	border-color: var(--jobheader-secondary);
	border-radius: var(--border-radius-medium);
	box-shadow: 0 0 0.5rem -0.1rem var(--jobheader-secondary);
}

.jobpageheader,
.jobpageheader-info,
.jobpageheader-more,
.jobpageheader-preview,
.jobpageheader-info:after {
	background-color: var(--jobheader-transparent);
	border: var(--border-classic);
	border-color: var(--jobheader-secondary);
}

.jobpageheader-more,
.jobpageheader-info, 
.jobpageheader-title,
.jobpageheader-preview,
.jobpageheader-info:after {
	border-radius: var(--border-radius-small);
}

.jobpageheader-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	height: 1.75rem;
	padding: 0 0.5rem;
	background-color: var(--jobheader-primary);
	color: var(--color-white);
}

.jobpageheader-content {
	display: flex;
	gap: 0.25rem;
}

.jobpageheader-preview {
	overflow: hidden;
	display: flex;
	text-align: center;
	flex-direction: column;
	width: 7.5rem;
	line-height: 1.1em;
	background-color: transparent;
}

.jobpageheader-preview-title {
    user-select: none;
    font-weight: 500;
    padding: 0.2rem 0.25rem 0.1em;
    background-color: var(--jobheader-primary);
    color: var(--color-white);
    border-bottom: 2px solid var(--jobheader-primary);
}

.jobpageheader-preview-image {
	flex-grow: 1;
	align-content: center;
	padding: 0.25rem 0.5rem;
	background-color: var(--jobheader-transparent);
}

.jobpageheader-info {
	flex: 1;
	hyphens: auto;
	overflow: hidden;
	position: relative;
	align-content: center;
	padding: 0.25rem 0.5rem;
}

.jobpageheader-info hr {
	background-color: var(--jobheader-secondary);
	mask-image: radial-gradient(black 72.5%, transparent 77.5%);
}

@media (max-width: 719px) {
	.jobpageheader-info:after {
		content: 'Развернуть';
		position: absolute;
		bottom: 0.25rem;
		right: 0.25rem;
		padding: 0.1rem 0.33rem;
		color: var(--color-text-translucent);
		box-shadow: 0 0 0.1rem 0.1rem var(--jobheader-transparent);
		backdrop-filter: var(--blur-default);
	}
	
	.jobpageheader-info-wrapper {
		overflow: hidden;
		height: 7.25em;
		min-height: 7.25em;
		mask-image: linear-gradient(black 50%, transparent 100%);
		transition-duration: var(--transition-time);
		transition-property: height;
	}
	
	.jobpageheader-info-wrapper:after {
		content: '';
		position: absolute;
		inset: 0;
		background-color: hsla(0, 0%, 0%, 0);
		transition-property: visibility;
		z-index: 2;
	}

	.jobpageheader-info:hover > .jobpageheader-info-wrapper {
		height: max-content;
		mask-image: linear-gradient(black 100%, transparent 100%);
	}
	
	.jobpageheader-info:hover:after,
	.jobpageheader-info:hover > .jobpageheader-info-wrapper:after {
		visibility: hidden;
	}
}

.jobpageheader-tabs,
.jobpageheader-more,
.jobpageheader-info-wrapper:after {
	transition-delay: var(--transition-delay);
	transition-duration: var(--transition-time);
}

.jobpageheader-more {
	cursor: pointer;
	user-select: none;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	height: 1.75em;
	margin-bottom: -0.25rem;
	transition-property: margin, height, opacity;
}

.jobpageheader-more i {
	margin-right: 0.25rem;
}

.jobpageheader-more:hover {
	background-color: var(--jobheader-secondary);
	color: var(--color-white);
	transition-delay: 0s;
}

.jobpageheader-more:focus {
	opacity: 0.66;
	height: 0;
	margin: 0 -0.25rem;
}

.jobpageheader-more:focus ~ .jobpageheader-tabs {
	height: max-content;
	transition-delay: 0s;
}

.jobpageheader-tabs {
	overflow: hidden;
	height: 0;
	transition-property: height;
}