Desktop app - Spaces sidebar redesign

Talk
, , , , , , ,
1

Hello community!

EDIT: First iteration of Custom CSS is in the comments!

I’ve been using Anytype for about a week now, and, aesthetically speaking, I mostly like the way it looks. The only thing that I have a problem with is the (new) Spaces Sidebar. It’s the grey ribbon on the far left:

anytype_current
anytype_current1451×997 115 KB

What I don’t like:

  • It’s too wide, takes up too much space (pun unintended)
  • Spacing related to “semaphore” controls, Space images and sidebar trigger looks a bit awkward
  • The background color is too bright, compared to the rest of the app
  • The dot that indicates an active space looks out of place

As I understood, it was a dropdown menu before (which I would like more), so I’m not going to propose going back to that. Being able to apply custom CSS, I decided to try and do a quick redesign first. I like the way it turned out to be, so I thought I’d share it with you and propose for something similar to end up in the official app, if you like it. Here’s the screenshot:

anytype_redesign
anytype_redesign1451×997 115 KB

In addition to trying to solve everything from the list above, I also moved a Space name to the topbar, next to the Sidebar icon. This allowed for “All Objects” and controls in the top of the Widgets Sidebar to get a bit more coherent look.

And this is probably where I should stop, and I want to conclude my “official” proposal with this.

BUT :smiley: The rest of the post is just for fun. I couldn’t help but wander what would the app looked like if it was transparent, or at least had a literal “page” on the right side. So I made a few more mockups, just for fun.

Transparent on light background:

anytype_lightbg
anytype_lightbg1451×997 118 KB

Transparent on dark background:

anytype_darkbg
anytype_darkbg1451×997 112 KB

Not transparent, but has a literal “page” for the content:

anytype_nontransparent
anytype_nontransparent1451×997 111 KB

With this, besides Notion-like databases and Obsidian-like graph, it resembles a Craft-like look, as well. Not sure if this is a good thing. Although, on the last image, I could easily imagine the page moving to the right to make some space for the upcoming Properties sidebar.

What do you think? How do you like it? I’d like to hear your thoughts!

Cheers

2

:clap: Bravo! I like your design, and I would like personally to use it as my own default css theme.

One of the irritating aspects of the Anytype UI language is that, at first glance, you can spot around 4 or 5 different shades of gray depending on the dark/light theme, which makes it look a bit overwhelming. The issue is not just the overwhelming number of shades but also the placement of the containers themselves, which you have fixed pretty well. One thing I would like to adjust is to reduce the number/opacity of outlines and decrease the padding in the space sidebar, but hey, this is just my personal preference. Otherwise, you did a good job.

Edit: I recommend you vote for your own FR

3

I agree, a border as an indicator for the active space is a nicer and more space-saving solution than the current dot (on a small laptop every pixel counts).

Moving the space name to the top bar: well, this is already the case when you scroll up the widgets sidebar. I think the current solution is good, but I would like the bar with the space name, the control buttons and “all objects” to be sticky so that it remains visible and accessible at all times, even if the widget bar has to be scrolled.

4

@VisualNotes What do you mean by “scroll up the widgets sidebar”? No matter how I scroll, the space name always stays in place. Care to share a screenshot?

5

@GrayArc Would you go even smaller than “official” proposal?

I know that in the last few images the width is the same as in the current app, but as I said, those were just for fun.

6

If you have so many or expanded widgets that you have to scroll the sidebar, then the top widget with space name, buttons for search and “New” and “All objects” disappears upwards and a fixed top bar with only the space name remains visible.

7

@VisualNotes I think that I understand what you’re saying, that it should be in the area I marked on this screenshot?

ScreenShot 2025-03-21 at 16.30.02@2x
ScreenShot 2025-03-21 at 16.30.02@2x894×1290 32.8 KB

If that’s the case, then it must be some kind of a bug on my side.

8

Indeed, it should behave like this:

Anytype_XA1VllPxeN

@semantic I found the bug, but I let you create a report for it please.
It’s because you have the ONLY WIDGET mode on for the sidebar :wink:

