How to reduce the size of icons at the top? (Mobile)

[Disappointed]

What I’m trying to do

I’m trying to reduce the size of top icons on my Mobile Obsidian(iOS).
The ones at the top of the screen: more options(3 dots), view switcher and overall that header.
Here are screenshots so you know what I’m talking about.

The way they look in the LYT theme is what I want. Compact and convenient.

But the other themes including default don’t have that luxury. The buttons are big, and with the addition of other commands from Commander, everything becomes too cumbersome.

Things I have tried

I’m a novice in CSS. However I dug through all the possible options in the Developer Tool(Ctrl+Shift+I), but couldn’t find the right ones to change the size of the icons.

When I changed these settings bellow(using "select an element in the page in Devel Tool) I thought I got what I needed. But this snippet has no effect on the display of icons in the MOBILE version.

.view-actions {
    gap: 0;
    align-items: center;
    --icon-size: 15px;
}

I’m desperate
Other snippets work fine in Mobile version so I think the problem with the size of the icons can also be solved.

I would be very grateful for your help.

[ariehen]

Three of those icons aren’t from Obsidian, but this is doable with the vanilla icons. The others should play along(?). Obviously, you want to go smaller, but with ridiculous size and color for impact.

.is-mobile .view-header .view-action {
   --icon-size: 50px; /* default - 24px */
   color: var(--color-red);
}

If you have an iPad/tablet as well you may what to use the .is-phone selector instead of .is-mobile.

[Disappointed]

Hey, it worked.

I’m incredibly grateful for the help. I’ve been working on it for a week lol)