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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user