← All changes | assets/css/bug-report.css +41 -39 0.9.2 → 1.1.10 View file →

		@@ -1,6 +1,6 @@
1	1	/**
2		- * Desktop Mode — Bug Report native window styles.
	2	+ * OpenStation — Bug Report native window styles.
3	3	*
4	4	* Compact form: type radio strip + title input + two textareas + a
5	5	* collapsible environment block + a primary submit. Designed to fit
6	6	* the default 560×620 window without scrolling on most viewports.
		@@ -11,13 +11,13 @@
11	11	.desktop-mode-bug-report {
12	12	display: flex;
13	13	flex-direction: column;
14	14	height: 100%;
15		- background: var( --desktop-mode-window-bg, #fff );
16		- color: var( --desktop-mode-fg, #1d2327 );
	15	+ background: var( --os-window-bg, #fff );
	16	+ color: var( --os-fg, #1d2327 );
17	17	}
18	18
19		-.desktop-mode-bug-report__form {
	19	+.os-bug-report__form {
20	20	display: flex;
21	21	flex-direction: column;
22	22	gap: 14px;
23	23	padding: 18px 20px 20px;
		@@ -23,40 +23,42 @@
23	23	padding: 18px 20px 20px;
24	24	overflow-y: auto;
25	25	}
26	26
27		-.desktop-mode-bug-report__intro {
	27	+.os-bug-report__intro {
28	28	margin: 0;
29	29	font-size: 13px;
30	30	line-height: 1.45;
31		- color: var( --desktop-mode-muted-fg, #50575e );
	31	+ color: var( --os-ui-fg-muted, #50575e );
32	32	}
33	33
34		-.desktop-mode-bug-report__error {
	34	+.os-bug-report__error {
35	35	padding: 8px 10px;
36		- border: 1px solid #d63638;
	36	+ border: 1px solid var( --os-ui-danger, #d63638 );
37	37	border-radius: 4px;
38		- background: #fcf0f1;
39		- color: #b32d2e;
	38	+ /* Same pairing rule as every other status wash: the surface follows
	39	+ the palette so its ink stays legible on it. */
	40	+ background: var( --os-ui-notice-error-bg, #fcf0f1 );
	41	+ color: var( --os-ui-danger, #b32d2e );
40	42	font-size: 12px;
41	43	}
42	44
43		-.desktop-mode-bug-report__field {
	45	+.os-bug-report__field {
44	46	display: flex;
45	47	flex-direction: column;
46	48	gap: 4px;
47	49	}
48	50
49		-.desktop-mode-bug-report__label {
	51	+.os-bug-report__label {
50	52	display: flex;
51	53	flex-direction: column;
52	54	gap: 4px;
53	55	font-size: 12px;
54	56	font-weight: 500;
55		- color: var( --desktop-mode-fg, #1d2327 );
	57	+ color: var( --os-fg, #1d2327 );
56	58	}
57	59
58		-.desktop-mode-bug-report__radio-group {
	60	+.os-bug-report__radio-group {
59	61	display: flex;
60	62	gap: 14px;
61	63	flex-wrap: wrap;
62	64	margin-top: 2px;
		@@ -61,29 +63,29 @@
61	63	flex-wrap: wrap;
62	64	margin-top: 2px;
63	65	}
64	66
65		-.desktop-mode-bug-report__radio {
	67	+.os-bug-report__radio {
66	68	display: inline-flex;
67	69	align-items: center;
68	70	gap: 6px;
69	71	font-size: 13px;
70	72	font-weight: 400;
71		- color: var( --desktop-mode-fg, #1d2327 );
	73	+ color: var( --os-fg, #1d2327 );
72	74	cursor: pointer;
73	75	}
74	76
75		-.desktop-mode-bug-report__radio input[ type = "radio" ] {
	77	+.os-bug-report__radio input[ type = "radio" ] {
76	78	margin: 0;
77	79	}
78	80
79		-.desktop-mode-bug-report__input,
80		-.desktop-mode-bug-report__textarea {
	81	+.os-bug-report__input,
	82	+.os-bug-report__textarea {
81	83	width: 100%;
82	84	padding: 8px 10px;
83		- border: 1px solid var( --desktop-mode-border, #c3c4c7 );
	85	+ border: 1px solid var( --os-ui-border, #c3c4c7 );
84	86	border-radius: 4px;
85		- background: #fff;
	87	+ background: var( --os-ui-surface, #fff );
86	88	font: inherit;
87	89	font-size: 13px;
88	90	line-height: 1.45;
89	91	color: inherit;
		@@ -92,49 +94,49 @@
92	94	border-color 120ms ease-out,
93	95	box-shadow 120ms ease-out;
94	96	}
95	97
96		-.desktop-mode-bug-report__textarea {
	98	+.os-bug-report__textarea {
97	99	resize: vertical;
98	100	min-height: 80px;
99	101	font-family: inherit;
100	102	}
101	103
102		-.desktop-mode-bug-report__input:focus,
103		-.desktop-mode-bug-report__textarea:focus {
	104	+.os-bug-report__input:focus,
	105	+.os-bug-report__textarea:focus {
104	106	outline: none;
105	107	border-color: var( --wp-admin-theme-color, #2271b1 );
106	108	box-shadow: 0 0 0 1px var( --wp-admin-theme-color, #2271b1 );
107	109	}
108	110
109		-.desktop-mode-bug-report__metadata {
	111	+.os-bug-report__metadata {
110	112	margin-top: 4px;
111		- border: 1px solid var( --desktop-mode-border, #c3c4c7 );
	113	+ border: 1px solid var( --os-ui-border, #c3c4c7 );
112	114	border-radius: 4px;
113		- background: #f6f7f7;
	115	+ background: var( --os-ui-surface-elevated, #f6f7f7 );
114	116	font-size: 12px;
115	117	}
116	118
117		-.desktop-mode-bug-report__metadata > summary {
	119	+.os-bug-report__metadata > summary {
118	120	padding: 8px 10px;
119	121	cursor: pointer;
120	122	font-weight: 500;
121		- color: var( --desktop-mode-fg, #1d2327 );
	123	+ color: var( --os-fg, #1d2327 );
122	124	user-select: none;
123	125	}
124	126
125		-.desktop-mode-bug-report__metadata-body {
	127	+.os-bug-report__metadata-body {
126	128	margin: 0;
127	129	padding: 0 10px 10px;
128		- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
	130	+ font-family: var( --os-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace );
129	131	font-size: 11px;
130	132	line-height: 1.5;
131		- color: var( --desktop-mode-muted-fg, #50575e );
	133	+ color: var( --os-ui-fg-muted, #50575e );
132	134	white-space: pre-wrap;
133	135	word-break: break-all;
134	136	}
135	137
136		-.desktop-mode-bug-report__actions {
	138	+.os-bug-report__actions {
137	139	display: flex;
138	140	align-items: center;
139	141	gap: 12px;
140	142	margin-top: 4px;
		@@ -139,14 +141,14 @@
139	141	gap: 12px;
140	142	margin-top: 4px;
141	143	}
142	144
143		-.desktop-mode-bug-report__submit {
	145	+.os-bug-report__submit {
144	146	padding: 8px 16px;
145	147	border: 1px solid var( --wp-admin-theme-color, #2271b1 );
146	148	border-radius: 4px;
147	149	background: var( --wp-admin-theme-color, #2271b1 );
148		- color: #fff;
	150	+ color: var( --os-ui-accent-ink, var( --os-ui-fg-on-accent, #fff ) );
149	151	font: inherit;
150	152	font-size: 13px;
151	153	font-weight: 500;
152	154	cursor: pointer;
		@@ -154,18 +156,18 @@
154	156	filter 120ms ease-out,
155	157	box-shadow 120ms ease-out;
156	158	}
157	159
158		-.desktop-mode-bug-report__submit:hover {
	160	+.os-bug-report__submit:hover {
159	161	filter: brightness( 1.05 );
160	162	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
161	163	}
162	164
163		-.desktop-mode-bug-report__submit:focus-visible {
	165	+.os-bug-report__submit:focus-visible {
164	166	outline: 2px solid var( --wp-admin-theme-color, #2271b1 );
165	167	outline-offset: 2px;
166	168	}
167	169
168		-.desktop-mode-bug-report__hint {
	170	+.os-bug-report__hint {
169	171	font-size: 12px;
170		- color: var( --desktop-mode-muted-fg, #50575e );
	172	+ color: var( --os-ui-fg-muted, #50575e );
171	173	}