Dark JoinPeerTube & Search by 0ko

/* ==UserStyle==
@name          Dark JoinPeerTube & Search
@author        0ko (https://userstyles.world/~0ko)
@description   Dark theme for JoinPeerTube website and PeerTube's search engine, SepiaSearch.
@version       2.2.2
@license       MIT
@preprocessor  stylus

@namespace     0ko userstyles
@homepageURL   https://codeberg.org/0ko/UserStyles#dark-peertube-sepia-search
@supportURL    https://codeberg.org/0ko/UserStyles/issues

@var checkbox  forceDark "Force dark theme" 0

==/UserStyle== */

imp = !important

ApplyTheme()

	/* define main variables */

	:root
		--ptdss-bg1: #222222
		--ptdss-bg2: #303030
		--ptdss-bg3: #f47825
		--ptdss-bg4: hsl(24, 90%, 50%)

		--ptdss-fg1: #e3ebef
		--ptdss-fg2: #e0e0e1
		--ptdss-fg3: #cecece
		--ptdss-fg4: hsl(24, 50%, 80%)

		--ptdss-bo1: #e0e0e0
		--ptdss-bo2: #e0ccbe

		color-scheme: dark


	/* override existing variables to decrease code complexity */

	.navbar
		--bs-navbar-brand-color: var(--ptdss-fg1) imp
		--bs-navbar-brand-hover-color: var(--ptdss-fg1) imp
		--bs-navbar-color: var(--ptdss-fg2) imp
		--bs-navbar-hover-color: var(--ptdss-fg1) imp

	.popover
		--bs-popover-bg: var(--ptdss-bg2) imp
		--bs-popover-body-color: var(--ptdss-fg2) imp

	.dropdown-menu
		--bs-body-bg: var(--ptdss-bg1) imp
		--bs-dropdown-link-hover-bg: var(--ptdss-bg2) imp
		--bs-dropdown-link-color: var(--ptdss-fg2) imp
		--bs-dropdown-link-hover-color: var(--ptdss-fg2) imp

	#home
		--p-o5: var(--ptdss-bg2)
		--p-g5: var(--ptdss-bg1)
		--p-o4: var(--ptdss-bg1)

		--p-g1: var(--ptdss-fg1)


	/* update branding for dark theme */

	.title-image
		filter: invert(100%) hue-rotate(180deg) brightness(130%)

	.interface-language
		filter: invert(100%)

	#main-footer .text-center img
	#what h1 img
	#f-sfs h2 img
		filter: invert(100%) hue-rotate(180deg)

	.navbar-brand img[alt="PeerTube"]
		filter: invert(100%) hue-rotate(180deg) brightness(90%)

	.developed-by
		color: var(--ptdss-fg3) imp

	.navbar-brand img[alt="Framasoft"]
		filter: brightness(150%) contrast(180%) brightness(85%) hue-rotate(-15deg)


	/* rules */

	body
		background-color: var(--ptdss-bg1)
		color: var(--ptdss-fg2)

	.fresh-news-card
		color: #000

	a
	.peertube-link
	#find-peertube-instances
	#find-peertube-videos
	p > a
	p > span > a
	p > strong > a
	article li > a
	.jpt-accordion .card li > a
	.jpt-accordion .card li > span > a
	.jpt-router-link
	footer a
	#main-header .menu-links span
	button.dropdown-toggle svg
	#home li > a
	#home p > a
	#home p > span > a
	#home p > strong > a
		color: var(--ptdss-fg2)
		&:hover
			opacity: 1 imp
			color: var(--ptdss-fg4)

	#main-header .menu-links .row-1 a
		color: var(--ptdss-fg2) imp
		&:hover
			color: var(--ptdss-fg4) imp

	.interface-language-dropdown
		.menu
			background-color: var(--ptdss-bg2)
			border-color: var(--ptdss-bo1)
		.menu-item
			color: var(--ptdss-fg2)

	.search-card-result h4
	.fc-g7
		color: var(--ptdss-fg2)

	.fb-g2
		background-color: var(--ptdss-bg2) /* TODO: need new color */

	.card
	.search-card-result
	.block-warning.block
	.big-container
	.small-container
		background-color: var(--ptdss-bg2) imp
		border-color: var(--ptdss-bo2) imp
		.metadata label
			color: var(--ptdss-fg1)

	.below-table
	.per-page select
	.previous
	.next
		color: var(--ptdss-fg3)

	.previous
	.next
		&.disabled
			opacity: 0.7 imp

	.dashboard
		.block
			color: var(--ptdss-fg2)
			background-color: var(--ptdss-bg2) imp
			canvas
				filter: brightness(150%) hue-rotate(-20deg)

	.input-group .input-group-text
		background-color: var(--ptdss-bg3) imp

	footer
		background-color: var(--ptdss-bg1) imp

	.card.card-instance
	.card.card-instance .jpt-secondary-button:not(:hover)
	.card-container .card
		background-color: var(--ptdss-bg1) imp

	.card-instance
	/*TODO: support.joinpeertube.org #f-sfs .ombre*/
		background-color: var(--ptdss-bg1)

	.accordion-item .card-header:hover
	.jpt-accordion .card-body
		background-color: var(--ptdss-bg1) imp

	.jpt-accordion .card
		border-color: var(--ptdss-bo1) imp

	#what .container
	#roadmap .col-lg-10
		border-color: var(--ptdss-bo2) imp

	.input-container input
		background: var(--ptdss-bg1) imp
		color: var(--ptdss-fg2) imp

	input[type="text"] ::placeholder
	input[type="text"]::placeholder
	.vue-tags-input ::placeholder
		color: var(--ptdss-fg3)

	.vue-tags-input
	&input
		background: var(--ptdss-bg2) imp

	.peertube-primary-button
		background: var(--ptdss-bg4)
		&:hover
			opacity: 1 imp
			background: var(--ptdss-bg3) imp

	.search-button
		border: none
		border-radius: 0 .375rem .375rem 0 imp

	input[name="search"]
		border-radius: .375rem 0 0 .375rem imp
		&:focus-visible
			box-shadow: none imp

	.peertube-secondary-button
	.jpt-secondary-button
		background: var(--ptdss-bg2)
		color: var(--ptdss-fg2)
		&:hover
			color: var(--ptdss-fg1)

	.peertube-secondary-button
	.select-container
		select
			color: var(--ptdss-fg2)
			option
				color: var(--ptdss-fg2)
				background: var(--ptdss-bg2) imp

	.peertube-secondary-button::after
		background-color: var(--ptdss-fg1) imp

	.select-container
		background: var(--ptdss-bg2) imp
		&::after
			border-top-color: var(--ptdss-fg1)

	.reset-button
		color: var(--ptdss-fg3)

	#main-footer .links-container
	#main-header
		background: var(--ptdss-bg2) imp
		border: none imp

	#main-footer .credits-container
		background: var(--ptdss-bg1) imp

	#main-header .contribute-button:not(.jpt-link-active):hover /* TODO */
		opacity: 1 imp
		filter: brightness(120%) saturate(150%)


/* apply changes */

@-moz-document url-prefix("https://joinpeertube.org"), url-prefix("https://search.joinpeertube.org"), url-prefix("https://instances.joinpeertube.org"), domain("sepiasearch.org"), domain("support.joinpeertube.org")
	@media (prefers-color-scheme: dark)
		ApplyTheme()
	if forceDark
		ApplyTheme()