☰

Gyazo.com Dark Mode

Gyazo Dark Mode (Purple Accents)

当前为 2025-01-09 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name         Gyazo.com Dark Mode
  3. @version      2.9
  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. 	.related-info-box-component
  12. 		> div
  13. 		> div.related-images-grid-view.related-info,
  14. 	.captured-info-value,
  15. 	.content-block,
  16. 	.edit-box-component,
  17. 	.footer-block,
  18. 	.grid-view,
  19. 	.grid-view-cell,
  20. 	.grid-view-cell-inner-image,
  21. 	.header-block,
  22. 	.image-desc-display.placeholder,
  23. 	.image-infos,
  24. 	.images-grid-view,
  25. 	.main-block-stage,
  26. 	.side-block-items,
  27. 	.sidebar-block {
  28. 		background-color: #121212 !important;
  29. 		color: #e0e0e0 !important;
  30. 	}
  31.  
  32. 	.edit-box-component,
  33. 	.image-box-component.zoomable > a,
  34. 	.image-box-component.zoomable > div,
  35. 	[class*='t30xm'],
  36. 	[class*='t30xm'] > div:nth-child(n),
  37. 	[class*='t30xm'] > div:nth-child(n) > span,
  38. 	[role*='tooltip'],
  39. 	div.image-infos,
  40. 	.image-box-component .image-close-btn-bg,
  41. 	.image-box-component .navigation {
  42. 		border: 4px solid #000 !important;
  43. 		background-color: #000 !important;
  44. 		color: #bb86fc !important;
  45. 	}
  46.  
  47. 	.content {
  48. 		background: black !important;
  49. 	}
  50.  
  51. 	.image-page.image-page-renewal
  52. 		.metadata
  53. 		.togglable-area.private {
  54. 		display: none;
  55. 	}
  56.  
  57. 	#popover > h3,
  58. 	.header-block.explorer-header-block,
  59. 	a,
  60. 	button,
  61. 	html,
  62. 	img,
  63. 	input,
  64. 	span {
  65. 		background-color: #121212 !important;
  66. 		color: #bb86fc !important;
  67. 	}
  68.  
  69. 	#global-dropdown-menu
  70. 		> div.popover-content
  71. 		> ul
  72. 		> li:first-child
  73. 		> a
  74. 		> span.account-item-check
  75. 		> svg,
  76. 	#global-dropdown-menu
  77. 		> div.popover-content
  78. 		> ul
  79. 		> li:nth-child(n)
  80. 		> a
  81. 		> svg
  82. 		> path:nth-child(n),
  83. 	#like > svg,
  84. 	#like > svg > path,
  85. 	#popover
  86. 		> div.popover-content
  87. 		> div
  88. 		> div
  89. 		> div
  90. 		> svg,
  91. 	.reblog-control > a > svg > path:nth-child(n),
  92. 	#react-root
  93. 		> div.header-block.explorer-header-block
  94. 		> div.explorer-action-btn-toolbar
  95. 		> div.explorer-action-btn-group
  96. 		> button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
  97. 		> svg,
  98. 	#react-root
  99. 		> div.header-block.explorer-header-block
  100. 		> div.explorer-action-btn-toolbar
  101. 		> div.explorer-action-btn-group
  102. 		> button
  103. 		> svg,
  104. 	#react-root
  105. 		> div.header-block.explorer-header-block
  106. 		> div.explorer-action-btn-toolbar
  107. 		> div.explorer-action-btn-group
  108. 		> div.upload-modal.captures-upload-modal.show
  109. 		> button
  110. 		> svg,
  111. 	#react-root
  112. 		> div.header-block.explorer-header-block
  113. 		> div.search-box
  114. 		> div
  115. 		> div.search-box-panel
  116. 		> div.search-history-list
  117. 		> div
  118. 		> div:nth-child(n)
  119. 		> button.switch-save
  120. 		> svg:hover,
  121. 	#react-root
  122. 		> div:nth-child(2)
  123. 		> div
  124. 		> div
  125. 		> div
  126. 		> div.image-infos
  127. 		> div.edit-box-component
  128. 		> div
  129. 		> div
  130. 		> div
  131. 		> div.image-ocrinfo-component
  132. 		> div
  133. 		> div.ocr-desc-buttons
  134. 		> div
  135. 		> div
  136. 		> button
  137. 		> svg,
  138. 	.toplevel-item-kamon > svg > path,
  139. 	.new-collection-field
  140. 		> span
  141. 		> span
  142. 		> svg
  143. 		> path,
  144. 	#react-root
  145. 		> div
  146. 		> div
  147. 		> div
  148. 		> div.transform-page-header
  149. 		> div
  150. 		> button
  151. 		> svg,
  152. 	#react-root
  153. 		> div
  154. 		> div
  155. 		> div
  156. 		> div.transform-page-header
  157. 		> div
  158. 		> div
  159. 		> button:nth-child(n)
  160. 		> svg
  161. 		> path,
  162. 	[id^='headlessui-menu-button-'] > svg > path,
  163. 	[id^='headlessui-menu-item-'] > svg,
  164. 	.pro .features h2,
  165. 	body
  166. 		> div.content
  167. 		> section.features-table
  168. 		> div
  169. 		> table:nth-child(n)
  170. 		> tbody:nth-child(3)
  171. 		> tr:nth-child(n)
  172. 		> td:nth-child(n)
  173. 		> div
  174. 		> kamon-lp,
  175. 	#direct-video-link-button > svg {
  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. 		margin-right: -8px;
  348. 		background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2FyZXQtZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTEuNzc3Mzk1MywxNC43MzAzOTUzIEMxMS41MjMzOTUzLDE0LjczMDM5NTMgMTEuMjY5Mzk1MywxNC42MzQzOTUzIDExLjA3NDM5NTMsMTQuNDQxMzk1MyBMNy4yOTczOTUyOSwxMC43MTEzOTUzIEM2LjkwNDM5NTI5LDEwLjMyMzM5NTMgNi45MDAzOTUyOSw5LjY5MDM5NTI5IDcuMjg4Mzk1MjksOS4yOTczOTUyOSBDNy42NzYzOTUyOSw4LjkwNDM5NTI5IDguMzEwMzk1MjksOC45MDAzOTUyOSA4LjcwMjM5NTI5LDkuMjg4Mzk1MjkgTDExLjc3NzM5NTMsMTIuMzI1Mzk1MyBMMTQuODUxMzk1Myw5LjI4ODM5NTI5IEMxNS4yNDUzOTUzLDguOTAwMzk1MjkgMTUuODc4Mzk1Myw4LjkwNDM5NTI5IDE2LjI2NjM5NTMsOS4yOTczOTUyOSBDMTYuNjU0Mzk1Myw5LjY5MDM5NTI5IDE2LjY1MDM5NTMsMTAuMzIzMzk1MyAxNi4yNTczOTUzLDEwLjcxMTM5NTMgTDEyLjQ4MDM5NTMsMTQuNDQxMzk1MyBDMTIuMjg1Mzk1MywxNC42MzQzOTUzIDEyLjAzMTM5NTMsMTQuNzMwMzk1MyAxMS43NzczOTUzLDE0LjczMDM5NTMiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJjYXJldC1kb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjQkI4NkZDIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0JCOThGQyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICA8L2c+Cjwvc3ZnPg==');
  349. 		width: 24px;
  350. 		height: 24px;
  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. 		background-color: #1e1e1e !important;
  365. 		color: #e0e0e0 !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. 		background-color: #121212;
  494. 		color: #e0e0e0;
  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. 		background-color: #1e1e1e !important;
  520. 		color: #e0e0e0 !important;
  521. 	}
  522.  
  523. 	#react-root
  524. 		> div:nth-child(n)
  525. 		> div
  526. 		> div
  527. 		> main
  528. 		> div
  529. 		> div:nth-child(n)
  530. 		> div
  531. 		> div
  532. 		> div:nth-child(n)
  533. 		> div
  534. 		> div
  535. 		> div.hover-layer {
  536. 		display: initial !important;
  537. 	}
  538.  
  539. 	#react-root
  540. 		> div:nth-child(2)
  541. 		> div
  542. 		> div
  543. 		> div
  544. 		> div.image-infos
  545. 		> div.related-info-box-component
  546. 		> div,
  547. 	.next-navigation,
  548. 	.prev-navigation,
  549. 	.edit-box-component > div > div > div,
  550. 	.container-close-date-images.related-info,
  551. 	.related-images-grid-view.related-info,
  552. 	#react-root
  553. 		> div:nth-child(n)
  554. 		> div
  555. 		> div
  556. 		> main
  557. 		> div
  558. 		> div:nth-child(n)
  559. 		> div
  560. 		> div
  561. 		> div:nth-child(n)
  562. 		> div
  563. 		> .card.medium-card.checkable:hover,
  564. 	body.download .hero .download-btn {
  565. 		opacity: 100%;
  566. 		box-shadow:
  567. 			0 0 1px 1px #bb86fc,
  568. 			0 0 1px #bb86fc;
  569. 	}
  570.  
  571. 	body.download .hero .download-btn:hover {
  572. 		opacity: 100%;
  573. 		box-shadow:
  574. 			0 0 1px 1px #fc86af,
  575. 			0 0 1px #fc86bb !important;
  576. 		background-color: #fc86bb !important;
  577. 		color: #000 !important;
  578. 	}
  579.  
  580. 	#react-root
  581. 		> div:nth-child(n)
  582. 		> div
  583. 		> div
  584. 		> main
  585. 		> div
  586. 		> div:nth-child(n)
  587. 		> div
  588. 		> div
  589. 		> div:nth-child(n)
  590. 		> div
  591. 		> div {
  592. 		box-shadow: 0 1px 0 0 #bb86fc;
  593. 	}
  594.  
  595. 	.grid-view
  596. 		.card.medium-card
  597. 		.hover-layer:hover {
  598. 		position: absolute;
  599. 		opacity: 0%;
  600. 		mix-blend-mode: multiply;
  601. 		transition: opacity 0.15s;
  602. 		inset: 0;
  603. 		border: 5px solid #fff;
  604. 		border-bottom: 32px solid #fff;
  605. 		background: rgb(58 66 79 / 40%);
  606. 	}
  607.  
  608. 	#metadata-is-public-dropdown,
  609. 	#metadata-is-public-dropdown > span,
  610. 	textarea {
  611. 		border: none;
  612. 		background-color: #000 !important;
  613. 		color: #bb86fc;
  614. 	}
  615.  
  616. 	#search-box-input:hover {
  617. 		border-bottom: 1px solid #000;
  618. 	}
  619.  
  620. 	#popover > h3 {
  621. 		border-bottom: 3px solid #000;
  622. 	}
  623.  
  624. 	.faq-list .faq-list-title {
  625. 		background: linear-gradient(
  626. 			to bottom,
  627. 			#121212 calc(100% - 3px),
  628. 			rgb(255 255 255 / 0%) 100%
  629. 		);
  630. 		color: #bb86fc !important;
  631. 	}
  632.  
  633. 	#conclusion > div > div > h2,
  634. 	#faq
  635. 		> div
  636. 		> div.faq.static-page-faq
  637. 		> ul
  638. 		> li:nth-child(n)
  639. 		> div.expand
  640. 		> i,
  641. 	#features-ai,
  642. 	#features-clean-share,
  643. 	#features-edit,
  644. 	#features-unlimited,
  645. 	#features-video-message,
  646. 	#react-root
  647. 		> div.header-block.explorer-header-block
  648. 		> div.search-box
  649. 		> div
  650. 		> div.search-box-panel
  651. 		> div.search-history-list
  652. 		> div
  653. 		> div:nth-child(n)
  654. 		> a
  655. 		> div,
  656. 	#search-box-input::placeholder,
  657. 	#section-features
  658. 		> div
  659. 		> div
  660. 		> div:nth-child(n)
  661. 		> div
  662. 		> i,
  663. 	#section-features > div > h2,
  664. 	.closing > div > h2,
  665. 	.faq
  666. 		> div
  667. 		> div
  668. 		> ul
  669. 		> li:nth-child(n)
  670. 		> div.expand
  671. 		> i,
  672. 	.pricing > div > h2,
  673. 	.testimonials
  674. 		> div
  675. 		> div
  676. 		> div
  677. 		> div:nth-child(n)
  678. 		> blockquote
  679. 		> p,
  680. 	.testimonials
  681. 		> div
  682. 		> div
  683. 		> div
  684. 		> div:nth-child(n)
  685. 		> div
  686. 		> h5,
  687. 	.testimonials > div > div > h2,
  688. 	.tutorial > div > h3,
  689. 	.usecases > div > div:nth-child(n) > h3,
  690. 	.usecases > div > h2 {
  691. 		color: #bb86fc;
  692. 	}
  693.  
  694. 	.testimonials .card-footer::before,
  695. 	body
  696. 		> div.content
  697. 		> section.testimonials
  698. 		> div
  699. 		> div
  700. 		> div
  701. 		> div:nth-child(n)
  702. 		> div
  703. 		> div,
  704. 	.page-content .indent-mark .dot {
  705. 		background-color: #bb86fc !important;
  706. 		color: #bb86fc !important;
  707. 	}
  708.  
  709. 	a:-webkit-any-link {
  710. 		cursor: pointer !important;
  711. 		color: -webkit-link !important;
  712. 		color: #5686ffeb !important;
  713. 		text-decoration: underline !important;
  714. 	}
  715.  
  716. 	#conclusion > div > button,
  717. 	.transform-page-header > div > button,
  718. 	.transform-page-header
  719. 		> div
  720. 		> div
  721. 		> button:nth-child(n),
  722. 	.Xpov4pPcafwfUVkzW7Gw,
  723. 	.pricing-box-default,
  724. 	.box.small-team {
  725. 		border: 1px solid #bb86fc;
  726. 	}
  727.  
  728. 	.faq-list .faq-list-bottom {
  729. 		background: #f000;
  730. 	}
  731.  
  732. 	#global-dropdown-menu
  733. 		> div.popover-content
  734. 		> ul
  735. 		> li:nth-child(13)
  736. 		> button
  737. 		> svg
  738. 		> path:nth-child(n) {
  739. 		fill: #f00;
  740. 	}
  741.  
  742. 	.saved-search-header {
  743. 		color: #bb86fc;
  744. 		font-size: 16px;
  745. 		text-decoration: underline;
  746. 	}
  747.  
  748. 	::-webkit-scrollbar {
  749. 		width: 12px;
  750. 	}
  751.  
  752. 	::-webkit-scrollbar-track {
  753. 		background: #bb86fc;
  754. 	}
  755.  
  756. 	::-webkit-scrollbar-thumb {
  757. 		border: 3px solid #121212;
  758. 		border-radius: 10px;
  759. 		background-color: #121212;
  760. 	}
  761.  
  762. 	* {
  763. 		scrollbar-color: #bb86fc #000;
  764. 		scrollbar-width: thin;
  765. 	}
  766.  
  767. 	.global-dropdown-menu-divider {
  768. 		background-color: #000;
  769. 	}
  770.  
  771. 	#conclusion,
  772. 	#faq,
  773. 	#faq
  774. 		> div
  775. 		> div.faq.static-page-faq
  776. 		> ul
  777. 		> li:nth-child(n):hover,
  778. 	body
  779. 		> div.content
  780. 		> div.static-page-nav-container.light
  781. 		> nav,
  782. 	body > div.content > section.testimonials,
  783. 	body.pricing .users,
  784. 	body {
  785. 		background-color: #121212;
  786. 	}
  787.  
  788. 	.images-after-origin > section {
  789. 		background-color: #121212 !important;
  790. 	}
  791.  
  792. 	body
  793. 		> div.content
  794. 		> div.static-page-nav-container.light
  795. 		> nav
  796. 		> div
  797. 		> div
  798. 		> a
  799. 		> div {
  800. 		background-image: url('https://i.gyazo.com/3b48aa49e16ccde7bf0f4903269a9bc0.png');
  801. 		width: 48px;
  802. 		height: 48px;
  803. 		color: red !important;
  804. 	}
  805.  
  806. 	body > div.content > section.faq,
  807. 	body
  808. 		> div.content
  809. 		> section.hero-header.hidden-xs,
  810. 	body > div.content > section.hero.hidden-xs,
  811. 	body > div.content > section.testimonials {
  812. 		background-image: linear-gradient(
  813. 			80deg,
  814. 			#000 2%,
  815. 			#bb86fc 30%,
  816. 			#121212
  817. 		);
  818. 	}
  819.  
  820. 	.dark > nav > div,
  821. 	.dark > nav > div > div,
  822. 	.container {
  823. 		border-radius: 20px;
  824. 		border-bottom-right-radius: 0 !important;
  825. 		border-bottom-left-radius: 0 !important;
  826. 	}
  827.  
  828. 	#conclusion > div,
  829. 	.faq > div,
  830. 	.hero-header.hidden-xs > div,
  831. 	.hero-header.hidden-xs > div > div,
  832. 	.testimonials > div,
  833. 	.usecase > div {
  834. 		border-radius: 20px !important;
  835. 	}
  836.  
  837. 	#faq
  838. 		> div
  839. 		> div.faq.static-page-faq
  840. 		> ul
  841. 		> li:nth-child(n)
  842. 		> div.expand,
  843. 	.pricing-table-box-pro,
  844. 	body
  845. 		> div.content
  846. 		> section.faq
  847. 		> div
  848. 		> div
  849. 		> ul
  850. 		> li:nth-child(n)
  851. 		> div.expand {
  852. 		border: 3px solid #bb86fc;
  853. 	}
  854.  
  855. 	#faq
  856. 		> div
  857. 		> div.faq.static-page-faq
  858. 		> ul
  859. 		> li:nth-child(n),
  860. 	#react-root
  861. 		> div:nth-child(n)
  862. 		> div
  863. 		> div
  864. 		> div
  865. 		> div.image-infos
  866. 		> div.related-info-box-component
  867. 		> div
  868. 		> div.related-images-grid-view.related-info
  869. 		> div
  870. 		> section
  871. 		> div:nth-child(n)
  872. 		> a,
  873. 	body
  874. 		> div.content
  875. 		> section.faq
  876. 		> div
  877. 		> div
  878. 		> ul
  879. 		> li:nth-child(n) {
  880. 		border-top: 1px solid #bb86fc;
  881. 	}
  882.  
  883. 	.btn-default:hover,
  884. 	.btn-primary:hover,
  885. 	.btn-secondary:hover,
  886. 	.hero-header-text > p:nth-child(n) > a:hover,
  887. 	.enterprise-plan,
  888. 	.small-team,
  889. 	.teams-pricing > div > div:nth-child(2) > div {
  890. 		border-color: #bb86fc;
  891. 	}
  892.  
  893. 	.btn-primary,
  894. 	.btn-secondary {
  895. 		border-color: #3c2a51;
  896. 	}
  897.  
  898. 	.teams-pricing
  899. 		.pricing-toggle-switch-container {
  900. 		display: inline-block;
  901. 		position: relative;
  902. 		cursor: pointer;
  903. 		margin-top: 38px;
  904. 		border: 1px solid #d7d7d7;
  905. 		border-radius: 10px;
  906. 		width: 300px;
  907. 		height: 60px;
  908. 		text-align: center;
  909. 	}
  910.  
  911. 	.search-box .search-box-input-wrap input:focus,
  912. 	.static-page-faq .bottom {
  913. 		border-bottom: 1px solid #bb86fc;
  914. 	}
  915.  
  916. 	.static-page-faq li:hover {
  917. 		cursor: pointer;
  918. 		background: #3c2a51;
  919. 	}
  920.  
  921. 	.dropdown-menu,
  922. 	.like_toggle {
  923. 		background-color: #bb86fc;
  924. 	}
  925.  
  926. 	.dropdown-header {
  927. 		color: #fff;
  928. 	}
  929.  
  930. 	#like > svg {
  931. 		fill: #bb86fc !important;
  932. 	}
  933.  
  934. 	.table > tbody > tr > td,
  935. 	.table > tbody > tr > th,
  936. 	.table > tfoot > tr > td,
  937. 	.table > tfoot > tr > th,
  938. 	.table > thead > tr > td,
  939. 	.table > thead > tr > th {
  940. 		vertical-align: top;
  941. 		border-top: 1px solid #bb86fc;
  942. 		padding: 8px;
  943. 		line-height: 1.75;
  944. 	}
  945.  
  946. 	.table > tbody + tbody {
  947. 		border-top: 2px solid #bb86fc;
  948. 	}
  949.  
  950. 	.table > thead > tr > th {
  951. 		vertical-align: bottom;
  952. 		border-bottom: 2px solid #bb86fc;
  953. 	}
  954.  
  955. 	.side-block
  956. 		.side-block-items
  957. 		.toplevel-item-active {
  958. 		background: #121212;
  959. 		pointer-events: none;
  960. 	}
  961.  
  962. 	#react-root
  963. 		> div:nth-child(2)
  964. 		> div
  965. 		> div
  966. 		> aside
  967. 		> div
  968. 		> div
  969. 		> ul
  970. 		> li.toplevel-item.collection-list
  971. 		> ul:hover
  972. 		> li:nth-child(n)
  973. 		> div
  974. 		> button
  975. 		> svg
  976. 		> path,
  977. 	#react-root
  978. 		> div:nth-child(n)
  979. 		> div
  980. 		> div
  981. 		> div
  982. 		> div.image-box-component.zoomable
  983. 		> div.navigation.next-navigation
  984. 		> svg
  985. 		> path,
  986. 	#react-root
  987. 		> div:nth-child(n)
  988. 		> div
  989. 		> div
  990. 		> div
  991. 		> div.image-box-component.zoomable
  992. 		> div.navigation.prev-navigation
  993. 		> svg
  994. 		> path,
  995. 	.search-history-list
  996. 		.histories
  997. 		.history-row
  998. 		button.switch-save
  999. 		.kamon {
  1000. 		fill: #bb86fc;
  1001. 	}
  1002.  
  1003. 	.search-history-list
  1004. 		.histories
  1005. 		.history-row
  1006. 		button.switch-save:hover
  1007. 		.kamon,
  1008. 	.search-history-list
  1009. 		.histories
  1010. 		.history-row:hover
  1011. 		button.switch-save
  1012. 		.kamon {
  1013. 		fill: #fff;
  1014. 	}
  1015.  
  1016. 	.side-block-items .collection-item .file-thumb,
  1017. 	.side-block-items .collection-item .thumb {
  1018. 		box-shadow: 0 0 0 1px #bb86fc;
  1019. 		border: 1px solid #bb86fc;
  1020. 	}
  1021.  
  1022. 	.side-block-items .collection-item > a {
  1023. 		border-radius: 5px;
  1024. 	}
  1025.  
  1026. 	.side-block-items .collection-item:focus-within,
  1027. 	.side-block-items .collection-item:hover {
  1028. 		background: #bb86fc;
  1029. 	}
  1030.  
  1031. 	#react-root
  1032. 		> div.header-block.explorer-header-block
  1033. 		> a {
  1034. 		border-bottom: 10px;
  1035. 		background-color: #12121200 !important;
  1036. 	}
  1037.  
  1038. 	#popover
  1039. 		> div.popover-content
  1040. 		> ul
  1041. 		> li:nth-child(n):hover,
  1042. 	.global-logo-icon:hover {
  1043. 		opacity: 50%;
  1044. 	}
  1045.  
  1046. 	.form-control:focus,
  1047. 	.global-header-search.global-header-search
  1048. 		input:focus {
  1049. 		outline: 0;
  1050. 		box-shadow: 0 0 0 3px #3c2a51;
  1051. 		border-color: #bb86fc !important;
  1052. 	}
  1053.  
  1054. 	[data-hover-visible] .btn-primary:hover {
  1055. 		border-color: #bb86fc;
  1056. 		color: #fff;
  1057. 	}
  1058.  
  1059. 	#react-root
  1060. 		> div.header-block.explorer-header-block
  1061. 		> div.explorer-action-btn-toolbar
  1062. 		> div.explorer-action-btn-group
  1063. 		> div.upload-modal.captures-upload-modal.show
  1064. 		> div
  1065. 		> h1:nth-child(2) {
  1066. 		color: #d7d7d7;
  1067. 	}
  1068.  
  1069. 	.related-images .related-info {
  1070. 		padding-top: 3px;
  1071. 		padding-bottom: 33px;
  1072. 	}
  1073.  
  1074. 	.B9QQGIFrwoa05qnyZvI5 {
  1075. 		gap: 1px 0 !important;
  1076. 		background-color: #bb86fc !important;
  1077. 	}
  1078.  
  1079. 	.related-pages
  1080. 		.related-pages-body
  1081. 		ul
  1082. 		> li
  1083. 		> a
  1084. 		.icon {
  1085. 		background-image: url('https://i.gyazo.com/03452dc72b4111fa1641b9fe7c53ef39.png') !important;
  1086. 		/* fill: white !important; */
  1087. 	}
  1088.  
  1089. 	#react-root
  1090. 		> div:nth-child(2)
  1091. 		> div
  1092. 		> div
  1093. 		> div
  1094. 		> div.image-infos
  1095. 		> div.related-info-box-component
  1096. 		> div,
  1097. 	.image-page .related-info:last-of-type {
  1098. 		padding-bottom: 1px;
  1099. 	}
  1100.  
  1101. 	.image-page hr {
  1102. 		border-top: 0 solid rgb(255 255 255 / 15%);
  1103. 	}
  1104.  
  1105. 	#react-root
  1106. 		> div:nth-child(2)
  1107. 		> div
  1108. 		> div
  1109. 		> div
  1110. 		> div.image-infos
  1111. 		> div.related-info-box-component
  1112. 		> div
  1113. 		> div.related-images-grid-view.related-info {
  1114. 		border-top: 5px solid #bb86fc !important;
  1115. 		padding-top: 15px !important;
  1116. 	}
  1117.  
  1118. 	#react-root
  1119. 		> div:nth-child(n)
  1120. 		> div
  1121. 		> div
  1122. 		> div
  1123. 		> div.image-infos
  1124. 		> div.edit-box-component
  1125. 		> div
  1126. 		> div
  1127. 		> div
  1128. 		> div.image-ocrinfo-component
  1129. 		> div
  1130. 		> div.ocr-desc-buttons
  1131. 		> div
  1132. 		> button,
  1133. 	#react-root
  1134. 		> div:nth-child(n)
  1135. 		> div
  1136. 		> div
  1137. 		> div
  1138. 		> div.image-infos
  1139. 		> div.edit-box-component
  1140. 		> div
  1141. 		> div
  1142. 		> div
  1143. 		> div.image-ocrinfo-component
  1144. 		> div
  1145. 		> div.ocr-desc-buttons
  1146. 		> div
  1147. 		> div
  1148. 		> button,
  1149. 	.pjZHyYN8MthPpYWZDS0d,
  1150. 	.vtVH6utAExSlC9aN2qwE {
  1151. 		border: 1px dashed #bb86fc !important;
  1152. 	}
  1153.  
  1154. 	input[name='new-tag']::placeholder {
  1155. 		color: #bb86fc;
  1156. 	}
  1157.  
  1158. 	#headlessui-dialog-overlay-5,
  1159. 	#react-root
  1160. 		> div.header-block.explorer-header-block
  1161. 		> div.explorer-action-btn-toolbar
  1162. 		> div.explorer-action-btn-group
  1163. 		> a,
  1164. 	.W9K8hRc2gk7SniSQJYi1,
  1165. 	.kuJ39tkCjATBXUZiuSKB {
  1166. 		position: fixed;
  1167. 		inset: 0;
  1168. 		background-color: rgb(
  1169. 			255 255 255 / 9%
  1170. 		) !important;
  1171. 	}
  1172.  
  1173. 	#react-root
  1174. 		> div
  1175. 		> div
  1176. 		> div
  1177. 		> div.transform-page-header
  1178. 		> div
  1179. 		> div
  1180. 		> button:nth-child(n)
  1181. 		> span {
  1182. 		border-top: 1px solid #bb86fc !important;
  1183. 		border-bottom: 1px solid #bb86fc !important;
  1184. 		line-height: 30px !important;
  1185. 	}
  1186.  
  1187. 	.add-to-collection-popover
  1188. 		.collection-operation-wrap
  1189. 		.collection-operation-add,
  1190. 	.add-to-collection-popover
  1191. 		.new-collection-form
  1192. 		.form-box
  1193. 		input::placeholder {
  1194. 		color: #bb86fc !important;
  1195. 	}
  1196.  
  1197. 	.image-box-component .image-viewer {
  1198. 		background: #fff0 !important;
  1199. 	}
  1200.  
  1201. 	.vknCRY3MsirgC3PJ9Zb8:hover,
  1202. 	.vknCRY3MsirgC3PJ9Zb8,
  1203. 	.JqijY3DG4HT1E5WfPcsL:hover,
  1204. 	.JqijY3DG4HT1E5WfPcsL,
  1205. 	.a5h6q3HOqElFBixS3dB_ {
  1206. 		opacity: 100% !important;
  1207. 		transition: opacity ease-in-out 0.2s !important;
  1208. 		background: rgb(0 0 0 / 0%) !important;
  1209. 	}
  1210. }
  1211.  
  1212. @-moz-document regexp("^https://(www\\.)?gyazo\\.com/.*/draw.*")
  1213. {
  1214. 	article,
  1215. 	aside,
  1216. 	div:not(
  1217. 			#react-root
  1218. 				> div:nth-child(n)
  1219. 				> div
  1220. 				> div
  1221. 				> main
  1222. 				> div
  1223. 				> div
  1224. 				> div
  1225. 				> div
  1226. 				> div:nth-child(2)
  1227. 				> section
  1228. 				> div:nth-child(n)
  1229. 				> a
  1230. 				> div,
  1231. 			.caBpUIyLTfNBwvxfTyDa,
  1232. 			div.k3nzGrC3hEubDzXyOg_r
  1233. 		),
  1234. 	footer,
  1235. 	h1,
  1236. 	h2,
  1237. 	h3,
  1238. 	h4,
  1239. 	h5,
  1240. 	h6,
  1241. 	header,
  1242. 	li,
  1243. 	main,
  1244. 	nav,
  1245. 	p,
  1246. 	section,
  1247. 	table,
  1248. 	td,
  1249. 	th,
  1250. 	ul {
  1251. 		background-color: #00000014 !important;
  1252. 		/* Example style */
  1253. 	}
  1254.  
  1255. 	.explorer-action-btn-default {
  1256. 		--bg-color: #fff;
  1257. 		--font-color: #4d4d4d;
  1258. 		--hover-bg-color: #f2f2f2;
  1259. 		--active-bg-color: #e6e6e6;
  1260. 		--border-color: #bb86fc;
  1261. 		--hover-border-color: #d9d9d9;
  1262. 		--divider-color: #bb86fc;
  1263. 	}
  1264.  
  1265. 	svg:not(:root) {
  1266. 		fill: #bb86fc !important;
  1267. 	}
  1268.  
  1269. 	*:hover > svg:not(:root) {
  1270. 		fill: #d7d7d7 !important;
  1271. 	}
  1272. }