Gyazo.com Dark Mode

Gyazo Dark Mode (Purple Accents)

目前為 2024-11-28 提交的版本,檢視 最新版本

/* ==UserStyle==
@name         Gyazo.com Dark Mode
@version      20241128.1.5
@namespace    typpi.online
@description  Gyazo Dark Mode (Purple Accents)
@author       Nick2bad4u
@license      UnLicense
@homepageURL  https://github.com/Nick2bad4u/UserStyles
==/UserStyle== */
@-moz-document domain("gyazo.com") {
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.related-images-grid-view.related-info,
  .captured-info-value,
  .content-block,
  .edit-box-component,
  .footer-block,
  .grid-view,
  .grid-view-cell,
  .grid-view-cell-inner-image,
  .header-block,
  .image-desc-display.placeholder,
  .image-infos,
  .images-grid-view,
  .main-block-stage,
  .side-block-items,
  .sidebar-block {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
  }

  #popover > h3,
  .header-block.explorer-header-block,
  a,
  button,
  html,
  img,
  input,
  span {
    color: #bb86fc !important;
    background-color: #121212 !important;
  }

  #global-dropdown-menu
    > div.popover-content
    > ul
    > li:first-child
    > a
    > span.account-item-check
    > svg,
  #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > svg > path:nth-child(n),
  #like > svg,
  #like > svg > path,
  #popover > div.popover-content > div > div > div > svg,
  #posts
    > div
    > *
    > div
    > section.panel
    > footer
    > section.post-controls
    > div
    > div.control.reblog-control
    > a
    > svg
    > path:nth-child(n),
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
    > svg,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > button
    > svg,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > div.upload-modal.captures-upload-modal.show
    > button
    > svg,
  #react-root
    > div.header-block.explorer-header-block
    > div.search-box
    > div
    > div.search-box-panel
    > div.search-history-list
    > div
    > div:nth-child(n)
    > button.switch-save
    > svg:hover,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.image-ocrinfo-component
    > div
    > div.ocr-desc-buttons
    > div
    > div
    > button
    > svg,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > *
    > a
    > span.toplevel-item-kamon
    > svg
    > path,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.new-collection-field
    > span
    > span
    > svg
    > path,
  #react-root > div > div > div > div.transform-page-header > div > button > svg,
  #react-root
    > div
    > div
    > div
    > div.transform-page-header
    > div
    > div
    > button:nth-child(n)
    > svg
    > path,
  [id^='headlessui-menu-button-'] > svg > path,
  [id^='headlessui-menu-item-'] > svg,
  body.pro .features h2,
  body
    > div.content
    > section.features-table
    > div
    > table:nth-child(n)
    > tbody:nth-child(3)
    > tr:nth-child(n)
    > td:nth-child(n)
    > div
    > kamon-lp {
    fill: #bb86fc;
  }

  #global-dropdown-menu
    > div.popover-content
    > ul
    > li:first-child
    > a
    > span.account-item-check
    > svg:hover,
  #global-dropdown-menu > div.popover-content > ul > li:nth-child(13) > button > svg > path,
  #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > svg > path,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > button.edit-options-button.btn.explorer-action-btn.explorer-action-btn-dark
    > svg:hover,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > button
    > svg:hover,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > div.upload-modal.captures-upload-modal.show
    > button:hover
    > svg,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.toplevel-item.collection-list
    > ul
    > li:nth-child(n)
    > div
    > button
    > svg,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.image-ocrinfo-component
    > div
    > div.ocr-desc-buttons
    > div
    > div
    > button
    > svg:hover,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > :hover
    > a
    > span.toplevel-item-kamon
    > svg
    > path,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.new-collection-field
    > span:hover
    > span
    > svg
    > path,
  #react-root > div > div > div > div.transform-page-header > div > button:hover > svg,
  #react-root
    > div
    > div
    > div
    > div.transform-page-header
    > div
    > div
    > button:hover:nth-child(n)
    > svg
    > path,
  [id^='headlessui-menu-button-'] > svg > path:hover,
  [id^='headlessui-menu-item-'] > svg:hover {
    fill: white;
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.new-collection-field
    > span
    > span
    > svg,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.toplevel-item.tags
    > a
    > span.toplevel-item-kamon
    > svg,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.toplevel-item.visits
    > a
    > span.toplevel-item-kamon
    > svg,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.toplevel-item.captures.toplevel-item-active
    > a
    > span.toplevel-item-kamon
    > svg {
    fill: Black;
  }

  #react-root > div.header-block.explorer-header-block > div.explorer-action-btn-toolbar > a {
    background-color: #1212126b !important;
  }

  #global-dropdown-menu > div.popover-content > ul > li:nth-child(13) > button > span:hover,
  #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a:hover,
  #global-dropdown-menu > div.popover-content > ul > li:nth-child(n) > a > span:hover {
    color: #fff !important;
  }

  .images-show .bottom.interactive-popover > .arrow:after,
  .popover.bottom > .arrow:after {
    border-bottom-color: #bb86fc;
  }

  .explorer-action-btn.dropdown-toggle::after {
    content: '';
    margin-right: -8px;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+Y2FyZXQtZG93bjwvdGl0bGU+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTEuNzc3Mzk1MywxNC43MzAzOTUzIEMxMS41MjMzOTUzLDE0LjczMDM5NTMgMTEuMjY5Mzk1MywxNC42MzQzOTUzIDExLjA3NDM5NTMsMTQuNDQxMzk1MyBMNy4yOTczOTUyOSwxMC43MTEzOTUzIEM2LjkwNDM5NTI5LDEwLjMyMzM5NTMgNi45MDAzOTUyOSw5LjY5MDM5NTI5IDcuMjg4Mzk1MjksOS4yOTczOTUyOSBDNy42NzYzOTUyOSw4LjkwNDM5NTI5IDguMzEwMzk1MjksOC45MDAzOTUyOSA4LjcwMjM5NTI5LDkuMjg4Mzk1MjkgTDExLjc3NzM5NTMsMTIuMzI1Mzk1MyBMMTQuODUxMzk1Myw5LjI4ODM5NTI5IEMxNS4yNDUzOTUzLDguOTAwMzk1MjkgMTUuODc4Mzk1Myw4LjkwNDM5NTI5IDE2LjI2NjM5NTMsOS4yOTczOTUyOSBDMTYuNjU0Mzk1Myw5LjY5MDM5NTI5IDE2LjY1MDM5NTMsMTAuMzIzMzk1MyAxNi4yNTczOTUzLDEwLjcxMTM5NTMgTDEyLjQ4MDM5NTMsMTQuNDQxMzk1MyBDMTIuMjg1Mzk1MywxNC42MzQzOTUzIDEyLjAzMTM5NTMsMTQuNzMwMzk1MyAxMS43NzczOTUzLDE0LjczMDM5NTMiIGlkPSJwYXRoLTEiPjwvcGF0aD4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSJjYXJldC1kb3duIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0ibWFzay0yIiBmaWxsPSIjQkI4NkZDIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHVzZSBpZD0iTWFzayIgZmlsbD0iI0JCOThGQyIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICA8L2c+Cjwvc3ZnPg==);
  }

  .button,
  .form-control,
  .grid-cell,
  .input,
  .modal,
  .modal-content,
  .popup,
  .related-images-grid-view.related-info,
  .tooltip {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
  }

  #faq > div > div.faq.static-page-faq > ul > li.bottom > div.question:hover,
  #faq > div > div.faq.static-page-faq > ul > li:nth-child(n) > div.question:hover,
  #posts > div > * > div > section.post > div > div > h2:nth-child(n),
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.metadata-description
    > div
    > div.TOTVG659Y6UvGA4WzVD1
    > form
    > input,
  .card.medium-card,
  .container-close-date-images.related-info,
  .images-after-origin,
  .metadata,
  .related-info-box-component,
  .side-block .side-block-items .sub,
  .testing-swap-image-container .metadata-baseinfo,
  body > div.content > div:nth-child(2) > h1,
  body > div.content > div:nth-child(n) > h2,
  body > div.content > section.faq > div > h2,
  body > div.content > section.features-table > div > table:nth-child(n) > thead > tr > th > div,
  body
    > div.content
    > section.teams-pricing
    > div
    > div.box-container
    > div.box.enterprise-plan
    > div
    > p.title,
  body
    > div.content
    > section.usecases
    > div
    > div:nth-child(n)
    > div.row
    > div:nth-child(n)
    > div {
    color: #bb86fc !important;
  }

  .footer-block,
  .header-block {
    border-bottom: 1px solid #333 !important;
  }

  .sidebar-block {
    border-right: 1px solid #333 !important;
  }

  .card.medium-card {
    background-color: #1e1e1e !important;
    border: 1px solid #333 !important;
  }

  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.metadata-description {
    padding: 10px;
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.captured-info,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.image-ocrinfo-component
    > div
    > div.ocr-icon-block
    > div,
  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.related-images-grid-view.related-info
    > div
    > div
    > span
    > span:first-child,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.container-close-date-images.related-info
    > div.section-headline
    > a
    > span
    > span:first-child {
    margin-left: 10px;
  }

  article,
  aside,
  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
    ):not(.caBpUIyLTfNBwvxfTyDa):not(div.k3nzGrC3hEubDzXyOg_r),
  footer,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  header,
  li,
  main,
  nav,
  p,
  section,
  table,
  td,
  th,
  ul {
    background-color: #121212;
    color: #e0e0e0;
  }

  #react-root
    > div:nth-child(n)
    > div
    > div
    > main
    > div
    > div
    > div
    > div
    > div:nth-child(n)
    > section
    > div:nth-child(n)
    > div {
    background: #0000 !important;
  }

  .k3nzGrC3hEubDzXyOg_r {
    overflow: unset;
  }

  option,
  select {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  #react-root > div:nth-child(2) > div > div > div > div.image-infos > div.edit-box-component,
  #react-root > div:nth-child(n) > div > div > div > div.image-box-component.zoomable > a,
  #react-root > div:nth-child(n) > div > div > div > div.image-box-component.zoomable > div,
  [class*='t30xm'],
  [class*='t30xm'] > div:nth-child(n),
  [class*='t30xm'] > div:nth-child(n) > span,
  [role*='tooltip'],
  div.image-infos {
    background-color: #000 !important;
    color: #bb86fc !important;
    border: 4px solid #000 !important;
  }

  #react-root
    > div:nth-child(n)
    > div
    > div
    > main
    > div
    > div:nth-child(n)
    > div
    > div
    > div:nth-child(n)
    > div
    > div
    > div.hover-layer {
    display: initial !important;
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-box-component.zoomable
    > div.navigation.next-navigation,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-box-component.zoomable
    > div.navigation.prev-navigation,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.container-close-date-images.related-info,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.related-images-grid-view.related-info,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > main
    > div
    > div:nth-child(n)
    > div
    > div
    > div:nth-child(n)
    > div
    > .card.medium-card.checkable:hover {
    box-shadow:
      0 0 1px 1px #bb86fc,
      0 0 1px #bb86fc;
    opacity: 1;
  }

  #react-root
    > div:nth-child(n)
    > div
    > div
    > main
    > div
    > div:nth-child(n)
    > div
    > div
    > div:nth-child(n)
    > div
    > div {
    box-shadow: 0 1px 0 0 #bb86fc;
  }

  .grid-view .card.medium-card .hover-layer:hover {
    position: absolute;
    inset: 0;
    background: rgba(58, 66, 79, 0.4);
    mix-blend-mode: multiply;
    border: 5px solid #fff;
    border-bottom: 32px solid #fff;
    opacity: 0;
    transition: opacity 0.15s;
  }

  #metadata-is-public-dropdown,
  #metadata-is-public-dropdown > span,
  textarea {
    background-color: #000 !important;
    border: none;
    color: #bb86fc;
  }

  #search-box-input:hover {
    border-bottom: 1px solid #000;
  }

  #popover > h3 {
    border-bottom: 3px solid #000;
  }

  #conclusion > div > div > h2,
  #faq > div > div.faq.static-page-faq > ul > li:nth-child(n) > div.expand > i,
  #features-ai,
  #features-clean-share,
  #features-edit,
  #features-unlimited,
  #features-video-message,
  #react-root
    > div.header-block.explorer-header-block
    > div.search-box
    > div
    > div.search-box-panel
    > div.search-history-list
    > div
    > div:nth-child(n)
    > a
    > div,
  #search-box-input::placeholder,
  #section-features > div > div > div:nth-child(n) > div > i,
  #section-features > div > h2,
  body > div.content > section.closing > div > h2,
  body > div.content > section.faq > div > div > ul > li:nth-child(n) > div.expand > i,
  body > div.content > section.pricing > div > h2,
  body > div.content > section.testimonials > div > div > div > div:nth-child(n) > blockquote > p,
  body > div.content > section.testimonials > div > div > div > div:nth-child(n) > div > h5,
  body > div.content > section.testimonials > div > div > h2,
  body > div.content > section.tutorial > div > h3,
  body > div.content > section.usecases > div > div:nth-child(n) > h3,
  body > div.content > section.usecases > div > h2 {
    color: #bb86fc;
  }

  .testimonials .card-footer::before,
  body > div.content > section.testimonials > div > div > div > div:nth-child(n) > div > div {
    color: #bb86fc !important;
    background-color: #bb86fc;
  }

  #conclusion > div > button,
  #react-root > div > div > div > div.transform-page-header > div > button,
  #react-root > div > div > div > div.transform-page-header > div > div > button:nth-child(n),
  .Xpov4pPcafwfUVkzW7Gw,
  body > div.content > section.pricing > div > div > div.pricing-box.pricing-box-default,
  body > div.content > section.teams-pricing > div > div.box-container > div.box.small-team {
    border: 1px solid #bb86fc;
  }

  #global-dropdown-menu
    > div.popover-content
    > ul
    > li:nth-child(13)
    > button
    > svg
    > path:nth-child(n) {
    fill: #f00;
  }

  #react-root
    > div.header-block.explorer-header-block
    > div.search-box
    > div
    > div.search-box-panel
    > div.search-history-list
    > div
    > div.saved-search-header {
    color: #bb86fc;
    font-size: 16px;
    text-decoration: underline;
  }

  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: #bb86fc;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #121212;
    border-radius: 10px;
    border: 3px solid #121212;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: #bb86fc #000;
  }

  .global-dropdown-menu-divider {
    background-color: #000;
  }

  #conclusion,
  #faq,
  #faq > div > div.faq.static-page-faq > ul > li:nth-child(n):hover,
  body > div.content > div.static-page-nav-container.light > nav,
  body > div.content > section.testimonials {
    background-color: #121212;
  }

  body > div.content > div.static-page-nav-container.light > nav > div > div > a > div {
    color: red !important;
    background-image: url('https://i.gyazo.com/3b48aa49e16ccde7bf0f4903269a9bc0.png');
    width: 48px;
    height: 48px;
  }

  body > div.content > section.faq,
  body > div.content > section.hero-header.hidden-xs,
  body > div.content > section.hero.hidden-xs,
  body > div.content > section.testimonials {
    background-image: linear-gradient(80deg, #000 2%, #bb86fc 30%, #121212);
  }

  body > div.content > div.static-page-nav-container.dark > nav > div,
  body > div.content > div.static-page-nav-container.dark > nav > div > div,
  body > div.content > section.hero.hidden-xs > div.container {
    border-radius: 20px;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  #conclusion > div,
  body > div.content > section.faq > div,
  body > div.content > section.hero-header.hidden-xs > div,
  body > div.content > section.hero-header.hidden-xs > div > div,
  body > div.content > section.testimonials > div,
  body > div.content > section.usecase > div {
    border-radius: 20px;
  }

  #faq > div > div.faq.static-page-faq > ul > li:nth-child(n) > div.expand,
  .pricing-table-box-pro,
  body > div.content > section.faq > div > div > ul > li:nth-child(n) > div.expand {
    border: 3px solid #bb86fc;
  }

  #faq > div > div.faq.static-page-faq > ul > li:nth-child(n),
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.related-images-grid-view.related-info
    > div
    > section
    > div:nth-child(n)
    > a,
  body > div.content > section.faq > div > div > ul > li:nth-child(n) {
    border-top: 1px solid #bb86fc;
  }

  .btn-default:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  body
    > div.content
    > section.hero-header.hidden-xs
    > div
    > div
    > div.hero-header-text
    > p:nth-child(n)
    > a:hover,
  body > div.content > section.teams-pricing > div > div.box-container > div.box.enterprise-plan,
  body > div.content > section.teams-pricing > div > div.box-container > div.box.small-team,
  body > div.content > section.teams-pricing > div > div:nth-child(2) > div {
    border-color: #bb86fc;
  }

  .btn-primary,
  .btn-secondary {
    border-color: #3c2a51;
  }

  .teams-pricing .pricing-toggle-switch-container {
    width: 300px;
    height: 60px;
    text-align: center;
    margin-top: 38px;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    position: relative;
  }

  .search-box .search-box-input-wrap input:focus,
  .static-page-faq .bottom {
    border-bottom: 1px solid #bb86fc;
  }

  .static-page-faq li:hover {
    background: #3c2a51;
    cursor: pointer;
  }

  .dropdown-menu,
  .like_toggle {
    background-color: #bb86fc;
  }

  body
    > div.content
    > div.static-page-nav-container.dark
    > nav
    > div
    > ul.navbar-items
    > li.dropdown.hidden-sm.hidden-xs.open
    > ul
    > li.dropdown-header {
    color: #fff;
  }

  #like > svg {
    fill: #bb86fc !important;
  }

  .table > tbody > tr > td,
  .table > tbody > tr > th,
  .table > tfoot > tr > td,
  .table > tfoot > tr > th,
  .table > thead > tr > td,
  .table > thead > tr > th {
    padding: 8px;
    line-height: 1.75;
    vertical-align: top;
    border-top: 1px solid #bb86fc;
  }

  .table > tbody + tbody {
    border-top: 2px solid #bb86fc;
  }

  .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #bb86fc;
  }

  .side-block .side-block-items .toplevel-item-active {
    pointer-events: none;
    background: #121212;
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > aside
    > div
    > div
    > ul
    > li.toplevel-item.collection-list
    > ul:hover
    > li:nth-child(n)
    > div
    > button
    > svg
    > path,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-box-component.zoomable
    > div.navigation.next-navigation
    > svg
    > path,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-box-component.zoomable
    > div.navigation.prev-navigation
    > svg
    > path,
  .search-history-list .histories .history-row button.switch-save .kamon {
    fill: #bb86fc;
  }

  .search-history-list .histories .history-row button.switch-save:hover .kamon,
  .search-history-list .histories .history-row:hover button.switch-save .kamon {
    fill: #fff;
  }

  .side-block-items .collection-item .file-thumb,
  .side-block-items .collection-item .thumb {
    border: 1px solid #bb86fc;
    box-shadow: 0 0 0 1px #bb86fc;
  }

  .side-block-items .collection-item > a {
    border-radius: 5px;
  }

  .side-block-items .collection-item:focus-within,
  .side-block-items .collection-item:hover {
    background: #bb86fc;
  }

  #react-root > div.header-block.explorer-header-block > a {
    border-bottom: 10px;
    background-color: #12121200 !important;
  }

  #popover > div.popover-content > ul > li:nth-child(n):hover,
  .global-logo-icon:hover {
    opacity: 0.5;
  }

  .form-control:focus,
  .global-header-search.global-header-search input:focus {
    border-color: #bb86fc !important;
    outline: 0;
    box-shadow: 0 0 0 3px #3c2a51;
  }

  [data-hover-visible] .btn-primary:hover {
    color: #fff;
    border-color: #bb86fc;
  }

  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > div.upload-modal.captures-upload-modal.show
    > div
    > h1:nth-child(2) {
    color: #d7d7d7;
  }

  .related-images .related-info {
    padding-top: 3px;
    padding-bottom: 33px;
  }

  .B9QQGIFrwoa05qnyZvI5 {
    row-gap: 1px !important;
    column-gap: 0 !important;
    background-color: #bb86fc !important;
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div,
  .image-page .related-info:last-of-type {
    padding-bottom: 1px;
  }

  .image-page hr {
    border-top: 0 solid rgba(255, 255, 255, 0.15);
  }

  #react-root
    > div:nth-child(2)
    > div
    > div
    > div
    > div.image-infos
    > div.related-info-box-component
    > div
    > div.related-images-grid-view.related-info {
    border-top: 5px solid #bb86fc !important;
    padding-top: 15px !important;
  }

  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.image-ocrinfo-component
    > div
    > div.ocr-desc-buttons
    > div
    > button,
  #react-root
    > div:nth-child(n)
    > div
    > div
    > div
    > div.image-infos
    > div.edit-box-component
    > div
    > div
    > div
    > div.image-ocrinfo-component
    > div
    > div.ocr-desc-buttons
    > div
    > div
    > button,
  .pjZHyYN8MthPpYWZDS0d,
  .vtVH6utAExSlC9aN2qwE {
    border: 1px dashed #bb86fc !important;
  }

  input[name='new-tag']::placeholder {
    color: #bb86fc;
  }

  #headlessui-dialog-overlay-5,
  #react-root
    > div.header-block.explorer-header-block
    > div.explorer-action-btn-toolbar
    > div.explorer-action-btn-group
    > a,
  .W9K8hRc2gk7SniSQJYi1,
  .kuJ39tkCjATBXUZiuSKB {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.09) !important;
  }

  #react-root
    > div
    > div
    > div
    > div.transform-page-header
    > div
    > div
    > button:nth-child(n)
    > span {
    border-top: 1px solid #bb86fc !important;
    border-bottom: 1px solid #bb86fc !important;
    line-height: 30px !important;
  }

  .add-to-collection-popover .collection-operation-wrap .collection-operation-add,
  .add-to-collection-popover .new-collection-form .form-box input::placeholder {
    color: #bb86fc !important;
  }
}

@-moz-document regexp("^https://(www\\.)?gyazo\\.com/.*/draw$")
{
  article,
  aside,
  div:not(
      #react-root
        > div:th-child(n)
        > div
        > div
        > main
        > div
        > div
        > div
        > div
        > div:nth-child(2)
        > section
        > div:nth-child(n)
        > a
        > div
    ):not(.caBpUIyLTfNBwvxfTyDa):not(div.k3nzGrC3hEubDzXyOg_r),
  footer,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  header,
  li,
  main,
  nav,
  p,
  section,
  table,
  td,
  th,
  ul {
    background-color: #00000014 !important;
    /* Example style */
  }
}