Шаблон:JobPageHeader/styles.css: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) мНет описания правки |
||
Строка 6: | Строка 6: | ||
padding: 0.25rem; | padding: 0.25rem; | ||
margin: 0.5rem 0; | margin: 0.5rem 0; | ||
line-height: 1.3em; | |||
background-color: var(--jobheader-transparent); | background-color: var(--jobheader-transparent); | ||
border: var(--border-classic); | border: var(--border-classic); | ||
Строка 11: | Строка 12: | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
box-shadow: 0 0 0.5rem -0.1rem var(--jobheader-secondary); | box-shadow: 0 0 0.5rem -0.1rem var(--jobheader-secondary); | ||
} | |||
.jobpageheader, | |||
.jobpageheader-info | |||
.jobpageheader-more, | |||
.jobpageheader-preview { | |||
background-color: var(--jobheader-transparent); | |||
border: var(--border-classic); | |||
border-color: var(--jobheader-secondary); | |||
} | |||
.jobpageheader-more, | |||
.jobpageheader-info, | |||
.jobpageheader-title, | |||
.jobpageheader-preview { | |||
border-radius: var(--border-radius-small); | |||
} | } | ||
Строка 19: | Строка 36: | ||
font-weight: bold; | font-weight: bold; | ||
height: 1.75rem; | height: 1.75rem; | ||
padding: 0 0.5rem; | padding: 0 0.5rem; | ||
background-color: var(--jobheader-primary); | background-color: var(--jobheader-primary); | ||
color: var(--color-white); | color: var(--color-white); | ||
} | } | ||
Строка 29: | Строка 44: | ||
display: flex; | display: flex; | ||
gap: 0.25rem; | gap: 0.25rem; | ||
} | } | ||
Строка 38: | Строка 52: | ||
flex-direction: column; | flex-direction: column; | ||
width: 7.5rem; | width: 7.5rem; | ||
line-height: 1.1em; | |||
background-color: transparent; | |||
} | } | ||
Строка 67: | Строка 80: | ||
max-height: 6.5em; /* ~5lh */ | max-height: 6.5em; /* ~5lh */ | ||
padding: 0.2rem 0.5rem; | padding: 0.2rem 0.5rem; | ||
transition-duration: var(--transition-time); | transition-duration: var(--transition-time); | ||
transition-property: height; | transition-property: height; | ||
Строка 96: | Строка 105: | ||
height: 1.75em; | height: 1.75em; | ||
margin-bottom: -0.25rem; | margin-bottom: -0.25rem; | ||
transition-property: margin, height, opacity; | transition-property: margin, height, opacity; | ||
} | } |
Версия от 10:44, 8 мая 2025
.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 {
background-color: var(--jobheader-transparent);
border: var(--border-classic);
border-color: var(--jobheader-secondary);
}
.jobpageheader-more,
.jobpageheader-info,
.jobpageheader-title,
.jobpageheader-preview {
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.1rem 0.25rem 0;
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 0.5rem;
background-color: var(--jobheader-transparent);
}
.jobpageheader-info {
flex: 1;
overflow: hidden;
align-content: center;
line-clamp: 5;
min-height: 6.5em;
max-height: 6.5em; /* ~5lh */
padding: 0.2rem 0.5rem;
transition-duration: var(--transition-time);
transition-property: height;
}
.jobpageheader-info:hover {
max-height: none;
line-clamp: none;
}
.jobpageheader-more,
.jobpageheader-tabs {
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: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;
}