copy link modal
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s

This commit is contained in:
Julie Blanc 2026-01-21 17:25:37 +01:00
parent 2f7473be0a
commit 43ad7241d4
10 changed files with 111 additions and 147 deletions

View file

@ -883,15 +883,8 @@ button.sort[data-sort-type=up] .arrow {
}
}
.modal--share {
border: var(--border);
border-radius: var(--radius-btn);
background-color: var(--color-bg);
padding: var(--padding-inner);
padding-top: calc(var(--padding-inner) * 0.5);
padding-bottom: calc(var(--padding-inner) * 1.5);
}
.modal--share .modal-title {
display: none;
width: 240px;
padding-bottom: var(--padding-inner);
}
.modal--share .socials {
display: block;
@ -899,14 +892,15 @@ button.sort[data-sort-type=up] .arrow {
}
.modal--share .socials li {
font-size: var(--fs-normal);
padding-bottom: 6px;
border-bottom: var(--border-light);
padding-top: 6px;
}
.modal--share .socials li:first-of-type {
border-top: var(--border-light);
}
.modal--share .socials li a {
display: flex;
align-items: center;
gap: 1ch;
gap: 2ch;
text-decoration: none;
}
.modal--share .socials li .icon {
@ -921,18 +915,12 @@ button.sort[data-sort-type=up] .arrow {
position: relative;
top: 2px;
}
.modal--share .socials li:hover {
color: var(--color-accent);
}
.modal--share .socials li:hover .icon svg,
.modal--share .socials li:hover .icon svg path,
.modal--share .socials li:hover .icon svg rect {
fill: var(--color-accent) !important;
}
.modal--share .copy-link {
display: flex;
gap: 0.5ch;
margin-top: calc(var(--spacing) * 0.75);
padding: 0 var(--padding-inner);
height: var(--h-block);
width: 100%;
}
.modal--share .copy-link .copy-link__field {
flex-grow: 1;
@ -971,6 +959,9 @@ button.sort[data-sort-type=up] .arrow {
border-color: var(--color-txt);
outline: none;
}
.modal--share .copy-link input.is-copied {
color: var(--color-accent) !important;
}
.modal--share .copy-link .copy-link__btn {
background-color: var(--color-txt);
color: var(--color-bg);
@ -979,6 +970,12 @@ button.sort[data-sort-type=up] .arrow {
font-size: var(--fs-small);
padding-top: 2px;
white-space: nowrap;
min-width: 0px !important;
max-width: 30ch !important;
width: 7.25ch;
}
.modal--share .copy-link .copy-link__btn::after {
content: " ";
}
.modal--share .copy-link .copy-link__btn:hover {
background-color: var(--color-accent);
@ -1839,11 +1836,6 @@ body main {
[data-template=investigation-summary] main #hero figcaption {
margin: 0 var(--padding-body);
}
[data-template=investigation-summary] main .modal--share {
position: absolute;
width: calc(100% - var(--padding-body) * 2);
bottom: calc(var(--spacing) * 2);
}
[data-template=investigation-summary] main #banner--page {
padding: calc(var(--spacing) * 0.5) 0;
position: fixed;
@ -1940,11 +1932,6 @@ body main {
[data-template=investigation-summary] main #section__synthese {
font-size: var(--fs-medium);
}
.modal--share {
position: absolute;
bottom: calc(var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25);
width: calc(100% - var(--padding-body));
}
}
@media screen and (min-width: 1080px) {
[data-template=investigation-summary] main #banner--page {
@ -2058,22 +2045,6 @@ body main {
#rapport .rapport__header .btn--group button a, #rapport .rapport__header .btn--group label a {
justify-content: flex-start;
}
#rapport .rapport__header .modal--share {
max-width: 240px;
position: absolute;
height: 250px;
top: calc(var(--h-block) * 1.5);
left: 260px;
}
#rapport .rapport__header .modal--share::before {
content: "◀";
transform: rotate(90deg);
font-size: 10px;
position: absolute;
top: -10px;
right: calc(var(--h-block) * 1.5);
}
#rapport .rapport__content {
max-width: var(--max-w-content);
}
@ -2176,18 +2147,6 @@ body main {
padding-left: 1ch;
padding-right: 1ch;
}
#rapport__aside .modal--share {
position: absolute;
bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner));
}
#rapport__aside .modal--share::before {
content: "◀";
font-size: 10px;
position: absolute;
bottom: calc(var(--h-block) * 0.25);
left: -9px;
}
#tab-print, #tab-toc {
display: none;