Revision of gistfile1.txt - Pastebin • M7N

1

+

// ==UserScript==

2

+

// @name MAX PSUTI Mini App Pink Theme Fixed

3

+

// @namespace https://max.psuti.m7n.ru/

4

+

// @version 1.1.0

5

+

// @description Adds one consistent pink theme for the PSUTI MAX mini app across all sections, independent from the user's light or dark mode.

6

+

// @match https://max.psuti.m7n.ru/app/*

7

+

// @match http://localhost:5173/app/*

8

+

// @match http://127.0.0.1:5173/app/*

9

+

// @run-at document-start

10

+

// @grant none

11

+

// ==/UserScript==

12

+

13

+

(function () {

14

+

'use strict';

15

+

16

+

const TARGET_HOSTS = new Set(['max.psuti.m7n.ru', 'localhost', '127.0.0.1']);

17

+

const TARGET_PATH_PREFIX = '/app/';

18

+

const STYLE_ID = 'tm-max-psuti-pink-theme-fixed';

19

+

const ROOT_ATTR = 'data-tm-pink-theme-fixed';

20

+

const ROOT_VALUE = 'enabled';

21

+

22

+

if (!TARGET_HOSTS.has(window.location.hostname) || !window.location.pathname.startsWith(TARGET_PATH_PREFIX)) {

23

+

return;

24

+

}

25

+

26

+

const STYLE_TEXT = `

27

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] {

28

+

color-scheme: light;

29

+

30

+

--tm-pink-page-bg: #f7d8e6;

31

+

--tm-pink-surface-primary: rgba(255, 241, 247, 0.99);

32

+

--tm-pink-surface-secondary: rgba(249, 221, 235, 0.96);

33

+

--tm-pink-surface-floating: rgba(255, 235, 244, 0.97);

34

+

--tm-pink-surface-card: rgba(255, 245, 250, 0.99);

35

+

--tm-pink-surface-shell: rgba(255, 239, 247, 0.99);

36

+

--tm-pink-header-bg: rgba(248, 214, 230, 0.92);

37

+

38

+

--tm-pink-accent: #d85c9b;

39

+

--tm-pink-accent-strong: #bf3e80;

40

+

--tm-pink-accent-soft: #f5bfdc;

41

+

--tm-pink-accent-faint: rgba(216, 92, 155, 0.12);

42

+

--tm-pink-accent-muted: rgba(216, 92, 155, 0.2);

43

+

--tm-pink-accent-hover: #e273ab;

44

+

--tm-pink-accent-pressed: #c94b8c;

45

+

--tm-pink-accent-disabled: rgba(216, 92, 155, 0.4);

46

+

--tm-pink-accent-disabled-text: rgba(191, 62, 128, 0.46);

47

+

48

+

--tm-pink-text-primary: #4d1c38;

49

+

--tm-pink-text-secondary: rgba(77, 28, 56, 0.74);

50

+

--tm-pink-text-soft: #9d5f80;

51

+

--tm-pink-text-soft-strong: #7e3a61;

52

+

--tm-pink-text-tertiary: #c188a7;

53

+

--tm-pink-text-disabled: rgba(77, 28, 56, 0.32);

54

+

--tm-pink-icon-muted: rgba(111, 49, 79, 0.52);

55

+

56

+

--tm-pink-stroke: rgba(205, 90, 148, 0.2);

57

+

--tm-pink-stroke-strong: rgba(205, 90, 148, 0.34);

58

+

--tm-pink-field-bg: rgba(250, 211, 230, 0.92);

59

+

--tm-pink-field-border: rgba(205, 90, 148, 0.34);

60

+

--tm-pink-focus-ring: rgba(216, 92, 155, 0.26);

61

+

--tm-pink-overlay: rgba(76, 25, 52, 0.44);

62

+

--tm-pink-overlay-strong: rgba(76, 25, 52, 0.56);

63

+

--tm-pink-success: #5ea887;

64

+

--tm-pink-warning: #bf8543;

65

+

--tm-pink-danger: #d44f6f;

66

+

67

+

--theme-brand-base: var(--tm-pink-accent);

68

+

--theme-brand-strong: var(--tm-pink-accent-strong);

69

+

--theme-brand-soft: var(--tm-pink-accent-soft);

70

+

--theme-brand-faint: rgba(216, 92, 155, 0.16);

71

+

--theme-brand-contrast: #ffffff;

72

+

--theme-brand-subtle-bg: rgba(216, 92, 155, 0.08);

73

+

--theme-brand-ring: rgba(216, 92, 155, 0.68);

74

+

--theme-brand-shadow:

75

+

0 0 0 1px rgba(216, 92, 155, 0.14),

76

+

0 10px 24px rgba(177, 62, 118, 0.22);

77

+

--theme-ui-accent: var(--tm-pink-accent-strong);

78

+

--theme-ui-accent-soft-bg: rgba(216, 92, 155, 0.14);

79

+

--theme-cta-accent: var(--tm-pink-accent);

80

+

81

+

--theme-surface-page: var(--tm-pink-page-bg);

82

+

--theme-surface-primary: var(--tm-pink-surface-primary);

83

+

--theme-surface-secondary: var(--tm-pink-surface-secondary);

84

+

--theme-surface-floating: var(--tm-pink-surface-floating);

85

+

--theme-surface-shell: var(--tm-pink-surface-primary);

86

+

--theme-surface-card: var(--tm-pink-surface-primary);

87

+

--theme-surface-modal: var(--tm-pink-surface-primary);

88

+

--theme-surface-input: var(--tm-pink-field-bg);

89

+

90

+

--theme-stroke: var(--tm-pink-stroke);

91

+

--theme-stroke-strong: var(--tm-pink-stroke-strong);

92

+

--theme-text-primary: var(--tm-pink-text-primary);

93

+

--theme-text-secondary: var(--tm-pink-text-secondary);

94

+

--theme-text-soft: var(--tm-pink-text-soft);

95

+

--theme-text-soft-strong: var(--tm-pink-text-soft-strong);

96

+

--theme-text-tertiary: var(--tm-pink-text-tertiary);

97

+

--theme-text-disabled: var(--tm-pink-text-disabled);

98

+

--theme-icon-muted: var(--tm-pink-icon-muted);

99

+

--theme-overlay-backdrop: var(--tm-pink-overlay);

100

+

--theme-card-shadow:

101

+

0 14px 30px rgba(130, 60, 97, 0.1),

102

+

0 0 0 1px var(--tm-pink-stroke);

103

+

--theme-card-shadow-elevated:

104

+

0 18px 42px rgba(130, 60, 97, 0.14),

105

+

0 0 0 1px var(--tm-pink-stroke-strong);

106

+

--theme-modal-shadow:

107

+

0 22px 56px rgba(111, 43, 79, 0.18),

108

+

0 0 0 1px var(--tm-pink-stroke-strong);

109

+

110

+

--app-danger: var(--tm-pink-danger);

111

+

--app-danger-strong: #cc3f65;

112

+

--app-success: var(--tm-pink-success);

113

+

--app-warning: var(--tm-pink-warning);

114

+

--app-info: var(--tm-pink-accent-strong);

115

+

--app-field-bg: var(--tm-pink-field-bg);

116

+

--app-field-border: var(--tm-pink-field-border);

117

+

118

+

--MaxUi-background-primary: var(--tm-pink-surface-primary);

119

+

--MaxUi-background-secondary: var(--tm-pink-surface-secondary);

120

+

--MaxUi-background-floating-primary: var(--tm-pink-surface-floating);

121

+

--MaxUi-background-floating-secondary: var(--tm-pink-surface-secondary);

122

+

--MaxUi-stroke-secondary: var(--tm-pink-stroke);

123

+

--MaxUi-stroke-primary: var(--tm-pink-stroke-strong);

124

+

--MaxUi-foreground-primary: var(--tm-pink-text-primary);

125

+

--MaxUi-foreground-secondary: var(--tm-pink-text-secondary);

126

+

--MaxUi-foreground-tertiary: var(--tm-pink-text-tertiary);

127

+

--MaxUi-foreground-accent: var(--tm-pink-accent-strong);

128

+

129

+

--background-surface-primary: var(--tm-pink-surface-primary);

130

+

--background-surface-ground: var(--tm-pink-page-bg);

131

+

--background-surface-card: var(--tm-pink-surface-primary);

132

+

--background-surface-secondary: var(--tm-pink-surface-secondary);

133

+

--background-surface-tertiary: var(--tm-pink-surface-secondary);

134

+

--background-surface-floating: var(--tm-pink-surface-floating);

135

+

--background-overlay: var(--tm-pink-overlay);

136

+

--background-overlay-secondary: var(--tm-pink-overlay-strong);

137

+

--background-overlay-static: rgba(76, 25, 52, 0.32);

138

+

--background-accent-themed: var(--tm-pink-accent);

139

+

--background-accent-neutral-themed: var(--tm-pink-accent);

140

+

--background-accent-neutral: var(--tm-pink-field-bg);

141

+

--background-accent-neutral-fade: var(--tm-pink-accent-faint);

142

+

--background-accent-neutral-fade-secondary: var(--tm-pink-field-bg);

143

+

--text-primary: var(--tm-pink-text-primary);

144

+

--text-secondary: var(--tm-pink-text-secondary);

145

+

--text-tertiary: var(--tm-pink-text-tertiary);

146

+

--text-subhead: var(--tm-pink-text-soft-strong);

147

+

--text-themed: var(--tm-pink-accent-strong);

148

+

--text-negative: var(--tm-pink-danger);

149

+

--icon-primary: var(--tm-pink-text-primary);

150

+

--icon-secondary: var(--tm-pink-text-secondary);

151

+

--icon-tertiary: var(--tm-pink-icon-muted);

152

+

--icon-themed: var(--tm-pink-accent-strong);

153

+

--stroke-themed: var(--tm-pink-accent-strong);

154

+

--stroke-secondary: var(--tm-pink-stroke-strong);

155

+

--stroke-separator-primary: var(--tm-pink-stroke-strong);

156

+

--stroke-separator-secondary: var(--tm-pink-stroke);

157

+

--background-local-tab-bar-android: var(--tm-pink-header-bg);

158

+

--background-local-tab-bar-i-os: var(--tm-pink-header-bg);

159

+

--background-local-top-bar-primary-android: var(--tm-pink-header-bg);

160

+

--background-local-top-bar-primary-i-os: var(--tm-pink-header-bg);

161

+

--background-local-top-bar-secondary-android: var(--tm-pink-header-bg);

162

+

--background-local-top-bar-secondary-i-os: var(--tm-pink-header-bg);

163

+

--states-background-hovered-themed: var(--tm-pink-accent-hover);

164

+

--states-background-pressed-themed: var(--tm-pink-accent-pressed);

165

+

--states-background-disabled-themed: var(--tm-pink-accent-disabled);

166

+

--states-background-hovered-neutral-themed: var(--tm-pink-accent-hover);

167

+

--states-background-pressed-neutral-themed: var(--tm-pink-accent-pressed);

168

+

--states-background-disabled-neutral-themed: var(--tm-pink-accent-disabled);

169

+

--states-background-hovered-neutral-fade: rgba(216, 92, 155, 0.18);

170

+

--states-background-pressed-neutral-fade: rgba(216, 92, 155, 0.24);

171

+

--states-background-disabled-neutral-fade: rgba(205, 90, 148, 0.14);

172

+

--states-background-hovered-transparent: rgba(216, 92, 155, 0.1);

173

+

--states-background-pressed-transparent: rgba(216, 92, 155, 0.16);

174

+

--states-text-disabled-primary: var(--tm-pink-text-disabled);

175

+

--states-text-disabled-themed: var(--tm-pink-accent-disabled-text);

176

+

--states-text-disabled-contrast-static: rgba(255, 255, 255, 0.82);

177

+

--states-icon-disabled-primary: var(--tm-pink-text-disabled);

178

+

--states-icon-disabled-themed: var(--tm-pink-accent-disabled-text);

179

+

--states-icon-hovered-themed: var(--tm-pink-accent-hover);

180

+

--states-icon-pressed-themed: var(--tm-pink-accent-pressed);

181

+

--states-text-hovered-themed: var(--tm-pink-accent-hover);

182

+

--states-text-pressed-themed: var(--tm-pink-accent-pressed);

183

+

}

184

+

185

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] ::selection {

186

+

background: rgba(216, 92, 155, 0.26);

187

+

}

188

+

189

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] body,

190

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] #root,

191

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .app-root {

192

+

background: var(--tm-pink-page-bg);

193

+

color: var(--app-text-primary);

194

+

}

195

+

196

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .Panel__kpB,

197

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .Panel_mode_primary__hES,

198

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-panel,

199

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .panel-content {

200

+

background: transparent;

201

+

}

202

+

203

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .panel-content {

204

+

background: rgba(255, 240, 248, 0.72);

205

+

}

206

+

207

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .page-header,

208

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .tabbar,

209

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-footer,

210

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-footer {

211

+

border-color: var(--tm-pink-stroke);

212

+

background: rgba(251, 222, 237, 0.96);

213

+

backdrop-filter: blur(18px) saturate(145%);

214

+

}

215

+

216

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .page-header-back {

217

+

background-color: var(--tm-pink-accent-faint);

218

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke);

219

+

}

220

+

221

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal,

222

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal,

223

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal,

224

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar {

225

+

background-color: var(--tm-pink-surface-primary);

226

+

}

227

+

228

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-modal .menu-editor-modal,

229

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-modal .admin-modal,

230

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-modal .cafeteria-feedback-modal,

231

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-modal .cafeteria-calendar,

232

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-modal .cafeteria-image-modal {

233

+

background-color: var(--tm-pink-surface-primary) !important;

234

+

}

235

+

236

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .cafeteria-feedback-modal__textarea,

237

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .menu-editor-form__input,

238

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .menu-editor-form__select-trigger,

239

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .menu-editor-picker-card,

240

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'][data-color-scheme='dark'] .menu-editor-dish__content {

241

+

background-color: var(--tm-pink-field-bg) !important;

242

+

}

243

+

244

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-card,

245

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-shell,

246

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-state,

247

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-dish-card,

248

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-shell,

249

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-category-card,

250

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card,

251

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-card,

252

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-success-action,

253

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-attachment-card,

254

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-shell,

255

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card,

256

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-user-card,

257

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-stat-card,

258

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-shell,

259

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card,

260

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal,

261

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal,

262

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal,

263

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar,

264

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-image-modal,

265

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-panel .cafeteria-shell {

266

+

background: var(--tm-pink-surface-card);

267

+

box-shadow: var(--app-card-shadow);

268

+

}

269

+

270

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-card {

271

+

box-shadow:

272

+

0 16px 34px rgba(184, 87, 136, 0.12),

273

+

0 0 0 1px rgba(205, 90, 148, 0.24);

274

+

}

275

+

276

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-icon-shell {

277

+

background-color: rgba(var(--service-rgb) / 0.14);

278

+

}

279

+

280

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-icon-shell,

281

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-success-action__icon {

282

+

background-color: var(--tm-pink-accent-faint) !important;

283

+

color: var(--tm-pink-accent-strong) !important;

284

+

}

285

+

286

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-success-action__icon {

287

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke);

288

+

}

289

+

290

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-icon-button,

291

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-icon-button svg,

292

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-success-action__icon svg {

293

+

color: inherit !important;

294

+

}

295

+

296

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-shell,

297

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-shell,

298

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-shell {

299

+

background: var(--tm-pink-surface-shell);

300

+

}

301

+

302

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-content,

303

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-content,

304

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-shell,

305

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-content {

306

+

--cafeteria-accent: var(--tm-pink-accent-strong);

307

+

--menu-editor-action-accent: var(--tm-pink-accent-strong);

308

+

--menu-editor-accent: var(--tm-pink-accent);

309

+

--menu-editor-accent-strong: var(--tm-pink-accent-strong);

310

+

--menu-editor-accent-soft: var(--tm-pink-accent-soft);

311

+

--menu-editor-accent-faint: rgba(216, 92, 155, 0.1);

312

+

}

313

+

314

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-card:hover,

315

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-success-action:hover,

316

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card:hover {

317

+

box-shadow: var(--app-card-shadow-elevated);

318

+

}

319

+

320

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .page-header-title,

321

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-service-title,

322

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-dish-title,

323

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-dish__title,

324

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-direction-cell__title,

325

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card__message,

326

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__title,

327

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__name,

328

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__message,

329

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__title,

330

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-user-card__title,

331

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .home-section-title,

332

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-section-title,

333

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-section-title,

334

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-section__title,

335

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-stat-card__count,

336

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__title {

337

+

color: var(--app-text-primary);

338

+

}

339

+

340

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .panel-state__spinner {

341

+

color: var(--tm-pink-accent-strong);

342

+

}

343

+

344

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-date-switcher__track,

345

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-tabs__track {

346

+

background-color: var(--tm-pink-field-bg);

347

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke);

348

+

}

349

+

350

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-date-switcher__slider,

351

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-tabs__slider {

352

+

background-color: rgba(255, 246, 250, 0.98);

353

+

box-shadow: 0 10px 22px rgba(116, 54, 86, 0.12), 0 0 0 1px var(--tm-pink-stroke);

354

+

}

355

+

356

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar-button,

357

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__nav,

358

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__month,

359

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-date-button,

360

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__input,

361

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-trigger,

362

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-textarea,

363

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-chip,

364

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-dish-image-placeholder,

365

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-photo-editor__empty {

366

+

background-color: var(--tm-pink-field-bg);

367

+

border-color: var(--tm-pink-field-border);

368

+

color: var(--app-text-primary);

369

+

}

370

+

371

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-menu {

372

+

background: var(--tm-pink-surface-card);

373

+

box-shadow: 0 16px 34px rgba(106, 44, 74, 0.18), 0 0 0 1px var(--tm-pink-stroke-strong);

374

+

}

375

+

376

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-option:hover,

377

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-option:focus-visible,

378

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-option--selected {

379

+

background-color: var(--tm-pink-accent-faint);

380

+

color: var(--tm-pink-accent-strong);

381

+

}

382

+

383

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-section-add,

384

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__submit,

385

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__save,

386

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-primary-button,

387

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-primary-button:hover,

388

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-primary-button:focus-visible,

389

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-primary-button:active {

390

+

background-color: var(--tm-pink-accent);

391

+

box-shadow: 0 10px 22px rgba(149, 60, 102, 0.22);

392

+

}

393

+

394

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__submit:disabled,

395

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__save:disabled,

396

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-primary-button:disabled {

397

+

background-color: var(--tm-pink-accent-disabled);

398

+

box-shadow: none;

399

+

}

400

+

401

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-dish-price,

402

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-dish__price,

403

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-repeat,

404

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card__attachment-icon,

405

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-dish__edit-icon,

406

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-attachment-icon,

407

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-checkbox--checked,

408

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card__checkbox--checked,

409

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .tabbar-item--active,

410

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .tabbar-item--active .tabbar-icon-button {

411

+

color: var(--tm-pink-accent-strong);

412

+

}

413

+

414

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-pill {

415

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke);

416

+

}

417

+

418

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-pill--user {

419

+

color: #b54d81;

420

+

background: rgba(216, 110, 159, 0.14);

421

+

}

422

+

423

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-pill--cafeteria {

424

+

color: #b05f77;

425

+

background: rgba(228, 147, 172, 0.16);

426

+

}

427

+

428

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-pill--admin {

429

+

color: #8e4f91;

430

+

background: rgba(177, 126, 193, 0.15);

431

+

}

432

+

433

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-pill--superadmin {

434

+

color: #8d3f69;

435

+

background: rgba(197, 105, 150, 0.18);

436

+

}

437

+

438

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-direction-cell__subtitle,

439

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card__groups,

440

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card__sent-at,

441

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-history-card__details-title,

442

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-hint,

443

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__meta,

444

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__date,

445

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__subtitle,

446

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card__note,

447

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-user-card__meta,

448

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-role-modal__meta,

449

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-date-caption,

450

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-empty-card__text {

451

+

color: var(--app-text-secondary);

452

+

}

453

+

454

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='IconButton_appearance_neutral__'],

455

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal__close,

456

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='IconButton_appearance_neutral__'],

457

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='IconButton_appearance_neutral__'] {

458

+

color: var(--app-text-secondary);

459

+

}

460

+

461

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__label,

462

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__header,

463

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__field-label {

464

+

color: var(--app-text-secondary);

465

+

}

466

+

467

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card {

468

+

background: rgba(255, 245, 250, 0.98);

469

+

}

470

+

471

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card--disabled {

472

+

background: rgba(255, 245, 250, 0.72);

473

+

}

474

+

475

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-picker-card__title {

476

+

color: var(--app-text-primary);

477

+

}

478

+

479

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__date-pill {

480

+

background-color: var(--tm-pink-field-bg);

481

+

color: var(--tm-pink-accent-strong);

482

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke);

483

+

}

484

+

485

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__message,

486

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-card__paragraph {

487

+

overflow-wrap: anywhere;

488

+

word-break: break-word;

489

+

}

490

+

491

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__month,

492

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__nav {

493

+

background-color: var(--tm-pink-field-bg);

494

+

color: var(--tm-pink-text-primary);

495

+

}

496

+

497

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__weekday {

498

+

color: var(--tm-pink-text-soft);

499

+

}

500

+

501

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day {

502

+

color: var(--tm-pink-text-soft-strong);

503

+

}

504

+

505

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--today {

506

+

color: #ffc3df;

507

+

background-color: rgba(216, 92, 155, 0.16);

508

+

box-shadow: 0 0 0 1px rgba(216, 92, 155, 0.42) inset;

509

+

}

510

+

511

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--selected,

512

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--today.cafeteria-calendar__day--selected {

513

+

color: #ffffff !important;

514

+

}

515

+

516

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'],

517

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] {

518

+

background-color: rgba(216, 92, 155, 0.12) !important;

519

+

color: var(--tm-pink-accent-strong) !important;

520

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke) !important;

521

+

}

522

+

523

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

524

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

525

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

526

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-panel [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'] {

527

+

color: inherit;

528

+

}

529

+

530

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'],

531

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'],

532

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'],

533

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'],

534

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'],

535

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] {

536

+

background-color: rgba(216, 92, 155, 0.12) !important;

537

+

color: var(--tm-pink-accent-strong) !important;

538

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke) !important;

539

+

}

540

+

541

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

542

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

543

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

544

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

545

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

546

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

547

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

548

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .admin-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

549

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

550

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

551

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

552

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-feedback-modal [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'] {

553

+

color: inherit;

554

+

}

555

+

556

+

/* Делаем все вторичные neutral-кнопки читаемыми в розовой теме, не только внутри модалок. */

557

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'],

558

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] {

559

+

background-color: rgba(216, 92, 155, 0.12) !important;

560

+

color: var(--tm-pink-accent-strong) !important;

561

+

box-shadow: inset 0 0 0 1px var(--tm-pink-stroke) !important;

562

+

}

563

+

564

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

565

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'],

566

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__content__'],

567

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] [class*='Button_appearance_neutral-themed__'][class*='Button_mode_secondary__'] [class*='Button__iconBefore__'] {

568

+

color: inherit !important;

569

+

}

570

+

571

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-textarea::placeholder,

572

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__input-element::placeholder,

573

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] input::placeholder {

574

+

color: var(--app-text-tertiary);

575

+

}

576

+

577

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-image-modal__close {

578

+

background-color: rgba(84, 22, 54, 0.54);

579

+

}

580

+

581

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-image-modal__image {

582

+

background-color: color-mix(in srgb, var(--tm-pink-page-bg) 78%, white 22%);

583

+

}

584

+

585

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--today {

586

+

box-shadow: 0 0 0 1px rgba(216, 92, 155, 0.42) inset;

587

+

}

588

+

589

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--selected,

590

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__day--today.cafeteria-calendar__day--selected {

591

+

background-color: var(--tm-pink-accent) !important;

592

+

color: #ffffff !important;

593

+

box-shadow: 0 12px 28px rgba(166, 54, 112, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.16) inset;

594

+

}

595

+

596

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-textarea:focus-visible,

597

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__input:focus-within,

598

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-trigger:focus-visible,

599

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-form__select-trigger--open,

600

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .page-header-back:focus-visible,

601

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar-button:focus-visible,

602

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .cafeteria-calendar__nav:focus-visible,

603

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-compose-chip:focus-visible {

604

+

outline: none;

605

+

box-shadow: 0 0 0 3px var(--tm-pink-focus-ring);

606

+

}

607

+

608

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-photo-editor__overlay {

609

+

background: rgba(77, 28, 51, 0.28);

610

+

}

611

+

612

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] button[class^='Button__'],

613

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] button[class*=' Button__'],

614

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] a[class^='Button__'],

615

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] a[class*=' Button__'] {

616

+

transition:

617

+

background-color 0.18s ease,

618

+

color 0.18s ease,

619

+

box-shadow 0.18s ease,

620

+

transform 0.18s ease;

621

+

}

622

+

623

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .tabbar-item,

624

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .page-header,

625

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .menu-editor-footer,

626

+

:root[${ROOT_ATTR}='${ROOT_VALUE}'] .mailing-footer {

627

+

color: var(--app-text-primary);

628

+

}

629

+

`;

630

+

631

+

function ensureThemeStyle() {

632

+

const root = document.documentElement;

633

+

if (!root) {

634

+

return;

635

+

}

636

+

637

+

root.setAttribute(ROOT_ATTR, ROOT_VALUE);

638

+

639

+

let style = document.getElementById(STYLE_ID);

640

+

if (!style) {

641

+

style = document.createElement('style');

642

+

style.id = STYLE_ID;

643

+

style.type = 'text/css';

644

+

style.textContent = STYLE_TEXT;

645

+

}

646

+

647

+

if (style.textContent !== STYLE_TEXT) {

648

+

style.textContent = STYLE_TEXT;

649

+

}

650

+

651

+

const target = document.head || root;

652

+

if (style.parentNode !== target || target.lastElementChild !== style) {

653

+

target.appendChild(style);

654

+

}

655

+

}

656

+

657

+

function observeDocument() {

658

+

const root = document.documentElement;

659

+

if (!root || root.dataset.tmPinkThemeFixedObserverAttached === 'true') {

660

+

return;

661

+

}

662

+

663

+

const watchHead = () => {

664

+

if (!document.head || document.head.dataset.tmPinkThemeFixedObserverAttached === 'true') {

665

+

return;

666

+

}

667

+

668

+

document.head.dataset.tmPinkThemeFixedObserverAttached = 'true';

669

+

670

+

const styleObserver = new MutationObserver(() => {

671

+

if (!document.getElementById(STYLE_ID)) {

672

+

ensureThemeStyle();

673

+

}

674

+

});

675

+

676

+

styleObserver.observe(document.head, { childList: true });

677

+

};

678

+

679

+

const headObserver = new MutationObserver(() => {

680

+

ensureThemeStyle();

681

+

watchHead();

682

+

});

683

+

684

+

headObserver.observe(root, { childList: true });

685

+

686

+

root.dataset.tmPinkThemeFixedObserverAttached = 'true';

687

+

watchHead();

688

+

689

+

document.addEventListener(

690

+

'readystatechange',

691

+

() => {

692

+

ensureThemeStyle();

693

+

watchHead();

694

+

},

695

+

{ passive: true },

696

+

);

697

+

}

698

+

699

+

ensureThemeStyle();

700

+

observeDocument();

701

+

})();

nikita / gistfile1.txt

nikita revised this gist 3 hours ago. Go to revision