/* ==UserStyle==
@name Gyazo.com Dark Mode
@version 20241117.00.57
@namespace gyazo.com
@description Gyazo Dark Mode (WIP)
@homepageURL https://github.com/Nick2bad4u/UserStyles
@author Nick2bad4u
@license UnLicense
==/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 {
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;
}
/* 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;
}
/* Additional elements */
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
table,
th,
td,
section,
article,
aside,
nav,
header,
footer,
main {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
.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(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;
}
}
