.wpa-superstar-wrap { max-width: none; margin: 0; padding-right: 20px; } .wpa-superstar-header { background: #fff; border-bottom: 1px solid #c3c4c7; box-shadow: 0 1px 0 rgba(0,0,0,.04); margin: 0 -20px 20px -20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; width: auto; } .wpa-superstar-header h1 { font-size: 23px; font-weight: 400; margin: 0; padding: 0; line-height: 1.3; color: #1d2327; } .wpa-superstar-header-actions { display: flex; align-items: center; gap: 10px; } .wpa-superstar-version { color: #646970; font-size: 13px; font-weight: 400; } .wpa-settings-container { padding: 0 20px; max-width: 1100px; } /* RankMath-style Tabs */ .nav-tab-wrapper { margin: 0; padding-top: 0; border-bottom: 1px solid #ddd; line-height: inherit; position: relative; z-index: 1; } .nav-tab { margin: 0 6px 0 0; padding: 12px 20px; font-size: 14px; line-height: 1.4; font-weight: 500; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #646970; transition: all .2s ease; } .nav-tab:hover, .nav-tab:focus { background: transparent; color: #2271b1; border-bottom-color: rgba(34, 113, 177, 0.4); } .nav-tab-active, .nav-tab-active:focus, .nav-tab-active:focus:active, .nav-tab-active:hover { background: transparent; color: #2271b1; border: 0; border-bottom: 2px solid #2271b1; font-weight: 600; } /* RankMath-style toggle switches */ .wpa-superstar-toggle { margin: 15px 0; padding: 16px 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); transition: all .15s ease-in-out; } .wpa-superstar-toggle:hover { border-color: #4caf50; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .wpa-superstar-toggle label { display: flex; align-items: center; font-size: 14px; line-height: 1.4; font-weight: 500; color: #1d2327; cursor: pointer; } .wpa-superstar-toggle .description { margin: 6px 0 0 52px; color: #666; font-size: 13px; line-height: 1.5; } /* RankMath-style Toggle Switch */ .wpa-toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-right: 12px; } .wpa-toggle-switch input { opacity: 0; width: 0; height: 0; margin: 0; } .wpa-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #b5bfc9; transition: .15s ease-in-out; border-radius: 100px; border: 0; } .wpa-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .15s ease-in-out; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .wpa-toggle-switch input:checked + .wpa-toggle-slider { background-color: #4caf50; } .wpa-toggle-switch input:checked + .wpa-toggle-slider:before { transform: translateX(20px); } .wpa-toggle-switch input:focus + .wpa-toggle-slider { box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(76, 175, 80, 0.25); } .wpa-toggle-switch:hover .wpa-toggle-slider:before { box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Settings content spacing */ .wpa-settings-content { margin-top: 30px; padding: 0 10px; } /* Plugin Browser Styles */ .wpa-plugin-filters { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #ddd; } .wpa-plugin-filters .button { margin: 0 8px 8px 0; padding: 4px 10px; font-size: 13px; line-height: 1.5; min-height: 30px; } .wpa-plugins-browser { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .plugin-card { background-color: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); margin: 0; width: 100%; padding: 0; transition: all .15s ease-in-out; } .plugin-card:hover { border-color: #4caf50; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .plugin-card-top { padding: 20px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; } .plugin-card .name { margin-bottom: 12px; } .plugin-card .name h3 { font-size: 16px; line-height: 1.3; margin: 0; color: #1d2327; } .plugin-card .plugin-author { font-size: 13px; color: #646970; font-weight: 400; margin-left: 8px; } .plugin-card .desc { margin: 8px 0; color: #50575e; } .plugin-card .desc p { margin: 0; font-size: 13px; line-height: 1.5; } .plugin-card .action-links { margin-top: 16px; } .plugin-action-buttons { margin: 0; padding: 0; list-style: none; } .plugin-action-buttons li { display: inline-block; margin: 0; } .plugin-action-buttons .button { min-height: 30px; line-height: 28px; padding: 0 12px; font-size: 13px; } .plugin-action-buttons .button-disabled { color: #a7aaad !important; border-color: #ddd !important; background: #f6f7f7 !important; box-shadow: none !important; cursor: default; transform: none !important; } /* Adjust settings content padding for plugin browser */ .wpa-settings-content { margin-top: 20px; padding: 0; }