Kenso Grimm
216a972fef
- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
# Styling Guidelines for Amazon Extension
|
|
|
|
## Critical: CSS Override Strategy for Amazon Pages
|
|
|
|
When styling UI elements that will be injected into Amazon pages, **CSS files alone are NOT sufficient**. Amazon's stylesheets have high specificity and load after extension styles, overriding even `!important` rules.
|
|
|
|
### The Problem
|
|
- Amazon's CSS has higher specificity than extension CSS
|
|
- Amazon's stylesheets load after extension styles
|
|
- Even `!important` rules in CSS files can be overridden
|
|
- CSS variables defined in `:root` may not work on Amazon pages
|
|
|
|
### The Solution: Inline Styles via JavaScript
|
|
|
|
For critical visual styles (backgrounds, colors, borders, etc.), apply them directly via JavaScript using `element.style`:
|
|
|
|
```javascript
|
|
// ✅ CORRECT - Cannot be overridden by Amazon CSS
|
|
Object.assign(element.style, {
|
|
background: '#0a0a0a',
|
|
color: '#ffffff',
|
|
padding: '2rem',
|
|
borderRadius: '24px'
|
|
});
|
|
|
|
// ❌ WRONG - Will be overridden by Amazon CSS
|
|
// Relying only on CSS classes
|
|
element.className = 'my-styled-element';
|
|
```
|
|
|
|
### CSS Specificity Hierarchy (highest to lowest)
|
|
1. **Inline styles via JavaScript** (`element.style.property`) - HIGHEST
|
|
2. Inline styles in HTML (`style="..."`)
|
|
3. `!important` in CSS
|
|
4. ID selectors
|
|
5. Class selectors
|
|
6. Element selectors
|
|
|
|
### Implementation Pattern
|
|
|
|
Create helper methods in Manager classes:
|
|
|
|
```javascript
|
|
_applyInlineStyles(element) {
|
|
Object.assign(element.style, {
|
|
background: 'rgba(255, 255, 255, 0.05)',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
borderRadius: '24px',
|
|
// ... more styles
|
|
});
|
|
}
|
|
```
|
|
|
|
### When to Use Inline Styles
|
|
- Container backgrounds and colors
|
|
- Text colors and fonts
|
|
- Borders and border-radius
|
|
- Padding and margins
|
|
- Any visual style that must be guaranteed
|
|
|
|
### When CSS Files Are Still Useful
|
|
- Animations and keyframes
|
|
- Pseudo-elements (::before, ::after)
|
|
- Media queries for responsive design
|
|
- Hover states (combine with JS event listeners)
|
|
- Complex selectors
|
|
|
|
### Example: Hover Effects with JavaScript
|
|
|
|
```javascript
|
|
element.addEventListener('mouseenter', () => {
|
|
element.style.transform = 'translateY(-6px)';
|
|
element.style.boxShadow = '0 12px 48px rgba(0, 0, 0, 0.45)';
|
|
});
|
|
|
|
element.addEventListener('mouseleave', () => {
|
|
element.style.transform = 'none';
|
|
element.style.boxShadow = 'none';
|
|
});
|
|
```
|
|
|
|
## Design System Colors (for inline styles)
|
|
|
|
```javascript
|
|
const colors = {
|
|
bgDark: '#0a0a0a',
|
|
bgCard: 'rgba(255, 255, 255, 0.05)',
|
|
bgCardHover: 'rgba(255, 255, 255, 0.08)',
|
|
textPrimary: '#ffffff',
|
|
textSecondary: '#e0e0e0',
|
|
textMuted: '#a0a0a0',
|
|
primary: '#ff9900',
|
|
primaryGradient: 'linear-gradient(135deg, #ff9900 0%, #ff7700 100%)',
|
|
border: 'rgba(255, 255, 255, 0.1)',
|
|
borderHover: 'rgba(255, 255, 255, 0.2)',
|
|
success: '#28a745',
|
|
error: '#dc3545',
|
|
link: '#74c0fc'
|
|
};
|
|
```
|