@pacem/pacem-theme-css 0.0.0-stage → 1.1.0-sierpinski

package/src/basic/index.css

@@ -0,0 +1,285 @@
+/* basic (theme/less/pacem/basic): the non-visual elements, drag & drop, swipe and rescale. */
+pacem-data,
+pacem-fetch,
+pacem-hub-proxy,
+pacem-hub-listener,
+pacem-tween,
+pacem-shortcut,
+pacem-beforeunload,
+pacem-online-status,
+pacem-template-proxy,
+pacem-html-proxy,
+pacem-style-proxy,
+pacem-layout-proxy,
+pacem-body-proxy,
+pacem-title-proxy,
+pacem-meta-proxy,
+pacem-event-proxy,
+pacem-worker-proxy,
+pacem-broadcastchannel-proxy,
+pacem-history {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+pacem-panel {
+    display: block;
+}
+
+pacem-span {
+    display: inline;
+
+    &.label {
+        cursor: default;
+    }
+}
+
+pacem-resize,
+pacem-repeater {
+    display: block;
+}
+
+/* #region dock */
+pacem-dock {
+    display: block;
+
+    &.pacem-dock {
+        width: 100vw;
+        left: 0;
+        position: fixed !important;
+        z-index: calc(var(--pacem-zindex-menu) - 1);
+
+        &.pacem-dock-top {
+            top: 0;
+        }
+
+        &.pacem-dock-bottom {
+            bottom: 0;
+        }
+    }
+}
+/* #endregion */
+
+pacem-scroll-aware,
+pacem-viewport-aware {
+    display: block;
+}
+
+/* #region drag & drop */
+pacem-drag-drop {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+@keyframes drag-lock {
+    0% {
+        filter: brightness(2);
+    }
+
+    50% {
+        opacity: 0.25;
+        filter: brightness(1.5);
+    }
+
+    100% {
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+.drag-handle,
+.pacem-body.pacem-dragging {
+    cursor: move;
+}
+
+.pacem-drag-lock:not(.pacem-dragging) {
+    animation: drag-lock .25s 1 var(--pacem-easing-in-out-sine) normal both;
+}
+
+.pacem-dragging {
+    user-select: none !important;
+    cursor: move !important;
+}
+
+.pacem-dragging.drag-placeholder {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.pacem-drag-floater {
+    opacity: 1;
+    pointer-events: none;
+    z-index: calc(var(--pacem-zindex-lightbox) + 1);
+}
+
+:--no-shadows:--no-glows .pacem-drag-floater {
+    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
+}
+
+:--shadows .pacem-drag-floater {
+    box-shadow: 0 2px 24px rgba(0,0,0,.5);
+}
+
+:--glows:--dark-scheme .pacem-drag-floater {
+    box-shadow: 0 0 16px rgb(from var(--pacem-color-default) r g b / 25%);
+}
+
+:--glows:--light-scheme .pacem-drag-floater {
+    box-shadow: 0 0 8px var(--pacem-color-default-inverse);
+}
+/* #endregion */
+
+/* #region swipe */
+pacem-swipe {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+.pacem-swipe {
+    /* Prevents the browser from handling scrolling, letting JS capture the swipe. */
+    touch-action: none;
+}
+/* #endregion */
+
+/* #region rescale: handles spacing / 4 thick, centered on the edges */
+pacem-rescale {
+    pointer-events: none !important;
+    display: none !important;
+}
+
+body.pacem-rescaling {
+    &.rescale-topleft {
+        cursor: nw-resize !important;
+    }
+
+    &.rescale-bottomright {
+        cursor: se-resize !important;
+    }
+
+    &.rescale-topright {
+        cursor: ne-resize !important;
+    }
+
+    &.rescale-bottomleft {
+        cursor: sw-resize !important;
+    }
+
+    &.rescale-top {
+        cursor: n-resize !important;
+    }
+
+    &.rescale-bottom {
+        cursor: s-resize !important;
+    }
+
+    &.rescale-right {
+        cursor: e-resize !important;
+    }
+
+    &.rescale-left {
+        cursor: w-resize !important;
+    }
+
+    user-select: none !important;
+}
+
+body:not(.pacem-rescaling) .pacem-rescale {
+    &.rescale-topleft {
+        cursor: nw-resize;
+    }
+
+    &.rescale-bottomright {
+        cursor: se-resize;
+    }
+
+    &.rescale-topright {
+        cursor: ne-resize;
+    }
+
+    &.rescale-bottomleft {
+        cursor: sw-resize;
+    }
+
+    &.rescale-top {
+        cursor: n-resize;
+    }
+
+    &.rescale-bottom {
+        cursor: s-resize;
+    }
+
+    &.rescale-right {
+        cursor: e-resize;
+    }
+
+    &.rescale-left {
+        cursor: w-resize;
+    }
+
+    user-select: none !important;
+}
+
+.pacem-rescalable {
+    position: relative;
+
+    .pacem-rescale {
+        pointer-events: auto;
+        opacity: 0;
+        background-color: var(--pacem-color-default);
+        position: absolute;
+
+        &:is(.rescale-topleft, .rescale-bottomright, .rescale-topright, .rescale-bottomleft) {
+            width: calc(var(--pacem-grid-spacing) / 4);
+            height: calc(var(--pacem-grid-spacing) / 4);
+        }
+
+        &.rescale-topleft {
+            top: calc(var(--pacem-grid-spacing) / -8);
+            left: calc(var(--pacem-grid-spacing) / -8);
+        }
+
+        &.rescale-bottomright {
+            bottom: calc(var(--pacem-grid-spacing) / -8);
+            right: calc(var(--pacem-grid-spacing) / -8);
+        }
+
+        &.rescale-topright {
+            top: calc(var(--pacem-grid-spacing) / -8);
+            right: calc(var(--pacem-grid-spacing) / -8);
+        }
+
+        &.rescale-bottomleft {
+            bottom: calc(var(--pacem-grid-spacing) / -8);
+            left: calc(var(--pacem-grid-spacing) / -8);
+        }
+
+        &.rescale-top {
+            height: calc(var(--pacem-grid-spacing) / 4);
+            top: calc(var(--pacem-grid-spacing) / -8);
+            left: 0;
+            right: 0;
+        }
+
+        &.rescale-bottom {
+            height: calc(var(--pacem-grid-spacing) / 4);
+            bottom: calc(var(--pacem-grid-spacing) / -8);
+            left: 0;
+            right: 0;
+        }
+
+        &.rescale-right {
+            width: calc(var(--pacem-grid-spacing) / 4);
+            bottom: 0;
+            top: 0;
+            right: calc(var(--pacem-grid-spacing) / -8);
+        }
+
+        &.rescale-left {
+            width: calc(var(--pacem-grid-spacing) / 4);
+            bottom: 0;
+            top: 0;
+            left: calc(var(--pacem-grid-spacing) / -8);
+        }
+    }
+}
+/* #endregion */

package/src/charts/generated/colors.css

@@ -0,0 +1,49 @@
+/* Generated by theme/css/tools/generate.ts: do not edit, edit the generator instead. */
+/* charts/index.css: pie charts */
+.pacem-chart-area.chart-root { --pacem--pie: var(--pacem-color-root); }
+.pacem-chart-area.chart-background { --pacem--pie: var(--pacem-color-background); }
+.pacem-chart-area.chart-default { --pacem--pie: var(--pacem-color-default); }
+.pacem-chart-area.chart-invert { --pacem--pie: var(--pacem-color-invert); }
+.pacem-chart-area.chart-primary { --pacem--pie: var(--pacem-color-primary); }
+.pacem-chart-area.chart-secondary { --pacem--pie: var(--pacem-color-secondary); }
+.pacem-chart-area.chart-accent { --pacem--pie: var(--pacem-color-accent); }
+.pacem-chart-area.chart-info { --pacem--pie: var(--pacem-color-info); }
+.pacem-chart-area.chart-success { --pacem--pie: var(--pacem-color-success); }
+.pacem-chart-area.chart-warning { --pacem--pie: var(--pacem-color-warning); }
+.pacem-chart-area.chart-danger { --pacem--pie: var(--pacem-color-danger); }
+.pacem-chart-area.chart-error { --pacem--pie: var(--pacem-color-error); }
+.pacem-chart-area.chart-disabled { --pacem--pie: var(--pacem-color-disabled); }
+.pacem-chart-area.chart-green { --pacem--pie: var(--pacem-color-green); }
+.pacem-chart-area.chart-yellow { --pacem--pie: var(--pacem-color-yellow); }
+.pacem-chart-area.chart-brown { --pacem--pie: var(--pacem-color-brown); }
+.pacem-chart-area.chart-red { --pacem--pie: var(--pacem-color-red); }
+.pacem-chart-area.chart-pink { --pacem--pie: var(--pacem-color-pink); }
+.pacem-chart-area.chart-blue { --pacem--pie: var(--pacem-color-blue); }
+.pacem-chart-area.chart-orange { --pacem--pie: var(--pacem-color-orange); }
+.pacem-chart-area.chart-purple { --pacem--pie: var(--pacem-color-purple); }
+.pacem-chart-area.chart-teal { --pacem--pie: var(--pacem-color-teal); }
+.pacem-chart-area.chart-gray { --pacem--pie: var(--pacem-color-gray); }
+
+svg.pacem-pie-chart g.chart-series.series-root { --pacem--slice: var(--pacem-color-root); }
+svg.pacem-pie-chart g.chart-series.series-background { --pacem--slice: var(--pacem-color-background); }
+svg.pacem-pie-chart g.chart-series.series-default { --pacem--slice: var(--pacem-color-default); }
+svg.pacem-pie-chart g.chart-series.series-invert { --pacem--slice: var(--pacem-color-invert); }
+svg.pacem-pie-chart g.chart-series.series-primary { --pacem--slice: var(--pacem-color-primary); }
+svg.pacem-pie-chart g.chart-series.series-secondary { --pacem--slice: var(--pacem-color-secondary); }
+svg.pacem-pie-chart g.chart-series.series-accent { --pacem--slice: var(--pacem-color-accent); }
+svg.pacem-pie-chart g.chart-series.series-info { --pacem--slice: var(--pacem-color-info); }
+svg.pacem-pie-chart g.chart-series.series-success { --pacem--slice: var(--pacem-color-success); }
+svg.pacem-pie-chart g.chart-series.series-warning { --pacem--slice: var(--pacem-color-warning); }
+svg.pacem-pie-chart g.chart-series.series-danger { --pacem--slice: var(--pacem-color-danger); }
+svg.pacem-pie-chart g.chart-series.series-error { --pacem--slice: var(--pacem-color-error); }
+svg.pacem-pie-chart g.chart-series.series-disabled { --pacem--slice: var(--pacem-color-disabled); }
+svg.pacem-pie-chart g.chart-series.series-green { --pacem--slice: var(--pacem-color-green); }
+svg.pacem-pie-chart g.chart-series.series-yellow { --pacem--slice: var(--pacem-color-yellow); }
+svg.pacem-pie-chart g.chart-series.series-brown { --pacem--slice: var(--pacem-color-brown); }
+svg.pacem-pie-chart g.chart-series.series-red { --pacem--slice: var(--pacem-color-red); }
+svg.pacem-pie-chart g.chart-series.series-pink { --pacem--slice: var(--pacem-color-pink); }
+svg.pacem-pie-chart g.chart-series.series-blue { --pacem--slice: var(--pacem-color-blue); }
+svg.pacem-pie-chart g.chart-series.series-orange { --pacem--slice: var(--pacem-color-orange); }
+svg.pacem-pie-chart g.chart-series.series-purple { --pacem--slice: var(--pacem-color-purple); }
+svg.pacem-pie-chart g.chart-series.series-teal { --pacem--slice: var(--pacem-color-teal); }
+svg.pacem-pie-chart g.chart-series.series-gray { --pacem--slice: var(--pacem-color-gray); }