Spaces:
Running
Running
| :root { | |
| --bg-color: #0b0b1a; | |
| --sidebar-bg: rgba(20, 20, 43, 0.95); | |
| --text-color: #e0e0e0; | |
| --accent-color: #c9a227; | |
| --accent-hover: #e0b83e; | |
| --border-color: rgba(201, 162, 39, 0.2); | |
| --card-bg: rgba(26, 26, 53, 0.7); | |
| --glass-bg: rgba(255, 255, 255, 0.1); | |
| } | |
| body { | |
| margin: 0; | |
| font-family: 'Noto Serif SC', serif; | |
| background: radial-gradient(circle at top right, #1a1a35, #0b0b1a); | |
| color: var(--text-color); | |
| display: flex; | |
| min-height: 100vh; | |
| } | |
| .sidebar { | |
| width: 260px; | |
| background-color: var(--sidebar-bg); | |
| border-right: 1px solid var(--border-color); | |
| backdrop-filter: blur(10px); | |
| padding: 30px 20px; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 10px 0 30px rgba(0,0,0,0.5); | |
| z-index: 100; | |
| } | |
| .logo h2 { | |
| color: var(--accent-color); | |
| margin: 0; | |
| font-size: 2.5rem; | |
| letter-spacing: 4px; | |
| text-shadow: 0 0 10px rgba(201, 162, 39, 0.5); | |
| } | |
| .logo p { | |
| font-size: 0.9rem; | |
| margin: 5px 0 40px; | |
| opacity: 0.8; | |
| color: #888; | |
| } | |
| nav ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| nav li { | |
| margin-bottom: 5px; | |
| } | |
| nav a { | |
| color: var(--text-color); | |
| text-decoration: none; | |
| display: block; | |
| padding: 12px 20px; | |
| border-radius: 8px; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| border: 1px solid transparent; | |
| } | |
| nav a:hover { | |
| background-color: var(--card-bg); | |
| color: var(--accent-color); | |
| border-color: var(--border-color); | |
| transform: translateX(10px); | |
| } | |
| main { | |
| flex-grow: 1; | |
| padding: 40px 60px; | |
| overflow-y: auto; | |
| background: url('https://www.transparenttextures.com/patterns/stardust.png'); | |
| } | |
| header h1 { | |
| font-size: 3rem; | |
| color: var(--accent-color); | |
| margin-bottom: 40px; | |
| font-weight: 700; | |
| background: linear-gradient(45deg, #c9a227, #f3d17a); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| /* Glassmorphism & Helper Classes */ | |
| .glassmorphism { | |
| background: var(--card-bg); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); | |
| } | |
| /* Navigation Sections */ | |
| .nav-section { | |
| margin-bottom: 25px; | |
| } | |
| .nav-section h6 { | |
| color: #555; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| margin-bottom: 15px; | |
| padding-left: 5px; | |
| border-left: 2px solid var(--accent-color); | |
| } | |
| .mb-2 { margin-bottom: 2rem; } | |
| .mt-2 { margin-top: 2rem; } | |
| /* Divination Card Components */ | |
| .divination-card { | |
| border-radius: 16px; | |
| padding: 25px; | |
| transition: all 0.3s ease; | |
| } | |
| .divination-card:hover { | |
| transform: translateY(-5px); | |
| border-color: rgba(201, 162, 39, 0.4); | |
| box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6); | |
| } | |
| .card-header h3 { | |
| margin: 0 0 20px 0; | |
| color: var(--accent-color); | |
| font-size: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| /* Info Grids */ | |
| .info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .info-item { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .info-item .label { | |
| font-size: 0.85rem; | |
| color: #888; | |
| margin-bottom: 4px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .info-item .value { | |
| font-size: 1.1rem; | |
| color: var(--text-color); | |
| } | |
| .highlight { | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| text-shadow: 0 0 5px rgba(201, 162, 39, 0.3); | |
| } | |
| /* Row Grids */ | |
| .grid-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| @media (max-width: 900px) { | |
| .grid-row { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Tags */ | |
| .tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .tag { | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .tag.positive { | |
| color: #4cd137; | |
| border-color: rgba(76, 209, 55, 0.3); | |
| background: rgba(76, 209, 55, 0.1); | |
| } | |
| .tag.negative { | |
| color: #e84118; | |
| border-color: rgba(232, 65, 24, 0.3); | |
| background: rgba(232, 65, 24, 0.1); | |
| } | |
| /* Directions */ | |
| .direction-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| } | |
| .direction-item { | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 10px; | |
| border-radius: 12px; | |
| text-align: center; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .direction-item .god-name { | |
| display: block; | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| font-size: 0.9rem; | |
| } | |
| .direction-item .god-dir { | |
| font-size: 1.1rem; | |
| } | |
| .gods-list span { | |
| margin-right: 15px; | |
| font-size: 0.95rem; | |
| } | |
| .positive { color: #4cd137; } | |
| .negative { color: #e84118; } | |
| /* Info List Row */ | |
| .info-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .info-item-row { | |
| display: flex; | |
| justify-content: space-between; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .info-item-row .label { | |
| color: #888; | |
| } | |
| /* QiMen Grid Styles */ | |
| .qimen-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .palace-box { | |
| aspect-ratio: 1; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .palace-box:hover { | |
| background: rgba(201, 162, 39, 0.1); | |
| border-color: var(--accent-color); | |
| transform: scale(1.02); | |
| } | |
| .palace-top-row { | |
| text-align: left; | |
| color: #ff9f43; | |
| font-size: 0.9rem; | |
| font-weight: bold; | |
| } | |
| .palace-middle-row { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| flex-grow: 1; | |
| } | |
| .palace-middle-row .star { | |
| font-size: 1.2rem; | |
| color: #54a0ff; | |
| } | |
| .palace-middle-row .door { | |
| font-size: 1.2rem; | |
| color: #ee5253; | |
| font-weight: bold; | |
| } | |
| .palace-bottom-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| font-size: 1.3rem; | |
| color: var(--text-color); | |
| } | |
| .earth-branches { | |
| font-size: 0.75rem; | |
| color: #666; | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| font-weight: normal; | |
| } | |
| .palace-id { | |
| position: absolute; | |
| bottom: 5px; | |
| left: 8px; | |
| font-size: 0.7rem; | |
| color: #555; | |
| } | |
| .qimen-meta { | |
| display: flex; | |
| justify-content: center; | |
| gap: 15px; | |
| } | |
| /* MeiHua Styles */ | |
| .meihua-layout { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 30px; | |
| } | |
| .hexagram-visual { | |
| text-align: center; | |
| } | |
| .hexagram-title h2 { | |
| font-size: 4rem; | |
| color: var(--accent-color); | |
| margin: 0; | |
| letter-spacing: 10px; | |
| } | |
| .moving-tag { | |
| display: inline-block; | |
| background: rgba(238, 82, 83, 0.2); | |
| color: #ee5253; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.9rem; | |
| margin-top: 10px; | |
| border: 1px solid rgba(238, 82, 83, 0.3); | |
| } | |
| .gua-display { | |
| display: flex; | |
| gap: 40px; | |
| margin-top: 30px; | |
| } | |
| .trigram-box { | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 15px 25px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border-color); | |
| } | |
| /* Bazi Board Styles */ | |
| .bazi-board { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| padding: 20px 0; | |
| } | |
| .pillar { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 80px; | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| background: rgba(255, 255, 255, 0.02); | |
| border-radius: 12px; | |
| padding: 15px 5px; | |
| transition: all 0.3s ease; | |
| } | |
| .pillar:hover { | |
| background: rgba(201, 162, 39, 0.05); | |
| border-color: var(--border-color); | |
| } | |
| .ss-label { | |
| font-size: 0.85rem; | |
| color: #888; | |
| margin-bottom: 10px; | |
| } | |
| .stem { | |
| font-size: 2.2rem; | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .branch { | |
| font-size: 2.2rem; | |
| color: var(--text-color); | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| .pillar-name { | |
| font-size: 0.8rem; | |
| color: #555; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| /* Highlight Day Master */ | |
| .pillar.highlight-day { | |
| background: rgba(201, 162, 39, 0.1); | |
| border: 1px solid var(--accent-color); | |
| box-shadow: 0 0 20px rgba(201, 162, 39, 0.2); | |
| } | |
| .nayin-label { | |
| font-size: 0.75rem; | |
| color: #888; | |
| margin-top: 5px; | |
| font-style: italic; | |
| white-space: nowrap; | |
| } | |
| .shensha-list { | |
| margin-top: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| width: 100%; | |
| } | |
| .ss-badge { | |
| font-size: 0.65rem; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #ccc; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| text-align: center; | |
| display: block; | |
| } | |
| .pillar:hover .ss-badge { | |
| border-color: rgba(201, 162, 39, 0.3); | |
| color: var(--accent-color); | |
| } | |
| .pillar.highlight-day .stem { | |
| color: #fff; | |
| text-shadow: 0 0 10px var(--accent-color); | |
| } | |
| /* Pattern Badge */ | |
| .pattern-badge { | |
| display: inline-block; | |
| background: linear-gradient(45deg, #c9a227, #9b7a1a); | |
| color: #0b0b1a; | |
| padding: 8px 25px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4); | |
| } | |
| /* Planner Styles */ | |
| .planner-meta { | |
| display: flex; | |
| justify-content: space-around; | |
| gap: 20px; | |
| padding: 10px 0; | |
| } | |
| .meta-item { | |
| text-align: center; | |
| } | |
| .meta-item .value { | |
| display: block; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-top: 5px; | |
| } | |
| .meta-item .value.gold { | |
| color: var(--accent-color); | |
| } | |
| .schedule-grid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .schedule-item { | |
| display: grid; | |
| grid-template-columns: 150px 180px 1fr; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| padding: 15px; | |
| align-items: center; | |
| transition: all 0.3s ease; | |
| } | |
| .schedule-item:hover { | |
| background: rgba(255, 255, 255, 0.07); | |
| border-color: var(--accent-color); | |
| } | |
| .time-box { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .sc-name { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: var(--text-color); | |
| } | |
| .sc-range { | |
| font-size: 0.85rem; | |
| color: #888; | |
| } | |
| .gu-box { | |
| display: flex; | |
| flex-direction: column; | |
| border-left: 1px solid rgba(255, 255, 255, 0.1); | |
| border-right: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 0 20px; | |
| } | |
| .gu-name { | |
| font-size: 1.1rem; | |
| color: var(--accent-color); | |
| } | |
| .gu-line { | |
| font-size: 0.85rem; | |
| color: #666; | |
| } | |
| .advice-box { | |
| padding-left: 20px; | |
| } | |
| .advice-box p { | |
| margin: 0; | |
| color: #ccc; | |
| font-style: italic; | |
| font-size: 0.95rem; | |
| } | |
| .luck-tag { | |
| font-size: 0.75rem; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| margin-left: 10px; | |
| } | |
| .luck-大吉 { background: rgba(201, 162, 39, 0.2); color: #ffd700; border: 1px solid rgba(201, 162, 39, 0.4); } | |
| .luck-吉 { background: rgba(46, 204, 113, 0.2); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.4); } | |
| .luck-中 { background: rgba(255, 255, 255, 0.05); color: #aaa; border: 1px solid rgba(255, 255, 255, 0.1); } | |
| .luck-凶 { background: rgba(231, 76, 60, 0.2); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.4); } | |
| .luck-大凶 { background: rgba(192, 57, 43, 0.3); color: #ff4757; border: 1px solid #ff4757; box-shadow: 0 0 10px rgba(255, 71, 87, 0.2); } | |
| .line-note { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: #666; | |
| margin-top: 5px; | |
| } | |
| .pattern-badge { | |
| display: inline-block; | |
| padding: 4px 10px; | |
| background: rgba(201, 162, 39, 0.1); | |
| border: 1px solid rgba(201, 162, 39, 0.3); | |
| color: var(--accent-color); | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| margin-right: 8px; | |
| margin-bottom: 8px; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| } | |
| .bifa-analysis h4 { | |
| border-bottom: 1px solid rgba(201, 162, 39, 0.3); | |
| padding-bottom: 5px; | |
| margin-bottom: 10px; | |
| } | |
| .time-selector-panel { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 15px; | |
| margin: 20px 0; | |
| } | |
| .time-selector-panel h4 { | |
| margin-top: 0; | |
| margin-bottom: 12px; | |
| font-size: 0.9rem; | |
| color: var(--accent-color); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .time-selector-panel .input-group { | |
| display: flex; | |
| gap: 5px; | |
| } | |
| .time-selector-panel input, | |
| .time-selector-panel select { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #fff; | |
| padding: 8px; | |
| border-radius: 4px; | |
| font-size: 0.85rem; | |
| width: 100%; | |
| } | |
| .time-selector-panel input:focus, | |
| .time-selector-panel select:focus { | |
| border-color: var(--accent-color); | |
| outline: none; | |
| } | |
| .btn-submit { | |
| width: 100%; | |
| background: linear-gradient(45deg, var(--accent-color), #9b7a1a); | |
| color: #0b0b1a; | |
| border: none; | |
| padding: 10px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| margin-top: 12px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-submit:hover { | |
| filter: brightness(1.2); | |
| box-shadow: 0 0 15px rgba(201, 162, 39, 0.3); | |
| } | |
| .btn-reset { | |
| display: block; | |
| text-align: center; | |
| color: #888; | |
| text-decoration: none; | |
| font-size: 0.75rem; | |
| margin-top: 8px; | |
| } | |
| .btn-reset:hover { | |
| color: var(--accent-color); | |
| } | |
| /* Master Report Styles */ | |
| .report-card { | |
| border: 1px solid rgba(201, 162, 39, 0.2); | |
| background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(201, 162, 39, 0.05)); | |
| } | |
| .summary-text { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| color: #eee; | |
| font-style: italic; | |
| padding: 10px 0; | |
| } | |
| .positive-verdict { | |
| background: rgba(46, 204, 113, 0.1); | |
| border-left: 4px solid #2ecc71; | |
| color: #fff; | |
| } | |
| .negative-verdict { | |
| background: rgba(231, 76, 60, 0.1); | |
| border-left: 4px solid #e74c3c; | |
| color: #fff; | |
| } | |
| .guidance-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| } | |
| .guidance-item { | |
| background: rgba(255, 255, 255, 0.02); | |
| padding: 15px; | |
| border-radius: 10px; | |
| } | |
| .g-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| } | |
| .g-title { | |
| font-weight: bold; | |
| color: var(--text-color); | |
| } | |
| .g-score { | |
| color: var(--accent-color); | |
| font-weight: bold; | |
| } | |
| .g-bar { | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| margin-bottom: 10px; | |
| overflow: hidden; | |
| } | |
| .g-fill { | |
| height: 100%; | |
| background: var(--accent-color); | |
| box-shadow: 0 0 10px var(--accent-color); | |
| } | |
| .g-advice { | |
| font-size: 0.85rem; | |
| color: #aaa; | |
| margin: 0; | |
| } | |
| .lucky-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 30px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--border-color); | |
| } | |
| .lucky-item, .warning-item { | |
| flex: 1; | |
| } | |
| .badge { | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| } | |
| .badge.positive { | |
| background: rgba(46, 204, 113, 0.2); | |
| color: #2ecc71; | |
| border: 1px solid rgba(46, 204, 113, 0.3); | |
| } | |
| /* User Status Styles */ | |
| .user-status { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 15px; | |
| margin-bottom: 20px; | |
| border-radius: 8px; | |
| font-size: 0.9rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .logout-link { | |
| color: #ff4757; | |
| text-decoration: none; | |
| font-weight: bold; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| transition: background 0.3s; | |
| } | |
| /* Mobile Menu Toggle Button */ | |
| .mobile-toggle { | |
| display: none; | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| z-index: 1001; | |
| width: 45px; | |
| height: 45px; | |
| background: var(--sidebar-bg); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| backdrop-filter: blur(10px); | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .mobile-toggle span { | |
| display: block; | |
| width: 25px; | |
| height: 2px; | |
| background-color: var(--accent-color); | |
| transition: all 0.3s; | |
| } | |
| .mobile-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } | |
| .mobile-toggle.active span:nth-child(2) { opacity: 0; } | |
| .mobile-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } | |
| /* Mobile Responsive Media Queries */ | |
| @media (max-width: 768px) { | |
| body { | |
| flex-direction: column; | |
| } | |
| .mobile-toggle { | |
| display: flex; | |
| } | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: -280px; | |
| height: 100vh; | |
| width: 280px; | |
| transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| padding-top: 80px; | |
| } | |
| .sidebar.active { | |
| left: 0; | |
| box-shadow: 20px 0 50px rgba(0,0,0,0.8); | |
| } | |
| main { | |
| padding: 80px 20px 40px; | |
| } | |
| header h1 { | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| } | |
| /* Grid & Component Adjustments */ | |
| .qimen-grid { | |
| grid-template-columns: repeat(3, 1fr) ; | |
| gap: 5px; | |
| } | |
| .palace-box { | |
| padding: 5px; | |
| min-height: 80px; | |
| } | |
| .palace-middle-row .door { | |
| font-size: 1rem; | |
| } | |
| .liuren-board { | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .three-passes { | |
| flex-direction: row; | |
| justify-content: space-around; | |
| width: 100%; | |
| } | |
| .four-classes { | |
| width: 100%; | |
| gap: 10px; | |
| } | |
| .class-pair { | |
| width: 45px; | |
| height: 80px; | |
| } | |
| .schedule-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .input-group { | |
| flex-direction: column; | |
| } | |
| .bazi-grid { | |
| grid-template-columns: repeat(2, 1fr) ; | |
| } | |
| .divination-card { | |
| padding: 15px; | |
| } | |
| .meihua-layout { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .plates-container .plate-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .bazi-grid { | |
| grid-template-columns: 1fr ; | |
| } | |
| .qimen-grid { | |
| gap: 3px; | |
| } | |
| .palace-box .god, .palace-box .star { | |
| font-size: 0.7rem; | |
| } | |
| .palace-box .door { | |
| font-size: 0.9rem; | |
| } | |
| } | |