626 lines
13 KiB
CSS
626 lines
13 KiB
CSS
/* Preview metabox is now visible */
|
|
#dw_checker_preview.postbox {
|
|
display: block;
|
|
}
|
|
li#menu-posts-checker img {
|
|
width: 18px;
|
|
}
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
#checker_options > .inside {
|
|
padding-bottom: 0;
|
|
margin-top: 0;
|
|
}
|
|
label#title-prompt-text {
|
|
padding: 3px 8px !important;
|
|
}
|
|
.inset {
|
|
box-shadow:
|
|
inset 3px 3px 15px #33333350,
|
|
inset -3px -3px 5px #ffffff !important;
|
|
border-radius: 0.5rem;
|
|
padding: 1rem !important;
|
|
}
|
|
.inset .card:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
/* .repeater-form-field .card:first-child .delete-form-card {
|
|
display:none;
|
|
} */
|
|
.repeater-form-field:not(:has(.card)) {
|
|
display: none;
|
|
}
|
|
table.checker-setting th {
|
|
width: 100px !important;
|
|
border-right: 1px solid lightgrey;
|
|
}
|
|
.card.shadow.repeater-card.gap-2,
|
|
.result-value-output.inset.bg-light > .card {
|
|
max-width: unset;
|
|
}
|
|
/** Preview **/
|
|
.dw-checker-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 2em;
|
|
}
|
|
.dw-checker-wrapper {
|
|
background-color: #ccc;
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
/* width: 500px; */
|
|
max-width: 100%;
|
|
/* box-shadow: 0px 5px 15px -5px #333333; */
|
|
}
|
|
.dw-checker-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
.dw-checker-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0.5em 0;
|
|
}
|
|
.dw-checker-field > label {
|
|
font-weight: 600;
|
|
}
|
|
.dw-checker-field > input,
|
|
.dw-checker-field > select {
|
|
height: 38px;
|
|
border-radius: 0.5em;
|
|
border: 1px solid #ccc;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
.dw-checker-buttons {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
flex: 0 1 fit-content;
|
|
}
|
|
.dw-checker-wrapper button {
|
|
padding: 0.65em 0.75em;
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
}
|
|
.dw-checker-result-div-item {
|
|
border-bottom-style: solid;
|
|
padding: 0.5em 0;
|
|
}
|
|
.card-buttons {
|
|
top: 1em;
|
|
right: -1em;
|
|
}
|
|
input[type="color"] {
|
|
height: 34px;
|
|
}
|
|
li.list-group-item.option-nav-menu.mb-0.pointer.active {
|
|
background-color: white;
|
|
color: var(--bs-bg-secondary);
|
|
font-weight: 800;
|
|
}
|
|
li.list-group-item.option-nav-menu.mb-0.pointer {
|
|
background-color: var(--bs-bg-secondary);
|
|
color: white;
|
|
}
|
|
.form-check {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.form-check-input:checked {
|
|
background-color: unset;
|
|
}
|
|
|
|
/** result **/
|
|
.dw-checker-results {
|
|
padding: 1em;
|
|
}
|
|
|
|
table.dw-checker-result-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.dw-checker-results table,
|
|
.dw-checker-results th,
|
|
.dw-checker-results td {
|
|
border-style: solid;
|
|
}
|
|
|
|
.dw-checker-results th,
|
|
.dw-checker-results td {
|
|
padding: 0.75em 0.5em;
|
|
}
|
|
.dw-checker-value-button {
|
|
border: none;
|
|
border-radius: 0.5em;
|
|
padding: 0.5em 1em;
|
|
text-decoration: none;
|
|
}
|
|
.result-header {
|
|
font-weight: bold;
|
|
}
|
|
.dw-checker-result-div {
|
|
border-bottom-style: solid;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5em;
|
|
padding: 0.75em 0;
|
|
}
|
|
.dw-checker-result-div:last-child {
|
|
border: none;
|
|
}
|
|
|
|
/** Outside Result Container **/
|
|
.dw-checker-container {
|
|
flex-direction: column;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
> *:is(:first-child, :nth-child(2)) {
|
|
flex: 0 0 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
> .dw-checker-divider {
|
|
display: none;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
.dw-checker-form-fields {
|
|
display: flex;
|
|
gap: 9px;
|
|
flex-direction: row;
|
|
max-width: 100%;
|
|
flex: 1 1 calc(100% - 110px);
|
|
}
|
|
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
.dw-checker-title {
|
|
margin-bottom: 0;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
.dw-checker-buttons.dw-checker-form-button
|
|
button {
|
|
height: 100%;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
.dw-checker-field {
|
|
margin: 0 !important;
|
|
flex: -1 0 calc(25% - 3px);
|
|
width: 100%;
|
|
}
|
|
#dw-checker-form
|
|
> .dw-checker-wrapper:is(.standard-table-output-type, .cards-output-type)
|
|
.dw-checker-form-fields
|
|
*:is(select, input) {
|
|
min-width: unset !important;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Grid layout for cards */
|
|
.dw-cards-container > .result-page {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr); /* 4 columns */
|
|
gap: 16px; /* Space between cards */
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dw-card {
|
|
border: 1px solid #ddd;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
background-color: #f9f9f9;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dw-card-item {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dw-card-title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.dw-card-value {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
color: #333;
|
|
}
|
|
|
|
.dw-card-title,
|
|
.dw-card-value {
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Pagination controls */
|
|
.pagination-controls {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.prev-page,
|
|
.next-page {
|
|
padding: 8px 16px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prev-page:hover,
|
|
.next-page:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.current-page {
|
|
margin: 0 16px;
|
|
font-weight: bold;
|
|
}
|
|
/** Standard-Table **/
|
|
/* Ensure horizontal scrolling for tables */
|
|
.dw-checker-results-container,
|
|
#dw-checker-outside-results {
|
|
overflow-x: auto; /* Enable horizontal scrolling */
|
|
max-width: 100%; /* Restrict the container width */
|
|
}
|
|
|
|
#dw-checker-outside-results {
|
|
padding: 0;
|
|
}
|
|
|
|
#dw-checker-outside-results > .dt-container > .dt-layout-row:first-child {
|
|
display: none;
|
|
}
|
|
|
|
#dw-checker-outside-results > .dt-container > .dt-layout-row:nth-child(2) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
table.dw-checker-result-table,
|
|
table.dw-standard-table {
|
|
width: 100%; /* Full width */
|
|
min-width: max-content; /* Ensure table expands to fit content */
|
|
border-collapse: collapse; /* Remove gaps between borders */
|
|
display: block; /* Ensure proper rendering */
|
|
table-layout: fixed; /* Use fixed layout for better width control */
|
|
max-width: 100%; /* Prevent table from exceeding container */
|
|
}
|
|
|
|
/* DataTables specific styling */
|
|
table.dataTable {
|
|
width: 100% !important;
|
|
table-layout: fixed !important;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
table.dataTable thead th {
|
|
text-align: left !important;
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding: 12px 15px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
width: auto !important;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
text-align: left !important;
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
white-space: nowrap;
|
|
width: auto !important;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Ensure proper table container width */
|
|
.dw-checker-results-container,
|
|
#dw-checker-outside-results {
|
|
overflow-x: auto; /* Enable horizontal scrolling when needed */
|
|
-webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#dw-checker-outside-results {
|
|
max-width: 100%;
|
|
padding: 1em;
|
|
}
|
|
|
|
/* DataTables container styling */
|
|
.dt-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
/* Table wrapper styling */
|
|
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
|
overflow: visible;
|
|
padding: 0 !important;
|
|
background-color: unset;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Fix for column alignment issues */
|
|
table.dataTable th.dt-center,
|
|
table.dataTable td.dt-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
table.dataTable th.dt-left,
|
|
table.dataTable td.dt-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
table.dataTable th.dt-right,
|
|
/* Fix for column alignment issues */
|
|
table.dataTable th.dt-center,
|
|
table.dataTable td.dt-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
table.dataTable th.dt-left,
|
|
table.dataTable td.dt-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
table.dataTable th.dt-right,
|
|
table.dataTable td.dt-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* Row styling */
|
|
table.dataTable tbody tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
table.dataTable tbody tr:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
/* Empty state styling */
|
|
table.dataTable td.dataTables_empty {
|
|
text-align: center;
|
|
padding: 1em;
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media screen and (max-width: 768px) {
|
|
table.dataTable thead th,
|
|
table.dataTable tbody td {
|
|
padding: 8px 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dt-container {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
|
|
/* Ensure proper table container width */
|
|
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
|
overflow: visible;
|
|
padding: 0 !important;
|
|
background-color: unset;
|
|
}
|
|
|
|
/* Fix for DataTables layout */
|
|
.dt-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ensure proper width distribution for columns */
|
|
table.dataTable thead th {
|
|
width: auto !important;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
width: auto !important;
|
|
}
|
|
min-width: 100%;
|
|
}
|
|
|
|
/* Ensure table fits within container */
|
|
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
|
overflow: visible;
|
|
padding: 0 !important;
|
|
background-color: unset;
|
|
}
|
|
|
|
/* Fix for DataTables layout */
|
|
.dt-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ensure proper width distribution for columns */
|
|
table.dataTable thead th {
|
|
width: auto !important;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
width: auto !important;
|
|
}
|
|
|
|
/* Make sure the table doesn't overflow its container */
|
|
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
|
overflow: visible;
|
|
padding: 0 !important;
|
|
background-color: unset;
|
|
}
|
|
|
|
/* Fix for DataTables layout */
|
|
.dt-container {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ensure proper width distribution for columns */
|
|
table.dataTable thead th {
|
|
width: auto !important;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
width: auto !important;
|
|
}
|
|
|
|
table.dataTable tbody tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
table.dataTable tbody tr:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
table.dataTable td.dataTables_empty {
|
|
text-align: center;
|
|
padding: 1em;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Ensure proper width distribution */
|
|
table.dataTable {
|
|
width: 100% !important;
|
|
table-layout: auto !important;
|
|
}
|
|
|
|
table.dataTable thead th {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Fix for column alignment issues */
|
|
table.dataTable th.dt-center,
|
|
table.dataTable td.dt-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
table.dataTable th.dt-left,
|
|
table.dataTable td.dt-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
table.dataTable th.dt-right,
|
|
table.dataTable td.dt-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* DataTables specific styling */
|
|
table.dataTable thead th {
|
|
text-align: left !important;
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid #dee2e6;
|
|
padding: 12px 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
text-align: left !important;
|
|
padding: 8px 8px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
table.dataTable tbody tr:nth-child(even) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
table.dataTable tbody tr:hover {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
table.dataTable td.dataTables_empty {
|
|
text-align: center;
|
|
padding: 1em;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* Ensure proper width distribution */
|
|
table.dataTable {
|
|
width: 100% !important;
|
|
table-layout: auto !important;
|
|
}
|
|
|
|
table.dataTable thead th {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.dataTable tbody td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Fix for column alignment issues */
|
|
table.dataTable th.dt-center,
|
|
table.dataTable td.dt-center {
|
|
text-align: center !important;
|
|
}
|
|
|
|
table.dataTable th.dt-left,
|
|
table.dataTable td.dt-left {
|
|
text-align: left !important;
|
|
}
|
|
|
|
table.dataTable th.dt-right,
|
|
table.dataTable td.dt-right {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.dw-checker-container:has(.dt-container) .dw-checker-wrapper {
|
|
padding: 0 !important;
|
|
background-color: unset;
|
|
}
|
|
|
|
.dw-checker-container:has(.dt-container) select#dt-length-2 {
|
|
width: 50px;
|
|
margin-right: 10px;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dw-checker-container:has(.dt-container) button.dt-paging-button {
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
.dw-cards-container > .result-page {
|
|
grid-template-columns: var(--card-output-grid-column-desktop);
|
|
}
|
|
@media only screen and (max-width: 820px) {
|
|
.dw-cards-container > .result-page {
|
|
grid-template-columns: var(--card-output-grid-column-tablet);
|
|
}
|
|
}
|
|
@media only screen and (max-width: 482px) {
|
|
.dw-cards-container > .result-page {
|
|
grid-template-columns: var(--card-output-grid-column-mobile);
|
|
}
|
|
}
|