Dark theme for Unsplash.
Unsplash - Dark X by Saadski
Details
AuthorSaadski
LicenseNo License
Categoryhttps://unsplash.com/
Created
Updated
Size13 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Unsplash - Dark X
@version 20240818.21.35
@namespace https://userstyles.world/user/Saadski
@description Dark theme for Unsplash.
@author Saadski
@license No License
==/UserStyle== */
@-moz-document domain("unsplash.com") {
/* Unsplash */
/*Presets*/
:root
{
--dark0: rgb(33, 33, 33);
--dark: rgb(28, 28, 28);
--dark1: rgb(27, 27, 27);
--darker: rgb(18, 18, 18);
--darker2: rgb(12, 12, 12);
--darker3: rgb(8, 8, 8);
--bw: rgb(67, 67, 67);
--light: rgb(166, 166, 166);
--lightl: rgb(146, 146, 146);
--light1: rgb(193, 193, 193);
--lighter: rgb(233, 233, 233);
--accent: rgb(95, 95, 95);
--shadow: rgba(0, 0, 0, 0.07);
--tp: #fff0;
--ol: #090909F2;
}
.Xa5QZ,
.H8pLI,
*,
.UyVIg
{
--font-smoothing: auto;
--background-color: var(--darker3);
--button-primary-background-color: #111;
--button-primary-text-color: #fff;
--faded-text-color: #d1d1d1;
--form-input-radio-button-border-color: #d1d1d1;
--form-input-radio-button-checked-border-color: #007fff;
--form-input-radio-button-checked-dot-color: #007fff;
--link-text-color-hover: var(--accent) !important;
--link-text-color: #767676;
--placeholder-background-color: #0000000d;
--plus-disclaimers-highlighted-discount: #c0c;
--plus-pricing-options-discount-pill-text-color: #007fff;
--plus-pricing-options-discount-pill-background: #00e0ff33;
--plus-pricing-options-discount-pill-border-color: #0000;
--small-faded-text-color: #767676;
--text-color: #111;
}
:root
{
--body-bg: rgb(255, 255, 255);
--body-image: none;
--body-bg-rgb: 255, 255, 255;
--body-border: rgb(230, 230, 230);
--body-primary-color: #1a1a1a;
--body-secondary-color: #737373;
--body-reaction-bg: var(--darker);
--body-reaction-text-color: rgb(64, 64, 64);
--body-toc-active-border: #737373;
--body-toc-inactive-border: #f2f2f2;
--body-toc-inactive-color: #737373;
--body-toc-active-font-weight: 400;
--body-table-border: rgb(204, 204, 204);
--body-color: hsl(0, 0%, 0%);
--footer-bg: var(--darker2);
--footer-image: none;
--footer-border: rgb(230, 230, 230);
--footer-color: hsl(211, 10%, 61%);
--header-bg: rgb(17, 17, 17);
--header-image: none;
--header-color: hsl(0, 0%, 100%);
--collection-card-bg: rgb(255, 255, 255);
--collection-card-image: none;
--collection-card-color: hsl(0, 0%, 7%);
--card-bg: rgb(255, 255, 255);
--card-border-color: rgb(230, 230, 230);
--card-border-inner-radius: 6px;
--card-border-radius: 8px;
--card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--search-bar-border-radius: 10px;
--search-bar-width: 100%;
--ticket-blue-bg-color: #dce1f9;
--ticket-blue-text-color: #334bfa;
--ticket-green-bg-color: #d7efdc;
--ticket-green-text-color: #0f7134;
--ticket-orange-bg-color: #ffebdb;
--ticket-orange-text-color: #b24d00;
--header-height: 245px;
--header-subheader-background-color: ;
--header-subheader-font-color: ;
--content-block-color: hsl(0, 0%, 0%);
--content-block-button-color: hsl(0, 0%, 0%);
--content-block-button-radius: nullpx;
--primary-color: hsl(0, 0%, 7%);
--primary-color-alpha-10: hsla(0, 0%, 7%, 0.1);
--primary-color-alpha-60: hsla(0, 0%, 7%, 0.6);
--text-on-primary-color: #ffffff;
}
::placeholder
{
color: var(--light) !important;
}
/*SCROLLBAR*/
/* width */
::-webkit-scrollbar
{
height: 10px !important;
width: 10px !important;
}
/* Track */
/* Scrollbar Corner */
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner
{
background: #141414 !important;
}
/* Handle */
::-webkit-scrollbar-thumb
{
background: #3A3A3A !important;
border-radius: 1px !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
background: #3A3A3A !important;
}
::selection
{
background: #353535B0 !important;
color: #000 !important;
}
.Olora:focus,
.Olora:hover,
:is(.qT3N_, a):hover
{
color: var(--link-text-color-hover)!important
}
*,
[class="btn btn-default btn-block-level btn-facebook js-login-with-facebook"]
{
color: var(--lighter)!important
}
a .pill,
a:hover .pill,
svg
{
color: var(--light)!important
}
*
{
border-color: var(--dark0)!important;
text-shadow: 1px 1px 2px var(--dark0);
}
.ZketX,
.cJK05
{
border-color: var(--tp)!important;
border-top-color: var(--tp)!important;
border-bottom-color: var(--tp)!important
}
body,
html
{
background: var(--darker3)!important
}
.ESead,
.GD3rC,
.GD3rC:active,
.GD3rC:focus,
.GD3rC:hover,
.navbar,
.p1cWU,
.uFivT,
.xWFB_,
.gDzQS,
.vActZ
{
background: #0000004d!important;
backdrop-filter: blur(12px);
z-index: 1
}
.b4j4s,
.navigation,
.k13Nq,
.dCpDW
{
background: #0000007D!important;
backdrop-filter: blur(12px);
z-index: 1
}
.D9k_6,
.Ha8Q_,
.IquXd:focus,
.Jmx3T,
.KfefF,
.QgmcV,
.SHqxb:hover,
.ZHxHR,
.btn--small.btn-icon,
.btn-group-sm > .btn-icon.btn,
.ePF7z.pVbsY,
.ob_1e
{
background: var(--dark)
}
.IquXd:hover
{
background: var(--tp)!important
}
.D1hjc,
.IYEj0,
.NaIoK,
.UwY3R,
.Xfs7k,
.Zkqb_,
.btn,
.cGPoK,
.callout-flex-group,
.f4Se1,
.gcMAO,
.jjyKV:hover,
.l_Ro7,
.lfdvq,
.nC7we,
.q18A5,
.u9nHg,
[class="UdjLS oXw2J RzFNi VpdIv"],
[style="background-color: rgb(255, 255, 255);"]
{
background: var(--darker)!important
}
.Mk1iL:hover,
.iXtuW,
.login__alt-cta,
.mm8Y2,
.oUncV,
.ppE6r,
.slide__container
{
background: var(--darker2)
}
.NTfdD,
.fBS9b
{
background: var(--darker3)
}
.SX05e
{
background: linear-gradient(180deg, #fff0, var(--darker2))
}
svg
{
fill: var(--light)!important
}
.CnNKA,
.login__logo
{
filter: invert(1)
}
.oLiNE
{
box-shadow: inset 0 -1px var(--dark0)
}
.HTP5W
{
box-shadow: inset 0 -2px var(--bw)
}
.tFjg6
{
background: var(--ol)
}
.fBS9b
{
box-shadow: 0 0 9px 1px var(--dark)
}
.LCoFy,
.SXSYh,
.KchnC,
.vBq9w
{
margin-left: -2px;
background: #000000C2;
border-radius: 10px;
backdrop-filter: blur(5px)!important
}
.i52RW
{
stroke: var(--accent)
}
.PTz06,
.navbar__logo
{
filter: invert(1) contrast(.9)
}
.RzaUE
{
background-color: var(--darker);
box-shadow: 0 0 0 40px var(--darker)
}
.wynHU
{
background-color: #00000087
}
.Oo8Aa
{
color: #e25c3d!important
}
.J1ChR,
.RpNxp
{
color: #3cb46e!important
}
.xXiXE
{
box-shadow: inset 0 -40px 40px -30px var(--dark)
}
.EMC2J
{
background: var(--tp)
}
.jOI2U
{
background-color: #f15151!important
}
.jOI2U:hover
{
background-color: #e04c4c!important
}
#modal-portal > div > div > div > div.Lvlem.fBS9b > div > div > div:first-child > div.IDj6P.voTTC > header > div.EdCFo > button.xFNhr.slPFO.DQBsa.p1cWU.jpBZ0.EzsBC.KHq0c.IKU9M.zhYdL.I0aPD.dEcXu > svg > path,
.zAWsW
{
fill: var(--darker3)!important
}
.slPFO
{
background-color: #3cb46e!important;
color: var(--darker3)!important
}
.OHtll:hover,
.Olora:hover,
.p1cWU:hover
{
border: 1px solid var(--light)!important
}
.Ha8Q_:hover
{
background-color: var(--dark)
}
.D6U1i,
.H6Xmx,
.J7rXh,
.post-card
{
background: var(--darker)
}
.kq21W,
.zSoNm:hover
{
background-color: var(--darker2)
}
.JCGkV
{
background-image: radial-gradient(#0000, var(--darker2))
}
.kq21W
{
background-color: var(--darker3);
background-image: linear-gradient(180deg, #0000 4px, var(--darker) 0), linear-gradient(90deg, var(--darker) 2px, #0000 0), linear-gradient(90deg, #0000 4px, var(--darker) 0), linear-gradient(180deg, var(--darker) 2px, #0000 0);
background-position: 50%;
background-size: 10px 10px, 50px 50px;
display: flex
}
.zSoNm:not(:last-child)
{
box-shadow: inset 0 -1px 0 0 var(--dark0)
}
.zSoNm:not(:last-child):hover
{
box-shadow: inset 0 -1px 0 0 var(--bw)
}
.post-card:hover
{
box-shadow: 0 35px 80px -20px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(255, 255, 255, .08);
}
.cjqKA
{
border-bottom-color: var(--bw) !important;
}
.mNDtF
{
box-shadow: 0 0 0 1px var(--dark0);
display: flex;
}
.ITLOu
{
background-color: var(--dark0);
height: 32px;
width: 1px;
}
.Mk1iL:not([disabled]):hover
{
background-color: var(--dark);
}
.E7rbd
{
background: var(--darker)
}
/* Backgrounds */
.zTt6Y,
.otUs3,
.qAqFb,
.t5Ax6,
...