@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap); .gc-calendar-wrapper { transform: scale(0.75); transform-origin: top left; width: 133.33%; /* Ajuste la largeur du conteneur pour compenser le redimensionnement */ height: auto; /* Ajuste la hauteur automatiquement */ } .gc-calendar { font-family: Inter, sans-serif; background-color: #fff; padding: 1rem; } .gc-calendar .gc-calendar-header { background-color: #fff; padding: 2px; height: max-content; display: flex; align-items: center; margin-bottom: 40px; } .gc-calendar .gc-calendar-header button.next, .gc-calendar .gc-calendar-header button.prev { height: 36px; left: 0; top: 0; border-radius: 100px; background: #fff; border-radius: 100px; position: relative; display: inline-block; border: 0; padding: 4px 15px; font-size: 24px; box-shadow: inset 0 -1px 0 #edf2f7; cursor: pointer; color: #7a7a9d; font-weight: 700; margin-right: 10px; width: inherit; } .gc-calendar .gc-calendar-header button.next:hover, .gc-calendar .gc-calendar-header button.prev:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 7px 14px rgba(50, 50, 93, .1); } .gc-calendar .gc-calendar-header button.next:focus, .gc-calendar .gc-calendar-header button.prev:focus { box-shadow: 0 3px 6px rgba(0, 0, 0, .08), 0 7px 14px rgba(50, 50, 93, .1); outline: 0; border: 0; } .gc-calendar .gc-calendar-header button.prev { margin-left: 20px; } .gc-calendar .gc-calendar-header .gc-calendar-month-year { font-style: normal; font-weight: 600; font-size: 28px; color: #38385c; line-height: 136.02%; min-width: 220px; } .gc-calendar table.calendar { width: 100%; } .gc-calendar table.calendar th { text-align: start; font-weight: 600; font-size: 14px; line-height: 136.02%; padding: 2px; text-transform: uppercase; color: #7a7a9d; position: relative; padding-bottom: 12px; } .gc-calendar table.calendar td { height: 150px; position: relative; padding-top: 3px; vertical-align: top; width: calc(100% / 7); } .gc-calendar table.calendar td.next-month .day-number, .gc-calendar table.calendar td.prev-month .day-number { color: #b5b5bd; } .gc-calendar table.calendar td .day-number { font-size: 24px; font-weight: 800; line-height: 38.09px; overflow-y: auto; color: #38385c; text-decoration: none; display: block; } .gc-calendar table.calendar td .today .day-number { color: #4c6fff; /* Début encadrement du hour courant*/ border: solid #4c6fff; border-radius: 5px; margin: 1px; width: 90%; /* Fin encadrement du hour courant*/ } .gc-calendar table.calendar a { text-decoration: none; display: block; } .gc-calendar table.calendar a:hover { background-color: #4c6fff; width: 90%; border-radius: 5px; padding-left: 10px; transition: .2s; } .gc-calendar table.calendar a:hover .day-number { color: #fff; } .gc-calendar table.calendar th::before, .gc-calendar table.calendar tr:not(:last-child) td::before { content: ""; display: block; width: 90%; height: 2px; border-radius: 1px; background-color: #8f8f93; bottom: 0; left: 0; position: absolute; } .gc-calendar table.calendar td:hover { background: linear-gradient(90deg, #e1e8ff 90%, transparent 50%); padding-left: 10px; padding-right: 10px; transition: .3s; } .gc-calendar .gc-event { display: block; overflow: hidden; margin-bottom: 10px; } .slide-in-left { -webkit-animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both; animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both; } .slide-in-right { -webkit-animation: slide-in-right .5s cubic-bezier(.25, .46, .45, .94) both; animation: slide-in-right .5s cubic-bezier(.25, .46, .45, .94) both; } .slide-out-left { -webkit-animation: slide-out-left .5s cubic-bezier(.55, .085, .68, .53) both; animation: slide-out-left .5s cubic-bezier(.55, .085, .68, .53) both; } .slide-out-right { -webkit-animation: slide-out-right .5s cubic-bezier(.55, .085, .68, .53) both; animation: slide-out-right .5s cubic-bezier(.55, .085, .68, .53) both; } @-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } } @keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; } } @-webkit-keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } } @keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0; } }