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

package/src/ui/led.css

@@ -0,0 +1,84 @@
+@keyframes led-blink {
+    0% { opacity: .5; }
+    100% { opacity: 1; }
+}
+
+/* Private properties:
+     --pacem--led-s   size (.LedSize())
+     --pacem--led-in  inset background (.LedInset())
+     --pacem--led-c   color when on (.LedOn()) */
+.pacem-led {
+    --pacem--led-s: var(--pacem-grid-spacing);
+    --pacem--led-in: linear-gradient(to bottom, rgba(0,0,0,.5) 0, rgba(255,255,255,.2) 100%);
+    border-radius: 50%;
+    display: inline-block;
+    background-color: transparent;
+    width: var(--pacem--led-s);
+    height: var(--pacem--led-s);
+    padding: round(up, calc(var(--pacem--led-s) / 8), 1px);
+
+    :--light-scheme & {
+        --pacem--led-in: linear-gradient(to bottom, rgba(0,0,0,.25) 0, rgba(255,255,255,1) 100%);
+        padding: round(up, calc(var(--pacem--led-s) / 12), 1px);
+    }
+
+    :--shadows & {
+        background: var(--pacem--led-in);
+    }
+
+    &.led-inset {
+        background: var(--pacem--led-in);
+    }
+
+    &::before {
+        display: block;
+        border-radius: 50%;
+        height: 100%;
+        content: '';
+        background-color: var(--pacem-color-background);
+    }
+
+    &.led-small { --pacem--led-s: calc(var(--pacem-grid-spacing) * 2 / 3); }
+    &.led-smaller { --pacem--led-s: calc(var(--pacem-grid-spacing) / 2); }
+    &.led-tiny { --pacem--led-s: calc(var(--pacem-grid-spacing) / 3); }
+    &.led-big { --pacem--led-s: calc(var(--pacem-grid-spacing) * 1.25); }
+    &.led-bigger { --pacem--led-s: calc(var(--pacem-grid-spacing) * 1.5); }
+
+    &.led-on {
+        &.led-accent { --pacem--led-c: var(--pacem-color-accent); }
+        &.led-primary { --pacem--led-c: var(--pacem-color-primary); }
+        &.led-success { --pacem--led-c: var(--pacem-color-success); }
+        &.led-error { --pacem--led-c: var(--pacem-color-error); }
+        &.led-warning { --pacem--led-c: var(--pacem-color-warning); }
+        &.led-danger { --pacem--led-c: var(--pacem-color-danger); }
+        &.led-disabled { --pacem--led-c: var(--pacem-color-disabled); }
+
+        &:is(.led-accent, .led-primary, .led-success, .led-error, .led-warning, .led-danger, .led-disabled) {
+            --pacem--led-out: radial-gradient(ellipse at center, hsl(from var(--pacem--led-c) h s min(100, l + 10)) 0, var(--pacem--led-c) 50%);
+
+            &::before {
+                background-color: var(--pacem--led-c);
+            }
+
+            :--gradients &::before {
+                background: var(--pacem--led-out);
+            }
+
+            :--glows &::before {
+                box-shadow: 0 0 8px var(--pacem--led-c);
+            }
+
+            &.led-outset::before {
+                background: var(--pacem--led-out);
+            }
+
+            &.led-glow::before {
+                box-shadow: 0 0 8px var(--pacem--led-c);
+            }
+        }
+
+        &.led-blink::before {
+            animation: led-blink .3s ease-in-out alternate-reverse infinite;
+        }
+    }
+}

package/src/ui/loader.css

