Jake Vanderwerf
2026-05-03 42c23cc62d812c29c431977934af7b0f2a24b04b
forms.css
@@ -150,7 +150,10 @@
}
.field {
    margin: 2rem 0;
    padding: 2rem 0;
    border: 2px solid var(--base);
    border-left: 0;
    border-right: 0;
    position: relative;
}
@@ -226,47 +229,29 @@
/**********************
SPECIAL FIELDS
**********************/
.selected-items {
    --justify: flex-start;
    --gap: .5rem;
    margin-bottom: .5rem;
}
.selected-item {
    padding: .25rem .5rem;
    margin: .125em;
    background: var(--base-100);
    border-radius: .25rem;
    font-size: var(--txt-medium);
    border: 1px solid var(--base-200);
    position: relative;
}
/*.remove-item {*/
/*    background: none;*/
/*    border: none;*/
/*    padding: .25rem;*/
/*    cursor: pointer;*/
/*    color: #666;*/
/*    border-radius: var(--radius);*/
/*    width: 1.5em;*/
/*    height: 1.5em;*/
/*}*/
.remove-item {
    background: none;
    border: none;
    padding: .25rem;
    cursor: pointer;
    color: #666;
    border-radius: var(--radius);
    width: 1.5em;
    height: 1.5em;
}
/*.remove-item .close {*/
/*    width: .5em;*/
/*    height: .5em;*/
/*}*/
.remove-item .close {
    width: .5em;
    height: .5em;
}
/*.remove-item:hover {*/
/*    color: var(--action-0);*/
/*    background: #fee;*/
/*}*/
.remove-item:hover {
    color: var(--action-0);
    background: #fee;
}
.clear-filters {
    margin-left: auto;
    border: 1px solid var(--base-200);
}
/******************************************************************
CHECKBOXES & RADIOS
@@ -408,8 +393,16 @@
    color: var(--contrast-200);
    opacity: .8;
}
<<<<<<< HEAD
.radio-options.status label {
.field.radio.status label {
=======
.radio-options[data-field="post_status"] fieldset {
    display: flex;
    width: 100%;
}
.radio-options[data-field="post_status"] label {
>>>>>>> 75ac79b1e67a6bb4a195a86f55e5429cf2b4c3de
    padding: 0 .5rem;
}
@@ -437,15 +430,15 @@
    flex: unset!important;
}
.radio-options {
.field.radio {
    --gap: .125rem .5rem;
}
.radio-options input:not(.ch) + label::before {
.field.radio input:not(.ch) + label::before {
    display: none!important;
}
.radio-options input:not(.ch) + label {
.field.radio input:not(.ch) + label {
    flex: unset!important;
    padding: .25rem!important;
    border-radius: 4px;
@@ -455,8 +448,8 @@
    text-align: center;
}
.radio-options input:not(.ch) + label:hover,
.radio-options input:not(.ch):checked + label {
.field.radio input:not(.ch) + label:hover,
.field.radio input:not(.ch):checked + label {
    border-color: var(--action-0);
    color: var(--action-0);
}
@@ -487,8 +480,9 @@
.quantity button {
    background: var(--base);
    padding: 0;
    width: 38px;
    height: 38px;
    width: var(--chip_);
    height: var(--chip_);
    min-height: 0;
    z-index: 0;
    position: relative;
    border: 1px solid var(--base-200);
@@ -545,43 +539,6 @@
    border-radius: 4px 0 0  4px;
}
/******************************************************************
TAXONOMY SELECTOR
******************************************************************/
.items-container {
    margin: 0;
    padding: 0;
    width: 100%;
}
.create-new-term {
    margin-top: 1rem;
    width: 100%;
}
.create-new-term .field,
.create-new-term[open] summary {
    margin-bottom: 1rem;
}
.create-new-term .field {
    max-width: 100%;
}
#jvb-selector > .wrap {
    --wrap: nowrap;
    --justify: flex-start;
}
#jvb-selector .items-wrap {
    width: 100%;
}
#jvb-selector .items-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1fr, 100%))
}
/******************************
TABS
******************************/
@@ -692,7 +649,7 @@
/*.field.upload [data-upload-id] {*/
/*    touch-action: none;*/
/*}*/
.empty-group,
.file-upload-wrapper {
    border: 2px dashed var(--action-0);
    border-radius: 4px;
@@ -707,7 +664,7 @@
    margin: 0!important;
    font-size: var(--txt-large);
}
.empty-group,
.file-upload-wrapper:hover,
.dragover {
    background: rgba(var(--action-rgb),var(--op-2));
@@ -723,22 +680,17 @@
    opacity: 0;
    cursor: pointer;
}
.empty-group p,
.file-upload-text {
    color: var(--contrast);
    margin: 0;
    font-family: var(--body);
}
.empty-group p strong,
.file-upload-text strong {
    color: var(--action-0);
    text-decoration: underline;
}
.field.upload:has(.upload-item) .file-upload-container {
    display: none;
}
.field.upload {
    position: relative;
}
@@ -750,7 +702,9 @@
    top: 0;
    right: 0;
}
.item-grid.groups {
    grid-template-columns: repeat(1, 1fr);
}
.item-grid.group {
    margin-bottom: 0;
}
@@ -795,6 +749,7 @@
    position: absolute;
    top: 0;
    right: 0;
    padding-left: var(--chipchip);
}
.item-grid.restore summary,
.item-grid.preview summary,
@@ -886,13 +841,13 @@
.upload-group .selected .field {
    margin: 0;
}
.upload-group .group-actions button {
.upload-group .selection-actions button {
    aspect-ratio: unset;
}
.submit-uploads {
    position: fixed;
    bottom: var(--btn_);
    bottom: 0;
    right: var(--btn_);
    z-index: var(--z-6);
    height: var(--btn);
@@ -908,6 +863,7 @@
    color: var(--contrast-200);
}
.empty-group {
    order: -1;
    grid-column: 1 / -1;
@@ -1059,7 +1015,7 @@
/******
Upload grouping
******/
.group-actions {
.selection-actions {
    display: flex;
    gap: .25rem;
}
@@ -1102,6 +1058,7 @@
    .group-display .preview-wrap,
    .group-display .sidebar {
        --wrap: nowrap;
        height: 50%;
        overflow:hidden auto;
        position: relative;
@@ -1217,6 +1174,7 @@
    .group-display .preview-wrap,
    .group-display .sidebar {
        --justify: flex-start;
        --wrap: nowrap;
        max-height: calc(100vh - var(--btnbtn));
        overflow: hidden auto;
    }
@@ -1252,18 +1210,8 @@
    }
}
.restore-uploads {
    position: fixed;
    top: var(--btn_);
    bottom: var(--btn_);
    left: 1rem;
    right: 1rem;
    border-radius: var(--radius-outer);
    padding: 1rem;
    z-index: var(--z-7);
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
    background-color: var(--base-200);
    overflow: hidden auto;
.item-grid.restore {
    grid-template-columns: repeat(1, 1fr);
}
/*************************************************************
@@ -1355,6 +1303,22 @@
    margin-left: auto;
}
.repeater .field-input-wrapper {
    flex-direction: column;
}
.repeater .repeater-items {
    width: 100%;
}
.remove-row,
.add-repeater-row {
    margin-left: auto;
    min-height: 0;
    height: var(--chipchip);
    background-color: var(--action-0);
}
/*******************************************************
UPLOADER
@@ -2411,13 +2375,6 @@
    flex-shrink: 0;
}
.autocomplete-dropdown {
    width: 100%;
    background-color: var(--base-100);
    padding: .5rem;
    box-shadow: rgba(var(--base-rgb),var(--op-45)) var(--shdw);
}
.invite details {
    margin-bottom: 1.5rem;
}
@@ -2426,21 +2383,21 @@
Tag Field
 */
/* Tag List Field */
.field.tag-list .tag-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
.field.tag-list .field-input-wrapper {
    flex-direction: column;
}
.field.tag-list .row {
    margin-bottom: 1rem;
    flex-wrap: wrap;
    --align: flex-end;
}
.field.tag-list .tag-input-row .field {
.field.tag-list .row .field {
    flex: 1;
    min-width: 150px;
    margin: 0;
}
.field.tag-list .tag-input-row .add-tag-item {
.field.tag-list .tag .add-tag-item {
    flex-shrink: 0;
    white-space: nowrap;
    margin-top: calc(var(--txt-medium) + 1rem);
@@ -2489,12 +2446,44 @@
}
@media (max-width: 768px) {
    .field.tag-list .tag-input-row {
    .field.tag-list .tag {
        flex-direction: column;
        align-items: stretch;
    }
    .field.tag-list .tag-input-row .field {
    .field.tag-list .tag .field {
        min-width: 100%;
    }
}
.pendingChanges {
    position: fixed;
    bottom: var(--btn);
    right: var(--btn_);
    margin-right: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    background-color: rgba(var(--base-rgb),var(--op-6));
    z-index: var(--z-6);
    width: 50vw;
    animation: fadeInSlideUp 0.5s ease-out forwards;
}
    .pendingChanges button {
        min-height: 0;
        width: calc(50% - .7rem);
        padding: .35rem;
    }
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start 20px below its final position */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* End at its normal position */
    }
}
.field.radio fieldset {
    display:flex;
}