Primary Theme

Share & showcase
,
46

@Cecilia_May : I use sidenotes quite a lot, but only the hide version. If it is of any help, below is the code that I use for Primary. I left rules that I outcommented in for completeness sake.

I had to adjust @SlRvb’s original code a bit to make it work. You can find the code for the other types of sidenote on that page too.

/* Original Live Preview-amended snippet here : https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Aside.css */

.is-live-preview .aside-hide { margin-right: 0; }

.aside-hide {
    text-decoration: unset;
    text-align: justify;
    color: transparent;
    font-weight: unset;
    float: right;
    position: relative;
    /*margin: .5em;*/
    margin-right: -4em !important;
    padding-bottom: 2em !important;
    width: 1.5em;
    height: 1.5em;
    /*clear: right;*/
    overflow: hidden;
    /*background-color: var(--background-primary);*/
    color: transparent;
}

.aside-hide:before {
    display: block;
    content: "ℹ️ "; /* was 🗨 */
    color: red; /* PB changed from "none"; not clear why "red" shows true color */
    /*text-shadow: 0 0 0 var(--interactive-accent);
    font-size: 1.3rem;*/ /* PB changed from 12px */
    /*padding-top: .1em;
    padding-left: .3em;*/
    font-size: 1.3rem;
    margin-left: -.8rem;
}

.aside-hide:hover:before {
    border-bottom: 2px solid var(--background-modifier-border);
}

.aside-hide:hover {
    white-space: normal;
    text-overflow: unset;
    color: unset;
    width: 400px; /* leave @ 400 otherwise hovering vibrates */
    height: unset;
    /*background-color: var(--background-primary-alt);*/
    padding: 1em;
    padding-top: .5em;
    z-index: 3;
    /*box-shadow: .5em .5em var(--outer-bar);*/
    border-right: 3px solid var(--interactive-accent) !important;
    border-bottom: 3px solid var(--interactive-accent) !important; /* PB added this */
    font-size: 14.5px; /* PB added this */
    border-radius: 4px; /* PB added this */
    /*margin-right: 2rem;*/
}

.theme-light aside, .aside-hide {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

:root {
    --aside-header: "💭 Info";
}
2 Likes