My_Obsidian_CSS_Snippets

# Obsidian CSS Snippets Collection

A collection of beautiful and functional CSS snippets to enhance your Obsidian experience with colorful folders, glass effects, animations, and improved visual interactions.

## ☕ Support Me

Did you find these snippets useful? A little support goes a long way. Thank you!

<a href="https://coff.ee/Shakti_02" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

## 📦 What's Included

### 🌈 Rainbow Glass Folders ⭐ **NEW & ENHANCED**
- **Rainbow Glass Folders** - The most advanced folder styling with glass effects, full opacity modes, and extensive customization
- Complete Style Settings integration with 15+ customizable options
- Three display modes: Default (no background), Glass Effect, and Solid Background
- Theme-aware colors with separate light/dark mode text colors
- Advanced hover effects and typography controls

### 🗂️ Rainbow Folder Enhanced
- **Rainbow Folder Enhanced** - Original gradient folders with Style Settings support
- Static and animated gradient options with performance controls
- Configurable through Obsidian's Settings panel
- Optimized for performance with toggle options

### 📅 Calendar Animations
- **Calendar Animations** - Interactive calendar day hover effects with dot pulse animations
- Lift and scale effects for calendar days
- Sequential dot pulse animations creating wave effects
- Compatible with Svelte-based calendar plugins

## ✨ Features Overview

### 🌈 Rainbow Glass Folders (Recommended)
- **🎨 Three Visual Modes**:
  - **Default**: Clean folders without custom backgrounds
  - **Glass Effect**: Semi-transparent folders with blur effects
  - **Solid Background**: Full opacity colorful folders
- **⚙️ Comprehensive Style Settings**: 15+ customizable options
- **🌓 Theme Awareness**: Separate text colors for light and dark modes
- **🎭 Advanced Hover Effects**: Configurable lift distance and shadows
- **💨 Performance Optimized**: No heavy animations, smooth interactions
- **🔤 Typography Control**: Adjustable font weights from 100-900
- **📐 Precise Spacing**: Control padding, margins, and corner roundness
- **🎯 Hierarchy Support**: Different styling for main vs. sub-folders
- **📁 11 Color Variations**: Beautiful gradient cycles through folder hierarchy

### 🗂️ Rainbow Folder Enhanced Features
- **🎨 Colorful Gradients**: 11 different color variations
- **⚙️ Style Settings Integration**: Full customization support
- **🎭 Hover Effects**: Configurable lift and shadow animations
- **💨 Performance Options**: Toggle animations on/off
- **🔤 Typography Control**: Adjustable font weight
- **📐 Spacing Controls**: Customizable padding and margins
- **🎯 Animation Controls**: Adjustable speed and effects
- **📁 Subfolder Support**: Transparent subfolders with hierarchy

### 📅 Calendar Animations Features
- **🚀 Lift Effect**: Calendar days lift and scale on hover
- **💫 Dot Pulse Animation**: Task indicator dots pulse sequentially
- **🌊 Staggered Timing**: Multiple dots animate in wave patterns
- **🎯 Smooth Transitions**: Eased timing for natural feel
- **📱 Svelte Compatible**: Works with modern calendar plugins

## 🚀 Installation

### Prerequisites
- **Style Settings Plugin** (highly recommended)
  - Install from Obsidian Community Plugins
  - Required for easy customization of Rainbow Glass Folders and Rainbow Folder Enhanced
- **Calendar Plugin** (for calendar animations)

### Installation Steps
1. **Download the CSS files** from this repository
2. **Open Obsidian** and go to Settings → Appearance
3. **Scroll down** to "CSS Snippets" section
4. **Click the folder icon** to open your snippets folder
5. **Copy the CSS files** into the snippets folder
6. **Return to Obsidian** and refresh the snippets list
7. **Toggle on** the snippets you want to use

### Style Settings Configuration
1. **Enable Style Settings plugin** (if not already installed)
2. **Navigate to Settings → Style Settings**
3. **Find your enabled snippet** in the plugin list
4. **Customize your preferences** using the available options

## 📁 File Descriptions

### `Rainbow Glass Folders.css` ⭐ **RECOMMENDED**
- **Most Advanced Option**: Latest and most feature-rich folder styling
- **Style Settings Compatible**: Full integration with 15+ customizable options
- **Three Display Modes**: Default, Glass Effect, and Solid Background
- **Theme Aware**: Automatic adaptation to light/dark themes
- **Performance Optimized**: No heavy animations, smooth interactions
- **Advanced Customization**: Comprehensive control over all visual aspects

### `Rainbow Folder Enhanced.css`
- **Original Enhanced Version**: Solid gradient backgrounds with animations
- **Style Settings Compatible**: Full integration with customizable options
- **Animation Support**: Toggle between static and animated gradients
- **Performance Options**: Choose static mode for better performance
- **Advanced Controls**: Border radius, lift distance, animation speed

