@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/pager.less

@@ -0,0 +1,166 @@
+@import "../shared";
+
+@{P}-pager {
+    display: block;
+
+    @{P}-repeater.@{PCSS}-pager {
+        display: block;
+
+        .@{PCSS}-buttonset {
+
+            @{P}-button.@{PCSS}-page {
+                min-width: @grid_spacing * 1.25;
+                height: @grid_spacing;
+                line-height: @grid_spacing;
+                .FontTech(.8);
+                transition: all @easing_in_out_sine .125s;
+                border-radius: 0;
+
+                &.currentpage:not(.@{PCSS}-disabled) {
+                    @_clr: @color_primary;
+                    @_clr_fore: @color_primary_inv;
+
+                    background: @_clr;
+                    color: @_clr_fore;
+
+                    &:focus,
+                    &:hover {
+                        background: darken(@_clr, @button_hover_percentage);
+                    }
+
+                    &:focus when (@glows = true) {
+                        text-shadow: 0 0 8px @_clr_fore;
+                    }
+
+                    &:hover when (@glows = true) {
+                        text-shadow: 0 0 8px @_clr_fore;
+                    }
+                }
+
+                &.firstpage::before {
+                    .Icon('first_page');
+                }
+
+                &.previouspage::before {
+                    .Icon('chevron_left');
+                }
+
+                &.nextpage::before {
+                    .Icon('chevron_right');
+                }
+
+                &.lastpage::before {
+                    .Icon('last_page');
+                }
+
+                &.firstpage, &.previouspage, &.nextpage, &.lastpage {
+                    font-size: 0;
+
+                    &::before {
+                        left: 0;
+                        top: 0;
+                        width: 100%;
+                        height: 100%;
+                        .FontTechSize(1);
+                        line-height: @grid_spacing;
+                    }
+                }
+            }
+        }
+    }
+
+    .@{PCSS}-buttonset {
+        padding: 0;
+
+        .pager-buttons {
+            display: flex;
+            flex-direction: row;
+            overflow: hidden;
+            border-radius: @border_radius;
+        }
+    }
+
+    .@{PCSS}-buttonset .pager-buttons when (@shadows = true) {
+        box-shadow: 0 2px @grid_spacing / 3 rgba(0,0,0,0.5);
+    }
+    // see button.less
+    &.pager-left .@{PCSS}-buttonset .pager-buttons {
+        grid-area: left;
+    }
+
+    &.pager-center .@{PCSS}-buttonset .pager-buttons {
+        grid-area: center;
+    }
+
+    &.pager-right .@{PCSS}-buttonset .pager-buttons {
+        grid-area: right;
+    }
+
+    &.pager-flat {
+
+        .@{PCSS}-buttonset .pager-buttons when (@shadows = true) {
+            box-shadow: none;
+        }
+
+        @{P}-repeater.@{PCSS}-pager {
+
+            .@{PCSS}-buttonset {
+
+                @{P}-button.@{PCSS}-page {
+                    background-color: transparent;
+                    border-width: 0;
+                    aspect-ratio: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: @border_button_radius;
+                    min-width: @grid_spacing;
+                    margin: 0 @grid_spacing * 0.125;
+                    padding: 0;
+                    .ColorPagerButton(default);
+                }
+            }
+        }
+    }
+}
+
+.ColorPagerButton(@clr) {
+    .ColorPagerButton(@clr, @clr);
+}
+
+.ColorPagerButton(@clr, @clr_current) {
+    @__clr: @clr;
+    @_clr: @clr_current;
+
+    &:not(.@{PCSS}-disabled) {
+        //&:focus,
+        &:hover {
+            background: ~"var(--@{PCSS}-color-@{__clr}-container)";
+            color: ~"var(--@{PCSS}-color-@{__clr}-container-inverse)";
+        }
+
+        &:active {
+            background: ~"var(--@{PCSS}-color-@{__clr}-container-hover)";
+            color: ~"var(--@{PCSS}-color-@{__clr}-container-inverse-hover)";
+        }
+    }
+
+    &.currentpage:not(.@{PCSS}-disabled) {
+        background: ~"var(--@{PCSS}-color-@{_clr}-container)";
+        color: ~"var(--@{PCSS}-color-@{_clr}-container-inverse)";
+
+        &:focus,
+        &:hover {
+            background: ~"var(--@{PCSS}-color-@{_clr}-container)";
+            color: ~"var(--@{PCSS}-color-@{_clr}-container-inverse)";
+        }
+
+        &:focus when (@glows = true) {
+            text-shadow: 0 0 8px ~"var(--@{PCSS}-color-@{_clr}-container-inverse)";
+        }
+
+        &:hover when (@glows = true) {
+            text-shadow: 0 0 8px ~"var(--@{PCSS}-color-@{_clr}-container-inverse)";
+        }
+    }
+}

