gcal-dracula.user.css

/* ==UserStyle==
@name           Google Calendar Dracula
@namespace      github.com/dracula/google-calendar
@version        2.0.0
@description    A dark theme for Google Calendar
@author         accountingnerd [(https://github.com/accountingnerd)]
@homepageURL	https://github.com/dracula/google-calendar
==/UserStyle== */

@-moz-document domain("calendar.google.com")
{
	/* Insert code here... */
	:root
	{
		color-scheme: dark;
		--background: #282a36;
		--currentLine: #44475a;
		--foreground: #f8f8f2;
		--comment: #6272a4;
		--cyan: #8be9fd;
		--green: #50fa7b;
		--orange: #ffb86c;
		--pink: #ff79c6;
		--purple: #bd93f9;
		--red: #ff5555;
		--yellow: #f1fa8c;
	}

	body > div
	{
		background-color: var(--background);
		color: var(--foreground);
	}

	header
	{
		background-color: var(--background)!important;
	}

	header div span
	{
		color: var(--foreground)!important;
	}

	header svg path,
	header svg circle,
	header button div,
	header div,
	header i,
	/* Time Insights */
	div[jsname = hzkHAc] div,
	div[role = complementary] button div
	{
		color: var(--foreground)!important;
	}


	div[jsname = hzkHAc] div > div > div > div
	{
		color: var(--comment)!important;
	}

	div[jsname = hzkHAc] span svg,
	div[jsname = hzkHAc] span
	{
		color: var(--purple);
	}

	header form button svg path
	{
		color: var(--purple)!important;
	}

	header form,
	header form div
	{
		background-color: var(--currentLine)!important;
	}


	#drawerMiniMonthNavigator,
	/* Month Name */
	#drawerMiniMonthNavigator > div > div > span,
	/* Current Month Days */
	#drawerMiniMonthNavigator table td > button
	{
		color: var(--foreground);
	}

	.hEtGGf::before,
	.hEtGGf::after
	{
		display: none!important;
	}

	/* Day Headings */
	#drawerMiniMonthNavigator table th > span > div
	{
		color: var(--pink);
	}

	/* Other Month Days */
	#drawerMiniMonthNavigator table td.q2d9Ze > button
	{
		color: var(--comment);
	}

	li[role = listitem],
	li[role = listitem] div > span
	{
		color: var(--foreground);
	}

	div[role = search] div
	{
		color: var(--pink)
	}

	div[role = grid],
	div[role = grid] div[role = row],
	div[role = grid] div.SrADx div,
	/* Time Div */
	div.lqYlwe > div,
	ul[role = list]
	{
		background-color: var(--background)!important;
		color: var(--foreground);
	}

	/* Time Div */
	div.lqYlwe > div span
	{
		color: var(--foreground);
	}

	div[data-chips-dialog = true] span,
	div[data-chips-dialog = true] svg,
	div[data-chips-dialog = true] button,
	div[data-chips-dialog = true] i,
	div[data-chips-dialog = true] .google-material-icons,
	div[data-chips-dialog = true] .AzuXid,
	ul[role = menu] li,
	ul[role = menu] i,
	div[role = menu] > div,
	ul[role = menu],
	div[role = menuitemradio] div,
	div[role = menuitemradio] i.google-material-icons
	{
		color: var(--foreground);
	}

	div[data-chips-dialog = true] a,
	div[data-chips-dialog = true] i > a
	{
		color: var(--cyan)!important;
	}

	div[data-chips-dialog = true] ol > li,
	div[data-chips-dialog = true] .toUqff
	{
		color: var(--purple);
	}

	div[data-chips-dialog = true] input[type = text] *,
	div[data-chips-dialog = true] > span.kma42e label > span *,
	div[data-chips-dialog = true] > span.kma42e > div,
	/* Handle for Pop-up Calendar Add */
	div[data-chips-dialog = true] div.ChfiMc
	{
		color: var(--foreground);
	}

	div[data-chips-dialog = true] button > div
	{
		color: var(--foreground)
	}

	div[data-chips-dialog = true] ul > li span span,
	div[data-chips-dialog = true] ul > li
	{
		color: var(--foreground)!important;
	}

	div[data-chips-dialog = true] label > span,
	div[data-chips-dialog = true] label > div,
	div[data-chips-dialog = true] label > input
	{
		color: var(--foreground)!important;
	}

	div[data-chips-dialog = true] button[role = tab] div span,
	div[data-chips-dialog = true] button[role = tab] div
	{
		color: var(--purple)
	}

	div[role = "dialog"] > span > div > div
	{
		background-color: var(--currentLine);
	}

	div[data-chips-dialog = true]
	{
		border: 2px solid var(--pink);
		background-color: var(--currentLine) color: var(--currentLine)
	}

	div[role = "radiogroup"] label
	{
		color: var(--foreground)
	}

	div[role = combobox] div,
	div[role = combobox] div,
	div[role = combobox] span
	{
		color: var(--foreground)
	}

	div[role = presentation] h2 > div[role = link],
	.tWjOu,
	.tWjOu.pCcXPe,
	.tWjOu.N4XV7d
	{
		color: var(--foreground);
	}

	div[role = presentation] h2 > div[role = link]:hover
	{
		background-color: var(--purple);
	}


	/* Current Date - Week View */
	.tWjOu.F262Ye
	{
		color: var(--purple);
	}
	.nSCxEf.F262Ye
	{
		background-color: var(--purple);
	}

	/* Week View - Date Hover */
	.nSCxEf.RKLVef:hover,
	body.geSgge .nSCxEf.RKLVef:hover,
	.nSCxEf.N4XV7d.RKLVef:hover,
	body.geSgge .nSCxEf.N4XV7d.RKLVef:hover,
	.nSCxEf.F262Ye.RKLVef:hover,
	body.geSgge .nSCxEf.F262Ye.RKLVef:hover
	{
		background-color: var(--pink);
	}
	
	/* Week View -- Top Grid Line */
	.oXZ1yb.T8M5bd .uEzZIb::before,
	.oXZ1yb.T8M5bd .uEzZIb::after,
	.oXZ1yb.T8M5bd .UEmuKf::before
	{
		border-top: 1px solid var(--foreground);
	}
}


