kate522
8aa116ec43
Align homepage and category discovery, modern widgets, admin controls, quotes, and comments with the reference theme. Remove superseded paths and add rendering and behavior coverage. Update stale asset and finance contracts; all 760 Node tests and 139 widget assertions pass.
270 lines
9.0 KiB
CSS
270 lines
9.0 KiB
CSS
.aksrt-widget-form {
|
|
--aksrt-field-border: #dcdcde;
|
|
--aksrt-field-accent: #0991f5;
|
|
display: grid;
|
|
gap: 0;
|
|
padding: 0 0 8px;
|
|
}
|
|
|
|
.aksrt-widget-field {
|
|
min-width: 0;
|
|
padding: 11px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.aksrt-widget-field[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.aksrt-widget-field__label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-weight: 600;
|
|
color: #0991f5;
|
|
}
|
|
|
|
.customize-control-widget_form .aksrt-widget-field__label { color: inherit; }
|
|
|
|
.aksrt-widget-field .description {
|
|
margin: -2px 0 7px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.aksrt-widget-field--switcher {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
column-gap: 12px;
|
|
}
|
|
|
|
.aksrt-widget-field--switcher .aksrt-widget-field__label { margin: 0; }
|
|
.aksrt-widget-field--switcher .description { grid-column: 1 / -1; grid-row: 2; }
|
|
.aksrt-widget-field--switcher > .aksrt-widget-switch { grid-column: 2; grid-row: 1; }
|
|
|
|
.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 10px;
|
|
border: 1px solid var(--aksrt-field-border);
|
|
border-radius: 4px;
|
|
background: #f7f8fa;
|
|
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-choices label input:focus-visible + span { outline: 2px solid #72aee6; outline-offset: 2px; }
|
|
|
|
.aksrt-widget-choices--palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 5px; }
|
|
.aksrt-widget-choices--palette label > span { padding: 4px; text-align: center; }
|
|
.aksrt-widget-palette-choice { display: grid; justify-items: center; gap: 3px; }
|
|
.aksrt-widget-palette-choice i { display: block; width: 100%; height: 18px; border: 1px solid rgba(0, 0, 0, .12); border-radius: 3px; }
|
|
.aksrt-widget-palette-choice small { font-size: 10px; line-height: 1.2; }
|
|
|
|
.aksrt-widget-number,
|
|
.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-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: 4px;
|
|
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: #f9fafc;
|
|
}
|
|
|
|
.aksrt-widget-repeater__bar::-webkit-details-marker { display: none; }
|
|
.aksrt-widget-repeater__bar { list-style: none; cursor: pointer; }
|
|
.aksrt-widget-repeater__bar::after { content: "\f140"; margin-left: auto; font: 20px/1 dashicons; color: #646970; }
|
|
.aksrt-widget-repeater__row[open] > .aksrt-widget-repeater__bar::after { content: "\f142"; }
|
|
.aksrt-widget-repeater__bar .dashicons { cursor: move; }
|
|
.aksrt-widget-repeater__bar strong { flex: 1; }
|
|
.aksrt-widget-repeater__remove:disabled { visibility: hidden; }
|
|
.aksrt-widget-repeater__add:disabled { opacity: .55; cursor: not-allowed; }
|
|
.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 input[type="text"],
|
|
.aksrt-widget-form input[type="url"],
|
|
.aksrt-widget-form input[type="number"],
|
|
.aksrt-widget-form select,
|
|
.aksrt-widget-form textarea {
|
|
min-height: 32px;
|
|
border-color: #d5d8dc;
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.aksrt-widget-form input:focus,
|
|
.aksrt-widget-form select:focus,
|
|
.aksrt-widget-form textarea:focus {
|
|
border-color: #0991f5;
|
|
box-shadow: 0 0 0 1px #0991f5;
|
|
}
|
|
|
|
.aksrt-widget-form .button { min-height: 32px; line-height: 30px; border-radius: 3px; }
|
|
.aksrt-widget-form .button-primary { background: #0991f5; border-color: #087bcf; }
|
|
|
|
.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-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
|
|
.aksrt-widget-transfer-toolbar .button { margin: 0; }
|
|
.aksrt-widget-customizer-remove { margin-left: 8px; color: #b32d2e; }
|
|
.aksrt-widget-transfer-modal[hidden] { display: none !important; }
|
|
.aksrt-widget-transfer-modal.is-open { position: fixed; inset: 0; z-index: 1000100; display: flex; align-items: center; justify-content: center; padding: 20px; }
|
|
.aksrt-widget-transfer-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, .45); }
|
|
.aksrt-widget-transfer-modal__dialog { position: relative; z-index: 1; box-sizing: border-box; width: min(720px, 96vw); max-height: 90vh; overflow: auto; padding: 18px 20px 16px; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); }
|
|
.aksrt-widget-transfer-modal__dialog h2 { margin: 0 36px 10px 0; font-size: 16px; }
|
|
.aksrt-widget-transfer-modal__area { margin: 0 0 12px; }
|
|
.aksrt-widget-transfer-modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: transparent; color: #646970; font-size: 22px; cursor: pointer; }
|
|
.aksrt-widget-transfer-modal__tabs { display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #dcdcde; }
|
|
.aksrt-widget-transfer-modal__tabs .is-active { border-color: #0991f5; color: #087bcf; box-shadow: inset 0 -2px #0991f5; }
|
|
.aksrt-widget-transfer-modal__panel form { display: grid; align-content: start; gap: 10px; }
|
|
.aksrt-widget-transfer-modal__panel select,
|
|
.aksrt-widget-transfer-modal__panel input[type="file"] { width: 100%; }
|
|
.aksrt-widget-transfer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.aksrt-widget-template-preview-output { max-height: 420px; overflow: auto; margin-top: 14px; 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: 600px) {
|
|
.aksrt-widget-transfer-modal.is-open { padding: 10px; }
|
|
.aksrt-widget-transfer-modal__dialog { width: 100%; padding: 16px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.aksrt-widget-switch span,
|
|
.aksrt-widget-switch span::after { transition: none; }
|
|
}
|
|
|
|
|
|
/* terms: searchable multi-select with drag ordering */
|
|
.aksrt-widget-terms .aksrt-widget-terms__selected { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__selected:empty { display: none; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; background: #f0f0f1; border: 1px solid #dcdcde; font-size: 12px; cursor: move; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__chip .dashicons { font-size: 14px; width: 14px; height: 14px; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__remove { border: 0; background: none; cursor: pointer; line-height: 1; padding: 0 0 0 2px; text-decoration: none; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__search { margin-bottom: 6px; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__options { max-height: 180px; overflow-y: auto; border: 1px solid #dcdcde; border-radius: 4px; padding: 4px 8px; background: #fff; }
|
|
.aksrt-widget-terms .aksrt-widget-terms__option { display: block; padding: 2px 0; }
|