Skip to content

Commit

Permalink
Add styles for schedule
Browse files Browse the repository at this point in the history
  • Loading branch information
ryelle committed Aug 1, 2024
1 parent 7128416 commit 689b563
Show file tree
Hide file tree
Showing 3 changed files with 523 additions and 0 deletions.
262 changes: 262 additions & 0 deletions css/includes/schedule.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
1 change: 1 addition & 0 deletions css/style.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 689b563

Please sign in to comment.