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

package/src/base/backgrounds.css

@@ -0,0 +1,37 @@
+/* .pacem-gloss and the .bg-{color} overrides (pacem.less).
+   .bg-{color} classes only assign --pacem--bg (background) and --pacem--bg-ink (foreground). */
+
+.pacem-gloss {
+    /* .Gloss(#fff) */
+    :--gradients & {
+        background: linear-gradient(to bottom, rgb(255 255 255 / 0) 50%, rgb(255 255 255 / .4) 50%, rgb(255 255 255 / .1) 100%);
+    }
+}
+
+.bg-default { --pacem--bg: var(--pacem-color-background); --pacem--bg-ink: var(--pacem-color-default); }
+.bg-error { --pacem--bg: var(--pacem-color-error); --pacem--bg-ink: var(--pacem-color-error-inverse); }
+.bg-accent { --pacem--bg: var(--pacem-color-accent); --pacem--bg-ink: var(--pacem-color-accent-inverse); }
+.bg-primary { --pacem--bg: var(--pacem-color-primary); --pacem--bg-ink: var(--pacem-color-primary-inverse); }
+.bg-success { --pacem--bg: var(--pacem-color-success); --pacem--bg-ink: var(--pacem-color-success-inverse); }
+.bg-warning { --pacem--bg: var(--pacem-color-warning); --pacem--bg-ink: var(--pacem-color-warning-inverse); }
+.bg-danger { --pacem--bg: var(--pacem-color-danger); --pacem--bg-ink: var(--pacem-color-danger-inverse); }
+.bg-invert { --pacem--bg: var(--pacem-color-default); --pacem--bg-ink: var(--pacem-color-default-inverse); }
+.bg-disabled { --pacem--bg: var(--pacem-color-disabled); --pacem--bg-ink: var(--pacem-color-disabled-inverse); }
+
+:is(.bg-default, .bg-error, .bg-accent, .bg-primary, .bg-success, .bg-warning, .bg-danger, .bg-invert, .bg-disabled) {
+    background-color: var(--pacem--bg);
+    color: var(--pacem--bg-ink);
+
+    &.pacem-gloss {
+        :--shadows & {
+            box-shadow: inset calc(var(--pacem-grid-spacing) / 12) 0 calc(var(--pacem-grid-spacing) / 12) var(--pacem--bg), inset calc(var(--pacem-grid-spacing) / -12) 0 calc(var(--pacem-grid-spacing) / 12) var(--pacem--bg);
+            text-shadow: 0 1px 0 var(--pacem--bg), 0 -1px 0 var(--pacem--bg), -1px 0 0 var(--pacem--bg), 1px 0 0 var(--pacem--bg);
+        }
+
+        /* .Gloss(ink) */
+        :--gradients & {
+            background: linear-gradient(to bottom, rgb(from var(--pacem--bg-ink) r g b / 0) 50%, rgb(from var(--pacem--bg-ink) r g b / .4) 50%, rgb(from var(--pacem--bg-ink) r g b / .1) 100%);
+            background-color: var(--pacem--bg);
+        }
+    }
+}

package/src/base/body.css

