@pacem/pacem-theme-css 0.0.0-stage → 2.0.0-abel

package/src/plus/carousel.css

@@ -0,0 +1,327 @@
+/* Carousel. carousel.less and gallery.less declare the same top-level variables (@padding, @height_block, @bg_color,
+   @duration...): Less variables are global and lazy, so the carousel of the shipped theme uses the values of
+   gallery.less, the last ones: blocks 75vh tall (not --pacem-height-block), a transparent background, .333s transitions
+   (.1332s delays, .05328s second delays). */
+.pacem-carousel {
+    background-color: transparent;
+    min-height: 75vh;
+
+    .pacem-carousel-item {
+        .pacem-carousel-splash {
+            border: solid rgb(from var(--pacem-color-background) r g b / 25%);
+            border-width: round(calc(var(--pacem-grid-spacing) / 3), 1px) 0 0 0;
+            min-height: 75vh;
+            position: relative;
+            box-sizing: border-box;
+            display: block;
+            /* (fade(transparent, 85%): black) */
+            box-shadow: inset 0 -15vh 15vh rgba(0,0,0,0.85);
+            background-origin: border-box;
+        }
+
+        h3 {
+            font-family: var(--pacem-font-main);
+            font-weight: var(--pacem-font-main-weight);
+            font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+            margin-bottom: var(--pacem-grid-spacing);
+        }
+
+        div.paragraph {
+            padding: 0 0 var(--pacem-grid-spacing) 0;
+        }
+
+        a.in-depth {
+            font-family: var(--pacem-font-main);
+            font-size: calc(1rem * var(--pacem-font-main-rem-factor));
+            display: inline-block;
+            line-height: calc(var(--pacem-grid-spacing) * 3 / 4);
+            padding-right: var(--pacem-grid-spacing);
+            background-position: right center;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+
+        .oblo {
+            width: 20vw;
+            min-height: 12vw;
+            flex: 0 0 20vw;
+            background-color: #000;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            box-shadow: inset 0 0 var(--pacem-grid-spacing) #000;
+        }
+
+        > pacem-a {
+            display: block;
+        }
+
+        /* .Spaced(): round(block height * .333), or twice the spacing. (The mixin resolves @height_block in the scope of
+           theme-dark.less, where it is 50vh: 17vh) */
+        &.spaced {
+            margin-top: 17vh;
+
+            &.less {
+                margin-top: calc(2 * var(--pacem-grid-spacing));
+            }
+        }
+
+        .floating.image {
+            float: left;
+            display: inline-block;
+            width: 116px;
+            height: 116px;
+            background-position: 0 0;
+            background-repeat: no-repeat;
+            background-size: contain;
+            margin: 0 var(--pacem-grid-spacing) var(--pacem-grid-spacing) 0;
+            background-image: url(../images/cms/img_placeholder.svg);
+        }
+
+        h3 {
+            font-family: var(--pacem-font-main);
+            font-weight: 400;
+            font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+            margin-bottom: calc(var(--pacem-grid-spacing) / 2);
+        }
+
+        :is(p, div.paragraph) {
+            padding: 0 var(--pacem-grid-spacing) var(--pacem-grid-spacing) 0;
+            font-size: 1.25em;
+        }
+    }
+
+    .pacem-carousel-item {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        top: 0;
+        left: 0;
+
+        .pacem-carousel-content {
+            position: relative;
+            width: var(--pacem-width-desktop);
+            margin: auto;
+
+            .pacem-carousel-caption {
+                position: absolute;
+                background-clip: padding-box;
+                bottom: var(--pacem-grid-spacing);
+                left: var(--pacem-grid-spacing);
+                padding: var(--pacem-grid-spacing) var(--pacem-grid-spacing) 0 var(--pacem-grid-spacing);
+                box-sizing: border-box;
+                text-shadow: 0 4px transparent;
+                color: var(--pacem-theme-light);
+                font-family: var(--pacem-font-main);
+                font-size: calc(1.5rem * var(--pacem-font-main-rem-factor));
+                /* @uppercase_carousels */
+                text-transform: var(--pacem-transform-carousel);
+            }
+        }
+    }
+}
+
+/* animations */
+.pacem-carousel {
+    position: relative;
+
+    > .pacem-carousel-item {
+        .pacem-carousel-splash {
+            transition: transform cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity linear;
+            transition-delay: .1332s;
+            transition-duration: .333s;
+            transform: translateX(100%);
+            opacity: 0;
+        }
+
+        .pacem-carousel-caption {
+            transition: transform ease-in, opacity linear;
+            transition-duration: .333s;
+            transition-delay: .1332s;
+            transform: translateX(0) translateZ(0);
+            opacity: 0;
+
+            :is(h3, .paragraph) {
+                transition: transform linear, opacity linear;
+                transition-duration: .1332s;
+                transition-delay: .05328s;
+                transform: translateY(calc(.5 * var(--pacem-grid-cell))) translateZ(0);
+                opacity: 0;
+            }
+
+            .paragraph {
+                transition-delay: -.04672s;
+            }
+        }
+
+        &.pacem-carousel-previous {
+            .pacem-carousel-splash {
+                transform: translateX(-100%) translateZ(0);
+            }
+
+            .pacem-carousel-caption {
+                transform: translateX(0) translateZ(0);
+            }
+        }
+
+        &.pacem-carousel-focus {
+            z-index: 2;
+
+            .pacem-carousel-splash {
+                transform: translateX(0) translateZ(0);
+                opacity: 1;
+            }
+
+            .pacem-carousel-caption {
+                transform: translateX(0) translateZ(0);
+                opacity: 1;
+
+                :is(h3, .paragraph) {
+                    transform: translateY(0) translateZ(0);
+                    opacity: 1;
+                    transition-delay: .333s;
+                }
+
+                .paragraph {
+                    transition-delay: .433s;
+                }
+            }
+        }
+    }
+}
+
+pacem-carousel {
+    position: relative;
+    display: block;
+}
+
+/* #region adapter: previous and next buttons grid cell / 1.414 wide; dashboard spacing * .75 tall, 2px borders */
+.pacem-carousel-adapter {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+
+    pacem-button[pacem] {
+        border: none;
+        position: absolute;
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+        font-size: 0;
+        min-height: 0;
+        min-width: 0;
+        color: var(--pacem-color-primary);
+
+        &:is(.pacem-adapter-next, .pacem-adapter-previous) {
+            > button {
+                border: none;
+            }
+
+            width: calc(var(--pacem-grid-cell) / 1.414);
+            height: calc(var(--pacem-grid-cell) / 1.414);
+            bottom: 37.5vh;
+            margin-top: calc(var(--pacem-grid-cell) / -2.828);
+            text-shadow: 0 4px transparent;
+        }
+
+        &.pacem-adapter-previous {
+            left: calc(var(--pacem-grid-spacing) / 3);
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'chevron_left';
+                font-size: calc(var(--pacem-grid-cell) / 1.414);
+            }
+        }
+
+        &.pacem-adapter-next {
+            right: calc(var(--pacem-grid-spacing) / 3);
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'chevron_right';
+                font-size: calc(var(--pacem-grid-cell) / 1.414);
+            }
+        }
+    }
+
+    .pacem-adapter-dashboard {
+        transform: translateY(calc(var(--pacem-grid-spacing) / 3));
+        display: flex;
+        width: 100%;
+        height: calc(var(--pacem-grid-spacing) * .75);
+        position: absolute;
+        left: 0;
+        justify-content: center;
+        list-style-type: none;
+        flex-direction: row;
+
+        > li {
+            flex-grow: 0;
+            flex-shrink: 0;
+            width: calc(var(--pacem-grid-spacing) * .75 * 1.125);
+            font-size: 0;
+            display: inline-block;
+        }
+
+        :is(.pacem-adapter-page, .pacem-play-pause) {
+            cursor: pointer;
+            margin: 0 auto;
+            padding: 0;
+            width: calc(var(--pacem-grid-spacing) * .75 - 4px);
+            height: calc(var(--pacem-grid-spacing) * .75 - 4px);
+            border: 2px solid var(--pacem-theme-light);
+            border-radius: 50%;
+            display: block;
+            background: transparent;
+            position: relative;
+            z-index: 3;
+            font-size: 0;
+            box-sizing: content-box;
+        }
+
+        .pacem-play-pause {
+            &:is(.playing, .paused)::before {
+                font-size: calc(var(--pacem-grid-spacing) * .75 - 6px);
+                top: 1px;
+                left: 1px;
+            }
+
+            &.playing::before {
+                /* .Icon(): icons.css */
+                content: 'play_arrow';
+            }
+
+            &.paused::before {
+                /* .Icon(): icons.css */
+                content: 'pause';
+            }
+        }
+
+        .pacem-adapter-page {
+            &::before {
+                position: absolute;
+                top: 1px;
+                left: 1px;
+                width: calc(var(--pacem-grid-spacing) * .75 - 6px);
+                height: calc(var(--pacem-grid-spacing) * .75 - 6px);
+                display: block;
+                border-radius: 50%;
+                content: '';
+                background-color: var(--pacem-theme-light);
+                transition: transform .2s ease-in;
+                transform-origin: calc((var(--pacem-grid-spacing) * .75 - 6px) * .5) calc((var(--pacem-grid-spacing) * .75 - 6px) * .5);
+                transform: scale(0);
+                z-index: -3;
+            }
+
+            &.pacem-adapter-active::before {
+                transform: scale(1);
+            }
+        }
+    }
+}
+/* #endregion */

