search

chetachiezikeuzor / Yin-and-Yang-Theme

An Obsidian.md theme with a stark contrast between dark mode and light mode, much like the Yin and Yang symbol ☯️.
Mozilla Public License 2.0
544 stars 42 forks source link

Progress bar CSS snippet #70

Open ontrou opened 3 years ago

ontrou commented 3 years ago

I use progress bars in my weekly notes, and I just realized that there is an HTML element that does this. Here is my clueless give-it-a-go attempt so that it coordinates with your the checkbox styling. Is there a better way?

` progress[value] { / Reset the default appearance / -webkit-appearance: none; appearance: none; width: 100px; height: 18px; }

progress[value]::-webkit-progress-bar { background-color: var(--background-primary-alt); border: 1px solid var(--background-modifier-border); border-radius: 3px; box-shadow: inset 0px 0.5px 1px var(--background-zero); }

progress[value]::-webkit-progress-value {
background: var(--background-modifier-accent); box-shadow: none; border-color: transparent; border-radius: 2px; } `

LonelyMusicDisc commented 2 years ago

this looks great! I hope it becomes official.