Custom Table of Contents (Custom CSS)

Talk Cases
1

Hey everyone,

i’m new to Anytype and currently evaluating it.
One of the things that immediately jumped at me was the current Table of Content Design (as of 0.45.3 atleast).

Since Anytype supports Custom CSS, i figured i’ll see if i can get something more pleasing for myself. Maybe someone else will enjoy this as well. It works for Light and Dark Color mode.

Closed Dark
Closed Dark1309×1138 51.3 KB

Closed Light
Closed Light1309×1138 52.4 KB

Open Dark
Open Dark1309×1138 59.9 KB

Open Light
Open Light1309×1138 59.6 KB

Just copy the content below into your custom.css and reload. If you don’t like it - just remove it again and reload :wink:

Updates

  • Make use of CSS Nesting
  • Prevent transformation in popups as it doesn’t work as expected
.block.blockTableOfContents {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translate(0, -50%);

  & > .wrapMenu, & > .wrapContent {
    max-width: 0;
    max-height: 0;
    overflow: hidden;
  }

  &:before {
    content: '';
    position: absolute;
    right: 100%;
    top: calc(50% - 16px);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 561 256' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,0.942889,-1.13687e-13,-100.472)'%3E%3Cpath d='M560.022,128.83C560.022,141.122 550.612,151.102 539.022,151.102L21,151.102C9.41,151.102 0,141.122 0,128.83C0,116.538 9.41,106.558 21,106.558L539.022,106.558C550.612,106.558 560.022,116.538 560.022,128.83Z'/%3E%3C/g%3E%3Cg transform='matrix(0.857377,0,0,0.942889,79.872,113.528)'%3E%3Cpath d='M560.022,128.83C560.022,141.122 549.047,151.102 535.529,151.102L24.493,151.102C10.975,151.102 0,141.122 0,128.83C0,116.538 10.975,106.558 24.493,106.558L535.529,106.558C549.047,106.558 560.022,116.538 560.022,128.83Z' style='fill-opacity:0.8;'/%3E%3C/g%3E%3Cg transform='matrix(0.677082,0,0,0.942889,180.841,6.52764)'%3E%3Cpath d='M560.022,128.83C560.022,141.122 546.124,151.102 529.006,151.102L31.015,151.102C13.898,151.102 0,141.122 0,128.83C0,116.538 13.898,106.558 31.015,106.558L529.006,106.558C546.124,106.558 560.022,116.538 560.022,128.83Z' style='fill-opacity:0.6;'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 1;
  }

  &:hover > .wrapMenu, &:focus > .wrapMenu, &:focus-within > .wrapMenu,
  &:hover > .wrapContent, &:focus > .wrapContent , &:focus-within > .wrapContent {
    max-width: unset;
    max-height: unset;
    overflow: unset;
  }
  &:hover > .wrapContent, &:focus > .wrapContent , &:focus-within > .wrapContent {
    padding: 8px;
  }
}
html.themeDark .block.blockTableOfContents:before {
  filter: invert(1);
}
/* Prevent Transformation for .popupPages */
.popupPage .page {
  position: relative;

  .block.blockTableOfContents {
    position: unset;
    right: unset;
    top: unset;
    transform: unset;

    &:before {
      display: none;
    }

    & > .wrapMenu, & > .wrapContent {
      max-width: unset;
      max-height: unset;
      overflow: unset;
    }
    &:hover > .wrapContent, &:focus > .wrapContent , &:focus-within > .wrapContent {
      padding: unset;
    }
  }
}
2

Awesome! Thank you for your work!

I am still waiting for a floating table of contents in Anytype (almost every comparable application offers this function).

Small problem with your solution: the “fixed” value of the “position” property does not work on modal windows.

It would also be good if the table of contents that pops up had an opaque background so that the headings could be read more easily:

.block.blockTableOfContents {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translate(0, -50%);
  background-color: white;
  z-index: 100;
}
3

Congrats for your work!

Can we easily invert the position to get the TOC on the left side, or even on the top-left side?

5

It’s incredible that something so simple and easy to implement isn’t present in the app. I doubt it will take more than 1 hour for the devs to add something like this natively. Thanks for the CSS :smiling_face_with_tear:

To change to left side:
Just change from “right” to “left” in “.block.blockTableOfContents”.

420px is what looked good on mine, but if the icon isn’t showing up, just change the “left” number.

.block.blockTableOfContents {
  position: fixed;
  left: 420px;
  top: 50%;
  transform: translate(0, -50%);
  background-color: var(--color-shape-tertiary);
  z-index: 100;
}
body:has(#sidebarLeft.isClosed) .block.blockTableOfContents {
  left: 50px;
}

Also add this line to “.block.blockTableOfContents:before” to invert the icon and make it go in the right direction.
transform: scaleX(-1);

6

@jonas1 @Morgan1989
Since the width of the left sidebar is customizable, the “fixed” position will not work well if the table of contents is positioned on the left, as “fixed” works both vertically and horizontally.

So I think the right side is the better option here.

Actually I don’t think the implementation of a floating table of contents is that simple (see modal window), without Javascript it probably won’t really work.

7

Agree.

Please vote and reply here :grin: :

8

You are absolutely correct. CSS sadly doesn’t have the possibility to do this. Making the ToC floating like that (which uses position: fixed), uses the entire viewport for its positioning and can’t be parented to the modal/popup or relative to another element.

So without Javascript this will be impossible.

I’ve just updated the CSS in the original post to prevent the transformation from being applied to the popups/modals for now, until another solution will become available.

Let me know if i missed some usecase that i’m not familiar with (yet) :blush: