☰

Gyazo.com Dark Mode

Gyazo Dark Mode (Purple Accents)

目前为 2024-12-24 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name         Gyazo.com Dark Mode
  3. @version      2.3
  4. @namespace    typpi.online
  5. @description  Gyazo Dark Mode (Purple Accents)
  6. @author       Nick2bad4u
  7. @license      UnLicense
  8. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  9. ==/UserStyle== */
  10. @-moz-document domain("gyazo.com") {
  11. 	#react-root
  12. 		> div:nth-child(2)
  13. 		> div
  14. 		> div
  15. 		> div
  16. 		> div.image-infos
  17. 		> div.related-info-box-component
  18. 		> div
  19. 		> div.related-images-grid-view.related-info,
  20. 	.captured-info-value,
  21. 	.content-block,
  22. 	.edit-box-component,
  23. 	.footer-block,
  24. 	.grid-view,
  25. 	.grid-view-cell,
  26. 	.grid-view-cell-inner-image,
  27. 	.header-block,
  28. 	.image-desc-display.placeholder,
  29. 	.image-infos,
  30. 	.images-grid-view,
  31. 	.main-block-stage,
  32. 	.side-block-items,
  33. 	.sidebar-block {
  34. 		color: #e0e0e0 !important;
  35. 		background-color: #121212 !important;
  36. 	}
  37.  
  38. 	#popover > h3,
  39. 	.header-block.explorer-header-block,
  40. 	a,
  41. 	button,
  42. 	html,
  43. 	img,
  44. 	input,
  45. 	span {
  46. 		color: #bb86fc !important;
  47. 		background-color: #121212 !important;
  48. 	}
  49.  
  50. 	#global-dropdown-menu
  51. 		> div.popover-content
  52. 		> ul
  53. 		> li:first-child
  54. 		> a
  55. 		> span.account-item-check
  56. 		> svg,
  57. 	#global-dropdown-menu
  58. 		> div.popover-content
  59. 		> ul
  60. 		> li:nth-child(n)
  61. 		> a
  62. 		> svg
  63. 		> path:nth-child(n),
  64. 	#like > svg,
  65. 	#like > svg > path,
  66. 	#popover
  67. 		> div.popover-content
  68. 		> div
  69. 		> div
  70. 		> div
  71. 		> svg,
  72. 	.reblog-control > a > svg > path:nth-child(n),
  73. 	#react-root
  74. 		> div.header-block.explorer-header-block
  75. 		> div.explorer-action-btn-toolbar
  76. 		> div.explorer-action-btn-group
  77. 		> button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
  78. 		> svg,
  79. 	#react-root
  80. 		> div.header-block.explorer-header-block
  81. 		> div.explorer-action-btn-toolbar
  82. 		> div.explorer-action-btn-group
  83. 		> button
  84. 		> svg,
  85. 	#react-root
  86. 		> div.header-block.explorer-header-block
  87. 		> div.explorer-action-btn-toolbar
  88. 		> div.explorer-action-btn-group
  89. 		> div.upload-modal.captures-upload-modal.show
  90. 		> button
  91. 		> svg,
  92. 	#react-root
  93. 		> div.header-block.explorer-header-block
  94. 		> div.search-box
  95. 		> div
  96. 		> div.search-box-panel
  97. 		> div.search-history-list
  98. 		> div
  99. 		> div:nth-child(n)
  100. 		> button.switch-save
  101. 		> svg:hover,
  102. 	#react-root
  103. 		> div:nth-child(2)
  104. 		> div
  105. 		> div
  106. 		> div
  107. 		> div.image-infos
  108. 		> div.edit-box-component
  109. 		> div
  110. 		> div
  111. 		> div
  112. 		> div.image-ocrinfo-component
  113. 		> div
  114. 		> div.ocr-desc-buttons
  115. 		> div
  116. 		> div
  117. 		> button
  118. 		> svg,
  119. 	#react-root
  120. 		> div:nth-child(n)
  121. 		> div
  122. 		> div
  123. 		> aside
  124. 		> div
  125. 		> div
  126. 		> ul
  127. 		> *
  128. 		> a
  129. 		> span.toplevel-item-kamon
  130. 		> svg
  131. 		> path,
  132. 	#react-root
  133. 		> div:nth-child(n)
  134. 		> div
  135. 		> div
  136. 		> aside
  137. 		> div
  138. 		> div
  139. 		> ul
  140. 		> li.new-collection-field
  141. 		> span
  142. 		> span
  143. 		> svg
  144. 		> path,
  145. 	#react-root
  146. 		> div
  147. 		> div
  148. 		> div
  149. 		> div.transform-page-header
  150. 		> div
  151. 		> button
  152. 		> svg,
  153. 	#react-root
  154. 		> div
  155. 		> div
  156. 		> div
  157. 		> div.transform-page-header
  158. 		> div
  159. 		> div
  160. 		> button:nth-child(n)
  161. 		> svg
  162. 		> path,
  163. 	[id^='headlessui-menu-button-'] > svg > path,
  164. 	[id^='headlessui-menu-item-'] > svg,
  165. 	.pro .features h2,
  166. 	body
  167. 		> div.content
  168. 		> section.features-table
  169. 		> div
  170. 		> table:nth-child(n)
  171. 		> tbody:nth-child(3)
  172. 		> tr:nth-child(n)
  173. 		> td:nth-child(n)
  174. 		> div
  175. 		> kamon-lp {
  176. 		fill: #bb86fc;
  177. 	}
  178.  
  179. 	#global-dropdown-menu
  180. 		> div.popover-content
  181. 		> ul
  182. 		> li:first-child
  183. 		> a
  184. 		> span.account-item-check
  185. 		> svg:hover,
  186. 	#global-dropdown-menu
  187. 		> div.popover-content
  188. 		> ul
  189. 		> li:nth-child(13)
  190. 		> button
  191. 		> svg
  192. 		> path,
  193. 	#global-dropdown-menu
  194. 		> div.popover-content
  195. 		> ul
  196. 		> li:nth-child(n)
  197. 		> a
  198. 		> svg
  199. 		> path,
  200. 	#react-root
  201. 		> div.header-block.explorer-header-block
  202. 		> div.explorer-action-btn-toolbar
  203. 		> div.explorer-action-btn-group
  204. 		> button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
  205. 		> svg:hover,
  206. 	#react-root
  207. 		> div.header-block.explorer-header-block
  208. 		> div.explorer-action-btn-toolbar
  209. 		> div.explorer-action-btn-group
  210. 		> button
  211. 		> svg:hover,
  212. 	#react-root
  213. 		> div.header-block.explorer-header-block
  214. 		> div.explorer-action-btn-toolbar
  215. 		> div.explorer-action-btn-group
  216. 		> div.upload-modal.captures-upload-modal.show
  217. 		> button:hover
  218. 		> svg,
  219. 	#react-root
  220. 		> div:nth-child(2)
  221. 		> div
  222. 		> div
  223. 		> aside
  224. 		> div
  225. 		> div
  226. 		> ul
  227. 		> li.toplevel-item.collection-list
  228. 		> ul
  229. 		> li:nth-child(n)
  230. 		> div
  231. 		> button
  232. 		> svg,
  233. 	#react-root
  234. 		> div:nth-child(2)
  235. 		> div
  236. 		> div
  237. 		> div
  238. 		> div.image-infos
  239. 		> div.edit-box-component
  240. 		> div
  241. 		> div
  242. 		> div
  243. 		> div.image-ocrinfo-component
  244. 		> div
  245. 		> div.ocr-desc-buttons
  246. 		> div
  247. 		> div
  248. 		> button
  249. 		> svg:hover,
  250. 	#react-root
  251. 		> div:nth-child(n)
  252. 		> div
  253. 		> div
  254. 		> aside
  255. 		> div
  256. 		> div
  257. 		> ul
  258. 		> :hover
  259. 		> a
  260. 		> span.toplevel-item-kamon
  261. 		> svg
  262. 		> path,
  263. 	#react-root
  264. 		> div:nth-child(n)
  265. 		> div
  266. 		> div
  267. 		> aside
  268. 		> div
  269. 		> div
  270. 		> ul
  271. 		> li.new-collection-field
  272. 		> span:hover
  273. 		> span
  274. 		> svg
  275. 		> path,
  276. 	#react-root
  277. 		> div
  278. 		> div
  279. 		> div
  280. 		> div.transform-page-header
  281. 		> div
  282. 		> button:hover
  283. 		> svg,
  284. 	#react-root
  285. 		> div
  286. 		> div
  287. 		> div
  288. 		> div.transform-page-header
  289. 		> div
  290. 		> div
  291. 		> button:hover:nth-child(n)
  292. 		> svg
  293. 		> path,
  294. 	[id^='headlessui-menu-button-']
  295. 		> svg
  296. 		> path:hover,
  297. 	[id^='headlessui-menu-item-'] > svg:hover {
  298. 		fill: white;
  299. 	}
  300.  
  301. 	.new-collection-field > span > span > svg,
  302. 	.tags > a > span.toplevel-item-kamon > svg,
  303. 	.visits > a > span.toplevel-item-kamon > svg,
  304. 	.captures.toplevel-item-active
  305. 		> a
  306. 		> span.toplevel-item-kamon
  307. 		> svg {
  308. 		fill: black;
  309. 	}
  310.  
  311. 	#react-root
  312. 		> div.header-block.explorer-header-block
  313. 		> div.explorer-action-btn-toolbar
  314. 		> a {
  315. 		background-color: #1212126b !important;
  316. 	}
  317.  
  318. 	#global-dropdown-menu
  319. 		> div.popover-content
  320. 		> ul
  321. 		> li:nth-child(13)
  322. 		> button
  323. 		> span:hover,
  324. 	#global-dropdown-menu
  325. 		> div.popover-content
  326. 		> ul
  327. 		> li:nth-child(n)
  328. 		> a:hover,
  329. 	#global-dropdown-menu
  330. 		> div.popover-content
  331. 		> ul
  332. 		> li:nth-child(n)
  333. 		> a
  334. 		> span:hover {
  335. 		color: #fff !important;
  336. 	}
  337.  
  338. 	.images-show
  339. 		.bottom.interactive-popover
  340. 		> .arrow::after,
  341. 	.popover.bottom > .arrow::after {
  342. 		border-bottom-color: #bb86fc;
  343. 	}
  344.  
  345. 	.explorer-action-btn.dropdown-toggle::after {
  346. 		display: inline-block;
  347. 		width: 24px;
  348. 		height: 24px;
  349. 		margin-right: -8px;
  350. 		background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2FyZXQtZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTEuNzc3Mzk1MywxNC43MzAzOTUzIEMxMS41MjMzOTUzLDE0LjczMDM5NTMgMTEuMjY5Mzk1MywxNC42MzQzOTUzIDExLjA3NDM5NTMsMTQuNDQxMzk1MyBMNy4yOTczOTUyOSwxMC43MTEzOTUzIEM2LjkwNDM5NTI5LDEwLjMyMzM5NTMgNi45MDAzOTUyOSw5LjY5MDM5NTI5IDcuMjg4Mzk1MjksOS4yOTczOTUyOSBDNy42NzYzOTUyOSw4LjkwNDM5NTI5IDguMzEwMzk1MjksOC45MDAzOTUyOSA4LjcwMjM5NTI5LDkuMjg4Mzk1MjkgTDExLjc3NzM5NTMsMTIuMzI1Mzk1MyBMMTQuODUxMzk1Myw5LjI4ODM5NTI5IEMxNS4yNDUzOTUzLDguOTAwMzk1MjkgMTUuODc4Mzk1Myw4LjkwNDM5NTI5IDE2LjI2NjM5NTMsOS4yOTczOTUyOSBDMTYuNjU0Mzk1Myw5LjY5MDM5NTI5IDE2LjY1MDM5NTMsMTAuMzIzMzk1MyAxNi4yNTczOTUzLDEwLjcxMTM5NTMgTDEyLjQ4MDM5NTMsMTQuNDQxMzk1MyBDMTIuMjg1Mzk1MywxNC42MzQzOTUzIDEyLjAzMTM5NTMsMTQuNzMwMzk1MyAxMS43NzczOTUzLDE0LjczMDM5NTMiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJjYXJldC1kb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjQkI4NkZDIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0JCOThGQyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICA8L2c+Cjwvc3ZnPg==');
  351. 		content: '';
  352. 	}
  353.  
  354. 	.button,
  355. 	.form-control,
  356. 	.grid-cell,
  357. 	.input,
  358. 	.modal,
  359. 	.modal-content,
  360. 	.popup,
  361. 	.related-images-grid-view.related-info,
  362. 	.tooltip {
  363. 		border: 1px solid #333 !important;
  364. 		color: #e0e0e0 !important;
  365. 		background-color: #1e1e1e !important;
  366. 	}
  367.  
  368. 	.faq.static-page-faq
  369. 		> ul
  370. 		> li.bottom
  371. 		> div.question:hover,
  372. 	.faq.static-page-faq
  373. 		> ul
  374. 		> li:nth-child(n)
  375. 		> div.question:hover,
  376. 	.post > div > div > h2:nth-child(n),
  377. 	.TOTVG659Y6UvGA4WzVD1 > form > input,
  378. 	.card.medium-card,
  379. 	.container-close-date-images.related-info,
  380. 	.images-after-origin,
  381. 	.metadata,
  382. 	.related-info-box-component,
  383. 	.side-block .side-block-items .sub,
  384. 	.testing-swap-image-container
  385. 		.metadata-baseinfo,
  386. 	body > div.content > div:nth-child(2) > h1,
  387. 	body > div.content > div:nth-child(n) > h2,
  388. 	body > div.content > section.faq > div > h2,
  389. 	body
  390. 		> div.content
  391. 		> section.features-table
  392. 		> div
  393. 		> table:nth-child(n)
  394. 		> thead
  395. 		> tr
  396. 		> th
  397. 		> div,
  398. 	.title,
  399. 	.row > div:nth-child(n) > div {
  400. 		color: #bb86fc !important;
  401. 	}
  402.  
  403. 	.header {
  404. 		background: #121212;
  405. 	}
  406.  
  407. 	:root {
  408. 		--body-background: #121212;
  409. 	}
  410.  
  411. 	.query-input {
  412. 		border: 1px #bb86fc dashed;
  413. 		border-radius: 5px;
  414. 	}
  415.  
  416. 	.speech-button {
  417. 		border: 1px #bb86fc dashed;
  418. 	}
  419.  
  420. 	.speech-button:hover {
  421. 		border: 1px #f00 dashed;
  422. 	}
  423.  
  424. 	.footer-block,
  425. 	.header-block {
  426. 		border-bottom: 1px solid #333 !important;
  427. 	}
  428.  
  429. 	.sidebar-block {
  430. 		border-right: 1px solid #333 !important;
  431. 	}
  432.  
  433. 	.card.medium-card {
  434. 		border: 1px solid #333 !important;
  435. 		background-color: #1e1e1e !important;
  436. 	}
  437.  
  438. 	.metadata-description {
  439. 		padding: 10px;
  440. 	}
  441.  
  442. 	.captured-info,
  443. 	.ocr-icon-block > div,
  444. 	.related-info
  445. 		> div
  446. 		> div
  447. 		> span
  448. 		> span:first-child,
  449. 	.section-headline
  450. 		> a
  451. 		> span
  452. 		> span:first-child {
  453. 		margin-left: 10px;
  454. 	}
  455.  
  456. 	article,
  457. 	aside,
  458. 	div:not(
  459. 			#react-root
  460. 				> div:nth-child(n)
  461. 				> div
  462. 				> div
  463. 				> main
  464. 				> div
  465. 				> div
  466. 				> div
  467. 				> div
  468. 				> div:nth-child(2)
  469. 				> section
  470. 				> div:nth-child(n)
  471. 				> a
  472. 				> div,
  473. 			.caBpUIyLTfNBwvxfTyDa,
  474. 			div.k3nzGrC3hEubDzXyOg_r
  475. 		),
  476. 	footer,
  477. 	h1,
  478. 	h2,
  479. 	h3,
  480. 	h4,
  481. 	h5,
  482. 	h6,
  483. 	header,
  484. 	li,
  485. 	main,
  486. 	nav,
  487. 	p,
  488. 	section,
  489. 	table,
  490. 	td,
  491. 	th,
  492. 	ul {
  493. 		color: #e0e0e0;
  494. 		background-color: #121212;
  495. 	}
  496.  
  497. 	#react-root
  498. 		> div:nth-child(n)
  499. 		> div
  500. 		> div
  501. 		> main
  502. 		> div
  503. 		> div
  504. 		> div
  505. 		> div
  506. 		> div:nth-child(n)
  507. 		> section
  508. 		> div:nth-child(n)
  509. 		> div {
  510. 		background: #0000 !important;
  511. 	}
  512.  
  513. 	.k3nzGrC3hEubDzXyOg_r {
  514. 		overflow: unset;
  515. 	}
  516.  
  517. 	option,
  518. 	select {
  519. 		color: #e0e0e0 !important;
  520. 		background-color: #1e1e1e !important;
  521. 	}
  522.  
  523. 	#react-root
  524. 		> div:nth-child(2)
  525. 		> div
  526. 		> div
  527. 		> div
  528. 		> div.image-infos
  529. 		> div.edit-box-component,
  530. 	#react-root
  531. 		> div:nth-child(n)
  532. 		> div
  533. 		> div
  534. 		> div
  535. 		> div.image-box-component.zoomable
  536. 		> a,
  537. 	#react-root
  538. 		> div:nth-child(n)
  539. 		> div
  540. 		> div
  541. 		> div
  542. 		> div.image-box-component.zoomable
  543. 		> div,
  544. 	[class*='t30xm'],
  545. 	[class*='t30xm'] > div:nth-child(n),
  546. 	[class*='t30xm'] > div:nth-child(n) > span,
  547. 	[role*='tooltip'],
  548. 	div.image-infos {
  549. 		border: 4px solid #000 !important;
  550. 		color: #bb86fc !important;
  551. 		background-color: #000 !important;
  552. 	}
  553.  
  554. 	#react-root
  555. 		> div:nth-child(n)
  556. 		> div
  557. 		> div
  558. 		> main
  559. 		> div
  560. 		> div:nth-child(n)
  561. 		> div
  562. 		> div
  563. 		> div:nth-child(n)
  564. 		> div
  565. 		> div
  566. 		> div.hover-layer {
  567. 		display: initial !important;
  568. 	}
  569.  
  570. 	#react-root
  571. 		> div:nth-child(2)
  572. 		> div
  573. 		> div
  574. 		> div
  575. 		> div.image-infos
  576. 		> div.related-info-box-component
  577. 		> div,
  578. 	#react-root
  579. 		> div:nth-child(n)
  580. 		> div
  581. 		> div
  582. 		> div
  583. 		> div.image-box-component.zoomable
  584. 		> div.navigation.next-navigation,
  585. 	#react-root
  586. 		> div:nth-child(n)
  587. 		> div
  588. 		> div
  589. 		> div
  590. 		> div.image-box-component.zoomable
  591. 		> div.navigation.prev-navigation,
  592. 	#react-root
  593. 		> div:nth-child(n)
  594. 		> div
  595. 		> div
  596. 		> div
  597. 		> div.image-infos
  598. 		> div.edit-box-component
  599. 		> div
  600. 		> div
  601. 		> div,
  602. 	#react-root
  603. 		> div:nth-child(n)
  604. 		> div
  605. 		> div
  606. 		> div
  607. 		> div.image-infos
  608. 		> div.related-info-box-component
  609. 		> div
  610. 		> div.container-close-date-images.related-info,
  611. 	#react-root
  612. 		> div:nth-child(n)
  613. 		> div
  614. 		> div
  615. 		> div
  616. 		> div.image-infos
  617. 		> div.related-info-box-component
  618. 		> div
  619. 		> div.related-images-grid-view.related-info,
  620. 	#react-root
  621. 		> div:nth-child(n)
  622. 		> div
  623. 		> div
  624. 		> main
  625. 		> div
  626. 		> div:nth-child(n)
  627. 		> div
  628. 		> div
  629. 		> div:nth-child(n)
  630. 		> div
  631. 		> .card.medium-card.checkable:hover {
  632. 		opacity: 100%;
  633. 		box-shadow:
  634. 			0 0 1px 1px #bb86fc,
  635. 			0 0 1px #bb86fc;
  636. 	}
  637.  
  638. 	#react-root
  639. 		> div:nth-child(n)
  640. 		> div
  641. 		> div
  642. 		> main
  643. 		> div
  644. 		> div:nth-child(n)
  645. 		> div
  646. 		> div
  647. 		> div:nth-child(n)
  648. 		> div
  649. 		> div {
  650. 		box-shadow: 0 1px 0 0 #bb86fc;
  651. 	}
  652.  
  653. 	.grid-view
  654. 		.card.medium-card
  655. 		.hover-layer:hover {
  656. 		position: absolute;
  657. 		border: 5px solid #fff;
  658. 		border-bottom: 32px solid #fff;
  659. 		opacity: 0%;
  660. 		background: rgb(58 66 79 / 40%);
  661. 		transition: opacity 0.15s;
  662. 		mix-blend-mode: multiply;
  663. 		inset: 0;
  664. 	}
  665.  
  666. 	#metadata-is-public-dropdown,
  667. 	#metadata-is-public-dropdown > span,
  668. 	textarea {
  669. 		border: none;
  670. 		color: #bb86fc;
  671. 		background-color: #000 !important;
  672. 	}
  673.  
  674. 	#search-box-input:hover {
  675. 		border-bottom: 1px solid #000;
  676. 	}
  677.  
  678. 	#popover > h3 {
  679. 		border-bottom: 3px solid #000;
  680. 	}
  681.  
  682. 	.faq-list .faq-list-title {
  683. 		color: #bb86fc !important;
  684. 		background: linear-gradient(
  685. 			to bottom,
  686. 			#121212 calc(100% - 3px),
  687. 			rgb(255 255 255 / 0%) 100%
  688. 		);
  689. 	}
  690.  
  691. 	#conclusion > div > div > h2,
  692. 	#faq
  693. 		> div
  694. 		> div.faq.static-page-faq
  695. 		> ul
  696. 		> li:nth-child(n)
  697. 		> div.expand
  698. 		> i,
  699. 	#features-ai,
  700. 	#features-clean-share,
  701. 	#features-edit,
  702. 	#features-unlimited,
  703. 	#features-video-message,
  704. 	#react-root
  705. 		> div.header-block.explorer-header-block
  706. 		> div.search-box
  707. 		> div
  708. 		> div.search-box-panel
  709. 		> div.search-history-list
  710. 		> div
  711. 		> div:nth-child(n)
  712. 		> a
  713. 		> div,
  714. 	#search-box-input::placeholder,
  715. 	#section-features
  716. 		> div
  717. 		> div
  718. 		> div:nth-child(n)
  719. 		> div
  720. 		> i,
  721. 	#section-features > div > h2,
  722. 	.closing > div > h2,
  723. 	.faq
  724. 		> div
  725. 		> div
  726. 		> ul
  727. 		> li:nth-child(n)
  728. 		> div.expand
  729. 		> i,
  730. 	.pricing > div > h2,
  731. 	.testimonials
  732. 		> div
  733. 		> div
  734. 		> div
  735. 		> div:nth-child(n)
  736. 		> blockquote
  737. 		> p,
  738. 	.testimonials
  739. 		> div
  740. 		> div
  741. 		> div
  742. 		> div:nth-child(n)
  743. 		> div
  744. 		> h5,
  745. 	.testimonials > div > div > h2,
  746. 	.tutorial > div > h3,
  747. 	.usecases > div > div:nth-child(n) > h3,
  748. 	.usecases > div > h2 {
  749. 		color: #bb86fc;
  750. 	}
  751.  
  752. 	.testimonials .card-footer::before,
  753. 	body
  754. 		> div.content
  755. 		> section.testimonials
  756. 		> div
  757. 		> div
  758. 		> div
  759. 		> div:nth-child(n)
  760. 		> div
  761. 		> div {
  762. 		color: #bb86fc !important;
  763. 		background-color: #bb86fc;
  764. 	}
  765.  
  766. 	#conclusion > div > button,
  767. 	.transform-page-header > div > button,
  768. 	.transform-page-header
  769. 		> div
  770. 		> div
  771. 		> button:nth-child(n),
  772. 	.Xpov4pPcafwfUVkzW7Gw,
  773. 	.pricing-box-default,
  774. 	.box.small-team {
  775. 		border: 1px solid #bb86fc;
  776. 	}
  777.  
  778. 	#global-dropdown-menu
  779. 		> div.popover-content
  780. 		> ul
  781. 		> li:nth-child(13)
  782. 		> button
  783. 		> svg
  784. 		> path:nth-child(n) {
  785. 		fill: #f00;
  786. 	}
  787.  
  788. 	.saved-search-header {
  789. 		color: #bb86fc;
  790. 		font-size: 16px;
  791. 		text-decoration: underline;
  792. 	}
  793.  
  794. 	::-webkit-scrollbar {
  795. 		width: 12px;
  796. 	}
  797.  
  798. 	::-webkit-scrollbar-track {
  799. 		background: #bb86fc;
  800. 	}
  801.  
  802. 	::-webkit-scrollbar-thumb {
  803. 		border: 3px solid #121212;
  804. 		border-radius: 10px;
  805. 		background-color: #121212;
  806. 	}
  807.  
  808. 	* {
  809. 		scrollbar-color: #bb86fc #000;
  810. 		scrollbar-width: thin;
  811. 	}
  812.  
  813. 	.global-dropdown-menu-divider {
  814. 		background-color: #000;
  815. 	}
  816.  
  817. 	#conclusion,
  818. 	#faq,
  819. 	#faq
  820. 		> div
  821. 		> div.faq.static-page-faq
  822. 		> ul
  823. 		> li:nth-child(n):hover,
  824. 	body
  825. 		> div.content
  826. 		> div.static-page-nav-container.light
  827. 		> nav,
  828. 	body > div.content > section.testimonials,
  829. 	body.pricing .users,
  830. 	body {
  831. 		background-color: #121212;
  832. 	}
  833.  
  834. 	.images-after-origin > section {
  835. 		background-color: #121212 !important;
  836. 	}
  837.  
  838. 	body
  839. 		> div.content
  840. 		> div.static-page-nav-container.light
  841. 		> nav
  842. 		> div
  843. 		> div
  844. 		> a
  845. 		> div {
  846. 		width: 48px;
  847. 		height: 48px;
  848. 		color: red !important;
  849. 		background-image: url('https://i.gyazo.com/3b48aa49e16ccde7bf0f4903269a9bc0.png');
  850. 	}
  851.  
  852. 	body > div.content > section.faq,
  853. 	body
  854. 		> div.content
  855. 		> section.hero-header.hidden-xs,
  856. 	body > div.content > section.hero.hidden-xs,
  857. 	body > div.content > section.testimonials {
  858. 		background-image: linear-gradient(
  859. 			80deg,
  860. 			#000 2%,
  861. 			#bb86fc 30%,
  862. 			#121212
  863. 		);
  864. 	}
  865.  
  866. 	.dark > nav > div,
  867. 	.dark > nav > div > div,
  868. 	.container {
  869. 		border-radius: 20px;
  870. 		border-bottom-right-radius: 0 !important;
  871. 		border-bottom-left-radius: 0 !important;
  872. 	}
  873.  
  874. 	#conclusion > div,
  875. 	.faq > div,
  876. 	.hero-header.hidden-xs > div,
  877. 	.hero-header.hidden-xs > div > div,
  878. 	.testimonials > div,
  879. 	.usecase > div {
  880. 		border-radius: 20px !important;
  881. 	}
  882.  
  883. 	#faq
  884. 		> div
  885. 		> div.faq.static-page-faq
  886. 		> ul
  887. 		> li:nth-child(n)
  888. 		> div.expand,
  889. 	.pricing-table-box-pro,
  890. 	body
  891. 		> div.content
  892. 		> section.faq
  893. 		> div
  894. 		> div
  895. 		> ul
  896. 		> li:nth-child(n)
  897. 		> div.expand {
  898. 		border: 3px solid #bb86fc;
  899. 	}
  900.  
  901. 	#faq
  902. 		> div
  903. 		> div.faq.static-page-faq
  904. 		> ul
  905. 		> li:nth-child(n),
  906. 	#react-root
  907. 		> div:nth-child(n)
  908. 		> div
  909. 		> div
  910. 		> div
  911. 		> div.image-infos
  912. 		> div.related-info-box-component
  913. 		> div
  914. 		> div.related-images-grid-view.related-info
  915. 		> div
  916. 		> section
  917. 		> div:nth-child(n)
  918. 		> a,
  919. 	body
  920. 		> div.content
  921. 		> section.faq
  922. 		> div
  923. 		> div
  924. 		> ul
  925. 		> li:nth-child(n) {
  926. 		border-top: 1px solid #bb86fc;
  927. 	}
  928.  
  929. 	.btn-default:hover,
  930. 	.btn-primary:hover,
  931. 	.btn-secondary:hover,
  932. 	.hero-header-text > p:nth-child(n) > a:hover,
  933. 	.enterprise-plan,
  934. 	.small-team,
  935. 	.teams-pricing > div > div:nth-child(2) > div {
  936. 		border-color: #bb86fc;
  937. 	}
  938.  
  939. 	.btn-primary,
  940. 	.btn-secondary {
  941. 		border-color: #3c2a51;
  942. 	}
  943.  
  944. 	.teams-pricing
  945. 		.pricing-toggle-switch-container {
  946. 		position: relative;
  947. 		display: inline-block;
  948. 		width: 300px;
  949. 		height: 60px;
  950. 		margin-top: 38px;
  951. 		border: 1px solid #d7d7d7;
  952. 		border-radius: 10px;
  953. 		cursor: pointer;
  954. 		text-align: center;
  955. 	}
  956.  
  957. 	.search-box .search-box-input-wrap input:focus,
  958. 	.static-page-faq .bottom {
  959. 		border-bottom: 1px solid #bb86fc;
  960. 	}
  961.  
  962. 	.static-page-faq li:hover {
  963. 		background: #3c2a51;
  964. 		cursor: pointer;
  965. 	}
  966.  
  967. 	.dropdown-menu,
  968. 	.like_toggle {
  969. 		background-color: #bb86fc;
  970. 	}
  971.  
  972. 	.dropdown-header {
  973. 		color: #fff;
  974. 	}
  975.  
  976. 	#like > svg {
  977. 		fill: #bb86fc !important;
  978. 	}
  979.  
  980. 	.table > tbody > tr > td,
  981. 	.table > tbody > tr > th,
  982. 	.table > tfoot > tr > td,
  983. 	.table > tfoot > tr > th,
  984. 	.table > thead > tr > td,
  985. 	.table > thead > tr > th {
  986. 		line-height: 1.75;
  987. 		padding: 8px;
  988. 		border-top: 1px solid #bb86fc;
  989. 		vertical-align: top;
  990. 	}
  991.  
  992. 	.table > tbody + tbody {
  993. 		border-top: 2px solid #bb86fc;
  994. 	}
  995.  
  996. 	.table > thead > tr > th {
  997. 		border-bottom: 2px solid #bb86fc;
  998. 		vertical-align: bottom;
  999. 	}
  1000.  
  1001. 	.side-block
  1002. 		.side-block-items
  1003. 		.toplevel-item-active {
  1004. 		background: #121212;
  1005. 		pointer-events: none;
  1006. 	}
  1007.  
  1008. 	#react-root
  1009. 		> div:nth-child(2)
  1010. 		> div
  1011. 		> div
  1012. 		> aside
  1013. 		> div
  1014. 		> div
  1015. 		> ul
  1016. 		> li.toplevel-item.collection-list
  1017. 		> ul:hover
  1018. 		> li:nth-child(n)
  1019. 		> div
  1020. 		> button
  1021. 		> svg
  1022. 		> path,
  1023. 	#react-root
  1024. 		> div:nth-child(n)
  1025. 		> div
  1026. 		> div
  1027. 		> div
  1028. 		> div.image-box-component.zoomable
  1029. 		> div.navigation.next-navigation
  1030. 		> svg
  1031. 		> path,
  1032. 	#react-root
  1033. 		> div:nth-child(n)
  1034. 		> div
  1035. 		> div
  1036. 		> div
  1037. 		> div.image-box-component.zoomable
  1038. 		> div.navigation.prev-navigation
  1039. 		> svg
  1040. 		> path,
  1041. 	.search-history-list
  1042. 		.histories
  1043. 		.history-row
  1044. 		button.switch-save
  1045. 		.kamon {
  1046. 		fill: #bb86fc;
  1047. 	}
  1048.  
  1049. 	.search-history-list
  1050. 		.histories
  1051. 		.history-row
  1052. 		button.switch-save:hover
  1053. 		.kamon,
  1054. 	.search-history-list
  1055. 		.histories
  1056. 		.history-row:hover
  1057. 		button.switch-save
  1058. 		.kamon {
  1059. 		fill: #fff;
  1060. 	}
  1061.  
  1062. 	.side-block-items .collection-item .file-thumb,
  1063. 	.side-block-items .collection-item .thumb {
  1064. 		border: 1px solid #bb86fc;
  1065. 		box-shadow: 0 0 0 1px #bb86fc;
  1066. 	}
  1067.  
  1068. 	.side-block-items .collection-item > a {
  1069. 		border-radius: 5px;
  1070. 	}
  1071.  
  1072. 	.side-block-items .collection-item:focus-within,
  1073. 	.side-block-items .collection-item:hover {
  1074. 		background: #bb86fc;
  1075. 	}
  1076.  
  1077. 	#react-root
  1078. 		> div.header-block.explorer-header-block
  1079. 		> a {
  1080. 		border-bottom: 10px;
  1081. 		background-color: #12121200 !important;
  1082. 	}
  1083.  
  1084. 	#popover
  1085. 		> div.popover-content
  1086. 		> ul
  1087. 		> li:nth-child(n):hover,
  1088. 	.global-logo-icon:hover {
  1089. 		opacity: 50%;
  1090. 	}
  1091.  
  1092. 	.form-control:focus,
  1093. 	.global-header-search.global-header-search
  1094. 		input:focus {
  1095. 		border-color: #bb86fc !important;
  1096. 		outline: 0;
  1097. 		box-shadow: 0 0 0 3px #3c2a51;
  1098. 	}
  1099.  
  1100. 	[data-hover-visible] .btn-primary:hover {
  1101. 		border-color: #bb86fc;
  1102. 		color: #fff;
  1103. 	}
  1104.  
  1105. 	#react-root
  1106. 		> div.header-block.explorer-header-block
  1107. 		> div.explorer-action-btn-toolbar
  1108. 		> div.explorer-action-btn-group
  1109. 		> div.upload-modal.captures-upload-modal.show
  1110. 		> div
  1111. 		> h1:nth-child(2) {
  1112. 		color: #d7d7d7;
  1113. 	}
  1114.  
  1115. 	.related-images .related-info {
  1116. 		padding-top: 3px;
  1117. 		padding-bottom: 33px;
  1118. 	}
  1119.  
  1120. 	.B9QQGIFrwoa05qnyZvI5 {
  1121. 		background-color: #bb86fc !important;
  1122. 		gap: 1px 0 !important;
  1123. 	}
  1124.  
  1125. 	#react-root
  1126. 		> div:nth-child(2)
  1127. 		> div
  1128. 		> div
  1129. 		> div
  1130. 		> div.image-infos
  1131. 		> div.related-info-box-component
  1132. 		> div,
  1133. 	.image-page .related-info:last-of-type {
  1134. 		padding-bottom: 1px;
  1135. 	}
  1136.  
  1137. 	.image-page hr {
  1138. 		border-top: 0 solid rgb(255 255 255 / 15%);
  1139. 	}
  1140.  
  1141. 	#react-root
  1142. 		> div:nth-child(2)
  1143. 		> div
  1144. 		> div
  1145. 		> div
  1146. 		> div.image-infos
  1147. 		> div.related-info-box-component
  1148. 		> div
  1149. 		> div.related-images-grid-view.related-info {
  1150. 		padding-top: 15px !important;
  1151. 		border-top: 5px solid #bb86fc !important;
  1152. 	}
  1153.  
  1154. 	#react-root
  1155. 		> div:nth-child(n)
  1156. 		> div
  1157. 		> div
  1158. 		> div
  1159. 		> div.image-infos
  1160. 		> div.edit-box-component
  1161. 		> div
  1162. 		> div
  1163. 		> div
  1164. 		> div.image-ocrinfo-component
  1165. 		> div
  1166. 		> div.ocr-desc-buttons
  1167. 		> div
  1168. 		> button,
  1169. 	#react-root
  1170. 		> div:nth-child(n)
  1171. 		> div
  1172. 		> div
  1173. 		> div
  1174. 		> div.image-infos
  1175. 		> div.edit-box-component
  1176. 		> div
  1177. 		> div
  1178. 		> div
  1179. 		> div.image-ocrinfo-component
  1180. 		> div
  1181. 		> div.ocr-desc-buttons
  1182. 		> div
  1183. 		> div
  1184. 		> button,
  1185. 	.pjZHyYN8MthPpYWZDS0d,
  1186. 	.vtVH6utAExSlC9aN2qwE {
  1187. 		border: 1px dashed #bb86fc !important;
  1188. 	}
  1189.  
  1190. 	input[name='new-tag']::placeholder {
  1191. 		color: #bb86fc;
  1192. 	}
  1193.  
  1194. 	#headlessui-dialog-overlay-5,
  1195. 	#react-root
  1196. 		> div.header-block.explorer-header-block
  1197. 		> div.explorer-action-btn-toolbar
  1198. 		> div.explorer-action-btn-group
  1199. 		> a,
  1200. 	.W9K8hRc2gk7SniSQJYi1,
  1201. 	.kuJ39tkCjATBXUZiuSKB {
  1202. 		position: fixed;
  1203. 		background-color: rgb(
  1204. 			255 255 255 / 9%
  1205. 		) !important;
  1206. 		inset: 0;
  1207. 	}
  1208.  
  1209. 	#react-root
  1210. 		> div
  1211. 		> div
  1212. 		> div
  1213. 		> div.transform-page-header
  1214. 		> div
  1215. 		> div
  1216. 		> button:nth-child(n)
  1217. 		> span {
  1218. 		line-height: 30px !important;
  1219. 		border-top: 1px solid #bb86fc !important;
  1220. 		border-bottom: 1px solid #bb86fc !important;
  1221. 	}
  1222.  
  1223. 	.add-to-collection-popover
  1224. 		.collection-operation-wrap
  1225. 		.collection-operation-add,
  1226. 	.add-to-collection-popover
  1227. 		.new-collection-form
  1228. 		.form-box
  1229. 		input::placeholder {
  1230. 		color: #bb86fc !important;
  1231. 	}
  1232.  
  1233. 	.image-box-component .image-viewer {
  1234. 		background: #fff0 !important;
  1235. 	}
  1236.  
  1237. 	.vknCRY3MsirgC3PJ9Zb8:hover,
  1238. 	.vknCRY3MsirgC3PJ9Zb8,
  1239. 	.JqijY3DG4HT1E5WfPcsL:hover,
  1240. 	.JqijY3DG4HT1E5WfPcsL,
  1241. 	.a5h6q3HOqElFBixS3dB_ {
  1242. 		opacity: 100% !important;
  1243. 		background: rgb(0 0 0 / 0%) !important;
  1244. 		transition: opacity ease-in-out 0.2s !important;
  1245. 	}
  1246. }
  1247.  
  1248. @-moz-document regexp("^https://(www\\.)?gyazo\\.com/.*/draw.*")
  1249. {
  1250. 	article,
  1251. 	aside,
  1252. 	div:not(
  1253. 			#react-root
  1254. 				> div:nth-child(n)
  1255. 				> div
  1256. 				> div
  1257. 				> main
  1258. 				> div
  1259. 				> div
  1260. 				> div
  1261. 				> div
  1262. 				> div:nth-child(2)
  1263. 				> section
  1264. 				> div:nth-child(n)
  1265. 				> a
  1266. 				> div,
  1267. 			.caBpUIyLTfNBwvxfTyDa,
  1268. 			div.k3nzGrC3hEubDzXyOg_r
  1269. 		),
  1270. 	footer,
  1271. 	h1,
  1272. 	h2,
  1273. 	h3,
  1274. 	h4,
  1275. 	h5,
  1276. 	h6,
  1277. 	header,
  1278. 	li,
  1279. 	main,
  1280. 	nav,
  1281. 	p,
  1282. 	section,
  1283. 	table,
  1284. 	td,
  1285. 	th,
  1286. 	ul {
  1287. 		background-color: #00000014 !important;
  1288. 		/* Example style */
  1289. 	}
  1290.  
  1291. 	.explorer-action-btn-default {
  1292. 		--bg-color: #fff;
  1293. 		--font-color: #4d4d4d;
  1294. 		--hover-bg-color: #f2f2f2;
  1295. 		--active-bg-color: #e6e6e6;
  1296. 		--border-color: #bb86fc;
  1297. 		--hover-border-color: #d9d9d9;
  1298. 		--divider-color: #bb86fc;
  1299. 	}
  1300.  
  1301. 	svg:not(:root) {
  1302. 		fill: #bb86fc !important;
  1303. 	}
  1304.  
  1305. 	*:hover > svg:not(:root) {
  1306. 		fill: #d7d7d7 !important;
  1307. 	}
  1308. }