xmpp.chapril.org-conversejs/sass/_forms.scss
JC Brand d311e14013 Render MUC forms with Backbone.VDOMView
That way we don't lose the user's input values, we avoid flashing and we
avoid unnecessary rendering.

In the process, fixed an annoying issue where Chrome auto-completes
what it thinks is the username into the "Language Tag" field of the MUC
config form.

Instead we tell Chrome that the MUC JID is the username, thereby also
letting it save the password to to that JID.
2019-04-24 14:51:12 +02:00

130 lines
3.3 KiB
SCSS

#conversejs {
.btn--small {
font-size: 80%;
font-weight: normal;
}
form {
.hidden-username {
opacity: 0 !important;
height: 0 !important;
padding: 0 !important;
}
.error-feedback {
margin-bottom: 0.5em;
}
.form-check-label {
margin-top: $form-check-input-margin-y;
}
.form-control {
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: var(--subdued-color);
}
&::-moz-placeholder { /* Firefox 19+ */
color: var(--subdued-color);
}
&:-ms-input-placeholder { /* IE 10+ */
color: var(--subdued-color);
}
&:-moz-placeholder { /* Firefox 18- */
color: var(--subdued-color);
}
&::placeholder {
color: var(--subdued-color);
}
}
.clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem;
}
&#converse-register,
&#converse-login {
legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto;
}
fieldset.buttons {
text-align: center;
}
.login-anon {
height: auto;
white-space: normal;
}
.save-submit {
color: var(--save-button-color);
}
.form-url {
display: block;
font-weight: normal;
margin: 1em 0;
}
}
&.converse-form {
background: white;
padding: 1.2rem;
legend {
color: var(--text-color);
font-size: 125%;
margin-bottom: 1.5em;
}
select,
input[type=password],
input[type=number],
input[type=text] {
min-width: 50%;
}
input[type=text],
input[type=password],
input[type=number],
input[type=button],
input[type=submit] {
padding: 0.5em;
}
input[type=button],
input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none;
}
input.error {
border: 1px solid var(--error-color);
color: var(--text-color);
}
.text-muted {
color: var(--subdued-color) !important;
font-size: 85%;
padding-top: 0.5em;
a {
color: var(--link-color-lighten-10-percent);
}
&.error {
color: var(--error-color);
}
}
}
&.converse-form--modal {
padding-bottom: 0;
}
&.converse-centered-form {
min-height: 66%;
text-align: center;
input {
max-width: 30em;
margin: auto;
}
}
}
}