@@ -0,0 +1,199 @@
+:root, body {
+    font-family: var(--pacem-font-std);
+    background-color: var(--pacem-color-root);
+    color: var(--pacem-color-default);
+    font-size: var(--pacem-font-size);
+}
+
+body {
+    overflow-x: hidden;
+    line-height: 1.5;
+    font-weight: var(--pacem-font-weight);
+    /* theme background (e.g. a dotted grid: see the phousys theme of the Pacem JS webapp) */
+    background-image: var(--pacem-body-background-image);
+    background-position: 0 0;
+    background-repeat: repeat;
+    background-size: var(--pacem-body-background-size);
+    background-attachment: var(--pacem-body-background-attachment);
+}
+
+.pacem-body.pacem-animations {
+
+    .pacem-anim,
+    .pacem-animatable {
+        &:not(.pacem-viewport-aware),
+        &.pacem-viewport-aware.pacem-in-viewport {
+            animation: default-anim .3s ease-out .333s both;
+        }
+
+        &.anim-fade-inout,
+        &.anim-rotate {
+            animation-timing-function: var(--pacem-easing-in-out-sine);
+            animation-delay: 0s;
+            animation-iteration-count: infinite;
+        }
+
+        &.anim-rotate {
+            animation-duration: 1s;
+            animation-name: rotate-anim;
+
+            &.rotate-uniform {
+                animation-timing-function: linear;
+            }
+        }
+
+        &.anim-fade-inout {
+            animation-duration: .6s;
+            animation-name: fade-in;
+            animation-direction: alternate;
+        }
+
+        &.anim-quick {
+            animation-duration: .2s;
+
+            &.anim-rotate {
+                animation-duration: .4s;
+            }
+
+            &.anim-fade-inout {
+                animation-duration: .3s;
+            }
+        }
+
+        &.anim-sudden {
+            animation-delay: 0s;
+        }
+
+        &.anim-slow {
+            animation-duration: .8s;
+
+            &.anim-rotate {
+                animation-duration: 2s;
+            }
+
+            &.anim-fade-inout {
+                animation-duration: 1s;
+            }
+        }
+
+        &.anim-delay {
+            animation-delay: 1.2s;
+
+            &.delay-slight {
+                animation-delay: .8s;
+            }
+
+            &.delay-fair {
+                animation-delay: 1.6s;
+            }
+        }
+
+        &.anim-fade-in {
+            animation-name: fade-in;
+        }
+
+        &.anim-fade-out {
+            animation-name: fade-in;
+            animation-direction: reverse;
+        }
+
+        &.anim-alt {
+            animation-name: alt-anim;
+        }
+
+        &.anim-pop {
+            animation-name: pop-anim;
+            animation-timing-function: var(--pacem-easing-out-back);
+        }
+
+        &.anim-bottom-in {
+            animation-name: list-item-bottom;
+        }
+
+        &.anim-top-in {
+            animation-name: list-item;
+        }
+
+        &.anim-right-in {
+            animation-name: list-item-right;
+        }
+
+        &.anim-left-in {
+            animation-name: list-item-left;
+        }
+
+        &.anim-brightout {
+            animation-name: bright-out;
+        }
+
+        &.anim-alt-inv {
+            animation-name: enhanced-anim;
+        }
+
+        &.anim-appear {
+            animation-name: appear-anim;
+            animation-timing-function: var(--pacem-easing-out-sine);
+        }
+
+        &.anim-reverse {
+            animation-direction: reverse;
+        }
+
+        /* hiding */
+        &.pacem-hiding {
+            animation-direction: reverse;
+            animation-duration: .25s;
+            animation-delay: 0s;
+            animation-timing-function: ease-in;
+
+            &.anim-pop {
+                animation-timing-function: var(--pacem-easing-in-back);
+            }
+
+            &.anim-appear,
+            &.anim-bottom-in,
+            &.anim-top-in,
+            &.anim-left-in,
+            &.anim-right-in {
+                animation-timing-function: var(--pacem-easing-in-sine);
+            }
+        }
+    }
+
+    /* (a plain list: h1.x and .x.y keep their own specificity) */
+    h1.pacem-animatable:not(.pacem-viewport-aware),
+    h1.pacem-animatable.pacem-viewport-aware.pacem-in-viewport,
+    h1.pacem-anim:not(.pacem-viewport-aware),
+    h1.pacem-anim.pacem-viewport-aware.pacem-in-viewport,
+    .pacem-animatable.animatable-header:not(.pacem-viewport-aware),
+    .pacem-animatable.animatable-header.pacem-viewport-aware.pacem-in-viewport,
+    .pacem-animatable.anim-header:not(.pacem-viewport-aware),
+    .pacem-animatable.anim-header.pacem-viewport-aware.pacem-in-viewport,
+    .pacem-anim.anim-header:not(.pacem-viewport-aware),
+    .pacem-anim.anim-header.pacem-viewport-aware.pacem-in-viewport {
+        animation: "header-anim" .3s ease-out .2s both;
+    }
+}
+
+:root ::-webkit-scrollbar {
+    width: var(--pacem-size-scrollbar);
+    height: var(--pacem-size-scrollbar);
+}
+
+:root ::-webkit-scrollbar-track {
+    background: var(--pacem-color-scrollbar-track);
+}
+
+:root ::-webkit-scrollbar-thumb {
+    background-color: var(--pacem-color-scrollbar-thumb);
+}
+
+:--shadows ::-webkit-scrollbar-thumb {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* gecko */
+:root, * {
+    scrollbar-color: var(--pacem-color-scrollbar-thumb) var(--pacem-color-scrollbar-track);
+    scrollbar-width: thin;
+}

package/src/base/content.css

@@ -0,0 +1,4 @@
+/* base (content part), before the components: logging, body, icons. */
+@import "logging.css";
+@import "body.css";
+@import "icons.css";

package/src/base/icons.css

@@ -0,0 +1,74 @@
+i.pacem-icon {
+    /* .IconCore() */
+    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;
+    /* .PacemIconCore() */
+    font-style: normal;
+    display: inline-block;
+    height: 1em;
+    line-height: 1em;
+    font-size: 1em;
+    width: 1em;
+    position: relative;
+    vertical-align: middle;
+    border-radius: 50%;
+    transform-origin: center center;
+
+    &.icon-fill {
+        font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    &.icon-outline {
+        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    &.space-left {
+        margin-left: calc(var(--pacem-grid-spacing) / 2);
+
+        &.space-more {
+            margin-left: var(--pacem-grid-spacing);
+        }
+    }
+
+    &.space-right {
+        margin-right: calc(var(--pacem-grid-spacing) / 2);
+
+        &.space-more {
+            margin-right: var(--pacem-grid-spacing);
+        }
+    }
+
+    &.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); }
+}
+
+/** deprecated */
+i.material-icons {
+    font-family: var(--pacem-font-icons) !important;
+    font-size: var(--pacem-font-icon-size);
+    font-weight: normal;
+    font-style: normal;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+}

package/src/base/logging.css

@@ -0,0 +1,5 @@
+pacem-console,
+.pacem-fps {
+    pointer-events: none !important;
+    display: none !important;
+}

package/src/base/overrides.css

@@ -0,0 +1,3 @@
+/* base (content part), after the components: backgrounds and text overrides. */
+@import "backgrounds.css";
+@import "text.css";

package/src/base/preloader.css

@@ -0,0 +1,17 @@
+html .pacem-preloader {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    display: grid;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    z-index: calc(var(--pacem-zindex-toast) + 1000);
+    background-color: #fff;
+}

package/src/base/reset.css

@@ -0,0 +1,50 @@
+/* #region RESET */
+html, body, div, span, menu, menuitem, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    -webkit-tap-highlight-color: none;
+}
+
+table {
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+caption, th, td {
+    text-align: left;
+    font-weight: normal;
+}
+
+table, td, th {
+    vertical-align: middle;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+    content: "";
+}
+
+blockquote, q {
+    quotes: "" "";
+}
+
+a img {
+    border: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+*:focus, *:active {
+    outline: none;
+}
+
+textarea {
+    overflow: auto;
+}
+
+:invalid {
+    box-shadow: none; /* Firefox invalid inputs decoration */
+}
+/* #endregion */

package/src/base/shell.css

@@ -0,0 +1,3 @@
+/* base (shell part): keyframes, attributes, lists. */
+@import "animations.css";
+@import "attributes.css";

package/src/base/text.css

@@ -0,0 +1,184 @@
+/* #region text overrides */
+
+/* .type-{std|main|tech}: the font face, and font sizes scaled by its rem factor (--pacem--type-factor) */
+.type-std {
+    --pacem--type-factor: var(--pacem-font-std-rem-factor);
+    font-family: var(--pacem-font-std) !important;
+}
+
+.type-main {
+    --pacem--type-factor: var(--pacem-font-main-rem-factor);
+    font-family: var(--pacem-font-main) !important;
+}
+
+.type-tech {
+    --pacem--type-factor: var(--pacem-font-tech-rem-factor);
+    font-family: var(--pacem-font-tech) !important;
+}
+
+:is(.type-std, .type-main, .type-tech) {
+    font-size: calc(1rem * var(--pacem--type-factor));
+
+    &.font-size-regular { font-size: calc(1rem * var(--pacem--type-factor)); }
+    &.font-size-small { font-size: calc(.9rem * var(--pacem--type-factor)); }
+    &.font-size-smaller { font-size: calc(.8667rem * var(--pacem--type-factor)); }
+    &.font-size-tiny { font-size: calc(.75rem * var(--pacem--type-factor)); }
+    &.font-size-smallest { font-size: calc(.6667rem * var(--pacem--type-factor)); }
+    &.font-size-big { font-size: calc(1.3333rem * var(--pacem--type-factor)); }
+    &.font-size-bigger { font-size: calc(1.6667rem * var(--pacem--type-factor)); }
+    &.font-size-huge { font-size: calc(2rem * var(--pacem--type-factor)); }
+    &.font-size-biggest { font-size: calc(2.5rem * var(--pacem--type-factor)); }
+}
+
+.text-strike {
+    text-decoration: line-through !important;
+}
+
+.text-small {
+    font-size: .9em !important;
+}
+
+.text-small-steady {
+    font-size: calc(1rem * 12 / 14 * var(--pacem-font-main-rem-factor)) !important;
+}
+
+.text-big {
+    font-size: 1.5em !important;
+}
+
+.text-big-steady {
+    font-size: calc(1rem * 18 / 14 * var(--pacem-font-main-rem-factor)) !important;
+}
+
+.text-smaller {
+    font-size: 0.86667em !important;
+}
+
+.text-smaller-steady {
+    font-size: calc(1rem * 10 / 14 * var(--pacem-font-main-rem-factor)) !important;
+}
+
+.text-tiny {
+    font-size: 0.75em !important;
+}
+
+.text-tiny-steady {
+    font-size: calc(1rem * 8 / 14 * var(--pacem-font-main-rem-factor)) !important;
+}
+
+.text-bigger {
+    font-size: 2em !important;
+}
+
+.text-bigger-steady {
+    font-size: calc(1rem * 24 / 14 * var(--pacem-font-main-rem-factor)) !important;
+}
+
+.text-left {
+    text-align: left !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-justify {
+    text-align: justify !important;
+}
+
+.text-nowrap {
+    white-space: nowrap !important;
+}
+
+.text-pre {
+    white-space: pre !important;
+}
+
+.text-prewrap {
+    white-space: pre-wrap !important;
+}
+
+.text-truncate, /* < bootstrap compat */
+.text-ellipsed {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.text-clamp {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    &.clamp-2 { -webkit-line-clamp: 2; }
+    &.clamp-3 { -webkit-line-clamp: 3; }
+    &.clamp-4 { -webkit-line-clamp: 4; }
+    &.clamp-5 { -webkit-line-clamp: 5; }
+}
+
+.text-upper {
+    text-transform: uppercase !important;
+}
+
+.text-lower {
+    text-transform: lowercase !important;
+}
+
+.text-capital {
+    text-transform: capitalize !important;
+}
+
+.text-bold,
+.text-strong {
+    font-weight: 700 !important;
+}
+
+.text-italic,
+.text-emphasis {
+    font-style: italic !important;
+}
+
+.text-tech {
+    font-family: var(--pacem-font-tech) !important;
+}
+
+.text-std {
+    font-family: var(--pacem-font-std) !important;
+}
+
+.text-main {
+    font-family: var(--pacem-font-main) !important;
+}
+
+.text-normal,
+.text-reset {
+    text-transform: none !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+}
+
+.text-rootsize {
+    font-size: calc(1rem * var(--pacem-font-std-rem-factor)) !important;
+}
+
+.text-noshadow {
+    text-shadow: none !important;
+}
+
+.text-reset {
+    font-family: var(--pacem-font-std) !important;
+    font-size: calc(1rem * var(--pacem-font-std-rem-factor));
+}
+
+.text-inherit,
+.text-inherit:hover,
+.text-inherit:active {
+    color: inherit;
+}
+
+/* #endregion */