: apasarea lui desface tabelul, fara JavaScript,
* ca la intrebarile frecvente. Sageata e iconita temei, intoarsa cand e
* deschis; triunghiul implicit al browserului se scoate din doua locuri, unul
* pentru Firefox si altul pentru Safari.
*
* Linia de sub cap ramane numai cand tabelul e deschis: inchis, ar fi o dunga
* lipita de marginea de jos a cardului.
*/
.registru__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
list-style: none;
cursor: pointer;
}
.registru__card-head::-webkit-details-marker {
display: none;
}
.registru__card[open] .registru__card-head {
border-block-end: 1px solid var(--color-border);
}
.registru__card-head:hover .registru__card-title {
color: var(--color-primary);
}
.registru__card-head .icon {
--icon-size: 1.75rem;
flex: 0 0 auto;
color: var(--color-primary);
stroke-width: 3;
transition: rotate var(--duration) var(--ease);
}
.registru__card[open] .registru__card-head .icon {
rotate: 180deg;
}
.registru__card-head:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.registru__card-title {
margin: 0;
color: var(--color-secondary);
font-size: var(--fs-xl);
font-weight: 700;
line-height: 1.2;
}
.registru__empty {
margin: 0;
padding: var(--space-10) var(--space-6);
color: var(--color-text-muted);
text-align: center;
}
.registru__scroll {
overflow-x: auto;
}
.registru__table {
width: 100%;
border-collapse: collapse;
text-align: start;
}
.registru__th {
padding: var(--space-4) var(--space-6);
border-block-end: 1px solid var(--color-border);
background-color: var(--color-surface-alt);
color: var(--color-text-subtle);
font-size: var(--fs-sm);
font-weight: 500;
text-align: start;
white-space: nowrap;
}
.registru__sort {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: inherit;
text-decoration: none;
}
.registru__sort:hover,
.registru__sort:focus-visible {
color: var(--color-primary);
}
/* Sageata dubla din design: doua triunghiuri, cel activ se inchide la culoare. */
.registru__sort-icon {
display: inline-flex;
flex-direction: column;
gap: 2px;
}
.registru__sort-icon::before,
.registru__sort-icon::after {
content: '';
display: block;
width: 0;
height: 0;
border-inline: 3px solid transparent;
}
.registru__sort-icon::before {
border-block-end: 4px solid currentcolor;
}
.registru__sort-icon::after {
border-block-start: 4px solid currentcolor;
}
.registru__th.is-sorted {
color: var(--color-secondary);
}
.registru__cell {
padding: var(--space-3) var(--space-6);
border-block-end: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--fs-sm);
vertical-align: middle;
}
.registru__row:last-child .registru__cell {
border-block-end: 0;
}
.registru__row:hover .registru__cell {
background-color: var(--color-surface-alt);
}
/*
* Numele si calitatea stau una sub alta, dar celula ramane celula de tabel:
* un `display: flex` pe | il scoate din modelul tabelului, iar coloanele
* celelalte se desprind de antet.
*/
.registru__name {
display: block;
color: var(--color-primary);
font-size: var(--fs-base);
font-weight: 700;
text-decoration: none;
}
/*
* Numele care chiar duce undeva — adică are pagină de profil — e roșu, în
* accentul site-ului. Așa se vede dintr-o privire, pe o listă de sute de
* rânduri, cine are fișă de prezentare și cine e doar în registru.
*/
a.registru__name {
color: var(--color-accent);
}
a.registru__name:hover,
a.registru__name:focus-visible {
color: color-mix(in srgb, var(--color-accent) 85%, black);
text-decoration: underline;
}
.registru__role {
display: none;
margin-block-start: 2px;
color: var(--color-text-subtle);
font-size: var(--fs-xs);
}
/* Numărul de ordine: îngust, cifre de aceeași lățime, ca să stea una sub alta. */
.registru__th--nr,
.registru__cell--nr {
width: 1%;
color: var(--color-text-subtle);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.registru__cell--year,
.registru__cell--date {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ---------- Pastila de specialitate ---------- */
.registru__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.25rem 0.7rem;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.6;
white-space: nowrap;
}
.registru__dot {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background-color: currentcolor;
}
.registru__badge--green {
background-color: #e8f6ec;
color: #15803d;
}
.registru__badge--blue {
background-color: #e6f4fe;
color: #0b6fb5;
}
.registru__badge--navy {
background-color: #e9edf5;
color: #2e4068;
}
.registru__badge--violet {
background-color: #f0ebfa;
color: #5b3ba8;
}
.registru__badge--teal {
background-color: #e4f5f3;
color: #0b7c72;
}
.registru__badge--amber {
background-color: #fdf3e3;
color: #96450a;
}
/* ---------- Subsolul cardului ---------- */
.registru__foot {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.registru__pagination {
grid-column: 2;
}
.registru__pagination ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.registru__pagination li {
margin: 0;
margin-block-start: var(--space-2);
}
.registru__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding-inline: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 50%;
color: var(--color-text-muted);
font-size: var(--fs-sm);
text-decoration: none;
transition: border-color 0.15s ease, color 0.15s ease;
}
.registru__pagination a.page-numbers:hover,
.registru__pagination a.page-numbers:focus-visible {
border-color: var(--color-primary);
color: var(--color-primary);
}
.registru__pagination .page-numbers.current {
border-color: var(--color-primary);
background-color: var(--color-primary);
color: #fff;
font-weight: 700;
}
.registru__pagination .page-numbers.dots {
border-color: transparent;
}
.registru__perpage {
display: flex;
grid-column: 3;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--fs-sm);
}
/* Selectul temei este `width: 100%`; aici trebuie sa fie cat numarul din el. */
.registru__perpage select {
width: auto;
min-width: 4.25rem;
padding: 0.2rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background-color: var(--color-surface);
color: var(--color-text);
font: inherit;
}
.registru__perpage-total {
white-space: nowrap;
}
/* ---------- Rubrica „VISARTA vă poate reprezenta” ---------- */
.section--reprezentare {
padding-block: var(--space-8) var(--space-16);
margin-bottom: 100px;
}
/* Coloanele din design: ilustratia ceva mai lata decat textul. */
.reprezentare {
--grid-gap: var(--space-16);
grid-template-columns: 1.1fr 1fr;
}
.reprezentare__media {
margin: 0;
}
.reprezentare__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
.reprezentare__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
}
.reprezentare__title {
margin: 0;
color: var(--color-secondary);
font-size: var(--fs-4xl);
font-weight: var(--fw-extrabold);
line-height: 1.1;
}
.reprezentare__text {
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.65;
}
.reprezentare__text p {
margin-block: 0 var(--space-4);
}
.reprezentare__text p:last-child {
margin-block-end: 0;
}
.reprezentare__list {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.reprezentare__item {
display: flex;
gap: var(--space-3);
align-items: flex-start;
margin: 0;
}
/* Bifa sta pe linia de baza a primului rand, nu centrata pe tot randul. */
.reprezentare__check {
display: inline-flex;
flex: none;
margin-block-start: 0.2em;
color: var(--color-primary);
}
.reprezentare__check svg {
width: 1.25rem;
height: 1.25rem;
}
.reprezentare__item-text {
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: 1.5;
}
.reprezentare__item-text strong {
color: var(--color-secondary);
font-weight: var(--fw-bold);
}
.reprezentare__actions {
margin: var(--space-3) 0 0;
}
/* Fara ilustratie, textul nu mai sta intr-o jumatate de pagina. */
.reprezentare--no-image {
grid-template-columns: minmax(0, 1fr);
}
/* ---------- Coloana „Membri”: Da / Nu ---------- */
.registru__cell--membru {
white-space: nowrap;
}
/* „Da” iese în evidență în albastrul site-ului; „Nu” rămâne text obișnuit,
ca ochiul să prindă dintr-o privire cine e membru. */
.registru__flag--yes {
color: var(--color-primary);
font-weight: var(--fw-bold);
}
.registru__flag--no {
color: var(--color-text);
font-weight: var(--fw-regular);
}
/* ---------- Comutatorul „Toți autorii / Doar membri” ---------- */
/*
* Două butoane-radio lipite, în felul grupurilor vechi de Bootstrap: cel activ
* pare apăsat, cu fundal plin și o umbră interioară. Radio-urile rămân radio-uri
* — doar ascunse vizual — deci tastatura și cititoarele de ecran le găsesc.
*/
/*
* Comutatorul e o pastila cu chenar, iar chenarul tine culoarea listei
* deschise: rosu pe „Lista autorilor”, albastru pe „Lista membrilor”. Culoarea
* inconjoara amandoua butoanele, nu doar pe cel apasat, ca sa se citeasca drept
* un singur comutator si sa se vada de departe pe ce lista esti.
*
* Chenarul sta pe |