9

Happy to share that I managed to create the first CSS iteration of the design!

I also added translucent header when scrolling and forced dark scrollbar in dark
mode. Dropdowns got a little facelift, too. Here’s a snippet:

:root {
  --font-size-common: 13px;
  --color-widget-bg: #fafafa;
}
html.themeDark {
  color-scheme: dark;

  --color-text-primary: #e5e5e5;

  --color-bg-primary: #181818;
  --color-shape-tertiary: #121212;
  --color-widget-bg: #101010;
}

body {
  background: var(--color-shape-tertiary);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}
.vault,
html.themeDark .vault {
  background: none;
}
.vault .body {
  margin-top: 1px;
  padding-top: 7px;
  border-top: 1px solid var(--color-shape-highlight-medium);
  border-right: 1px solid var(--color-shape-highlight-medium);
}
.vault .body .side {
  padding: 8px 12px 0;
}
.vault .body .side.top {
  gap: 12px 0;
}
.vault .item.isActive::after {
  content: none;
}
.vault .item .iconWrap {
  border-radius: 8px;
}
html.themeDark .vault .item.isButton .iconWrap {
  background-color: rgba(79, 79, 79, 0.25);
}
.vault .item.isActive .iconWrap {
  box-shadow:
    0 0 0 2px var(--color-shape-tertiary),
    0 0 0 4px rgba(255, 255, 255, 0.25);
}

html.themeDark .sidebar {
  box-shadow: none;
}
.sidebar > #containerWidget {
  border-right: 1px solid var(--color-shape-highlight-medium);
}
.sidebar > #containerWidget > .head {
  border-bottom: 1px solid var(--color-shape-highlight-medium);
}
.sidebar > #containerWidget > .body {
  padding-top: 16px;
}
.vault .body .side.bottom {
  padding-bottom: 16px;
}

.widget {
  background: var(--color-shape-tertiary);
  background: var(--color-widget-bg);
  border: 1px solid var(--color-shape-highlight-medium);
  border-radius: 8px;
}
.widget.widgetSpace .body .sides {
  padding-top: 0;
  padding-right: 1px;
}
.widget.widgetSpace .body .sides .side.left .name {
  font-size: var(--font-size-common);
}
.widget.widgetSpace .body .sides .side.right .plusWrapper {
  box-shadow: 0 0 0 1px var(--color-shape-secondary);
  border-radius: 4px;
}
.widget.widgetSpace .body .sides .side.right .icon.search {
  width: 28px !important;
  height: 28px !important;
  border-radius: 4px;
}
.widget.widgetSpace .body .sides .side.right .icon,
.widget.widgetSpace .body .sides .side.right .icon.arrow {
  width: 26px !important;
  height: 26px !important;
}
.widget .head .icon,
.widget .head .clickable .icon {
  width: 16px;
  height: 16px;
}
.widget.widgetView .viewList .body.isCompact .item::before,
.widget.widgetView .viewGrid .body.isCompact .item::before {
  border-radius: 4px;
}
.widget.widgetSpace .body .buttons .item {
  background: transparent;
}
.iconObject .iconCommon.c18,
.iconObject .smileImage.c18,
.iconObject .iconImage.c18,
.iconObject .iconFile.c18,
.iconObject .iconCheckbox.c18 {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-left: -8px;
}
.widget.widgetView .viewList .body .item .buttons .icon,
.widget.widgetView .viewGrid .body .item .buttons .icon {
  width: 16px;
  height: 16px;
  background-size: 16px;
}
.sidebar > #containerObject {
  padding-bottom: 16px;
  box-shadow:
    inset 0 51px var(--color-shape-tertiary),
    inset 0 52px var(--color-shape-highlight-medium);
  border-right: 1px solid var(--color-shape-highlight-medium);
}
.sidebar > #containerObject > .inner {
  height: calc(100% - 16px);
  margin-top: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.0625);
  border: 1px solid var(--color-shape-highlight-medium);
  border-radius: 8px;
}
.themeDark .sidebar > #containerObject > .inner {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.125);
}
.button.widget {
  gap: 0 4px;
  padding: 12px 16px;
  font-size: var(--font-size-common);
}

