Шаблон:JobGuides/styles.css: различия между версиями
Aylong (обсуждение | вклад) мНет описания правки |
Aylong (обсуждение | вклад) Нет описания правки |
||
(не показано 28 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
.jobguides { | .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 { | .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); | border-radius: var(--border-radius-small); | ||
} | } | ||
.jobguides-main-image { | .jobguides-main-image { | ||
overflow: hidden; | |||
display: inline-flex; | |||
margin: 0.25rem 0; | |||
border: 1px solid var(--tmp-50); | |||
border-radius: var(--border-radius-medium); | |||
} | } | ||
Строка 42: | Строка 39: | ||
.jobguides-main-image img { | .jobguides-main-image img { | ||
height: auto; | |||
aspect-ratio: 3 / 1; | |||
} | } | ||
Строка 53: | Строка 50: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
line-height: 1em; | |||
border: 1px solid var(--tmp-25); | |||
border-radius: var(--border-radius-medium); | |||
transition-property: border; | |||
} | } | ||
Строка 64: | Строка 61: | ||
.jobguides-main-channel .jobguides-main-info-content { | .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- | .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; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
flex-grow: 1; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
font-size: 0.95em; | font-size: 0.95em; | ||
gap: 0.25em; | |||
padding: 0.25em; | padding: 0.25em; | ||
background-color: var(--tmp-10); | |||
} | } | ||
.jobguides-main-info-content a { | |||
flex-grow: 1; | flex-grow: 1; | ||
padding: 0 | padding: 0 0.25em; | ||
background-color: var(-- | background-color: var(--tmp-10); | ||
color: var(--color- | color: var(--color-text-semi-translucent); | ||
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); | ||
Строка 86: | Строка 107: | ||
} | } | ||
.jobguides-main-info-content a:hover { | |||
background-color: var(-- | background-color: var(--tmp-50); | ||
} | } | ||
.jobguides- | .jobguides-main-info-content a:active, | ||
background-color: var(-- | .jobguides-main-info-content a.selflink { | ||
background-color: var(--tmp-75); | |||
} | } | ||
.jobguides-main-info | .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- | .jobguides-main-info-content a.selflink { | ||
pointer-events: none; | |||
} | } | ||
Строка 136: | Строка 147: | ||
} | } | ||
.jobguides: | .jobguides-more { | ||
cursor: pointer; | |||
user-select: none; | |||
position: relative; | |||
line-height: 1.33rem; | |||
height: max-content; | 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:hover | .jobguides-more:hover { | ||
background-color: var(--tmp-50); | |||
color: var(--color-white); | |||
transition-delay: 0s; | |||
} | } | ||
.jobguides-more:focus { | |||
height: 0; | height: 0; | ||
margin: 0; | margin: 0.25em 0; | ||
opacity: 0.66; | opacity: 0.66; | ||
} | } | ||
.jobguides-additional-info { | .jobguides-more:focus ~ .jobguides-additional { | ||
border-width: | height: max-content; | ||
} | |||
.jobguides-more:focus ~ .jobguides-additional .jobguides-additional-info { | |||
border-width: 1px; | |||
} | } | ||
.jobguides-more | .jobguides-more:focus, | ||
.jobguides-more:focus ~ .jobguides-additional, | |||
.jobguides-more:focus ~ .jobguides-additional .jobguides-additional-info { | |||
transition-delay: 0s; | |||
transition- | |||
} | } |
Текущая версия от 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;
}