.clearOut_warn { filter:grayscale(1); opacity:0.6; transform:scale(0); overflow:hidden!important; padding:0!important; margin:0!important; height:0!important; min-height:0!important; will-change:opacity, transform, height, padding, margin; transition:var(--opacityTransition), transform 150ms linear 2.5s, height 150ms linear 2.5s, padding 150ms linear 2.5s, margin 150ms linear 2.5s; } #detailsOrder > ul > li { will-change:opacity, transform, height, padding, margin; transition:var(--opacityTransition), transform 150ms linear 2.5s, height 150ms linear 2.5s, padding 150ms linear 2.5s, margin 150ms linear 2.5s; } [data-svg='/includes/images/packing.svg'].orderStatus.alert { filter:saturate(0.8); opacity:0.56; cursor:not-allowed; } #_dialogSignature.dialog { height: auto; } /* -------------------------------------------------------------------------------------------------------- */ /* >>>> Application des nouveaux styles :: BODY, HEADER, MAIN, FOOTER <<<< */ /* -------------------------------------------------------------------------------------------------------- */ header > #headerContainer { position:fixed; top:0; left:0; right:0; opacity:0; height:56px; margin:0; background-color:rgb(var(--redRGB)); transition:opacity 250ms linear 80ms; } header > #headerContainer #closeFullPage > svg { fill:rgb(var(--whiteRGB-std)); stroke:rgb(var(--redRGB)); stroke-width:1px; width:40px;height:40px; margin:0 32px 0 16px; } header > #headerContainer > div { flex:none; width:800px; height:100%; margin:0 auto; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } header > #headerContainer #titleFullPage { color:rgb(var(--whiteRGB-std)); } @media only screen and (max-width:600px) { header { position:fixed; top:0; right:0; left:0; z-index:4; box-sizing:content-box; padding:0!important; flex:none; width:100%; height:56px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; background-color:rgb(var(--whiteRGB-std)); border-bottom:4px solid rgb(var(--headLiner)); will-change:height, border-width; transition:height 250ms var(--standardEasing), border-width 150ms var(--standardEasing), var(--boxShadowTransition); } header.onScroll { box-shadow:var(--boxShadow_z4); border-bottom-width:2px; } header + main { margin-top:56px; } header > #topAppBar { flex:none; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; transition:opacity 150ms linear; width:100%; padding:0 8px 0 16px; } header > #topAppBar #logoHeader { display:none; } header > #topAppBar #svgSymbol { height:40px; width:40px; transition:all 200ms var(--standardEasing); } header > #topAppBar .btnMenu { position:relative; z-index:6; width:40px; min-width:unset; max-width:unset; height:auto; min-height:unset; max-height:unset; aspect-ratio:1; padding:0; margin-left:4px; background-color:rgba(var(--blackRGB), 0); border-radius:50%; box-shadow:0 0; will-change:background-color; transition:background-color 150ms var(--sharpEasing), margin 200ms var(--standardEasing); } /*header > #topAppBar .btnMenu.yellow { background-color:rgb(var(--yellowRGB)); }*/ header > #topAppBar .btnMenu svg { width:24px; height:24px; fill:inherit; margin:auto; transition:fill 150ms var(--sharpEasing); } header > #topAppBar .btnMenu > [data-svg] { width:40px; height:40px; padding:8px; margin:auto; fill:rgba(var(--blackRGB),0.76); } header > #topAppBar .btnMenu > [data-tooltip]::after { visibility:hidden; } header > #topAppBar #svgSearch > svg { stroke:rgba(var(--blackRGB),0.76); stroke-width:1.2px; } header > #topAppBar .multiFAB[aria-expanded=true] > button:not(:first-child) { width:48px!important; height:48px!important; margin:0 0 0 -4px!important; background-color:rgb(var(--whiteRGB-std)); } header > #topAppBar #wrapperApp[aria-expanded=true] > button:not(:first-child) { width:48px!important; height:48px!important; margin:8px auto 8px -4px!important; background-color:rgb(var(--whiteRGB-std)); } header > #loginAs { display:none; } #navBar { margin-top:8px; height:0; padding:0; overflow:hidden; } } @media only screen and (min-width:600px) { header { position:fixed; top:0; right:0; left:0; z-index:4; box-sizing:content-box; padding:0!important; flex:none; width:100%; height:76px; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; background-color:rgb(var(--whiteRGB-std)); border-bottom:2px solid rgb(var(--headLiner)); will-change:height, border-width; transition:height 250ms var(--standardEasing), border-width 150ms var(--standardEasing), var(--boxShadowTransition); } header.onScroll { box-shadow:var(--boxShadow_z4); border-bottom-width:2px; } header + main { margin-top:98px; } header + main + .navigationRail { padding-top:calc(98px + 8px); transition:padding 250ms var(--standardEasing); } header + #navBar { margin-top:98px; } header + .banner + #navBar { margin-top:40px; } header + #navBar + main + .navigationRail { padding-top:calc(98px + 8px); transition:padding 250ms var(--standardEasing); } header > #topAppBar { flex:none; width:100%; max-width:1176px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; transition:opacity 150ms linear; } header > #topAppBar #logoHeader { height:56px; width:auto; transition:all 200ms var(--standardEasing); } header > #topAppBar #svgSymbol { display:none; } header > #topAppBar .btnMenu { position:relative; z-index:6; width:56px; min-width:unset; max-width:unset; height:auto; min-height:unset; max-height:unset; aspect-ratio:1; padding:0; margin-left:16px; background-color:rgba(var(--blackRGB), 0.87); border-radius:50%; box-shadow:0 0; will-change:background-color; transition:background-color 150ms var(--sharpEasing), margin 200ms var(--standardEasing); } header > #topAppBar .btnMenu.yellow { background-color:rgb(var(--yellowRGB)); } header > #topAppBar .btnMenu svg { width:24px; height:24px; fill:rgb(var(--whiteRGB-std)); margin:auto; transition:fill 150ms var(--sharpEasing); } header > #topAppBar .btnMenu > [data-svg] { width:40px; height:40px; padding:8px; margin:auto; } header > #topAppBar .btnMenu > [data-tooltip]::after { visibility:hidden; } header > #topAppBar #svgSearch > svg { stroke:rgb(var(--whiteRGB-std)); stroke-width:1.8px; } header > #loginAs { opacity:0; visibility:hidden; max-width:0; position:absolute; display:block; margin:-8px 276px 0 0; padding-left:66px; font-size:40px; letter-spacing:-1px; font-weight:800; line-height:1; color:rgb(var(--redRGB)); width:100%; transition:opacity 150ms linear; } header > #loginAs > div { line-height:1; font-weight:500; } header.ghost { background-color:rgba(var(--blackRGB),0.32); } header.ghost > #topAppBar { filter:grayscale(1); } header.ghost > #topAppBar > a { overflow:hidden; width:56px; } header.ghost > #loginAs { max-width:900px; opacity:1; visibility:visible; } header.shrink { height:56px; } header.shrink + main { margin-top:56px; } header.shrink + main + .navigationRail { padding-top:calc(58px + 8px); } header.shrink + #navBar { margin-top:56px; } header.shrink + #navBar + main + .navigationRail { padding-top:calc(58px + 8px); } header.shrink > #topAppBar #logoHeader { height:40px; } header.shrink > #topAppBar .btnMenu { background-color:rgba(var(--blackRGB), 0); margin-left:0; } header.shrink > #topAppBar .btnMenu svg { fill:inherit; } header.shrink > #topAppBar .btnMenu > [data-svg] { width:40px; height:40px; padding:8px; border-radius:50%; fill:rgba(var(--blackRGB),0.76); } header.shrink > #topAppBar .btnMenu > [data-tooltip]::after { visibility:visible; } header.shrink > #topAppBar .btnMenu:first-child:hover > [data-svg] { box-shadow:var(--focus4White); fill:rgba(var(--blackRGB),0.87); } header.shrink > #topAppBar .btnMenu:first-child:active > [data-svg] { box-shadow:var(--active4White); fill:rgb(var(--blackRGB)); } header.shrink > #topAppBar #svgSearch > svg { stroke:rgba(var(--blackRGB),0.76); stroke-width:1.2px; } header.shrink > #topAppBar .multiFAB[aria-expanded=true] > button:not(:first-child) { width:48px!important; height:48px!important; margin:8px!important; background-color:rgb(var(--whiteRGB-std)); } header.shrink > #topAppBar #wrapperApp[aria-expanded=true] > button:not(:first-child) { width:48px!important; height:48px!important; margin:8px!important; background-color:rgb(var(--whiteRGB-std)); } header:not(.shrink) > #topAppBar .btnMenu > [data-badge]::before { min-width:24px; width:fit-content; height:24px; position:absolute; overflow:hidden; line-height:24px; font-size:14px; text-align:center; top:-17px; right:-17px; border-radius:50%; border-width:3px; } #navBar { width:var(--headerWidth); max-width:1176px; margin:var(--headerMargin); padding:8px 0; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); } .navigationRail > button:disabled { pointer-events:unset; } .navigationRail > button:disabled > div { pointer-events:none; } } header > #topAppBar .btnMenu > [data-badge=0] { min-width:24px; width:fit-content; height:24px; position:absolute; overflow:hidden; line-height:24px; font-size:14px; text-align:center; top:-17px; right:-17px; border-radius:50%; border-width:3px; } .userMenu { position:relative; padding:0; height:48px; aspect-ratio:1; border:2px solid rgb(var(--blackRGB-std)); border-radius:50%; background-size:24px; background-position:center; background-repeat:no-repeat; margin:0 4px; transition:all 150ms var(--standardEasing); vertical-align:middle; } .FAB .badge { box-sizing:content-box; position:absolute; height:22px; aspect-ratio:1; overflow:hidden; line-height:22px; font-size:12px; letter-spacing:-0.02em; font-weight:700; text-align:center; top:-8px; right:-8px; border-radius:50%; background-color:rgb(var(--redRGB)); border:2px solid rgb(var(--whiteRGB-std)); color:rgb(var(--whiteRGB-std)); } #userMenu_selectAddMode { background-image:url("/includes/images/plus-math.svg"); background-color:rgb(var(--blackRGB-std)); } #userMenu_addDesktop { background-image:url("/includes/images/desktop-white.svg"); background-color:rgb(var(--blackRGB-std)); } #userMenu_addMob { background-image:url("/includes/images/iphone-white.svg"); background-color:rgb(var(--blackRGB-std)); } #inputSearchBar, #inputSearchBar:hover, #inputSearchBar:focus { color:rgba(var(--blackRGB), 0.87); width:0; position:absolute; top:0; right:0; border:2px solid rgb(var(--blackRGB-std)); height:48px; background-color:rgb(var(--whiteRGB-std)); border-radius:26px; padding:0 30px; line-height:1; box-shadow:var(--boxShadow_z4); caret-color:rgba(var(--blackRGB), 0.87); } #btnSearchBar { height:48px; aspect-ratio:1; position:absolute; top:0; left:0; border:2px solid rgb(var(--blackRGB-std)); border-radius:50%; background-image:url("/includes/images/search-white.svg"); background-size:24px; background-position:center; background-repeat:no-repeat; background-color:rgb(var(--blackRGB-std)); } main { padding-bottom:96px; background-color:rgb(var(--whiteRGB-std)); } #profile { flex:none; } #userTools { display:flex; flex-flow:row nowrap; justify-content:space-evenly; align-items:stretch; padding:0 16px; margin-top:32px; } #userNavigation { flex:1; margin-right:15px; max-width:400px; display:flex; flex-flow:column wrap; justify-content:space-around; align-items:stretch; } @media only screen and (max-height:500px) and (orientation: landscape) { #userTools { flex-flow:row wrap; justify-content:center; padding:0; } #userNavigation { margin-right:0; justify-content:center; } button.xl_n_icon { min-width:400px; margin:4px 0; } #profile { min-width:400px; margin-top:36px; } } @media only screen and (max-width:599px) and (orientation: portrait) { #userTools { flex-flow:row wrap; justify-content:center; padding:0; } #userNavigation { margin-right:0; justify-content:center; } button.xl_n_icon { margin:4px 0; } #profile { margin-top:36px; } } footer { flex:none; position:relative; z-index:4; top:0; min-height:54px; width:100vw; display:flex; flex-direction:column; justify-content:center; align-items:center; background:white; border-block-start:1px solid rgba(var(--blackRGB), 0.32); } footer > div { display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); color:rgba(var(--blackRGB), 0.54); } footer > div > a { padding:8px; } footer > div > a:hover { color:rgba(var(--blackRGB),.87); } #containerSection { width:1080px; margin:8px auto 8px -20px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; } #containerSection > section:first-child { flex:1; min-width:344px; margin:8px 36px 8px 0; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; } #containerSection > section:first-child > .cardImg_1_1 { margin:unset; margin-bottom:24px; } #containerSection > section:nth-child(2) { flex:none; width:344px; margin:8px 0; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; } #containerSection > section:nth-child(2) > .card { margin-bottom:36px; } #containerSection > section:last-child > .card { margin-bottom:8px; } #containerSection > section:only-child { flex:1; min-width:344px; max-width:1040px; margin:8px 0; display:flex; flex-flow:row wrap; justify-content:space-around; align-items:center; } #containerSection > section:only-child > .card { min-height:186px; } @media only screen and (max-width:599px) { #containerSection { width:100%; margin:16px auto 0 auto; flex-flow:row wrap; justify-content:center; align-items:center; } #containerSection > section:first-child { margin:8px auto; justify-content:center; } } #timeRequest { height:fit-content; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-start; } #timeRequest[aria-hidden=true] { min-height:0; height:0; max-height:0; overflow:hidden; } #timeRequest > div:first-child { line-height:40px; font-weight:500; } #timeRequest > .timeSlot { position:relative; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; max-height:208px; padding:16px 24px 0 16px; column-gap:16px; row-gap:20px; overflow-y:hidden; } #timeRequest > .timeSlot > #see-more { position: absolute; inset: auto 0 0 0; height: 40px; line-height: 40px; text-align: center; background-color: white; font-weight: 500; } #timeRequest > .timeSlot[aria-expanded] { overflow:auto; } #timeRequest > .timeSlot[aria-expanded] > #see-more { display:none; } #timeRequest > .timeSlot[aria-hidden=true] { display:none; } #timeRequest > .timeSlot[aria-hidden=false] > .btn_timeSlot { flex: 1; display: block; min-width: 100px; max-width: 116px; height: 56px; line-height: 56px; text-align: center; font-weight: 600; color: rgb(var(--primaryColor)); outline: 2px solid rgb(var(--primaryColor)); outline-offset: -2px; border-radius: 12px; } #timeRequest > .timeSlot[aria-hidden=false] > .btn_timeSlot[aria-selected=true] { background-color: rgb(var(--primaryColor)); color:rgb(var(--whiteRGB-std)); } #timeRequest > .timeSlot[aria-hidden=false]:has( > .btn_timeSlot[aria-selected=true]) > .btn_timeSlot:not([aria-selected=true]) { filter:grayscale(1) opacity(0.32); } .wrapperIcons { display:inline-flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } .wrapperIcons > [data-svg] { margin-right:8px; } .incomingFadeThrough { z-index:5; opacity:1; visibility:visible; box-shadow:var(--boxShadow_z24); transform:scale(1); transform-origin:center; transition:transform 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms, opacity 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms, visibility 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms; } .outgoingFadeThrough /*state by default*/ { opacity:0; visibility:hidden; transform:scale(0.92); transform-origin:center; will-change:opacity,transform; transition:opacity 90ms cubic-bezier(0.4, 0.0, 1, 1), visibility 90ms cubic-bezier(0.4, 0.0, 1, 1), transform 1ms linear 100ms; } #orderDetails > td { border:0 none; padding:0; background-color:rgba(var(--blackRGB), 0.04); } #orderDetails > td > div { height:0; width:calc(100% + 8px); position:relative; left:-4px; overflow:hidden; margin-left:-1px; border:0 none; transition:height 250ms var(--sharpEasing), padding 200ms var(--sharpEasing); } #orderDetails > td > div > div { width:min(800px,calc(100%-16px)); margin:0 auto; height:0; overflow:hidden; border:0 none; border-radius:8px; background-color:rgb(var(--whiteRGB-std)); } #orderDetails[aria-expanded=true] > td > div { height:unset; padding:16px 24px; box-shadow:inset rgb(0 0 0 / 20%) 0px 3px 1px -2px, inset rgb(0 0 0 / 14%) 0px 2px 2px 0px, inset rgb(0 0 0 / 12%) 0px 4px 5px 0px, inset rgb(0 0 0 / 20%) 0px -3px 1px -2px, inset rgb(0 0 0 / 14%) 0px -2px 2px 0px, inset rgb(0 0 0 / 12%) 0px -4px 5px 0px; transition:height 250ms var(--sharpEasing), padding 200ms var(--sharpEasing); } #orderDetails[aria-expanded=true] > td > div > div { height:unset; border:1px solid rgba(var(--blackRGB), 0.12); background-color:white; box-shadow:var(--boxShadow_z1); } :is(#profile, #orders) > ul { padding:16px 0 0 0; } :is(#profile, #orders) > ul > li { max-height:48px; } li > .wrapperIcons { width:48px!important; max-width:fit-content; overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:flex-start; transition:width 600ms var(--standardEasing), overflow 0ms var(--standardEasing) 600ms, var(--opacityTransition), var(--boxShadowTransition); } li.switchOff > .wrapperIcons { width:96px!important; } li:hover > .wrapperIcons { width:300px!important; max-width:fit-content; overflow:visible; } li:hover > .wrapperIcons > .icon[data-badge] { margin-right:8px; } @media only screen and (max-width:599px) { #listInProgress > li { flex-flow:row wrap; } li > .wrapperIcons { width:unset!important; margin:0 0 0 auto; height:unset; padding:0; } } #moreInfo[aria-expanded=true] { max-height:480px; height:fit-content; width:100%; } #moreInfo[aria-expanded=false] { height:0; } #wrapperApp { position:relative; z-index:1!important; padding:0; width:56px; min-width:unset; max-width:unset; height:auto; min-height:unset; max-height:unset; aspect-ratio:1; background-color:transparent!important; box-shadow:unset!important; } #wrapperApp > button { position:absolute!important; top:0; left:0; margin:0!important; opacity:0; pointer-events:none; box-shadow:var(--boxShadow_z4)!important; /*transition:transform 150ms var(--sharpEasing), opacity 100ms linear!important;*/ } #wrapperApp > button:first-child, #wrapperApp > button:first-child svg { opacity:1; pointer-events:all; transform:rotate(0deg); transition:transform 150ms var(--sharpEasing)!important; box-shadow:0 0!important; } #wrapperApp[aria-expanded=true] > button:first-child svg { z-index:5!important; transform:rotate(135deg); transition:transform 150ms var(--sharpEasing)!important; } #wrapperApp[aria-expanded=true] > button:nth-child(2) { z-index:2!important; opacity:1; pointer-events:all; transform:translate(calc(55% + 8px), calc(100% + 8px)); transition:transform 200ms var(--standardEasing) 0ms, opacity 100ms var(--standardEasing) 0ms!important; } #wrapperApp[aria-expanded=true] > button:nth-child(3) { z-index:2!important; opacity:1; pointer-events:all; transform:translate(calc(-55% - 8px), calc(100% + 8px)); transition:transform 200ms var(--standardEasing) 100ms, opacity 100ms var(--standardEasing) 100ms!important; } #wrapperApp[aria-expanded=true] > button:nth-child(4) { z-index:1!important; opacity:1; pointer-events:all; transform:translate(calc(75% + 8px), calc(200% + 16px)); transition:transform 200ms var(--standardEasing) 180ms, opacity 100ms var(--standardEasing) 180ms!important; } #wrapperApp[aria-expanded=true] > button:nth-child(5) { z-index:1!important; opacity:1; pointer-events:all; transform:translate(calc(-75% - 8px), calc(200% + 16px)); transition:transform 200ms var(--standardEasing) 270ms, opacity 100ms var(--standardEasing) 270ms!important; } #wrapperApp[aria-expanded=false] > button:nth-child(2) { transition:transform 150ms var(--sharpEasing) 0ms, opacity 100ms linear 0ms!important; } #wrapperApp[aria-expanded=false] > button:nth-child(3) { transition:transform 150ms var(--sharpEasing) 50ms, opacity 100ms linear 40ms!important; } #wrapperApp[aria-expanded=false] > button:nth-child(4) { transition:transform 150ms var(--sharpEasing) 90ms, opacity 100ms linear 72ms!important; } #wrapperApp[aria-expanded=false] > button:nth-child(5) { transition:transform 150ms var(--sharpEasing) 120ms, opacity 100ms linear 96ms!important; } /*#_dialogOrder > .header > .title > div { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1; margin-left:16px; font-weight:500; }*/ #_dialogBasket > .footer { display:none; } /*.orderStatus:is([data-svg='/includes/images/calendar-date-request.svg'], [data-svg='/includes/images/delivery.svg']) { fill:rgb(var(--redRGB))!important; }*/ .thumbsPhoto { display:flex; flex:none; padding:0; width:100px; height:70px; background-position:center; background-repeat:no-repeat; background-size:cover; border-radius:0; border-bottom:1px solid rgb(var(--whiteRGB-std)) } .thumbsPhoto[disabled] { background-size:50px; } .thumbsPhoto:hover { box-sizing:content-box; width:140px; height:140px; left:-20px; top:-35px; border-top:4px solid rgb(var(--whiteRGB-std)); border-bottom:4px solid rgb(var(--whiteRGB-std)); z-index:100; } #rating { margin:0 16px 0 8px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } #rating > [data-svg] > svg { fill:rgba(var(--blackRGB), 0.12); width:18px; height:18px; } #rating:is([data-tooltip='Très bon'],[data-tooltip='Bon'],[data-tooltip='Usage']) > [data-svg]:first-child > svg { fill:rgb(var(--yellowRGB)); } #rating:is([data-tooltip='Très bon'],[data-tooltip='Bon'],[data-tooltip='Usage']) > [data-svg]:nth-child(2) > svg { fill:rgb(var(--yellowRGB)); } #rating:is([data-tooltip='Très bon']) > [data-svg]:last-child > svg { fill:rgb(var(--yellowRGB)); } .cardHolder { flex:none; width:100%; max-width:100%; margin:8px auto; display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; } .cardHolder > .card, .cardHolder > .cardImg_1_1 { margin:0 8px 36px 8px; } .cardImg_1_1[data-owner=true] > .scrim { border-color:rgb(var(--blueRGB)); } .cardImg_1_1[data-owner=true] > .scrim { border-color:rgb(var(--blueRGB)); } .cardImg_1_1[data-active="false"] > .mediaArea { filter:grayscale(1); opacity:0.42; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .cardImg_1_1[data-active="false"]:hover > .mediaArea { filter:unset; opacity:1; } #corecyclage { width:400px; height:70px; transition:all 0.21s ease-out 0.1s; } #language { display:none; } @media only screen and (max-width:599px) { #listUsers { margin:24px 0 16px auto; } #listUsers > li.twoLines > .textBlock { justify-content:center; } #listUsers > li.twoLines > .textBlock > .title { line-height:unset; padding-top:unset; } #listUsers > li.twoLines > .textBlock > .body { display:none; } #listUsers > li > .textBlock + div { margin:0; } #listUsers #svgProfileType { display:none; } #listUsers #svgPhone { display:block!important; margin-right:8px; } } /* mouse, touch pad */ @media (hover: hover) and (pointer: fine) { #_dialogSignature > .mainContent #formSignature { display:none; } #_dialogSignature > .footer { display:none; } } /* smartphones, touchscreens */ @media (pointer: coarse) { #_dialogSignature > .mainContent { padding:24px 8px 8px; border-bottom:0 none transparent; } #_dialogSignature > .mainContent #divQRCode { display:none; } #_dialogSignature > .footer { box-shadow:0 0; } #_dialogSignature > .footer > #cancelBtn { display:none; } } div[aria-controls=_dialogPlanning]:empty { background-color:rgba(var(--primaryColor), 0.24); border:1.5px solid rgba(var(--primaryColor), 0.48)!important; box-shadow:var(--boxShadow_z6); } #_dialogPlanning { width:450px; max-height:515px; } #_dialogPlanning > .header { justify-content:flex-start; } #_dialogPlanning > .header > .title { font:var(--h5_font); letter-spacing:var(--h5_spacing); line-height:1; } #_dialogOrder.dialog > .footer { display:none; } #_dialogOrder.dialog > .mainContent { margin-bottom:24px; padding:0 16px; border-bottom:0 none transparent; } #_dialogOrder.dialog > .header { flex:none; max-height:64px; height:48px; padding:0 24px 0 24px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-bottom:0; } #_dialogOrder.dialog > .header > .iconHolder > [data-svg]:not(#svgClose) { padding:calc((40px - 22px)/2) } #_dialogOrder.dialog [role=article] > div:first-child { width:100%; flex:none; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; margin-bottom:24px; } #_dialogOrder.dialog [role=article] > div:first-child > div { flex:none; width:100%; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } #_dialogOrder.dialog [role=article] > div:first-child > div [data-svg] { width:20px; height:20px; margin-inline:0 16px; } #_dialogOrder.dialog [role=article] > div:first-child > div [data-svg] > svg { fill:rgba(var(--blackRGB), 0.87); } #headerCalendar { width:fit-content; margin:0 auto; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } #headerCalendar.moveInHeader { position:fixed; top:0; left:0; right:0; margin:auto; z-index:16; } #headerCalendar.moveInHeader > button { width:40px; height:40px; padding:calc((40px - 24px)/2); z-index:16; } /*.dialog #formProject_planning { max-width:fit-content; } :is(#_dialogAddProject,#_dialogUpdateProject).dialog section { flex:none; position:relative; left:-16px; width:calc(100% + 32px); padding-inline:16px; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; margin-inline:0; margin-block:0; border-bottom:1px solid rgba(var(--blackRGB), 0.12); } :is(#_dialogAddProject,#_dialogUpdateProject).dialog section > div.title { flex:none; width:100%; font:var(--body1_font); letter-spacing:var(--body1_spacing); font-weight:500; line-height:1; padding-block:calc(36px - 1em) 14px; align-self:flex-start; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } :is(#_dialogAddProject,#_dialogUpdateProject).dialog section:first-of-type > div.title { padding-block:0 14px; } */ .dialog #formProject_planning { max-width:fit-content; } /*:is(#_dialogAddProject,#_dialogUpdateProject).dialog > .mainContent > div > form > section { position:relative; flex:none; left:68px; width:calc(100% - 68px); padding:0; margin:0; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; } :is(#_dialogAddProject,#_dialogUpdateProject).dialog > .mainContent > div > form > section > .title { display:none; } :is(#_dialogAddProject,#_dialogUpdateProject).dialog > .mainContent > div > form > section > .sectionIcon { position:absolute; top:0; left:-68px; width:40px; margin:4px calc((68px - 40px) / 2); } */ /*.dialog > .mainContent { flex:1; padding-inline:24px 28px; margin:16px -8px 24px 0; overflow-y:auto; } .dialog > .mainContent::-webkit-scrollbar-thumb { box-shadow:inset 0 -80px 0 0 rgba(var(--blackRGB-std), 0.36); background-color:rgba(255,255,255,0.76); border:0 none transparent; } .dialog > .mainContent::-webkit-scrollbar-thumb { box-shadow:inset 0 -80px 0 0 rgb(255 255 255 / 40%); background-color:rgba(var(--blackRGB-std), 0.52); border:0 none transparent; }*/ .day { flex:none; width:104px; margin:4px 0; user-select:none; } .day > .headerDay { position:relative; flex:none; width:100%; height:60px; border-radius:4px 4px 0 0; color:rgb(var(--whiteRGB-std)); text-align:center; padding:4px; border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.42); opacity:0.7; } .day > .headerDay.closed { border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.42); opacity:0.7; } .day > .headerDay.open { border:1px solid rgb(var(--blueRGB)); background-color:rgb(var(--blueRGB)); opacity:1; } .day > .headerDay.error { color:rgb(var(--whiteRGB-std)); border:1px solid rgb(var(--redRGB)); background-color:rgb(var(--redRGB), 1); opacity:1; } .day > .headerDay.error > * { color:rgb(var(--whiteRGB-std)); } .day > .headerDay.error + .bodyDay { border:1.5px solid rgb(var(--redRGB), 1); background-color:rgba(var(--redRGB), 0.32); opacity:1; } .day > .bodyDay { position:relative; flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; height:90px; border-radius:0 0 4px 4px; border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgb(var(--whiteRGB-std)); color:rgba(var(--blackRGB), 0.87); } .day > .headerDay.open + .bodyDay { border:1.5px solid rgb(var(--primaryColor)); } .wrapperWeeks { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; } .wrapperWeeks > .week > .timming { margin-top:48px; width:30px; /*height:725px;*/ position:relative; color:rgba(var(--blackRGB), 0.42); } .wrapperWeeks > .week > .timming > div { width:100%; line-height:16px; height:calc(60px + (60 / var(--meeting-duration)) * 4px); text-align:right; padding-right:4px; } .wrapperWeeks > .week > .timming > div[aria-hidden=true] { display:none; } .wrapperWeeks > .week { flex:none; width:100%; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; } .wrapperWeeks > .week > .weekDay { user-select:none; flex:3; min-width:168px; margin:0 2px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; } .wrapperWeeks > .week > .weekDay.closed { flex:2; min-width:100px; height:calc(60px + 34px * 32); margin:0 2px; border:1px dashed rgba(var(--blackRGB), 0.32); border-radius:4px; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; opacity:0.7; } .wrapperWeeks > .week > .weekDay > .headerDay { position:relative; flex:none; width:100%; height:60px; border-radius:4px 4px 0 0; color:rgb(var(--whiteRGB-std)); text-align:center; padding:4px; border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.42); opacity:0.7; } .wrapperWeeks > .week > .weekDay > .headerDay[data-badge]::before { min-width:22px; height:22px; line-height:22px!important; font:var(--subtitle2_font); font-weight:600; text-align:center; top:-16px; right:-4px; left:unset; padding:2px; border-radius:22px; background-color:rgb(var(--redRGB)); border:2px solid rgba(var(--whiteRGB-std), 0.87); color:rgb(var(--whiteRGB-std)); } .wrapperWeeks > .week > .weekDay > .headerDay.closed { border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.42); opacity:0.7; } .wrapperWeeks > .week > .weekDay > .headerDay.open { border:1px solid rgb(var(--blueRGB)); background-color:rgb(var(--blueRGB)); opacity:1; } .wrapperWeeks > .week > .weekDay > .headerDay.open > .BUTTON { margin:0 auto; width:fit-content; line-height:1; } .wrapperWeeks > .week > .weekDay > .bodyDay { position:relative; flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; height:90px; border-radius:0 0 4px 4px; border:1px solid rgba(var(--blackRGB), 0.42); background-color:rgb(var(--whiteRGB-std)); color:rgba(var(--blackRGB), 0.87); } .wrapperWeeks > .week > .weekDay > .bodyDay > div:is(.halfHour, .oneHour) { position:relative; width:100%; height:calc(var(--meeting-duration) * 1px + 4px); padding-right:16px; margin:0; line-height:30px; overflow:hidden; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch; cursor:pointer; border-bottom:1px solid rgba(var(--blackRGB), 0.08); } .wrapperWeeks > .week > .weekDay > .bodyDay > div[aria-hidden=true] { display:none; } .wrapperWeeks > .week > .weekDay > .bodyDay > div.oneHour { border-bottom:1px solid rgba(var(--blackRGB), 0.24); } .wrapperWeeks > .week > .weekDay > .bodyDay > div:is(.halfHour, .oneHour).off { background-color:rgba(var(--blackRGB), 0.04); pointer-events:none; } /*.bodyDay > div:is(.halfHour, .oneHour):hover, .bodyDay > div[aria-controls] { outline:1px solid rgba(var(--blueRGB), 0.42); outline-offset:-1px; background-color:rgba(var(--blueRGB), 0.08); }*/ /*.bodyDay > div[aria-controls] > .inputChip { background-color:rgb(var(--primaryColor)); color:rgb(var(--whiteRGB-std)); z-index:10; padding:0 8px; }*/ @media only screen and (max-width:599px) { /*#_dialogOrder { width:100vw!important; height:100vh!important; max-height:100vh!important; top:0!important; right:unset!important; bottom:unset!important; left:0!important; } #_dialogOrder #headerOrder { flex-flow: row wrap!important; }*/ #headerCalendar > .FAB, #headerCalendar > .button { display:none; } .wrapperWeeks { flex-flow:column nowrap; } .wrapperWeeks > .week > .timming { display:none; } .wrapperWeeks > .week > .weekDay.closed { display:none; } .wrapperWeeks > .week { flex:none; width:100%; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; } .wrapperWeeks > .week > .weekDay { width:calc(100% - 16px); margin:4px auto 16px auto; } .wrapperWeeks > .week > .weekDay > .headerDay.open { height:unset; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; color:rgba(var(--blackRGB), 0.87); background-color:transparent; border:0; border-bottom:1px solid rgba(var(--blackRGB), 0.56); } .wrapperWeeks > .week > .weekDay > .headerDay > div { display:flex!important; font:var(--body1_font)!important; letter-spacing:var(--body1_spacing); font-weight:500!important; margin:0 4px!important; text-transform:capitalize!important; } .wrapperWeeks > .week > .weekDay > .bodyDay { border-radius:0; border:0; } .wrapperWeeks > .week > .weekDay > .bodyDay > div { flex-flow:column nowrap!important; width:calc(100% - 8px - 16px)!important; min-height:40px!important; height:unset!important; margin:0 16px 0 8px!important; padding:0!important; /*border-bottom:0 solid transparent!important;*/ } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal { position:relative; min-height:40px!important; color:rgba(var(--blackRGB), 0.87)!important; font-weight:500!important; border-radius:0!important; border:0 solid transparent!important; background-color:transparent!important; border-left:3px solid rgba(var(--blackRGB), 0.42)!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.up2Date > [data-svg] { fill:rgba(var(--blackRGB), 0.42)!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.up2Date { color:rgb(var(--primaryColor))!important; border-left:3px solid rgb(var(--primaryColor))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.up2Date > [data-svg] { fill:rgb(var(--primaryColor))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.warn { color:rgb(var(--redRGB))!important; border-left:3px solid rgb(var(--redRGB))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.warn > [data-svg] { fill:rgb(var(--redRGB))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.completed { color:rgb(var(--greenRGB))!important; border-left:3px solid rgb(var(--greenRGB))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div > .inputChip.cal.completed > [data-svg] { fill:rgb(var(--greenRGB))!important; } .wrapperWeeks > .week > .weekDay > .bodyDay > div:empty { display:none; } } input.openningHours { width:90px; height:30px; text-align:center; border:1px solid rgba(var(--blackRGB), 0.42); color:rgba(var(--blackRGB), 0.87); background-color:rgb(var(--whiteRGB-std)); border-radius:0; padding:2px 5px; font-size:14px; } /* -------------------------------------------------------------------------------------------------------- */ /* >>>> Application des nouveaux styles TYPOGRAPHIE <<<< */ /* -------------------------------------------------------------------------------------------------------- */ .strong { font-weight:600; } sup { color:rgb(var(--redRGB)); line-height:0; } .switchOff * { color:rgba(var(--blackRGB), 0.56); fill:rgba(var(--blackRGB), 0.56); } .switchOff #svgLink { display:flex!important; } .pageTitle { position:relative; margin:16px 16px 0 16px; text-align:left; display:none!important; } .pageTitle > span { position:relative; z-index:1; background-color:rgb(var(--whiteRGB-std)); width:fit-content; padding:0 3px; margin-left:48px; } .pageTitle > span.h5 + div { position:relative; z-index:0; height:2px; border-bottom:2px solid rgb(var(--redRGB)); top:-10px; } .pageTitle > span.h4 + div { position:relative; z-index:0; height:2px; border-bottom:2px solid rgb(var(--redRGB)); top:-24px; } /* -------------------------------------------------------------------------------------------------------- */ /* >>>> Application des nouveaux styles :: FORM <<<< */ /* -------------------------------------------------------------------------------------------------------- */ img.btnMinus { width:38px; height:38px; margin-right:24px; vertical-align:middle; opacity:0.8; } img.btnAdd { width:38px; height:38px; margin-left:24px; vertical-align:middle; opacity:0.8; } img.btnAdd:hover, img.btnMinus:hover { opacity:1; } button.xl_n_icon { flex:none; height:unset; min-width:250px; padding:8px 8px 8px 12px; font-family:var(--titleFont); text-transform:uppercase; font-size:18px; font-weight:500; letter-spacing:0.5px; line-height:30px; } button.xl_n_icon > img { vertical-align:bottom; margin-right:12px; padding:3px; } /* -------------------------------------------------------------------------------------------------------- */ /* >>>> Application des styles :: ICON 24x24 <<<< */ /* -------------------------------------------------------------------------------------------------------- */ div.stickers.icon { background-image:url("/includes/images/stickers.svg"); } div.stickers.icon:hover, div.stickers.icon:active { background-image:url("/includes/images/stickers-red.svg"); } div.list-stickers.icon { background-image:url("/includes/images/list-of-stickers.svg"); } div.list-stickers.icon:hover, div.list-stickers.icon:active { background-image:url("/includes/images/list-of-stickers-red.svg"); } #sideSheetHolder .projectMsg + li { border-top:0 none!important; } #sideSheetHolder .projectMsg > [data-svg] > svg { fill:rgb(var(--redRGB)); } /* .incomingFadeThrough { z-index:5!important; opacity:1; transform:scale(1); transform-origin:center; transition:transform 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms, opacity 210ms cubic-bezier(0.0, 0.0, 0.2, 1) 90ms; } .outgoingFadeThrough { opacity:0; transform:scale(0.92); transform-origin:center; will-change:opacity,transform; transition:opacity 90ms cubic-bezier(0.4, 0.0, 1, 1), transform 1ms linear 100ms; } /*state by default*/ /* #Basket { position: relative; z-index: 200; display: inline-block; height: 70px; width: 50px; margin-right: 10px; border-radius:8px; } #wrapperWholeTab { min-height:80px; } .tabs { position:relative; flex:1; padding:12px 0; text-align:center; cursor:pointer; font-weight:500; height:80px; } .tabs:hover { background-color:rgba(var(--redRGB), 0.04); } .tabs:focus, .tabs:active { background-color:rgba(var(--redRGB), 0.12); } .tabs.activeView { color:rgb(var(--redRGB)); pointer-events:none; font-weight:600; } .tabs.disabledView { pointer-events:none; opacity:0.5; } .tabs > .titleTab { color:inherit; padding:6px 16px 0 16px; width:100%; font-family:var(--stdFont); font-weight:inherit; font-size:15px; letter-spacing:0.75px; text-transform:uppercase; } .tabs > .underlineTab { position:relative; width:0; height:2px; top:11px; background-color:rgb(var(--redRGB)); transition:all ease-out 0.15s; } .tabs.activeView > .underlineTab { width:100%; } .wrapperContentTab { position:relative; overflow-y:hidden; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start; height:fit-content; } .contentTab { position:relative; flex:none; width:100%; padding:0 16px; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; } */