.header.isCommon {
  background: color-mix(in srgb, var(--color-shape-tertiary) 75%, transparent);
  border-bottom: 1px solid var(--color-shape-highlight-medium);
  backdrop-filter: blur(8px);
}
.icon.withBackground {
  background-size: 16px !important;
}
.header .side.left,
.header .side.right {
  padding: 0 16px;
}

.block.blockCover {
  width: calc(100% - 32px - 2px);
  margin: 17px 1px -1px;
  border-radius: 8px 8px 0 0;
}

.pageMainEdit #bodyWrapper {
  padding-top: 16px; /* TODO: CHANGE TO MARGIN??? */
}

.pageMainEdit #bodyWrapper {
  margin: 16px;
  background: var(--color-bg-primary);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.0625);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
}
.themeDark .pageMainEdit #bodyWrapper {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.125);
}
.blocks .block.blockDataview #rowHeadClone {
  background: color-mix(in srgb, var(--color-shape-tertiary) 75%, transparent);
  border-bottom: 1px solid var(--color-shape-highlight-medium);
  backdrop-filter: blur(8px);
}
.blocks .block.blockDataview .icon.plus {
  background-size: 16px;
  vertical-align: baseline;
}

.footer .buttons {
  bottom: 24px;
  right: 24px;
}
.footer .iconWrap .icon {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

/* dropdown menu */

.menus .menu {
  background: color-mix(in srgb, var(--color-bg-primary) 90%, transparent);
  backdrop-filter: blur(8px);
}
html.themeDark .menus .menu {
  background: color-mix(in srgb, var(--color-bg-primary) 90%, transparent);
  backdrop-filter: blur(8px);
}
.menus .menu.vertical .item {
  background: none;
}
.menus .menu.vertical .item::before {
  width: calc(100% - 16px);
  left: 8px;
  border-radius: 4px;
}
.menus .menu.vertical .item .icon {
  width: 16px;
  height: 16px;
}
.menus .menu.menuSyncStatus .items .sides .side.right .icon.more {
  width: 20px !important;
  height: 20px !important;
}
.menus .menu.vertical .item .icon.arrow {
  right: 12px;
}
.menus .menu.vertical .item.withCaption.withArrow .caption {
  padding-right: 16px;
}
.menus .menu.vertical .item.withCaption .caption {
  line-height: 12px;
}

/* UPCOMING */

.sidebar.right {
  border-left: 1px solid var(--color-shape-highlight-medium);
}
.sidebar > .sidebarPage .head {
  border-bottom: 1px solid var(--color-shape-highlight-medium);
}
.sidebar > .sidebarPage .body {
  padding-top: 16px;
}
.sidebar > .sidebarPage .section {
  background: var(--color-widget-bg);
  border: 1px solid var(--color-shape-highlight-medium);
  border-radius: 8px;
}
.sidebar > .sidebarPage.pageObjectRelation .section.objectRelation {
  padding: 11px 15px;
}
.sidebar > .sidebarPage .section .item {
  padding: 4px 8px;
  border-radius: 4px;
}
.widget .head .clickable {
  font-size: var(--font-size-common);
}
10

I’ll wait for the light mode, thanks a lot for your work!

11

I don’t use the dark mode in Anytype, because for me, white text on black background is tiring and irritating to read.
Btw, for the light mode, I’m totally fine with the current scheme of gray tones used.

12

@Morgan1989 @VisualNotes I added a few fixes to the snippet above, so now it’s usable in light mode, as well. Feel free to try it!

Contrasts are not very good in my opinion, should work on that. But you can definitely test and see what I’m going for. Looking forward to hearing your feedback.

13

Anytype could support transparency / mica effect. The desktop version is made in electron, so it wouldn’t be difficult for devs to implement. At least an implementation that gives the opportunity to customize with custom.css

14

Agree too, I’ve done that with my custom theme :

image
image366×227 16.6 KB