: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 150ms var(--sharpEasing); --opacityTransition:opacity 150ms var(--sharpEasing), visibility 150ms var(--sharpEasing); --slice1:0; --slice2:0; --slice3:0; /*\ ================----->>> 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:600px) { :root { --mainMinWidth:360px; --mainWidth:calc(100% - 8px); --mainMargin:0 8px; } } @media only screen and (min-width:600px) { :root { --mainMinWidth:568px; --mainWidth:calc(100% - 32px); --mainMargin:0 32px; } } @media only screen and (min-width:905px) { :root { --mainMinWidth:840px; --mainWidth:840px; --mainMargin:0 auto; } } /*@media only screen and (min-width:1240px) { :root { --mainMinWidth:1040px; --mainWidth:calc(100% - 200px); --mainMargin:0 200px; --headerWidth:1040px; --headerMargin:0 auto; } }*/ @media only screen and (min-width:1240px) { :root { --mainMinWidth:1040px; --mainWidth:1040px; --mainMargin:0 auto; --headerWidth:1040px; --headerMargin:0 auto; } } @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(--subtitle1_font); 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; } footer > div { position:relative; max-width:680px; display:flex; flex-flow:row wrap; justify-content:space-around; margin:auto; font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); } /* ================----->>> 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, .card .title, .dialog > .header > .title { font:var(--h6_font); letter-spacing:var(--h6_spacing); } .h7 { font:var(--h7_font); letter-spacing:var(--h7_spacing); } .subtitle1, ul > li .title, 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, .dialog .body { font:var(--body1_font); letter-spacing:var(--body1_spacing); } .body2, .card .meta { font:var(--body2_font); letter-spacing:var(--body2_spacing); } .BUTTON, 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, ul > li .body, ul > li .meta, [data-tooltip]::after { font:var(--caption_font); letter-spacing:var(--caption_spacing); } .sectionTitle { line-height:1; padding:24px 0 8px 0; } /* ------------------------------------------------------------------------------ *\ \* ============================================================================== */ ::backdrop, :fullscreen { background-color:var(--whiteRGB-std); } ::-webkit-scrollbar { width:4px; height:0; } @media only screen and (max-width:599px) { ::-webkit-scrollbar { width:0; height:0; } } ::-webkit-scrollbar-track { /*background:rgb(var(--whiteRGB-std));*/ background:transparent; width:50%; } ::-webkit-scrollbar-corner { /*background:rgb(var(--whiteRGB-std));*/ background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(var(--blackRGB), 0.42); border-radius:8px; border:2px solid rgba(var(--blackRGB), 0.12); width:50px; } * { box-sizing:border-box; } [onclick] { cursor:pointer; } ul[role=listbox]:empty { opacity:0; visibility:hidden; } ::placeholder { color:rgba(var(--blackRGB), 0.56); text-overflow:ellipsis; white-space:nowrap; overflow:hidden; transition:var(--opacityTransition); } :any-link { text-decoration:none; color:inherit; } :disabled, [disabled], [aria-disabled=true] { pointer-events:none; filter:grayscale(1); opacity:0.38; box-shadow:unset!important; cursor:default; } input[type=text]:is(:read-only,[readonly]), select:is(:disabled,[disabled]) { pointer-events:none; box-shadow:unset!important; user-select:none; cursor:default; } 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; } /*[aria-disabled=true] { box-shadow:unset!important; cursor:default; color:rgba(var(--blackRGB), 0.38)!important; fill:rgba(var(--blackRGB), 0.38)!important; }*/ /*[aria-disabled=true] * { color:rgba(var(--blackRGB), 0.38)!important; fill:rgba(var(--blackRGB), 0.38)!important; }*/ .contained:is(:disabled,[aria-disabled=true],[disabled]) { /*color:rgb(var(--blackRGB));*/ filter:grayscale(1); color:black; filter:grayscale(1); opacity:0.38; } .error, .error *, .alert, .alert *, [aria-invalid=true], [aria-invalid=true] * { color:rgb(var(--redRGB)); fill:rgb(var(--redRGB))!important; } .icon.error, .icon.alert, .icon[aria-invalid=true] { background-color:rgba(var(--redRGB), 0.12); } [aria-invalid=true][aria-disabled=true] { opacity:0.56; filter:unset; } :checked:disabled, :checked[disabled=true], :checked[disabled] { 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); } #backdrop { position:fixed; top:0; left:0; height:0; width:0; z-index:0; cursor:default; opacity:0; background-color:rgba(var(--blackRGB-std), 0.32); will-change:opacity; transition:opacity 75ms linear, width 10ms linear 400ms, height 10ms linear 400ms; } #backdrop.fadeIn { z-index:23; right:0; bottom:0; height:100%; width:100%; opacity:1; backdrop-filter:saturate(0.5) blur(0.2px); will-change:opacity, backdrop-filter; transition:opacity 150ms linear, backdrop-filter 150ms linear; } #backdrop.white.fadeIn { background-color:rgba(var(--whiteRGB-std), 0.12); backdrop-filter:saturate(0.76) blur(0.2px); } .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%; border:2px solid; } .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 { z-index:24; position:fixed; bottom:0; left:0; right:0; margin:auto; padding:0 8px 0 16px; min-width:344px; width:fit-content; min-height:48px; height:fit-content; transform:translateY(300%); opacity:0; background-color:rgb(var(--blackRGB)); color:rgb(var(--whiteRGB-std)); font:var(--body2_font); letter-spacing:var(--body2_spacing); font-weight:500; 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) { transform:translateY(0)!important; opacity:1; 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; } [data-svg] > svg { width:100%; height:100%; fill:rgba(var(--blackRGB), 0.87); transition:fill 100ms var(--sharpEasing); } [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].avatar_2 { width:40px; height:40px; box-sizing:content-box; border:2px solid rgba(var(--blackRGB), 0.87); border-radius:50%; overflow:hidden; 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; fill:rgba(var(--blackRGB), 0.87); border-radius:50%; padding:calc((40px - 24px)/2); } [data-svg].icon.mini { width:40px; height:40px; fill:rgba(var(--blackRGB), 0.87); border-radius:50%; padding:calc((40px - 18px)/2); } [data-svg].icon > svg { width:100%; height:100%; fill:inherit; } [data-svg].icon:is(:hover,:focus,:active) { fill:rgb(var(--blackRGB)); } [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); } [data-svg].icon.white { fill:rgba(var(--whiteRGB-std), 0.87); } [data-svg].icon.white:is(:hover,:focus,:active) { 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); } /*[data-svg].addOnIcon { position:absolute; margin:0!important; bottom:6px; right:4px; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 30px rgba(255,255,255, 0.76); padding:1px!important; border:1px solid transparent; fill:rgba(var(--whiteRGB-std), 0.87); }*/ [data-svg].addOnIcon { position:relative; z-index:5; margin:0!important; width:100%; height:0; padding:0!important; fill:rgb(var(--whiteRGB-std)); } [data-svg].addOnIcon.valid + [data-svg] > svg { fill:rgb(var(--primaryColor))!important; filter:brightness(0.87)!important; } [data-svg].addOnIcon.invalid + [data-svg] > svg { fill:rgba(var(--blackRGB), 0.76)!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:rgb(var(--whiteRGB-std)); } [data-svg].maxi { width:56px; height:56px; padding:calc((56px - 32px)/2); } [data-svg].red > 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; } /* ================----->>> TOOLTIPS & BADGES COMPONENT <<<-----================ *\ \* =========================================================================================== */ [data-tooltip], [data-badge] { position:relative; } [data-tooltip]:hover { z-index:10; } [data-tooltip]::after { opacity:0; 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; width:fit-content; height:24px; z-index:10; top:calc(100% + 4px); left:50%; transform:translateX(-50%); } @media only screen and (max-width:599px) { [data-tooltip]::after { content:unset!important; } } [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-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:fit-content; line-height:13px; padding:2.5px 4px 2.5px 4px; box-shadow:inset 0 0 0 15px rgb(var(--redRGB)); /*filter:saturate(0.76);*/ position:absolute; top:-1px; left:21px; letter-spacing:-0.02em; font-weight:700; text-align:center; background-color:rgb(var(--whiteRGB-std)); 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:fit-content; 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:fit-content; 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:fit-content; 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 { max-width:calc(min(100%, 100vw, 568px)); width:fit-content; min-width:344px; margin:0 auto; padding:0 0 8px 0; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); border-radius:4px; background-color:rgb(var(--whiteRGB-std)); box-shadow:var(--boxShadow_z1); border:1px solid rgba(var(--blackRGB), 0.12); user-select:none; transition:opacity 150ms var(--standardEasing), var(--boxShadowTransition); } .card:hover { box-shadow:var(--boxShadow_z8); } .card > .headerCard { height:fit-content; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:flex-start; padding:0 16px; margin-bottom:8px; will-change:opacity, box-shadow; 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 { line-height:var(--h6_height); padding-top:calc(40px - var(--h6_height)); }*/ .card > .headerCard > .textBlock > .title { line-height:var(--h6_height); padding-top:calc(34px - var(--h6_height)); } /*.card > .headerCard > .textBlock > .body { line-height:var(--body1_height); padding-top:calc(28px - var(--body1_height)); }*/ .card > .headerCard > .textBlock > .body { font:var(--subtitle2_font); letter-spacing:var(--subtitle2_spacing); line-height:1; padding-top:calc(22px - var(--subtitle2_height)); } .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:40px; height:40px; margin:auto 32px 0 0; padding:0!important; order:1; box-shadow:unset!important; } .card > .headerCard > .icon * { width:100%; height:100%; margin:0!important; } .card > .headerCard > .icon + .textBlock > .title { padding-top:calc(34px - var(--h6_height)); } .card > .headerCard > .icon + .textBlock > .body { padding-top:calc(22px - var(--body1_height)); } .card .wrapperBtn { margin:24px -8px 8px auto; } .card .wrapperBtn > button:first-of-type { color:rgba(var(--blackRGB), 0.58); margin-right:24px; } .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(var(--whiteRGB-std)); 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(var(--whiteRGB-std)); 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(var(--whiteRGB-std)); 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:0; width:344px; height:100%; 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; filter:sepia(0.8); border:0.5px solid white; 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; 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; 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; } /* ------------------------------------------------------------------------------ *\ \* ============================================================================== */ /* ================----->>> DIALOG COMPONENT <<<-----================ *\ \* ================================================================================ */ .dialog { user-select:none; transform:scale(0.8); opacity:0; will-change:opacity, transform, height, width; transition:opacity 75ms linear, transform 0ms linear 80ms, height 250ms var(--sharpEasing), width 250ms var(--sharpEasing); } .dialog.incoming, .dialog[aria-expanded=true] { transform:scale(1); opacity:1; will-change:opacity, transform; transition:opacity 45ms linear, transform 150ms var(--decelerateEasing); } .dialog { position:fixed; flex:none; z-index:24; top:0; right:0; bottom:0; left:0; margin:auto; min-height:182px; height:fit-content; max-height:94vh; min-width:280px; max-width:calc(min(100%, 100vw) - 32px); background-color:rgb(var(--whiteRGB-std)); 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 > .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:fit-content; min-height:64px; padding:0 0 0 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 { flex:none; padding:0 24px; display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; } .dialog > .header > .title { flex:1; line-height:0.75em; padding-top:calc(40px - 0.75em); align-self:flex-start; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } /*.dialog > .header > .title:empty { display:none; }*/ .dialog > .header > .title > div { font:var(--body2_font); letter-spacing:var(--body2_spacing); line-height:1; padding-top:6px; white-space:nowrap; overflow-x:clip; text-overflow:ellipsis; } /*.dialog > .header > .iconHolder { flex:none; width:fit-content; margin-bottom:-8px; margin-right:-16px; display:flex; font-weight:500; }*/ .dialog > .header > .iconHolder { flex:none; width:fit-content; align-self:flex-start; margin-top:8px; margin-right:-16px; display:flex; font-weight:500; } .dialog > .header > .iconHolder > [data-svg]:not(#svgClose) { margin-left:8px; } .dialog > .header > .iconHolder > [data-svg]:is(:hover, [aria-selected=true]) svg { fill:rgba(var(--blackRGB), 0.87); } .dialog > .header > .iconHolder > [data-svg][aria-selected=false] svg { fill:rgba(var(--blackRGB), 0.42); } .dialog > .header > .body { line-height:var(--body1_height); padding-top:calc(38px - var(--body1_height)); } .dialog > .body { flex:1; width:100%; line-height:var(--body1_height); padding-right:24px; padding-left:24px; padding-top:calc(36px - var(--body1_height)); } .dialog > .mainContent { flex:1; width:calc(100% + 8px); padding:24px 32px 24px 24px; overflow-y:auto; border-bottom:1px solid rgba(var(--blackRGB), 0.12); } .dialog > .mainContent::-webkit-scrollbar-thumb { background:rgba(var(--whiteRGB-std), 0.56); border:0 none transparent; width:50px; } .dialog > .mainContent form { width:510px; } .dialog > .mainContent ul { margin:0; max-height:36vh; overflow-y:auto; width:calc(100% + 24px); max-width:unset; /*padding:0 16px 0 0!important;*/ padding:16px 16px 0 16px!important; background:transparent; } .dialog > div:last-child { 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_z4); } .dialog > div:last-child > button.text:not(:last-of-type) { margin-right:24px; color:rgba(var(--blackRGB), 0.58); } .dialog > div:last-child > 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; min-width:280px; max-width:calc(min(480px, 100vw) - 32px); 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; width:100%; 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; } } @media only screen and (max-width:599px) { .dialog { height:100%; max-height:unset; width:100vw; max-width:unset; margin:0; border-radius:unset; } .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; } } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ ul[role="menu"][aria-expanded] { transform:scale(0.8); transform-origin:top right; z-index:0; position:fixed; right:20px; top:48px; width:fit-content; min-width:112px; max-width:320px; padding:8px; margin:0; color:rgba(var(--blackRGB),0.87); background-color:rgb(var(--whiteRGB-std)); border:1px solid rgba(var(--blackRGB), 0.12); opacity:0; will-change:opacity,transform,box-shadow; transition:opacity 75ms linear, transform 5ms linear 75ms; } ul[role="menu"][aria-expanded=true] { z-index:24; transform:scale(1); opacity:1; box-shadow:var(--boxShadow_z8); will-change:opacity, transform, box-shadow; transition:transform 150ms var(--decelerateEasing) 10ms, opacity 45ms linear 10ms, var(--boxShadowTransition)!important; } /* =================----->>> LIST COMPONENT <<<-----================= *\ \* ================================================================================ */ ul, ol { padding:8px 0; margin:0; width:100%; max-width:min(100%, 100vw, 800px); flex:none; background-color:rgb(var(--whiteRGB-std)); user-select:none; list-style:none; } li, summary { 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; } li:hover, details:hover { z-index:1; box-shadow:var(--hover4White); } li:focus, details:focus { z-index:1; box-shadow:var(--focus4White); } li:active, details:active { z-index:1; box-shadow:var(--active4White); } ul.noshadow > li, li.noshadow { box-shadow:unset!important; } 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); line-height:var(--subtitle1_height); padding-top:calc(28px - var(--subtitle1_height)); } li.twoLines > .b4Text + .textBlock > .title { font:var(--subtitle1_font); line-height:var(--subtitle1_height); padding-top:calc(32px - var(--subtitle1_height)); } li.twoLines > .textBlock > .body { font:var(--caption_font); line-height:var(--caption_height); padding-top:calc(20px - var(--caption_height)); 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); line-height:var(--subtitle1_height); padding-top:calc(28px - var(--subtitle1_height)); } li.threeLines > .textBlock > .overline + .title { font:var(--subtitle1_font); line-height:var(--subtitle1_height); padding-top:calc(20px - var(--subtitle1_height)); } li.threeLines > .textBlock > .body { font:var(--caption_font); line-height:var(--caption_height); padding-top:calc(20px - var(--caption_height)); } 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 > summary { height:48px; } details > summary > .icon:first-child { margin-right:16px; } 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; } } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* =================----->>> BUTTON COMPONENT <<<-----================= *\ \* ================================================================================== */ button, [role=button] { 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); } button.contained, [role=button].contained, button, [role=button] { padding:0 16px; color:rgb(var(--whiteRGB-std)); background-color:rgb(var(--primaryColor)); box-shadow:var(--boxShadow_z2); } button.outlined, [role=button].outlined { padding:0 16px; color:rgb(var(--primaryColor)); background-color:rgb(var(--whiteRGB-std)); border:1px solid rgb(var(--primaryColor)); } button.text, [role=button].text { padding:0 8px; color:rgb(var(--primaryColor)); background-color:transparent; box-shadow:0 0; } button.contained:hover, [role=button].contained:hover { box-shadow:var(--boxShadow_z4), var(--hover4Color); } button.contained:focus, [role=button].contained:focus { box-shadow:var(--boxShadow_z4), var(--focus4Color); } button.contained:active, [role=button].contained:active { box-shadow:var(--boxShadow_z8), var(--activate4Color); } button:is(.outlined, .text):hover, [role=button]:is(.outlined, .text):hover { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.04); } button:is(.outlined, .text):focus, [role=button]:is(.outlined, .text):focus { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.12); } button:is(.outlined, .text):active, [role=button]:is(.outlined, .text):active { box-shadow:inset 0 100px rgba(var(--primaryColor), 0.12); } button > [data-svg] { width:18px; height:18px; margin-right:8px; } button > [data-svg] > svg { fill:rgb(var(--whiteRGB-std)); } button:is(.outlined, .text) + [data-svg] > svg { width:18px; height:18px; fill:rgb(var(--primaryColor)); } /* -------------------------------------------------------------------------------- *\ \* ================================================================================ */ /* ================----->>> 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:fit-content; 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:400px; padding:0 20px 0 12px; transition: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; pointer-events:none; box-shadow:var(--boxShadow_z4)!important; } .multiFAB > button:first-child, .multiFAB > button:first-child svg { opacity:1; 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; 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; 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; pointer-events:all; transform:translateY(calc(300% + 24px)); transition:transform 725ms var(--standardEasing) 10ms, var(--boxShadowTransition), var(--opacityTransition)!important; } /* -------------------------------------------------------------------------------------- *\ \* ====================================================================================== */ /* ================----->>> ALL INPUTS TYPE & LABELS <<<-----================ *\ \* ======================================================================================== */ form { max-width:calc(min(100%, 100vw, 518px) - 8px); flex:none; background-color:rgb(var(--whiteRGB-std)); user-select:none; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; color:rgba(var(--blackRGB), 0.87); margin:0 auto; margin-inline:auto; margin-block:0; } /*form:invalid { background-color:rgba(var(--redRGB),0.12); }*/ input { border-radius:4px; border:0 none transparent; appearance:none; -webkit-appearance:unset; max-width:100%; height:48px; line-height:1.2; padding-inline:16px 12px; background-color:rgba(var(--blackRGB), 0.04); color:rgba(var(--blackRGB), 0.87); outline-style:none; text-align:left; } .inputWrapper { position:relative; height:48px; margin-bottom:24px; border-radius:4px 4px 0 0; border-bottom:1px solid rgba(var(--blackRGB), 0.42); background-color:rgba(var(--blackRGB), 0.04); width:100%; will-change:border-color, transform, opacity, box-shadow; transition:border-color 200ms var(--standardEasing), background-color 250ms var(--standardEasing), var(--opacityTransition), var(--boxShadowTransition); } @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) { background-color:rgba(var(--blackRGB), 0.12); border-color:rgb(var(--primaryColor)); } .inputWrapper::after { content:''; position:absolute; width:0; height:1px; z-index:0; bottom:0; left:50%; transform:translateX(-50%); background-color:rgb(var(--primaryColor)); will-change:width; transition:width 200ms var(--standardEasing); } .inputWrapper[aria-invalid=true]::after { background-color:rgb(var(--redRGB)); border-color:rgb(var(--redRGB)); } .inputWrapper:is(:focus, :focus-within, :active)::after { width:100%; transition:width 250ms var(--standardEasing); } .inputWrapper > input, .inputWrapper > select, .inputWrapper > div[contenteditable='true'] { border-radius:4px 4px 0 0; border-bottom:1px solid rgba(var(--blackRGB), 0.42); appearance:none; -webkit-appearance:unset; position:absolute; width:100%; top:0; left:0; height:48px; line-height:1.2; padding-inline:16px 12px; padding-top:calc(48px - var(--subtitle1_height)*1.2 - 7px)!important; padding-bottom:calc(7px - var(--subtitle1_height)*0.2)!important; border:0 none; background-color:rgba(var(--blackRGB), 0); color:rgba(var(--blackRGB), 0.87); caret-color:rgb(var(--primaryColor)); outline-style:none; text-align:left; z-index:1; font:var(--subtitle1_font); letter-spacing:var(--subtitle1_spacing); } .inputWrapper > label { position:absolute; left:16px; line-height:20px; top:calc((48px - 20px)/2); width:fit-content; max-width:calc(100% - 16px); color:rgba(var(--blackRGB), 0.60); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; z-index:0; transition:all 200ms var(--standardEasing); } .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(:focus, :focus-within, :active) > label, .inputWrapper > select:is(:focus, :active, :required:valid) + label, .inputWrapper > div[contenteditable='true']:not([data-count-char="0"]) + label, .inputWrapper > input:is(:focus, :active, :required:valid, :not(:placeholder-shown)) + label { color:rgb(var(--primaryColor)); line-height:15px!important; top:calc(20px - 15px); font:var(--caption_font); letter-spacing:var(--caption_spacing); z-index:1; } .inputWrapper > input[type=text]: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,:-webkit-autofill:hover,:-webkit-autofill:focus,:-internal-autofill-selected) { 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; /*pour simuler bg après remplissage autocomplete*/ } .inputWrapper > input:is(:-webkit-autofill,:-webkit-autofill:hover,:-webkit-autofill:focus,:-internal-autofill-selected) + label { color:rgb(var(--primaryColor)); line-height:15px!important; top:calc(20px - 15px); font:var(--caption_font); letter-spacing:var(--caption_spacing); z-index:10; } .inputWrapper > input:not([type=radio]):not([type=checkbox]):is(:required:valid, :optional:not(:placeholder-shown)), .inputWrapper > select:is(:required:valid) { border-bottom:1px solid rgb(var(--blueRGB)); } .inputWrapper[aria-invalid=true] > select, .inputWrapper[aria-invalid=true] > input:not([type=radio]):not([type=checkbox]) { border-bottom:1px solid rgb(var(--redRGB))!important; } .inputWrapper[aria-invalid=true] > select + label, .inputWrapper[aria-invalid=true] > input:not([type=radio]):not([type=checkbox]) + label { color:rgb(var(--redRGB))!important; line-height:1!important; top:calc(20px - var(--caption_height)); font:var(--caption_font); letter-spacing:var(--caption_spacing); 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 { 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] { flex:none; appearance:none; inline-size:22px; block-size:22px; padding:0; margin:9px; 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; background-color:rgb(var(--whiteRGB-std)); 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] { appearance:none; inline-size:21px; block-size:21px; padding:0; margin:9px 10px 9px 9px; 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:100%; margin:40px auto 16px auto; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; } .inputWrapper > [role=listbox] { pointer-events:all; background:rgb(var(--whiteRGB-std))!important; position:absolute; visibility:hidden; z-index:16; 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: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; } /* ----------------------------------------------------------------------------------------- *\ \* ========================================================================================= */ /* ==================----->>> 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 [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] { position:relative; flex:none; width:100%; height:48px; 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) { [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; } [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; pointer-events:none; transition:var(--opacityTransition); } [role=search] ul[role=listbox] { order:4; max-width:unset; width:100%; opacity:0; visibility:hidden; z-index:16; background-color:rgb(var(--whiteRGB-std)); 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); display:flex; flex-flow:column nowrap; justify-content:flex-start; } [role=search] ul[role=listbox][aria-expanded="true"] { opacity:1; visibility:visible; max-height:70vh; overflow-y:auto; transition:var(--opacityTransition); } [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:4px 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:0 none; border-radius:16px; background-color:rgba(var(--blackRGB), 0.12); box-shadow:0 0; text-transform:none; 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 { color:rgba(var(--blackRGB), 0.87); border:1px solid rgba(var(--blackRGB), 0.12); background-color:rgba(var(--blackRGB), 0.04); } .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 { flex:1; justify-content:flex-start; height:29px; line-height:26px; max-width:fit-content; padding:0 4px 0 8px; 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; fill:rgba(var(--blackRGB), 0.42)!important; margin-left:-4px; margin-right:8px; transition:margin 75ms var(--sharpEasing); } .inputChip.cal > [data-svg] > svg { fill:inherit!important; } .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:is(:hover, [aria-pressed=true]) > [data-svg] { margin-left:-32px; }*/ .inputChip.cal.up2Date { background-color:rgb(var(--primaryColor))!important; color:rgb(var(--whiteRGB-std))!important; border:1.5px solid rgb(var(--primaryColor))!important; } .inputChip.cal.warn { background-color:rgb(var(--redRGB))!important; color:rgba(var(--whiteRGB-std), 0.76)!important; border:1.5px solid rgba(var(--blackRGB), 0.12)!important; } .inputChip.cal.completed { background-color:rgb(var(--greenRGB))!important; color:rgb(var(--whiteRGB-std))!important; border:1.5px solid rgba(var(--blackRGB), 0.12)!important; } .inputChip.cal:is(.up2Date, .warn, .completed) > [data-svg] { fill:rgb(var(--whiteRGB-std))!important; } /*.inputChip.cal:hover { background-color:rgb(var(--primaryColor)); color:rgb(var(--whiteRGB-std)); overflow:visible; z-index:10; padding:0 8px 0 12px; }*/ /* ----------------------------------------------------------------------------------------- *\ \* ========================================================================================= */ /* ================----->>> NAVIGATION RAIL <<<-----================ *\ \* =============================================================================== */ .navigationRail { position:fixed; top:0; left:0; 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 > button, .navigationRail > [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 > button > [data-svg][data-tooltip]:hover::after { left:-16px; transform:translateX(0); } .navigationRail > button > [data-svg], .navigationRail > [role=button] > [data-svg] { flex:none; width:24px; height:24px; padding:0; margin:0; } .navigationRail > button > [data-svg] > svg, .navigationRail > [role=button] > [data-svg] > svg { flex:none; fill:rgba(var(--blackRGB), 0.42); } .navigationRail > button[aria-selected=true] > [data-svg] > svg, .navigationRail > [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 > button:hover, .navigationRail > [role=button]:hover { box-shadow:var(--selected4White); } .navigationRail > button:is(:focus, :active), .navigationRail > [role=button]:is(:focus, :active) { box-shadow:var(--active4White); }*/ /* -------------------------------------------------------------------------------------- *\ \* ====================================================================================== */ /* ================----->>> 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 300ms var(--sharpEasing), var(--boxShadowTransition); } .sideSheet #closeFullPage:hover { opacity:1; } .sideSheet #photoWrapper { margin:0; width:100%; min-height:280px; position:relative; transition:height 200ms var(--standardEasing); } .sideSheet .photoObj:first-child { margin:0; width:100%; min-height:280px; max-height:425px; object-fit:cover; transition:opacity 250ms linear; } .sideSheet .photoObj:not(:first-child) { position:absolute; top:0; left:0; margin:0; width:100%; min-height:280px; max-height:425px; /*height:calc(attr(width)*4/3);*/ object-fit:cover; transition:opacity 250ms linear; } .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:600px) { .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:600px) { .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 { grid-column-end:span 2; grid-row-end:span 2; } :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:relative; top:-48px; 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: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; transition:opacity 80ms var(--sharpEasing); } :is(.gallerySubContainer, .galleryContainer) > div[aria-disabled=true] > .labelGalleryImg { display:none; } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */ /* ======================------>>> CALENDAR <<<------====================== *\ \* ====================================================================================== */ .calendarWrapper { user-select:none; transform:scale(0.8); opacity:0; will-change:opacity, transform, height, width; transition:opacity 75ms linear, transform 0ms linear 80ms, height 250ms var(--sharpEasing), width 250ms var(--sharpEasing); } .calendarWrapper[aria-expanded=true] { transform:scale(1); opacity:1; will-change:opacity, transform; transition:opacity 45ms linear, transform 150ms var(--decelerateEasing); } .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; } .calendarHeader [data-svg] > svg { fill:rgb(var(--whiteRGB-std)); } .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:40px 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] { 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)); 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:fit-content; max-height:var(--bodyMaxHeight); padding:16px 0 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:fit-content; max-height:0; padding:16px 0 0 16px; overflow:hidden; transition:height 250ms var(--sharpEasing), max-height 250ms var(--sharpEasing); } .stepBody > li { height:64px; } .stepBody > #deliveryAddress_LI { height:fit-content; 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 nowrap; align-items:center; justify-content:flex-start; } .stepFooter > button:first-of-type { margin-right:36px; } .stepFooter > button.text { color:rgba(var(--blackRGB), 0.42); } @media only screen and (max-width:599px) { .stepFooter { flex-flow:row wrap; height:fit-content; } .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 { 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:not([aria-expanded='true']):hover { box-shadow:var(--hover4White); } :not(thead,tfoot) > tr:not([aria-expanded='true']):focus { box-shadow:var(--focus4White); } :not(thead,tfoot) > tr:not([aria-expanded='true']):active { box-shadow:var(--active4White); } 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)); } /* --------------------------------------------------------------------------------------- *\ \* ======================================================================================= */