observata/style-editor.css at master · gotpop/observata · GitHub

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
/*
 * Editor Stylesheet for Gutenberg
 *
 * Editor-only overrides. All other styles (variables, fonts, layout, block CSS)
 * are registered dynamically via functions.php using add_editor_style().
 */

@import url('https://fonts.googleapis.com/css2?family=Gantari:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--font-body: 'Inter', sans-serif;
	--font-heading: 'Gantari', sans-serif;
	--colour-light: white;
	--colour-grey-100: #e5e7ea;
	--colour-grey-200: #6e6e6e;
	--colour-grey-300: #252525;
	--spacing-xs: 0.35rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;

	/* SVG sphere tokens (frontend uses theme-svg.css + graphic.css via style-global; editor needs them here) */
	--surface-sphere: #fff;
	--stroke-sphere-background: 1px;
	--stroke-sphere-line: 1px;
}

h1,
h2,
h3,
h4 {
	text-box: trim-both cap alphabetic;
	margin-block: 0 1rem;
	color: var(--colour-grey-300);
	text-wrap: balance;
	font-family: var(--font-heading);
}

body {
	font-family: var(--font-body);
}

p,
[role='textbox']:not(h1, h2, h3, h4) {
	text-box: trim-both cap alphabetic;
	color: var(--colour-grey-200);
	font-family: var(--font-body);
	margin-block: 0 1rem;
}

.wp-block:not(.wp-block-post-title) {
	padding: var(--spacing-md);
	border: 1px solid var(--colour-grey-100);
	margin-block: 0 var(--spacing-md);
}

.block-editor-inner-blocks {
	margin-block: 0 var(--spacing-md);
}

.block-list-appender {
	background-color: var(--colour-light);
}

.icon-geo {
	float: right;
}

/* Allow ControlsLayout grid to cascade through InnerBlocks wrappers */
.observata-controls-layout {
	& > .block-editor-inner-blocks {
		display: contents;

		& > .block-editor-block-list__layout {
			display: contents;
		}
	}
}

/* SVG sphere styling (frontend uses graphic.css via style-global; editor needs it here) */
.graphic-sphere-svg {
	.background {
		fill: var(--surface-sphere);
		stroke-width: var(--stroke-sphere-background);
	}

	.line,
	.line-back {
		stroke-width: var(--stroke-sphere-line);
	}

	.triangle {
		fill: var(--surface-sphere);
		stroke-width: var(--stroke-sphere-line);
	}
}