html {
// Support hidden overflow into the right margin.
// (would be better to not have to change the page’s style; but not sure how)
position: relative;
}
html body {
/* Increase specifity above that of our style reset */
.annotationOuterContainer {
--container-width: 300px;
--toolbar-height: 40px;
z-index: 999998;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--container-width);
max-width: 50vw;
display: flex;
flex-flow: column;
pointer-events: none;
box-sizing: border-box;
font-family: sans-serif;
}
.singleAnnotationOuterContainer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: var(--container-width);
max-width: 50vw;
display: flex;
flex-flow: column;
pointer-events: none;
box-sizing: border-box;
}
.annotationContainer {
flex-grow: 1;
pointer-events: none;
& > *:not(.singleAnnotationOuterContainer) {
pointer-events: all;
}
}
.singleAnnotationContainer {
flex-grow: 1;
pointer-events: none;
& .annotation {
pointer-events: all;
}
}
.annotationWrapper {
overflow: hidden;
position: sticky; // TODO Fix sticky position.
top: --toolbar-height;
bottom: 0;
}
.annotationContainer > :nth-last-child(2) .annotationWrapper {
top: calc(var(--toolbar-height) + 4px);
}
.annotationContainer > :nth-last-child(1) .annotationWrapper {
top: calc(var(--toolbar-height) + 8px);
}
.annotationContainer > :nth-child(1) .annotationWrapper {
bottom: 8px;
}
.annotationContainer > :nth-child(2) .annotationWrapper {
bottom: 4px;
}
.annotation {
border: #999 1px solid;
border-radius: 10px;
box-shadow: 10px 10px 10px #9996;
margin: 10px 0px;
padding: 5px 40px 5px 10px;
background-color: lightyellow;
transition: transform 200ms, background-color 200ms;
transform: translateX(calc(var(--container-width) - 40px));
&.dirty {
opacity: 0.8;
}
.dirtyNotice {
font-size: smaller;
font-style: italic;
}
.cardBottom {
padding-left: 10px;
display: flex;
justify-content: space-between;
}
.creator {
font-style: italic;
}
}
.annotationContainer.showAll .annotation,
.annotation.highlightClicked,
.annotation.highlightHovered,
.annotation:hover,
.annotation:focus-within {
transform: none;
}
.annotation button,
.toolbar button {
font-size: 1em;
border: none;
background: none;
cursor: pointer;
&:hover {
background: yellow;
}
.icon {
width: 0.9em;
}
}
.toolbarContainer {
z-index: 999999;
position: sticky;
top: 0;
display: flex;
justify-content: end;
.toolbar {
max-width: var(--container-width);
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
background-color: lightyellow;
border-bottom-left-radius: 10px;
border-left: #999 1px solid;
border-bottom: #999 1px solid;
box-shadow: 10px 10px 10px #9996;
overflow: hidden;
& > * {
padding: 10px;
}
details {
font-size: smaller;
}
summary {
font-size: larger;
list-style: none;
cursor: pointer;
}
}
}
.hiddenWhenClosed {
display: none;
}
.annotationContainer.showAll .hiddenWhenClosed {
display: unset;
}
mark.highlight {
background: #ff99;
}
mark.highlight.clicked,
.annotation.highlightClicked,
.showAll .showAllButton {
background: #ff9;
}
mark.highlight.hovered,
.annotation.highlightHovered {
background: yellow;
}
}