fix: Remove transparency from mobile buttons and fix landscape layout
Mobile Button Opacity (No Transparency): - Changed all mobile button backgrounds from rgba(x,x,x,0.5) to rgba(x,x,x,1) - Added opacity: 1 !important to override base opacity: 0.6 rules - Buttons now display at full opacity with iOS blur bar backdrop - Affected buttons: download, print-friendly, shortcuts, info, back-to-top, theme-switcher Landscape Layout Fix: - Added single-column grid rule for landscape orientation - Media query: @media (max-width: 915px) and (orientation: landscape) - Forces grid-template-columns: 1fr for both page-1 and page-2 - Prevents 2-column layout on iPhone landscape (844px wide) Files Modified: - static/css/04-interactive/_scroll-behavior.css: Button opacity overrides - static/css/05-responsive/_breakpoints.css: Landscape single-column grid - static/css/color-theme.css: Theme switcher opacity override Visual Changes: - Mobile buttons: Full color, no transparency (vibrant appearance) - Landscape: Single column layout (sidebar top, content below) - Maintains footer-hovered transparency for footer interaction
This commit is contained in:
@@ -132,13 +132,15 @@
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
/* Mobile: Show colors at 50% transparency by default */
|
||||
/* Mobile: Show colors at full opacity (no transparency with blur bar) */
|
||||
.download-btn {
|
||||
background: rgba(205, 96, 96, 0.5) !important; /* PDF red at 50% */
|
||||
background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */
|
||||
opacity: 1 !important; /* Override base opacity */
|
||||
}
|
||||
|
||||
.print-friendly-btn {
|
||||
background: rgba(255, 255, 255, 0.5) !important; /* White at 50% */
|
||||
background: rgba(255, 255, 255, 1) !important; /* White - full opacity */
|
||||
opacity: 1 !important; /* Override base opacity */
|
||||
}
|
||||
|
||||
.print-friendly-btn iconify-icon {
|
||||
@@ -146,16 +148,18 @@
|
||||
}
|
||||
|
||||
.shortcuts-btn {
|
||||
background: rgba(243, 156, 18, 0.5) !important; /* Orange at 50% */
|
||||
background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */
|
||||
opacity: 1 !important; /* Override base opacity */
|
||||
}
|
||||
|
||||
.info-button {
|
||||
background: rgba(39, 174, 96, 0.5) !important; /* Green at 50% */
|
||||
background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
|
||||
opacity: 1 !important; /* Override base opacity */
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
background: rgba(39, 174, 96, 0.5) !important; /* Green at 50% */
|
||||
opacity: 0.5; /* Semi-transparent by default, full opacity when at-bottom */
|
||||
background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
|
||||
opacity: 1 !important; /* Full opacity (no transparency with blur bar) */
|
||||
}
|
||||
|
||||
/* Flexbox container behavior - buttons arrange themselves */
|
||||
|
||||
Reference in New Issue
Block a user