Dark Breeze Docker Hub by kajika

/* ==UserStyle==
@name         Dark Breeze Docker Hub
@version      20230420.12.58
@namespace    userstyles.world/user/kajika
@description  Dark theme for Docker Hub
@author       kajika
@license      CC BY-SA - Creative Commons Attribution-ShareAlike
==/UserStyle== */

@-moz-document domain("hub.docker.com") {
:root
{
	--main-bg-color: hsl(213, 10%, 17%);
	--main-fg-color: #bbb;
	--light-bg-color: hsl(213, 10%, 23%);
	--light-fg-color: #ccc;
	--lighter-bg-color: hsl(213, 10%, 29%);
	--lighter-fg-color: #ddd;
	--highlight-bg-color: hsl(213, 10%, 35%);
	--highlight-fg-color: #eee;
	--border-color: #666;
	--dim-fg-color: #999;
	--primary-bg-color: hsl(211, 50%, 23%);
	--selected-bg-color: hsl(211, 30%, 23%);
	--link-color: hsl(211, 50%, 60%);
	--link-hover-color: hsl(211, 50%, 75%);
}

body
{
    background-color: var(--main-bg-color);
	color: var(--main-fg-color);
}

fieldset
{
	border-color: var(--border-color) !important;
}

footer[class^=styles__footerWrapper_]
{
	background-color: var(--primary-bg-color);
	color: var(--main-fg-color);
}

footer[class^=styles__footerWrapper_] svg
{
	fill: var(--main-fg-color);
}

input::placeholder
{
	color: var(--dim-fg-color);
}

.MuiPaper-root.MuiPaper-outlined.MuiAppBar-colorPrimary
{
	background-color: var(--primary-bg-color);
}

.MuiPaper-root.MuiPaper-outlined.MuiAppBar-colorPrimary a:hover
{
	color: var(--link-hover-color);
}

.MuiPaper-root.MuiPaper-outlined.MuiAppBar-colorPrimary .MuiAutocomplete-inputRoot .MuiAutocomplete-input:focus
{
	background: rgb(255, 255, 255, 0.3);
	color: var(--highlight-fg-color)
}

#mainContainer #contextNav
{
	background: var(--light-bg-color);
	border-color: var(--border-color);
}

#mainContainer #contextNav [class*=styles__breadcrumb_]
{
	color: var(--light-fg-color)
}

#mainContainer #contextNav [class*=styles__breadcrumb_]::after
{
	border-left-color: var(--light-bg-color);
}

#mainContainer #contextNav [class*=styles__breadcrumb_]::before
{
	border-left-color: var(--border-color);
}

#mainContainer #contextNav [class*=styles__breadcrumb_]:hover
{
	color: var(--link-hover-color)
}

#mainContainer #contextNav [class*=styles__breadcrumb_]:last-child
{
	color: var(--link-color)
}

.MuiTabs-flexContainer a
{
	color: var(--main-fg-color)
}

.MuiTabs-flexContainer a:hover
{
	color: var(--link-hover-color)
}

.MuiTabs-flexContainer a.Mui-selected
{
	color: var(--link-color)
}

.MuiTextField-root
{
	background-color: inherit;
}

.MuiInputBase-colorPrimary
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
}

.MuiFormControl-root
{
	background: transparent;
}

.MuiPopper-root .MuiPaper-root,
.MuiPopper-root .MuiPaper-root .MuiAutocomplete-listbox
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
}

.MuiListSubheader-gutters
{
	background-color: var(--light-bg-color);
	color: var(--lighter-fg-color);
}

.MuiAutocomplete-listbox .MuiAutocomplete-option
{
	color: var(--light-fg-color);
}

.MuiAutocomplete-listbox .MuiAutocomplete-option [class*=styles__match_]
{
	color: var(--link-hover-color);
}

.css-kjbb89
{
	color: var(--dim-fg-color);
}

.MuiSelect-select.MuiSelect-multiple,
.MuiSelect-select.MuiSelect-outlined
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
}

.MuiPaper-root.MuiMenu-paper
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
}

.MuiDivider-fullWidth
{
	border-color: var(--border-color);
}

.MuiList-root .Mui-selected
{
	background-color: var(--selected-bg-color);
}

.MuiStack-root > .MuiBox-root.css-0,
.MuiGrid-item .MuiBox-root.css-0,
.MuiBox-root.css-0[class*=styles__tags_],
.MuiBox-root.css-0[class*=styles__builds_],
.MuiBox-root.css-0[class*=styles__repoDescriptionCard_],
.MuiBox-root.css-0[class*=styles__cardSection_]
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
	border-color: var(--border-color);
}

[data-testid=page_community_profile] > .MuiBox-root,
[class^=styles__contextNav_] ~ .MuiBox-root,
[data-testid=page_community_image_detail] > .MuiStack-root > .MuiBox-root,
[data-testid=page_organization_list] > .MuiBox-root
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

.MuiPaper-root.MuiPaper-outlined
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
	border-color: var(--border-color);
}

[class*=styles__newDesign_]
{
	background-color: var(--light-bg-color);
}

[class*=styles__newDesign_] [class^=styles__infoText_],
[class*=styles__newDesign_] [class^=styles__cardText_]
{
	color: var(--light-fg-color);
}

[class*=styles__card_]
{
	border-color: var(--border-color);
}

[class*=styles__emptyState_]
{
	color: var(--dim-fg-color);
}

[class^=styles__fullWhiteBackground_]
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

[class*=styles__itemName_]
{
	color: var(--dim-fg-color)
}

[class*=styles__itemValue_]
{
	color: var(--main-fg-color)
}

