.aksrt-widget-form { --aksrt-field-border: #dcdcde; --aksrt-field-accent: #2271b1; display: grid; gap: 14px; padding: 4px 0 10px; } .aksrt-widget-field { min-width: 0; } .aksrt-widget-field[hidden] { display: none !important; } .aksrt-widget-field__label { display: block; margin-bottom: 6px; font-weight: 600; } .aksrt-widget-field .description { margin: -2px 0 7px; } .aksrt-widget-switch { display: inline-flex; cursor: pointer; } .aksrt-widget-switch input { position: absolute; opacity: 0; } .aksrt-widget-switch span { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #8c8f94; transition: background .18s ease; } .aksrt-widget-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease; } .aksrt-widget-switch input:checked + span { background: var(--aksrt-field-accent); } .aksrt-widget-switch input:checked + span::after { transform: translateX(16px); } .aksrt-widget-switch input:focus-visible + span { outline: 2px solid #72aee6; outline-offset: 2px; } .aksrt-widget-choices { display: flex; flex-wrap: wrap; gap: 6px; } .aksrt-widget-choices label input { position: absolute; opacity: 0; } .aksrt-widget-choices label span { display: block; padding: 5px 9px; border: 1px solid var(--aksrt-field-border); border-radius: 5px; background: #fff; cursor: pointer; } .aksrt-widget-choices label input:checked + span { border-color: var(--aksrt-field-accent); color: var(--aksrt-field-accent); box-shadow: 0 0 0 1px var(--aksrt-field-accent); } .aksrt-widget-number, .aksrt-widget-icon, .aksrt-widget-link, .aksrt-widget-background { display: grid; gap: 7px; } .aksrt-widget-number { grid-template-columns: minmax(0, 1fr) 50px; align-items: center; } .aksrt-widget-remote-picker { position: relative; } .aksrt-widget-remote-picker > select { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .aksrt-widget-remote-picker__selected { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; } .aksrt-widget-remote-picker__tag { padding: 4px 8px; border: 1px solid #c3c4c7; border-radius: 3px; background: #f6f7f7; color: #2c3338; cursor: pointer; } .aksrt-widget-remote-picker__tag::after { margin-left: 6px; color: #787c82; content: "×"; } .aksrt-widget-remote-picker__results { position: absolute; z-index: 20; right: 0; left: 0; max-height: 210px; overflow-y: auto; border: 1px solid #8c8f94; border-top: 0; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .12); } .aksrt-widget-remote-picker__result, .aksrt-widget-remote-picker__status { display: block; width: 100%; padding: 7px 9px; border: 0; background: #fff; color: #2c3338; text-align: left; } .aksrt-widget-remote-picker__result { cursor: pointer; } .aksrt-widget-remote-picker__result:hover, .aksrt-widget-remote-picker__result:focus { background: #f0f6fc; color: #135e96; } .aksrt-widget-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .aksrt-widget-upload img { width: 100%; max-height: 150px; border-radius: 6px; object-fit: cover; } .aksrt-widget-upload .widefat { flex: 1 1 100%; } .aksrt-widget-spacing { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .aksrt-widget-spacing label span { display: block; margin-bottom: 3px; color: #646970; text-align: center; } .aksrt-widget-repeater__row, .aksrt-widget-nested { margin-bottom: 9px; border: 1px solid var(--aksrt-field-border); border-radius: 6px; background: #fff; } .aksrt-widget-repeater__bar { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--aksrt-field-border); background: #f6f7f7; } .aksrt-widget-repeater__bar .dashicons { cursor: move; } .aksrt-widget-repeater__bar strong { flex: 1; } .aksrt-widget-repeater__fields, .aksrt-widget-nested__body { display: grid; gap: 12px; padding: 10px; } .aksrt-widget-nested > summary { padding: 9px 10px; font-weight: 600; cursor: pointer; } .aksrt-widget-form-lazy { padding: 14px; border: 1px dashed #c3c4c7; border-radius: 6px; text-align: center; } .aksrt-widget-form-lazy__status { margin-top: 0; color: #646970; } .aksrt-widget-placement-hint { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; padding: 8px; border-left: 3px solid #72aee6; background: #f0f6fc; color: #50575e; } .aksrt-widget-placement-hint.is-warning { border-color: #dba617; background: #fcf9e8; color: #614200; } .aksrt-widget-transfer { margin: 16px 20px 16px 0; } .aksrt-widget-transfer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .aksrt-widget-transfer form { display: grid; align-content: start; gap: 9px; padding: 12px; border: 1px solid #dcdcde; border-radius: 6px; } .aksrt-widget-transfer form h3 { margin: 0 0 3px; } .aksrt-widget-transfer select, .aksrt-widget-transfer input[type="file"] { width: 100%; } .aksrt-widget-transfer__actions { display: flex; flex-wrap: wrap; gap: 8px; } .aksrt-widget-template-preview-output { grid-column: 1 / -1; max-height: 520px; overflow: auto; padding: 14px; border: 1px solid #dcdcde; background: #fff; } .aksrt-widget-template-preview__area { margin-bottom: 18px; } .aksrt-widget-template-preview__module { margin: 10px 0; padding: 12px; border: 1px dashed #c3c4c7; border-radius: 6px; } @media (max-width: 1100px) { .aksrt-widget-transfer__grid { grid-template-columns: 1fr; } .aksrt-widget-template-preview-output { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .aksrt-widget-switch span, .aksrt-widget-switch span::after { transition: none; } }