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

package/src/ui/menu.css

@@ -0,0 +1,386 @@
+/*#region OVERLAPPING MENU*/
+pacem-menu {
+    display: block;
+    width: 0;
+    overflow: visible;
+}
+
+pacem-menu,
+pacem-button.pacem-menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--pacem-zindex-menu);
+}
+
+.pacem-menu {
+    display: grid;
+    /* header, toolbar, main, toolbar, footer */
+    grid-template-rows: var(--pacem-layout-header-height) var(--pacem-layout-toolbar-height) 1fr var(--pacem-layout-toolbar-height) var(--pacem-layout-footer-height);
+    width: 100vw;
+    height: 100vh;
+    transition: transform .3s cubic-bezier(0.39, 0.575, 0.565, 1) .2s, background-color .25s linear .1s;
+    background-color: rgba(0,0,0,0);
+
+    nav {
+        grid-row: 1/6;
+        position: relative;
+        /* .Background(): the theme background (e.g. a dotted grid) */
+        background-image: var(--pacem-body-background-image);
+        background-size: var(--pacem-body-background-size);
+        background-attachment: var(--pacem-body-background-attachment);
+        background-color: var(--pacem-menu-nav-background);
+        overflow: auto;
+        width: 33vw;
+        min-width: var(--pacem-menu-width);
+        box-sizing: border-box;
+        padding: var(--pacem-grid-cell) 0 var(--pacem-grid-spacing) 0;
+        transition: transform .325s cubic-bezier(0.39, 0.575, 0.565, 1) .5s;
+        border-right: 1px solid rgb(from var(--pacem-color-default) r g b / 10%);
+
+        .pacem-menu-group, .menu-group {
+            padding-left: var(--pacem-grid-spacing);
+            margin-bottom: calc(var(--pacem-grid-spacing) / 3);
+
+            pacem-button, .pacem-button {
+                margin: 0;
+            }
+
+            &.group-active .pacem-icon {
+                color: var(--pacem-menu-link-active-color);
+            }
+        }
+
+        .pacem-menu-item, .menu-item {
+
+            pacem-button, button, pacem-a, a {
+                display: block;
+                cursor: pointer;
+                box-sizing: border-box;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            pacem-button,
+            pacem-a.pacem-button {
+                margin: 0;
+            }
+
+            pacem-button {
+                padding: calc(.25 * var(--pacem-grid-spacing)) var(--pacem-grid-spacing) calc(.25 * var(--pacem-grid-spacing)) calc(2 * var(--pacem-grid-spacing));
+            }
+
+            pacem-a, a {
+                padding: calc(.25 * var(--pacem-grid-spacing)) var(--pacem-grid-spacing) calc(.25 * var(--pacem-grid-spacing)) calc(var(--pacem-grid-spacing) - 3px);
+                font-family: var(--pacem-menu-link-fontfamily);
+                font-size: var(--pacem-menu-link-fontsize);
+                border-left: 3px solid rgb(from var(--pacem-menu-link-active-color) r g b / 0%);
+            }
+
+            pacem-button::before {
+                left: round(calc(5 * var(--pacem-grid-spacing) / 6), 1px);
+                top: round(calc(var(--pacem-grid-spacing) / 8), 1px);
+            }
+
+            pacem-button, button, pacem-a, a {
+                text-align: left;
+                text-transform: none;
+                color: var(--pacem-menu-link-color);
+                background-color: transparent;
+
+                &:hover {
+                    color: var(--pacem-menu-link-hover-color);
+                }
+            }
+
+            &:first-child {
+                border-top: none;
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .item-active,
+            .active {
+                color: var(--pacem-menu-link-active-color);
+                background-color: var(--pacem-menu-link-active-backgroundcolor);
+                cursor: default;
+                border-color: var(--pacem-menu-link-active-decorcolor);
+
+                &:hover {
+                    color: var(--pacem-menu-link-active-color);
+                }
+            }
+        }
+
+        .item-space {
+            margin-top: calc(var(--pacem-grid-spacing) / 1.5);
+        }
+
+        .item-separate {
+            border-top: 1px solid var(--pacem-color-border);
+            padding-top: var(--pacem-grid-spacing);
+        }
+
+        pacem-collapse :is(.pacem-menu-item, .menu-item) :is(pacem-a, a) {
+            padding-left: calc(2 * var(--pacem-grid-spacing));
+        }
+
+        :--blur & {
+            background-color: rgb(from var(--pacem-menu-nav-background) r g b / 50%);
+            backdrop-filter: blur(6px);
+        }
+    }
+
+    &:is(.menu-close, .pacem-hidden) {
+        /* reset from .pacem-hidden */
+        opacity: 1;
+        transform: translateX(-100%) translateY(0) translateZ(0);
+
+        nav {
+            transform: translateX(-100%) translateY(0) translateZ(0);
+        }
+    }
+
+    &:is(.menu-open, .pacem-shown) {
+        background-color: var(--pacem-color-lightbox-back);
+        transform: translateX(0) translateY(0) translateZ(0);
+
+        nav {
+            transform: translateX(0) translateY(0) translateZ(0);
+        }
+    }
+}
+
+pacem-button.pacem-menu:is(.pacem-back, .pacem-hamburger) {
+    /* reset from pacem-button */
+    padding: 0;
+    min-width: 0;
+    line-height: normal;
+    font-size: 0;
+    border: none;
+    top: 0;
+    cursor: pointer;
+    height: var(--pacem-menu-hamburger-button-size);
+    width: var(--pacem-menu-hamburger-button-size);
+    background: center center no-repeat;
+    background-size: calc(.8 * var(--pacem-menu-hamburger-button-size));
+    margin: 0;
+
+    button.pacem-button {
+        font-size: 0;
+    }
+}
+
+pacem-button.pacem-menu {
+    --pacem--hb-sz: round(calc(.5 * var(--pacem-menu-hamburger-button-size)), 1px);
+    --pacem--hb-pad: round(calc(.5 * (var(--pacem-menu-hamburger-button-size) - var(--pacem--hb-sz))), 1px);
+
+    &:is(.pacem-hamburger, .pacem-back) {
+        top: 0;
+        left: 0;
+
+        &::before {
+            top: var(--pacem--hb-pad);
+            left: var(--pacem--hb-pad);
+            width: var(--pacem--hb-sz);
+            height: var(--pacem--hb-sz);
+        }
+    }
+
+    &.pacem-back::before,
+    &.pacem-hamburger::before {
+        /* .Icon() */
+        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;
+        font-size: var(--pacem--hb-sz);
+    }
+
+    &.pacem-back {
+        left: calc(var(--pacem-menu-width) - var(--pacem-menu-hamburger-button-size));
+        transform: translateX(calc(-1 * var(--pacem-menu-hamburger-button-size) - var(--pacem-menu-width)));
+        transition: transform .25s ease-out .075s, opacity .3s;
+
+        &::before {
+            content: 'chevron_left';
+        }
+
+        &:is(.menu-open, .pacem-shown) {
+            transition-delay: .625s;
+            transform: translateX(0) translateY(0) translateZ(0);
+        }
+    }
+
+    &.pacem-hamburger {
+        transition: transform .25s ease-in-out, opacity .3s;
+        left: 0;
+
+        &::before {
+            content: 'menu';
+        }
+
+        &:is(.menu-open, .pacem-shown) {
+            transition-delay: .4s;
+            transform: scale(1) translateZ(0);
+        }
+
+        &:is(.menu-close, .pacem-hidden) {
+            transform: scale(0) translateZ(0);
+        }
+    }
+}
+
+/* toolbar on top of the layout? Shift the hamburger button down. */
+.pacem-body[headbar]:not([header]) pacem-button.pacem-menu.pacem-hamburger,
+.pacem-body[headbar-prepend] pacem-button.pacem-menu.pacem-hamburger {
+    top: var(--pacem-layout-toolbar-height);
+}
+
+/*#endregion*/
+
+/*#region ASIDE MENU */
+@media screen and (--pacem-lg) {
+
+    pacem-menu {
+        font-size: .8em;
+
+        .pacem-menu {
+            width: var(--pacem-menu-width);
+
+            nav {
+                transition-delay: 0.2s;
+                width: var(--pacem-menu-width);
+            }
+
+            &:is(.menu-open, .pacem-shown) {
+                transform: translateX(-100%) translateY(0) translateZ(0);
+
+                nav {
+                    transition-delay: 0s;
+                    transform: translateX(100%) translateY(0) translateZ(0);
+                }
+            }
+        }
+
+        &.menu-sync {
+            .pacem-menu {
+                nav {
+                    transition-delay: 0.2s;
+                }
+
+                &:is(.menu-open, .pacem-shown) nav {
+                    transition-delay: .4s;
+                }
+
+                nav {
+                    backdrop-filter: none;
+                    grid-row: 1/9;
+                    padding-top: calc(var(--pacem-grid-spacing) + var(--pacem-layout-header-height));
+                    padding-bottom: calc(var(--pacem-grid-spacing) + var(--pacem-layout-footer-height));
+                }
+            }
+
+            &.menu-outset nav {
+                padding-top: var(--pacem-menu-nav-outset-spacing);
+                padding-bottom: var(--pacem-menu-nav-outset-spacing);
+            }
+
+            &:not(.menu-outset) {
+                z-index: calc(var(--pacem-zindex-header) - 10);
+
+                .pacem-menu nav {
+                    background: none;
+                }
+            }
+        }
+    }
+
+    /* #region all grid row template configurations */
+    /* header 1/2, header 2/2, toolbar, main, toolbar, footer 1/3, footer 2/3, footer 3/3 */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close) pacem-menu.menu-sync .pacem-menu {
+        grid-template-rows: var(--pacem-layout-toolbar-height) max(0px, calc(var(--pacem-layout-header-height) - var(--pacem-layout-toolbar-height))) var(--pacem-layout-toolbar-height) 1fr var(--pacem-layout-toolbar-height) max(0px, calc(var(--pacem-layout-footer-height) - var(--pacem-layout-toolbar-height))) var(--pacem-layout-toolbar-height) auto;
+    }
+
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close)[bigfooter] pacem-menu.menu-sync .pacem-menu,
+    pacem-menu.menu-bigfooter.menu-sync .pacem-menu {
+        grid-template-rows: var(--pacem-layout-toolbar-height) calc(var(--pacem-layout-header-height) - var(--pacem-layout-toolbar-height)) var(--pacem-layout-toolbar-height) 1fr var(--pacem-layout-toolbar-height) calc(var(--pacem-layout-footer-height) - var(--pacem-layout-toolbar-height)) calc(var(--pacem-layout-bigfooter-height) - var(--pacem-layout-footer-height)) var(--pacem-layout-toolbar-height);
+    }
+    /* #endregion */
+
+    /* layout with a header? */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close)[header]:not(.sticky-header-fade) pacem-menu:not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu:not(.menu-outset).menu-header.menu-sync .pacem-menu nav {
+        padding-top: var(--pacem-grid-spacing);
+        grid-row-start: 3;
+    }
+
+    /* layout with header AND headbar? */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close)[header]:is([headbar], [headbar-prepend]):not(.sticky-header-fade) pacem-menu:not(.menu-outset).menu-sync .pacem-menu nav,
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close):is([headbar], [headbar-prepend]) pacem-menu.menu-header:not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu.menu-header:is(.menu-headbar, .menu-headbar-prepend):not(.menu-outset).menu-sync .pacem-menu nav {
+        grid-row-start: 4;
+    }
+
+    /* headbars without header? */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close):is([headbar], [headbar-prepend]):is(:not([header]), .sticky-header-fade) pacem-menu:not(.menu-header):not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu:is(.menu-headbar, .menu-headbar-prepend):not(.menu-header):not(.menu-outset).menu-sync .pacem-menu nav {
+        grid-row-start: 2;
+    }
+
+    /* layout with a footer? */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close):is([footer], [bigfooter]) pacem-menu:not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu:is(.menu-footer, .menu-bigfooter):not(.menu-outset).menu-sync .pacem-menu nav {
+        grid-row-end: 6;
+    }
+
+    /* layout with footer AND footbar? */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close):is([footer], [bigfooter]):is([footbar], [footbar-append]) pacem-menu:not(.menu-outset).menu-sync .pacem-menu nav,
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close):is([footbar], [footbar-append]) pacem-menu:is(.menu-footer, .menu-bigfooter):not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu:is(.menu-footer, .menu-bigfooter):is(.menu-footbar, .menu-footbar-append):not(.menu-outset).menu-sync .pacem-menu nav {
+        grid-row-end: 5;
+    }
+
+    /* footbars without footer? */
+    .pacem-body.pacem-menu-open:not([footer]):not([bigfooter]):is([footbar], [footbar-append]) pacem-menu:not(.menu-footer):not(.menu-bigfooter):not(.menu-outset).menu-sync .pacem-menu nav,
+    pacem-menu:is(.menu-footbar, .menu-footbar-append):not(.menu-footer):not(.menu-bigfooter):not(.menu-outset).menu-sync .pacem-menu nav {
+        grid-row-end: 7;
+    }
+
+    /* toolbar on top? Then move the buttons down */
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close)[headbar]:not([header]) pacem-button.pacem-menu:is(.pacem-back, .pacem-hamburger),
+    .pacem-body:is(.pacem-menu-open, .pacem-menu-close)[headbar-prepend] pacem-button.pacem-menu:is(.pacem-back, .pacem-hamburger) {
+        top: var(--pacem-layout-toolbar-height);
+    }
+}
+
+.pacem-body.pacem-menu-close.sticky-header-fade pacem-button.pacem-menu.pacem-hamburger {
+    transform: translateY(calc(-1 * var(--pacem-layout-header-height)));
+}
+/* #endregion */
+
+.pacem-body.pacem-animations {
+    pacem-menu :is(.pacem-menu-item, .menu-item) :is(pacem-button, button, pacem-a, a) {
+        transition: background-color .2s, border-color ease-in .25s;
+    }
+
+    &.sticky-header-scroll pacem-button.pacem-menu.pacem-hamburger {
+        transition: transform var(--pacem-easing-out-sine) .3s, opacity .2s;
+        transition-delay: .25s;
+    }
+}