package/pacem/ui/dark/picture.less

@@ -0,0 +1,146 @@
+@import "../shared";
+
+@{P}-picture-source,
+@{P}-picture::part(source),
+@{P}-picture > picture > source {
+    .Inert();
+}
+
+@{P}-picture {
+    display: inline-block;
+
+    &::part(picture) {
+        display: flex;
+        flex-flow: row wrap;
+        align-content: stretch;
+        align-items: flex-start;
+        align-items: stretch;
+    }
+
+    &::part(img) {
+        flex: 1 1 100%;
+    }
+
+    > picture,
+    &::part(picture),
+    &::part(img),
+    > picture > img {
+        /*width: inherit;
+        height: inherit;*/
+        width: 100%;
+        height: 100%;
+        max-width: inherit;
+        min-width: inherit;
+        max-height: inherit;
+        min-height: inherit;
+    }
+
+    &::part(img),
+    > picture > img {
+        width: 100%;
+    }
+    // fitting
+    &.picture-auto {
+        &::part(img),
+        > picture > img {
+            object-fit: none;
+        }
+    }
+
+    &.picture-fill {
+        &::part(img),
+        > picture > img {
+            object-fit: fill;
+        }
+    }
+
+    &.picture-contain {
+        &::part(img),
+        > picture > img {
+            object-fit: contain;
+        }
+    }
+
+    &.picture-cover {
+        &::part(img),
+        > picture > img {
+            object-fit: cover;
+        }
+    }
+    // positioning
+    &.picture-right {
+        &.picture-top {
+            &::part(img),
+            > picture > img {
+                object-position: right top;
+            }
+        }
+
+        &.picture-middle {
+            &::part(img),
+            > picture > img {
+                object-position: right center;
+            }
+        }
+
+        &.picture-bottom {
+            &::part(img),
+            > picture > img {
+                object-position: right bottom;
+            }
+        }
+    }
+
+    &.picture-left {
+        &.picture-top {
+            &::part(img),
+            > picture > img {
+                object-position: left top;
+            }
+        }
+
+        &.picture-middle {
+            &::part(img),
+            > picture > img {
+                object-position: left center;
+            }
+        }
+
+        &.picture-bottom {
+            &::part(img),
+            > picture > img {
+                object-position: left bottom;
+            }
+        }
+    }
+
+    &.picture-center {
+        &.picture-top {
+            &::part(img),
+            > picture > img {
+                object-position: center top;
+            }
+        }
+
+        &.picture-middle {
+            &::part(img),
+            > picture > img {
+                object-position: center center;
+            }
+        }
+
+        &.picture-bottom {
+            &::part(img),
+            > picture > img {
+                object-position: center bottom;
+            }
+        }
+    }
+
+    &.picture-grayscale {
+        &::part(img),
+        > picture > img {
+            .Grayscale();
+        }
+    }
+}

package/pacem/ui/dark/progressbar.less

