iOS: loginScreen form input outline style inconsistency #4365

• Framework7 version: 9.0.2
• Platform and Target: Chrome Browser, PWA/WebApp in iOS style mode

Describe the bug

On login screens, when using form inputs with floating labels and outline style, the floating labels are displayed with a mismatched background color. BUT: this only applies to iOS style in light mode.

To Reproduce

Steps to reproduce the behavior:

1. Create a login screen
2. Create form inputs with floating labels (and outline style)
3. Turn on iOS style
4. See mismatched floating label background colors

Expected behavior

I expect the floating label to have the same background color as the page, which in this case, is the login screen, so white instead of #efeff4.

Actual Behavior

The background color of the floating label is mismatched as described above.

Screenshots

Additional context

I checked the underlying CSS rules and found the cause:

.item-input-outline.item-content .item-floating-label {
    background: var(--f7-page-bg-color); /* #efeff4 */
}

I checked the variable and --f7-page-bg-color resolves to #efeff4 in light mode while the following rule sets the login screen background color to #fff:

.login-screen-content, .login-screen-page, .login-screen .page {
    background: var(--f7-login-screen-content-bg-color); /* #fff */
}

That rule defines the login screen background as white (as opposed to a normal page's background color), leading to the mismatch in the floating label CSS rule. This does not happen with MD theme.