☰

Gyazo.com - Dark Mode [Customizable]

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

目前為 2025-01-30 提交的版本，檢視 最新版本。

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