treehouse/static/css/tree.css

429 lines
16 KiB
CSS
Raw Normal View History

2024-01-18 22:46:57 +01:00
/*** Icons ***/
:root {
--icon-breadcrumb: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTYgMTIgNC00LTQtNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNTU0MjNlIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
--icon-expand: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iIzU1NDIzZSIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
--icon-leaf: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiM1NTQyM2UiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
--icon-collapse: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
--icon-more: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQgNiA0IDQgNC00IiBmaWxsPSJub25lIiBzdHJva2U9IiM1NTQyM2UiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
--icon-permalink: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiM1NTQyM2UiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
--icon-go: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iIzU1NDIzZSIvPjwvc3ZnPg==");
}
@media (prefers-color-scheme: dark) {
:root {
--icon-breadcrumb: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTYgMTIgNC00LTQtNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDdjZGJmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=');
--icon-expand: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtNyA1di0zaC0ydjNoLTN2MmgzdjNoMnYtM2gzdi0yeiIgZmlsbD0iI2Q3Y2RiZiIgZmlsbC1vcGFjaXR5PSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+');
--icon-leaf: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIGZpbGw9IiNkN2NkYmYiIGZpbGwtb3BhY2l0eT0iLjUiIHI9IjIiLz48L3N2Zz4=');
--icon-collapse: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB3aWR0aD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMgNmg2IiBzdHJva2U9IiNkN2NkYmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
--icon-permalink: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNjU2ODYgMiAxLjQxNDIxIDEuNDE0MjJjLjY4MDUxLjY4MDUxIDEuMDY0NTMgMS41NDUyMSAxLjE1MjEzIDIuNDMzNjIuODg4NC4wODc2IDEuNzUzMS40NzE2NSAyLjQzMzcgMS4xNTIxNmwxLjQxNDIgMS40MTQyMmMxLjU2MjEgMS41NjIwOSAxLjU2MjEgNC4wOTQ3OCAwIDUuNjU2ODhzLTQuMDk0NzkgMS41NjIxLTUuNjU2ODggMGwtMS40MTQyMi0xLjQxNDJjLS42ODA1MS0uNjgwNi0xLjA2NDU2LTEuNTQ1My0xLjE1MjE2LTIuNDMzNy0uODg4NDEtLjA4NzYtMS43NTMxMS0uNDcxNjItMi40MzM2Mi0xLjE1MjEzbC0xLjQxNDIyLTEuNDE0MjFjLTEuNTYyMDk0LTEuNTYyMS0xLjU2MjA5NC00LjA5NDc2IDAtNS42NTY4NiAxLjU2MjEtMS41NjIwOTQgNC4wOTQ3Ni0xLjU2MjA5NCA1LjY1Njg2IDB6bS42MTggNy42ODkwN2MtLjE0NDMuMDg1MjItLjI5MjgxLjE2MDYxLS40NDQ1NS4yMjYxNi4wMjA4My40ODI1Ny4yMTU0Ni45NTg5Ny41ODM5MSAxLjMyNzM3bDEuNDE0MjEgMS40MTQzYy43ODEwNy43ODEgMi4wNDczNy43ODEgMi44Mjg0NyAwIC43ODEtLjc4MTEuNzgxLTIuMDQ3NCAwLTIuODI4NDdsLTEuNDE0My0xLjQxNDIxYy0uMzY4NC0uMzY4NDUtLjg0NDgtLjU2MzA4LTEuMzI3MzctLjU4MzkxLS4wNjU1NS4xNTE3My0uMTQwOTMuMzAwMjQtLjIyNjE2LjQ0NDU0bDEuODQ2NDMgMS44NDY0NS0xLjQxNDIgMS40MTQyem0tLjYxOC00Ljg2MDY0Yy4zNjg0NC4zNjg0NS41NjMwOC44NDQ4OC41ODM5MSAxLjMyNzQyLS4xNTE3NC4wNjU1NC0uMzAwMjQuMTQwOTMtLjQ0NDU0LjIyNjE1bC0xLjkxNzU0LTEuOTE3NTMtMS40MTQyMSAxLjQxNDIxIDEuOTE3NTMgMS45MTc1M2MtLjA4NTIzLjE0NDMxLS4xNjA2MS4yOTI4Mi0uMjI2MTYuNDQ0NTYtLjQ4MjU0LS4wMjA4My0uOTU4OTctLjIxNTQ3LTEuMzI3NDItLjU4MzkxbC0xLjQxNDIxLTEuNDE0MjJjLS43ODEwNS0uNzgxMDUtLjc4MTA1LTIuMDQ3MzcgMC0yLjgyODQyczIuMDQ3MzctLjc4MTA1IDIuODI4NDIgMHoiIGZpbGw9IiNkN2NkYmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");
--icon-go: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTEwLjU4NTggNy0yLjI5Mjg5LTIuMjkyODkgMS40MTQyMS0xLjQxNDIyIDQuNzA3MDggNC43MDcxMS00LjcwNzA4IDQuNzA3MS0xLjQxNDIxLTEuNDE0MiAyLjI5Mjg5LTIuMjkyOWgtNy41ODU4di0yeiIgZmlsbD0iI2Q3Y2RiZiIvPjwvc3ZnPg==");
--icon-more: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE2IiB3aWR0aD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQgNiA0IDQgNC00IiBmaWxsPSJub25lIiBzdHJva2U9IiNkN2NkYmYiIHN0cm9rZS1vcGFjaXR5PSIuNSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+');
}
}
2024-02-07 15:33:46 +01:00
/*** Variables ***/
:root {
2024-06-13 21:50:09 +02:00
--tree-indent-width: 2rem;
2024-02-07 15:33:46 +01:00
--transition-duration: 0.15s;
2024-06-13 21:50:09 +02:00
--button-bar-icon-size: 1.75rem;
2024-02-07 15:33:46 +01:00
}
2023-08-28 21:14:51 +02:00
/*** Breadcrumbs ***/
.breadcrumbs {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: min-content;
margin: 0;
padding: 0;
align-items: center;
opacity: 70%;
}
.breadcrumb::before {
content: '';
display: inline-block;
2024-02-06 21:37:26 +01:00
background-image: var(--icon-breadcrumb);
2023-08-28 21:14:51 +02:00
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 70%;
2024-06-13 21:50:09 +02:00
width: 2.25rem;
2023-08-28 21:14:51 +02:00
height: 1.2em;
vertical-align: text-bottom;
}
.breadcrumb a {
--recursive-mono: 1.0;
--recursive-wght: 500;
color: var(--text-color);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
/*** Tree ***/
2024-02-07 15:33:46 +01:00
.tree {
--tree-indent-guide-dim: transparent;
--tree-indent-guide-highlighted: transparent;
}
.tree:has(.branch-container:hover) {
--tree-indent-guide-dim: transparent;
--tree-indent-guide-highlighted: var(--border-1);
}
2024-02-22 20:42:49 +01:00
@media (hover: none) {
.tree {
--tree-indent-guide-dim: var(--border-1);
--tree-indent-guide-highlighted: var(--border-1);
}
}
2024-02-07 15:33:46 +01:00
/* Use an indent level appropriate for the viewport. */
2023-08-18 19:25:38 +02:00
.tree ul {
2024-06-13 21:50:09 +02:00
--tree-responsive-indent-width: clamp(var(--8px), 2vw, var(--tree-indent-width));
2024-02-07 15:33:46 +01:00
/* Draw indent guides. */
padding-left: calc(var(--tree-responsive-indent-width) / 2);
margin-left: calc(var(--tree-responsive-indent-width) / 2);
2024-06-13 21:50:09 +02:00
border-left: var(--1px) solid var(--tree-indent-guide-dim);
2024-02-07 15:33:46 +01:00
transition: border-left-color var(--transition-duration);
2023-08-20 15:54:06 +02:00
}
2024-02-07 15:33:46 +01:00
.tree details:has(.branch-container:hover)>ul {
border-left-color: var(--tree-indent-guide-highlighted);
}
2024-02-22 20:42:49 +01:00
2024-02-07 15:33:46 +01:00
/* Top level should not have an indent or a border. */
2023-08-20 15:54:06 +02:00
.tree>ul {
padding-left: 0;
2024-02-07 15:33:46 +01:00
border-left: none;
2023-08-18 19:25:38 +02:00
}
2024-02-06 21:37:26 +01:00
.tree details {
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
/* Disable the rightwards chevron in <details> elements */
&>summary {
list-style: none;
cursor: pointer;
2023-08-18 19:25:38 +02:00
2024-02-06 21:37:26 +01:00
&::-webkit-details-marker {
display: none;
}
}
2023-08-27 19:40:47 +02:00
}
2024-02-06 21:37:26 +01:00
/* Child branches */
2023-08-18 19:25:38 +02:00
.tree li {
2024-02-06 21:37:26 +01:00
/* <li> elements should not have any bullet points or whatever */
2023-08-18 19:25:38 +02:00
list-style: none;
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
/* Stretch branch content to the full width of the page */
&>div,
&>details {
width: 100%;
}
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
/* Add an underline for leaf branches */
&>div {
box-sizing: border-box;
2023-08-20 13:46:54 +02:00
2024-06-13 21:50:09 +02:00
margin-bottom: calc(- var(--1px));
border-bottom: var(--1px) solid transparent;
2024-02-07 15:33:46 +01:00
transition: border-bottom-color var(--transition-duration);
2024-02-06 21:37:26 +01:00
&:hover {
2024-02-07 15:33:46 +01:00
border-bottom-color: var(--border-1);
2024-02-06 21:37:26 +01:00
}
}
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
&>div,
&>details>summary {
/* Child elements are laid out horizontally in a flexbox. */
display: flex;
align-items: center;
}
2023-08-20 15:54:06 +02:00
2023-08-18 19:25:38 +02:00
}
2024-02-06 21:37:26 +01:00
/* <summary> is used for the visual content of branches with children. It's the large horizontal bar
and notably *excludes* children. */
2023-08-18 19:25:38 +02:00
.tree details>summary {
2024-02-06 21:37:26 +01:00
/* Slightly round for elegance */
2024-06-13 21:50:09 +02:00
border-radius: var(--8px);
2023-08-18 20:58:07 +02:00
2024-02-06 21:37:26 +01:00
/* Give it a shaded background on hover */
2023-08-27 17:01:27 +02:00
background-color: transparent;
2024-02-07 15:33:46 +01:00
transition: background-color var(--transition-duration);
2024-02-06 21:37:26 +01:00
&:hover {
background-color: var(--shaded-background);
}
2023-08-18 20:58:07 +02:00
}
2024-02-06 21:37:26 +01:00
/* For media without hover functionality, draw a bottom border everywhere as a visual anchor for where to tap */
@media (hover: none) {
.tree li>div:first-child,
.tree li>details>summary:first-child {
2024-06-13 21:50:09 +02:00
border-bottom: var(--1px) solid var(--border-1);
2024-02-06 21:37:26 +01:00
}
.tree details>summary {
/* In that case summaries shall not be rounded. */
2024-06-13 21:50:09 +02:00
border-radius: 0;
2024-02-06 21:37:26 +01:00
}
2023-08-18 19:25:38 +02:00
}
2024-02-06 21:37:26 +01:00
/* The following three elements - bp, bc, and bb - are there in all branches, regardless of their parent. */
/* bp - bullet point */
th-bp {
display: block;
2024-02-07 15:33:46 +01:00
width: var(--tree-indent-width);
2024-06-13 21:50:09 +02:00
height: 1.75rem;
2024-02-06 21:37:26 +01:00
2024-01-18 22:46:57 +01:00
background-image: var(--icon-leaf);
2023-08-18 19:25:38 +02:00
background-repeat: no-repeat;
2024-02-06 21:37:26 +01:00
background-position: 50% 50%;
/* Prevent shrinkage when viewport is too low */
flex-shrink: 0;
2023-08-18 19:25:38 +02:00
}
2024-02-06 21:37:26 +01:00
/* Change image of th-bp if it has children and/or is collapsible */
.tree details[open]>summary>th-bp {
2024-01-18 22:46:57 +01:00
background-image: var(--icon-collapse);
2023-08-18 19:25:38 +02:00
}
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
.tree details:not([open])>summary>th-bp {
background-image: var(--icon-expand);
}
2024-02-06 21:37:26 +01:00
/* bc - branch content */
th-bc {
display: block;
2024-06-13 21:50:09 +02:00
padding-top: var(--6px);
padding-bottom: var(--6px);
2024-02-06 21:37:26 +01:00
/* Grow to fill the entire available space. This pushes out th-bb to the far right. */
flex-grow: 1;
2024-02-08 13:49:22 +01:00
/* Bit of a hack to make <pre>s in <th-bc> have scrollbars proper. */
2024-02-18 23:37:31 +01:00
&:has(pre, th-literate-program) {
overflow: hidden;
2024-02-08 13:49:22 +01:00
}
}
2024-02-06 21:37:26 +01:00
/* Display a chevron hinting that the collapsed branch has more content in its children. */
.tree details:not([open])>summary>th-bc>:last-child,
/* NOTE: Linked branches have a slightly different structure (extra <noscript> tag) and therefore
:last-child does not work. */
.tree li[data-th-link]>details:not([open])>summary>th-bc>:nth-last-child(2) {
2024-02-06 21:37:26 +01:00
&::after {
content: '\00A0';
display: inline-block;
2023-08-20 15:54:06 +02:00
2024-02-06 21:37:26 +01:00
background-image: var(--icon-more);
background-repeat: no-repeat;
background-position: 50% 50%;
2023-08-20 15:54:06 +02:00
2024-06-13 21:50:09 +02:00
width: var(--16px);
2024-02-06 21:37:26 +01:00
height: 1.2em;
vertical-align: text-bottom;
margin-left: 0.5em;
2024-06-13 21:50:09 +02:00
margin-right: -2.25rem;
2023-08-20 15:54:06 +02:00
}
}
2024-02-20 22:36:47 +01:00
/* Display a [draft] pill for branches that are drafts. */
.tree li.draft {
&>details>summary>th-bc::before,
&>div>th-bc::before {
content: 'draft';
display: block;
width: min-content;
background-color: #058ef0;
color: #ffffff;
2024-06-13 21:50:09 +02:00
padding: var(--4px) var(--12px);
margin-bottom: var(--4px);
2024-02-20 22:36:47 +01:00
border-radius: 100px;
}
}
2024-02-06 21:37:26 +01:00
/* bb - button bar */
th-bb {
height: 100%;
2024-06-13 21:50:09 +02:00
margin: var(--4px);
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
/* Should be displayed on the top of the branch rather than in the middle. */
align-self: start;
2023-08-20 13:46:54 +02:00
display: flex;
flex-direction: row;
2024-02-07 13:09:44 +01:00
align-items: center;
2023-08-20 13:46:54 +02:00
2024-02-06 21:37:26 +01:00
/* Keep the button bar invisible by default. */
2023-08-20 13:46:54 +02:00
opacity: 0%;
2024-02-07 15:33:46 +01:00
transition: opacity var(--transition-duration);
2023-08-20 13:46:54 +02:00
}
2024-02-06 21:37:26 +01:00
/* When the parent is hovered over, display the button bar. */
.tree *:hover>th-bb {
2023-08-20 13:46:54 +02:00
opacity: 100%;
}
2024-02-07 13:09:44 +01:00
/* For media without hover functionality, th-bb should always be visible. */
2023-08-20 15:54:06 +02:00
@media (hover: none) {
2024-03-07 21:21:02 +01:00
:root {
2024-06-13 21:50:09 +02:00
--button-bar-icon-size: 2.25rem;
2024-03-07 21:21:02 +01:00
}
2023-08-20 15:54:06 +02:00
.tree th-bb {
opacity: 100%;
2024-02-22 20:42:49 +01:00
/* Replace margin with button size to make it easier to click. */
margin: 0px;
& a.icon {
2024-06-13 21:50:09 +02:00
width: 2.25rem;
height: 2.25rem;
2024-02-22 20:42:49 +01:00
}
2023-08-20 15:54:06 +02:00
}
}
2024-02-07 13:09:44 +01:00
/* Style branch dates to be smaller and less noticable. */
th-bb .branch-date {
opacity: 50%;
font-size: 0.8em;
}
/* Hide branch dates on very small displays. No clue how to fix this just yet. */
@media (max-width: 600px) {
th-bb .branch-date {
display: none;
}
}
2024-02-06 21:37:26 +01:00
/* Icons (used in the button bar) */
.tree {
& .icon {
background-repeat: no-repeat;
background-position: 50% 50%;
opacity: 35%;
2023-08-20 15:05:59 +02:00
2024-03-07 21:21:02 +01:00
width: var(--button-bar-icon-size);
height: var(--button-bar-icon-size);
2024-02-06 21:37:26 +01:00
}
2023-08-20 15:54:06 +02:00
2024-02-06 21:37:26 +01:00
& .icon-permalink {
background-image: var(--icon-permalink);
}
2023-08-20 15:05:59 +02:00
2024-02-06 21:37:26 +01:00
& .icon-go {
background-image: var(--icon-go);
}
2023-08-20 15:05:59 +02:00
}
2024-02-07 13:09:44 +01:00
/* Style the loading text to not be too attention grabbing. */
2023-08-20 15:05:59 +02:00
.tree .link-loading {
2024-06-13 21:50:09 +02:00
padding-left: 1.75em;
2023-08-20 15:05:59 +02:00
opacity: 50%;
}
2023-08-21 21:12:06 +02:00
2024-02-07 13:09:44 +01:00
/* Highlight branch selected by # or ? in URL.
The latter is not supported by CSS so we use some auxiliary JavaScript to add a .target class
to the element highlighted by ?. */
2024-01-18 22:46:57 +01:00
.tree :target,
.tree .target {
2024-01-18 22:46:57 +01:00
&>details>summary,
&>div {
2024-02-07 15:33:46 +01:00
background-color: var(--shaded-background);
background: linear-gradient(to right,
transparent 12.5%, var(--shaded-background),
transparent, var(--shaded-background),
transparent, var(--shaded-background) 87.5%);
background-size: 800% 100%;
background-position-x: 100%;
animation: hey-listen 2s linear;
}
}
@keyframes hey-listen {
0% {
background-position-x: 0%;
}
100% {
background-position-x: 100%;
}
2024-02-07 13:15:29 +01:00
}
/* <noscript> navigation links */
.tree .navigate {
2024-06-13 21:50:09 +02:00
padding-left: 1.75em;
2024-02-07 13:15:29 +01:00
background-repeat: no-repeat;
background-position: 0% 50%;
opacity: 80%;
2024-02-12 19:56:06 +01:00
}
/* branch-quote class for "air quote branches"; used to separate a subtree from a parent tree
stylistically such that it's interpretable as a form of block quote. */
ul.branch-quote {
2024-06-13 21:50:09 +02:00
--vertical-margin: var(--8px);
--padding: var(--8px);
2024-02-14 23:31:39 +01:00
margin-top: var(--vertical-margin);
margin-bottom: var(--vertical-margin);
padding-top: var(--padding);
padding-bottom: var(--padding);
padding-right: var(--padding);
2024-06-13 21:50:09 +02:00
border: var(--1px) solid var(--border-1);
border-radius: var(--8px);
2024-02-14 23:31:39 +01:00
position: relative;
&::before {
--recursive-wght: 900;
--recursive-casl: 0;
content: '“';
position: absolute;
2024-06-13 21:50:09 +02:00
right: var(--16px);
top: var(--1px);
2024-02-14 23:31:39 +01:00
font-size: 3rem;
opacity: 50%;
transition: opacity var(--transition-duration);
}
&:hover::before {
opacity: 0%;
}
2024-02-12 19:56:06 +01:00
}