@@ -0,0 +1,167 @@
+@import "../shared";
+
+@{P}-progressbar {
+    display: grid;
+    grid-template-areas: 'caption' 'bar';
+    align-items: center;
+    justify-content: stretch;
+
+    .progressbar-glow {
+        grid-area: bar;
+        display: none;
+        transform-origin: left center;
+    }
+
+    @_glow_sz: @grid_spacing / 4;
+
+    & when (@glows = true) {
+
+        .progressbar-glow {
+            display: block;
+        }
+    }
+
+    .ProgressBar(@_thickness) {
+
+        .progressbar-glow,
+        .progressbar-track {
+
+            & when (@border_radius > 0) {
+                @_radius: min(@_thickness / 2, @border_radius );
+
+                border-radius: @_radius;
+            }
+
+            height: @_thickness;
+        }
+    }
+
+    .ProgressBarColoring(@clr) {
+
+        @_clr: @clr;
+        @_light: color-mix(in oklab, white 10%, @_clr 90%);
+        @_dark: color-mix(in oklab, black 10%, @_clr 90%);
+
+        .progressbar-bar when (@gradients = false) {
+            background-color: @_clr;
+        }
+
+        .progressbar-bar when (@gradients = true) {
+            .GradientVertical(0%, 33%, 67%, 100%, @_light, @_clr, @_clr, @_dark);
+        }
+
+        .progressbar-glow when (@glows = true) {
+            box-shadow: 0 0 @_glow_sz @_clr;
+        }
+    }
+
+    .progressbar-track {
+        overflow: hidden;
+        grid-area: bar;
+        position: relative;
+
+        & when (@dark_theme = true) {
+            background-color: fade(@color_light, 10);
+        }
+
+        & when (@dark_theme = false) {
+            background-color: fade(@color_dark, 5);
+        }
+
+        & when (@shadows = true) {
+            .GradientVertical(0%, 100%, rgba(0,0,0,0.25), rgba(255,255,255,0.05));
+        }
+
+        .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;
+        .FontTech(1rem);
+    }
+
+    .ProgressBar(@grid_spacing/2);
+
+    &.progressbar-large {
+        .ProgressBar(@grid_spacing);
+    }
+
+    &.progressbar-small {
+        .ProgressBar(@grid_spacing/4);
+    }
+
+    &.progressbar-smaller {
+        .ProgressBar(@grid_spacing/6);
+    }
+
+    &.progressbar-tiny {
+        .ProgressBar(2px);
+    }
+
+    &.progressbar-thin {
+        .ProgressBar(1px);
+    }
+    // coloring
+    .ProgressBarColoring(@color_default);
+
+
+    each(@all_colors, {
+        &.progressbar-@{value}{
+            .ProgressBarColoring(~"var(--@{PCSS}-color-@{value})");
+        }
+    });
+    // caption positioning
+    &.caption-left {
+        grid-template-columns: auto 1fr;
+        grid-template-areas: 'caption bar';
+
+        .progressbar-caption {
+            padding-right: @grid_spacing/3;
+        }
+    }
+
+    &.caption-right {
+        grid-template-columns: 1fr auto;
+        grid-template-areas: 'bar caption';
+
+        .progressbar-caption {
+            padding-left: @grid_spacing/3;
+        }
+    }
+
+    &.caption-bottom {
+        grid-template-areas: 'bar' 'caption';
+    }
+
+    &.progressbar-nocaption {
+
+        .progressbar-caption {
+            display: none !important;
+        }
+    }
+
+    &.progressbar-notrack {
+
+        .progressbar-track {
+            background: transparent;
+        }
+    }
+}
+
+.@{PCSS}-animations {
+    @{P}-progressbar {
+        .progressbar-bar,
+        .progressbar-glow {
+            transition: transform ease-out .3s;
+        }
+    }
+}

package/pacem/ui/dark/sidebar.less

