Using CSS to target specific Bases?

[Tethys]

I’m getting into Bases and would like to use CSS to customize the display. For example, I really like this approach to the display for a games Base, but would like to apply different styles to other Bases for recipes, contacts, whatever.

Since Bases don’t (currently) have a cssclasses option, is there any other way to write CSS snippets that are applied only to one particular Bases file?

[blue_emperor]

This plugin targets property styles and has experimental support for bases:

Pretty properties https://github.com/anareaty/pretty-properties

 

It basicaly deals with the same problem set and your problem could be a feature request in that plugin.

[ariehen]

A member on Discord shared shared a neat approach to target a .base file using its aria-label (file name) and :has() →

body:has(.workspace-tab-header.is-active[aria-label="YOUR BASE NAME HERE"]) {}

e.g.

body:has(.workspace-tab-header.is-active[aria-label="third"]) .bases-view {
    border: 2px solid orange;
    background-color: lightblue;
}

body:has(.workspace-tab-header.is-active[aria-label="third"]) .bases-tr {
    background-color: rgba(255, 182, 170, 0.5);
}

The only issue is if you have that .base visible, all other bases open are affected as well.

If you only ever view one .base that would work until we can assign .base files cssclasses.

---

Targeting a specific ![[embedded.base]] is fun and fairly simple. The link is written as ![[third.base|ongoing]].

.bases-embed[alt~="ongoing"] {
    border: 1px dashed green;

    & .bases-header {
        background-color: rgba(255, 182, 170, 0.5);
    }
    & .bases-table-header-icon {
        color: red;
    }
    & a.internal-link {
       color: olive;
    }
}

and non-nested if that’s easier to see what’s going on:

.bases-embed[alt~="ongoing"] {
    border: 1px dashed green;
}

.bases-embed[alt~="ongoing"] .bases-header {
    background-color: rgba(255, 182, 170, 0.5);
}

.bases-embed[alt~="ongoing"] .bases-table-header-icon {
    color: red;
}

.bases-embed[alt~="ongoing"] a.internal-link {
    color: olive;
}

---

You could also use the cssclasses property to target all embedded bases in a specific note.

Nothing spectacular in my examples here, but there options available.

[ariehen]

Was thinking about it a bit more while doing the dishes.

I would

• make a note with the same name as the .base
• use a cssclass set that note to 100% width
• embed the recipe .base (or whatever) on line 2 (after the Properties)
• write some CSS to style the base and add that to the cssclasses of the note

Lots of variables you could easily change:

/* Bases */
  --bases-header-border-width: 0 0 1px 0;
  --bases-header-height: 40px;
  --bases-header-padding-start: 2px;
  --bases-header-padding-end: 2px;
  --bases-toolbar-label-display: block;
  --bases-toolbar-badge-display: none;
  --bases-embed-border-width: 0px;
  --bases-embed-border-color: var(--background-modifier-border);
  --bases-embed-border-radius: var(--radius-s);
  --bases-filter-menu-width: 520px;
  --bases-table-container-border-width: 1px;
  --bases-table-container-border-radius: var(--radius-s);
  --bases-table-header-weight: var(--font-weight);
  --bases-table-header-color: var(--text-muted);
  --bases-table-header-icon-display: flex;
  --bases-table-header-background: var(--background-primary);
  --bases-table-header-background-hover: var(--background-modifier-hover);
  --bases-table-header-sort-mask: linear-gradient(to left, transparent var(--size-4-6), black var(--size-4-6));
  --bases-table-border-color: var(--table-border-color);
  --bases-table-column-border-width: 1px;
  --bases-table-row-border-width: 1px;
  --bases-table-row-background-hover: var(--table-row-background-hover);
  --bases-table-row-height: 30px;
  --bases-table-text-size: var(--font-smaller);
  --bases-table-column-max-width: 300;
  --bases-table-column-min-width: 40;
  --bases-table-cell-radius-active: 2px;
  --bases-table-cell-shadow-active: 0 0 0 2px var(--interactive-accent);
  --bases-table-cell-background-active: var(--background-primary);
  --bases-table-cell-background-disabled: var(--background-primary-alt);
  --bases-cards-container-background: transparent;
  --bases-cards-background: var(--background-primary);
  --bases-cards-cover-background: var(--background-primary-alt);
  --bases-cards-scale: 1;
  --bases-cards-group-padding: var(--size-4-3);
  --bases-cards-line-height: 24px;
  --bases-cards-border-width: 1px;
  --bases-cards-shadow: 0 0 0 1px var(--background-modifier-border);
  --bases-cards-shadow-hover: 0 0 0 1px var(--background-modifier-border-hover);
  --bases-cards-text-size: var(--font-smaller);

and add any more custom rules in. That seems doable.

[dawni]

@ariehen

The only issue is if you have that .base visible, all other bases open are affected as well.

Just lower the selector level from body to .workspace-tabs. That keeps it local to the named base file. The whole line can be tidied up a little too, if you want to, like this:

.workspace-tabs:has(.workspace-tab-header[aria-label="your base name"]) .bases-tbody {

}

[ariehen]

Excellent! Thank you.

As I was writing the first section I thought “there’s probably a way here”, but moved on without checking further.