Gyazo Dark Mode (Purple Accents)
目前為
/* ==UserStyle==
@name Gyazo.com Dark Mode
@version 20241128.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")
{
#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
}
.header-block.explorer-header-block,
a,
button,
img,
input,
span
{
color: #bb86fc!important;
background-color: #121212!important
}
#react-root > div:nth-child(2) > div > div > aside > div > div > ul > li.new-collection-field > span > span > svg > path,
a > span.toplevel-item-kamon > svg > path
{
filter: invert(1)
}
#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,
#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.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,
[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: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,
[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),
.card.medium-card,
.container-close-date-images.related-info,
.images-after-origin,
.metadata,
.related-info-box-component,
.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, .4);
mix-blend-mode: multiply;
border: 5px solid #fff;
border-bottom: 32px solid #fff;
opacity: 0;
transition: opacity .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
}
#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,
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),
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
}
.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
}
}