TP_JO2024/home/dist/component/connect/connect.main.css

123 lines
7.2 KiB
CSS
Raw Normal View History

2024-03-27 17:19:37 +01:00
/*!
* DSFR v1.11.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
*/
@charset "UTF-8";
/* ¯¯¯¯¯¯¯¯¯ *\
CONNECT
\* ˍˍˍˍˍˍˍˍˍ */
.fr-connect {
position: relative;
padding: 0.625em 0.75em 0.625em 4em;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-bottom: 0.75rem;
--underline-img: none;
--hover-tint: var(--hover);
--active-tint: var(--active);
--external-link-content: none;
background-color: var(--background-action-high-blue-france);
--idle: transparent;
--hover: var(--background-action-high-blue-france-hover);
--active: var(--background-action-high-blue-france-active);
color: var(--text-inverted-blue-france);
}
.fr-connect:hover {
background-color: var(--hover-tint);
}
.fr-connect:active {
background-color: var(--active-tint);
}
.fr-connect::before {
content: "";
display: block;
position: absolute;
top: 50%;
bottom: 0.25em;
left: 0.75em;
width: 2.5em;
height: 3em;
margin-top: -1.5em;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath fill='%232a2f82' d='M34.965 15.1 19.971 6.423 4.977 15.184a.606.606 0 0 0-.306.524v16.948a.666.666 0 0 0 .306.524l14.992 8.6 14.994-8.706a.665.665 0 0 0 .306-.524V15.628a.605.605 0 0 0-.304-.528Z'/%3E%3Cpath fill='%23df1f26' d='m14.614 15.6-5.029 8.628-4.557-9.175 5.39-3.113 4.489 3.16ZM35.27 32.58V15.622a.6.6 0 0 0-.306-.523L19.971 6.423'/%3E%3Cpath fill='%232e65b0' d='m4.673 32.58 15.3-26.157v35.362L4.977 33.18a.666.666 0 0 1-.306-.524V15.708Zm24.669-20.735L34.8 15l-4.489 9.15-5.387-9.236Z'/%3E%3Cpath fill='%23fff' d='m39.606 12.305-19.19-11.02a.933.933 0 0 0-.832 0L.394 12.305A.886.886 0 0 0 0 13v22a.886.886 0 0 0 .394.7l19.189 11.02a.933.933 0 0 0 .832 0L39.606 35.7A.886.886 0 0 0 40 35V13a.886.886 0 0 0-.394-.695ZM10.762 30.061h.079c-.042 0-.079.007-.079.05 0 .1.151 0 .2.1a.912.912 0 0 0-.629.276c0 .051.1.051.151.051-.075.1-.226.05-.277.151a.177.177 0 0 0 .1.05c-.05 0-.1 0-.1.051v.151c-.126 0-.176.1-.277.151.2.151.327 0 .528 0-.528.2-.956.478-1.484.629-.1 0 0 .151-.1.151.151.1.227-.05.377-.05-.654.377-1.333.7-2.037 1.132a.351.351 0 0 0-.1.2h-.2c-.1.05-.05.176-.151.277.226.151.5-.2.654 0 .05 0-.1.05-.2.05-.05 0-.05.1-.1.1h-.154c-.1.075-.2.126-.2.276a.219.219 0 0 0-.226.1 9.034 9.034 0 0 0 3.144-.578 7.685 7.685 0 0 0 2.088-1.559.176.176 0 0 1 .05.1 2.168 2.168 0 0 1-.806 1.08c-.277.151-.478.377-.7.478a4.045 4.045 0 0 0-.428.276 10.761 10.761 0 0 1-1.939.412l-.305.044c-.225.033-.449.069-.671.108L4.977 33.18a.648.648 0 0 1-.288-.411.574.574 0 0 0 .094-.063.265.265 0 0 0-.113-.071v-.65a12.786 12.786 0 0 0 3.038-.942A8.746 8.746 0 0 0 4.671 29.7v-1.515a11.662 11.662 0 0 1 1.639.392 6.415 6.415 0 0 1 1.182.578 3.113 3.113 0 0 0 .478.377.91.91 0 0 0 .8.05h.33a3.961 3.961 0 0 0 1.937-.905c0 .05.05.05.1.05a3.63 3.63 0 0 1-.428 1.132c.003.051-.048.152.053.202Zm2.817 3.571c.251-.1.4-.277.629-.377-.05.05-.05.151-.1.2a3.691 3.691 0 0 0-.528.4 15.96 15.96 0 0 0-1.585 1.61c-.252.3-.528.578-.8.855a2.385 2.385 0 0 1-.31.245l-2.527-1.45a4.047 4.047 0 0 0 1.076-.053 4.984 4.984 0 0 0 .855-.327v.1c.7-.277 1.232-.906 1.937-1.132.025 0 .126.1.226.05a1.883 1.883 0 0 1 1.509-.7c0 .05 0 .1.05.1h.025c-.151.126-.327.251-.5.377-.057.052-.007.102.043.102Zm-8.908-6.164v-.186a5.814 5.814 0 0 1 1.588-.188 1.52 1.52 0 0 1 .478 0 5.861 5.861 0 0 0-2.066.374Zm30.6 5.088a.665.665 0 0 1-.306.524l-10.079 5.851a32.3 32.3 0 0 1-3.408-1.185 2.826 2.826 0 0 1-.05-2.245 3.794 3.794 0 0 1 .352-.883c.025-.025.05-.05.05-.076a.025.025 0 0 0 .025-.025 4.316 4.316 0 0 1 .377-.555l.015-.015.02-.021.015-.015c0-.025.025-.05.05-.076.025-.051.075-.076.1-.126a3.771 3.771 0 0 1 .579-.5 4.07 4.07 0 0 1 .654-.177 19.817 19.817 0 0 1 2.415.328.751.751 0 0 1 .277.1 1.849 1.849 0 0 0 .905-.05 1.137 1.137 0 0 0 .855-.706 1.212 1.212 0 0 0 .05-1.059c-.178-.276-.013-.437.181-.59l.068-.055a1.17 1.17 0 0 0 .231-.216c.126-.252-.1-.4-.151-.63-.05-.1-.226-.05-.327-.2.352-.151.855-.429.629-.857-.151-.227-.377-.63-.1-.857.352-.2.855-.151 1.006-.479a1.138 1.138 0 0 0-.292-1.085l-.075-.108a4.754 4.754 0 0 1-.211-.32 6.914 6.914 0 0 0-.528-.757 4.3 4.3 0 0 1-.528-1.009c-.151-.378.05-.706.05-1.084a6.347 6.347 0 0 0-.327-2.144c-.126-.353-.176-.731-.327-1.059a1.12 1.12 0 0 0-.226-.58.375.375 0 0 1 0-.328 4.874 4.874 0 0 0 .579-.479.567.567 0 0 0-.2-.706c-.327-.151-.3.328-.528.429h-.151c-.05-.126.05-.177.151-.277 0-.05 0-.151-.05-.151-.2 0-.377-.051-.428-.151a3.957 3.957 0 0 0-1.861-1.286 2.319 2.319 0 0 0 .579.1 1.67 1.67 0 0 0 1.006-.1c.227-.076.277-.479.377-.706a.8.8 0 0 0-.151-.631 2.189 2.189 0 0 0-.906-.756 9.13 9.13 0 0 1-.679-.353.952.952 0 0 0-.251-.126c-2.965-1.485-9.069-.2-9.534 0h-.009a8.244 8.244 0 0 0-1.249.475 3.922 3.922 0 0 0-2.365 2.465 3.829 3.829 0 0 0-1.333 1.509c-.428.8-1.056 1.509-.956 2.414.1.78.277 1.484.428 2.289a4.668 4.668 0 0 0 .2.8c.1.276 0 .629.151.855.075.151.025.327.227.428v.2c.05.05.05.1.151.1v.2a6.446 6.446 0 0 1 1.107 1.434c.1.276-.478.151-.7.05a5.979 5.979 0 0 1-1.132-.956.175.175 0 0 0-.051.1c.2.352.906.78.528 1.006-.2.1-.428-.
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 2.5em 3em;
}
.fr-connect__login,
.fr-connect__brand {
line-height: 1;
z-index: 1;
white-space: nowrap;
}
.fr-connect__login {
font-size: 1.0625em;
}
.fr-connect__brand {
font-weight: bold;
font-size: 1.125em;
}
.fr-connect--plus {
padding-right: 3em;
}
.fr-connect--plus::after {
content: "+";
display: block;
position: absolute;
right: 0.25em;
bottom: 0;
font-size: 3em;
font-weight: bold;
line-height: 1;
transform: translate(5%, -17%);
}
.fr-connect-group {
--text-spacing: 0 0 1rem 0;
}
.fr-connect-group p {
font-size: 0.75rem;
line-height: 1.25rem;
color: var(--text-mention-grey);
}
.fr-connect-group .fr-connect + p a {
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--text-action-high-blue-france);
}
.fr-connect:disabled,
a.fr-connect:not([href]) {
background-color: var(--background-disabled-grey);
--idle: transparent;
--hover: var(--background-disabled-grey-hover);
--active: var(--background-disabled-grey-active);
color: var(--text-disabled-grey);
}
@media (min-width: 36em) {
/*! media sm */
}
@media (min-width: 48em) {
/*! media md */
}
@media (min-width: 62em) {
/*! media lg */
}
@media (min-width: 78em) {
/*! media xl */
}