@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/divider.less

@@ -0,0 +1,49 @@
+@import "../shared";
+
+@{P}-divider {
+    display: block;
+
+    &::part(divider) {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &::part(content) {
+        flex: 0 1 auto;
+    }
+
+    &::part(append),
+    &::part(prepend) {
+        flex: 1 1 100%;
+        display: block;
+        height: 0;
+        border-left: 0;
+        border-right: 0;
+        border-top: 1px solid @color_border_dark;
+        border-bottom: 1px solid @color_border_light;
+    }
+
+    &.divider-horizontal {
+        // default
+    }
+
+    &.divider-vertical {
+
+        &::part(divider) {
+            height: 100%;
+            flex-direction: column;
+        }
+
+        &::part(append),
+        &::part(prepend) {
+            width: 0;
+            height: 100%;
+            border-top: 0;
+            border-bottom: 0;
+            border-left: 1px solid @color_border_dark;
+            border-right: 1px solid @color_border_light;
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+@import "../shared";
+
+@media (min-width: 1200px) {
+
+}

package/pacem/ui/dark/icon.less

@@ -0,0 +1,141 @@
+@import "../shared";
+
+@{P}-icon {
+    display: inline-block;
+    vertical-align: middle;
+    border-radius: 50%;
+
+    > i,
+    > i.@{PCSS}-icon,
+    > i.material-icons,
+    > i.material-symbols-outlined,
+    > i.material-symbols-sharp,
+    > i.material-symbols-rounded,
+    > img,
+    > svg {
+        display: block;
+    }
+
+    &.icon-fill {
+        > i {
+            .IconVariation(1);
+        }
+    }
+
+    &.icon-outline {
+        > i {
+            .IconVariation(0);
+        }
+    }
+
+    &.icon-text-bottom {
+        vertical-align: text-bottom;
+    }
+
+    &.icon-text-top {
+        vertical-align: text-top;
+    }
+
+    &.icon-top {
+        vertical-align: top;
+    }
+
+    &.icon-bottom {
+        vertical-align: bottom;
+    }
+    // icon rotations
+    &.icon-rotate {
+        transform-origin: center center;
+        // rotate
+        &.rotate-45 {
+            transform: rotate(45deg);
+        }
+
+        &.rotate-90 {
+            transform: rotate(90deg);
+        }
+
+        &.rotate-135 {
+            transform: rotate(135deg);
+        }
+
+        &.rotate-180 {
+            transform: rotate(180deg);
+        }
+
+        &.rotate-225 {
+            transform: rotate(225deg);
+        }
+
+        &.rotate-270 {
+            transform: rotate(270deg);
+        }
+
+        &.rotate-315 {
+            transform: rotate(315deg);
+        }
+    }
+
+    &.icon-flip {
+        &.flip-horizontal {
+            transform: scale(-1,1);
+        }
+
+        &.flip-vertical {
+            transform: scale(1,-1);
+        }
+    }
+}
+
+// sizes
+@{P}-icon, i.@{PCSS}-icon {
+
+    &.icon-size-small {
+        font-size: .9 * @font_icon_size;
+    }
+
+    &.icon-size-smaller {
+        font-size: .8667 * @font_icon_size;
+    }
+
+    &.icon-size-tiny {
+        font-size: .75 * @font_icon_size;
+    }
+
+    &.icon-size-smallest {
+        font-size: .6667 * @font_icon_size;
+    }
+
+    &.icon-size-big {
+        font-size: 1.3333 * @font_icon_size;
+    }
+
+    &.icon-size-bigger {
+        font-size: 1.6667 * @font_icon_size;
+    }
+
+    &.icon-size-huge {
+        font-size: 2 * @font_icon_size;
+    }
+
+    &.icon-size-biggest {
+        font-size: 2.5 * @font_icon_size;
+    }
+
+    &.icon-size-regular {
+        font-size: @font_icon_size;
+    }
+
+    &.icon-size {
+
+        each(range(12), {
+
+            &.icon-size-@{value}{
+                font-size: ~"var(--@{PCSS}-size-@{value})";
+            }
+            &.icon-size--@{value}{
+                font-size: ~"var(--@{PCSS}-size--@{value})";
+            }
+        });
+    }
+}

package/pacem/ui/dark/image.less

@@ -0,0 +1,90 @@
+@import "../shared";
+
+@{P}-img {
+    background-position: center center;
+    background-repeat: no-repeat;
+    display: inline-block;
+    position: relative;
+}
+
+@{P}-img::before {
+    @_size: 2 * @grid_spacing;
+    @_brd: @grid_spacing/8;
+
+    display: block;
+    content: '';
+    width: @_size;
+    height: $width;
+    border-radius: 50%;
+    border: @_brd solid @color_border;
+    border-top-color: @color_default;
+    animation: rotate-anim linear 1s infinite both;
+    top: 50%;
+    left: 50%;
+    margin-left: -(@_size * .5 + @_brd);
+    margin-top: $margin-left;
+    position: absolute;
+    transition: transform .2s @easing_in_out_sine, opacity .2s linear;
+    pointer-events: none;
+}
+
+@{P}-img.img-ready::before {
+    transform: scale(0);
+    opacity: 0;
+    animation: none;
+}
+
+.ImageBlend(@clr) {
+    background-color: @clr;
+
+    & when (@blur = true) {
+        opacity: .6667;
+    }
+}
+
+@{P}-img.img-ready {
+
+    &.img-blend {
+        background-blend-mode: luminosity;
+
+        &.blend-accent {
+            .ImageBlend(@color_accent);
+        }
+
+        &.blend-success {
+            .ImageBlend(@color_success);
+        }
+
+        &.blend-warning {
+            .ImageBlend(@color_warning);
+        }
+
+        &.blend-primary {
+            .ImageBlend(@color_primary);
+        }
+
+        &.blend-danger {
+            .ImageBlend(@color_danger);
+        }
+
+        &.blend-error {
+            .ImageBlend(@color_error);
+        }
+
+        &.blend-default {
+            .ImageBlend(@color_background);
+        }
+
+        &.blend-invert {
+            .ImageBlend(@color_default);
+        }
+
+        &.blend-alt {
+            .ImageBlend(@color_background_alt);
+        }
+    }
+}
+
+@{P}-img.img-grayscale{
+    .Grayscale();
+}

package/pacem/ui/dark/index.less

@@ -0,0 +1,82 @@
+/*#region HIDDEN*/
+
+.@{PCSS}-hidden {
+    transition: all .3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+    //display: none !important;
+    opacity: 0;
+    transform: scale(0,0);
+
+    &.slide {
+        transition: all .3s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+        transform: none;
+        overflow: hidden;
+        height: 0;
+
+        &.horizontal {
+            height: auto;
+            width: 0;
+        }
+    }
+}
+
+.@{PCSS}-shown {
+    transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    //display: normal;
+    opacity: 1;
+    transform: scale(1,1);
+
+    &.slide {
+        transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
+        transform: none;
+        overflow: hidden;
+    }
+}
+
+/*#endregion*/
+
+// non-UI components
+@{P}-media-query,
+@{P}-vibrate {
+    .Inert();
+}
+
+@import "body";
+@import "header-footer";
+@import "collapse";
+@import "calendar";
+@import "balloon";
+@import "toast";
+@import "infinite-scroller";
+@import "anchor";
+@import "button";
+@import "pager";
+@import "icon";
+@import "image";
+@import "picture";
+@import "progressbar";
+@import "tuner";
+@import "dialog";
+@import "lightbox";
+
+// to be imported separately by the shell css
+// @import "menu";
+// @import "sidebar";
+@import "binder";
+@import "markdown";
+@import "social";
+@import "marquee";
+@import "tabs";
+@import "toc";
+@import "led";
+
+// to be imported separately by the shell css
+// @import "loader";
+@import "view";
+@import "slideshow";
+@import "timeline";
+@import "window";
+@import "sticky-header";
+@import "blade";
+@import "divider";
+@import "ticker";
+@import "bottom-sheet";

package/pacem/ui/dark/infinite-scroller.less

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

package/pacem/ui/dark/led.less

@@ -0,0 +1,142 @@
+@import "../shared";
+
+.LedSize(@size) {
+    width: @size;
+    height: $width;
+
+    & when (@dark_theme = true) {
+        padding: ceil($width / 8);
+    }
+
+    & when (@dark_theme = false) {
+        padding: ceil($width / 12);
+    }
+}
+
+.LedOn(@clr) {
+    &::before {
+        background-color: @clr;
+
+        & when (@gradients = true) {
+            .LedOutset(@clr);
+        }
+
+        & when (@glows = true) {
+            .LedGlow(@clr)
+        }
+    }
+
+    &.led-outset::before {
+        .LedOutset(@clr);
+    }
+
+    &.led-glow::before {
+        .LedGlow(@clr)
+    }
+}
+
+.LedOutset(@clr) {
+    .GradientRadial(0, 50%, lighten(@clr, 10), @clr);
+}
+
+.LedGlow(@clr) {
+    box-shadow: 0 0 8px @clr;
+}
+
+.LedInset() {
+    & when (@dark_theme = false) {
+        .GradientVertical(0, 100%, rgba(0,0,0,.25), rgba(255,255,255,1));
+    }
+
+    & when (@dark_theme = true) {
+        .GradientVertical(0, 100%, rgba(0,0,0,.5), rgba(255,255,255,.2));
+    }
+}
+
+@keyframes led-blink {
+    0% {
+        opacity: .5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.@{PCSS}-led {
+    border-radius: 50%;
+    display: inline-block;
+    background-color: transparent;
+    .LedSize( @grid_spacing);
+
+    & when(@shadows = true) {
+        .LedInset();
+    }
+
+    &.led-inset {
+        .LedInset();
+    }
+
+    &::before {
+        display: block;
+        border-radius: 50%;
+        height: 100%;
+        content: '';
+        background-color: @color_background;
+    }
+
+    &.led-small {
+        .LedSize(@grid_spacing * 2 / 3);
+    }
+
+    &.led-smaller {
+        .LedSize(@grid_spacing / 2);
+    }
+
+    &.led-tiny {
+        .LedSize(@grid_spacing / 3);
+    }
+
+    &.led-big {
+        .LedSize(@grid_spacing * 1.25);
+    }
+
+    &.led-bigger {
+        .LedSize(@grid_spacing * 1.5);
+    }
+
+    &.led-on {
+
+        &.led-accent {
+            .LedOn(@color_accent);
+        }
+
+        &.led-primary {
+            .LedOn(@color_primary);
+        }
+
+        &.led-success {
+            .LedOn(@color_success);
+        }
+
+        &.led-error {
+            .LedOn(@color_error);
+        }
+
+        &.led-warning {
+            .LedOn(@color_warning);
+        }
+
+        &.led-danger {
+            .LedOn(@color_danger);
+        }
+
+        &.led-disabled {
+            .LedOn(@color_disabled);
+        }
+
+        &.led-blink::before {
+            animation: led-blink .3s ease-in-out alternate-reverse infinite;
+        }
+    }
+}

package/pacem/ui/dark/lightbox.less

@@ -0,0 +1,140 @@
+@import "../dialog-vars";
+
+/*#region LIGHTBOX*/
+@_lbPadding: @grid_spacing;
+
+@{P}-lightbox {
+    pointer-events: none;
+
+    &::part(close) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: ~"var(--@{PCSS}-size-1)";
+        z-index: 2;
+    }
+
+    &::part(lightbox-wrapper) {
+        z-index: @lightbox_z_index;
+        box-sizing: border-box;
+        background-color: transparent;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: @_lbPadding;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        // overscroll-behavior: contain;
+    }
+
+    &::part(lightbox-wrapper-shown) {
+        background-color: @color_lightbox_back;
+        pointer-events: auto;
+    }
+
+    &::part(lightbox) {
+        width: 100%;
+        position: relative;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+    }
+
+    &::part(top) {
+        grid-row: 1;
+        overflow: hidden;
+    }
+
+    &::part(scrollable) {
+        grid-row: 2;
+    }
+
+    &::part(bottom) {
+        grid-row: 3;
+        overflow: hidden;
+    }
+}
+
+@{P}-lightbox.lightbox-corners::part(lightbox) when (@border_radius = 0) {
+    .Corners(fade(@color_border, 100), 0, @corner_size);
+}
+
+@{P}-lightbox {
+    &::part(lightbox) {
+        @_clr: @color_lightbox;
+        @_fore_clr: @color_default;
+        color: @_fore_clr;
+        max-width: 80vw;
+        @_totalPad: 2 * @_lbPadding;
+        max-height: ~"calc(100vh - @{_totalPad})";
+        box-sizing: border-box;
+        border-radius: @border_radius;
+
+        & when (@blur = false) {
+            background-color: @_clr;
+        }
+
+        & when (@blur = true) {
+            .Blur(6px, @_clr);
+        }
+    }
+
+    &::part(scrollable) {
+        position: relative;
+        max-width: 80vw;
+        height: 100%;
+        box-sizing: border-box;
+        border: @lightbox_padding solid transparent; // @_clr;
+        border-top-left-radius: @border_radius;
+        border-top-right-radius: @border_radius;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+}
+
+@{P}-lightbox::part(lightbox) when (@dark_theme = false) {
+    box-shadow: 0 @grid_spacing/4 3 * @grid_spacing/4 rgba(0,0,0,0.2);
+}
+
+@{P}-lightbox::part(lightbox) when (@dark_theme = true) {
+    box-shadow: 0 @grid_spacing/4 @grid_spacing rgba(0,0,0,0.75);
+}
+
+@{P}-lightbox {
+    .DialogPositioning(lightbox);
+    .DialogAlignment(lightbox);
+    .DialogSize(lightbox);
+}
+/*#endregion*/
+
+.@{PCSS}-animations {
+
+    @{P}-lightbox {
+        &::part(lightbox-wrapper) {
+            transition: background-color .25s;
+        }
+
+        &::part(lightbox) {
+            opacity: 0;
+            transform: translateY(@grid_spacing);
+        }
+
+        &.lightbox-top::part(lightbox) {
+            transform: translateY(-1 * @grid_spacing);
+        }
+
+        &::part(lightbox-wrapper-shown) {
+            transition: background-color .4s .15s;
+        }
+
+        &.lightbox-top::part(lightbox-shown),
+        &::part(lightbox-shown) {
+            transition: opacity .2s, transform .35s ease-out;
+            opacity: 1;
+            transform: none;
+        }
+    }
+}