From 689b5634b7289fef2b90911d0133999d8fac57d1 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 1 Aug 2024 17:16:10 -0400
Subject: [PATCH] Add styles for schedule

---
 css/includes/schedule.css | 262 ++++++++++++++++++++++++++++++++++++++
 css/style.css             |   1 +
 style.css                 | 260 +++++++++++++++++++++++++++++++++++++
 3 files changed, 523 insertions(+)
 create mode 100644 css/includes/schedule.css

diff --git a/css/includes/schedule.css b/css/includes/schedule.css
new file mode 100644
index 0000000..50d123e
--- /dev/null
+++ b/css/includes/schedule.css
@@ -0,0 +1,262 @@
+
+body.single-wcb_session {
+
+	& .wp-block-post-terms {
+		font-size: inherit;
+
+		& .wp-block-post-terms__prefix {
+			color: inherit;
+		}
+
+		& a {
+			text-decoration: underline;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+	}
+
+}
+
+/* Specificity hack */
+
+.wordcamp-schedule:not(#hack) {
+	--wc-schedule--color--background: var(--wp--preset--color--base);
+	--wc-schedule--color--text: var(--wp--preset--color--contrast);
+	--wc-schedule--link--color--text: var(--wp--preset--color--accent-2);
+	--wc-schedule--session--border--color: var(--wp--preset--color--accent-3);
+
+	& .wordcamp-schedule__date {
+		display: none;
+	}
+
+	& a:where(:not(.wp-element-button)) {
+		color: var(--wc-schedule--link--color--text);
+	}
+
+	& .wordcamp-schedule__day {
+		background-color: var(--wc-schedule--color--background);
+	}
+
+	& .wordcamp-schedule__session,
+	& .wordcamp-schedule__time-slot-header {
+		padding: 1.5rem;
+		outline: 1px solid var(--wc-schedule--session--border--color);
+		box-shadow: none;
+	}
+
+	& .wordcamp-schedule__column-header {
+		position: sticky;
+		top: var(--wp-admin--admin-bar--height, 0);
+		margin: 0;
+		font-size: 1em;
+		font-weight: 400;
+		background-color: var(--wp--preset--color--accent-3);
+		outline: 1px solid var(--wp--preset--color--contrast);
+		box-shadow: none;
+	}
+
+	/* Showcase day ID */
+	/* stylelint-disable-next-line selector-id-pattern */
+	& #wordcamp-schedule__day-2023-08-26-tracks-all .wordcamp-schedule__column-header {
+		background-color: var(--wp--preset--color--contrast);
+		outline: 1px solid var(--wp--preset--color--accent-2);
+		color: var(--wp--preset--color--base);
+	}
+
+	& .wordcamp-schedule__time-slot-header {
+		font-size: 1em;
+		text-align: revert;
+	}
+
+	& .wordcamp-schedule__session {
+		font-size: inherit;
+		position: relative;
+		background: var(--wc-schedule--color--background);
+
+		& > * {
+			margin: 0;
+
+			& + * {
+				margin-top: 0.5rem;
+			}
+		}
+
+		&.is-spanning-some-tracks {
+			text-align: inherit;
+		}
+
+		&:where(.is-type-session):hover,
+		&:where(.is-type-session):focus-within {
+
+			/* Override other states. */
+			background: var(--wp--preset--color--base-2) !important;
+			color: var(--wp--preset--color--contrast) !important;
+
+			& a:where(:not(.wp-element-button)) {
+				color: var(--wc-schedule--link--color--text) !important;
+			}
+
+			&:not(.wcb-favourite-session) .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline.svg);
+			}
+		}
+
+		& .wcb-session-favourite-icon {
+			font-size: 16px;
+
+			& a {
+				display: block;
+				height: 24px;
+				width: 24px;
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline.svg);
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 32px 32px;
+
+				& .dashicon {
+					display: none;
+				}
+			}
+		}
+
+		&.has-category-lightning {
+			background: var(--wp--preset--color--contrast);
+			color: var(--wp--preset--color--accent-3);
+
+			& a:where(:not(.wp-element-button)) {
+				color: var(--wp--preset--color--base);
+			}
+
+			& .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline-light.svg);
+			}
+		}
+
+		&.wcb-favourite-session {
+			outline: 5px solid var(--wp--preset--color--accent);
+			outline-offset: -5px;
+
+			& .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-filled.svg);
+			}
+		}
+	}
+
+	& .wordcamp-schedule__session-title {
+		display: revert;
+		padding-inline-end: 26px;
+		font-size: 1.3125rem;
+		font-style: normal;
+		line-height: 1.25;
+
+		& .wcb-session-favourite-icon {
+			position: absolute;
+			inset: 1.5rem 1.5rem auto auto;
+		}
+
+		& > a {
+			display: inline-block;
+
+			&::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: 0;
+			}
+		}
+	}
+
+	& .has-category-lightning .wordcamp-schedule__session-title {
+		font-size: 1.1rem;
+	}
+
+	& .wordcamp-schedule__session-speakers a {
+		position: relative;
+		z-index: 1;
+	}
+
+	& .wordcamp-schedule__session-category {
+		color: inherit;
+		font-style: normal;
+	}
+
+	@media (max-width: 1000px) {
+
+		& .wordcamp-schedule__day {
+			display: revert;
+			border-bottom: none;
+		}
+
+		& .wordcamp-schedule__column-header {
+			display: none;
+		}
+
+		& .wordcamp-schedule__session,
+		& .wordcamp-schedule__time-slot-header {
+			box-shadow: none;
+		}
+
+		& .wordcamp-schedule__time-slot-header {
+			position: sticky;
+			top: var(--wp-admin--admin-bar--height, 0);
+			z-index: 10;
+			padding-block: 0.5rem;
+			font-size: 1em;
+			background-color: var(--wp--preset--color--base-2);
+		}
+
+		/* Showcase day ID */
+		/* stylelint-disable-next-line selector-id-pattern */
+		& #wordcamp-schedule__day-2023-08-26-tracks-all .wordcamp-schedule__time-slot-header {
+			background-color: var(--wp--preset--color--contrast);
+			outline: 1px solid var(--wp--preset--color--accent-2);
+			color: var(--wp--preset--color--base);
+		}
+
+		& .has-category-lightning .wordcamp-schedule__session-title {
+			font-size: 1.3125rem;
+		}
+
+		& .wordcamp-schedule__session::before {
+			display: inline-block;
+			margin-block-end: 4px;
+			font-size: 1em;
+		}
+
+		& .has-track-1-woodrow-wilson::before {
+			content: "Woodrow Wilson";
+		}
+
+		& .has-track-2-annapolis::before {
+			content: "Annapolis";
+		}
+
+		& .has-track-3-cherry-blossom::before {
+			content: "Cherry Blossom";
+		}
+
+		& .is-spanning-all-tracks::before {
+			content: "All tracks" !important;
+		}
+	}
+
+	@media (max-width: 600px) {
+
+		& .wordcamp-schedule__time-slot-header {
+			top: 0;
+		}
+	}
+
+	@media (max-width: 549px) {
+
+		& .wordcamp-schedule__time-slot-header {
+			margin-top: 0;
+		}
+
+		& .wordcamp-schedule__session-tracks {
+			display: none;
+		}
+	}
+}
diff --git a/css/style.css b/css/style.css
index 2a18ddb..332ab99 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,3 +2,4 @@
 @import "includes/tickets.css";
 @import "includes/people.css";
 @import "includes/attendees.css";
