/** * WC Licensed Product - Frontend Styles * * @package Jeremias\WcLicensedProduct */ /* License Status Badges */ .license-status { display: inline-block; padding: 0.25em 0.6em; font-size: 0.85em; font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } .license-status-active { background-color: #d4edda; color: #155724; } .license-status-inactive { background-color: #fff3cd; color: #856404; } .license-status-expired { background-color: #f8d7da; color: #721c24; } .license-status-revoked { background-color: #d6d8db; color: #383d41; } /* License Table */ .woocommerce-licenses-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } .woocommerce-licenses-table th, .woocommerce-licenses-table td { padding: 0.75em; text-align: left; border-bottom: 1px solid #e5e5e5; } .woocommerce-licenses-table th { font-weight: 600; background-color: #f8f8f8; } .woocommerce-licenses-table code { font-family: monospace; background-color: #f5f5f5; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; } /* Domain Field */ #licensed-product-domain-field { margin-top: 2em; padding: 1.5em; background-color: #f8f9fa; border: 1px solid #e5e5e5; border-radius: 4px; } #licensed-product-domain-field h3 { margin-top: 0; margin-bottom: 1em; font-size: 1.1em; } #licensed-product-domain-field .description { display: block; margin-top: 0.5em; font-size: 0.9em; color: #666; } /* Responsive */ @media screen and (max-width: 768px) { .woocommerce-licenses-table, .woocommerce-licenses-table thead, .woocommerce-licenses-table tbody, .woocommerce-licenses-table th, .woocommerce-licenses-table td, .woocommerce-licenses-table tr { display: block; } .woocommerce-licenses-table thead tr { position: absolute; top: -9999px; left: -9999px; } .woocommerce-licenses-table tr { border: 1px solid #e5e5e5; margin-bottom: 1em; } .woocommerce-licenses-table td { border: none; position: relative; padding-left: 50%; } .woocommerce-licenses-table td:before { content: attr(data-title); position: absolute; left: 0.75em; width: 45%; font-weight: 600; } }