package/src/plus/datagrid.css

@@ -0,0 +1,68 @@
+/* datagrid/index.less and datagrid/headcell.less (datagrid/datacell.less has no declarations) */
+pacem-datagrid {
+    display: block;
+    /* scrollable content (horizontally) */
+    overflow: auto;
+
+    .pacem-datatable {
+        overflow: auto;
+    }
+
+    &.datagrid-noborders .pacem-datatable {
+        border-width: 0;
+
+        .pacem-datacell.datacell-lastrow {
+            border-bottom-width: 0;
+        }
+
+        .pacem-footcell {
+            border-top: 1px solid var(--pacem-color-border);
+            border-bottom-width: 0;
+        }
+    }
+
+    &.datagrid-no-sideborders .pacem-datatable {
+        border-left-width: 0;
+        border-right-width: 0;
+    }
+
+    &.datagrid-norows .pacem-datatable .pacem-datarow {
+        pointer-events: none !important;
+        display: none !important;
+    }
+}
+
+pacem-datacolumn {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-datatable pacem-headcell.pacem-headcell {
+    display: grid;
+    grid-template-columns: 1fr auto auto auto;
+    position: relative;
+
+    > .headcell-sort {
+        margin: 0;
+        text-transform: none;
+        grid-column: 2;
+
+        &::before {
+            line-height: .6;
+            vertical-align: middle;
+        }
+    }
+
+    > .headcell-actions {
+        grid-column: 3;
+    }
+
+    > .headcell-rescale {
+        grid-column: 4;
+        position: absolute;
+        right: 3px;
+        top: calc(var(--pacem-grid-spacing) / 3);
+        bottom: calc(var(--pacem-grid-spacing) / 3);
+        border-right: 1px dashed var(--pacem-color-border);
+    }
+}

package/src/plus/gallery.css

@@ -0,0 +1,186 @@
+/* Gallery: images 75vh tall and as wide as the desktop content (.GalleryImage()); transitions .333s (.1332s delays). */
+pacem-gallery {
+    pacem-slideshow {
+        min-height: 75vh;
+    }
+
+    /* (Less also emitted `::part(lightbox-wrapper).pacem-shown`, an invalid selector: not ported) */
+    pacem-lightbox.pacem-gallery {
+        &::part(lightbox) {
+            margin: 0 auto;
+            width: var(--pacem-width-desktop);
+            height: 75vh;
+            padding: 0;
+            box-shadow: none;
+            background: transparent;
+            backdrop-filter: none;
+        }
+
+        &::part(scrollable) {
+            border: none;
+            position: static;
+        }
+
+        pacem-img {
+            width: var(--pacem-width-desktop);
+            height: 75vh;
+            display: block;
+        }
+    }
+}
+
+.pacem-gallery-hero-target {
+    /* .GalleryImage() */
+    margin: 0 auto;
+    background-color: transparent;
+    width: var(--pacem-width-desktop);
+    height: 75vh;
+    padding: 0;
+    position: fixed;
+    top: 12.5vh;
+    left: calc(.5 * (100vw - var(--pacem-width-desktop)));
+    pointer-events: none;
+    opacity: 0;
+    z-index: var(--pacem-zindex-lightbox);
+}
+
+/* animations */
+.pacem-gallery .pacem-gallery-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    justify-content: stretch;
+
+    .pacem-gallery-splash {
+        transition: transform cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity linear;
+        transition-delay: .1332s;
+        transition-duration: .333s;
+        /* gallery-next (default) */
+        transform: translateX(calc((100vw - var(--pacem-width-desktop)) * .5 + var(--pacem-width-desktop)));
+        opacity: 0;
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .pacem-gallery-caption {
+        transition: transform ease-in, opacity linear;
+        transition-duration: .333s;
+        transition-delay: .1332s;
+        transform: translateY(0) translateZ(0);
+        opacity: 0;
+        grid-column: 1;
+        grid-row: 1;
+        align-self: end;
+        justify-self: center;
+        margin-bottom: calc(var(--pacem-grid-spacing) / 3);
+
+        &.gallery-caption-default {
+            background-color: rgb(from var(--pacem-theme-dark) r g b / 70%);
+            padding: calc(var(--pacem-grid-spacing) / 3) var(--pacem-grid-spacing);
+            text-align: center;
+            border-radius: var(--pacem-border-radius);
+
+            :is(.paragraph, .gallery-caption-text) {
+                color: var(--pacem-theme-light);
+            }
+        }
+
+        :is(.paragraph, .gallery-caption-text) {
+            transition: transform linear, opacity linear;
+            transition-duration: .1332s;
+            transition-delay: .05328s;
+            transform: translateY(calc(.05 * var(--pacem-grid-cell))) translateZ(0);
+            opacity: 0;
+        }
+    }
+
+    &.pacem-gallery-previous {
+        .pacem-gallery-splash {
+            transform: translateX(calc(-1 * (100vw - (100vw - var(--pacem-width-desktop)) * .5))) translateZ(0);
+        }
+
+        .pacem-gallery-caption {
+            transform: translateX(0) translateZ(0);
+        }
+    }
+
+    &.pacem-gallery-focus {
+        z-index: 2;
+
+        .pacem-gallery-splash {
+            transform: translateX(0) translateZ(0);
+            opacity: 1;
+        }
+
+        .pacem-gallery-caption {
+            transform: translateY(0) translateZ(0);
+            opacity: 1;
+
+            :is(.paragraph, .gallery-caption-text) {
+                transform: translateY(0) translateZ(0);
+                opacity: 1;
+                transition-delay: .333s;
+            }
+        }
+    }
+}
+
+/* adapter: previous and next buttons grid cell / 1.414 wide */
+.pacem-gallery pacem-adapter {
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    bottom: 0;
+    left: calc(-0.5 * (100vw - var(--pacem-width-desktop)));
+
+    pacem-button[pacem] {
+        /* .Btn() */
+        border: none;
+        position: absolute;
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        margin: 0;
+        font-size: 0;
+        min-height: 0;
+        min-width: 0;
+        color: var(--pacem-color-primary);
+
+        &:is(.pacem-adapter-next, .pacem-adapter-previous) {
+            width: calc(var(--pacem-grid-cell) / 1.414);
+            height: calc(var(--pacem-grid-cell) / 1.414);
+            bottom: 37.5vh;
+            margin-top: calc(var(--pacem-grid-cell) / -2.828);
+            text-shadow: 0 4px transparent;
+        }
+
+        &.pacem-adapter-previous {
+            left: calc(var(--pacem-grid-spacing) / 3);
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'chevron_left';
+                font-size: calc(var(--pacem-grid-cell) / 1.414);
+                left: 0;
+                top: 0;
+            }
+        }
+
+        &.pacem-adapter-next {
+            right: calc(var(--pacem-grid-spacing) / 3);
+
+            &::before {
+                /* .Icon(): icons.css */
+                content: 'chevron_right';
+                font-size: calc(var(--pacem-grid-cell) / 1.414);
+                left: 0;
+                top: 0;
+            }
+        }
+    }
+
+    .pacem-adapter-dashboard {
+        display: none !important;
+    }
+}