[class*=styles__imageref_]
{
	color: var(--dim-fg-color)
}

[class^=styles__historyColumn_] [class^=styles__container_]
{
	background-color: var(--light-bg-color);
}

[class^=styles__historyColumn_] [class^=styles__item_]:hover
{
	background-color: var(--selected-bg-color);
}

[class^=styles__historyColumn_] [class*=styles__isActive_]
{
	background-color: var(--main-bg-color) !important;
}

[class^=styles__historyColumn_] [class^=styles__index_]
{
	background-color: var(--main-bg-color);
}

[class^=styles__detailColumn_] > [class^=styles__container_]
{
	background-color: var(--light-bg-color);
}

[class^=styles__detailColumn_] [class^=styles__panel_]
{
	background-color: var(--main-bg-color);
	border-color: var(--border-color);
}

[class^=styles__detailColumn_] [class^=styles__instruction_]
{
	color: var(--main-fg-color) !important;
}

.MuiTableCell-root
{
	color: var(--light-fg-color);
}

.MuiSvgIcon-root
{
	color: var(--dim-fg-color);
}

.MuiLink-root
{
	color: var(--link-color);
}

.dMarkdown
{
	color: var(--light-fg-color)
}

.dMarkdown code
{
	background-color: var(--main-bg-color);
}

.dMarkdown pre
{
	background-color: var(--main-bg-color);
	border-color: var(--border-color);
}

[class^=styles__code_]
{
	background-color: var(--main-bg-color);
	border-color: var(--border-color);
}

[class^=styles__code_] [class*=styles__darkInput_]
{
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
}

.MuiBox-root[class*=styles__repoDescriptionCard_]
{
	background-color: var(--light-bg-color);
}

[class^=styles__row_][class*=styles__clickable_]:hover
{
	background-color: var(--lighter-bg-color);
}

[class^=styles__paginationCentered_] [class^=styles__page_]
{
	background-color: var(--light-bg-color);
	color: var(--light-fg-color);
}

[class^=styles__page][class*=styles__currentPage]
{
	background-color: var(--primary-bg-color);
}

[class^=styles__pullCount_]
{
	color: var(--dim-fg-color);
}

.dChip,
.MuiChip-token.MuiChip-colorPrimary
{
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
}

.MuiFormLabel-root.MuiFormLabel-colorPrimary
{
	color: var(--light-fg-color);
}

#searchResults .MuiBox-root.css-0
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

#searchResults .MuiBox-root.css-0:hover
{
	box-shadow: 0px 2px 4px -1px rgba(255,255,255,0.2),0px 4px 5px 0px rgba(255,255,255,0.14),0px 1px 10px 0px rgba(255,255,255,0.12);
}

#searchResults .MuiBox-root.css-0 [class*=styles__row_]
{
	color: var(--light-fg-color);
}

.MuiAvatar-square
{
	background-color: var(--lighter-bg-color);
}

.MuiGrid-container > .MuiGrid-root > .MuiBox-root.css-0
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

[data-testid=CommunityImageDetailTags] .MuiBox-root.css-0[class*=styles__content_]
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

[class^=styles__codeblock_]
{
	background-color: var(--main-bg-color);
	color: var(--main-fg-color);
	border-color: var(--border-color);
}

[data-testid=imglayersLayerDetailPage] [class*=styles__upsellSidebar_]
{
	background-color: var(--light-bg-color);
	border-color: var(--border-color);
}

.MuiFormControlLabel-root.Mui-disabled .MuiFormControlLabel-label.Mui-disabled
{
	color: var(--dim-fg-color);
}
.MuiTypography-root.MuiTypography-body2
{
	color: var(--main-fg-color);
}

.MuiButton-root.Mui-disabled
{
	color: var(--main-fg-color);
	border-color: var(--border-color);
	opacity: 0.3;
}

[class^=styles__homeLandingPage_]
{
	background-color: var(--main-bg-color);
}

[class^=styles__homeLandingPage_] [class^=styles__topSection_]
{
	background-image: none !important;
	position: relative;
}

[class^=styles__homeLandingPage_] [class^=styles__topSection_]::before
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: brightness(0.5);
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTQ0MHB4IiBoZWlnaHQ9IjYzNXB4IiB2aWV3Qm94PSIwIDAgMTQ0MCA2MzUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1MS4zICg1NzU0NCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgPHRpdGxlPkdyb3VwIDIzIENvcHk8L3RpdGxlPgogIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogIDxkZWZzPgogICAgPGZpbHRlciB4PSItMjEuMyUiIHk9Ii0zNy4yJSIgd2lkdGg9IjE0Mi42JSIgaGVpZ2h0PSIxNzQuMyUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0xIj4KICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMTQuNjE3NzQ1NSIgaW49IlNvdXJjZUdyYXBoaWMiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICA8L2ZpbHRlcj4KICAgIDxwYXRoIGQ9Ik0wLDAgTDE0NDAsMCBMMTQ0MCwxMDEuMTg2MzQyIEw0NDYuNzU0OTI5LDYzMS44NjMyMTIgQzQ0MC43NjE1NzksNjM1LjA2NTM3NSA0MzMuNTUyMzU0LDYzNS4wMDU0MDggNDI3LjYxMzEwMSw2MzEuNzAzOTg5IEwwLDM5NC4wMDkxMDggTDAsMCBaIiBpZD0icGF0aC0yIj48L3BhdGg+CiAgICA8ZmlsdGVyIHg9Ii0zNi43JSIgeT0iLTcwLjclIiB3aWR0aD0iMTczLjQlIiBoZWlnaHQ9IjI0MS40JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgI...