Custom Styling

Customize the appearance of WebShorts components to match your application's design system.

Overview

WebShorts provides multiple ways to customize the styling of its components, including the help dialog, shortcut indicators, and other UI elements. You can use CSS classes, inline styles, or theme integration.

Dialog Styling

Customize the appearance of the WebShortsDialog component:

// webshorts.config.js
export default {
  dialog: {
    // Custom CSS class
    className: 'my-custom-dialog',
    
    // Inline styles
    style: {
      backgroundColor: '#1a1a1a',
      borderRadius: '12px',
      boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
    },
    
    // Custom content
    title: 'Keyboard Shortcuts',
    description: 'Use these shortcuts to navigate efficiently',
    footer: 'Press ESC to close this dialog',
  },
  // ... rest of config
};

CSS Classes

Use CSS classes to style WebShorts components. Here are the available class names:

Dialog Classes

webshorts-dialog

Main dialog container

webshorts-dialog-header

Dialog header section

webshorts-dialog-content

Dialog content area

webshorts-dialog-footer

Dialog footer section

webshorts-help-dialog-description

Help dialog description (new, for custom styling)

Shortcut Classes

webshorts-shortcut-item

Individual shortcut item

webshorts-shortcut-keys

Key combination display

webshorts-shortcut-description

Shortcut description text

webshorts-shortcut-group

Group of related shortcuts

Theme Integration

WebShorts automatically adapts to your application's theme using CSS custom properties:

/* Custom CSS Variables */
:root {
  --webshorts-bg: #ffffff;
  --webshorts-text: #1a1a1a;
  --webshorts-border: #e5e7eb;
  --webshorts-primary: #3b82f6;
  --webshorts-secondary: #6b7280;
}

/* Dark theme */
[data-theme="dark"] {
  --webshorts-bg: #1a1a1a;
  --webshorts-text: #ffffff;
  --webshorts-border: #374151;
  --webshorts-primary: #60a5fa;
  --webshorts-secondary: #9ca3af;
}

Custom CSS Examples

You can also use dialog props and config options for even more control. For example, pass className, style, or description to WebShortsDialog or set them in your config file.

Modern Dark Theme

/* Modern dark theme styling */
.webshorts-dialog {
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
  border: 1px solid #3a3a5a;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.webshorts-help-dialog-description {
  font-weight: 400;
  font-size: 1rem;
  color: #b3b3b3;
  margin-top: 0.5rem;
}

.webshorts-dialog-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid #3a3a5a;
  padding: 20px;
}

.webshorts-shortcut-keys {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'Monaco', 'Menlo', monospace;
}

Minimal Light Theme

/* Minimal light theme */
.webshorts-dialog {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.webshorts-shortcut-item {
  padding: 12px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}

.webshorts-shortcut-item:hover {
  background-color: #f9fafb;
}

.webshorts-shortcut-keys {
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

Branded Theme

/* Branded theme with custom colors */
.webshorts-dialog {
  background: #ffffff;
  border: 2px solid #8b5cf6;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.1);
}

.webshorts-dialog-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;
}

.webshorts-shortcut-keys {
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #c084fc;
  border-radius: 6px;
  padding: 4px 8px;
  font-weight: 600;
}

Responsive Design

WebShorts components are responsive by default, but you can add custom responsive styles:

/* Responsive dialog styling */
.webshorts-dialog {
  width: 90vw;
  max-width: 600px;
  max-height: 80vh;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .webshorts-dialog {
    width: 95vw;
    margin: 10px;
    border-radius: 8px;
  }
  
  .webshorts-shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .webshorts-shortcut-keys {
    font-size: 0.75rem;
    padding: 2px 4px;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .webshorts-dialog {
    width: 80vw;
    max-width: 700px;
  }
}