package/src/plus/icons.css

@@ -0,0 +1,25 @@
+/* .Icon() (theme-dark.less): the declarations shared by the icons of the folder (see scaffolding/icons.css). */
+.pacem-carousel-adapter pacem-button[pacem].pacem-adapter-previous::before,
+.pacem-carousel-adapter pacem-button[pacem].pacem-adapter-next::before,
+.pacem-carousel-adapter .pacem-adapter-dashboard .pacem-play-pause.playing::before,
+.pacem-carousel-adapter .pacem-adapter-dashboard .pacem-play-pause.paused::before,
+.pacem-gallery pacem-adapter pacem-button[pacem].pacem-adapter-previous::before,
+.pacem-gallery pacem-adapter pacem-button[pacem].pacem-adapter-next::before,
+.pacem-editing pacem-button.pacem-edit-button::before {
+    position: absolute;
+    display: inline-block;
+    line-height: 1;
+    text-align: center;
+    font-family: var(--pacem-font-icons);
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'liga';
+    transition: font-variation-settings .25s var(--pacem-easing-in-out-sine);
+    font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}

package/src/plus/index.css

@@ -0,0 +1,7 @@
+/* plus, same order as theme/less/pacem/plus/index.less (icons.css: the .Icon() declarations of the folder). */
+@import "icons.css";
+@import "carousel.css";
+@import "gallery.css";
+/* edit, modal-form, context-menu, router-hash-state */
+@import "misc.css";
+@import "datagrid.css";