+@import "includes/schedule.css";
diff --git a/style.css b/style.css
index 1a66c1d..fda3024 100644
--- a/style.css
+++ b/style.css
@@ -541,3 +541,263 @@ body.single-wcb_organizer .wp-block-post-content .wp-block-read-more {
 	#tix-attendees .tix-attendee-url {
 		display: none;
 	}
+
+body.single-wcb_session .wp-block-post-terms {
+		font-size: inherit;
+	}
+
+body.single-wcb_session .wp-block-post-terms .wp-block-post-terms__prefix {
+			color: inherit;
+		}
+
+body.single-wcb_session .wp-block-post-terms a {
+			text-decoration: underline;
+		}
+
+body.single-wcb_session .wp-block-post-terms a:hover {
+				text-decoration: none;
+			}
+
+/* Specificity hack */
+
+.wordcamp-schedule:not(#hack) {
+	--wc-schedule--color--background: var(--wp--preset--color--base);
+	--wc-schedule--color--text: var(--wp--preset--color--contrast);
+	--wc-schedule--link--color--text: var(--wp--preset--color--accent-2);
+	--wc-schedule--session--border--color: var(--wp--preset--color--accent-3);
+}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__date {
+		display: none;
+	}
+
+.wordcamp-schedule:not(#hack) a:where(:not(.wp-element-button)) {
+		color: var(--wc-schedule--link--color--text);
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__day {
+		background-color: var(--wc-schedule--color--background);
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session,
+	.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+		padding: 1.5rem;
+		outline: 1px solid var(--wc-schedule--session--border--color);
+		box-shadow: none;
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__column-header {
+		position: sticky;
+		top: var(--wp-admin--admin-bar--height, 0);
+		margin: 0;
+		font-size: 1em;
+		font-weight: 400;
+		background-color: var(--wp--preset--color--accent-3);
+		outline: 1px solid var(--wp--preset--color--contrast);
+		box-shadow: none;
+	}
+
+/* Showcase day ID */
+
+/* stylelint-disable-next-line selector-id-pattern */
+
+.wordcamp-schedule:not(#hack) #wordcamp-schedule__day-2023-08-26-tracks-all .wordcamp-schedule__column-header {
+		background-color: var(--wp--preset--color--contrast);
+		outline: 1px solid var(--wp--preset--color--accent-2);
+		color: var(--wp--preset--color--base);
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+		font-size: 1em;
+		text-align: revert;
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session {
+		font-size: inherit;
+		position: relative;
+		background: var(--wc-schedule--color--background);
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session > * {
+			margin: 0;
+		}
+
+:is(.wordcamp-schedule:not(#hack) .wordcamp-schedule__session > *) + * {
+				margin-top: 0.5rem;
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.is-spanning-some-tracks {
+			text-align: inherit;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):hover,
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):focus-within {
+
+			/* Override other states. */
+			background: var(--wp--preset--color--base-2) !important;
+			color: var(--wp--preset--color--contrast) !important;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):hover a:where(:not(.wp-element-button)), .wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):focus-within a:where(:not(.wp-element-button)) {
+				color: var(--wc-schedule--link--color--text) !important;
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):hover:not(.wcb-favourite-session) .wcb-session-favourite-icon a, .wordcamp-schedule:not(#hack) .wordcamp-schedule__session:where(.is-type-session):focus-within:not(.wcb-favourite-session) .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline.svg);
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session .wcb-session-favourite-icon {
+			font-size: 16px;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session .wcb-session-favourite-icon a {
+				display: block;
+				height: 24px;
+				width: 24px;
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline.svg);
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 32px 32px;
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session .wcb-session-favourite-icon a .dashicon {
+					display: none;
+				}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.has-category-lightning {
+			background: var(--wp--preset--color--contrast);
+			color: var(--wp--preset--color--accent-3);
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.has-category-lightning a:where(:not(.wp-element-button)) {
+				color: var(--wp--preset--color--base);
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.has-category-lightning .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-outline-light.svg);
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.wcb-favourite-session {
+			outline: 5px solid var(--wp--preset--color--accent);
+			outline-offset: -5px;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session.wcb-favourite-session .wcb-session-favourite-icon a {
+				background-image: url(https://wc-us.org/wp-content/uploads/2024/07/star-filled.svg);
+			}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-title {
+		display: revert;
+		padding-inline-end: 26px;
+		font-size: 1.3125rem;
+		font-style: normal;
+		line-height: 1.25;
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-title .wcb-session-favourite-icon {
+			position: absolute;
+			inset: 1.5rem 1.5rem auto auto;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-title > a {
+			display: inline-block;
+		}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-title > a::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+				z-index: 0;
+			}
+
+.wordcamp-schedule:not(#hack) .has-category-lightning .wordcamp-schedule__session-title {
+		font-size: 1.1rem;
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-speakers a {
+		position: relative;
+		z-index: 1;
+	}
+
+.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-category {
+		color: inherit;
+		font-style: normal;
+	}
+
+@media (max-width: 1000px) {
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__day {
+			display: revert;
+			border-bottom: none;
+		}
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__column-header {
+			display: none;
+		}
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__session,
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+			box-shadow: none;
+		}
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+			position: sticky;
+			top: var(--wp-admin--admin-bar--height, 0);
+			z-index: 10;
+			padding-block: 0.5rem;
+			font-size: 1em;
+			background-color: var(--wp--preset--color--base-2);
+		}
+
+		/* Showcase day ID */
+		/* stylelint-disable-next-line selector-id-pattern */
+		.wordcamp-schedule:not(#hack) #wordcamp-schedule__day-2023-08-26-tracks-all .wordcamp-schedule__time-slot-header {
+			background-color: var(--wp--preset--color--contrast);
+			outline: 1px solid var(--wp--preset--color--accent-2);
+			color: var(--wp--preset--color--base);
+		}
+
+		.wordcamp-schedule:not(#hack) .has-category-lightning .wordcamp-schedule__session-title {
+			font-size: 1.3125rem;
+		}
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__session::before {
+			display: inline-block;
+			margin-block-end: 4px;
+			font-size: 1em;
+		}
+
+		.wordcamp-schedule:not(#hack) .has-track-1-woodrow-wilson::before {
+			content: "Woodrow Wilson";
+		}
+
+		.wordcamp-schedule:not(#hack) .has-track-2-annapolis::before {
+			content: "Annapolis";
+		}
+
+		.wordcamp-schedule:not(#hack) .has-track-3-cherry-blossom::before {
+			content: "Cherry Blossom";
+		}
+
+		.wordcamp-schedule:not(#hack) .is-spanning-all-tracks::before {
+			content: "All tracks" !important;
+		}
+	}
+
+@media (max-width: 600px) {
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+			top: 0;
+		}
+	}
+
+@media (max-width: 549px) {
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__time-slot-header {
+			margin-top: 0;
+		}
+
+		.wordcamp-schedule:not(#hack) .wordcamp-schedule__session-tracks {
+			display: none;
+		}
+	}