@@ -0,0 +1,174 @@
+@keyframes rotate-anim {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* .Spinner(border, size, background, gap): one rule, driven by private properties.
+     --pacem--sp-b  ring width          --pacem--sp-s  outer size
+     --pacem--sp-c  ring color          --pacem--sp-g  gap between the nested rings (loader-full)
+     --pacem--sp-w  border-width (loader-thin)
+     --pacem--sp-v  spinning arc color of the color classes (inherited by the nested rings)
+     --pacem--sp-top  spinning arc color of the spinner otherwise: the small sizes re-declared the whole
+                      border in Less, hiding the arc (the ring color) unless a color class is set */
+pacem-loader {
+    display: block;
+    height: 100%;
+    pointer-events: none;
+
+    > div.pacem-loader {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    div.pacem-spinner {
+        --pacem--sp-b: calc(var(--pacem-grid-spacing) * .5);
+        --pacem--sp-s: 108px;
+        --pacem--sp-c: rgb(from var(--pacem-color-default) r g b / 10%);
+        --pacem--sp-top: var(--pacem-color-default);
+        width: calc(var(--pacem--sp-s) - 2 * var(--pacem--sp-b));
+        height: calc(var(--pacem--sp-s) - 2 * var(--pacem--sp-b));
+        border-radius: 50%;
+        border: var(--pacem--sp-b) solid var(--pacem--sp-c);
+        border-width: var(--pacem--sp-w, var(--pacem--sp-b));
+        position: relative;
+        border-top-color: var(--pacem--sp-v, var(--pacem--sp-top));
+        animation: rotate-anim linear 1s infinite both;
+
+        > div {
+            border-top-color: var(--pacem--sp-v, var(--pacem-color-default));
+        }
+
+        > div:nth-child(1) {
+            animation: rotate-anim linear 2s infinite both;
+        }
+
+        > div:nth-child(2) {
+            animation: rotate-anim linear 3s infinite both;
+        }
+    }
+
+    &:is(.loader-small, .loader-smaller) div.pacem-spinner {
+        --pacem--sp-top: var(--pacem--sp-c);
+    }
+
+    &.loader-small div.pacem-spinner {
+        --pacem--sp-b: calc(var(--pacem-grid-spacing) * .3333);
+        --pacem--sp-s: var(--pacem-grid-cell);
+    }
+
+    &.loader-smaller div.pacem-spinner {
+        --pacem--sp-b: calc(var(--pacem-grid-spacing) * .25);
+        --pacem--sp-s: calc(2 * var(--pacem-grid-spacing));
+    }
+
+    &.loader-thin div.pacem-spinner {
+        --pacem--sp-w: calc(var(--pacem-grid-spacing) / 8);
+    }
+
+    &.loader-full {
+        div.pacem-spinner {
+            --pacem--sp-b: 2px;
+            --pacem--sp-c: transparent;
+            --pacem--sp-g: calc(var(--pacem-grid-spacing) / 3);
+
+            > div {
+                --pacem--sp-i: calc(var(--pacem--sp-s) - 2 * var(--pacem--sp-b));
+                position: absolute;
+                border: var(--pacem--sp-b) solid var(--pacem--sp-c);
+                border-top-color: var(--pacem--sp-v, var(--pacem-color-default));
+                border-radius: 50%;
+            }
+
+            > div:nth-child(1) {
+                top: var(--pacem--sp-g);
+                left: var(--pacem--sp-g);
+                width: calc(var(--pacem--sp-i) - 2 * (var(--pacem--sp-b) + var(--pacem--sp-g)));
+                height: calc(var(--pacem--sp-i) - 2 * (var(--pacem--sp-b) + var(--pacem--sp-g)));
+                opacity: .75;
+            }
+
+            > div:nth-child(2) {
+                top: calc(2 * var(--pacem--sp-g) + var(--pacem--sp-b));
+                left: calc(2 * var(--pacem--sp-g) + var(--pacem--sp-b));
+                width: calc(var(--pacem--sp-i) - 4 * (var(--pacem--sp-b) + var(--pacem--sp-g)));
+                height: calc(var(--pacem--sp-i) - 4 * (var(--pacem--sp-b) + var(--pacem--sp-g)));
+                opacity: .5;
+            }
+        }
+
+        /* (beat loader-thin, as in Less) */
+        &.loader-small div.pacem-spinner {
+            --pacem--sp-b: 1px;
+            --pacem--sp-w: 1px;
+            --pacem--sp-g: calc(var(--pacem-grid-spacing) / 4);
+        }
+
+        &.loader-smaller div.pacem-spinner {
+            --pacem--sp-b: 1px;
+            --pacem--sp-w: 1px;
+            --pacem--sp-g: calc(var(--pacem-grid-spacing) / 6);
+        }
+    }
+
+    &.loader-accent div.pacem-spinner { --pacem--sp-v: var(--pacem-color-accent); }
+    &.loader-primary div.pacem-spinner { --pacem--sp-v: var(--pacem-color-primary); }
+    &.loader-success div.pacem-spinner { --pacem--sp-v: var(--pacem-color-success); }
+    &.loader-warning div.pacem-spinner { --pacem--sp-v: var(--pacem-color-warning); }
+    &.loader-danger div.pacem-spinner { --pacem--sp-v: var(--pacem-color-danger); }
+
+    svg.pacem-spinner {
+        height: 108px;
+        width: 108px;
+
+        g.gear {
+            animation: rotate-anim cubic-bezier(0.86, 0, 0.07, 1) 1.7s infinite both;
+
+            > circle {
+                fill: var(--pacem-color-default);
+            }
+        }
+
+        g.bounds {
+            animation: rotate-anim cubic-bezier(0.645, 0.045, 0.355, 1) 2.3s infinite reverse both;
+
+            > path {
+                stroke: var(--pacem-color-accent);
+                /* needed by Firefox */
+                fill: transparent;
+            }
+        }
+
+        g {
+            transform-box: fill-box;
+            transform-origin: center center;
+        }
+
+        circle.circle1 {
+            stroke: var(--pacem-color-primary);
+        }
+
+        circle.circle2 {
+            stroke: var(--pacem-color-accent);
+        }
+    }
+
+    .pacem-loader {
+        transition: transform .25s var(--pacem-easing-in-back);
+        transform: scale(0);
+
+        &.active {
+            transition-timing-function: var(--pacem-easing-out-back);
+            transform: scale(1);
+        }
+    }
+}
+
+/* (:root: in Less this rule was scoped by the shell selector, html[theme], and overrides the white background of
+   `html .pacem-preloader` in base/preloader.css) */
+:root .pacem-preloader {
+    background: radial-gradient(ellipse at center, var(--pacem-color-background) 0%, var(--pacem-color-root) 50%);
+    background-color: var(--pacem-color-root);
+    background-size: contain;
+}

package/src/ui/markdown.css

@@ -0,0 +1,352 @@
+/* (.pacem-markdown and pacem-markdown keep their own specificity: explicit selector lists) */
+.pacem-markdown,
+pacem-markdown {
+    display: block;
+    color: rgb(from var(--pacem-color-default) r g b / 80%);
+    text-rendering: optimizeLegibility;
+}
+
+.pacem-markdown :is(h1, h2, h3, h4),
+pacem-markdown :is(h1, h2, h3, h4) {
+    margin: 0 0 .5em 0;
+    padding: 0;
+    font-weight: 700;
+    color: var(--pacem-color-default);
+    font-family: var(--pacem-font-main);
+}
+
+.pacem-markdown h1,
+pacem-markdown h1 {
+    font-size: calc(2rem * var(--pacem-font-main-rem-factor));
+    line-height: 2rem;
+    border-bottom: 1px solid rgb(from var(--pacem-color-default) r g b / 10%);
+    color: var(--pacem-color-accent);
+    text-transform: var(--pacem-transform-heading);
+}
+
+.pacem-markdown h2,
+pacem-markdown h2 {
+    font-size: calc(1.5rem * var(--pacem-font-main-rem-factor));
+    line-height: 1.5rem;
+    color: var(--pacem-color-primary);
+    border-bottom: 1px solid rgb(from var(--pacem-color-primary) r g b / 10%);
+}
+
+.pacem-markdown h3,
+pacem-markdown h3 {
+    font-size: calc(1.125rem * var(--pacem-font-main-rem-factor));
+    line-height: 1.125rem;
+}
+
+.pacem-markdown h4,
+pacem-markdown h4 {
+    font-size: calc(1.0625rem * var(--pacem-font-main-rem-factor));
+    line-height: 1.0625rem;
+}
+
+.pacem-markdown code,
+pacem-markdown code {
+    white-space: pre;
+    margin: 0 0 1em 0;
+    font-size: calc(1rem * var(--pacem-font-tech-rem-factor));
+}
+
+.pacem-markdown pre > code,
+.pacem-markdown code.pacem-code-block,
+pacem-markdown pre > code,
+pacem-markdown code.pacem-code-block {
+    display: block;
+    padding: 1em;
+    background-color: var(--pacem-color-codeblock-back);
+
+    span {
+        display: inline-block;
+        vertical-align: top;
+    }
+}
+
+.pacem-markdown pre > code::first-line,
+.pacem-markdown code.pacem-code-block::first-line,
+pacem-markdown pre > code::first-line,
+pacem-markdown code.pacem-code-block::first-line {
+    line-height: normal;
+}
+
+.pacem-markdown p,
+pacem-markdown p {
+    margin: 0 0 1em 0;
+}
+
+.pacem-markdown :is(ol, ul),
+pacem-markdown :is(ol, ul) {
+    margin: 0 1em 1em 1em;
+}
+
+.pacem-markdown a,
+pacem-markdown a {
+    color: var(--pacem-color-link);
+}
+
+.pacem-markdown blockquote,
+pacem-markdown blockquote {
+    padding: 0 2em;
+    position: relative;
+    text-align: center;
+    font-size: 1.5em;
+    margin: 1em;
+    font-style: italic;
+    color: rgb(from var(--pacem-color-primary) r g b / 80%);
+    border: 0;
+
+    &::before,
+    &::after {
+        /* .Icon() */
+        content: 'format_quote';
+        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: 1.25em;
+    }
+
+    &::before {
+        transform: rotate(180deg);
+        top: 0;
+        left: 0;
+    }
+
+    &::after {
+        bottom: 0;
+        right: 0;
+    }
+
+    > p {
+        margin: .25em 0;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+}
+
+.pacem-markdown.md-tech blockquote,
+pacem-markdown.md-tech blockquote {
+    border: 1px solid var(--pacem-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: var(--pacem-color-button-back);
+    border-left: calc(var(--pacem-grid-spacing) / 6) solid var(--pacem-color-accent);
+    border-radius: var(--pacem-border-radius);
+
+    &::before,
+    &::after {
+        content: none;
+    }
+
+    > p {
+        margin: .25em 0;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+}
+
+/* code blocks */
+.pacem-markdown pre > code,
+.pacem-markdown code.pacem-code-block,
+pacem-markdown pre > code,
+pacem-markdown code.pacem-code-block {
+    display: block;
+    color: var(--pacem-color-default);
+    font-size: calc(.9rem * var(--pacem-font-tech-rem-factor));
+    line-height: calc(1.5rem * var(--pacem-font-rem-factor));
+}
+
+/* syntax highlighting: --pacem--md-{kw,num,str,cmt,tag,attr} */
+:is(.pacem-markdown, pacem-markdown) :is(pre > code, code.pacem-code-block) {
+    --pacem--md-kw: #69f;
+    --pacem--md-num: #f80;
+    --pacem--md-str: #66aaff;
+    --pacem--md-cmt: #6a6;
+    --pacem--md-tag: #c56263;
+    --pacem--md-attr: #fc5900;
+
+    :--light-scheme & {
+        --pacem--md-kw: #00f;
+        --pacem--md-num: #f00;
+        --pacem--md-str: #0088ff;
+        --pacem--md-cmt: #373;
+        --pacem--md-tag: #853233;
+        --pacem--md-attr: #f00;
+    }
+
+    &:is(.js, .javascript, .typescript, .c, .c-sharp, .csharp, .cpp) {
+        :is(.code-keyword, .pacem-keyword) {
+            font-weight: 700;
+            color: var(--pacem--md-kw);
+        }
+
+        :is(.code-number, .pacem-number) {
+            color: var(--pacem--md-num);
+        }
+
+        :is(.code-string, .pacem-string-char, .pacem-string) {
+            color: var(--pacem--md-str);
+        }
+
+        :is(.code-comment, .pacem-comment) {
+            color: var(--pacem--md-cmt);
+        }
+    }
+
+    &:is(.xml, .html) {
+        :is(.code-tag, .pacem-tag, .code-string, .pacem-string-char, .pacem-string) {
+            color: var(--pacem--md-kw);
+        }
+
+        :is(.code-tagname, .pacem-tag-name) {
+            color: var(--pacem--md-tag);
+        }
+
+        :is(.code-attribute, .pacem-attribute) {
+            color: var(--pacem--md-attr);
+        }
+
+        :is(.code-comment, .pacem-comment) {
+            color: #aaa;
+        }
+    }
+}
+
+/*
+ * language-agnostic syntax highlighting: fenced code of any language registered in foundation's Compile.Syntaxes
+ * is rendered as `code.code-highlighted` (plus `.code-markup` for markup), next to the per-language classes above
+ */
+:is(.pacem-markdown, pacem-markdown) :is(pre > code, code.pacem-code-block).code-highlighted {
+
+    &:not(.code-markup) {
+        .code-keyword {
+            font-weight: 700;
+            color: var(--pacem--md-kw);
+        }
+
+        .code-number {
+            color: var(--pacem--md-num);
+        }
+
+        .code-string {
+            color: var(--pacem--md-str);
+        }
+
+        .code-comment {
+            color: var(--pacem--md-cmt);
+        }
+    }
+
+    &.code-markup {
+        :is(.code-tag, .code-string) {
+            color: var(--pacem--md-kw);
+        }
+
+        .code-tagname {
+            color: var(--pacem--md-tag);
+        }
+
+        .code-attribute {
+            color: var(--pacem--md-attr);
+        }
+
+        .code-keyword {
+            font-weight: 700;
+        }
+
+        .code-comment {
+            color: #aaa;
+        }
+    }
+}
+
+/* tables (GFM) */
+.pacem-markdown table,
+pacem-markdown table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    margin: 0 0 1em 0;
+    border-collapse: collapse;
+}
+
+.pacem-markdown :is(th, td),
+pacem-markdown :is(th, td) {
+    padding: .375em .75em;
+    border: 1px solid var(--pacem-color-border);
+}
+
+.pacem-markdown th,
+pacem-markdown th {
+    font-weight: 700;
+    color: var(--pacem-color-default);
+    background-color: var(--pacem-color-button-back);
+}
+
+.pacem-markdown tbody > tr:nth-child(even),
+pacem-markdown tbody > tr:nth-child(even) {
+    background-color: rgb(from var(--pacem-color-default) r g b / 4%);
+}
+
+/* task lists (GFM) */
+.pacem-markdown li.task-list-item,
+pacem-markdown li.task-list-item {
+    list-style: none;
+
+    > input[type=checkbox] {
+        margin: 0 .25em 0 -1.25em;
+        vertical-align: middle;
+    }
+}
+
+/* footnotes (GFM) */
+.pacem-markdown sup.footnote-ref,
+pacem-markdown sup.footnote-ref {
+    line-height: 0;
+
+    > a {
+        padding: 0 .125em;
+        text-decoration: none;
+    }
+}
+
+.pacem-markdown .footnotes,
+pacem-markdown .footnotes {
+    margin-top: 2em;
+    padding-top: 1em;
+    font-size: .875em;
+    border-top: 1px solid rgb(from var(--pacem-color-default) r g b / 10%);
+
+    .footnote-backref {
+        text-decoration: none;
+    }
+}
+
+.pacem-markdown > :last-child,
+pacem-markdown > :last-child {
+    margin-bottom: 0;
+}

package/src/ui/marquee.css

@@ -0,0 +1,41 @@
+pacem-marquee {
+    font-size: 1.05em;
+    color: var(--pacem-color-marquee-fore);
+    background-color: var(--pacem-color-marquee-back);
+    display: block;
+    overflow: hidden;
+    min-height: var(--pacem-grid-spacing);
+    line-height: var(--pacem-grid-spacing);
+    position: relative;
+
+    .pacem-marquee,
+    .pacem-marquee-overlap {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+
+    .pacem-marquee-overlap {
+        min-width: 100%;
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    .pacem-marquee {
+        white-space: nowrap;
+        z-index: 0;
+    }
+
+    &:hover .pacem-marquee {
+        animation-play-state: paused;
+    }
+
+    :--gradients & {
+        background: linear-gradient(to bottom, var(--pacem-color-marquee-back) 0, var(--pacem-color-marquee-back2) 100%);
+    }
+
+    :--shadows & .pacem-marquee-overlap {
+        box-shadow: inset calc(var(--pacem-grid-spacing) / 2) 0 calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,0.5), inset calc(var(--pacem-grid-spacing) / -2) 0 calc(var(--pacem-grid-spacing) / 2) rgba(0,0,0,0.5);
+    }
+}