Gyazo Dark Mode (Purple Accents)
目前为
/* ==UserStyle==
@name Gyazo.com Dark Mode
@version 20241124.00.57
@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") {
/* Additional elements */
.header-block,
.footer-block,
.content-block,
.sidebar-block,
.side-block-items,
.images-grid-view,
.grid-view,
.grid-view-cell,
.grid-view-cell-inner-image,
.main-block-stage,
.image-infos,
.captured-info-value,
.edit-box-component,
.image-desc-display.placeholder,
#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 {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
/* Links, buttons, inputs, images */
a,
span,
button,
input,
img,
.header-block.explorer-header-block {
color: #bb86fc !important;
background-color: #121212 !important;
}
a > span.toplevel-item-kamon > svg > path,
#react-root
> div:nth-child(2)
> div
> div
> aside
> div
> div
> ul
> li.new-collection-field
> span
> span
> svg
> path {
filter: invert(1);
}
[id^='headlessui-menu-item-'] > svg,
[id^='headlessui-menu-button-'] > svg > path,
#react-root
> div.header-block.explorer-header-block
> div.explorer-action-btn-toolbar
> div.explorer-action-btn-group
> 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,
#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,
#global-dropdown-menu
> div.popover-content
> ul
> li:nth-child(1)
> a
> span.account-item-check
> svg {
fill: #bb86fc;
}
[id^='headlessui-menu-item-'] > svg:hover,
[id^='headlessui-menu-button-'] > svg > path: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: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.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,
#global-dropdown-menu
> div.popover-content
> ul
> li:nth-child(1)
> a
> span.account-item-check
> svg:hover {
fill: white;
}
#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:nth-child(2)
> div
> div
> aside
> div
> div
> ul
> li.toplevel-item.collection-list
> ul
> li:nth-child(n)
> div
> button
> svg {
fill: white;
}
#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,
#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(2)
> div
> div
> aside
> div
> div
> ul
> li.new-collection-field
> span
> span
> 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(n) > a > 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(13) > button > span:hover {
color: white !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==);
}
/* Form controls, grid cells */
.button,
.input,
.form-control,
.grid-cell,
.related-images-grid-view.related-info {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
border: 1px solid #333 !important;
}
/* Header and footer borders */
.header-block,
.footer-block {
border-bottom: 1px solid #333 !important;
}
/* Sidebar border */
.sidebar-block {
border-right: 1px solid #333 !important;
}
/* Card styling */
.card.medium-card {
background-color: #1e1e1e !important;
color: #bb86fc !important;
border: 1px solid #333 !important;
}
/* Metadata and related info */
.metadata,
.images-after-origin,
.container-close-date-images.related-info,
.related-info-box-component,
.testing-swap-image-container .metadata-baseinfo {
color: #bb86fc !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(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:nth-child(1),
#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:nth-child(1) {
margin-left: 10px;
}
/* Additional elements */
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),
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
table,
th,
td,
section,
article,
aside,
nav,
header,
footer,
main {
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;
}
.modal,
.modal-content {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
border: 1px solid #333 !important;
}
.tooltip,
.popup {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
border: 1px solid #333 !important;
}
select,
option {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
[role*='tooltip'],
[class*='t30xm'],
[class*='t30xm'] > div:nth-child(n),
[class*='t30xm'] > div:nth-child(n) > span,
div.image-infos,
#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,
#react-root > div:nth-child(2) > div > div > div > div.image-infos > div.edit-box-component {
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(n)
> div
> div
> main
> div
> div:nth-child(n)
> div
> div
> div:nth-child(n)
> div
> .card.medium-card.checkable:hover,
#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
> 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 {
box-shadow:
0px 0px 1px 1px #bb86fc,
0 0 1px #bb86fc;
opacity: 1;
}
#react-root
> div:nth-child(2)
> div
> div
> div
> div.image-infos
> div.related-info-box-component
> div {
box-shadow:
0px 0px 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 > span,
#metadata-is-public-dropdown,
textarea {
background-color: black !important;
border: none;
color: #bb86fc;
}
#search-box-input:hover {
border-bottom: 1px solid #000;
}
#search-box-input::placeholder,
#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,
#features-clean-share,
#features-ai,
#features-video-message,
body > div.content > section.testimonials > div > 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.pricing > div > h2,
#features-unlimited,
#features-edit,
#conclusion > div > div > h2 {
color: #bb86fc;
/* Change this to the desired color */
}
body > div.content > section.testimonials > div > div > div > div:nth-child(n) > div > div,
.testimonials .card-footer::before {
color: #bb86fc !important;
background-color: #bb86fc;
}
#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,
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:nth-child(n) > a > svg > path:nth-child(n) {
fill: #bb86fc;
}
body > div.content > section.pricing > div > div > div.pricing-box.pricing-box-default,
#conclusion > div > button {
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;
}
/* For WebKit-based browsers (e.g., Chrome, Safari) */
::-webkit-scrollbar {
width: 12px;
/* Width of the scrollbar */
}
::-webkit-scrollbar-track {
background: #bb86fc;
/* Background of the scrollbar track */
}
::-webkit-scrollbar-thumb {
background-color: #121212;
/* Color of the scrollbar thumb */
border-radius: 10px;
/* Rounded corners of the scrollbar thumb */
border: 3px solid #121212;
/* Additional space around the thumb */
}
/* For Firefox */
* {
scrollbar-width: thin;
/* Thin scrollbar */
scrollbar-color: #bb86fc #000;
/* Color of the thumb and track */
}
.global-dropdown-menu-divider {
background-color: #000; /* Change to your desired color */
}
body > div.content > div.static-page-nav-container.light > nav {
background-color: #121212;
}
body > div.content > div.static-page-nav-container.light > nav > div > div > a > div {
color: red !important;
}
body > div.content > div.static-page-nav-container.light > nav > div > div > a > div {
background-image: url('https://i.gyazo.com/3b48aa49e16ccde7bf0f4903269a9bc0.png');
width: 48px;
height: 48px;
}
body > div.content > section.hero.hidden-xs,
body > div.content > section.testimonials,
#conclusion,
#faq,
#faq > div > div.faq.static-page-faq > ul > li:nth-child(n):hover {
background-image: linear-gradient(80deg, #000 2%, #bb86fc 30%, #121212);
}
body > div.content > section.hero.hidden-xs > div.container,
body > div.content > div.static-page-nav-container.dark > nav > div,
body > div.content > div.static-page-nav-container.dark > nav > div > div {
border-radius: 20px;
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
#conclusion > div {
border-radius: 20px;
}
}