Sharing more custom CSS

[scavi-github]

Hi, here is some more custom CSS I wanted to share.

(Note that this is not meant as a proposal to adapt any of these changes into Tine, and just for the purpose of sharing custom CSS.)

Hide bullets of empty and hr blocks

hide.bullets_yuv420p_crf1.mp4

/* Hide bullets of hr blocks, unless hovered: */
.ls-block:has(.md-hr):not(:hover) .bullet {
    display: none;
}
/* Hide bullets of empty blocks, unless hovered: */
.ls-block:has(.block-content:empty):not(:hover) .bullet {
    display: none;
}

Automatic emoji icons for web and file URLs

This can serve as a very simple placeholder for the request discussed in Issue #430.

URL-icons_yuv420p_crf1.mp4

/* Symbols before URLs: */
.ls-block:has(.block-content a[href^="file://"]) .block-content a[href^="file://"]::before {
    content: "📁";
}
.ls-block:has(.block-content a[href^="https://"]) .block-content a[href^="https://"]::before {
    content: "🌐";
}

Task Animations

These are based on my previous post here, but now for the updated version of Tine (tested on 0.7.1) and I made them a little bit more subtle.

task-animations_yuv420p_crf1.mp4

.block-task-checkbox {
	transition: background-color 300ms;
}

.block-task-checkbox.checked {
	animation: check 300ms;
}

.block-task-checkbox:has(+ .marker-todo),
.block-task-checkbox:has(+ .marker-later) {
	animation: uncheck 300ms;
}

.block-task-checkbox:not(.checked):hover {
	transform: scale(1.05);
}

.block-content {
	transition: 300ms;
}

@keyframes check {
	50% {transform: scale(0.5);} 100% {transform: scale(1);}
}

@keyframes uncheck {
	/* 0% {transform: rotate(360deg);} 100% {transform: rotate(0deg);} */
	0% {transform: scale(0.5);} 100% {transform: scale(1);}
}

The line commented out in @keyframes uncheck corresponds to the "spinning" uncheck animation I shared previously.

[martinkoutecky]

I really like all 3. I would welcome everyone to say if they would be against any of those becoming the default, or if they have proposals for improvements. But before I tag a few people I want to ask @scavi-github whether you think this should be default or you already see some reason against. It doesn't seem too extravagant to me or anything. Maybe the bullet hiding should not be on by default, but I would include the other two.

[scavi-github]

Thanks! 🙂 I didn't mean these changes as a proposal to be used as default since they are somewhat opinionated (and the task animations still suffer from automatic playback on page load).
Of course, if people would like to see any of these as default I would be fine with that, but I assume that these changes are probably too opinionated.

[Brikas]

I like 3rd. 👌

I think 2nd could be useful for distinguishing link types. As optional thing.

The 1st I think makes it difficult to distinguish between empty bullets and trailing line breaks in a block. But I can see how empty bullets could be useful to make visual gaps. I would give it a try, but would like to be able to opt out of it.

[martinkoutecky]

@scavi-github, two things, and a proposal.

1. The autoplay problem can be fixed in pure CSS. Use a transition instead of a keyframe animation. An animation runs whenever the element is drawn, so it plays on page load and when a block scrolls back into view. A transition runs only when a property changes on an element that is already on screen. When you toggle a task, Tine keeps the same checkbox element and only flips its checked class, so the transition fires on the toggle and nowhere else. I checked this in a browser build of the current Beta: with the stylesheet in place, opening a page fired no transitions, and a toggle fired one. For example, a ring that ripples out and fades:

.block-task-checkbox {
  transition: box-shadow 450ms ease-out, background-color 300ms;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--task-checkbox-color) 55%, transparent);
}
.block-task-checkbox.checked { box-shadow: 0 0 0 7px transparent; }

The limit is that a transition goes from one state to the other. It can't run a multi-step keyframe sequence, but a scale on the tick mark with an overshoot cubic-bezier gives you a "pop". The ring above may still play once at startup if custom.css arrives after the first render, and a task changed by sync while it's on screen animates too, which is arguably fine. Wrap the motion in @media (prefers-reduced-motion: no-preference).

2. Style knobs exist now. The 0.8 Betas have Settings › Appearance › Fine-tuning: small visual options declared as rows in one table (src/styleKnobs.ts), using Obsidian Style Settings' type names. A new knob is one row; no new Settings code.

The proposal. Martin would like Tine to have a bit more of its own visual identity: less plain, still calm and never distracting. You clearly have the eye for this. Would you be up for proposing:

• a small default set, for example the task ripple or pop plus one or two touches of the same weight, which would ship on for everyone, and
• a set of opt-in knobs for the more opinionated pieces: hiding bullets on empty and hr blocks (hover-only can't be the default, because touch screens have no hover), link-type icons until Distinguish link types visually: page links vs external links (and folder/block links); favicons for external links like Awesome Links #430 lands, stronger motion.

A list of what and why is enough to start; CSS or a PR is welcome if you feel like it, and we can do the wiring. No obligation at all. Thanks for sharing these.

— Claude (working on Martin's behalf)

[scavi-github]

Thank you for the suggestions and for the nice words 🙂

1. Regarding Animations/Transitions:

I tried using transitions for this purpose before but wasn't able to achieve something I liked, unfortunately. I do believe that using transition for transitions and animation for animations is the correct path.

I'm no web developer, so I don't know what the industry standard is, but I would assume that a better way to achieve this probably involves JavaScript EventListeners, maybe with a temporary subclass like .block-task-checkbox.checked.animation, etc.

Something like this would also work with more general user interactions where there is no (permanent) change of class.

2./3. Regarding Style Knobs and Your Proposal

Thanks first of all!

Unfortunately, I won't have enough time/capacity for more regular or complex contributions at the moment. There is a lot of work I have to do in the next weeks/months and I will only be able to check in here sporadically. Maybe I can share some smaller ideas, but it will likely be quite limited.

[martinkoutecky]

@scavi-github Understood, thank you, and no obligation at all. Ideas whenever you have a moment are very welcome.

Your temporary-class idea fits well. If Tine added a short-lived class such as just-toggled to a checkbox when the user toggles it, a keyframe animation would play only then: not on page load, and not when a block scrolls back into view. The same hook would work for other interactions that leave no lasting class behind. I've noted it as a theming hook to consider. Martin decides whether it goes in.

— Claude (working on Martin's behalf)