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

package/src/scaffolding/pickers.css

@@ -0,0 +1,150 @@
+/* namevalue-list.less, element-picker.less, property-picker.less, expression.less, char-counter.less,
+   geolocate.less, chars.less (.FormFieldItemWrapper(): input.css) */
+
+pacem-namevalue-list {
+    display: block;
+
+    &.pacem-readonly .pacem-fieldset .pacem-fieldgroup :is(.fieldgroup-prepend, .fieldgroup-append) {
+        border: none;
+        width: calc(var(--pacem-grid-spacing) / 3);
+    }
+}
+
+:is(pacem-element-picker, pacem-property-picker) {
+    display: inline-block;
+
+    pacem-select {
+        display: block;
+    }
+}
+
+/* #region expression */
+pacem-expression {
+    :is(textarea.pacem-input, input.pacem-input) {
+        font-family: var(--pacem-font-tech);
+        font-size: calc(1rem * var(--pacem-font-tech-rem-factor));
+    }
+
+    .expression-builder {
+        padding-left: calc(var(--pacem-grid-spacing) / 1.5);
+        border-left: var(--pacem-border-field-size) dashed var(--pacem-color-border);
+    }
+
+    span.pacem-viewfinder {
+        line-height: var(--pacem-field-height);
+        min-height: var(--pacem-field-height);
+    }
+
+    &.pacem-readonly {
+        .pacem-viewfinder {
+            border-color: transparent !important;
+            /* ($border-color in Less, !important included) */
+            background-color: transparent !important;
+        }
+
+        :is(.pacem-fieldset-left, .pacem-fieldset-center, .pacem-fieldset-right, .pacem-fieldset-auto,
+            .fieldset-left, .fieldset-center, .fieldset-right, .fieldset-auto) {
+            background-color: transparent !important;
+        }
+    }
+}
+/* #endregion */
+
+/* #region char counter */
+pacem-char-count {
+    display: flex;
+    align-content: flex-end;
+    justify-content: flex-end;
+    flex-direction: row;
+    font-family: var(--pacem-font-tech);
+    font-size: calc(.7rem * var(--pacem-font-tech-rem-factor));
+    text-align: right;
+
+    pacem-span {
+        flex: 0 0 auto;
+
+        &:is(.pacem-char-min, .pacem-char-max) {
+            opacity: 0.75;
+        }
+
+        &.pacem-char-min::after,
+        &.pacem-char-max::before {
+            content: '\2044';
+            font-size: 0.8em;
+            padding: calc(var(--pacem-grid-spacing) / 12);
+        }
+
+        &.pacem-char-curr {
+            font-weight: 700;
+        }
+    }
+
+    .pacem-char-count {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        align-content: flex-end;
+        position: relative;
+        padding: calc(var(--pacem-grid-spacing) / 12) var(--pacem-grid-spacing) calc(var(--pacem-grid-spacing) / 12) calc(var(--pacem-grid-spacing) / 8);
+        /* (when the input radius is not 0) */
+        transform: translateX(calc(-1 * var(--pacem-border-input-radius)));
+
+        &::after {
+            /* .Icon(): icons.css */
+            content: 'keyboard';
+            font-size: calc(var(--pacem-grid-spacing) / 1.5);
+            right: 0;
+            top: 0;
+        }
+    }
+
+    .pacem-char-count.invalid {
+        background: var(--pacem-color-error);
+        color: var(--pacem-color-error-inverse);
+        /* (when the radius is not 0) */
+        padding-left: calc(var(--pacem-grid-spacing) / 8 + var(--pacem-border-input-radius) * sign(var(--pacem-border-radius)));
+        padding-right: calc(var(--pacem-grid-spacing) + var(--pacem-border-input-radius) * sign(var(--pacem-border-radius)));
+        border-bottom-left-radius: calc(var(--pacem-border-input-radius) * sign(var(--pacem-border-radius)));
+        border-bottom-right-radius: calc(var(--pacem-border-input-radius) * sign(var(--pacem-border-radius)));
+
+        &::after {
+            right: calc(var(--pacem-border-input-radius) * sign(var(--pacem-border-radius)));
+        }
+    }
+}
+/* #endregion */
+
+@media (--pacem-lg) {
+    pacem-geolocate pacem-suggest:not(.field-stretch) {
+        display: block;
+    }
+}
+
+/* #region chars */
+pacem-input-chars {
+    :is(.pacem-readonly, .pacem-input) {
+        font-size: 1.5rem;
+        font-family: var(--pacem-font-tech);
+    }
+
+    .pacem-readonly {
+        letter-spacing: .25rem;
+    }
+
+    .pacem-input {
+        text-align: center;
+        width: 2rem;
+        padding: 0;
+        margin: 0 var(--pacem-size--4);
+
+        &.first-char {
+            margin-left: 0;
+        }
+
+        &.last-char {
+            margin-right: 0;
+        }
+    }
+}
+/* #endregion */

