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;
}
}