-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstyles.css
More file actions
169 lines (155 loc) · 10.2 KB
/
styles.css
File metadata and controls
169 lines (155 loc) · 10.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
:root {
color-scheme: light;
--bg: #f5f2ec;
--panel: #fffdf8;
--ink: #1f2933;
--muted: #657181;
--line: #d8d2c7;
--accent: #7a4f2b;
--accent-strong: #4c6b5a;
--accent-soft: #e7f0ea;
--danger: #a44545;
--shadow: 0 18px 40px rgba(31, 41, 51, 0.08);
font-family: Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; min-height: 40px; padding: 0 14px; }
button:hover { filter: brightness(0.96); }
button:disabled { cursor: not-allowed; opacity: 0.55; }
.ghost-button { background: transparent; border: 1px solid var(--line); color: var(--ink); min-height: 34px; }
.app-shell {
display: grid;
grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
align-items: start;
gap: 16px;
min-height: 100vh;
padding: 16px;
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); min-width: 0; }
.input-panel, .markdown-panel { display: flex; flex-direction: column; overflow: hidden; }
.input-panel { grid-row: 1 / span 2; max-height: calc(100vh - 32px); position: sticky; top: 16px; }
.chart-panel { display: flex; flex-direction: column; min-height: auto; padding: 16px; }
.panel-title, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-title { border-bottom: 1px solid var(--line); padding: 16px; }
h1, h2 { margin: 0; letter-spacing: 0; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
.status-pill { border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; padding: 5px 9px; white-space: nowrap; }
.status-pill.error { background: #f6e3df; color: var(--danger); }
.muted { color: var(--muted); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; overflow: auto; padding: 16px; }
label { color: var(--muted); display: grid; font-size: 12px; gap: 6px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); outline: none; }
input, select { min-height: 38px; padding: 0 10px; }
textarea { line-height: 1.5; padding: 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(76, 107, 90, 0.14); }
.wide { grid-column: 1 / -1; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compact-section, .details-block { border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.details-block summary { cursor: pointer; font-weight: 650; margin-bottom: 10px; }
.settings-subhead { border-top: 1px solid #eee8dc; color: var(--ink); font-size: 12px; font-weight: 700; margin-top: 4px; padding-top: 10px; }
.settings-subhead:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.button-row, .export-row { display: grid; gap: 8px; }
.button-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.export-row { grid-template-columns: 1fr; }
.details-block .export-row { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 10px; }
.toggle-group { margin-top: 12px; }
.toggle-group strong { display: block; font-size: 12px; margin-bottom: 8px; }
.toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.toggle-item { align-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); display: flex; gap: 7px; min-height: 34px; padding: 6px 8px; }
.toggle-item input { width: auto; min-height: auto; }
.location-field { position: relative; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.35; }
.location-dropdown { background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); display: none; left: 0; max-height: 270px; overflow: auto; position: absolute; right: 0; top: 62px; z-index: 30; }
.location-dropdown.open { display: block; }
.location-option { align-items: start; background: #fff; border: 0; border-bottom: 1px solid #eee8dc; border-radius: 0; color: var(--ink); display: grid; gap: 2px; min-height: 0; padding: 9px 10px; text-align: left; width: 100%; }
.location-option:hover, .location-option:focus { background: var(--accent-soft); filter: none; }
.location-option strong { font-size: 13px; font-weight: 650; }
.location-option span { color: var(--muted); font-size: 11px; }
.saved-block { border-top: 1px solid var(--line); padding: 16px; }
.saved-list { display: grid; gap: 8px; margin-top: 10px; max-height: 220px; overflow: auto; }
.saved-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: 9px; }
.saved-item strong { display: block; font-size: 13px; }
.saved-item span { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
.saved-actions { display: flex; gap: 6px; }
.danger-button { background: #fff; border: 1px solid #d7aaa0; color: var(--danger); min-height: 34px; }
.danger-button:hover { background: #f6e3df; filter: none; }
.relocation-builder { border: 1px solid #eee8dc; border-radius: 6px; padding: 10px; }
.relocation-list { display: grid; gap: 6px; margin-top: 8px; }
.relocation-item { align-items: center; border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 8px; grid-template-columns: 1fr auto; padding: 7px 8px; }
.relocation-item span { color: var(--muted); font-size: 12px; }
.wheel-frame { align-items: center; display: flex; justify-content: center; min-height: 560px; overflow: visible; position: relative; }
.chart-svg { height: auto; max-height: min(72vh, 780px); max-width: 100%; width: min(100%, 780px); }
.zodiac-label { fill: #596372; font-size: 25px; text-anchor: middle; dominant-baseline: middle; }
.house-label { fill: #8a6c4c; font-size: 13px; font-weight: 650; text-anchor: middle; dominant-baseline: middle; }
.planet-label { fill: #1f2933; font-size: 21px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; }
.virtual-point-label { fill: #6f5b8e; font-size: 15px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; }
.angle-label { fill: #7a4f2b; font-size: 15px; font-weight: 750; text-anchor: middle; dominant-baseline: middle; }
.aspect-line { opacity: 0.38; }
.planet-leader-line { opacity: 0.48; pointer-events: none; stroke: #b9aa98; stroke-linecap: round; stroke-width: 1; }
.chart-hover-target { cursor: help; }
.chart-hover-target:hover .planet-label,
.chart-hover-target:hover .virtual-point-label,
.chart-hover-target:hover .angle-label,
.chart-hover-target:hover .zodiac-label,
.chart-hover-target:hover .house-label { fill: var(--accent-strong); }
.chart-hover-target:hover .aspect-line { opacity: 0.9; stroke-width: 2; }
.chart-hover-target:hover .house-cusp-line,
.chart-hover-target:hover .sign-cusp-line { stroke: var(--accent-strong); stroke-width: 2; }
.chart-hover-target:hover + .planet-leader-line,
.chart-hover-target:hover .planet-leader-line { opacity: 0.9; stroke: var(--accent-strong); }
.label-hit { fill: transparent; pointer-events: all; }
.aspect-hit { stroke: transparent; stroke-linecap: round; stroke-width: 18; pointer-events: stroke; }
.chart-tooltip {
background: rgba(31, 41, 51, 0.96);
border-radius: 6px;
box-shadow: var(--shadow);
color: #fff;
display: none;
font-size: 13px;
left: 0;
line-height: 1.45;
max-width: 310px;
padding: 9px 11px;
pointer-events: none;
position: absolute;
top: 0;
white-space: pre-line;
z-index: 20;
}
.chart-tooltip.open { display: block; }
.summary-grid { border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 14px; }
.summary-cell { border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.summary-cell span { color: var(--muted); display: block; font-size: 12px; }
.summary-cell strong { display: block; font-size: 14px; margin-top: 3px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.segment-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tab-button { background: transparent; border: 1px solid var(--line); color: var(--ink); min-height: 32px; padding: 0 10px; }
.tab-button.active { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }
.data-panel { border-top: 1px solid var(--line); margin-top: 12px; max-height: 42vh; overflow: auto; padding-top: 12px; }
.data-panel table { border-collapse: collapse; font-size: 12px; width: 100%; }
.data-panel th, .data-panel td { border-bottom: 1px solid #eee8dc; padding: 7px 8px; text-align: left; vertical-align: top; }
.data-panel th { color: var(--muted); font-weight: 650; position: sticky; top: 0; background: var(--panel); }
.data-panel .subhead { font-size: 14px; margin: 16px 0 8px; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; font-size: 12px; background: #fff; }
.markdown-panel { grid-column: 2; min-height: 460px; }
.markdown-panel .section-head { border-bottom: 1px solid var(--line); padding: 16px; }
.text-tools { border-bottom: 1px solid var(--line); display: grid; gap: 10px; padding: 12px 16px; }
.copy-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
#custom-template { display: none; min-height: 90px; }
#custom-template.open { display: block; }
#markdown-output { border: 0; border-radius: 0; flex: 1; min-height: 360px; padding: 16px; resize: none; white-space: pre; }
.toast { position: fixed; right: 18px; bottom: 18px; border-radius: 6px; background: var(--ink); color: #fff; padding: 10px 14px; box-shadow: var(--shadow); z-index: 100; }
@media (max-width: 1180px) {
.app-shell { grid-template-columns: 1fr; }
.input-panel { grid-row: auto; max-height: none; position: static; }
.markdown-panel { grid-column: auto; min-height: 460px; }
}
@media (max-width: 860px) {
.app-shell { grid-template-columns: 1fr; padding: 10px; }
.chart-panel, .markdown-panel { min-height: auto; }
.form-grid, .mini-grid, .summary-grid, .button-row, .export-row, .details-block .export-row, .toggle-grid, .copy-row { grid-template-columns: 1fr; }
}