package/src/scaffolding/radio.css

@@ -0,0 +1,68 @@
+@custom-selector :--radio-icons .pacem-readonly.pacem-radio, label.pacem-label.pacem-radio, pacem-radio-list .pacem-readonly.pacem-radio;
+@custom-selector :--radio-states .pacem-readonly.pacem-radio, label.pacem-label.pacem-radio;
+@custom-selector :--naked-radios .form-minimal > pacem-form-field:not(.field-full) pacem-radio-list,
+    pacem-form-field.field-minimal pacem-radio-list, pacem-radio-list.radio-list-naked;
+
+:--radio-icons::before {
+    /* .Icon(): icons.css */
+    content: 'radio_button_unchecked';
+    font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    left: calc(var(--pacem-grid-spacing) / 3);
+    line-height: var(--pacem-field-height);
+    color: var(--pacem-color-input-toggle);
+}
+
+pacem-radio.pacem-selected label.pacem-label.pacem-radio::before {
+    content: 'radio_button_checked';
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+/* .FormFieldLabelIcon() */
+:is(pacem-radio-list, pacem-radio) .pacem-readonly.pacem-radio {
+    padding-left: var(--pacem-grid-spacing);
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'check_circle';
+        font-size: calc(1.1rem * var(--pacem-font-rem-factor));
+        /* (the second .Icon() restores the fill) */
+        font-variation-settings: 'FILL' var(--pacem-font-icon-fill), 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        line-height: calc(1.5 * 1.1 * var(--pacem-font-rem-factor));
+        color: var(--pacem-color-input-toggle);
+        left: 0;
+        top: 0;
+    }
+}
+
+:is(pacem-radio-list, pacem-radio).pacem-disabled :--radio-states {
+    color: var(--pacem-color-disabled);
+}
+
+:is(pacem-radio-list, pacem-radio).pacem-disabled :--radio-states::before {
+    color: var(--pacem-color-disabled);
+}
+
+/* just the radio */
+:--naked-radios .pacem-radio-list {
+    min-width: 0;
+    background: none;
+}
+
+:--naked-radios .pacem-radio-list label.pacem-radio {
+    border: 0;
+    padding-left: calc(var(--pacem-grid-spacing) / 3);
+    position: static;
+    line-height: 1.5;
+    min-width: 0;
+    min-height: 0;
+    vertical-align: middle;
+    font-size: calc(1rem * var(--pacem-field-minimal-fontsize) * var(--pacem-font-std-rem-factor));
+}
+
+:--naked-radios .pacem-radio-list label.pacem-radio::before {
+    position: static;
+    vertical-align: middle;
+    margin-right: calc(var(--pacem-grid-spacing) / 4);
+}

package/src/scaffolding/select.css

@@ -0,0 +1,59 @@
+/* (.FormFieldItemWrapper(): input.css) */
+pacem-select::after {
+    /* .Icon(): icons.css */
+    content: 'arrow_drop_down';
+    font-size: var(--pacem-grid-spacing);
+    line-height: var(--pacem-field-height);
+    right: 0;
+    top: 0;
+    pointer-events: none;
+}
+
+pacem-select.pacem-readonly::after {
+    display: none;
+}
+
+pacem-select .pacem-select {
+    /* .FormFieldItem() */
+    padding: 0 calc(var(--pacem-grid-spacing) / 3);
+    font-family: var(--pacem-font-std);
+    font-size: calc(1.1rem * var(--pacem-font-std-rem-factor));
+    color: var(--pacem-color-field-fore);
+    /* .FormFieldItemInline() */
+    min-width: 0;
+    line-height: var(--pacem-field-height);
+    box-sizing: border-box;
+    padding-right: var(--pacem-grid-spacing);
+    display: block;
+    width: 100%;
+    /* normalize the toggle button */
+    appearance: none;
+
+    &::placeholder {
+        color: var(--pacem-color-watermark);
+        font-style: italic;
+        font-family: var(--pacem-font-std);
+    }
+
+    > option {
+        background-color: var(--pacem-theme-lightblue);
+
+        &.pacem-watermark {
+            color: var(--pacem-color-watermark);
+            font-style: italic;
+            font-family: var(--pacem-font-std);
+        }
+
+        &[disabled] {
+            color: var(--pacem-color-disabled);
+        }
+    }
+}
+
+:--field-underline pacem-select .pacem-select {
+    min-height: calc(var(--pacem-field-height) + var(--pacem-border-field-size));
+}
+
+:--field-box pacem-select .pacem-select {
+    min-height: calc(var(--pacem-field-height) + 2 * var(--pacem-border-field-size));
+}

