☰

Gyazo.com - Dark Mode [Customizable]

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址