如何在 Firebase UI Web Loaded from CDN 中更改使用电子邮件登录表单的颜色

Question

有没有办法在不重建整个 FirebaseUI 的情况下覆盖 CSS？我需要更改下表中的紫色。我没有使用手机。我只有从 CDN 为 FirebaseUI 引入 CSS 和 JavaScript 的脚本标签。

想要在页面 html 中使用样式标签覆盖颜色。不想分叉，更改部署，现在必须维护更多代码。 :)

我有这个 link 到 css 但无法弄清楚哪个属性控制颜色。 https://github.com/firebase/firebaseui-web/blob/master/stylesheet/firebase-ui.css

这里是github项目供参考： https://github.com/firebase/firebaseui-web

Answer 1

几周前我不得不这样做。以下是我更改的属性：

.firebaseui-button {
    background-color: #ff626e !important;
    color: white !important;
}

.firebaseui-textfield.mdl-textfield .firebaseui-label:after {
    background-color: #ff626e !important;
}

.mdl-progress > .progressbar {
    background-color: #ff626e !important;
}

.mdl-progress > .bufferbar {
    background-image: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0.7),
            hsla(0, 0%, 100%, 0.7)
        ),
        linear-gradient(90deg, #ff626e, #ff626e) !important;
    z-index: 0;
    left: 0;
}

.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
    background-image: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0.9),
            hsla(0, 0%, 100%, 0.9)
        ),
        linear-gradient(90deg, #ff626e, #ff626e) !important;
}

如何在 Firebase UI Web Loaded from CDN 中更改使用电子邮件登录表单的颜色

How do I change the Sign in with email form colors in Firebase UI Web Loaded from CDN

html

css

firebase

firebaseui