467 lines
11 KiB
CSS
467 lines
11 KiB
CSS
/* ==============================================
|
|
RESPONSIVE ENHANCEMENTS FOR QBPOS HELP
|
|
============================================== */
|
|
|
|
/* Base Reset for Better Cross-Browser Compatibility */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Improve Image Responsiveness */
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Enhanced Focus States for Accessibility */
|
|
a:focus,
|
|
button:focus,
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: 2px solid #4a90e2;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Skip to Content Link for Screen Readers */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: #4a90e2;
|
|
color: white;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
/* ==============================================
|
|
MOBILE STYLES (0px - 767px)
|
|
============================================== */
|
|
@media only screen and (max-width: 767px) {
|
|
html {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
body {
|
|
font-size: 18px !important;
|
|
padding: 8px !important;
|
|
line-height: 1.6 !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* All content text on mobile - 18px with wrapping */
|
|
p, div, span, td, th, li {
|
|
font-size: 18px !important;
|
|
line-height: 1.6 !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* Links should wrap too */
|
|
a {
|
|
font-size: 18px !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
/* Tables should fit screen */
|
|
table {
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
table-layout: auto !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
/* Prevent horizontal overflow */
|
|
* {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
img {
|
|
max-width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
h1 { font-size: 26px !important; }
|
|
h2 { font-size: 22px !important; }
|
|
h3 { font-size: 20px !important; }
|
|
h4 { font-size: 18px !important; }
|
|
|
|
/* Compact tree navigation for mobile */
|
|
.dtree {
|
|
font-size: 16px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.dtree a {
|
|
padding: 6px 8px !important;
|
|
margin: 0 !important;
|
|
display: inline-block !important;
|
|
min-height: 36px !important;
|
|
line-height: 1.4 !important;
|
|
color: #333 !important;
|
|
}
|
|
|
|
.dtree img {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
margin-right: 5px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.dtree p {
|
|
margin: 4px 0 !important;
|
|
padding: 2px 0 !important;
|
|
font-size: 12px !important;
|
|
}
|
|
|
|
.dtree > p {
|
|
border-bottom: 1px solid #ddd !important;
|
|
padding-bottom: 3px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.dtree > p a {
|
|
display: inline-block !important;
|
|
padding: 6px 10px !important;
|
|
margin: 2px !important;
|
|
background: #f5f5f5 !important;
|
|
border: 1px solid #ddd !important;
|
|
border-radius: 4px !important;
|
|
font-size: 12px !important;
|
|
min-height: 32px !important;
|
|
}
|
|
|
|
/* Compact tree structure */
|
|
.dtree .dTreeNode,
|
|
.dtree div {
|
|
line-height: 1.3 !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.dtree .clip {
|
|
margin-left: 16px !important;
|
|
}
|
|
|
|
/* Welcome Box Mobile Optimization */
|
|
header[role="banner"] {
|
|
margin: 0 0 12px 0 !important;
|
|
}
|
|
|
|
header[role="banner"] > div {
|
|
padding: 10px !important;
|
|
margin: 8px 0 !important;
|
|
}
|
|
|
|
header[role="banner"] h3 {
|
|
font-size: 16px !important;
|
|
margin-bottom: 8px !important;
|
|
}
|
|
|
|
header[role="banner"] p {
|
|
font-size: 13px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
/* Footer compact */
|
|
footer[role="contentinfo"] {
|
|
font-size: 11px !important;
|
|
padding: 10px 8px !important;
|
|
margin-top: 20px !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
SMALL MOBILE PHONES (360px - 480px)
|
|
iPhone SE, Galaxy S, smaller Android
|
|
============================================== */
|
|
@media only screen and (min-width: 360px) and (max-width: 480px) {
|
|
body {
|
|
font-size: 17px !important;
|
|
padding: 6px !important;
|
|
}
|
|
|
|
p, div, span, td, th, li, a {
|
|
font-size: 17px !important;
|
|
}
|
|
|
|
.dtree {
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.dtree a {
|
|
padding: 8px 6px !important;
|
|
min-height: 40px !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
MEDIUM MOBILE PHONES (481px - 767px)
|
|
iPhone 12/13/14, larger Android phones
|
|
============================================== */
|
|
@media only screen and (min-width: 481px) and (max-width: 767px) {
|
|
body {
|
|
font-size: 18px !important;
|
|
padding: 8px !important;
|
|
}
|
|
|
|
p, div, span, td, th, li, a {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
.dtree {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
TABLET STYLES (768px - 1024px)
|
|
iPad, Android tablets
|
|
============================================== */
|
|
@media only screen and (min-width: 768px) and (max-width: 1024px) {
|
|
html {
|
|
font-size: 18px;
|
|
}
|
|
|
|
body {
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
/* All content text on tablet/iPad */
|
|
p, div, span, td, th, li {
|
|
font-size: 18px !important;
|
|
line-height: 1.5 !important;
|
|
word-wrap: break-word !important;
|
|
overflow-wrap: break-word !important;
|
|
}
|
|
|
|
a {
|
|
font-size: 18px !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
/* Tables fit screen */
|
|
table {
|
|
max-width: 100% !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
h1 { font-size: 26px !important; }
|
|
h2 { font-size: 22px !important; }
|
|
h3 { font-size: 20px !important; }
|
|
h4 { font-size: 18px !important; }
|
|
|
|
.dtree {
|
|
font-size: 16px !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.dtree a {
|
|
padding: 4px 6px !important;
|
|
margin: 0 !important;
|
|
line-height: 1.4 !important;
|
|
}
|
|
|
|
.dtree img {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
margin-right: 2px !important;
|
|
}
|
|
|
|
.dtree p {
|
|
margin: 4px 0 2px 0 !important;
|
|
padding: 2px 0 !important;
|
|
}
|
|
|
|
/* Tablet-specific touch improvements */
|
|
.dtree a:hover {
|
|
background-color: #e8f4ff;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
DESKTOP STYLES (1025px and above)
|
|
Desktop navigation: 13px (DO NOT CHANGE)
|
|
NO CONTENT FONT CHANGES - Keep inline 13pt styles
|
|
============================================== */
|
|
@media only screen and (min-width: 1025px) {
|
|
/* Content area margins for desktop readability */
|
|
body {
|
|
margin: 25px 25px 25px 35px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Desktop navigation ONLY - LOCKED at 13px */
|
|
.dtree {
|
|
font-size: 13px !important;
|
|
line-height: 1.3 !important;
|
|
}
|
|
|
|
.dtree * {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
.dtree a {
|
|
padding: 2px 4px !important;
|
|
margin: 0 !important;
|
|
line-height: 1.3 !important;
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.dtree img {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
margin-right: 4px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.dtree p {
|
|
margin: 4px 0 2px 0 !important;
|
|
padding: 2px 0 !important;
|
|
line-height: 1.1 !important;
|
|
}
|
|
|
|
.dtree > p {
|
|
padding-bottom: 3px !important;
|
|
margin-bottom: 4px !important;
|
|
}
|
|
|
|
.dtree div {
|
|
line-height: 1.1 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.dtree .clip {
|
|
margin-left: 16px !important;
|
|
}
|
|
|
|
.dtree a:hover {
|
|
background-color: #e8f4ff !important;
|
|
}
|
|
|
|
/* Smooth scrolling for desktop */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
PRINT STYLES
|
|
============================================== */
|
|
@media print {
|
|
header[role="banner"],
|
|
footer[role="contentinfo"],
|
|
nav[role="navigation"] {
|
|
display: none;
|
|
}
|
|
|
|
body {
|
|
font-size: 12pt;
|
|
color: #000;
|
|
background: #fff;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #000;
|
|
}
|
|
|
|
a[href]:after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 10pt;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
DARK MODE SUPPORT (if user prefers dark mode)
|
|
============================================== */
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
background-color: #1e1e1e;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.dtree a {
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
.dtree a:hover,
|
|
.dtree a.nodeSel {
|
|
background-color: #2d2d2d !important;
|
|
}
|
|
|
|
header[role="banner"] > div {
|
|
background-color: #2a3f5f !important;
|
|
border-color: #5a90d2 !important;
|
|
color: #e0e0e0 !important;
|
|
}
|
|
|
|
header[role="banner"] h3 {
|
|
color: #7ab3ff !important;
|
|
}
|
|
|
|
footer[role="contentinfo"] {
|
|
border-top-color: #444 !important;
|
|
color: #999 !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
REDUCED MOTION for Accessibility
|
|
============================================== */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* ==============================================
|
|
HIGH CONTRAST MODE Support
|
|
============================================== */
|
|
@media (prefers-contrast: high) {
|
|
body {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
a {
|
|
color: #0000ff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a:focus {
|
|
outline: 3px solid #000;
|
|
}
|
|
}
|