package/src/scaffolding/slider.css

@@ -0,0 +1,236 @@
+/* Slider: track spacing / 6 thick, thumb as big as the spacing, as tall as a field.
+   Colors (each(@all_colors) in Less): written once against private properties, assigned by the color classes
+   (generated/colors.css): --pacem--slider (pacem-slider.slider-{color}), --pacem--slider-field
+   (pacem-form-field.slider-{color}).
+
+   In a form field, the slider takes the .FormFieldItemWrapperCore() (see input.css) on its contextual
+   selectors (:--in-field, whose specificities differ: they expand into lists). */
+@custom-selector :--in-field .pacem-fieldgroup pacem-slider,
+    pacem-form:not(.form-minimal) pacem-form-field:not(.field-minimal) > pacem-form:not(.pacem-readonly) > .pacem-input-container > pacem-slider;
+@custom-selector :--slider-colors :is(.slider-root, .slider-background, .slider-default, .slider-invert, .slider-primary,
+    .slider-secondary, .slider-accent, .slider-info, .slider-success, .slider-warning, .slider-danger, .slider-error,
+    .slider-disabled, .slider-green, .slider-yellow, .slider-brown, .slider-red, .slider-pink, .slider-blue,
+    .slider-orange, .slider-purple, .slider-teal, .slider-gray);
+
+pacem-slider > .pacem-slider {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: 'min track max' 'left footer right';
+    align-items: center;
+
+    :is(.slider-track, .slider-progress, .slider-thumb) {
+        grid-area: track;
+    }
+
+    [min] {
+        grid-area: min;
+    }
+
+    [max] {
+        grid-area: max;
+    }
+
+    :is(.slider-track, .slider-progress) {
+        height: calc(var(--pacem-grid-spacing) / 6);
+    }
+
+    .slider-track {
+        margin: 0 var(--pacem-grid-spacing);
+        background-color: var(--pacem-color-disabled);
+    }
+
+    .slider-thumb {
+        width: var(--pacem-grid-spacing);
+        height: var(--pacem-grid-spacing);
+        margin-left: calc(var(--pacem-grid-spacing) * .5);
+        margin-top: calc((var(--pacem-field-height) - var(--pacem-grid-spacing)) / 2);
+        margin-bottom: calc((var(--pacem-field-height) - var(--pacem-grid-spacing)) / 2);
+
+        .thumb-label {
+            border-radius: 50%;
+            background-color: var(--pacem-color-slider-thumb);
+            transform-origin: 50% 50%;
+            transform: scale(0.75);
+            width: var(--pacem-grid-spacing);
+            height: var(--pacem-grid-spacing);
+        }
+
+        &:is(.pacem-drag-lock, .pacem-dragging) {
+            opacity: 1 !important;
+
+            .thumb-label {
+                transform: scale(1);
+            }
+        }
+    }
+
+    &.slider-thumblabel .slider-thumb:focus .thumb-label {
+        transform: scale(0);
+    }
+
+    .slider-progress {
+        align-self: start;
+        transform: scaleX(0);
+        transform-origin: 0 0;
+        /* .SliderProgress() */
+        background-color: var(--pacem-color-default);
+    }
+
+    .slider-footer {
+        grid-area: footer;
+        pointer-events: none;
+        display: none;
+    }
+}
+
+:--no-glows pacem-slider > .pacem-slider .slider-track {
+    border-radius: calc(var(--pacem-grid-spacing) / 12);
+    overflow: hidden;
+}
+
+:--gradients pacem-slider > .pacem-slider .slider-track {
+    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(255,255,255,0.05) 100%);
+}
+
+:--shadows pacem-slider > .pacem-slider .slider-thumb .thumb-label {
+    box-shadow: 0 2px calc(var(--pacem-grid-spacing) / 3) rgba(0,0,0,0.5);
+}
+
+:--glows pacem-slider > .pacem-slider .slider-progress {
+    box-shadow: 0 0 8px var(--pacem-color-default);
+}
+
+/* #region in form fields: .FormFieldItemWrapperCore() */
+:--field-underline :--in-field .pacem-viewfinder,
+:--field-underline :--in-field .pacem-input {
+    border: 0;
+    border-bottom: var(--pacem-border-field-size) solid;
+}
+
+:--field-box :--in-field .pacem-viewfinder,
+:--field-box :--in-field .pacem-input {
+    border: var(--pacem-border-field-size) solid;
+}
+
+:--in-field .pacem-viewfinder,
+:--in-field .pacem-input {
+    border-color: rgb(from var(--pacem-color-default) r g b / 20%);
+    background-color: var(--pacem-color-input-back);
+    border-radius: var(--pacem-border-input-radius);
+}
+
+:--in-field .pacem-viewfinder .pacem-input,
+:--in-field .pacem-viewfinder .pacem-viewfinder {
+    border: none;
+    border-radius: 0;
+    background: none;
+}
+
+:--in-field .pacem-viewfinder .pacem-input {
+    padding: 0;
+}
+
+:--in-field.pacem-focus {
+    color: var(--pacem-color-field-fore-focus);
+}
+
+:--in-field.pacem-focus .pacem-input,
+:--in-field.pacem-focus .pacem-viewfinder {
+    border-color: rgb(from var(--pacem-color-default) r g b / 40%);
+}
+
+:--field-outline :--in-field.pacem-focus .pacem-input,
+:--field-outline :--in-field.pacem-focus .pacem-viewfinder {
+    box-shadow: 0 0 0 var(--pacem-field-outline-width) var(--pacem-color-field-outline);
+}
+
+:--no-field-outline :--in-field.pacem-focus.pacem-outline .pacem-input,
+:--no-field-outline :--in-field.pacem-focus.pacem-outline .pacem-viewfinder {
+    box-shadow: 0 0 0 2px var(--pacem-color-default);
+}
+
+:--in-field.pacem-focus .pacem-viewfinder .pacem-input,
+:--in-field.pacem-focus .pacem-viewfinder .pacem-viewfinder {
+    box-shadow: none;
+}
+
+:--in-field .pacem-readonly {
+    font-size: calc(1.1rem * var(--pacem-font-std-rem-factor));
+    display: block;
+    min-height: var(--pacem-field-height);
+    line-height: 1.5;
+    margin-bottom: var(--pacem-border-field-size);
+}
+
+:--field-underline :--in-field .pacem-readonly {
+    margin-top: 0;
+}
+
+:--field-box :--in-field .pacem-readonly {
+    margin-top: var(--pacem-border-field-size);
+}
+
+:--in-field [hidden] {
+    display: none !important;
+}
+
+:--in-field > .pacem-slider [min] {
+    padding-left: calc(var(--pacem-grid-spacing) / 3);
+}
+
+:--in-field > .pacem-slider [max] {
+    padding-right: calc(var(--pacem-grid-spacing) / 3);
+}
+/* #endregion */
+
+/* colors */
+pacem-form-field:--slider-colors pacem-slider .slider-progress {
+    background-color: var(--pacem--slider-field);
+}
+
+pacem-slider:--slider-colors .slider-progress {
+    background-color: var(--pacem--slider);
+}
+
+:--glows pacem-form-field:--slider-colors pacem-slider .slider-progress {
+    box-shadow: 0 0 8px var(--pacem--slider-field);
+}
+
+:--glows pacem-slider:--slider-colors .slider-progress {
+    box-shadow: 0 0 8px var(--pacem--slider);
+}
+
+.pacem-animations {
+    &:not(.pacem-dragging) pacem-slider:not(.slider-keydown) :is(.slider-progress, .slider-thumb) {
+        transition: transform .3333s var(--pacem-easing-in-out-sine);
+    }
+
+    pacem-slider .slider-thumb .thumb-label {
+        transition: transform .15s var(--pacem-easing-in-out-sine);
+    }
+}
+
+/* form-field context */
+pacem-form-field:not(.slider-nofooter) pacem-slider > .pacem-slider .slider-footer {
+    font-family: var(--pacem-font-tech);
+    font-size: calc(.8rem * var(--pacem-font-tech-rem-factor));
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding-left: var(--pacem-grid-spacing);
+    padding-bottom: calc(var(--pacem-grid-spacing) / 3);
+    /* .Ellipsed() */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &::before {
+        /* .Icon(): icons.css */
+        content: 'label';
+        font-size: calc(var(--pacem-grid-spacing) / 1.5);
+        position: static;
+        margin-right: calc(var(--pacem-grid-spacing) / 6);
+        color: var(--pacem-color-default);
+    }
+}