### `calander animations.css`
- **Interactive Calendar Effects**: Hover animations for calendar days
- **Dot Pulse Animations**: Task indicator dots animate sequentially
- **Svelte Calendar Support**: Compatible with Svelte-based calendar plugins
- **Manual Customization**: Currently requires manual CSS editing for customization

## 🎨 Rainbow Glass Folders Settings

### Main Folder Display
- **Enable Folder Background**: Toggle custom folder backgrounds on/off
- **Use Solid Background**: Disable glass effect for opaque backgrounds
- **Enable Hover Effect**: Toggle lift and shadow effects on hover

### Style & Color Options
- **Text Color (Light Mode)**: Custom text color for light theme (default: #000000)
- **Text Color (Dark Mode)**: Custom text color for dark theme (default: #FFFFFF)
- **Glass Opacity**: Transparency level for glass effect mode (0.1-1.0, default: 0.55)
- **Glass Blur**: Blur intensity for glass effect (0-20px, default: 6px)
- **Font Weight**: Text thickness control (100-900, default: 500)
- **Hover Lift**: Lift distance on hover (0-10px, default: 2px)
- **Corner Roundness**: Border radius control (0-20px, default: 8px)
- **Space Between Folders**: Vertical spacing between folders (0-20px, default: 5px)
- **Internal Padding**: Top/bottom padding inside folders (1-20px, default: 5px)

## 🎨 Rainbow Folder Enhanced Settings

### Animation Controls
- **Enable Gradient Animation**: Toggle smooth gradient animations (CPU intensive)
- **Enable Hover Effects**: Toggle lift and shadow effects on hover

### Styling Options
- **Folder Name Font Weight**: Control font weight (100-900, default: 400)
- **Hover Lift Distance**: Lift distance on hover (0-10px, default: 2px)
- **Border Radius**: Corner roundness control (0-20px, default: 10px)
- **Animation Speed**: Gradient animation speed (2-15 seconds, default: 7s)
- **Vertical Space Between Folders**: Spacing control (0-20px, default: 6px)
- **Vertical Padding Inside Folders**: Internal padding (1-20px, default: 5px)

## 🎨 Color Palette

Both folder snippets use a carefully curated 11-color rainbow palette:
- **Pink/Rose**: `rgb(243, 139, 168)` variants
- **Coral**: `rgb(235, 160, 172)` variants  
- **Peach**: `rgb(250, 179, 135)` variants  
- **Yellow**: `rgb(249, 226, 175)` variants
- **Green**: `rgb(166, 227, 161)` variants
- **Teal**: `rgb(148, 226, 213)` variants
- **Light Blue**: `rgb(137, 220, 235)` variants
- **Blue**: `rgb(116, 199, 236)` variants
- **Indigo**: `rgb(135, 176, 249)` variants
- **Purple**: `rgb(180, 190, 254)` variants
- **Lavender**: `rgb(203, 166, 247)` variants

## ⚙️ Manual Customization

### Calendar Animations (Manual Only)
Since calendar animations don't have Style Settings support yet, you can manually customize:

#### Adjusting Animation Speed
```css
animation: dot-pulse 1s infinite ease-in-out; /* Change 1s to your preferred duration */
```

#### Modifying Hover Effects
```css
transform: translateY(-5px) scale(1.02); /* Adjust -5px and 1.02 as needed */
```

#### Changing Dot Animation Delays
```css
animation-delay: 0.10s; /* Adjust delay for staggered effect */
```

### Advanced Manual Customization
For both folder snippets, you can still manually edit colors:

#### Custom Colors Example
```css
.nav-files-container > div > .nav-folder:nth-child(11n + 2) {
    background: linear-gradient(90deg, rgb(255, 180, 200), rgb(243, 139, 168), rgb(220, 100, 140));
}
```

## 🔧 Compatibility

### Rainbow Glass Folders
- ✅ **Style Settings Plugin**: Full integration and support
- ✅ **All Obsidian Themes**: Works with any theme
- ✅ **Light/Dark Mode**: Automatic theme detection and adaptation
- ✅ **Custom Folder Structures**: Compatible with nested folders
- ✅ **Performance Optimized**: No heavy animations
- ✅ **Responsive Design**: Adapts to different screen sizes

### Rainbow Folder Enhanced
- ✅ **Style Settings Plugin**: Full integration and support
- ✅ **All Obsidian Themes**: Works with any theme
- ✅ **Custom Folder Structures**: Compatible with nested folders
- ✅ **Performance Optimized**: Configurable animations
- ✅ **Responsive Design**: Adapts to different screen sizes

### Calendar Animations
- ✅ **Calendar Plugin**: Works with official Calendar plugin
- ✅ **Periodic Notes**: Compatible with Periodic Notes plugin
- ✅ **Svelte-based Calendars**: Requires Svelte calendar implementation
- ⚠️ **Custom Calendar Plugins**: May need adjustment for non-standard plugins

## 🐛 Troubleshooting

### Rainbow Glass Folders
- **Colors Not Appearing**: Check if snippet is enabled and Style Settings plugin is installed
- **Glass Effect Not Working**: Ensure "Enable Folder Background" is turned on
- **Text Hard to Read**: Adjust text colors for your theme in Style Settings
- **Performance Issues**: Try solid background mode instead of glass effect

### Rainbow Folder Enhanced
- **Colors Not Appearing**: Check if snippet is enabled and Style Settings plugin is installed
- **Settings Not Showing**: Ensure Style Settings plugin is installed and active
- **Performance Issues**: Disable gradient animations in Style Settings
- **Folders Not Styling**: Clear Obsidian cache and restart

### Calendar Animations
- **Animations Not Working**: Verify compatible calendar plugin is installed
- **Dots Not Pulsing**: Check that calendar uses Svelte components
- **Performance Issues**: Reduce animation duration in CSS manually

### General Issues
- **Snippet Not Loading**: Refresh snippets list in Appearance settings
- **Conflicts with Theme**: Try disabling other CSS snippets temporarily
- **Performance Problems**: Use Style Settings to reduce effects

## 📋 Requirements

### Essential
- **Obsidian**: Latest version recommended
- **CSS Snippets Support**: Built into Obsidian

### Highly Recommended
- **Style Settings Plugin**: For easy customization of folder snippets
- **Calendar Plugin**: For calendar animations to work
- **Periodic Notes Plugin**: Enhances calendar functionality

### Optional
- **Iconize Plugin**: For enhanced folder icons
- **Custom themes**: All snippets work with any theme

## 🎯 Performance Tips

### For Best Performance
1. **Use Rainbow Glass Folders**: Most optimized option without heavy animations
2. **Choose Solid Background Mode**: Instead of glass effect for better performance
3. **Disable Gradient Animations**: In Rainbow Folder Enhanced if using both

### For Slower Devices
1. **Use Default Mode**: In Rainbow Glass Folders (no custom backgrounds)
2. **Disable All Animations**: Turn off hover effects and animations
3. **Reduce Blur Effects**: Lower glass blur settings
4. **Use Lower Font Weights**: Choose 400 or below for text

### General Optimization
1. **Enable Hardware Acceleration**: In Obsidian settings
2. **Close Unnecessary Plugins**: Reduce overall resource usage
3. **Restart Obsidian**: After making significant changes
4. **Update Regularly**: Keep Obsidian and plugins updated

## 🆚 Which Snippet Should I Choose?

### Choose Rainbow Glass Folders If:
- ✅ You want the most advanced features
- ✅ You prefer subtle, professional glass effects
- ✅ You need theme-aware automatic color adaptation
- ✅ You want maximum customization options
- ✅ Performance is important to you

### Choose Rainbow Folder Enhanced If:
- ✅ You prefer solid, vibrant gradient backgrounds
- ✅ You want animated gradient effects
- ✅ You like the original rainbow folder style
- ✅ You don't mind potentially higher CPU usage

### Choose Calendar Animations If:
- ✅ You use calendar plugins regularly
- ✅ You want interactive visual feedback
- ✅ You enjoy subtle micro-animations
- ✅ You have a Svelte-compatible calendar plugin

## 🔄 Future Updates

### Planned Features
- **Style Settings support for Calendar Animations**
- **Additional color schemes and themes**
- **More glass effect customization options**
- **Enhanced theme integration**
- **Additional animation options**

### Contribution Ideas
- Custom color palette suggestions
- Performance optimization improvements
- New animation effects
- Theme-specific optimizations
- Accessibility improvements

## 📝 Credits

Created for the Obsidian community to enhance the visual experience of note-taking and organization.

Special thanks to:
- **Style Settings Plugin developers** for making customization accessible
- **Obsidian community** for feedback and suggestions
- **Calendar plugin developers** for creating compatible interfaces
- **Theme developers** for inspiration and compatibility testing

## 🤝 Contributing

We welcome contributions! Here's how you can help:

### Ways to Contribute
- **Report Issues**: Found a bug? Let us know!
- **Suggest Features**: Have ideas for improvements?
- **Submit Pull Requests**: Code improvements and new features
- **Share Customizations**: Show off your modifications
- **Test Compatibility**: Help test with different themes and plugins

### Development Guidelines
- **Comment Your Code**: Make it easy for others to understand
- **Test Thoroughly**: Ensure compatibility across different setups
- **Follow CSS Best Practices**: Maintain clean, efficient code
- **Document Changes**: Update README with new features
- **Respect Performance**: Consider impact on different devices

## 📜 License

MIT License - These CSS snippets are provided as-is for the Obsidian community. Feel free to modify, distribute, and build upon them.

## 🆘 Support

Need help? Here are your options:

1. **Check Troubleshooting Section**: Common issues and solutions above
2. **Style Settings Documentation**: For plugin-specific help
3. **Obsidian Community**: Discord and forum support
4. **GitHub Issues**: Report bugs and request features

---

**Enjoy your enhanced Obsidian experience!** 🎉

> **Pro Tip**: Start with **Rainbow Glass Folders** for the best balance of features and performance, then explore the other snippets based on your specific needs!