feat(amplenote): init

[stellophiliac]

🎉 Theme for Amplenote 🎉

Amplenote is a note-taking and task management platform.

💬 Additional Comments 💬

nearly everything should be themed – some of the buttons with ripple effects behave weirdly, and i didn't theme the pro-only elements such as the graph and side panel

🗒 Checklist 🗒

• [x] I have read and followed Catppuccin's submission guidelines.
• [x] I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
  • [x] I have ensured that the new directory is in lower-kebab-case.
  • [x] I have followed the template and kept the preprocessor as LESS.
• [x] I have made sure to update the userstyles.yml file with information about the new userstyle.
• [x] I have included the following files:
  • catppuccin.user.css - all the CSS for the userstyle, based on the template.
  • preview.webp - composite image of all four individual flavor screenshots stitched together, generated via Catwalk.

[stellophiliac]

should be fixed! ^^

[stellophiliac]

template styling has been added the variables were remnants of when i was still working on the style and aren't needed anymore, so i removed those

[stellophiliac]

i'm having a bit of trouble themeing some bits:

these ripple buttons are a bit finicky and i can't seem to find where the colors are defined.

this thing in the calendar

these arrows in the task date selector, the popup disappears when i try to look at them in inspect

the task score thing – not sure if this is worth themeing

[uncenter]

these ripple buttons are a bit finicky and i can't seem to find where the colors are defined.

What do you mean ripple buttons? The squares with the hashtag in them? Or the three dots on the right?

these arrows in the task date selector, the popup disappears when i try to look at them in inspect

See https://github.com/catppuccin/userstyles/blob/main/docs/tips-and-tricks.md#how-can-i-inspect-hard-to-grab-elements.

the task score thing – not sure if this is worth themeing

That one is either really easy or impossible to theme ahah. If it as a <canvas> element, you can't. If it is SVGs, I think its worth theming and it shouldn't give you too much hassle.

[stellophiliac]

What do you mean ripple buttons? The squares with the hashtag in them? Or the three dots on the right?

the three dots on the right – they've got a ripple effect when you click on them, which is why i call them that

That one is either really easy or impossible to theme ahah. If it as a <canvas> element, you can't. If it is SVGs, I think its worth theming and it shouldn't give you too much hassle.

it's a lot of SVGs, and i can't seem to find how they're colored ...

[uncenter]

it's a lot of SVGs, and i can't seem to find how they're colored ...

How do I get to that view?

this thing in the calendar

Here you go:

    .calendar-pane .fc {
      .fc-timegrid-now-indicator-arrow {
        .line {
          border-bottom-color: @accent-color;
        }
        .material-icons {
          color: @accent-color;
        }
      }

      .fc-timegrid-now-indicator-line {
        border-color: darken(@accent-color, 10%);
      }
    }

[stellophiliac]

How do I get to that view?

open a note with completed tasks in note view, and check the "completed" pane on the bottom

[uncenter]

How do I get to that view?

open a note with completed tasks in note view, and check the "completed" pane on the bottom

Here you go:

    #completed-tasks-stroke-gradient, #completed-tasks-fill-gradient {
      [offset="0%"] {
        stop-color: @maroon;
      }

      [offset="50%"] {
        stop-color: @peach;
      }

      [offset="100%"] {
        stop-color: @yellow;
      }
    }

[stellophiliac]

hm, i've put that in the stylesheet on my end but it doesn't seem to work

[uncenter]

Which one? Definitely working for me.

Before	After