☰

Gyazo.com Dark Mode

Gyazo Dark Mode (Purple Accents)

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

  1. /* ==UserStyle==
  2. @name         Gyazo.com Dark Mode
  3. @version      20241127.00.57
  4. @namespace    typpi.online
  5. @description  Gyazo Dark Mode (Purple Accents)
  6. @author       Nick2bad4u
  7. @license      UnLicense
  8. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  9. ==/UserStyle== */
  10. @-moz-document domain("gyazo.com") {
  11.   /* Additional elements */
  12.   .header-block,
  13.   .footer-block,
  14.   .content-block,
  15.   .sidebar-block,
  16.   .side-block-items,
  17.   .images-grid-view,
  18.   .grid-view,
  19.   .grid-view-cell,
  20.   .grid-view-cell-inner-image,
  21.   .main-block-stage,
  22.   .image-infos,
  23.   .captured-info-value,
  24.   .edit-box-component,
  25.   .image-desc-display.placeholder,
  26.   #react-root
  27.     > div:nth-child(2)
  28.     > div
  29.     > div
  30.     > div
  31.     > div.image-infos
  32.     > div.related-info-box-component
  33.     > div
  34.     > div.related-images-grid-view.related-info {
  35.     background-color: #121212 !important;
  36.     color: #e0e0e0 !important;
  37.   }
  38.  
  39.   /* Links, buttons, inputs, images */
  40.   a,
  41.   span,
  42.   button,
  43.   input,
  44.   img,
  45.   .header-block.explorer-header-block {
  46.     color: #bb86fc !important;
  47.     background-color: #121212 !important;
  48.   }
  49.  
  50.   a > span.toplevel-item-kamon > svg > path,
  51.   #react-root
  52.     > div:nth-child(2)
  53.     > div
  54.     > div
  55.     > aside
  56.     > div
  57.     > div
  58.     > ul
  59.     > li.new-collection-field
  60.     > span
  61.     > span
  62.     > svg
  63.     > path {
  64.     filter: invert(1);
  65.   }
  66.  
  67.   [id^='headlessui-menu-item-'] > svg,
  68.   [id^='headlessui-menu-button-'] > svg > path,
  69.   #react-root
  70.     > div.header-block.explorer-header-block
  71.     > div.explorer-action-btn-toolbar
  72.     > div.explorer-action-btn-group
  73.     > button
  74.     > svg,
  75.   #react-root
  76.     > div:nth-child(2)
  77.     > div
  78.     > div
  79.     > div
  80.     > div.image-infos
  81.     > div.edit-box-component
  82.     > div
  83.     > div
  84.     > div
  85.     > div.image-ocrinfo-component
  86.     > div
  87.     > div.ocr-desc-buttons
  88.     > div
  89.     > div
  90.     > button
  91.     > svg,
  92.   #react-root
  93.     > div.header-block.explorer-header-block
  94.     > div.explorer-action-btn-toolbar
  95.     > div.explorer-action-btn-group
  96.     > button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
  97.     > svg,
  98.   #global-dropdown-menu
  99.     > div.popover-content
  100.     > ul
  101.     > li:nth-child(1)
  102.     > a
  103.     > span.account-item-check
  104.     > svg {
  105.     fill: #bb86fc;
  106.   }
  107.  
  108.   [id^='headlessui-menu-item-'] > svg:hover,
  109.   [id^='headlessui-menu-button-'] > svg > path:hover,
  110.   #react-root
  111.     > div.header-block.explorer-header-block
  112.     > div.explorer-action-btn-toolbar
  113.     > div.explorer-action-btn-group
  114.     > button
  115.     > svg:hover,
  116.   #react-root
  117.     > div:nth-child(2)
  118.     > div
  119.     > div
  120.     > div
  121.     > div.image-infos
  122.     > div.edit-box-component
  123.     > div
  124.     > div
  125.     > div
  126.     > div.image-ocrinfo-component
  127.     > div
  128.     > div.ocr-desc-buttons
  129.     > div
  130.     > div
  131.     > button
  132.     > svg:hover,
  133.   #react-root
  134.     > div.header-block.explorer-header-block
  135.     > div.explorer-action-btn-toolbar
  136.     > div.explorer-action-btn-group
  137.     > button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
  138.     > svg:hover,
  139.   #global-dropdown-menu
  140.     > div.popover-content
  141.     > ul
  142.     > li:nth-child(1)
  143.     > a
  144.     > span.account-item-check
  145.     > svg:hover {
  146.     fill: white;
  147.   }
  148.  
  149.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(13) > button > svg > path,
  150.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > svg > path,
  151.   #react-root
  152.     > div:nth-child(2)
  153.     > div
  154.     > div
  155.     > aside
  156.     > div
  157.     > div
  158.     > ul
  159.     > li.toplevel-item.collection-list
  160.     > ul
  161.     > li:nth-child(n)
  162.     > div
  163.     > button
  164.     > svg {
  165.     fill: white;
  166.   }
  167.  
  168.   #react-root
  169.     > div:nth-child(n)
  170.     > div
  171.     > div
  172.     > aside
  173.     > div
  174.     > div
  175.     > ul
  176.     > li.toplevel-item.captures.toplevel-item-active
  177.     > a
  178.     > span.toplevel-item-kamon
  179.     > svg,
  180.   #react-root
  181.     > div:nth-child(2)
  182.     > div
  183.     > div
  184.     > aside
  185.     > div
  186.     > div
  187.     > ul
  188.     > li.toplevel-item.tags
  189.     > a
  190.     > span.toplevel-item-kamon
  191.     > svg,
  192.   #react-root
  193.     > div:nth-child(2)
  194.     > div
  195.     > div
  196.     > aside
  197.     > div
  198.     > div
  199.     > ul
  200.     > li.toplevel-item.visits
  201.     > a
  202.     > span.toplevel-item-kamon
  203.     > svg,
  204.   #react-root
  205.     > div:nth-child(2)
  206.     > div
  207.     > div
  208.     > aside
  209.     > div
  210.     > div
  211.     > ul
  212.     > li.new-collection-field
  213.     > span
  214.     > span
  215.     > svg {
  216.     fill: Black;
  217.   }
  218.  
  219.   #react-root > div.header-block.explorer-header-block > div.explorer-action-btn-toolbar > a {
  220.     background-color: #1212126b !important;
  221.   }
  222.  
  223.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > span:hover,
  224.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a:hover,
  225.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(13) > button > span:hover {
  226.     color: white !important;
  227.   }
  228.  
  229.   .images-show .bottom.interactive-popover > .arrow:after,
  230.   .popover.bottom > .arrow:after {
  231.     border-bottom-color: #bb86fc;
  232.   }
  233.  
  234.   .explorer-action-btn.dropdown-toggle::after {
  235.     content: '';
  236.     margin-right: -8px;
  237.     width: 24px;
  238.     height: 24px;
  239.     display: inline-block;
  240.     background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2FyZXQtZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTEuNzc3Mzk1MywxNC43MzAzOTUzIEMxMS41MjMzOTUzLDE0LjczMDM5NTMgMTEuMjY5Mzk1MywxNC42MzQzOTUzIDExLjA3NDM5NTMsMTQuNDQxMzk1MyBMNy4yOTczOTUyOSwxMC43MTEzOTUzIEM2LjkwNDM5NTI5LDEwLjMyMzM5NTMgNi45MDAzOTUyOSw5LjY5MDM5NTI5IDcuMjg4Mzk1MjksOS4yOTczOTUyOSBDNy42NzYzOTUyOSw4LjkwNDM5NTI5IDguMzEwMzk1MjksOC45MDAzOTUyOSA4LjcwMjM5NTI5LDkuMjg4Mzk1MjkgTDExLjc3NzM5NTMsMTIuMzI1Mzk1MyBMMTQuODUxMzk1Myw5LjI4ODM5NTI5IEMxNS4yNDUzOTUzLDguOTAwMzk1MjkgMTUuODc4Mzk1Myw4LjkwNDM5NTI5IDE2LjI2NjM5NTMsOS4yOTczOTUyOSBDMTYuNjU0Mzk1Myw5LjY5MDM5NTI5IDE2LjY1MDM5NTMsMTAuMzIzMzk1MyAxNi4yNTczOTUzLDEwLjcxMTM5NTMgTDEyLjQ4MDM5NTMsMTQuNDQxMzk1MyBDMTIuMjg1Mzk1MywxNC42MzQzOTUzIDEyLjAzMTM5NTMsMTQuNzMwMzk1MyAxMS43NzczOTUzLDE0LjczMDM5NTMiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJjYXJldC1kb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjQkI4NkZDIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0JCOThGQyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICA8L2c+Cjwvc3ZnPg==);
  241.   }
  242.  
  243.   /* Form controls, grid cells */
  244.   .button,
  245.   .input,
  246.   .form-control,
  247.   .grid-cell,
  248.   .related-images-grid-view.related-info {
  249.     background-color: #1e1e1e !important;
  250.     color: #e0e0e0 !important;
  251.     border: 1px solid #333 !important;
  252.   }
  253.  
  254.   /* Header and footer borders */
  255.   .header-block,
  256.   .footer-block {
  257.     border-bottom: 1px solid #333 !important;
  258.   }
  259.  
  260.   /* Sidebar border */
  261.   .sidebar-block {
  262.     border-right: 1px solid #333 !important;
  263.   }
  264.  
  265.   /* Card styling */
  266.   .card.medium-card {
  267.     background-color: #1e1e1e !important;
  268.     color: #bb86fc !important;
  269.     border: 1px solid #333 !important;
  270.   }
  271.  
  272.   /* Metadata and related info */
  273.   .metadata,
  274.   .images-after-origin,
  275.   .container-close-date-images.related-info,
  276.   .related-info-box-component,
  277.   .testing-swap-image-container .metadata-baseinfo {
  278.     color: #bb86fc !important;
  279.   }
  280.  
  281.   #react-root
  282.     > div:nth-child(n)
  283.     > div
  284.     > div
  285.     > div
  286.     > div.image-infos
  287.     > div.edit-box-component
  288.     > div
  289.     > div
  290.     > div
  291.     > div.metadata-description {
  292.     padding: 10px;
  293.   }
  294.  
  295.   #react-root
  296.     > div:nth-child(2)
  297.     > div
  298.     > div
  299.     > div
  300.     > div.image-infos
  301.     > div.edit-box-component
  302.     > div
  303.     > div
  304.     > div
  305.     > div.captured-info,
  306.   #react-root
  307.     > div:nth-child(2)
  308.     > div
  309.     > div
  310.     > div
  311.     > div.image-infos
  312.     > div.edit-box-component
  313.     > div
  314.     > div
  315.     > div
  316.     > div.image-ocrinfo-component
  317.     > div
  318.     > div.ocr-icon-block
  319.     > div,
  320.   #react-root
  321.     > div:nth-child(n)
  322.     > div
  323.     > div
  324.     > div
  325.     > div.image-infos
  326.     > div.related-info-box-component
  327.     > div
  328.     > div.container-close-date-images.related-info
  329.     > div.section-headline
  330.     > a
  331.     > span
  332.     > span:nth-child(1),
  333.   #react-root
  334.     > div:nth-child(2)
  335.     > div
  336.     > div
  337.     > div
  338.     > div.image-infos
  339.     > div.related-info-box-component
  340.     > div
  341.     > div.related-images-grid-view.related-info
  342.     > div
  343.     > div
  344.     > span
  345.     > span:nth-child(1) {
  346.     margin-left: 10px;
  347.   }
  348.  
  349.   /* Additional elements */
  350.   div:not(
  351.       #react-root
  352.         > div:nth-child(n)
  353.         > div
  354.         > div
  355.         > main
  356.         > div
  357.         > div
  358.         > div
  359.         > div
  360.         > div:nth-child(2)
  361.         > section
  362.         > div:nth-child(n)
  363.         > a
  364.         > div
  365.     ):not(.caBpUIyLTfNBwvxfTyDa):not(div.k3nzGrC3hEubDzXyOg_r),
  366.   p,
  367.   h1,
  368.   h2,
  369.   h3,
  370.   h4,
  371.   h5,
  372.   h6,
  373.   ul,
  374.   li,
  375.   table,
  376.   th,
  377.   td,
  378.   section,
  379.   article,
  380.   aside,
  381.   nav,
  382.   header,
  383.   footer,
  384.   main {
  385.     background-color: #121212;
  386.     color: #e0e0e0;
  387.   }
  388.  
  389.   #react-root
  390.     > div:nth-child(n)
  391.     > div
  392.     > div
  393.     > main
  394.     > div
  395.     > div
  396.     > div
  397.     > div
  398.     > div:nth-child(n)
  399.     > section
  400.     > div:nth-child(n)
  401.     > div {
  402.     background: #0000 !important;
  403.   }
  404.  
  405.   .k3nzGrC3hEubDzXyOg_r {
  406.     overflow: unset;
  407.   }
  408.  
  409.   .modal,
  410.   .modal-content {
  411.     background-color: #1e1e1e !important;
  412.     color: #e0e0e0 !important;
  413.     border: 1px solid #333 !important;
  414.   }
  415.  
  416.   .tooltip,
  417.   .popup {
  418.     background-color: #1e1e1e !important;
  419.     color: #e0e0e0 !important;
  420.     border: 1px solid #333 !important;
  421.   }
  422.  
  423.   select,
  424.   option {
  425.     background-color: #1e1e1e !important;
  426.     color: #e0e0e0 !important;
  427.   }
  428.  
  429.   [role*='tooltip'],
  430.   [class*='t30xm'],
  431.   [class*='t30xm'] > div:nth-child(n),
  432.   [class*='t30xm'] > div:nth-child(n) > span,
  433.   div.image-infos,
  434.   #react-root > div:nth-child(n) > div > div > div > div.image-box-component.zoomable > a,
  435.   #react-root > div:nth-child(n) > div > div > div > div.image-box-component.zoomable > div,
  436.   #react-root > div:nth-child(2) > div > div > div > div.image-infos > div.edit-box-component {
  437.     background-color: #000 !important;
  438.     color: #bb86fc !important;
  439.     border: 4px solid #000 !important;
  440.   }
  441.  
  442.   #react-root
  443.     > div:nth-child(n)
  444.     > div
  445.     > div
  446.     > main
  447.     > div
  448.     > div:nth-child(n)
  449.     > div
  450.     > div
  451.     > div:nth-child(n)
  452.     > div
  453.     > div
  454.     > div.hover-layer {
  455.     display: initial !important;
  456.   }
  457.  
  458.   #react-root
  459.     > div:nth-child(n)
  460.     > div
  461.     > div
  462.     > main
  463.     > div
  464.     > div:nth-child(n)
  465.     > div
  466.     > div
  467.     > div:nth-child(n)
  468.     > div
  469.     > .card.medium-card.checkable:hover,
  470.   #react-root
  471.     > div:nth-child(n)
  472.     > div
  473.     > div
  474.     > div
  475.     > div.image-infos
  476.     > div.edit-box-component
  477.     > div
  478.     > div
  479.     > div,
  480.   #react-root
  481.     > div:nth-child(n)
  482.     > div
  483.     > div
  484.     > div
  485.     > div.image-infos
  486.     > div.related-info-box-component
  487.     > div
  488.     > div.container-close-date-images.related-info,
  489.   #react-root
  490.     > div:nth-child(n)
  491.     > div
  492.     > div
  493.     > div
  494.     > div.image-infos
  495.     > div.related-info-box-component
  496.     > div
  497.     > div.related-images-grid-view.related-info,
  498.   #react-root
  499.     > div:nth-child(n)
  500.     > div
  501.     > div
  502.     > div
  503.     > div.image-box-component.zoomable
  504.     > div.navigation.next-navigation,
  505.   #react-root
  506.     > div:nth-child(n)
  507.     > div
  508.     > div
  509.     > div
  510.     > div.image-box-component.zoomable
  511.     > div.navigation.prev-navigation {
  512.     box-shadow:
  513.       0px 0px 1px 1px #bb86fc,
  514.       0 0 1px #bb86fc;
  515.     opacity: 1;
  516.   }
  517.  
  518.   #react-root
  519.     > div:nth-child(2)
  520.     > div
  521.     > div
  522.     > div
  523.     > div.image-infos
  524.     > div.related-info-box-component
  525.     > div {
  526.     box-shadow:
  527.       0px 0px 1px 1px #bb86fc,
  528.       0 0 1px #bb86fc;
  529.     opacity: 1;
  530.   }
  531.  
  532.   #react-root
  533.     > div:nth-child(n)
  534.     > div
  535.     > div
  536.     > main
  537.     > div
  538.     > div:nth-child(n)
  539.     > div
  540.     > div
  541.     > div:nth-child(n)
  542.     > div
  543.     > div {
  544.     box-shadow: 0 1px 0 0 #bb86fc;
  545.   }
  546.  
  547.   .grid-view .card.medium-card .hover-layer:hover {
  548.     position: absolute;
  549.     inset: 0;
  550.     background: rgba(58, 66, 79, 0.4);
  551.     mix-blend-mode: multiply;
  552.     border: 5px solid #fff;
  553.     border-bottom: 32px solid #fff;
  554.     opacity: 0;
  555.     transition: opacity 0.15s;
  556.   }
  557.  
  558.   #metadata-is-public-dropdown > span,
  559.   #metadata-is-public-dropdown,
  560.   textarea {
  561.     background-color: black !important;
  562.     border: none;
  563.     color: #bb86fc;
  564.   }
  565.  
  566.   #search-box-input:hover {
  567.     border-bottom: 1px solid #000;
  568.   }
  569.  
  570.   #search-box-input::placeholder,
  571.   #react-root
  572.     > div.header-block.explorer-header-block
  573.     > div.search-box
  574.     > div
  575.     > div.search-box-panel
  576.     > div.search-history-list
  577.     > div
  578.     > div:nth-child(n)
  579.     > a
  580.     > div,
  581.   #features-clean-share,
  582.   #features-ai,
  583.   #features-video-message,
  584.   body > div.content > section.testimonials > div > div > h2,
  585.   body > div.content > section.testimonials > div > div > div > div:nth-child(n) > blockquote > p,
  586.   body > div.content > section.testimonials > div > div > div > div:nth-child(n) > div > h5,
  587.   body > div.content > section.pricing > div > h2,
  588.   #features-unlimited,
  589.   #features-edit,
  590.   #conclusion > div > div > h2 {
  591.     color: #bb86fc;
  592.     /* Change this to the desired color */
  593.   }
  594.  
  595.   body > div.content > section.testimonials > div > div > div > div:nth-child(n) > div > div,
  596.   .testimonials .card-footer::before {
  597.     color: #bb86fc !important;
  598.     background-color: #bb86fc;
  599.   }
  600.  
  601.   #react-root
  602.     > div.header-block.explorer-header-block
  603.     > div.search-box
  604.     > div
  605.     > div.search-box-panel
  606.     > div.search-history-list
  607.     > div
  608.     > div:nth-child(n)
  609.     > button.switch-save
  610.     > svg:hover,
  611.   body.pro .features h2,
  612.   body
  613.     > div.content
  614.     > section.features-table
  615.     > div
  616.     > table:nth-child(n)
  617.     > tbody:nth-child(3)
  618.     > tr:nth-child(n)
  619.     > td:nth-child(n)
  620.     > div
  621.     > kamon-lp {
  622.     fill: #bb86fc;
  623.   }
  624.   #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > svg > path:nth-child(n) {
  625.     fill: #bb86fc;
  626.   }
  627.  
  628.   body > div.content > section.pricing > div > div > div.pricing-box.pricing-box-default,
  629.   #conclusion > div > button {
  630.     border: 1px solid #bb86fc;
  631.   }
  632.  
  633.   #global-dropdown-menu
  634.     > div.popover-content
  635.     > ul
  636.     > li:nth-child(13)
  637.     > button
  638.     > svg
  639.     > path:nth-child(n) {
  640.     fill: #f00;
  641.   }
  642.  
  643.   #react-root
  644.     > div.header-block.explorer-header-block
  645.     > div.search-box
  646.     > div
  647.     > div.search-box-panel
  648.     > div.search-history-list
  649.     > div
  650.     > div.saved-search-header {
  651.     color: #bb86fc;
  652.     font-size: 16px;
  653.     text-decoration: underline;
  654.   }
  655.  
  656.   /* For WebKit-based browsers (e.g., Chrome, Safari) */
  657.   ::-webkit-scrollbar {
  658.     width: 12px;
  659.     /* Width of the scrollbar */
  660.   }
  661.  
  662.   ::-webkit-scrollbar-track {
  663.     background: #bb86fc;
  664.     /* Background of the scrollbar track */
  665.   }
  666.  
  667.   ::-webkit-scrollbar-thumb {
  668.     background-color: #121212;
  669.     /* Color of the scrollbar thumb */
  670.     border-radius: 10px;
  671.     /* Rounded corners of the scrollbar thumb */
  672.     border: 3px solid #121212;
  673.     /* Additional space around the thumb */
  674.   }
  675.  
  676.   /* For Firefox */
  677.   * {
  678.     scrollbar-width: thin;
  679.     /* Thin scrollbar */
  680.     scrollbar-color: #bb86fc #000;
  681.     /* Color of the thumb and track */
  682.   }
  683.   .global-dropdown-menu-divider {
  684.     background-color: #000; /* Change to your desired color */
  685.   }
  686.   body > div.content > div.static-page-nav-container.light > nav {
  687.     background-color: #121212;
  688.   }
  689.  
  690.   body > div.content > div.static-page-nav-container.light > nav > div > div > a > div {
  691.     color: red !important;
  692.   }
  693.  
  694.   body > div.content > div.static-page-nav-container.light > nav > div > div > a > div {
  695.     background-image: url('https://i.gyazo.com/3b48aa49e16ccde7bf0f4903269a9bc0.png');
  696.     width: 48px;
  697.     height: 48px;
  698.   }
  699.   body > div.content > section.hero.hidden-xs,
  700.   body > div.content > section.testimonials,
  701.   #conclusion,
  702.   #faq,
  703.   #faq > div > div.faq.static-page-faq > ul > li:nth-child(n):hover {
  704.     background-image: linear-gradient(80deg, #000 2%, #bb86fc 30%, #121212);
  705.   }
  706.   body > div.content > section.hero.hidden-xs > div.container,
  707.   body > div.content > div.static-page-nav-container.dark > nav > div,
  708.   body > div.content > div.static-page-nav-container.dark > nav > div > div {
  709.     border-radius: 20px;
  710.     border-bottom-left-radius: 0px !important;
  711.     border-bottom-right-radius: 0px !important;
  712.   }
  713.   #conclusion > div {
  714.     border-radius: 20px;
  715.   }
  716. }