fix: remove Bootstrap .container from card styling

Fixed awkward appearance where Bootstrap .container elements were being
styled as cards with backgrounds, borders, and padding.

Changes:
- Removed .container from card/panel styling rule
- Added explicit .container reset to transparent background
- Removed .container from responsive design rule
- .container now maintains proper Bootstrap layout behavior

This fixes the "inner looks like a card" issue where main content areas
had unwanted card styling applied.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-09 04:54:17 +01:00
parent b88a6439f5
commit 09a60e1bd6

View File

@@ -123,7 +123,6 @@ input[type="submit"]:active {
/* Cards & Containers */
.card,
.panel,
.container,
.recording-item,
article {
background-color: var(--pivoine-bg-lighter) !important;
@@ -142,6 +141,15 @@ article {
transform: translateY(-2px);
}
/* Don't style Bootstrap .container - it's a layout wrapper */
.container {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Forms & Inputs */
input[type="text"],
input[type="email"],
@@ -389,8 +397,7 @@ code {
/* Responsive Design */
@media (max-width: 768px) {
.card,
.panel,
.container {
.panel {
padding: 12px !important;
}