package/src/ui/pager.css

@@ -0,0 +1,133 @@
+pacem-pager {
+    display: block;
+
+    pacem-repeater.pacem-pager {
+        display: block;
+
+        .pacem-buttonset pacem-button.pacem-page {
+            min-width: calc(var(--pacem-grid-spacing) * 1.25);
+            height: var(--pacem-grid-spacing);
+            line-height: var(--pacem-grid-spacing);
+            font-family: var(--pacem-font-tech);
+            font-size: calc(.8rem * var(--pacem-font-tech-rem-factor));
+            transition: all var(--pacem-easing-in-out-sine) .125s;
+            border-radius: 0;
+
+            &.currentpage:not(.pacem-disabled) {
+                background: var(--pacem-color-primary);
+                color: var(--pacem-color-primary-inverse);
+
+                &:focus,
+                &:hover {
+                    background: hsl(from var(--pacem-color-primary) h s max(0, l - var(--pacem-button-hover-percentage)));
+
+                    :--glows & {
+                        text-shadow: 0 0 8px var(--pacem-color-primary-inverse);
+                    }
+                }
+            }
+
+            &:is(.firstpage, .previouspage, .nextpage, .lastpage) {
+                font-size: 0;
+
+                &::before {
+                    /* .Icon() */
+                    position: absolute;
+                    display: inline-block;
+                    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;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                    font-size: calc(1rem * var(--pacem-font-tech-rem-factor));
+                    line-height: var(--pacem-grid-spacing);
+                }
+            }
+
+            &.firstpage::before { content: 'first_page'; }
+            &.previouspage::before { content: 'chevron_left'; }
+            &.nextpage::before { content: 'chevron_right'; }
+            &.lastpage::before { content: 'last_page'; }
+        }
+    }
+
+    .pacem-buttonset {
+        padding: 0;
+
+        .pager-buttons {
+            display: flex;
+            flex-direction: row;
+            overflow: hidden;
+            border-radius: var(--pacem-border-radius);
+
+            :--shadows & {
+                box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+            }
+        }
+    }
+
+    /* see button.css */
+    &.pager-left .pacem-buttonset .pager-buttons { grid-area: left; }
+    &.pager-center .pacem-buttonset .pager-buttons { grid-area: center; }
+    &.pager-right .pacem-buttonset .pager-buttons { grid-area: right; }
+
+    &.pager-flat {
+        .pacem-buttonset .pager-buttons {
+            box-shadow: none;
+        }
+
+        pacem-repeater.pacem-pager .pacem-buttonset pacem-button.pacem-page {
+            background-color: transparent;
+            border-width: 0;
+            aspect-ratio: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: var(--pacem-border-button-radius);
+            min-width: var(--pacem-grid-spacing);
+            margin: 0 calc(var(--pacem-grid-spacing) * 0.125);
+            padding: 0;
+
+            /* .ColorPagerButton(default) */
+            &:not(.pacem-disabled) {
+                &:hover {
+                    background: var(--pacem-color-default-container);
+                    color: var(--pacem-color-default-container-inverse);
+                }
+
+                &:active {
+                    background: var(--pacem-color-default-container-hover);
+                    color: var(--pacem-color-default-container-inverse-hover);
+                }
+            }
+
+            &.currentpage:not(.pacem-disabled) {
+                &,
+                &:focus,
+                &:hover {
+                    background: var(--pacem-color-default-container);
+                    color: var(--pacem-color-default-container-inverse);
+                }
+
+                &:focus,
+                &:hover {
+                    :--glows & {
+                        text-shadow: 0 0 8px var(--pacem-color-default-container-inverse);
+                    }
+                }
+            }
+        }
+    }
+}

