Why is backdrop-filter only working when I manually modify the original CSS file of an Apex Theme in the Browser Inspector?

Question

Original Question: Is there a way to forcefully add a new CSS property to an Apex Universal Theme element?

First of all, I know this is just a stylistic feature, but it could also apply to usability features and I want to think there's a workaround to it (or that I just haven't tried everything possible). I'm making a web app using Oracle Apex 5.1.4. The app is styled with the built-in Universal Theme 42. I'm trying to give a custom style to the login page (generated by Apex upon creation of the application), specifically the Login content, through it's class t-Login-region. I have been able to change already existing properties (such as background-color, border-radius, etc.) and some new ones (such as filter).

I've ran into an issue where I'm trying to apply backdrop-filter to the Login region so it blurs the background below it. I tried adding the property from the browser inspector to test it live without altering the CSS, then from the Theme Roller, and lastly from the Page Designer (Inline CSS). None of these worked... by themselves.

Here's how it looks currently.

After a while of meddling through the inspector I noticed this block in the original CSS file of the page's theme (Core.min.css?v=5.1.4.00.08) that applies style to the t-Login-region class:

.t-Login-region {
    border-radius: 2px;
    box-shadow: 0 3px 9px -2px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.075);
    overflow: hidden;
    padding: 32px
}

I added a semicolon to the last line and backdrop-filter is now working. Now I noticed the effect starts working ONLY when I make any live changes to that CSS file via the Browser Inspector. Also, this is only happening with backdrop-filter. I changed it to filter and it works just fine, so I can effectively add new properties, it's just precisely the one I'm trying to add that doesn't work...

Anyways, here's my custom CSS:

body {
    background-image: linear-gradient(45deg, black 50%, white 50%);
}

.t-Login-region {
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
}

Answer 1

Yes, you can modify your application's theme CSS file by shared components -> themes page. There, you need to find the filename of your current theme's style file. Then, search on this page for this file name (usually a name like 12345567.css) and then you can make modifications.

EDIT: When you click to the filename, not the download button, you should be able to edit it on a built-in editor: