/**
|
* JVBase SEO Admin Styles
|
*/
|
|
.jvb-seo-admin {
|
max-width: 1200px;
|
}
|
|
/* Tabs */
|
.jvb-seo-tabs {
|
display: flex;
|
gap: 0;
|
border-bottom: 1px solid #c3c4c7;
|
margin-bottom: 20px;
|
}
|
|
.jvb-seo-tabs .tab-btn {
|
padding: 10px 20px;
|
border: 1px solid transparent;
|
border-bottom: none;
|
background: #f0f0f1;
|
cursor: pointer;
|
font-size: 14px;
|
margin-bottom: -1px;
|
border-radius: 4px 4px 0 0;
|
}
|
|
.jvb-seo-tabs .tab-btn:hover {
|
background: #fff;
|
}
|
|
.jvb-seo-tabs .tab-btn.active {
|
background: #fff;
|
border-color: #c3c4c7;
|
font-weight: 600;
|
}
|
|
/* Tab content */
|
.tab-content {
|
display: none;
|
}
|
|
.tab-content.active {
|
display: block;
|
}
|
|
/* Forms */
|
.jvb-seo-form,
|
.jvb-seo-fieldset {
|
background: #fff;
|
border: 1px solid #c3c4c7;
|
padding: 20px;
|
margin-bottom: 20px;
|
border-radius: 4px;
|
}
|
|
.jvb-seo-form h2,
|
.jvb-seo-content-type h3 {
|
margin-top: 0;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #eee;
|
}
|
|
.form-field {
|
margin-bottom: 15px;
|
}
|
|
.form-field label {
|
display: block;
|
font-weight: 600;
|
margin-bottom: 5px;
|
}
|
|
.form-field input.regular-text,
|
.form-field input.large-text,
|
.form-field textarea,
|
.form-field select {
|
width: 100%;
|
max-width: 600px;
|
}
|
|
.form-field input.small-text {
|
width: 80px;
|
}
|
|
.form-field .description {
|
display: block;
|
color: #646970;
|
font-size: 12px;
|
margin-top: 4px;
|
}
|
|
.form-field textarea {
|
min-height: 80px;
|
}
|
|
/* Fieldsets */
|
.jvb-seo-fieldset fieldset {
|
border: 1px solid #ddd;
|
padding: 15px;
|
margin-bottom: 15px;
|
border-radius: 4px;
|
}
|
|
.jvb-seo-fieldset fieldset legend {
|
font-weight: 600;
|
padding: 0 10px;
|
}
|
|
/* Content type sections */
|
.jvb-seo-content-type {
|
margin-bottom: 30px;
|
}
|
|
.jvb-seo-content-type h3 {
|
cursor: pointer;
|
padding: 15px;
|
background: #f6f7f7;
|
border: 1px solid #c3c4c7;
|
margin: 0;
|
border-radius: 4px;
|
}
|
|
.jvb-seo-content-type h3:hover {
|
background: #f0f0f1;
|
}
|
|
.jvb-seo-content-type .jvb-seo-fieldset {
|
border-top: none;
|
border-radius: 0 0 4px 4px;
|
}
|
|
/* Schema fields */
|
.schema-fields {
|
margin-top: 15px;
|
padding-top: 15px;
|
border-top: 1px dashed #ddd;
|
}
|
|
.schema-field-mapping {
|
padding: 10px;
|
background: #f9f9f9;
|
border-radius: 4px;
|
margin-bottom: 10px;
|
}
|
|
/* Form actions */
|
.form-actions {
|
display: flex;
|
gap: 10px;
|
margin-top: 20px;
|
padding-top: 15px;
|
border-top: 1px solid #eee;
|
}
|
|
/* Repeater fields */
|
.repeater-field .repeater-row {
|
display: flex;
|
gap: 10px;
|
align-items: center;
|
margin-bottom: 8px;
|
}
|
|
.repeater-field .repeater-row input {
|
flex: 1;
|
}
|
|
.repeater-field .remove-row {
|
color: #b32d2e;
|
border-color: #b32d2e;
|
line-height: 1;
|
padding: 4px 10px;
|
}
|
|
.repeater-field .add-row {
|
margin-top: 5px;
|
}
|
|
/* Image field */
|
.image-field {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.image-field .image-preview img {
|
max-height: 50px;
|
border-radius: 4px;
|
}
|
|
/* Variable reference */
|
.jvb-seo-variable-ref {
|
background: #f0f6fc;
|
border: 1px solid #72aee6;
|
padding: 15px;
|
margin-top: 20px;
|
border-radius: 4px;
|
}
|
|
.jvb-seo-variable-ref h3 {
|
margin-top: 0;
|
color: #135e96;
|
}
|
|
.jvb-seo-variable-ref .variable-list code {
|
background: #fff;
|
padding: 2px 6px;
|
border-radius: 3px;
|
font-size: 12px;
|
}
|
|
/* Notices */
|
.jvb-seo-admin .notice {
|
margin: 15px 0;
|
}
|
|
/* Template fields - visual indicator */
|
.template-field {
|
font-family: monospace;
|
background: #fff;
|
}
|
|
.template-field:focus {
|
border-color: #2271b1;
|
box-shadow: 0 0 0 1px #2271b1;
|
}
|
|
/* Responsive */
|
@media (max-width: 782px) {
|
.jvb-seo-tabs {
|
flex-wrap: wrap;
|
}
|
|
.jvb-seo-tabs .tab-btn {
|
flex: 1 1 auto;
|
text-align: center;
|
}
|
|
.form-field input.regular-text,
|
.form-field input.large-text,
|
.form-field textarea,
|
.form-field select {
|
max-width: 100%;
|
}
|
}
|
|
/* Dashboard integration */
|
.jvb-dash .jvb-seo-admin {
|
padding: 0;
|
}
|
|
.jvb-dash .jvb-seo-tabs {
|
background: transparent;
|
}
|
|
.jvb-dash .jvb-seo-form,
|
.jvb-dash .jvb-seo-fieldset {
|
background: var(--jvb-bg, #fff);
|
border-color: var(--jvb-border, #c3c4c7);
|
}
|
