/* GPX Route Creator - Frosted Glass UI Style */ /* * 注意：为了获得最佳的毛玻璃效果，建议在您的主题或页面的自定义CSS中 * 为或特定页面的容器设置一个背景图。例如： * * body.page-id-XX { * background-image: url('your-background-image.jpg'); * background-size: cover; * background-attachment: fixed; * } */ /* 变量定义 */ :root { --card-bg: rgba(255, 255, 255, 0.25); --card-border-color: rgba(255, 255, 255, 0.4); --card-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); --card-hover-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.25); --input-bg: rgba(255, 255, 255, 0.75); --input-border: rgba(200, 200, 200, 0.5); --input-focus-border-color: #00AFFF; --primary-btn-bg: linear-gradient(90deg, #00AFFF 0%, #A777E8 100%); --primary-btn-hover-filter: saturate(1.1) brightness(1.05); --primary-btn-text: white; --danger-btn-bg: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%); --success-btn-bg: linear-gradient(90deg, #28a745 0%, #218838 100%); --secondary-btn-bg: linear-gradient(90deg, #6c757d 0%, #5a6268 100%); --text-color: #1a202c; --text-color-light: #333; --link-color: #00AFFF; } /* 主容器 */ .gpx-creator-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-color); line-height: 1.6; transition: padding 0.3s ease; } /* 毛玻璃卡片 */ .glass-card { background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--card-border-color); border-radius: 20px; box-shadow: var(--card-shadow); padding: 2rem; transition: all 0.3s ease; } .glass-card:hover { box-shadow: var(--card-hover-shadow); transform: translateY(-3px); } /* 标题 */ .gpx-creator-container h1, .gpx-creator-container h2, .gpx-creator-container h3 { color: var(--text-color-light); text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); } .gpx-creator-container h1 { font-size: 2.5rem; font-weight: 600; } .gpx-creator-container h2 { font-size: 1.75rem; font-weight: 500; margin-bottom: 1.5rem; } .gpx-creator-container h3 { font-size: 1.1rem; font-weight: 500; margin-bottom: 1rem; text-align: center; } /* 地图和图表 */ #map { height: 50vh; border-radius: 12px; cursor: crosshair; width: 100%; border: 1px solid var(--card-border-color); transition: height 0.3s ease; } .chart-container { height: 28vh; position: relative; transition: height 0.3s ease; } /* 按钮 */ .btn { padding: 12px 24px; border-radius: 12px; font-weight: 500; transition: all 0.2s ease; cursor: pointer; border: none; color: var(--primary-btn-text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.1); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15); } .btn:disabled { background: #adb5bd !important; filter: none !important; box-shadow: none !important; cursor: not-allowed; transform: translateY(0); } .btn-primary { background: var(--primary-btn-bg); } .btn-primary:hover { filter: var(--primary-btn-hover-filter); } .btn-danger { background: var(--danger-btn-bg); } .btn-danger:hover { filter: saturate(1.1) brightness(1.05); } .btn-success { background: var(--success-btn-bg); } .btn-success:hover { filter: saturate(1.1) brightness(1.05); } .btn-secondary { background: var(--secondary-btn-bg); } .btn-secondary:hover { filter: saturate(1.1) brightness(1.05); } /* 表单元素 */ .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9em; } .form-input, .form-textarea { width: 100%; background-color: var(--input-bg); color: var(--text-color); border: 1px solid var(--input-border); border-radius: 10px; padding: 12px 15px; transition: all 0.3s ease; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03); } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--input-focus-border-color); box-shadow: 0 0 0 3px rgba(0, 175, 255, 0.25); background-color: rgba(255, 255, 255, 0.98); } /* Range Slider */ input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { height: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.5); border-radius: 4px; border: 1px solid var(--input-border); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--primary-btn-bg); cursor: pointer; margin-top: -7px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: transform 0.2s ease; } input[type=range]:active::-webkit-slider-thumb { transform: scale(1.2); } /* Toggle Switch */ .activity-switch-label { background-color: rgba(0,0,0,0.1); transition: background-color 0.2s ease-in-out; border: 1px solid rgba(255,255,255,0.2); } .activity-switch-checkbox:checked ~ .activity-switch-label { background: var(--primary-btn-bg); } .activity-switch-label .toggle { transform: translateX(0rem); transition: transform 0.3s ease-in-out; } .activity-switch-checkbox:checked ~ .activity-switch-label .toggle { transform: translateX(1.25rem); /* For a w-12 (3rem) container with p-1 and a w-5 toggle */ } /* Loader */ .loader { border: 4px solid rgba(255,255,255,0.3); border-top: 4px solid var(--link-color); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Fullscreen Button */ .btn-fullscreen { position: absolute; top: 1.5rem; right: 1.5rem; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-color-light); transition: all 0.3s ease; } .btn-fullscreen:hover { background: rgba(255, 255, 255, 0.4); transform: scale(1.1); } /* Fullscreen Mode */ #gpx-creator-wrapper.fullscreen-mode { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background-color: #f0f2f5; /* Fallback background */ overflow-y: auto; padding: 2rem; /* background-image is now set by JS */ background-size: cover; background-position: center; } #gpx-creator-wrapper.fullscreen-mode .gpx-creator-container { height: 100%; max-width: none; padding: 0; } #gpx-creator-wrapper.fullscreen-mode #map { height: calc(100vh - 250px); /* Adjust based on your layout */ } #gpx-creator-wrapper.fullscreen-mode .chart-container { height: 35vh; } /* 响应式调整 */ @media (max-width: 768px) { .glass-card { padding: 1.5rem; } .gpx-creator-container h1 { font-size: 1.8rem; } .gpx-creator-container h2 { font-size: 1.4rem; } .btn-fullscreen { top: 1rem; right: 1rem; width: 40px; height: 40px; } #gpx-creator-wrapper.fullscreen-mode { padding: 1rem; } }