Шаблон:JobPageHeader/styles.css: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) мНет описания правки |
||
(не показано 14 промежуточных версий этого же участника) | |||
Строка 7: | Строка 7: | ||
margin: 0.5rem 0; | margin: 0.5rem 0; | ||
line-height: 1.3em; | line-height: 1.3em; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
box-shadow: 0 0 0.5rem -0.1rem var(-- | box-shadow: 0 0 0.5rem -0.1rem var(--tmp-50); | ||
} | } | ||
Строка 17: | Строка 17: | ||
.jobpageheader-preview, | .jobpageheader-preview, | ||
.jobpageheader-info:after { | .jobpageheader-info:after { | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
border: 1px solid var(-- | border: 1px solid; | ||
border-color: var(--tmp-25); | |||
} | } | ||
Строка 36: | Строка 37: | ||
height: 1.75rem; | height: 1.75rem; | ||
padding: 0 0.5rem; | padding: 0 0.5rem; | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
color: var(--color-white); | color: var(--color-white); | ||
} | } | ||
Строка 58: | Строка 59: | ||
user-select: none; | user-select: none; | ||
font-weight: 500; | font-weight: 500; | ||
padding: 0. | line-height: 1em; | ||
background-color: var(-- | padding: 0.25em; | ||
background-color: var(--tmp-75); | |||
color: var(--color-white); | color: var(--color-white); | ||
border-bottom: 2px solid var(-- | border-bottom: 2px solid; | ||
border-color: var(--tmp-75); | |||
} | } | ||
Строка 68: | Строка 71: | ||
align-content: center; | align-content: center; | ||
padding: 0.25rem 0.5rem; | padding: 0.25rem 0.5rem; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
} | } | ||
Строка 81: | Строка 84: | ||
.jobpageheader-info hr { | .jobpageheader-info hr { | ||
background-color: var(-- | background-color: var(--tmp-50); | ||
mask-image: radial-gradient(black 72.5%, transparent 77.5%); | mask-image: radial-gradient(black 72.5%, transparent 77.5%); | ||
} | } | ||
Строка 103: | Строка 106: | ||
padding: 0.1rem 0.33rem; | padding: 0.1rem 0.33rem; | ||
color: var(--color-text-translucent); | color: var(--color-text-translucent); | ||
box-shadow: 0 0 0.1rem 0.1rem var(-- | box-shadow: 0 0 0.1rem 0.1rem var(--tmp-10); | ||
backdrop-filter: var(--blur-default); | backdrop-filter: var(--blur-default); | ||
} | } | ||
Строка 161: | Строка 164: | ||
.jobpageheader-more:hover { | .jobpageheader-more:hover { | ||
background-color: var(-- | background-color: var(--tmp-50); | ||
color: var(--color-white); | color: var(--color-white); | ||
transition-delay: 0s; | transition-delay: 0s; | ||
Строка 184: | Строка 187: | ||
/* Rainbow */ | /* Rainbow */ | ||
.jobpageheader.rgb { | |||
gap: 1px; | |||
padding: 1px; | |||
border: 1px solid transparent; | |||
} | |||
.jobpageheader.rgb .jobpageheader-content { | |||
gap: 1px; | |||
} | |||
.jobpageheader.rgb .rainbow { | .jobpageheader.rgb .rainbow { | ||
filter: blur(1px); | filter: blur(1px); | ||
} | } | ||
.jobpageheader.rgb .jobpageheader-title, | .jobpageheader.rgb .jobpageheader-title, | ||
.jobpageheader.rgb .jobpageheader-preview- | .jobpageheader.rgb .jobpageheader-info, | ||
background-color: hsl(from var(--color-primal-immutable) h s l / 0. | .jobpageheader.rgb .jobpageheader-preview, | ||
.jobpageheader.rgb .jobpageheader-more { | |||
background-color: hsl(from var(--color-primal-immutable) h s l / 0.85); | |||
} | } | ||
.jobpageheader.rgb . | .jobpageheader.rgb .department-tabs { | ||
padding: 0.33em; | |||
background-color: hsl(from var(--color-primal-immutable) h s l / 0.85); | |||
border-radius: var(--border-radius-small); | |||
} | } | ||
Строка 206: | Строка 218: | ||
.jobpageheader.rgb .jobpageheader-more, | .jobpageheader.rgb .jobpageheader-more, | ||
.jobpageheader.rgb .jobpageheader-preview, | .jobpageheader.rgb .jobpageheader-preview, | ||
.jobpageheader.rgb .jobpageheader-preview-title, | |||
.jobpageheader.rgb .jobpageheader-info:after { | .jobpageheader.rgb .jobpageheader-info:after { | ||
border-color: var(--color-border); | border-color: var(--color-border); | ||
} | |||
.jobpageheader.rgb .jobpageheader-title, | |||
.jobpageheader.rgb .jobpageheader-preview-title{ | |||
color: var(--color-text); | |||
} | |||
.jobpageheader.rgb .jobpageheader-more { | |||
margin-bottom: -1px; | |||
color: var(--color-text-darker); | |||
transition-property: height, margin, border; | |||
} | |||
.jobpageheader.rgb .jobpageheader-more:focus { | |||
margin: 0 0 -1px; | |||
border: none; | |||
} | |||
.jobpageheader.rgb .jobpageheader-more:hover { | |||
background-color: var(--color-primal-immutable); | |||
color: var(--color-text); | |||
} | } |
Текущая версия от 10:16, 2 июня 2025
.jobpageheader {
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.25rem;
margin: 0.5rem 0;
line-height: 1.3em;
background-color: var(--tmp-10);
border-radius: var(--border-radius-medium);
box-shadow: 0 0 0.5rem -0.1rem var(--tmp-50);
}
.jobpageheader,
.jobpageheader-info,
.jobpageheader-more,
.jobpageheader-preview,
.jobpageheader-info:after {
background-color: var(--tmp-10);
border: 1px solid;
border-color: var(--tmp-25);
}
.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(--tmp-75);
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;
line-height: 1em;
padding: 0.25em;
background-color: var(--tmp-75);
color: var(--color-white);
border-bottom: 2px solid;
border-color: var(--tmp-75);
}
.jobpageheader-preview-image {
flex-grow: 1;
align-content: center;
padding: 0.25rem 0.5rem;
background-color: var(--tmp-10);
}
.jobpageheader-info {
flex: 1;
hyphens: auto;
overflow: hidden;
position: relative;
align-content: center;
padding: 0.25rem 0.5rem;
}
.jobpageheader-info hr {
background-color: var(--tmp-50);
mask-image: radial-gradient(black 72.5%, transparent 77.5%);
}
.jobpageheader-info tr td {
padding-left: 0.25rem;
}
.jobpageheader-info tr td:first-child {
padding: 0;
hyphens: none;
vertical-align: top;
}
@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(--tmp-10);
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(--tmp-50);
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;
}
/* Rainbow */
.jobpageheader.rgb {
gap: 1px;
padding: 1px;
border: 1px solid transparent;
}
.jobpageheader.rgb .jobpageheader-content {
gap: 1px;
}
.jobpageheader.rgb .rainbow {
filter: blur(1px);
}
.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-info,
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-more {
background-color: hsl(from var(--color-primal-immutable) h s l / 0.85);
}
.jobpageheader.rgb .department-tabs {
padding: 0.33em;
background-color: hsl(from var(--color-primal-immutable) h s l / 0.85);
border-radius: var(--border-radius-small);
}
.jobpageheader.rgb,
.jobpageheader.rgb .jobpageheader-info,
.jobpageheader.rgb .jobpageheader-more,
.jobpageheader.rgb .jobpageheader-preview,
.jobpageheader.rgb .jobpageheader-preview-title,
.jobpageheader.rgb .jobpageheader-info:after {
border-color: var(--color-border);
}
.jobpageheader.rgb .jobpageheader-title,
.jobpageheader.rgb .jobpageheader-preview-title{
color: var(--color-text);
}
.jobpageheader.rgb .jobpageheader-more {
margin-bottom: -1px;
color: var(--color-text-darker);
transition-property: height, margin, border;
}
.jobpageheader.rgb .jobpageheader-more:focus {
margin: 0 0 -1px;
border: none;
}
.jobpageheader.rgb .jobpageheader-more:hover {
background-color: var(--color-primal-immutable);
color: var(--color-text);
}