@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/loader.less

@@ -0,0 +1,219 @@
+@import "../shared";
+
+@keyframes rotate-anim {
+
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.Spinner(@_brd, @_size, @_background, @_gap) {
+    @__size: @_size - 2 * @_brd;
+    width: @__size;
+    height: @__size;
+    border-radius: 50%;
+    border: @_brd solid @_background;
+    position: relative;
+
+    > div when (@_gap > 0) {
+        position: absolute;
+        border: @_brd solid @_background;
+
+        .SpinnerNested(@_ndx) {
+            @_pad: @_gap + (@_brd + @_gap) * (@_ndx - 1);
+            @___size: @__size - 2 * @_ndx * (@_brd + @_gap);
+            top: @_pad;
+            left: @_pad;
+            width: @___size;
+            height: @___size;
+            border-radius: 50%;
+            opacity: 1 - .25 * @_ndx
+        }
+
+        &:nth-child(1) {
+            .SpinnerNested(1);
+        }
+
+        &:nth-child(2) {
+            .SpinnerNested(2);
+        }
+    }
+}
+
+.Spinner(@_brd, @_size) {
+    .Spinner(@_brd, @_size, fade(@color_default, 10), 0);
+}
+
+@{P}-loader {
+    display: block;
+    height: 100%;
+    pointer-events: none;
+
+    > div.@{PCSS}-loader {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @_max_size: 108px;
+
+    div.@{PCSS}-spinner {
+        .Spinner(@grid_spacing * .5, @_max_size);
+    }
+
+    &.loader-full {
+        div.@{PCSS}-spinner {
+            .Spinner(2px, @_max_size, transparent, @grid_spacing/3);
+        }
+
+
+        &.loader-small {
+            div.@{PCSS}-spinner {
+                .Spinner(1px, @grid_cell, transparent, @grid_spacing/4);
+            }
+        }
+
+        &.loader-smaller {
+            div.@{PCSS}-spinner {
+                .Spinner(1px, 2 * @grid_spacing, transparent, @grid_spacing/6);
+            }
+        }
+    }
+
+    &.loader-small {
+        div.@{PCSS}-spinner {
+            .Spinner(@grid_spacing * .3333, @grid_cell);
+        }
+    }
+
+    &.loader-smaller {
+        div.@{PCSS}-spinner {
+            .Spinner(@grid_spacing * .25, 2 * @grid_spacing);
+        }
+    }
+
+    &.loader-thin{
+        div.@{PCSS}-spinner{
+            border-width: @grid_spacing/8;
+        }
+    }
+
+    div.@{PCSS}-spinner,
+    &.loader-full div.@{PCSS}-spinner {
+        border-top-color: @color_default;
+        animation: rotate-anim linear 1s infinite both;
+
+        > div:nth-child(1) {
+            border-top-color: @color_default;
+            animation: rotate-anim linear 2s infinite both;
+        }
+
+        > div:nth-child(2) {
+            border-top-color: @color_default;
+            animation: rotate-anim linear 3s infinite both;
+        }
+    }
+
+    &.loader-accent.loader-full,
+    &.loader-accent {
+        div.@{PCSS}-spinner,
+        div.@{PCSS}-spinner > div {
+            border-top-color: @color_accent;
+        }
+    }
+
+    &.loader-primary.loader-full,
+    &.loader-primary {
+        div.@{PCSS}-spinner,
+        div.@{PCSS}-spinner > div {
+            border-top-color: @color_primary;
+        }
+    }
+
+    &.loader-success.loader-full,
+    &.loader-success {
+        div.@{PCSS}-spinner,
+        div.@{PCSS}-spinner > div {
+            border-top-color: @color_success;
+        }
+    }
+
+    &.loader-warning.loader-full,
+    &.loader-warning {
+        div.@{PCSS}-spinner,
+        div.@{PCSS}-spinner > div {
+            border-top-color: @color_warning;
+        }
+    }
+
+    &.loader-danger.loader-full,
+    &.loader-danger {
+        div.@{PCSS}-spinner,
+        div.@{PCSS}-spinner > div {
+            border-top-color: @color_danger;
+        }
+    }
+
+    svg.@{PCSS}-spinner {
+        height: @_max_size;
+        width: @_max_size;
+
+        g.gear {
+            > circle {
+                fill: @color_default;
+            }
+
+            animation: rotate-anim cubic-bezier(0.86, 0, 0.07, 1) 1.7s infinite both;
+        }
+
+        g.bounds {
+            > path {
+                stroke: @color_accent;
+                // fill: transparent is needed for Firefox to work! :|
+                fill: transparent;
+            }
+
+            animation: rotate-anim cubic-bezier(0.645, 0.045, 0.355, 1) 2.3s infinite reverse both;
+        }
+
+        g {
+            transform-box: fill-box;
+            transform-origin: center center;
+        }
+
+        circle.circle1 {
+            stroke: @color_primary;
+        }
+
+        circle.circle2 {
+            stroke: @color_accent;
+        }
+    }
+}
+
+@{P}-loader {
+
+    .@{PCSS}-loader {
+        transition: transform .25s @easing_in_back;
+        transform: scale(0);
+
+        &.active {
+            transition-timing-function: @easing_out_back;
+            transform: scale(1);
+        }
+    }
+}
+
+.@{PCSS}-preloader {
+    // background (use raw values since css property values won't be ready until full load)
+   /* .GradientRadial(0%, 50%, ~"var(--@{PCSS}-color-background)", ~"var(--@{PCSS}-color-root)");
+    background-color: ~"var(--@{PCSS}-color-root)";*/
+    .GradientRadial(0%, 50%, @color_background, @color_root_background);
+    background-color: @color_root_background;
+    background-size: contain;
+}

package/pacem/ui/dark/markdown.less

@@ -0,0 +1,292 @@
+@import "../shared";
+
+@_clr_txt: @color_default;
+
+.@{PCSS}-markdown,
+@{P}-markdown {
+    display: block;
+    //font-size: 20px;
+    color: fade(@_clr_txt, 80);
+    text-rendering: optimizeLegibility;
+
+    h1, h2, h3, h4 {
+        margin: 0 0 .5em 0;
+        padding: 0;
+        font-weight: 700;
+        color: @_clr_txt;
+        font-family: @font_main;
+    }
+
+    b {
+        //color: @_clr_txt;
+    }
+
+    h1 {
+        .FontMainSize(2);
+        line-height: 2rem;
+        border-bottom: 1px solid fade(@_clr_txt, 10);
+        color: @color_accent;
+    }
+
+    h1 when (@uppercase_headings = true) {
+        text-transform: uppercase;
+    }
+
+    h2 {
+        .FontMainSize(1.5);
+        line-height: 1.5rem;
+        color: @color_primary;
+        border-bottom: 1px solid fade(@color_primary, 10);
+    }
+
+    h3 {
+        .FontMainSize(1.25);
+        line-height: 1.25rem;
+    }
+
+    h3 {
+        .FontMainSize(1.125);
+        line-height: 1.125rem;
+    }
+
+    h4 {
+        .FontMainSize(1.0625);
+        line-height: 1.0625rem;
+    }
+
+    code {
+        white-space: pre;
+        margin: 0 0 1em 0;
+        .FontTechSize(1);
+    }
+
+    pre > code,
+    code.@{PCSS}-code-block {
+        display: block;
+        padding: 1em;
+        background-color: @color_codeblock_back;
+
+        &:first-line {
+            line-height: normal;
+        }
+
+        span {
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+    p {
+        margin: 0 0 1em 0;
+    }
+
+    ol, ul {
+        margin: 0 1em 1em 1em;
+        /*> li {
+            margin: .5em 0 .5em 1em;
+            list-style-position: outside;
+        }*/
+    }
+
+    a {
+        color: @color_link;
+    }
+
+    blockquote {
+        padding: 0 2em;
+        position: relative;
+        text-align: center;
+        font-size: 1.5em;
+        margin: 1em;
+        font-style: italic;
+        color: fade(@color_primary, 80);
+        border: 0;
+
+        &:before {
+            .Icon('format_quote', 1.25em);
+            transform: rotate(180deg);
+            top: 0;
+            left: 0;
+        }
+
+        &:after {
+            .Icon('format_quote', 1.25em);
+            bottom: 0;
+            right: 0;
+        }
+
+        > p {
+            margin: .25em 0;
+        }
+
+        a {
+            text-decoration: underline;
+        }
+    }
+
+    &.md-tech {
+
+        blockquote {
+            border: 1px solid @color_border;
+            padding: 1em 1em 1em 2em;
+            position: static;
+            text-align: inherit;
+            font-size: 1em;
+            margin: 1em 0;
+            font-style: normal;
+            color: inherit;
+            background-color: @color_button_back;
+            border-left: @grid_spacing/6 solid @color_accent;
+            border-radius: @border_radius;
+
+            &:before {
+                content: none;
+            }
+
+            &:after {
+                content: none;
+            }
+
+            > p {
+                margin: .25em 0;
+            }
+
+            a {
+                text-decoration: underline;
+            }
+        }
+    }
+}
+
+.@{PCSS}-markdown,
+@{P}-markdown {
+
+    pre > code,
+    code.@{PCSS}-code-block {
+        display: block;
+        color: @color_default;
+        .FontTechSize(.9);
+        line-height: 1.5rem * @font_rem_factor;
+
+        &.js,
+        &.javascript,
+        &.typescript,
+        &.c,
+        &.c-sharp,
+        &.csharp,
+        &.cpp {
+
+            .code-keyword,
+            .@{PCSS}-keyword {
+                font-weight: 700;
+
+                & when (@dark_theme = false) {
+                    color: #00f;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #69f;
+                }
+            }
+
+            .code-number,
+            .@{PCSS}-number {
+                & when (@dark_theme = false) {
+                    color: #f00;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #f80;
+                }
+            }
+
+            .code-string,
+            .@{PCSS}-string-char,
+            .@{PCSS}-string {
+                & when (@dark_theme = false) {
+                    color: #0088ff;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #66aaff;
+                }
+            }
+
+            .code-comment,
+            .@{PCSS}-comment {
+                & when (@dark_theme = false) {
+                    color: #373;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #6a6;
+                }
+            }
+        }
+
+
+        &.xml,
+        &.html {
+
+            .code-tag,
+            .@{PCSS}-tag {
+
+                & when (@dark_theme = false) {
+                    color: #00f;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #69f;
+                }
+            }
+
+            .code-tagname,
+            .@{PCSS}-tag-name {
+                & when (@dark_theme = false) {
+                    color: #853233;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #c56263;
+                }
+            }
+
+            .code-attribute,
+            .@{PCSS}-attribute {
+                & when (@dark_theme = false) {
+                    color: #f00;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #fc5900;
+                }
+            }
+
+            .code-comment,
+            .@{PCSS}-comment {
+                color: #aaa;
+            }
+
+            .code-string,
+            .@{PCSS}-string-char,
+            .@{PCSS}-string {
+
+                & when (@dark_theme = false) {
+                    color: #00f;
+                }
+
+                & when (@dark_theme = true) {
+                    color: #69f;
+                }
+            }
+        }
+    }
+}
+
+.@{PCSS}-markdown,
+@{P}-markdown {
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}

package/pacem/ui/dark/marquee.less

@@ -0,0 +1,49 @@
+@import "../shared";
+
+@{P}-marquee {
+    font-size: 1.05em; // 1.05rem * @font_rem_factor;
+    color: @color_marquee_fore;
+    background-color: @color_marquee_back;
+    display: block;
+    overflow: hidden;
+    min-height: @grid_spacing;
+    line-height: @grid_spacing;
+    position: relative;
+
+    .@{PCSS}-marquee,
+    .@{PCSS}-marquee-overlap {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+
+    .@{PCSS}-marquee-overlap {
+        min-width: 100%;
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .@{PCSS}-marquee {
+        white-space: nowrap;
+        z-index: 0;
+        //animation: full-offset-rtl-anim 10s linear infinite;
+    }
+
+
+    &:hover {
+        .@{PCSS}-marquee {
+            animation-play-state: paused;
+        }
+    }
+}
+
+@{P}-marquee when (@gradients = true) {
+    .GradientVertical(@color_marquee_back, @color_marquee_back2);
+}
+
+@{P}-marquee when (@shadows = true) {
+    .@{PCSS}-marquee-overlap {
+        box-shadow: inset @grid_spacing/2 0 @grid_spacing/2 rgba(0,0,0,0.5), inset -@grid_spacing/2 0 @grid_spacing/2 rgba(0,0,0,0.5);
+    }
+}