maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 3.18 kB
CSS
.m-gallery[data-v-274971b2]{display:flex;position:relative;overflow:hidden}.m-gallery.--has-background-color[data-v-274971b2]{background-color:var(--gallery-background-color)}.m-gallery__hidden[data-v-274971b2]{display:none}.m-gallery.--radius[data-v-274971b2]{border-radius:var(--maz-radius)}.m-gallery__item[data-v-274971b2]{border-inline-start-width:2px;border-color:var(--gallery-separator-color);width:100%;height:50%;margin:0;padding:0;position:absolute;top:0;overflow:hidden}.m-gallery__item--1[data-v-274971b2]{height:100%;left:0}.m-gallery__item--1[data-v-274971b2]:not(:last-child){width:50%}.m-gallery__item--2[data-v-274971b2]{width:50%;height:50%;left:50%}.m-gallery__item--2[data-v-274971b2]:last-child{height:100%}.m-gallery__item--2[data-v-274971b2]:nth-last-child(4){width:25%}.m-gallery__item--3[data-v-274971b2]{width:25%;top:50%;left:50%}.m-gallery__item--3[data-v-274971b2]:last-child{width:50%}.m-gallery__item--3[data-v-274971b2]:nth-last-child(3){top:0;left:75%}.m-gallery__item--4[data-v-274971b2]{border-top-width:2px;border-color:var(--gallery-separator-color);width:25%;top:50%;left:50%}.m-gallery__item--4[data-v-274971b2]:last-child{width:25%;left:75%}.m-gallery__item--5[data-v-274971b2]{border-top-width:2px;border-color:var(--gallery-separator-color);width:25%;top:50%;left:75%}.m-gallery__item[data-v-274971b2]:first-child{border-left:0}.m-gallery__item--3[data-v-274971b2]:last-child,.m-gallery__item--3[data-v-274971b2]:nth-last-child(2),.m-gallery__item--4[data-v-274971b2]:last-child,.m-gallery__item--5[data-v-274971b2]{border-top-width:2px;border-color:var(--gallery-separator-color)}.m-gallery__item__image[data-v-274971b2]{background-position:50%;background-repeat:no-repeat;background-size:cover;width:100%;max-width:100%;height:100%}.m-gallery__remaining-layer[data-v-274971b2]{background-color:hsl(var(--maz-overlay)/.3);--maz-tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--maz-tw-backdrop-blur)var(--maz-tw-backdrop-brightness)var(--maz-tw-backdrop-contrast)var(--maz-tw-backdrop-grayscale)var(--maz-tw-backdrop-hue-rotate)var(--maz-tw-backdrop-invert)var(--maz-tw-backdrop-opacity)var(--maz-tw-backdrop-saturate)var(--maz-tw-backdrop-sepia);backdrop-filter:var(--maz-tw-backdrop-blur)var(--maz-tw-backdrop-brightness)var(--maz-tw-backdrop-contrast)var(--maz-tw-backdrop-grayscale)var(--maz-tw-backdrop-hue-rotate)var(--maz-tw-backdrop-invert)var(--maz-tw-backdrop-opacity)var(--maz-tw-backdrop-saturate)var(--maz-tw-backdrop-sepia);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.m-gallery__remaining-layer span[data-v-274971b2]{--maz-tw-text-opacity:1;color:rgb(255 255 255/var(--maz-tw-text-opacity,1));font-size:1.875rem;line-height:2.25rem}.m-gallery__empty-layer[data-v-274971b2]{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;width:100%;color:hsl(var(--maz-foreground)/var(--maz-tw-text-opacity,1));justify-content:center;align-items:center;display:flex}.m-gallery__empty-layer[data-v-274971b2]:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400)/var(--maz-tw-bg-opacity,1))}