Bluemoondragon07 / obsidian-big-and-bold

A bold theme designed in the style of a WYSIWYG Editor, created for maximum focus and a modern look.
Creative Commons Zero v1.0 Universal
42 stars 3 forks source link

Improved ribbon menu width #8

Closed LeslyeCream closed 1 year ago

LeslyeCream commented 1 year ago

Your theme is really impressive! it has made me want to use obsidian again.

I think the ribbon menu could be improved a bit by adjusting its width:

IMG_20230410_173932 IMG_20230410_173910

I have used the following code

.is-mobile .menu { max-height: calc(100% - 100px); width: calc(100% - 40px); max-width: calc(90% - 20px); min-width: unset; position: absolute; bottom: 0; border-radius: 9px 9px 0 0; padding: 10px 20px; left: 10px !important; top: unset !important; overflow-y: auto; }

I think it needs just one adjustment as you can see in the screenshot (it doesn't quite match the width of the text).

Otherwise it's perfect for me 💯 Thank you !

Bwt: how can I easily change the color or transparency of the text (inline title and content). I have tried with snippets but it doesn't work and within the RGB it makes me completely lost 😂

Bluemoondragon07 commented 1 year ago

Hi, glad you like the theme! The messed up prompt width is actually leftover code that I forgot to delete when I was planning to redesign the mobile interface a bit more than I ended up doing. A quick fix would be this snippet, but I'll also fix it in the next update:

.is-phone .prompt {
width: 100vh;
}

And for changing the opacity of the text, you could use this snippet:

body {
    --text-opacity: 0.5; /* <-- put desired opacity here */
}
.theme-light {
    --text-normal: rgba(0, 0, 0, var(--text-opacity)) !important;
}
.theme-dark {
    --text-normal: rgba(255, 255, 255, var(--text-opacity)) !important;
}

/*
@settings
name: Text Opacity
id: text-opacity-settings
settings:
    -
        id: text-opacity
        title: Text Opacity
        type: variable-number-slider
        default: 1
        min: 0
        max: 1
        step: 0.1
*/

This snippet also includes Style Settings support, so you can change the opacity that way, too.

Bluemoondragon07 commented 1 year ago

Fixed this in the latest update. Enjoy!