package/src/ui/progressbar.css

@@ -0,0 +1,137 @@
+/* Private properties:
+     --pacem--pb-t  thickness of the track (.ProgressBar())
+     --pacem--pb-c  bar color (.ProgressBarColoring()) */
+pacem-progressbar {
+    --pacem--pb-t: calc(var(--pacem-grid-spacing) / 2);
+    --pacem--pb-c: var(--pacem-color-default);
+    display: grid;
+    grid-template-areas: 'caption' 'bar';
+    align-items: center;
+    justify-content: stretch;
+
+    .progressbar-glow {
+        grid-area: bar;
+        display: none;
+        transform-origin: left center;
+
+        :--glows & {
+            display: block;
+            box-shadow: 0 0 calc(var(--pacem-grid-spacing) / 4) var(--pacem--pb-c);
+        }
+    }
+
+    .progressbar-track {
+        overflow: hidden;
+        grid-area: bar;
+        position: relative;
+
+        :--dark-scheme & {
+            background-color: rgb(from var(--pacem-theme-light) r g b / 10%);
+        }
+
+        :--light-scheme & {
+            background-color: rgb(from var(--pacem-theme-dark) r g b / 5%);
+        }
+
+        :--shadows & {
+            background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(255,255,255,0.05) 100%);
+        }
+
+        .progressbar-bar {
+            transform-origin: left center;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .progressbar-caption {
+        grid-area: caption;
+        display: block;
+        text-align: center;
+        font-family: var(--pacem-font-tech);
+        font-size: calc(1rem * var(--pacem-font-tech-rem-factor));
+    }
+
+    .progressbar-glow,
+    .progressbar-track {
+        border-radius: min(var(--pacem--pb-t) / 2, var(--pacem-border-radius));
+        height: var(--pacem--pb-t);
+    }
+
+    &.progressbar-large { --pacem--pb-t: var(--pacem-grid-spacing); }
+    &.progressbar-small { --pacem--pb-t: calc(var(--pacem-grid-spacing) / 4); }
+    &.progressbar-smaller { --pacem--pb-t: calc(var(--pacem-grid-spacing) / 6); }
+    &.progressbar-tiny { --pacem--pb-t: 2px; }
+    &.progressbar-thin { --pacem--pb-t: 1px; }
+
+    /* coloring */
+    .progressbar-bar {
+        background-color: var(--pacem--pb-c);
+
+        :--gradients & {
+            background: linear-gradient(to bottom, color-mix(in oklab, white 10%, var(--pacem--pb-c) 90%) 0%, var(--pacem--pb-c) 33%, var(--pacem--pb-c) 67%, color-mix(in oklab, black 10%, var(--pacem--pb-c) 90%) 100%);
+        }
+    }
+
+    &.progressbar-root { --pacem--pb-c: var(--pacem-color-root); }
+    &.progressbar-background { --pacem--pb-c: var(--pacem-color-background); }
+    &.progressbar-default { --pacem--pb-c: var(--pacem-color-default); }
+    &.progressbar-invert { --pacem--pb-c: var(--pacem-color-invert); }
+    &.progressbar-primary { --pacem--pb-c: var(--pacem-color-primary); }
+    &.progressbar-secondary { --pacem--pb-c: var(--pacem-color-secondary); }
+    &.progressbar-accent { --pacem--pb-c: var(--pacem-color-accent); }
+    &.progressbar-info { --pacem--pb-c: var(--pacem-color-info); }
+    &.progressbar-success { --pacem--pb-c: var(--pacem-color-success); }
+    &.progressbar-warning { --pacem--pb-c: var(--pacem-color-warning); }
+    &.progressbar-danger { --pacem--pb-c: var(--pacem-color-danger); }
+    &.progressbar-error { --pacem--pb-c: var(--pacem-color-error); }
+    &.progressbar-disabled { --pacem--pb-c: var(--pacem-color-disabled); }
+    &.progressbar-green { --pacem--pb-c: var(--pacem-color-green); }
+    &.progressbar-yellow { --pacem--pb-c: var(--pacem-color-yellow); }
+    &.progressbar-brown { --pacem--pb-c: var(--pacem-color-brown); }
+    &.progressbar-red { --pacem--pb-c: var(--pacem-color-red); }
+    &.progressbar-pink { --pacem--pb-c: var(--pacem-color-pink); }
+    &.progressbar-blue { --pacem--pb-c: var(--pacem-color-blue); }
+    &.progressbar-orange { --pacem--pb-c: var(--pacem-color-orange); }
+    &.progressbar-purple { --pacem--pb-c: var(--pacem-color-purple); }
+    &.progressbar-teal { --pacem--pb-c: var(--pacem-color-teal); }
+    &.progressbar-gray { --pacem--pb-c: var(--pacem-color-gray); }
+
+    /* caption positioning */
+    &.caption-left {
+        grid-template-columns: auto 1fr;
+        grid-template-areas: 'caption bar';
+
+        .progressbar-caption {
+            padding-right: calc(var(--pacem-grid-spacing) / 3);
+        }
+    }
+
+    &.caption-right {
+        grid-template-columns: 1fr auto;
+        grid-template-areas: 'bar caption';
+
+        .progressbar-caption {
+            padding-left: calc(var(--pacem-grid-spacing) / 3);
+        }
+    }
+
+    &.caption-bottom {
+        grid-template-areas: 'bar' 'caption';
+    }
+
+    &.progressbar-nocaption .progressbar-caption {
+        display: none !important;
+    }
+
+    &.progressbar-notrack .progressbar-track {
+        background: transparent;
+    }
+}
+
+.pacem-animations pacem-progressbar :is(.progressbar-bar, .progressbar-glow) {
+    transition: transform ease-out .3s;
+}

package/src/ui/shell.css

@@ -0,0 +1,4 @@
+/* ui (shell part): loader, menu, sidebar. */
+@import "loader.css";
+@import "menu.css";
+@import "sidebar.css";