☰

Gyazo.com - Dark Mode [Customizable]

Gyazo Dark Mode (Customizable Color - Defaults to Purple Accents)

目前为 2025-02-05 提交的版本。查看 最新版本。

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