:root { /*\ ================----->>> CSS VARS TO ADAPT ACCORDING TO MATERIAL <<<-----================ \*/ --boxShadow_invertz2:0px -1px 5px 0px rgba(0,0,0, 0.12), 0px -2px 2px 0px rgba(0,0,0, 0.14), 0px -3px 1px 0px rgba(0,0,0, 0.2); /*Card, Button*/ --boxShadow_invertz4:0px -2px 4px -1px rgba(0,0,0, 0.2), 0px -4px 5px 0px rgba(0,0,0, 0.14), 0px -1px 10px 0px rgba(0,0,0, 0.12); /*Card, App bar, ButtonHover*/ --boxShadow_z1:0px 2px 1px -1px rgba(0,0,0, 0.2), 0px 1px 1px 0px rgba(0,0,0, 0.14), 0px 1px 3px 0px rgba(0,0,0, 0.12); /*Card*/ --boxShadow_z2:0px 3px 1px -2px rgba(0,0,0, 0.2), 0px 2px 2px 0px rgba(0,0,0, 0.14), 0px 1px 5px 0px rgba(0,0,0, 0.12); /*Card, Button*/ --boxShadow_z4:0px 2px 4px -1px rgba(0,0,0, 0.2), 0px 4px 5px 0px rgba(0,0,0, 0.14), 0px 1px 10px 0px rgba(0,0,0, 0.12); /*Card, App bar, ButtonHover*/ --boxShadow_z6:0px 3px 5px -1px rgba(0,0,0, 0.2), 0px 6px 10px 0px rgba(0,0,0, 0.14), 0px 1px 18px 0px rgba(0,0,0, 0.12); /*Card, FAB, Button*/ --boxShadow_z8:0px 5px 5px -3px rgba(0,0,0, 0.2), 0px 8px 10px 1px rgba(0,0,0, 0.14), 0px 3px 14px 2px rgba(0,0,0, 0.12); /*Card, Button*/ --boxShadow_z16:0px 8px 10px -5px rgba(0,0,0, 0.2), 0px 16px 24px 2px rgba(0,0,0, 0.14), 0px 6px 30px 5px rgba(0,0,0, 0.12); /*Nav drawer*/ --boxShadow_z24:0px 11px 15px -7px rgba(0,0,0, 0.2), 0px 24px 38px 3px rgba(0,0,0, 0.14), 0px 9px 46px 8px rgba(0,0,0, 0.12); /*Dialog*/ --iconOverlay:inset 20px 20px 0 10px rgba(var(--blackRGB-std), 0.42); --hover4White:inset 0 100px rgba(var(--blackRGB-std), 0.04); --hover4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.08); --hover4Img:inset 0 100px rgba(var(--blackRGB-std), 0.12); --focus4White:inset 0 100px rgba(var(--blackRGB-std), 0.12); --focus4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.24); --focus4Img:inset 0 100px rgba(var(--blackRGB-std), 0.36); --selected4White:inset 0 100px rgba(var(--primaryColor),0.08); --selected4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.16); --selected4Img:inset 0 100px rgba(var(--blackRGB-std), 0.24); --active4White:inset 0 100px rgba(var(--primaryColor),0.12); --active4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.24); --active4Img:inset 0 100px rgba(var(--blackRGB-std), 0.36); --pressed4White:inset 0 100px rgba(var(--primaryColor), 0.16); --pressed4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.32); --pressed4Img:inset 0 100px rgba(var(--blackRGB-std), 0.48); --dragged4White:inset 0 100px rgba(var(--primaryColor),0.08); --dragged4Color:inset 0 100px rgba(var(--whiteRGB-std), 0.16); --dragged4Img:inset 0 100px rgba(var(--blackRGB-std), 0.32); /*Elements quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes.*/ --standardEasing:cubic-bezier(0.4, 0, 0.2, 1); /*FastOutSlowIn Interpolator - Outgoing Velocity:40% / Incoming Velocity:80%*/ /*Using the deceleration curve (also referred to as “ease out”) elements enter the screen at full velocity and slowly decelerate to a resting point.*/ --decelerateEasing:cubic-bezier(0.0, 0.0, 0.2, 1); /*LinearOutSlowIn Interpolator - Outgoing Velocity:0% - Incoming Velocity:80%*/ /*Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen.*/ --accelerateEasing:cubic-bezier(0.4, 0.0, 1, 1); /*FastOutLinearIn Interpolator - Outgoing Velocity:40% - Incoming Velocity:0%*/ /*Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.*/ --sharpEasing:cubic-bezier(0.4, 0.0, 0.6, 1); /*FastOutFastIn Interpolator - Outgoing Velocity:40% / Incoming Velocity:40%*/ --boxShadowTransition:box-shadow 75ms var(--sharpEasing); --colorTransition:color 75ms var(--sharpEasing); --opacityTransition:opacity 100ms var(--sharpEasing), visibility 100ms var(--sharpEasing); /*\ ================----->>> CSS VARS TO ADAPT ACCORDING TO MATERIAL <<<-----================ \*/ /*font:var(--body2_font); letter-spacing:var(--body2_spacing); */ margin:0; padding:0; } @media only screen and (max-width:599px) { :root { --mainMinWidth:360px; --mainWidth:auto; --mainMargin:0 8px; --popElemMinWidth:calc(100vw - 16px); --popElemMaxWidth:100vw; /*--popInMaxHeight:100vh;*/ } } @media only screen and (min-width:600px) { :root { --mainMinWidth:auto; --mainWidth:auto; --mainMargin:0 16px; } } @media only screen and (min-width:905px) { :root { --mainMinWidth:840px; --mainWidth:840px; --mainMargin:0 auto; } } @media only screen and (min-width:1240px) { :root { --mainMinWidth:auto; --mainWidth:auto; --mainMargin:0 200px; --headerWidth:1040px; --headerMargin:0 auto; --popElemMinWidth:560px; --popElemMaxWidth:min(100%, 560px); --popElemMaxHeight:560px; } } @media only screen and (min-width:1440px) { :root { --mainMinWidth:1040px; --mainWidth:1040px; --mainMargin:0 auto; --headerWidth:1280px; --headerMargin:0 auto; } } @media (hover:hover) and (pointer:fine) { .availableOnMobile { display:none!important; } } body { width:100vw; min-height:100vh; margin:0; padding:0; font:var(--body2_font); letter-spacing:var(--body2_spacing); text-align:left; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:stretch; } header > section, header > div { width:var(--headerWidth); margin:var(--headerMargin); } main { min-width:var(--mainMinWidth); width:var(--mainWidth); margin:var(--mainMargin); position:relative; flex:1; align-self:center; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; } /* ================----->>> TYPOGRAPHY COMPONENT <<<-----================ *\ \* ============================================================================== */ .h1 { font:var(--h1_font); letter-spacing:var(--h1_spacing); } .h2 { font:var(--h2_font); letter-spacing:var(--h2_spacing); } .h3 { font:var(--h3_font); letter-spacing:var(--h3_spacing); } .h4 { font:var(--h4_font); letter-spacing:var(--h4_spacing); } .h5 { font:var(--h5_font); letter-spacing:var(--h5_spacing); } .h6 { font:var(--h6_font); letter-spacing:var(--h6_spacing); } .h7 { font:var(--h7_font); letter-spacing:var(--h7_spacing); } .subtitle1, summary, input, select, label, textarea, ::placeholder { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); } .subtitle2 { font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); } .body1 { font:var(--body1_font); letter-spacing:var(--body1_spacing); } .body2 { font:var(--body2_font); letter-spacing:var(--body2_spacing); } .BUTTON { font:var(--button_font); letter-spacing:var(--button_spacing); text-transform:uppercase; } .svgLabel { font:var(--button_font); letter-spacing:var(--button_spacing); } .OVERLINE, .overline { font:var(--overline_font); letter-spacing:var(--overline_spacing); text-transform:uppercase; } .caption, [data-tooltip]::after { font:var(--caption_font); letter-spacing:var(--caption_spacing); } /* ------------------------------------------------------------------------------ *\ \* ============================================================================== */ h1, h2, h3, h4, h5, h6 { -webkit-appearance:unset; appearance:unset; } ::backdrop, :fullscreen { background-color:var(--whiteRGB-std); } ::-webkit-scrollbar{ background:transparent; height:0; width:16px; } ::-webkit-scrollbar-thumb{ box-shadow:none; background:rgba(var(--blackRGB), .12); border-radius:8px; border-width:6px; border-style:solid; border-color:rgb(var(--whiteRGB-std)); transition:border 75ms var(--standardEasing), background 75ms var(--standardEasing); } ::-webkit-scrollbar-thumb:hover { background:rgba(var(--blackRGB), .32); border-width:4px; } *:hover::-webkit-scrollbar-thumb { background:rgba(var(--blackRGB), .24); } ::-webkit-scrollbar-thumb:active { background:rgba(var(--blackRGB), .54); border-width:4px; } @media only screen and (max-width:599px) { ::-webkit-scrollbar { display:none; } } * { box-sizing:border-box; } [onclick] { cursor:pointer; } :any-link { text-decoration:none; color:inherit; cursor:pointer; } ul[role=listbox]:empty { opacity:0; visibility:hidden; } optgroup { font-weight:600; } ::placeholder { color:rgba(var(--blackRGB), .6); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; transition:var(--opacityTransition); } /*input[type=text]:is(:read-only,[readonly]):placeholder-shown, select:is(:disabled,[disabled]), input[type=text]:is(:read-only,[readonly]):placeholder-shown + label, select:is(:disabled,[disabled]) + label {opacity:0.56; }*/ .inputWrapper[aria-invalid=true] { background-color: rgba(var(--redRGB), 0.12); } :is(.error, .alert, [aria-invalid=true]), :is(.error, .alert, [aria-invalid=true]) * { color:rgb(var(--redRGB))!important; border-color:rgb(var(--redRGB))!important; fill:rgb(var(--redRGB))!important; } :is(input, select, .icon):is(.error, .alert, [aria-invalid=true]) { background-color:rgba(var(--redRGB), 0.12); } :is([aria-disabled=true],[disabled],[disabled=true],:disabled,.disabled) { pointer-events:none; user-select:none; filter:grayscale(1); opacity:0.38; box-shadow:unset!important; cursor:default; } :is([aria-disabled=true],[disabled],[disabled=true],:disabled,.disabled) + label { pointer-events:none; user-select:none; filter:grayscale(1); opacity:0.38; cursor:default; } :is([aria-disabled=true],[disabled],[disabled=true],:disabled,.disabled)[aria-invalid=true] { opacity:0.56; filter:unset; } :is([aria-disabled=true],[disabled],[disabled=true],:disabled,.disabled):checked { pointer-events:none; opacity:0.38; cursor:default; filter:unset; } .txtOverflow { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .divider { width:100%; height:1px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); margin:16px 0; } .iconLike { width:40px; height:40px; border-radius:20px; padding:12px 8px; line-height:16px; text-align:center; } .iconLike:hover { box-shadow:var(--hover4White); } .iconLike:focus { box-shadow:var(--focus4White); } .iconLike:active { box-shadow:var(--active4White); } @media only screen and (max-width:599px) { #backdrop { background-color:rgba(var(--blackRGB), .6)!important; } } #backdrop { pointer-events:all; position:fixed; top:0; left:0; height:0; width:0; z-index:0; cursor:default; opacity:0; visibility:hidden; background-color:rgba(var(--blackRGB), .6); will-change:opacity; transition:opacity 75ms linear, width 1ms linear 400ms, height 1ms linear 400ms; } #backdrop.fadeIn { z-index:23; right:0; bottom:0; height:100%; width:100%; opacity:1; visibility:visible; backdrop-filter:saturate(0.5) blur(0.2px); will-change:opacity; transition:opacity 90ms var(--standardEasing); } #backdrop.white.fadeIn { background-color:rgba(var(--whiteRGB-std), 0.12); backdrop-filter:saturate(0.76) blur(0.2px); } #backdrop.bigger.fadeIn { top:-50vh; left:-50vw; right:0; bottom:0; height:150vh; width:150vw; } .moreElem { flex:none; margin-left:8px; font:500 31px Arial; line-height:16px; height:26px; width:26px; padding:4px 6px 4px 2px; border-radius:50%; color:rgba(var(--blackRGB), 0.54); border:2px solid rgba(var(--blackRGB), 0.54); } .moreElem:is(:hover,:focus,:active,[aria-selected=true]) { color:rgba(var(--blackRGB), 0.87); border:2px solid rgba(var(--blackRGB), 0.87); } .shrinkable { will-change:height; transition:height 150ms var(--sharpEasing)!important; } .shrinkable[aria-expanded=false] { height:0!important; padding:0!important; margin:0!important; border-width:0!important; outline:0!important; overflow-y:hidden!important; } .snackBars { position:fixed; bottom:0; left:0; right:0; margin:auto; padding-inline:16px; min-width:344px; width:fit-content; min-height:48px; height:auto; max-height:68px; transform:translateY(300%); opacity:0; visibility:hidden; background-color:rgb(var(--blackRGB)); color:rgb(var(--whiteRGB-std)); font:var(--body2_font); letter-spacing:var(--body2_spacing); font-weight:400; flex:none; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-radius:4px; will-change:opacity, transform; transition:transform 350ms var(--accelerateEasing), opacity 100ms linear; } @media only screen and (max-width:599px) { .snackBars { margin:0 4px; } } .snackBars:is([aria-hidden=false], .open) { z-index:30; transform:translateY(0)!important; opacity:1; visibility:visible; will-change:transform, opacity; transition:transform 250ms var(--decelerateEasing) 100ms, opacity 150ms linear 100ms; } .snackBars > div { padding:8px 8px 8px 0; } .snackBars > div:last-child { padding:0; font-size:40px; line-height:26px; font-weight:400; width:24px; height:24px; text-align:center; margin-left:8px; } .snackBars.info { position:absolute; z-index:10; bottom:36px; left:38px; display:none; opacity:0; visibility:hidden; } [data-svg] > svg { flex:none; width:100%; height:100%; fill:rgba(var(--blackRGB), 0.54); transition:fill 75ms var(--sharpEasing); } [data-svg]:is(:hover,:focus,:active,[aria-selected=true],.avatar) > svg { fill:rgba(var(--blackRGB), 0.87); } [data-svg] { flex:none; width:24px; height:24px; will-change:opacity, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition); } [data-svg].avatar { width:40px; height:40px; border-radius:50%; padding:0; } [data-svg].squareImg { width:56px; height:56px; border-radius:0; padding:0; } [data-svg].thumbnail, img.thumbnail { flex:none; position:relative; width:100px; height:64px; border-radius:0; padding:0; object-fit:cover; object-position:left center; } [data-svg].thumbnail:hover, img.thumbnail:hover { z-index:8; height:auto; left:-4px; top:-4px; margin-right:-8px; box-sizing:content-box; border:4px solid white; border-radius:4px; box-shadow:var(--boxShadow_z6); } [data-svg].icon { width:40px; height:40px; border-radius:50%; padding:calc((40px - 24px)/2); } [data-svg].icon.mini { width:40px; height:40px; border-radius:50%; padding:calc((40px - 18px)/2); } [data-svg].icon:not(.flat):hover { box-shadow:var(--hover4White); } [data-svg].icon:not(.flat):focus { box-shadow:var(--focus4White); } [data-svg].icon:not(.flat):active { box-shadow:var(--active4White); } input[type=file]:hover + [data-svg] { box-shadow:var(--hover4White); } input[type=file]:focus + [data-svg] { box-shadow:var(--focus4White); } input[type=file]:active + [data-svg] { box-shadow:var(--active4White); } input[type=file]:is(:hover,:focus,:active) + [data-svg] > svg { fill:rgba(var(--blackRGB), 0.87); } [data-svg].white > svg { fill:rgba(var(--whiteRGB-std), 0.7); } [data-svg].white:is(:hover,:focus,:active) > svg { fill:rgb(var(--whiteRGB-std)); } [data-svg].icon.white:not(.flat):hover { box-shadow:var(--hover4Color); } [data-svg].icon.white:not(.flat):focus { box-shadow:var(--focus4Color); } [data-svg].icon.white:not(.flat):active { box-shadow:var(--active4Color); } #svgClose[data-svg] { position:absolute; top:0; right:0; } #svgClose[data-svg]:is(:hover,:focus,:active) { box-shadow:var(--hover4White)!important; } [data-svg].addOnIcon { position:relative; z-index:5; margin:0!important; width:100%; height:0; padding:0!important; } [data-svg].addOnIcon.valid + [data-svg] > svg { fill:rgb(var(--primaryColor))!important; filter:brightness(0.87)!important; } [data-svg].addOnIcon > svg { position:absolute; margin:0!important; top:20px; right:18px; width:18px; height:18px; border-radius:50%; box-shadow:0 0; padding:1px 1px 0 1px!important; border:0; fill:rgba(var(--whiteRGB-std), 0.7); } [data-svg].maxi { width:56px; height:56px; padding:calc((56px - 32px)/2); } [data-svg].red > svg { fill:rgba(var(--redRGB), 0.7); } [data-svg].red:is(:hover,:focus,:active) > svg { fill:rgb(var(--redRGB)); } [data-svg].important::after { content:attr(aria-label); width:18px; height:18px; } [data-svg][aria-label] { flex-flow:column nowrap; align-items:center; justify-content:center; flex:none; display:flex; padding:0; } [data-svg][aria-label] > svg { width:24px; height:24px; } [data-svg][aria-label] + [data-svg] { margin-bottom:11px; } [data-svg][aria-label]::after { content:attr(aria-label); font:var(--overline_font); letter-spacing:var(--overline_spacing); text-transform:uppercase; font-weight:700; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } :is([role=listbox],.zExpansion):is([aria-expanded],[aria-expanded=false]) { position:absolute; z-index:0; opacity:0; visibility:hidden; transform:scale(0.8); padding:8px 0; will-change:visibility, opacity, transform; transition:opacity 30ms linear, transform 120ms var(--decelerateEasing), visibility 5ms linear 150ms; } :is([role=listbox],.zExpansion):is([aria-expanded],[aria-expanded=true]):not(:empty) { z-index:16; opacity:1; visibility:visible; transform:scale(1); transition:opacity 30ms linear, transform 120ms var(--decelerateEasing); } [role=menu][aria-expanded=false] { position:absolute; z-index:0; opacity:0; visibility:hidden; transform:scale(0.8); padding:8px 0; will-change:visibility, opacity, transform; transition:opacity 30ms linear, transform 120ms var(--decelerateEasing), visibility 5ms linear 150ms; } [role=menu][aria-expanded=true]:not(:empty) { position:absolute; z-index:25; opacity:1; visibility:visible; transform:scale(1); transition:opacity 30ms linear, transform 120ms var(--decelerateEasing); } /* ================----->>> TOOLTIPS & BADGES COMPONENT <<<-----================ *\ \* =========================================================================================== */ @media only screen and (min-width:600px) { [data-tooltip], [data-badge] { position:relative; } [data-tooltip]:hover { z-index:10; } [data-tooltip]::after { opacity:0; visibility:hidden; width:0; height:0; z-index:0; position:absolute; white-space:nowrap; line-height:23px; text-align:center; color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--blackRGB)); padding:0 8px; border-radius:2px; text-transform:none; } [data-tooltip]:not([aria-pressed=true]):hover::after { content:attr(data-tooltip); opacity:1; visibility:visible; width:fit-content; height:24px; z-index:10; top:calc(100% + 4px); left:50%; transform:translateX(-50%); } [data-tooltip][aria-selected=false]:hover::after { content:'Activer '+attr(data-tooltip); } [data-tooltip][aria-selected=true]:hover::after { content:'Désactiver '+attr(data-tooltip); } [data-tooltip][data-tooltip-align=right]:hover::after { left:unset; right:-8px; transform:translateX(0); } [data-tooltip][data-tooltip-align=left]:hover::after { left:-8px; transform:translateX(0); } [data-tooltip][data-tooltip-align=top-left]:hover::after { top:calc(-100% + 8px); left:-8px; transform:translateX(0); } [data-tooltip][data-tooltip-align=top]:hover::after { top:calc(-100% + 8px); left:8px; transform:translateX(0); } } [data-badge]::before { z-index:2; box-sizing:content-box; content:attr(data-badge); font:var(--caption_font); min-width:10px; width:fit-content; min-height:13px; height:auto; line-height:13px; padding:2.5px 4px 2.5px 4px; box-shadow:inset 0 0 0 15px rgb(var(--redRGB)); position:absolute; top:-1px; left:21px; letter-spacing:-0.02em; font-weight:700; text-align:center; border-radius:10px; border:1px solid transparent; color:rgb(var(--whiteRGB-std)); } [data-badge=important]::before { content:'!'; font-size:12px; font-family:sans-serif; min-width:10px; width:fit-content; min-height:13px; height:auto; line-height:1; padding:1px 2.5px; box-shadow:inset 0 0 0 15px rgb(var(--redRGB)); top:4px; left:20px; font-weight:900; color:white; /*color:rgb(var(--whiteRGB-std));*/ } [data-badge=0]::before { display:none; content:unset; font-size:12px; font-family:sans-serif; min-width:10px; width:fit-content; min-height:13px; height:auto; line-height:1; padding:1px 2.5px; box-shadow:inset 0 0 0 15px rgb(var(--redRGB)); top:4px; left:20px; font-weight:900; color:white; /*color:rgb(var(--whiteRGB-std));*/ } [data-mini-badge=important]::before { z-index:2; box-sizing:content-box; content:'!'; font-size:9px; font-family:sans-serif; letter-spacing:0; font-weight:900; min-width:13px; width:fit-content; min-height:13px; height:auto; line-height:12px; padding:0; box-shadow:inset 0 0 0 15px rgb(var(--redRGB)); position:absolute; top:4px; left:24px; text-align:center; border-radius:10px; border:1px solid transparent; color:white; } li:hover .icon[data-badge]::before, .icon.white[data-badge]::before { z-index:10; background-color:transparent; backdrop-filter:brightness(0.5) contrast(0); } /* ------------------------------------------------------------------------------------------- *\ \* =========================================================================================== */ /* ================----->>> CARD COMPONENT <<<-----================ *\ \* ============================================================================== */ .card { height:fit-content; overflow-y:auto; max-height:min(calc(100vh - 72px), 560px); width:100%; max-width:min(calc(100vw - 16px), 560px); padding:0; border-radius:8px; background-color:rgb(255,255,255); box-shadow:var(--boxShadow_z1); border:1px solid rgba(var(--blackRGB), 0.12); user-select:none; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .card[role=dialog] { z-index:24; position:fixed; top:58px; right:0; bottom:0; left:0; margin:10vh auto auto auto; box-shadow:var(--boxShadow_z24); } .card:hover { box-shadow:var(--boxShadow_z8); } .card > .headerCard { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; padding:16px; will-change:opacity; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition)!important; } .card > .headerCard > .textBlock { display:flex; flex:1; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; order:2; } .card > .headerCard > .textBlock > .title { font:var(--h5_font); letter-spacing:var(--h5_spacing); line-height:1; padding-top:calc(34px - 1em); } .card > .headerCard > .textBlock > .body { font:var(--body1_font); letter-spacing:var(--body1_spacing); line-height:1; padding-top:calc(22px - 1em); } .card > .headerCard > .thumbnail { flex:none; width:80px; height:80px; margin:16px 0; order:3; } .card > .headerCard > .thumbnail * { margin:0!important; } .card > .headerCard > .icon { flex:none; width:56px; height:56px; margin:0; padding:12px!important; order:10; box-shadow:unset!important; border-radius:50%; background-color:rgba(var(--blackRGB), 0.08); } .card > .headerCard > .icon * { width:100%; height:100%; margin:0!important; } .card .wrapperBtnForm > button:first-of-type { color:rgba(var(--blackRGB), 0.6); } .card[role=dialog] .wrapperBtnForm { margin-block:32px 0; } .card[role=dialog] .wrapperBtnForm > button:first-of-type { color:rgba(var(--blackRGB), 0.87); font:var(--subtitle2_font); margin-inline:0 auto; font-size:14px; } .card > form { max-width:unset; padding:16px 16px 0 16px; } .cardMini { position:relative; width:220px; height:100%; aspect-ratio:1 / 1; margin:8px auto; padding:0; border-radius:4px; background-color:rgb(255,255,255); box-shadow:var(--boxShadow_z1); border:1px solid rgba(var(--blackRGB), 0.12); user-select:none; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .cardMini:hover { box-shadow:var(--boxShadow_z8); } .cardMini > .mediaArea { height:calc(100% - 48px); width:100%; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; } .cardMini > .actionArea { flex:none; width:100%; height:48px; padding:0 8px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .cardMini > .actionArea > .textBlock { flex:1; display:flex; } .cardMini > .actionArea > .iconBlock { flex:none; display:flex; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; } .cardMini > .actionArea > .iconBlock > .icon { flex:none; width:40px; height:40px; margin:8px; } .cardImg_16_9 { position:relative; width:344px; height:fit-content; margin:8px auto; padding:0; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:center; border-radius:4px; background-color:rgb(255,255,255); box-shadow:var(--boxShadow_z2); border:1px solid rgba(var(--blackRGB), 0.12); user-select:none; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .cardImg_16_9:hover { box-shadow:var(--boxShadow_z8); } .cardImg_16_9 > .mediaArea { flex:none; width:100%; aspect-ratio:16 / 9; height:100%; } .cardImg_16_9 > .actionArea { flex:none; width:100%; height:56px; padding:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .cardImg_16_9 > .actionArea > .textBlock { flex:1; padding-left:16px; display:flex; justify-content:flex-start; } .cardImg_16_9 > .actionArea > .iconBlock { flex:none; width:fit-content; padding-right:16px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; } .cardImg_16_9 > .actionArea > .iconBlock > [data-svg] { flex:none; width:40px; height:40px; margin:8px 0 8px 24px; } .cardImg_1_1 { position:relative; width:344px; flex:none; /*aspect-ratio:1 / 1;*/ height:calc(194px + 71px); margin:0 8px 24px 8px; padding:0; border-radius:4px; background-color:rgb(255,255,255); box-shadow:var(--boxShadow_z2); border:0 solid rgba(var(--blackRGB), 0.12); user-select:none; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .cardImg_1_1:hover { box-shadow:var(--boxShadow_z8); } .cardImg_1_1 > .mediaArea { position:absolute; top:-1px; left:-1.5px; width:347px; height:260px; display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; overflow:hidden; border-radius:4px; } .cardImg_1_1 > .mediaArea > div { flex:none; /*width:68px; aspect-ratio:3 / 4;*/ width:86px; aspect-ratio:1; filter:sepia(0.8); border:0.5px solid rgb(var(--whiteRGB-std)); opacity:0.76; } .cardImg_1_1 > .mediaArea > div > img { flex:none; width:100%; height:100%; object-fit:cover; } .cardImg_1_1 > .scrim { position:absolute; bottom:0; left:0; flex:none; width:100%; height:fit-content; color:rgb(var(--whiteRGB-std)); border-radius:0 0 4px 4px; border-top:6px solid rgba(var(--blackRGB-std), 0); background-color:rgba(var(--blackRGB-std), 0.5); backdrop-filter:saturate(0.3) blur(2px); } .cardImg_1_1 > .scrim > .textBlock { flex:none; display:block; width:100%; height:fit-content; padding:6px 16px 0 16px; } .cardImg_1_1 > .scrim:hover > .textBlock { padding-top:10px; transition:padding 200ms var(--standardEasing); } .cardImg_1_1 > .scrim > .textBlock > .h5 { line-height:19px; padding-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cardImg_1_1 > .scrim > .textBlock > .body2 { height:15px; line-height:11px; padding-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cardImg_1_1 > .scrim > .actionArea { flex:none; height:48px; margin:8px 0 -48px 0; opacity:0; visibility:hidden; width:100%; padding:0 8px 8px 8px; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; transition:margin 150ms var(--standardEasing), opacity 100ms var(--standardEasing); } .cardImg_1_1 > .scrim:hover > .actionArea { margin:0; opacity:1; visibility:visible; transition:margin 200ms var(--standardEasing), opacity 150ms var(--standardEasing) 50ms; } .cardImg_1_1 > .scrim > .actionArea > [data-svg]:not(:last-child) { flex:none; margin-right:8px; } /* ------------------------------------------------------------------------------ *\ \* ============================================================================== */ :is(.dialog,.card,[role=dialog])[aria-expanded] { opacity:0; visibility:hidden; transform:scale(0.8); pointer-events:all; user-select:none; z-index:0; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); will-change:opacity,transform; transition:opacity 45ms linear, visibility 5ms linear 200ms, transform 150ms var(--decelerateEasing); } :is(.dialog,.card,[role=dialog])[aria-expanded=true] { opacity:1; visibility:visible; transform:scale(1); z-index:24; will-change:opacity,transform; transition:opacity 45ms linear, transform 150ms var(--decelerateEasing); } #_dialogBasket { max-width:50vw; max-height:75dvh; } /* ================----->>> DIALOG COMPONENT <<<-----================ *\ \* ================================================================================ */ .dialog { position:fixed; flex:none; z-index:24; top:0; right:32px; bottom:0; left:32px; margin:auto; height:fit-content; max-height:calc(100vh - 56px); width:100%; max-width:min(calc(100vw - 24px), 560px); background-color:rgb(255,255,255); text-align:left; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; border-radius:8px; box-shadow:var(--boxShadow_z24); } .dialog.leadingIcon { width:min(calc(100vw - 16px), calc(560px + 68px)); } @media only screen and (max-width:599px) { .dialog { border-radius:16px; top:0; right:0; bottom:0; left:0; margin-top:auto!important; margin-left:auto!important; margin-bottom:auto!important; margin-right:auto!important; } } .dialog > .topBar { position:relative; flex:none; width:100%; height:27px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); background-color:rgba(var(--blackRGB), 0.04); padding:0; } .dialog > .topBar::before { content:'\030A0'; position:absolute; left:-4px; top:-6px; width:20px; height:20px; padding:8px; text-align:center; line-height:20px; font-size:30px; font-weight:500; color:rgba(var(--blackRGB), 0.42) } .dialog > .topBar::after { content:'\000D7'; position:absolute; right:-4px; top:-6px; width:20px; height:20px; padding:8px; text-align:center; line-height:20px; font-size:30px; font-weight:500; color:rgba(var(--blackRGB), 0.42) } .dialog > .header { flex:none; height:60px; padding-inline:16px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(var(--blackRGB), 0.12); } .dialog > .header > :is(.title,h1) { flex:1; line-height:1!important; padding:calc(40px - 1em) 8px 0 8px; font:var(--h6_font); letter-spacing:var(--h6_spacing); font-weight:400; align-self:flex-start; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } .dialog.leadingIcon > .header > :is(.title,h1) { padding-left:52px; } .dialog > .header > :is(.title,h1) > div:not(.h7, .subtitle1) { padding-inline:8px; font:var(--body2_font); letter-spacing:var(--body2_spacing); } .dialog > .header > .iconHolder { flex:none; height:40px; line-height:40px; margin-block:4px 0; width:fit-content; align-self:flex-start; display:flex; font-weight:500; } .dialog > .header > .iconHolder > [data-svg] { margin-inline-start:4px; width:40px; height:40px; border:2px solid transparent; padding:calc((40px - 4px - 20px) / 2); } .dialog > .header > .iconHolder > [data-svg] > svg { fill:rgba(var(--blackRGB),.87); } .dialog > .header > .headerInput { margin:auto 8px 0 8px; background-color:transparent; border-color:rgba(var(--blackRGB), 0.12); } .dialog > .header > .headerInput > :is(input, input::placeholder, label) { font:var(--h5_font)!important; letter-spacing:var(--h5_spacing)!important; line-height:48px!important; } .dialog > .mainContent::-webkit-scrollbar-thumb{ border-color:white!important; } .dialog > .mainContent { flex:1; padding:8px 16px 16px 24px; margin:1px 0; overflow-y:auto; } .dialog > .mainContent > div { position:relative; margin-inline:0 auto; padding-inline:8px 4px; } @media only screen and (max-width:599px) { .dialog > .mainContent > div { max-width:unset!important; } } .dialog > .mainContent > div > :is(form,ul) { flex:none; width:100%; padding:0; margin:0; } .dialog > .mainContent > div > form > section { position:relative; z-index:1; flex:none; width:calc(100% - 8px); margin:0; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; } .dialog > .mainContent > div > form > section:is(:focus,:focus-within,:active) { z-index:8; } .dialog.leadingIcon > .mainContent > div > form > section { width:100%; } .dialog > .mainContent > div > form > section > div.title { display:block; flex:none; width:100%; font:var(--body1_font); letter-spacing:var(--body1_spacing); line-height:1; padding-block:calc(36px - 1em) 14px; align-self:flex-start; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } .dialog.leadingIcon > .mainContent > div > form > section > div.leadingIcon { display:block; position:absolute; top:0; left:-48px; width:40px; height:40px; margin:4px 0; padding:8px 8px 8px 0;} .dialog.leadingIcon > .mainContent > div > form > section > div.leadingIcon > svg { fill:rgba(var(--blackRGB), 0.76); } .dialog > .mainContent > div > form > section:first-of-type > div.title { padding-block:0 14px; } .dialog > .footer:empty { display:none; } .dialog > .footer { flex:none; height:52px; padding:8px 8px 8px 24px; display:flex; flex-flow:row wrap; justify-content:flex-end; align-items:center; text-align:right; box-shadow:var(--boxShadow_z2); } .dialog > .footer > button.text:not(:last-of-type) { font-weight:600; margin-right:24px; /*color:rgba(var(--blackRGB), 0.58);*/ } .dialog > .footer > button.text:last-of-type { margin-right:4px; font-weight:600; } .dialog.warn { z-index:26; min-height:120px; height:fit-content; max-height:30vh; border-radius:16px; box-shadow:0px 11px 15px -7px rgba(0,0,0, 0.2), 0px 24px 38px 3px rgba(0,0,0, 0.14), 0px 9px 46px 8px rgba(0,0,0, 0.12), 0 0 0 2000px rgba(0,0,0, 0.2); } .dialog.warn > .mainContent { flex:1; padding:24px 24px 8px 24px; border-bottom:0 solid transparent; font:var(--body1_font); font-weight:500; line-height:1.4; } .dialog.warn > div:last-child { box-shadow:0 0; } /*@media only screen and (min-width:1280px) { .dialog { width:560px; min-height:182px; } } @media only screen and (max-width:599px) { .dialog { height:100vh!important; max-height:100vh!important; width:100vw!important; max-width:100vw!important; margin:0; border-radius:0; } .dialog > .header { padding:0 8px; } .dialog > .header > .iconHolder { margin:0 -8px 0 0; align-self:flex-start; } .dialog > .mainContent { padding:24px 8px 36px; } .dialog > .mainContent form { width:100%; margin:0; } .dialog > div:last-child > button.text:last-of-type { margin-right:0; } }*/ /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* ================----->>> DIALOG COMPONENT <<<-----================ *\ \* ================================================================================ */ .cardV2 > .header { flex:none; max-height:66px; padding-inline:16px 24px; padding-block:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(var(--blackRGB), 0.12); } .cardV2 > .header > .title { flex:1; line-height:1; padding-top:calc(34px - 1em); font:var(--h6_font); letter-spacing:var(--h6_spacing); align-self:flex-start; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } .cardV2 > .header > .title > div { flex:none; width:100%; font:var(--body2_font); letter-spacing:var(--body2_spacing); line-height:1; padding-top:calc(22px - 1em); } .cardV2 > .header > .title > div:empty { display:none; } .cardV2 > .header > .iconHolder { flex:none; height:40px; line-height:40px; margin-block-start:8px; width:fit-content; align-self:flex-start; display:flex; font-weight:500; } .cardV2 > .header > .iconHolder > [data-svg]:not(#svgClose) { margin-left:8px; } .cardV2 > .mainContent { flex:1; padding-inline:24px 28px; margin:16px -8px 24px 0; overflow-y:auto; /*border-bottom:1px solid rgba(var(--blackRGB), 0.12);*/ } .cardV2 > .mainContent > .subtitle { flex:none; width:100%; font:var(--body1_font); letter-spacing:var(--body1_spacing); line-height:1; padding-top:calc(36px - 1em); } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* =================----->>> LIST COMPONENT <<<-----================= *\ \* ================================================================================ */ ul, ol { padding:8px 0; margin:0; width:100%; max-width:min(100%, 100vw, 800px); flex:none; background-color:transparent; user-select:none; list-style:none; } li { z-index:0; list-style:none; position:relative; width:100%; padding:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; min-height:48px; will-change:opacity, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition), transform 200ms linear; } /*ul.noshadow > li, li.noshadow { box-shadow:unset!important; }*/ ul[role=menu] > li:hover { z-index:1; box-shadow:var(--hover4White); } ul[role=menu] > li:focus { z-index:1; box-shadow:var(--focus4White); } ul[role=menu] > li:active { z-index:1; box-shadow:var(--active4White); } li > [data-svg]:first-child, li > .b4Text > [data-svg] { flex:none; padding:0; margin:16px 8px 16px 16px; pointer-events:none; } li > [data-svg].icon:first-child, li > .b4Text > [data-svg].icon { flex:none; width:24px; height:24px; padding:0; margin:0 8px 0 0; pointer-events:all; } li > .b4Text > .avatar, li > .b4Text > .squareImg { flex:none; margin:8px; } li > .b4Text > .thumbnail { flex:none; width:100px; height:56px; margin:8px 0; } li > .textBlock { margin:0 16px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } li.twoLines { height:64px; } li.twoLines > [data-svg]:first-child, li.twoLines > .b4Text > [data-svg] { margin:16px 16px 32px 16px; } li.twoLines > .textBlock { display:flex; flex:1; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; min-height:48px; max-height:72px; margin:0 16px; order:2; } li.twoLines > .textBlock > .title { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1; padding-top:calc(28px - 1em); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } li.twoLines > .b4Text + .textBlock > .title { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1; padding-top:calc(32px - 1em); } li.twoLines > .textBlock > .body { font:var(--caption_font); line-height:1; padding-top:calc(20px - 1em); margin-bottom:16px; } li.twoLines > .textBlock > .body:empty { display:none; } li.threeLines > .textBlock { display:flex; flex:1; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; height:88px; margin:0 16px; order:2; } li.threeLines > .textBlock > .overline { font:var(--overline_font); line-height:var(--overline_height); padding-top:calc(28px - var(--overline_height)); } li.threeLines > .textBlock > .title { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1; padding-top:calc(28px - 1em); } li.threeLines > .textBlock > .overline + .title { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); line-height:1em; padding-top:calc(20px - 1em); } li.threeLines > .textBlock > .body { font:var(--caption_font); line-height:1; padding-top:calc(20px - 1em); } li > .textBlock + div { flex:none; width:fit-content; margin:0 16px 0 0; display:flex; order:3; } li.threeLines > .textBlock + div { height:88px; padding-block-start:16px; } details { width:100%; padding:0; height:48px; max-height:fit-content; margin-block-end:16px; overflow:hidden; transition:height 250ms linear, margin 250ms linear; } details:not([open]):hover { box-shadow:var(--hover4White); } details[open] { height:96px; margin-block-end:36px; } details > summary { list-style:none; position:relative; width:100%; padding:0; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; min-height:48px; height:48px; } details > summary > div:first-child { margin-left:8px; } details > summary > .icon { margin-right:16px; transition:transform 150ms linear; } details[open] > summary > .icon { transform:rotate(90deg); } details > summary > .textBlock { display:flex; flex:1; height:48px; margin:0 16px; } @media only screen and (max-width:599px) { li.twoLines > .textBlock { margin-left:4px; } } ul[role=menu] { right:36px; top:44px; transform-origin:top right; box-shadow:var(--boxShadow_z8); width:fit-content; min-width:112px; max-width:320px; padding:8px 0; margin:0; background-color:rgb(255,255,255); border:1px solid rgba(var(--blackRGB), 0.12); } ul[role=menu] > li { height:40px!important; padding:0 16px 0 4px; margin:0; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; font:var(--body2_font)!important; letter-spacing:var(--sbody2_spacing)!important; line-height:40px; } ul[role=menu] > li > [data-svg] { width:40px!important; height:40px!important; padding:calc((40px - 20px)/2)!important; margin:0 8px 0 0; } :is(#aboutPickup,#aboutProduct) > li { min-height:40px; height:40px!important; padding:0 8px 0 16px; margin:0; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; font:var(--body2_font)!important; letter-spacing:var(--sbody2_spacing)!important; line-height:40px; } :is(#aboutPickup,#aboutProduct) > li > [data-svg] { width:40px!important; height:40px!important; padding:calc((40px - 20px)/2)!important; margin-block:unset; margin-inline:0 12px; pointer-events:all; } :is(#aboutPickup,#aboutProduct) > li > [data-svg] > svg { fill:rgba(var(--blackRGB), 0.87); } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* =================----->>> BUTTON COMPONENT <<<-----================= *\ \* ================================================================================== */ :is(button,[role=button]) { font:var(--button_font); letter-spacing:var(--button_spacing); text-transform:uppercase; appearance:none; -webkit-appearance:unset; user-select:none; flex:none; white-space:nowrap; min-width:64px; height:36px; border:unset; border-radius:4px; cursor:pointer; will-change:opacity, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition); } :is(button,[role=button]) { padding:0 16px; color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--primaryColor)); box-shadow:var(--boxShadow_z2); } :is(button,[role=button]).minVer { font:var(--subtitle1_font); letter-spacing:normal; text-transform:unset; box-shadow:0 0; } :is(button,[role=button]).outlined { color:rgb(var(--primaryColor)); background-color:transparent; border:1px solid rgb(var(--primaryColor)); box-shadow:0 0; } :is(button,[role=button]).text { padding:0 8px; color:rgb(var(--primaryColor)); background-color:transparent; box-shadow:0 0; } button.text:before { transform:scale(0); transform-origin:center; } :is(button,[role=button]).contained:hover { box-shadow:var(--boxShadow_z4), var(--hover4Color); } :is(button,[role=button]).contained:focus { box-shadow:var(--boxShadow_z4), var(--focus4Color); } :is(button,[role=button]).contained:active { box-shadow:var(--boxShadow_z8), var(--activate4Color); } :is(button,[role=button]):is(.outlined,.text):hover { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.04); } :is(button,[role=button]):is(.outlined,.text):focus { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.12); } :is(button,[role=button]):is(.outlined,.text):active { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.12); } :is(button,[role=button]) > [data-svg] { width:18px; height:18px; margin-right:8px; } :is(button,[role=button]) > [data-svg] > svg { fill:rgb(var(--whiteRGB-std)); } :is(button,[role=button]):is(.outlined, .text) > [data-svg] > svg { fill:rgb(var(--primaryColor)); } @media only screen and (min-width:600px) { :is(button,[role=button]) { padding:0 20px; } } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* ================----->>> FLOATING ACTION BUTTON <<<-----================ *\ \* ====================================================================================== */ button.FAB, [role=button].FAB { color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--yellowRGB)); aspect-ratio:1; z-index:6; min-width:40px; min-height:40px; max-width:56px; max-height:56px; width:56px; height:56px; border-radius:50%; padding:calc((56px - 24px)/2); box-shadow:var(--boxShadow_z4); } button.FAB.red, [role=button].FAB.red { color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--redRGB)); } button.FAB.default, [role=button].FAB.default { color:rgba(var(--blackRGB), 0.87); border:1px solid rgba(var(--blackRGB), 0.12); background-color:transparent; } button.FAB > [data-svg] , [role=button].FAB > [data-svg] { width:24px; height:24px; margin-right:12px; } button.FAB:hover, [role=button].FAB:hover { box-shadow:var(--boxShadow_z6), var(--hover4Color); } button.FAB:is(:focus, :active), [role=button].FAB:is(:focus, :active) { box-shadow:var(--boxShadow_z8), var(--focus4Color); } button.FAB.ext, [role=button].FAB.ext { flex:none; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; aspect-ratio:unset; overflow:hidden; width:48px; height:48px; max-width:48px; border-radius:24px; padding:0 20px 0 12px; font-weight:600; transition:width 250ms var(--standardEasing), var(--opacityTransition), var(--boxShadowTransition); } button.FAB.ext:hover, [role=button].FAB.ext:hover { box-shadow:var(--boxShadow_z6), var(--hover4Color); width:fit-content; max-width:264px; transition:max-width 300ms var(--standardEasing), var(--opacityTransition), var(--boxShadowTransition); } button.FAB.shortElevation { box-shadow:var(--boxShadow_z1); } button.FAB.shortElevation:hover { box-shadow:var(--boxShadow_z2), var(--hover4Color); } button.FAB.shortElevation:is(:focus, :active) { box-shadow:var(--boxShadow_z4), var(--focus4Color); } .multiFAB { 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; } .multiFAB > button { position:absolute!important; top:0; left:0; margin:0!important; opacity:0; visibility:hidden; pointer-events:none; box-shadow:var(--boxShadow_z4)!important; } .multiFAB > button:first-child, .multiFAB > button:first-child svg { opacity:1; visibility:visible; pointer-events:all; transform:rotate(0deg); transition:transform 150ms var(--sharpEasing)!important; box-shadow:0 0!important; } .multiFAB[aria-expanded=true] > button:first-child svg { z-index:5!important; transform:rotate(135deg); transition:transform 150ms var(--sharpEasing)!important; } .multiFAB[aria-expanded=true] > button:nth-child(2) { z-index:4!important; opacity:1; visibility:visible; pointer-events:all; transform:translateY(calc(100% + 8px)); transition:transform 275ms var(--standardEasing) 10ms, var(--boxShadowTransition), var(--opacityTransition)!important; } .multiFAB[aria-expanded=true] > button:nth-child(3) { z-index:3!important; opacity:1; visibility:visible; pointer-events:all; transform:translateY(calc(200% + 16px)); transition:transform 500ms var(--standardEasing) 10ms, var(--boxShadowTransition), var(--opacityTransition)!important; } .multiFAB[aria-expanded=true] > button:nth-child(4) { z-index:2!important; opacity:1; visibility:visible; pointer-events:all; transform:translateY(calc(300% + 24px)); transition:transform 725ms var(--standardEasing) 10ms, var(--boxShadowTransition), var(--opacityTransition)!important; } #wrapperAddBtn { z-index:6; position:fixed; bottom:98px; right:calc((100% - var(--mainWidth)) / 2); } /* -------------------------------------------------------------------------------------- *\ \* ====================================================================================== */ /* ================----->>> ALL INPUTS TYPE & LABELS <<<-----================ *\ \* ======================================================================================== */ form { max-width:calc(min(100%, 100vw)); width:100%; flex:none; user-select:none; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; color:rgba(var(--blackRGB), 0.87); margin-inline:auto; margin-block:0; } .inputWrapper { position:relative; height:48px; width:100%; border-bottom:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.04); margin-bottom:24px; border-radius:4px 4px 0 0; will-change:border, transform, opacity, box-shadow; transition:border 100ms var(--standardEasing), background-color 75ms var(--standardEasing), var(--opacityTransition), var(--boxShadowTransition); } .inputRadioWrapper { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); width:100%; height:48px; margin-bottom:16px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; } .inputRadioWrapper > div { margin-right:16px; } @media only screen and (max-width:599px) { .inputWrapper { width:100%!important; } } .inputWrapper ::placeholder { opacity:0; } .inputWrapper:hover { background-color:rgba(var(--blackRGB), 0.08); border-color:rgba(var(--blackRGB), 0.87); } .inputWrapper:is(:focus, :focus-within, :active):not([readonly=readonly]) { background-color:rgba(var(--blackRGB), 0.12); border-color:rgb(var(--primaryColor)); caret-color:rgb(var(--primaryColor)); } .inputWrapper::after { height:2px; background-color:rgb(var(--primaryColor)); content:''; position:absolute; opacity:0; left:0; right:0; bottom:-1px; width:0; margin:0 auto; z-index:0; will-change:width, opacity; transition:/*width 75ms var(--standardEasing),*/ opacity 150ms linear; } .inputWrapper:is([aria-invalid=true],.error,.invalid)::after { height:2px; background-color:rgb(var(--redRGB)); border-color:rgb(var(--redRGB)); } .inputWrapper:is(:focus,:focus-within,:active):not([readonly=readonly])::after { width:100%; opacity:1; will-change:width, opacity; transition:width 150ms var(--standardEasing), opacity 30ms linear; } .inputWrapper > :is(input,select,div[contenteditable=true]) { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); z-index:1; position:absolute; top:0; left:0; appearance:none; -webkit-appearance:unset; width:100%; height:48px; line-height:1; padding-block:calc(40px - 1em) 8px; padding-inline:16px 12px; border-radius:4px 4px 0 0; border:none; background-color:transparent; color:rgba(var(--blackRGB), 0.87); outline-style:none; text-align:left; } .inputWrapper > label { padding-top:calc(24px - .5em); color:rgba(var(--blackRGB), .6); z-index:0; position:absolute; left:16px; top:0; height:48px; line-height:1em!important; width:fit-content; max-width:calc(100% - 16px); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 175ms linear; } .inputWrapper:is(:focus,:focus-within,:active):not([readonly=readonly]) > label, .inputWrapper > :is(select,input,div[contenteditable=true]):is(:focus,:active) + label { color:rgb(var(--primaryColor)); font:var(--caption_font); letter-spacing:var(--caption_spacing); padding-top:calc(20px - 1em); } .inputWrapper > select:is(:required:valid,[aria-selected=true]) + label { font:var(--caption_font); letter-spacing:var(--caption_spacing); padding-top:calc(20px - 1em); } .inputWrapper > input:is(:required:valid,:not(:placeholder-shown)) + label { font:var(--caption_font); letter-spacing:var(--caption_spacing); padding-top:calc(20px - 1em); } .inputWrapper > input:is(:-webkit-autofill,:-internal-autofill-selected) + label { font:var(--caption_font); letter-spacing:var(--caption_spacing); padding-top:calc(20px - 1em); z-index:1; height:unset; } .inputWrapper > div[contenteditable=true]:not(:empty) + label { font:var(--caption_font); letter-spacing:var(--caption_spacing); padding-top:calc(20px - 1em); } .inputWrapper > :not(:required) + label > sup { display:none; } .inputWrapper > label + div.caption { position:absolute; top:48px; right:8px; padding-top:4px; line-height:1; color:rgba(var(--blackRGB), 0.87); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } /*.inputWrapper:is([readonly],[readonly=readonly],:disabled), .inputWrapper:is([readonly],[readonly=readonly],:read-only,:disabled) > * { pointer-events:none; }*/ .inputWrapper:is([readonly],[readonly=readonly],:disabled) { z-index:24; pointer-events:none; } form:is([data-updating=true],.updating) .inputWrapper, .inputWrapper:is(.updating,.headerInput) { background-color:transparent; border-color:rgba(var(--blackRGB), 0.12); } form:is([data-updating=true],.updating) .inputWrapper:hover, .inputWrapper:is(.updating,.headerInput):hover { background-color:rgba(var(--blackRGB), 0.04); border-color:rgba(var(--blackRGB), 0.52); } form:is([data-updating=true],.updating) .inputWrapper > :is(input,select), .inputWrapper:is(.updating,.headerInput) > :is(input,select) { height:48px; padding-block:0; } form:is([data-updating=true],.updating) .inputWrapper:is(:focus-within,:active), .inputWrapper:is(.updating,.headerInput):is(:focus-within,:active) { background-color:rgba(var(--blackRGB), 0.08); border-color:rgba(var(--blackRGB), 0.87); } form:is([data-updating=true],.updating) .inputWrapper > label, .inputWrapper:is(.updating,.headerInput) > label { padding:0!important; font:var(--subtitle1_font)!important; letter-spacing:var(--subtitle1_spacing)!important; color:rgba(var(--blackRGB), .6)!important; height:48px!important; line-height:48px!important; transition:all 0 linear!important; } form:is([data-updating=true],.updating) .inputWrapper > input:not(:placeholder-shown) + label, .inputWrapper:is(.updating,.headerInput) > input:not(:placeholder-shown) + label { opacity:0; } form:is([data-updating=true],.updating) .inputWrapper > select:is(:required:valid,[aria-selected=true]) + label, .inputWrapper:is(.updating,.headerInput) > select:is(:required:valid,[aria-selected=true]) + label { opacity:0; } /*:-internal-autofill-previewed*/ .inputWrapper > input[type=text]:not([role=combobox]):read-only, input[type=text][readonly=readonly], input:disabled, select:disabled, input:disabled + label, select:disabled + label { pointer-events:none; } .inputWrapper > input:is(:-webkit-autofill,:-internal-autofill-selected,:-webkit-autofill:focus,:-webkit-autofill:hover) { font:var(--subtitle1_font)!important; color:rgba(var(--blackRGB), 0.87); border-color:rgba(var(--blackRGB), 0.87); -webkit-text-fill-color:rgba(var(--blackRGB), 0.87); box-shadow:inset 500px 40px 10px 500px rgb(244,244,246)!important; padding-block-end:6px; height:46px; } .inputWrapper > :is(select,input:not([type=radio],[type=checkbox]))[aria-invalid=true] { border-color:rgb(var(--redRGB))!important; } .inputWrapper[aria-invalid=true] > :is(select, input:not([type=radio],[type=checkbox])) + label { color:rgb(var(--redRGB))!important; /*top:calc(20px - 1em);*/ z-index:1; } .inputWrapper[aria-invalid=true] > input + [data-thumbnail] { border:2px solid rgb(var(--redRGB))!important; } .inputWrapper[aria-invalid=true] > input:is([type=radio], [type=checkbox]) { border-color:rgb(var(--redRGB))!important; } .inputsRowList { font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); width:100%; height:48px; margin-bottom:24px; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; } .wrapperCustomRadio, .wrapperCustomCheckBox { flex:none; position:relative; height:40px; width:fit-content; margin-right:8px; display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } .wrapperCustomRadio:is(:last-child,:last-of-type), .wrapperCustomCheckBox:is(:last-child,:last-of-type) { margin-right:0; } /*.wrapperCustomRadio > div, .wrapperCustomCheckBox > div:not([data-svg]) { margin-left:4px; }*/ input[role=checkbox] { position:static; flex:none; appearance:none; inline-size:22px; block-size:22px; padding:0; margin:0 8px 0 0; border:1.5px solid rgba(var(--blackRGB), 0.42); border-radius:4px; background-color:transparent; box-sizing:border-box; will-change:border-color, transform, opacity, box-shadow; transition:border-color 200ms var(--standardEasing), transform 250ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); } input[role=checkbox] + label { position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%; } input[role=checkbox]:hover + label { box-shadow:var(--hover4White); } input[role=checkbox]:not(:checked,:indeterminate):hover { border-color:rgba(var(--blackRGB), 0.87); } input[role=checkbox]:is(:checked,:indeterminate) { border-color:rgb(var(--primaryColor)); background-color:rgb(var(--primaryColor)); } input[role=checkbox]:is(:checked,:indeterminate):disabled { border-color:rgba(var(--blackRGB), 0.38); background-color:rgba(var(--blackRGB), 0.38); } input[role=checkbox]:checked::before { content:''; position:relative; top:-1px; display:block; inline-size:8px; block-size:16px; margin:1px auto; border:3px solid rgb(var(--whiteRGB-std)); border-width:0 3px 3px 0; border-radius:2px; box-sizing:border-box; transform:rotate(40deg); } input[role=checkbox]:indeterminate::before { content:''; display:block; inline-size:16px; margin:9px auto auto auto; border:1px solid rgb(var(--whiteRGB-std)); border-radius:2px; height:3px; box-sizing:border-box; } input[role=checkbox].small { inline-size:18px; block-size:18px; margin:11px; } input[role=checkbox].small:checked::before { inline-size:7px; block-size:12px; margin-left:4px; margin-top:0; } input[role=radio] { position:static; appearance:none; inline-size:21px; block-size:21px; padding:0; margin:0 8px 0 0; border:1.5px solid rgba(var(--blackRGB), 0.42); border-radius:50%; background-color:transparent; box-sizing:border-box; will-change:transform, opacity, box-shadow; transition:transform 250ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); } input[role=radio]:not(:checked):hover { border-color:rgba(var(--blackRGB), 0.87); } input[role=radio] + label { position:absolute; width:40px; height:40px; left:0; border-radius:50%; } input[role=radio]:hover + label { box-shadow:var(--hover4White); } input[role=radio]:checked { border-color:rgb(var(--primaryColor)); } input[role=radio]:checked::before { content:''; display:block; margin:3px; inline-size:12px; block-size:12px; background-color:rgb(var(--primaryColor)); border-radius:50%; box-sizing:border-box; } .wrapperCustomSwitch { flex:none; position:relative; width:40px; height:40px; padding:8px 0; margin-left:8px; } input[role=switch] { appearance:none; inline-size:36px; block-size:16px; padding:0; margin:4px; background-color:rgba(62,62,61,0.42); border-radius:10px; border:0 none; will-change:transform, opacity, box-shadow; transition:transform 350ms var(--standardEasing), opacity 200ms var(--standardEasing), var(--boxShadowTransition); } input[role=switch]:checked { background-color:rgba(var(--primaryColor),0.42); border:0 none; } input[role=switch]::before { content:''; display:block; position:relative; top:-2px; inline-size:20px; block-size:20px; margin:0; padding:0; border:0 none; border-radius:50%; box-sizing:border-box; background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z1); outline:unset!important; } input[role=switch]:checked::before { transform:translateX(calc(100% - 4px)); background-color:rgb(var(--primaryColor)); } textarea { border:0 none; border-bottom:1px solid rgba(var(--blackRGB), 0.42); color:rgba(var(--blackRGB), 0.87); padding:24px 12px 0 16px; line-height:1.2; outline-style:none; text-align:left; border-radius:4px 4px 0 0; background-color:transparent; position:relative; z-index:2; } .wrapperBtnForm { width:100%; max-width:100vw; margin:0 auto 16px auto; display:flex; flex-flow:row nowrap; justify-content:flex-end; align-items:center; } .inputWrapper > [role=listbox] { transform-origin:top center; top:48px; pointer-events:all; background:rgb(var(--whiteRGB-std))!important; border-top:1px solid rgba(var(--blackRGB), 0.12); border-radius:0 0 4px 4px; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); box-shadow:var(--boxShadow_z2); } /*transition revalidate*/ .inputWrapper > [role=listbox] > li { padding:0 8px 0 16px; height:40px; min-height:unset; max-height:unset; } .inputWrapper > [role=listbox] > li.moreResults { height:24px; cursor:none; } /* .inputWrapper > [role=listbox] { opacity:0; visibility:hidden; z-index:0; transform:scale(0.8); transform-origin:top center; position:absolute; top:48px; background:rgb(var(--whiteRGB-std))!important; border-top:1px solid rgba(var(--blackRGB), 0.12); padding:8px 0; border-radius:0 0 4px 4px; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); box-shadow:var(--boxShadow_z2); will-change:transform, opacity, visibility; transition:all 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) } .inputWrapper > [role=listbox] > li { padding:0 8px 0 16px; height:40px; min-height:unset; max-height:unset; } .inputWrapper > [role=listbox] > li.moreResults { height:24px; cursor:none; } .inputWrapper > input[role=combobox] { z-index:0; } .inputWrapper > input[role=combobox] + label { z-index:5; width:100%; } .inputWrapper > input[role=combobox] ~ [role=listbox] { opacity:0; visibility:hidden; z-index:0; transform:scale(0.8); transform-origin:top center; position:absolute; top:48px; left:0; right:0; width:100%; padding-block:8px; min-height:48px; background-color:rgb(255,255,255); will-change:opacity, transform, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition); } .inputWrapper > input[role=combobox] ~ [role=listbox] > li[role=option] { height:40px; line-height:40px; width:100%; padding-inline:16px; color:rgba(var(--blackRGB),.6); will-change:opacity, box-shadow; transition:var(--opacityTransition), var(--boxShadowTransition), var(--colorTransition); } .inputWrapper > input[role=combobox] ~ [role=listbox][aria-expanded=true] { opacity:1; visibility:visible; z-index:8; transform:scale(1); box-shadow:var(--boxShadow_z2); transition:transform 150ms var(--standardEasing), var(--boxShadowTransition); } .inputWrapper > input[role=combobox] ~ [role=listbox] > li[role=option]:hover { box-shadow:var(--hover4White); color:rgba(var(--blackRGB),.87); } .inputWrapper > input[role=combobox] ~ [role=listbox] > li[role=option]:is(:focus) { box-shadow:var(--focus4White); } .inputWrapper > input[role=combobox] ~ [role=listbox]:not(:hover,:focus) > li[role=option][default] { box-shadow:var(--focus4White)!important; } .inputWrapper > input[role=combobox] ~ [role=listbox]:hover > li[role=option][default]:hover { box-shadow:var(--hover4White); } .inputWrapper > input[role=combobox] ~ [role=listbox] > li[role=option]:is(:active,[aria-selected=true]) { box-shadow:var(--selected4White); color:rgb(var(--primaryColor)); } /*/ /* ----------------------------------------------------------------------------------------- *\ \* ========================================================================================= */ /* ==================----->>> BLOCK FOR SEARCHING <<<-----================== *\ \* ======================================================================================= */ #searchForm { position:relative; width:calc(100% - 8px); max-width:560px; height:48px; margin:8px auto; transition:opacity 320ms var(--standardEasing) 80ms; appearance:none; } #filters { flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; position:absolute; width:100%; transition:opacity 320ms var(--standardEasing) 80ms; } #filters { flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; position:absolute; width:100%; transition:opacity 320ms var(--standardEasing) 80ms; } #searchForm.moveInHeader > #filters { z-index:8; } /*#searchForm.moveInHeader { position:fixed; top:6px; left:0; right:0; margin:auto; z-index:16; }*/ #searchForm.moveInHeader { position:fixed; top:6px; left:82px; right:0; max-width:700px; margin:auto; z-index:16; } #searchForm.moveInHeader [role=search] { height:44px; padding:0; border-radius:4px; border:1px solid rgba(var(--blackRGB), 0.38); background-color:transparent; } #searchForm.moveInHeader [role=search]:is(.active,:focus-within,:focus,:active) { background-color:rgb(var(--whiteRGB-std)); box-shadow:none; transition:background-color 150ms var(--standardEasing), box-shadow 280ms var(--standardEasing); } #searchForm.moveInHeader [role=search] > [data-svg] { margin:1px 4px; } #searchForm.moveInHeader [role=search] input[role=searchbox] { height:42px; } [role=search] { z-index:24; position:relative; flex:none; width:100%; height:48px; max-height:70vh; padding-right:4px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; border-radius:4px; background-color:rgba(var(--blackRGB), 0.08); transition:height 350ms linear, background-color 200ms var(--sharpEasing), var(--boxShadowTransition); } @media only screen and (max-width:599px) { #searchForm.moveInHeader { background:white; max-width:calc(100vw - 64px); margin-right:4px; } [role=search] { width:100%; } } [role=search]:is(:focus-within,:focus,:active,:hover,.active) { background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z4); } [role=search]:is(:focus-within,:focus,:active,:hover,.active) > ul { background-color:rgb(var(--whiteRGB-std)); /*box-shadow:0px 4px 4px -1px rgba(0,0,0, 0.2), 0px 5px 5px 0px rgba(0,0,0, 0.14), 0px 10px 10px 0px rgba(0,0,0, 0.12);*/ } [role=search].active > [data-tooltip]:hover::after { opacity:0; visibility:hidden; } [role=search] > [data-svg] { margin:4px; } [role=search] input[role=searchbox] { -webkit-appearance:none; -moz-appearance:none; appearance:none; margin-left:8px; position:relative; max-width:calc(100vw - 44px - 24px); height:48px; display:inline-block; flex:1; border:unset; outline:unset; background-color:transparent; padding:0 12px 0 8px; } [role=search] input[role=searchbox]:placeholder-shown + [data-svg='/includes/images/tune.svg']:not(.alwaysOnDisplay), [role=search] input[role=searchbox]:placeholder-shown + ul + [data-svg='/includes/images/tune.svg']:not(.alwaysOnDisplay) { width:0; padding:0; opacity:0; visibility:hidden; pointer-events:none; transition:var(--opacityTransition); } [role=search] ul[role=listbox] { order:4; max-width:unset; width:100%; max-height:70vh; overflow-y:auto; background-color:rgb(var(--whiteRGB-std)); border-top:1px solid rgba(var(--blackRGB), 0.12); border-radius:0 0 4px 4px; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); display:flex; flex-flow:column nowrap; justify-content:flex-start; } [role=search] ul[role=listbox] > div.divider:first-child { display:none; } [role=search] ul[role=listbox] > li { min-height:48px; padding:0 8px 0 16px; text-align:left; cursor:default; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; color:rgba(var(--blackRGB), 0.87); } [role=search] ul[role=listbox] > li > .liContent { min-height:48px; text-align:left; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } [role=search] ul[role=listbox] > li > div.subtitle1 { flex:1; display:flex; } [role=search] ul[role=listbox] > li > div.caption { flex:none; display:flex; width:fit-content; } [role=search] ul[role=listbox] > li > div > div.icon { flex:none; display:flex; width:32px; height:32px; padding:5px; margin-right:calc(12px + 16px); margin-left:12px; border-radius:50%; background-color:transparent!important; box-shadow:0 0!important; cursor:default; } [role=search] ul[role=listbox] > li > div > div.icon > svg { width:22px; height:22px; } [role=search] ul[role=listbox] > li:hover { background-color:rgba(var(--blackRGB), 0.04); color:rgb(var(--blackRGB)); } [role=search] ul[role=listbox] > li:is(:focus,:active) { background-color:rgba(var(--blueRGB), 0.08); color:rgb(var(--blueRGB)); } li.moreResults { border-bottom:0px solid transparent; color:rgba(var(--blackRGB), 0.87); padding:8px 16px; text-align:left; cursor:none; } #listUsers { will-change:opacity,height; max-height:fit-content; transition:opacity 75ms linear, height 250ms linear 20ms; } #dropdown { margin-bottom:4px; cursor:default; } /* ----------------------------------------------------------------------------------------- *\ \* ========================================================================================= */ /* =====================------->>> CHIPS <<<-------===================== *\ \* =================================================================================== */ .inputChips { position:relative; height:32px; min-width:48px; width:fit-content; max-width:160px; padding:0 30px 0 12px; margin-right:8px; display:inline-block; flex-flow:row nowrap; justify-content:flex-start; align-items:center; color:rgba(var(--blackRGB), 0.87); border:1px solid transparent; border-radius:16px; background-color:rgba(var(--blackRGB), 0.12); box-shadow:0 0; text-transform:none; line-height:30px!important; font:var(--body2_font); letter-spacing:var(--body2_spacing); white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; transition:all 150ms var(--standardEasing), order 400ms var(--accelerateEasing) 0ms; } .inputChips > .cancel { position:absolute; right:0; top:6px; text-align:center; font-size:18px; font-weight:normal; line-height:19px; margin:0 6px; width:18px; height:18px; color:rgb(var(--whiteRGB-std)); background-color:rgba(var(--blackRGB), 0.42); border-radius:50%; cursor:pointer; } .inputChips > div[data-svg] { height:24px; width:24px; margin:4px 8px 4px -8px; border-radius:50%; } .inputChips > div[data-svg] > svg { height:24px; width:24px; padding:0; fill:rgba(var(--blackRGB), 0.87); } .inputChips.outlined { border:1px solid rgba(var(--blackRGB), 0.12); background-color:transparent; } .inputChip { height:32px; width:fit-content; padding:0 8px 0 12px; margin-right:8px; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; color:rgba(var(--blackRGB), 0.87); border:0 none; border-radius:16px; background-color:rgba(var(--blackRGB), 0.12); font:var(--subtitle2_font); transition:all 250ms var(--standardEasing); } .inputChip.cal { position:absolute; flex:1; justify-content:flex-start; align-items:center; height:100%; max-width:fit-content; padding-right:4px; margin:auto 0; background-color:rgba(var(--blackRGB), 0.04); color:rgba(var(--blackRGB), 0.42); border-radius:4px; border:1.5px solid rgba(var(--blackRGB), 0.12); white-space:nowrap; /*overflow:hidden; box-shadow:0 0 2px 3px rgb(var(--whiteRGB-std));*/ } .inputChip.cal > [data-svg] { height:18px; width:18px; margin:auto 4px auto -8px; transition:margin 75ms var(--sharpEasing); } .inputChip.cal > .label { line-height:1; } .inputChip.cal:is(:hover, [aria-pressed=true]) { background-color:rgba(var(--blackRGB), 0.42); border-color:rgba(var(--blackRGB), 0.24); color:rgb(var(--whiteRGB-std)); overflow:visible; z-index:10; padding:0 8px 0 12px; box-shadow:0 0 0 150px rgba(var(--whiteRGB-std), 0.56); } .inputChip.cal.up2Date { background-color:rgb(var(--primaryColor))!important; color:rgb(var(--whiteRGB-std))!important; border:0 solid rgb(var(--primaryColor))!important; } .inputChip.cal.warn { background-color:rgb(var(--redRGB))!important; color:rgba(var(--whiteRGB-std), 0.76)!important; border:0 solid rgba(var(--blackRGB), 0.12)!important; } .inputChip.cal.completed { background-color:rgb(var(--greenRGB))!important; color:rgb(var(--whiteRGB-std))!important; border:0 solid rgba(var(--blackRGB), 0.12)!important; } .inputChip.cal:is(.up2Date, .warn, .completed) > [data-svg] > svg { fill:rgb(var(--whiteRGB-std))!important; } /* ----------------------------------------------------------------------------------------- *\ \* ========================================================================================= */ /* ================----->>> NAVIGATION RAIL <<<-----================ *\ \* =============================================================================== */ .navigationRail { position:fixed; top:0; left:0; z-index:1; background:rgb(var(--whiteRGB-std)); flex:none; width:73px; height:100%; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:center; padding-top:8px; border-right:1px solid rgba(var(--blackRGB), 0.12); } .navigationRail > :is(button, [role=button]) { width:72px; height:72px; flex:none; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; background-color:transparent; border-radius:0; box-shadow:unset!important; } .navigationRail > :is(button, [role=button]) > [data-svg][data-tooltip]:hover::after { left:-16px; transform:translateX(0); } .navigationRail > :is(button, [role=button]) > [data-svg] { flex:none; width:24px; height:24px; padding:0; margin:0; } .navigationRail > :is(button, [role=button]) > [data-svg] > svg { flex:none; fill:rgba(var(--blackRGB), 0.40); } .navigationRail > :is(button, [role=button]):hover > [data-svg] > svg { fill:rgba(var(--blackRGB), 0.87); } .navigationRail > :is(button[aria-selected=true], [role=button][aria-selected=true]) > [data-svg] > svg { fill:rgb(var(--primaryColor)); } @media only screen and (max-width:599px) { .navigationRail { position:fixed; top:unset; bottom:0; left:0; flex:none; height:57px; width:100vw; background-color:rgb(var(--whiteRGB-std)); display:flex; flex-flow:row nowrap; justify-content:space-around; align-items:center; padding:0; border-top:1px solid rgba(var(--blackRGB), 0.24); box-shadow:var(--boxShadow_z4), var(--boxShadow_z4); } .navigationRail > :is(button, [role=button]) { width:40px; height:40px; } .navigationRail + footer { margin-block-end:57px; } } /* -------------------------------------------------------------------------------------- *\ \* ====================================================================================== */ /* ================----->>> NAVIGATION RAIL <<<-----================ *\ \* =============================================================================== */ .sideSheet { transform:translateX(-100%); position:fixed; z-index:24; height:100vh; width:332px; padding:0; margin:0; overflow-y:auto; text-align:left; transition:transform 250ms var(--accelerateEasing), var(--boxShadowTransition); } .sideSheet #closeFullPage:hover { opacity:1; visibility:visible; } .sideSheet #photoWrapper { margin:0; width:100%; min-height:280px; position:relative; transition:height 200ms var(--standardEasing); } .sideSheet .photoObj { position:absolute; top:0; left:0; margin:0; width:100%; min-height:280px; max-height:50vh; object-fit:cover; transition:opacity 250ms linear; } .sideSheet .photoObj:first-child { position:relative; } .sideSheet #dotWrapper { position:absolute; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; z-index:15; bottom:0; left:0; right:0; width:100%; text-align:center; } .sideSheet #dotWrapper span { opacity:0.42; display:inline-block; position:relative; width:16px; height:16px; border:4px solid rgba(var(--blackRGB), 0.87); border-radius:50%; background-color:rgba(var(--whiteRGB-std),0.87); cursor:pointer; box-shadow:unset; transition:background-color 100ms var(--standardEasing), opacity 150ms linear; } .sideSheet #dotWrapper span:hover { opacity:0.87; transition:background-color 100ms var(--standardEasing), opacity 150ms linear; } .sideSheet.expanded, .sideSheet[aria-expanded=true] { transform:translateX(0); box-shadow:var(--boxShadow_z24); transition:transform 300ms var(--decelerateEasing), var(--boxShadowTransition); } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */ /* ====================------>>> LAYOUTS GRID <<<------==================== *\ \* ====================================================================================== */ .galleryContainer { display:grid; grid-auto-flow:row; justify-content:center; justify-items:stretch; align-items:stretch; column-gap:4px; row-gap:4px; } @media only screen and (max-width:599px) { .galleryContainer { margin:0 16px; width:100%; grid-template-columns:repeat(4, calc((100vw - 16px - 3 * 4px) / 4)); grid-auto-rows:calc((100vw - 16px - 3 * 4px) / 4); } .galleryContainer > div.gallerySubContainer { grid-template-columns:repeat(4, calc((100vw - 16px - 3 * 4px) / 4)); grid-template-rows:repeat(4, calc((100vw - 16px - 3 * 4px) / 4)); } .galleryContainer > div.XL { grid-column-end:span 2; grid-row-end:span 2; } } @media only screen and (min-width:599px) { .galleryContainer { margin:0 32px; width:100%; grid-template-columns:repeat(8, calc((100vw - 32px - 7 * 4px) / 8)); grid-auto-rows:calc((100vw - 32px - 7 * 4px) / 8); } .galleryContainer > div.gallerySubContainer { grid-template-columns:repeat(4, calc((100vw - 32px - 7 * 4px) / 8)); grid-template-rows:repeat(4, calc((100vw - 32px - 7 * 4px) / 8)); } .galleryContainer > div.XL { grid-column-end:span 4; grid-row-end:span 4; } } @media only screen and (min-width:905px) { .galleryContainer { margin:0 auto; width:840px; grid-template-columns:repeat(12, calc((840px - 11 * 4px) / 12)); grid-auto-rows:calc((840px - 11 * 4px) / 12); } .galleryContainer > div.gallerySubContainer { grid-template-columns:repeat(4, calc((840px - 11 * 4px) / 12)); grid-template-rows:repeat(4, calc((840px - 11 * 4px) / 12)); } .galleryContainer > div.XL { grid-column-end:span 3; grid-row-end:span 3; } } @media only screen and (min-width:1240px) { .galleryContainer { margin:0 200px; width:100%; grid-template-columns:repeat(12, calc((100vw - 200px - 11 * 4px) / 12)); grid-auto-rows:calc((100vw - 200px - 11 * 4px) / 12); } .galleryContainer > div.gallerySubContainer { grid-template-columns:repeat(4, calc((100vw - 200px - 11 * 4px) / 12)); grid-template-rows:repeat(4, calc((100vw - 200px - 11 * 4px) / 12)); } .galleryContainer > div.XL { grid-column-end:span 3; grid-row-end:span 3; } } @media only screen and (min-width:1440px) { .galleryContainer { margin:0 auto; width:1040px; grid-template-columns:repeat(12, calc((1040px - 11 * 4px) / 12)); grid-auto-rows:calc((1040px - 11 * 4px) / 12); } .galleryContainer > div.gallerySubContainer { grid-template-columns:repeat(4, calc((1040px - 11 * 4px) / 12)); grid-template-rows:repeat(4, calc((1040px - 11 * 4px) / 12)); } .galleryContainer > div.XL { grid-column-end:span 3; grid-row-end:span 3; } } section[role=article] > .galleryContainer { margin:0 16px; width:100%; grid-template-columns:repeat(4, calc((360px - 3 * 4px) / 4)); grid-auto-rows:calc((360px - 3 * 4px) / 4); } :is(.gallerySubContainer, .galleryContainer) > div { position:relative; grid-column-end:span 2; grid-row-end:span 2; display:flex; } :is(.gallerySubContainer, .galleryContainer) > div.readonly { opacity:.38; } :is(.gallerySubContainer, .galleryContainer) > div.landscape { grid-column-end:span 4; grid-row-end:span 2; } :is(.gallerySubContainer, .galleryContainer) > div.portrait { grid-column-end:span 2; grid-row-end:span 4; } .galleryContainer > div.highlight { grid-column-end:span 4; grid-row-end:span 4; } /*.galleryContainer > div.landscape.XL { grid-column-end:span 6; grid-row-end:span 3; } .galleryContainer > div.portrait.XL { grid-column-end:span 3; grid-row-end:span 6; } .galleryContainer > div.highlight.XL { grid-column-end:span 6; grid-row-end:span 6; }*/ .galleryContainer > div.gallerySubContainer { grid-column-end:span 4; grid-row-end:span 4; display:grid; grid-auto-flow:row; justify-content:center; justify-items:stretch; align-items:stretch; column-gap:4px; row-gap:4px; } :is(.gallerySubContainer, .galleryContainer) > div > img { width:100%; height:100%; object-fit:cover; } :is(.gallerySubContainer, .galleryContainer) > div > img[src='/includes/images/no-image.svg'] { opacity:0.38; width:100%; height:100%; object-fit:contain; background-color:rgba(var(--blackRGB), 0.12); } :is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg { position:absolute; bottom:0; width:100%; height:48px; margin:0; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); color:rgba(var(--whiteRGB-std),0.87); background-color:rgba(var(--blackRGB-std), 0.32); backdrop-filter:saturate(0.5) blur(0.2px); display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } :is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg > div:first-child { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:16px; } :is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg > div:last-child { flex:none; width:fit-content; padding-right:12px; font:var(--h7_font); letter-spacing:var(--h7_spacing); } :is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg:hover { overflow-y:hidden; } :is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg:hover > div:first-child { overflow:visible; transition:overflow 100ms var(--sharpEasing); } /*:is(.gallerySubContainer, .galleryContainer) > div > .labelGalleryImg:hover > div:last-child { opacity:0; visibility:hidden; transition:opacity 80ms var(--sharpEasing); }*/ :is(.gallerySubContainer, .galleryContainer) > div[aria-disabled=true] > .labelGalleryImg { display:none; } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */ /* ======================------>>> CALENDAR <<<------====================== *\ \* ====================================================================================== */ .calendarWrapper { position:fixed; flex:none; z-index:26; top:0; right:0; bottom:0; left:0; width:328px; max-height:512px; height:fit-content; padding-bottom:16px; border-radius:4px; margin:auto; background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z8); } .calendarHeader { width:100%; background-color:rgb(var(--primaryColor)); padding:16px 24px; border-radius:4px 4px 0 0; } .calendarHeader > div { flex:none; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .calendarHeader > div > div:first-child { flex:1; color:rgb(var(--whiteRGB-std)); font:var(--h5_font); letter-spacing:var(--h5_spacing); line-height:1; } .calendarHeader > div > div:first-child > .caption { line-height:10px; padding-bottom:4px; font-weight:600; } .calendarHeader > div > div:last-child { flex:none; width:fit-content; } .calendarHeader > div > div:last-child > [data-svg]:first-child { display:inline-block; margin:0 12px 0 0; } .calendarHeader > div > div:last-child > [data-svg]:last-child { display:inline-block; margin:0 0 0 12px; } .calendarGrid { width:100%; padding:0 12px; display:grid; grid-auto-flow:row; justify-content:center; justify-items:stretch; align-items:stretch; column-gap:4px; row-gap:0; border-radius:0 0 4px 4px; border-width:0; border-style:solid; border-color:rgba(var(--blackRGB), 0.12); } .calendarGrid { grid-template-columns:repeat(7, 40px); grid-auto-rows:40px; } @media only screen and (min-width:1440px) { .calendarGrid { grid-template-columns:repeat(7, 40px); grid-auto-rows:40px; } } .calendarGrid > div { margin:2px; padding:11px 0; line-height:14px!important; border-radius:50%; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); text-align:center; } .calendarGrid > div[data-date][aria-disabled=true] { opacity:0.32; pointer-events:none; box-shadow:none; } .calendarGrid > div[data-date]:hover { box-shadow:var(--hover4White); } .calendarGrid > div[data-date]:focus { box-shadow:var(--focus4White); } .calendarGrid > div[data-date]:active { box-shadow:var(--activate4White); } .calendarGrid > div[aria-current] { background-color:rgba(var(--blackRGB), 0.04); padding:9.5px 0; border:1.5px solid rgba(var(--blackRGB), 0.12); } .calendarGrid > div[aria-selected=true] { color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--primaryColor)); } .calendarGrid > div[aria-selected=true]:hover { box-shadow:var(--hover4Color); } .calendarGrid > div[aria-selected=true]:focus { box-shadow:var(--hover4Color); } .calendarGrid > div[aria-selected=true]:active { box-shadow:var(--hover4Color); } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */ /* ======================------>>> STEPPER <<<------====================== *\ \* ===================================================================================== */ .wrapperStepper { width:100%; margin-left:calc(24px - 16px); border-left:1px solid rgba(var(--blackRGB), 0.12); } .stepTitle { height:24px; padding:0; margin:24px auto 0 -20px; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); color:rgba(var(--blackRGB), 1); text-align:left; flex:none; display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start; } .stepTitle:first-of-type { margin:8px auto 0 -20px; } .stepTitle[aria-current=step] + ul + .stepTitle { margin:48px auto 0 -20px; } .stepTitle[aria-current=step] { color:rgb(var(--blackRGB)); font-weight:500; } .stepTitle > .numCircled { margin-right:12px; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); font-weight:600; width:24px; height:24px; border-radius:12px; line-height:12px; padding:6.5px 0 5.5px 0; margin-right:16px; text-align:center; background-color:var(--black038HEX); color:rgb(var(--whiteRGB-std)); box-shadow:0 0 0 8px rgb(var(--whiteRGB-std)); } .stepTitle[aria-current=step] > .numCircled { background-color:rgb(var(--primaryColor)); } .stepTitle[aria-current=step] + .stepBody { height:auto; max-height:var(--bodyMaxHeight); padding:16px 16px 0 16px; overflow:hidden; transition:height 250ms var(--sharpEasing) 150ms, max-height 250ms var(--sharpEasing) 150ms; } /*#step2Details[aria-current='step'] + .stepBody { transition:height 250ms linear 200ms, max-height 250ms linear 200ms; } #step3Details[aria-current='step'] + .stepBody { transition:height 150ms linear 200ms, max-height 250ms linear 200ms; }*/ .stepTitle[aria-current=false] + .stepBody { height:auto; opacity:0; max-height:0; padding:16px 24px 0 16px; overflow:hidden; transition:height 250ms var(--sharpEasing), max-height 250ms var(--sharpEasing); } .stepBody > li { height:64px; } .stepBody > li > .wrapper-qtt { flex: none; height: 64px; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: center; } .stepBody > li > .wrapper-price { flex: none; display: block; height: 64px; min-width:64px; text-align:right; margin-inline: 48px 0; order: 10; line-height: 64px; } .stepBody > #deliveryAddress_LI { height:auto; min-height:0; max-height:0; overflow:hidden; transition:height 200ms var(--sharpEasing), max-height 200ms var(--sharpEasing); } .stepFooter { width:100%; height:48px; margin:8px auto 8px 0; flex:none; display:flex; flex-flow:row-reverse nowrap; align-items:center; justify-content:flex-start; } .stepFooter > button { margin-right:16px; } .stepFooter > button.text { color:rgba(var(--blackRGB), 0.42); margin-right:36px; } @media only screen and (max-width:599px) { .stepFooter { flex-flow:row wrap; height:auto; } .stepTitle[aria-current=step] + #step1Details { max-height:var(--bodyMaxHeightMob); } #step1Details > li { max-height:unset; flex-flow:row wrap; height:76px; align-items:flex-start; } #step1Details > li > img { height:76px; } #step1Details > li.twoLines > .textBlock { min-width:120px; min-height:unset; margin-left:16px; } #step1Details > li.twoLines > .textBlock > .title { padding-top:8px; } #step1Details > li.twoLines > .textBlock > .body { display:none; } #step1Details > li.twoLines > .textBlock + div { margin:-48px 16px 8px auto!important; } } /* =================----->>> DATA TABLES COMPONENT <<<-----================= *\ \* ======================================================================================= */ /*table { flex:none; width:100%; border-spacing:0; user-select:none; border:1px solid rgba(var(--blackRGB), 0.12); border-radius:4px; } th, tfoot td { height:56px; padding:0 16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); text-align:left; } td { height:53px; padding:0 16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); text-align:left; } tr:only-child > td, tr:last-child > td { border:0 none; } :not(thead,tfoot) > tr:not(:only-child):hover { box-shadow:var(--hover4White); } :not(thead,tfoot) > tr:not(:only-child):focus { box-shadow:var(--focus4White); } :not(thead,tfoot) > tr:not(:only-child):active { box-shadow:var(--activate4White); }*/ @media only screen and (max-width:599px) { .tableWrapper { max-width:100vw; overflow-x:auto; } } table { flex:none; width:100%; align-self:center; margin:16px auto; border-spacing:0; border-radius:4px; border:1px solid rgba(var(--blackRGB), 0.12); border-radius:4px; flex:none; background-color:rgb(var(--whiteRGB-std)); user-select:none; } th { height:56px; padding:8px 16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); text-align:left; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); transition:box-shadow 150ms var(--sharpEasing) 30ms; } :not(thead,tfoot) > tr:is(:hover,:focus,:active):not([aria-expanded=true]):hover { box-shadow:var(--hover4White); } td { max-height:53px; padding:6px 16px; border-bottom:1px solid rgba(var(--blackRGB), 0.12); text-align:left; font:var(--body2_font); letter-spacing:var(--body2_spacing); transition:box-shadow 150ms var(--sharpEasing) 30ms; } th.icon, td.icon { width:calc(40px + 16px); padding:6px 8px; text-align:center; } td > .rowFlexContent { flex:none; width:100%; height:40px; /*overflow-x:auto;*/ display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:center; } td > .rowFlexContent > .icon { margin:auto 4px; } /*td:is(:first-child, :nth-child(2)), th:is(:first-child, :nth-child(2)) { width:calc(40px + 16px); padding:6px 8px; text-align:center; }*/ td > .wrapperCustomCheckBox, th > .wrapperCustomCheckBox { margin:0; width:40px; justify-content:center; } td:last-child > [data-svg] { margin-right:16px; } tr:last-child:not(.footer) > td { border-bottom:0 none; } tr.footer { display:none; } tr.footer > td { height:16px; padding:0; /*border-top:1px solid rgba(var(--blackRGB), 0.12);*/ } tr.alert { background-color:rgba(var(--redRGB), 0.12); color:rgb(var(--redRGB)); } tr.alert > td { font-weight:500; } tr.alert > td:first-child > [data-svg] > svg { fill:rgb(var(--redRGB)); } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */