Fred Tempez
17b768e9c3
Limite la largeur des événements dans les colonnes Encadre le jour courant d'un filet de la même couleur que la date
296 lines
6.4 KiB
CSS
296 lines
6.4 KiB
CSS
@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;
|
|
}
|
|
} |