Initial commit - QBPOS Help
This commit is contained in:
466
QB_Help_Web/POS_Help/responsive.css
Normal file
466
QB_Help_Web/POS_Help/responsive.css
Normal file
@@ -0,0 +1,466 @@
|
||||
/* ==============================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user