.pointer { cursor: pointer; } .dw-checker-divider { margin: 1rem 0; border-style: solid; } /** Preview **/ .dw-checker-container { display: flex; justify-content: center; align-items: center; } .dw-checker-wrapper { background-color: #ccc; padding: 1em; border-radius: 1em; width: 500px; max-width: 100%; box-shadow: 0px 5px 15px -5px #333333; margin-bottom: 2em; } .dw-checker-title { font-size:24px; font-weight: bold; } .dw-checker-field { display: flex; flex-direction: column; margin: .5em 0; } .dw-checker-field > label { font-weight: 600; } .dw-checker-field > input, .dw-checker-field > select { height: 48px; border-radius: .5em; border: 1px solid #ccc; padding-left: 1em; padding-right: 1em; } .dw-checker-buttons { display: flex; gap: .5em; } .dw-checker-buttons button { padding: .65em .75em; border: none; border-radius: 0.5em; } .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: .5em; } .form-check-input:checked { background-color: unset; } /** result **/ .dw-checker-input-validator { color: red; } .dw-checker-input-validator-border { border-color: red; } .dw-checker-result-value { word-break: break-word; } 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: .75em .5em; } .dw-checker-value-button { border: none; border-radius: .5em; padding: .5em 1em; text-decoration: none; } .result-header { font-weight: bold; } .dw-checker-result-div { border-bottom-style: solid; display: flex; flex-direction: column; gap: .5em; padding: .75em 0; } .dw-checker-result-div:last-child{ border: none; } button.dw-checker-result-pagination-button { background-color: #ffffff; color: #333333; font-weight: bold; padding: 1em 1.25em; border: 1px solid #ddd; box-shadow: 0px 3px 7px -5px grey; border-radius: .5em; } .dw-checker-result-pagination { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; gap: .5em; padding-bottom: 1em; } button.dw-checker-result-pagination-button.active { filter: invert(1); } .dw-checker-card-container { display: grid; gap: .5em; } .dw-checker-single-card { min-width: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1em; border-radius: .5em; transition: transform 0.2s, box-shadow 0.2s; } .dw-checker-single-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .dw-checker-single-card > *:first-child { font-size: smaller; } .dw-checker-single-card > *:last-child { font-size: larger; font-weight: bold; } /* Loading state */ .dw-checker-loading { text-align: center; padding: 2rem; } /* Empty state */ .dw-checker-empty-state { text-align: center; padding: 3rem 1rem; } /* Pagination improvements */ .dw-checker-pagination { margin-top: 1rem; display: flex; gap: 0.5rem; justify-content: center; align-items: center; flex-wrap: wrap; } .pagination-btn { padding: 0.5rem 1rem; border: 1px solid #ddd; background: #fff; cursor: pointer; border-radius: 0.25rem; transition: all 0.2s; } .pagination-btn:hover:not(:disabled) { background: #f8f9fa; border-color: #adb5bd; } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Mobile responsive */ @media (max-width: 768px) { .dw-checker-result-table { font-size: 14px; } .dw-checker-result-table th { width: 40%; } .dw-checker-result-table td { width: 60%; } .dw-checker-card-container { gap: 0.5rem; } .pagination-btn { padding: 0.4rem 0.8rem; font-size: 0.9rem; } } .dw-checker-bottom-results { padding: .5em; max-width: 100%!important; } table.dw-checker-result-container, table.dw-checker-result-container th, table.dw-checker-result-container td{ border: 1px solid #ccc!important; border-collapse: collapse; } .dw-checker-results th { width: fit-content!important; max-width: 50%!important; } .has-not-found-message { text-align: center; margin-bottom: 1em; } span.dw-checker-result-header, span.dw-checker-result-value { float: left; }