@@ -0,0 +1,144 @@
+@import "../shared";
+
+@_lvl1_width: 2 * @grid_spacing;
+
+@{P}-sidebar {
+    @_zindex: @hamburger_z_index + 1;
+    @_lvl1_zindex: @_zindex + 1;
+    z-index: @_zindex;
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0;
+
+    &::part(drawer),
+    .sidebar-drawer {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: @_lvl1_width;
+        color: @sidebar_foreground;
+        background: @sidebar_background;
+        border-right: 1px solid @color_border;
+        box-sizing: border-box;
+        // initial state
+        transform: translateX(-$width);
+        opacity: 0;
+    }
+
+    &::part(open),
+    .sidebar-drawer.drawer-open {
+        // open state
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    // no-border
+    &.sidebar-noborder::part(drawer) {
+        border: 0;
+    }
+    // coloring
+
+    .Sidebar(@bg, @fore) {
+
+        &::part(drawer),
+        .sidebar-drawer {
+            .GradientVertical(0, 100%, @bg, darken(@bg, 20));
+            border-color: transparent;
+            color: @fore;
+        }
+    }
+
+    &.sidebar-primary {
+        .Sidebar(@color_primary, @color_primary_inv);
+    }
+
+    &.sidebar-secondary {
+        .Sidebar(@color_secondary, @color_secondary_inv);
+    }
+
+    &.sidebar-accent {
+        .Sidebar(@color_accent, @color_accent_inv);
+    }
+
+    &.sidebar-warning {
+        .Sidebar(@color_warning, @color_warning_inv);
+    }
+
+    &.sidebar-success {
+        .Sidebar(@color_success, @color_success_inv);
+    }
+
+    &.sidebar-danger {
+        .Sidebar(@color_danger, @color_danger_inv);
+    }
+
+    &.sidebar-error {
+        .Sidebar(@color_error, @color_error_inv);
+    }
+
+    &.sidebar-invert {
+        .Sidebar(@color_default, @color_default_inv);
+    }
+
+    &.sidebar-disabled {
+        .Sidebar(@color_disabled, @color_disabled_inv);
+    }
+}
+
+.@{PCSS}-body {
+
+    @_spacing: @layout_aside_padding;
+
+    &.@{PCSS}-sidebar-open {
+        padding-left: @_lvl1_width + @_spacing;
+
+        @media screen and (min-width: @threshold_lg) {
+
+            &.@{PCSS}-menu-open {
+                padding-left: @_lvl1_width + @menu_width + @_spacing;
+            }
+        }
+
+        @{P}-menu.menu-sync {
+            transform: translateX(@_lvl1_width);
+        }
+    }
+}
+
+@{P}-sidebar nav.@{PCSS}-sidebar {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    padding: @sidebar_nav_spacing 0;
+    box-sizing: border-box;
+
+    > .sidebar-start,
+    > .sidebar-end {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    > .sidebar-start {
+        grid-row: 1;
+    }
+
+    > .sidebar-end {
+        grid-row: 3;
+    }
+
+    .sidebar-button {
+        margin: 0;
+    }
+}
+
+.@{PCSS}-body.@{PCSS}-animations {
+    @{P}-sidebar::part(drawer),
+    @{P}-sidebar .sidebar-drawer {
+        transition: transform .3s @easing_in_out_sine, opacity .2s linear;
+    }
+}

package/pacem/ui/dark/slideshow.less

@@ -0,0 +1 @@
+@import "../shared";
    display: block;
    pointer-events: none;
    pointer-events: auto;

package/pacem/ui/dark/social.less

@@ -0,0 +1,5 @@
+@import "../shared";
+
+@{P}-tweet{
+    display: inline-block;
+}

package/pacem/ui/dark/sticky-header.less

@@ -0,0 +1,41 @@
+@import "../shared";
+
+@{P}-sticky-header {
+    .Inert();
+
+    &when(@shadows = true) {
+        box-shadow: 0 1px @grid_spacing rgba(0,0,0,0.5);
+    }
+}
+
+.@{PCSS}-body {
+
+    &.sticky-header-top {
+        // when at top (<= threshold)
+        header[pacem], .@{PCSS}-header {
+        }
+    }
+
+    &.sticky-header-scroll {
+        // while scrolling (> threshold)
+        header[pacem], .@{PCSS}-header {
+        }
+    }
+    /*#region layout overrides*/
+    &.sticky-header-fade[header],
+    &.sticky-header-fade[header][headbar],
+    &.sticky-header-fade[header][headbar-prepend] {
+        // while scrolling (> threshold)
+        header[pacem], .@{PCSS}-header {
+            transform: translateY(-100%);
+        }
+    }
+
+    &[headbar][header].sticky-header-fade {
+        .@{PCSS}-toolbar.toolbar-header {
+            transform: translateX(0) translateY(0);
+        }
+    }
+    /*#endregion*/
+}
+