码桶
发现社区成员的开源项目
mobile.css13.4 KB
/* Responsive Utilities */
.desktop-only {
display: table !important;
}
.mobile-only {
display: none !important;
}
@media (max-width: 768px) {
.desktop-only {
display: none !important;
}
.mobile-only {
display: grid !important;
gap: 0;
}
}
/* Mobile Record Card */
.record-card {
background: var(--card-bg);
border-bottom: 1px solid var(--border);
padding: 1rem 0 0.25rem 0;
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.record-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0;
cursor: pointer;
width: 100%;
min-height: 20px;
padding: 2px 0;
}
.record-header-main {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
padding-right: 8px;
}
.dns-type {
flex-shrink: 0;
min-width: 45px;
text-align: center;
}
/* Record type row - 上部 0.5 */
.record-type-row {
height: 0.5rem;
display: flex;
align-items: flex-end;
margin-bottom: 0;
}
.dns-type-label {
font-size: 0.5rem;
color: var(--text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
line-height: 0.5rem;
margin-left: 32px;
background: var(--select-active-bg);
padding: 1px 4px;
border-radius: 3px;
}
/* DNS name wrapper - 下部 1.0 主内容的一部分 */
.dns-name-wrapper {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
min-width: 0;
}
.dns-type-mobile {
display: flex;
align-items: center;
}
.dns-type-mobile .badge {
font-size: 0.625rem;
padding: 0px 6px;
font-weight: 600;
}
.dns-name {
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
font-size: 1rem;
line-height: 1.2;
}
.dns-comment {
font-size: 0.7rem;
color: var(--text-muted);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.record-actions-inline {
display: flex;
gap: 0.25rem;
align-items: center;
flex-shrink: 0;
background: var(--card-bg);
padding-left: 4px;
}
.record-details {
padding-top: 0.5rem;
padding-bottom: 0.25rem;
padding-left: 0;
padding-right: 0;
margin-top: 0.5rem;
background: transparent;
border-radius: 0;
display: flex;
flex-direction: column;
gap: 0;
animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
}
.record-content-cell {
flex: 1;
font-family: monospace;
font-size: 0.8125rem;
color: var(--text);
word-break: break-all;
background: var(--input-bg);
padding: 0.5rem;
border-radius: 4px;
border: 1px solid var(--border);
cursor: pointer;
margin-right: 8px;
}
.ttl-box {
display: flex;
flex-direction: row;
align-items: center;
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0 0.75rem;
height: 100%;
flex-shrink: 0;
gap: 6px;
}
.ttl-label {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: normal;
}
.ttl-value {
font-size: 0.8125rem;
font-weight: 600;
color: var(--text);
}
.record-actions {
display: flex;
gap: 0.5rem;
}
.meta-group {
display: flex;
gap: 1rem;
align-items: center;
font-size: 0.75rem;
color: var(--text-muted);
}
/* Dark mode fixes are now handled via CSS variables directly */
/* ============================================
Touch target sizes for touch devices
============================================ */
@media (pointer: coarse) {
/* All buttons get minimum 44x44 touch target */
.btn {
min-height: 44px;
min-width: 44px;
padding: 0.5rem 1rem;
}
/* Icon-only buttons: use padding to enlarge touch area without changing icon size */
.btn-outline[style*="padding: 0.4rem"],
.btn-outline[style*="padding: 0.35rem"],
.record-actions-inline .btn,
.header-actions .btn {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Header icon buttons */
header .btn,
header button {
min-height: 44px;
min-width: 44px;
}
/* Table action buttons */
.data-table .btn {
min-height: 44px;
min-width: 44px;
}
/* Dropdown items */
[role="option"] {
min-height: 44px;
display: flex;
align-items: center;
}
/* Modal close buttons */
[aria-label="Close"] {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Links and clickable elements */
a,
[role="button"] {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* Checkboxes */
.record-checkbox {
width: 22px !important;
height: 22px !important;
}
.dns-selection {
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Toggle switches - enlarge touch area */
.toggle-switch {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tab buttons */
[style*="borderBottom"][style*="padding: 0.75rem 0"] {
min-height: 44px;
}
/* Zone selector items */
.glass-card [role="option"] {
min-height: 44px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
/* Copy buttons in verification modal */
.btn-outline[style*="padding: 6px"] {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ============================================
Modal overflow handling on mobile
============================================ */
/* Prevent body scroll when modal is open */
body.modal-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
/* Modal overlay - ensure it scrolls on mobile */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--modal-overlay);
backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 1000;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 2rem 0;
}
/* Modal content box */
.modal-content {
position: relative;
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
.modal-overlay {
padding: 1rem 0;
align-items: flex-start;
}
.modal-content {
max-height: 90vh;
overflow-y: auto;
margin: auto 0;
}
/* Ensure all modal dialog cards scroll on small screens */
.modal-overlay .glass-card {
max-height: 90vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ============================================
Desktop table horizontal scroll wrapper
============================================ */
@media (max-width: 1024px) {
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -0.25rem;
padding: 0 0.25rem;
}
.data-table {
min-width: 600px;
}
}
@media (max-width: 640px) {
/* On mobile the card view is shown so table min-width is not needed */
.data-table {
min-width: unset;
}
}
/* ============================================
Mobile responsive fixes for modals & new features
============================================ */
@media (max-width: 480px) {
/* Monitors modal: stack form grid to single column */
.modal-content form [style*="gridTemplateColumns: '1fr 1fr'"],
.modal-content form div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Keyboard shortcuts modal: fit within narrow viewport */
.glass-card[style*="width: '380px'"],
.glass-card[style*="width: 380px"] {
width: 95vw !important;
max-width: 95vw !important;
}
/* Onboarding tour tooltip: full width on small screens */
div[style*="maxWidth: '320px'"] {
max-width: 90vw !important;
width: 90vw !important;
}
/* History table action buttons: stack vertically */
.fade-in td[style*="whiteSpace: 'nowrap'"] {
white-space: normal !important;
}
.fade-in td .btn {
margin-bottom: 4px;
}
}
/* ============================================
Sidebar — mobile overlay (supplements index.css)
============================================ */
@media (max-width: 768px) {
.sidebar-hamburger {
display: flex !important;
align-items: center;
justify-content: center;
}
.sidebar-close {
display: flex !important;
align-items: center;
justify-content: center;
}
.sidebar-backdrop {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 199;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.sidebar-backdrop.sidebar-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 380px) {
.sidebar {
width: 85vw;
min-width: 85vw;
}
}
@media (pointer: coarse) {
.sidebar-nav-item {
min-height: 44px;
}
.zone-dropdown {
min-height: 44px;
}
.zone-dropdown-item {
min-height: 44px;
}
.sidebar-hamburger {
min-height: 44px;
min-width: 44px;
}
.sidebar-close {
min-height: 44px;
min-width: 44px;
}
.sidebar-footer-btn {
min-height: 44px;
}
}
@media (max-width: 768px) {
.zone-dropdown-menu {
max-height: 250px;
}
}
/* ============================================
Zone header responsive — mobile
============================================ */
@media (max-width: 640px) {
.zone-header-row {
gap: 0.35rem !important;
}
.zone-name-title {
font-size: 1.1rem !important;
max-width: 45vw;
}
.zone-type-badge {
font-size: 0.5rem !important;
padding: 1px 4px !important;
}
/* Hide text labels on action buttons, keep icons */
.zone-btn-label {
display: none;
}
.zone-action-btn {
padding: 4px 6px !important;
}
.zone-action-btns {
gap: 0.25rem !important;
}
/* Globe icon smaller on mobile */
.zone-globe-icon {
padding: 0.15rem !important;
}
.zone-globe-icon svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 380px) {
.zone-name-title {
font-size: 0.95rem !important;
max-width: 35vw;
}
.zone-type-badge {
display: none !important;
}
}
/* ============================================
Auth tabs (Login & AddAccount) — mobile
============================================ */
@media (pointer: coarse) {
.auth-type-tabs button {
min-height: 44px;
}
}
/* Zone selector dropdown removed — replaced by sidebar */
/* ============================================
Mobile polish for all 18 tabs
============================================ */
/* Security level cards: responsive grid */
@media (max-width: 768px) {
.security-level-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Firewall rule cards: stack expression below */
.firewall-rule-card {
flex-direction: column !important;
}
.firewall-rule-expression {
width: 100% !important;
max-width: 100% !important;
}
/* Analytics summary cards: 2-col */
.dns-analytics-summary {
grid-template-columns: repeat(2, 1fr) !important;
}
/* Page Rules actions: full width rows */
.pagerule-actions-grid {
grid-template-columns: 1fr !important;
}
/* Workers Routes pattern: truncate */
.workers-route-pattern {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sidebar with many items: scrollable */
.sidebar-nav {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 200px);
}
}
@media (max-width: 480px) {
.security-level-grid {
grid-template-columns: 1fr !important;
}
.dns-analytics-summary {
grid-template-columns: 1fr !important;
}
/* Workers route pattern: even more truncated */
.workers-route-pattern {
max-width: 140px;
}
/* Toggle setting cards: full width */
.glass-card[style*="display: flex"][style*="justify-content: space-between"] {
flex-wrap: wrap;
gap: 0.5rem;
}
}
@media (max-width: 380px) {
.workers-route-pattern {
max-width: 100px;
}
/* Compact padding for settings cards on very small screens */
.glass-card {
padding: 0.75rem !important;
}
}