/** * Admin Styles * * @package WPALLSTARS\PluginStarterTemplate */ /* General Admin Styles */ .wpst-admin-page { max-width: 1200px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .wpst-admin-header { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .wpst-admin-header h1 { margin-top: 0; color: #23282d; } /* Admin Form Styles */ .wpst-form-table { width: 100%; border-collapse: collapse; } .wpst-form-table th { text-align: left; padding: 15px 10px 15px 0; width: 200px; vertical-align: top; } .wpst-form-table td { padding: 15px 0; vertical-align: middle; } .wpst-form-table input[type="text"], .wpst-form-table input[type="number"], .wpst-form-table select, .wpst-form-table textarea { width: 400px; max-width: 100%; } .wpst-form-table textarea { min-height: 100px; } .wpst-form-description { color: #666; font-style: italic; margin-top: 5px; } /* Admin Notices */ .wpst-notice { padding: 10px 15px; margin: 15px 0; border-radius: 3px; border-left: 4px solid #00a0d2; background: #f7fcff; } .wpst-notice.success { border-left-color: #46b450; background: #ecf7ed; } .wpst-notice.error { border-left-color: #dc3232; background: #fbeaea; } .wpst-notice.warning { border-left-color: #ffb900; background: #fff8e5; } /* Admin Cards */ .wpst-card-container { display: flex; flex-wrap: wrap; margin: 0 -10px; } .wpst-card { flex: 1 0 300px; margin: 10px; padding: 20px; background: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .wpst-card-header { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #eee; } .wpst-card-title { margin: 0; font-size: 16px; font-weight: 600; } .wpst-card-content { margin-bottom: 15px; } .wpst-card-footer { padding-top: 15px; border-top: 1px solid #eee; text-align: right; } /* Responsive Styles */ @media screen and (max-width: 782px) { .wpst-form-table th { width: 100%; display: block; padding-bottom: 0; } .wpst-form-table td { width: 100%; display: block; } .wpst-form-table input[type="text"], .wpst-form-table input[type="number"], .wpst-form-table select, .wpst-form-table textarea { width: 100%; } }