package/src/scaffolding/snapshot.css

@@ -0,0 +1,167 @@
+pacem-snapshot {
+    display: grid;
+    grid-template-columns: auto 1fr;
+
+    .pacem-snapshot {
+        grid-column: 1;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-rows: 1fr auto;
+        grid-template-areas: "stage" "footer";
+        justify-content: center;
+        align-items: center;
+
+        .snapshot-step {
+            grid-area: footer;
+            pointer-events: none;
+            opacity: 0;
+            transform: none;
+        }
+
+        :is(canvas, video) {
+            border: 1px solid var(--pacem-color-border);
+            grid-area: stage;
+            width: 100%;
+            height: 100%;
+            /* (hack: keeps the video element from exceeding the allowed size) */
+            border-radius: 1px;
+            object-fit: cover;
+            visibility: hidden;
+            pointer-events: none;
+        }
+
+        .snapshot-countdown {
+            grid-area: stage;
+            pointer-events: none;
+            border-radius: 50%;
+            width: calc(var(--pacem-grid-spacing) * 2);
+            height: calc(var(--pacem-grid-spacing) * 2);
+            background-color: rgb(from var(--pacem-theme-dark) r g b / 50%);
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            justify-self: center;
+            font-size: calc(2rem * var(--pacem-font-tech-rem-factor));
+        }
+
+        input[type=file] {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        /* start viewstep */
+        &.snapshot-start {
+            canvas {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-start {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &:is(.step-taking, .step-confirm) {
+                    transform: translateY(var(--pacem-grid-spacing));
+                }
+            }
+        }
+
+        /* taking viewstep */
+        &.snapshot-taking {
+            video {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-taking {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &.step-start {
+                    transform: translateY(calc(-1 * var(--pacem-grid-spacing)));
+                }
+
+                &.step-confirm {
+                    transform: translateY(var(--pacem-grid-spacing));
+                }
+            }
+        }
+
+        /* confirm viewstep */
+        &.snapshot-confirm {
+            canvas {
+                visibility: visible;
+            }
+
+            .snapshot-step {
+                &.step-confirm {
+                    pointer-events: all;
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+
+                &:is(.step-taking, .step-start) {
+                    transform: translateY(calc(-1 * var(--pacem-grid-spacing)));
+                }
+            }
+        }
+
+        &.snapshot-steady .snapshot-preview,
+        &.snapshot-preview.snapshot-taking .snapshot-preview,
+        &.snapshot-video video {
+            visibility: visible;
+            pointer-events: all;
+        }
+
+        &.snapshot-preview.snapshot-taking .snapshot-preview {
+            border-color: var(--pacem-color-highlight);
+        }
+
+        /* (only visible where object-fit is not obeyed) */
+        video {
+            background-color: #000;
+        }
+
+        .snapshot-brightout {
+            animation: bright-out 1s 1 normal;
+        }
+    }
+
+    &.pacem-readonly .pacem-snapshot .snapshot-step {
+        display: none;
+    }
+}
+
+/* .Blur() */
+:--blur pacem-snapshot .pacem-snapshot .snapshot-countdown {
+    backdrop-filter: blur(calc(var(--pacem-grid-spacing) * .25));
+}
+
+.pacem-animations pacem-snapshot {
+    .snapshot-step {
+        transition: transform .25s var(--pacem-easing-out-sine), opacity .2s linear;
+    }
+
+    .snapshot-countdown {
+        &:not(.pacem-viewport-aware),
+        &.pacem-viewport-aware.pacem-in-viewport {
+            animation: pop-anim .3s var(--pacem-easing-out-back) .25s both;
+        }
+    }
+}
+
+/* (a filthy patch) */
+pacem-form-field.field-center > .pacem-field > .pacem-input-container pacem-snapshot {
+    grid-template-columns: 1fr auto 1fr;
+
+    .pacem-snapshot {
+        grid-column: 2;
+    }
+}