@-moz-document domain("tasks.google.com")
{
	:root
	{
		/* ===============================================================*/
		/* TODO: Fill in this image source with your own alternative image */
		--alternate-logo-source: url(none);
		/* ===============================================================*/
		color-scheme: dark;
		--background: #282a36;
		--currentLine: #44475a;
		--foreground: #f8f8f2;
		--comment: #6272a4;
		--cyan: #8be9fd;
		--green: #50fa7b;
		--orange: #ffb86c;
		--pink: #ff79c6;
		--purple: #bd93f9;
		--red: #ff5555;
		--yellow: #f1fa8c;
		--comment-dimmed: rgba(98, 114, 164, 1);
		--mdc-theme-on-surface: var(--foreground);
		--input-color: var(--foreground);
		--input-bg-low: var(--background);
	}

	body,
	.PV0kIb,
	.WpuB3,
	.PV0kIb.Huddmf:focus,
	.PV0kIb.Huddmf.u3bW4e,
	.PV0kIb.Huddmf:hover,
	.IjIG5b .VfPpkd-P5QLlc,
	.IjIG5b .VfPpkd-cnG4Wd,
	.PV0kIb.qfySBc.u3bW4e .NTkb2d
	{
		background-color: var(--background);
		color: var(--foreground);
	}

	.bs5ePe,
	.iySvp,
	.z80M1,
	.z80M1 .oJeWuf,
	.VPKgCb,
	.z80M1.N2RpBe::before,
	.htVQK,
	.c5Eg0 .FTYGPe .LeaINd,
	.c5Eg0 .zLElQ .WhQfHb
	{
		color: var(--foreground);
	}

	.c5Eg0 .eFxgkf
	{
		background-color: var(--purple);
	}

	.fKz7Od .Ce1Y1c,
	.DPvwYc
	{
		color: var(--comment);
		fill: var(--comment);
	}

	.FuZZcf
	{
		stroke: var(--comment);
	}

	.z80M1.N2RpBe::before
	{
		border-color: var(--foreground);
	}

	.z80M1.FwR7Pc
	{
		background-color: var(--purple);
	}

	.wVBRLd,
	.IjIG5b .VfPpkd-cnG4Wd
	{
		color: var(--foreground);
	}

	.bgdXWb
	{
		visibility: hidden;
	}

	.aGk3Qc.qfySBc,
	.JSvmTb
	{
		background-color: var(--background);
		color: var(--foreground);
		border-color: var(--background);
	}

	.UVq0Gb,
	.Kk7lMc-ae3xF-bN97Pc-LYNcwc
	{
		background-color: var(--background);
		color: var(--foreground, #f8f8f2);
	}

	.FpfHub
	{
		background-color: var(--currentLine);
		color: var(--foreground);
	}

	.Wrgejb,
	.P2Hi5d,
	.mkMxfe,
	.OBi8lb,
	.P9QRxe,
	.vqjb4e,
	.y8Rdrf,
	.DMZ54e,
	.CxMeM .VfPpkd-rymPhb-Gtdoyb,
	.CxMeM .VfPpkd-rymPhb-fpDzbe-fmcmS
	{
		color: var(--foreground, #f8f8f2);
	}

	.r6B9Fd .VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd,
	.JPdR6b,
	.aPtBGb,
	.g3VIld
	{
		background-color: var(--currentLine);
		color: var(--foreground);
	}

	.r6B9Fd .VfPpkd-rymPhb-ibnC6b.VfPpkd-rymPhb-ibnC6b-OWXEXe-gk6SMd span,
	.BQJfmc,
	.P2Hi5d,
	.mkMxfe,
	.OBi8lb,
	.P9QRxe,
	.vqjb4e,
	.y8Rdrf,
	.DMZ54e
	{
		color: var(--foreground);
	}

	.VfPpkd-vQzf8d,
	.VfPpkd-kBDsod,
	.DPvwYc,
	.HQ8yf:not(.RDPZE) .CwaK9
	{
		color: var(--purple);
	}

	.i69Mv,
	.i69Mv[aria-selected = false],
	.bRcSk.sY9Vnd.a5K8d
	{
		background-color: var(--background);
		border-color: var(--purple);
	}
	.i69Mv[aria-selected = true]
	{
		background-color: var(--purple)
	}
	.c5Eg0 .F262Ye:not(.eFxgkf)
	{
		background-color: var(--cyan);
		color: var(--comment);
	}
	.SWgLuf::-webkit-scrollbar
	{
		background: var(--background);
	}

	.SWgLuf::-webkit-scrollbar-thumb
	{
		background-color: var(--currentLine);
	}

	.g3VIld .rFrNMe .aXBtI,
	.mhclDb,
	.EF0HMe,
	.KQviY
	{
		background-color: var(--background);
	}

	.tL9Q4c,
	.zHQkBf,
	.mhclDb .LMgvRb:not(.DEh1R),
	.WKPSod .fBN9ld.RDPZE .oJeWuf,
	.iAdAj .wjA21c .VfPpkd-rymPhb-Gtdoyb,
	.iAdAj .wjA21c .VfPpkd-rymPhb-fpDzbe-fmcmS,
	.iAdAj .wjA21c .VfPpkd-rymPhb-ibnC6b-OWXEXe-SfQLQb-M1Soyc-Bz112c .VfPpkd-rymPhb-KkROqb
	{
		color: var(--foreground);
	}

	.w1rXsf.N2RpBe .Id5V1,
	.w1rXsf .nQOrEb
	{
		border-color: var(--purple);
	}

	.w1rXsf .Id5V1
	{
		border-color: var(--foreground);
	}

	.w1rXsf:not(.N2RpBe) + .juDnZc .snByac,
	.w1rXsf:not(.N2RpBe) + .juDnZc .zHQkBf,
	.w1rXsf:not(.N2RpBe) + .juDnZc .KQviY
	{
		color: var(--comment);
	}

	.OabDMe
	{
		background-color: var(--purple);
	}

	.WmnPA .VfPpkd-fmcmS-wGMbrd
	{
		caret-color: var(--purple);
	}

	.PV0kIb.qfySBc .NTkb2d:before
	{
		background: var(--background);
	}

	.RX7uYe
	{
		background: var(--background);
	}

	.PV0kIb.qfySBc:hover .NTkb2d:before
	{
		background: var(--background);
	}

	.PV0kIb.qfySBc:hover .RX7uYe,
	.PV0kIb.qfySBc:hover .NTkb2d
	{
		background-color: var(--background);
	}

	:not(.VfPpkd-rymPhb-ibnC6b-OWXEXe-OWB6Me).VfPpkd-rymPhb-ibnC6b .VfPpkd-rymPhb-pZXsl::before,
	:not(.VfPpkd-rymPhb-ibnC6b-OWXEXe-OWB6Me).VfPpkd-rymPhb-ibnC6b .VfPpkd-rymPhb-pZXsl::after
	{
		background-color: var(--mdc-ripple-color, --background);
	}

	.IERos .hWI7Ad,
	.IERos .onVpGf,
	.iAdAj .wjA21c[aria-current = true] .sI0yPe,
	.iAdAj .wjA21c[aria-current = false] .sI0yPe
	{
		color: var(--purple);
	}

	/* Checkboxes */
	.Rs7YHd .VfPpkd-muHVFf-bMcfAe:enabled:checked ~ .VfPpkd-YQoJzd,
	.Rs7YHd .VfPpkd-muHVFf-bMcfAe:enabled:indeterminate ~ .VfPpkd-YQoJzd,
	.Rs7YHd .VfPpkd-muHVFf-bMcfAe[data-indeterminate = true]:enabled ~ .VfPpkd-YQoJzd
	{
		border-color: var(--purple);
		background-color: var(--purple);
	}

	.HzZDfc,
	.lMIUad
	{
		color: var(--comment);
	}

	.bRcSk.sY9Vnd.a5K8d:hover:before,
	.bRcSk.sY9Vnd.a5K8d:focus:before,
	.bRcSk.sY9Vnd.a5K8d:focus-within:not(:focus):before
	{
		background-color: var(--currentLine);
	}

	.bRcSk.sY9Vnd.a5K8d:focus,
	.bRcSk.sY9Vnd.a5K8d:focus-within
	{
		border-color: var(--currentLine);
	}

	.jPE70 .PNVtnb
	{
		color: var(--comment);
	}

	.zRfOtf
	{
		background-color: var(--currentLine);
		border-color: var(--cyan);
	}

	.cHxrOd
	{
		color: var(--foreground);
	}

	.lq5Efd.XEiI1b:hover
	{
		background-color: var(--background);
	}

	.BU0ogb
	{
		color: var(--pink)
	}

	.fUHEuc,
	.Fx3JUe.Fx3JUe.Fx3JUe
	{
		color: var(--foreground);
		caret-color: var(--foreground);
	}
}