Шаблон:JobGuides/styles.css: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) Нет описания правки |
||
(не показаны 2 промежуточные версии этого же участника) | |||
Строка 8: | Строка 8: | ||
padding: 0.25rem; | padding: 0.25rem; | ||
margin: 0 0 0.75rem 0.75rem; | margin: 0 0 0.75rem 0.75rem; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
border: var(-- | border: 1px solid var(--tmp-25); | ||
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); | ||
} | } | ||
Строка 20: | Строка 19: | ||
font-size: 1.075rem; | font-size: 1.075rem; | ||
padding: 0.33rem 0.5rem; | padding: 0.33rem 0.5rem; | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
color: var(--color-white); | color: var(--color-white); | ||
border-radius: var(--border-radius-small); | border-radius: var(--border-radius-small); | ||
Строка 29: | Строка 28: | ||
display: inline-flex; | display: inline-flex; | ||
margin: 0.25rem 0; | margin: 0.25rem 0; | ||
border: var(-- | border: 1px solid var(--tmp-50); | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
} | } | ||
Строка 53: | Строка 51: | ||
flex-direction: column; | flex-direction: column; | ||
line-height: 1em; | line-height: 1em; | ||
border: var(-- | border: 1px solid var(--tmp-25); | ||
border-radius: var(--border-radius-medium); | border-radius: var(--border-radius-medium); | ||
transition-property: border; | transition-property: border; | ||
Строка 81: | Строка 78: | ||
font-weight: 500; | font-weight: 500; | ||
padding: 0.2em 0.5em; | padding: 0.2em 0.5em; | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
color: var(--color-white); | color: var(--color-white); | ||
border-bottom: 2px solid var(-- | border-bottom: 2px solid var(--tmp-75); | ||
} | } | ||
Строка 96: | Строка 93: | ||
gap: 0.25em; | gap: 0.25em; | ||
padding: 0.25em; | padding: 0.25em; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
} | } | ||
Строка 102: | Строка 99: | ||
flex-grow: 1; | flex-grow: 1; | ||
padding: 0 0.25em; | padding: 0 0.25em; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
color: var(--color-text-semi-translucent); | color: var(--color-text-semi-translucent); | ||
border: 1px solid var(-- | border: 1px solid var(--tmp-25); | ||
border-radius: var(--border-radius-small); | border-radius: var(--border-radius-small); | ||
transition-duration: var(--transition-time); | transition-duration: var(--transition-time); | ||
Строка 111: | Строка 108: | ||
.jobguides-main-info-content a:hover { | .jobguides-main-info-content a:hover { | ||
background-color: var(-- | background-color: var(--tmp-50); | ||
} | } | ||
.jobguides-main-info-content a:active, | .jobguides-main-info-content a:active, | ||
.jobguides-main-info-content a.selflink { | .jobguides-main-info-content a.selflink { | ||
background-color: var(-- | background-color: var(--tmp-75); | ||
} | } | ||
Строка 157: | Строка 154: | ||
height: max-content; | height: max-content; | ||
margin-bottom: -0.25rem; | margin-bottom: -0.25rem; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
border-radius: var(--border-radius-small); | border-radius: var(--border-radius-small); | ||
transition-property: height, margin, opacity; | transition-property: height, margin, opacity; | ||
Строка 173: | Строка 170: | ||
.jobguides-more:hover { | .jobguides-more:hover { | ||
background-color: var(-- | background-color: var(--tmp-50); | ||
color: var(--color-white); | color: var(--color-white); | ||
transition-delay: 0s; | transition-delay: 0s; |
Текущая версия от 10:03, 2 июня 2025
.jobguides {
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
gap: 0.25rem;
width: 13.5rem;
padding: 0.25rem;
margin: 0 0 0.75rem 0.75rem;
background-color: var(--tmp-10);
border: 1px solid var(--tmp-25);
border-radius: var(--border-radius-medium);
box-shadow: 0 0 0.5rem -0.1rem var(--tmp-50);
}
.jobguides-main-title {
line-height: 1em;
font-weight: bold;
font-size: 1.075rem;
padding: 0.33rem 0.5rem;
background-color: var(--tmp-75);
color: var(--color-white);
border-radius: var(--border-radius-small);
}
.jobguides-main-image {
overflow: hidden;
display: inline-flex;
margin: 0.25rem 0;
border: 1px solid var(--tmp-50);
border-radius: var(--border-radius-medium);
}
.jobguides-main-image a,
.jobguides-main-image img,
.jobguides-main-image span {
width: 100%;
}
.jobguides-main-image img {
height: auto;
aspect-ratio: 3 / 1;
}
.jobguides-more,
.jobguides-main-head,
.jobguides-main-channel,
.jobguides-additional-info {
overflow: hidden;
display: flex;
flex-direction: column;
line-height: 1em;
border: 1px solid var(--tmp-25);
border-radius: var(--border-radius-medium);
transition-property: border;
}
.jobguides-main-head {
flex: 1;
}
.jobguides-main-channel .jobguides-main-info-content {
line-height: 1px;
font-size: 1.3rem;
}
.jobguides-additional-info {
border-width: 0px;
}
.jobguides-main-info {
display: flex;
gap: 0.25rem;
}
.jobguides-main-info-header {
user-select: none;
font-weight: 500;
padding: 0.2em 0.5em;
background-color: var(--tmp-75);
color: var(--color-white);
border-bottom: 2px solid var(--tmp-75);
}
.jobguides-main-info-content {
display: flex;
flex-wrap: wrap;
flex-grow: 1;
align-items: center;
justify-content: center;
text-align: center;
font-size: 0.95em;
gap: 0.25em;
padding: 0.25em;
background-color: var(--tmp-10);
}
.jobguides-main-info-content a {
flex-grow: 1;
padding: 0 0.25em;
background-color: var(--tmp-10);
color: var(--color-text-semi-translucent);
border: 1px solid var(--tmp-25);
border-radius: var(--border-radius-small);
transition-duration: var(--transition-time);
transition-property: background-color;
}
.jobguides-main-info-content a:hover {
background-color: var(--tmp-50);
}
.jobguides-main-info-content a:active,
.jobguides-main-info-content a.selflink {
background-color: var(--tmp-75);
}
.jobguides-main-info-content a:hover,
.jobguides-main-info-content a:active,
.jobguides-main-info-content a.selflink {
color: var(--color-white);
}
.jobguides-main-info-content a.selflink {
pointer-events: none;
}
.jobguides-more,
.jobguides-additional,
.jobguides-additional-info {
transition-delay: var(--transition-delay);
transition-duration: var(--transition-time);
}
.jobguides-additional {
display: flex;
flex-direction: column;
gap: 0.25rem;
height: 0;
border-color: transparent;
transition-property: height;
}
.jobguides-additional .jobguides-main-info-header {
font-weight: 400;
padding: 0.2em 0.33em;
}
.jobguides-more {
cursor: pointer;
user-select: none;
position: relative;
line-height: 1.33rem;
height: max-content;
margin-bottom: -0.25rem;
background-color: var(--tmp-10);
border-radius: var(--border-radius-small);
transition-property: height, margin, opacity;
}
.jobguides-more:before {
content: '\f078';
font: var(--fa-font-solid);
position: absolute;
top: 0;
left: 1.5em;
bottom: 0;
align-content: center;
}
.jobguides-more:hover {
background-color: var(--tmp-50);
color: var(--color-white);
transition-delay: 0s;
}
.jobguides-more:focus {
height: 0;
margin: 0.25em 0;
opacity: 0.66;
}
.jobguides-more:focus ~ .jobguides-additional {
height: max-content;
}
.jobguides-more:focus ~ .jobguides-additional .jobguides-additional-info {
border-width: 1px;
}
.jobguides-more:focus,
.jobguides-more:focus ~ .jobguides-additional,
.jobguides-more:focus ~ .jobguides-additional .jobguides-additional-info {
transition-delay: 0s;
}