Skip to content

C
converse.js
Commit d4a33656 authored by JC Brand's avatar JC Brand
Browse files
Options

Move form specific styles to _forms.scss

parent 7a36acad
Hide whitespace changes
Inline Side-by-side
Showing with 272 additions and 294 deletions
css/converse.css
View file @ d4a33656
...@@ -6890,20 +6890,6 @@ body.reset { ...@@ -6890,20 +6890,6 @@ body.reset {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs ::placeholder { #conversejs ::placeholder {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
#conversejs .form-control::-moz-placeholder {
/* Firefox 19+ */
color: #A8ABA1; }
#conversejs .form-control:-ms-input-placeholder {
/* IE 10+ */
color: #A8ABA1; }
#conversejs .form-control:-moz-placeholder {
/* Firefox 18- */
color: #A8ABA1; }
#conversejs .form-control::placeholder {
color: #A8ABA1; }
#conversejs ::selection { #conversejs ::selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
...@@ -7175,50 +7161,6 @@ body.reset { ...@@ -7175,50 +7161,6 @@ body.reset {
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #666; } background-color: #666; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.converse-form input[type=checkbox] {
display: block; }
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #666; }
#conversejs form.converse-form .text-muted {
color: #A8ABA1 !important;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.converse-form .text-muted a {
color: #79a5ba; }
#conversejs form.converse-form .text-muted.error {
color: #A53214; }
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
...@@ -7258,6 +7200,82 @@ body.reset { ...@@ -7258,6 +7200,82 @@ body.reset {
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs form .form-group {
margin-bottom: 2em; }
#conversejs form .form-check-label {
margin-top: 0.3rem; }
#conversejs form .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
#conversejs form .form-control::-moz-placeholder {
/* Firefox 19+ */
color: #A8ABA1; }
#conversejs form .form-control:-ms-input-placeholder {
/* IE 10+ */
color: #A8ABA1; }
#conversejs form .form-control:-moz-placeholder {
/* Firefox 18- */
color: #A8ABA1; }
#conversejs form .form-control::placeholder {
color: #A8ABA1; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form#converse-register legend, #conversejs form#converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto; }
#conversejs form#converse-register fieldset.buttons, #conversejs form#converse-login fieldset.buttons {
text-align: center; }
#conversejs form#converse-register .login-anon, #conversejs form#converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs form#converse-register .save-submit, #conversejs form#converse-login .save-submit {
color: #3AA569; }
#conversejs form#converse-register .form-url, #conversejs form#converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #666; }
#conversejs form.converse-form .text-muted {
color: #A8ABA1 !important;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.converse-form .text-muted a {
color: #79a5ba; }
#conversejs form.converse-form .text-muted.error {
color: #A53214; }
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs #user-profile-modal label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
...@@ -7788,25 +7806,6 @@ body.reset { ...@@ -7788,25 +7806,6 @@ body.reset {
color: #666; } color: #666; }
#conversejs #controlbox .oauth-login .icon-social:before { #conversejs #controlbox .oauth-login .icon-social:before {
font-size: 16px; } font-size: 16px; }
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox .controlbox-pane .userinfo { #conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; } padding-bottom: 1em; }
#conversejs #controlbox .controlbox-pane .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
...@@ -7817,12 +7816,12 @@ body.reset { ...@@ -7817,12 +7816,12 @@ body.reset {
margin-bottom: 0.75em; } margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
padding: 0; } padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms .add-chatroom {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button], #conversejs #controlbox #chatrooms .add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit], #conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] { #conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
width: 100%; } width: 100%; }
#conversejs #controlbox .controlbox-section { #conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; } margin: 1em 0 0 0; }
......
css/inverse.css
View file @ d4a33656
...@@ -6890,20 +6890,6 @@ body.reset { ...@@ -6890,20 +6890,6 @@ body.reset {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs ::placeholder { #conversejs ::placeholder {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs .form-control::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #A8ABA1; }
#conversejs .form-control::-moz-placeholder {
/* Firefox 19+ */
color: #A8ABA1; }
#conversejs .form-control:-ms-input-placeholder {
/* IE 10+ */
color: #A8ABA1; }
#conversejs .form-control:-moz-placeholder {
/* Firefox 18- */
color: #A8ABA1; }
#conversejs .form-control::placeholder {
color: #A8ABA1; }
#conversejs ::selection { #conversejs ::selection {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#conversejs ::-moz-selection { #conversejs ::-moz-selection {
...@@ -7175,50 +7161,6 @@ body.reset { ...@@ -7175,50 +7161,6 @@ body.reset {
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #666; } background-color: #666; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.converse-form input[type=checkbox] {
display: block; }
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #666; }
#conversejs form.converse-form .text-muted {
color: #A8ABA1 !important;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.converse-form .text-muted a {
color: #79a5ba; }
#conversejs form.converse-form .text-muted.error {
color: #A53214; }
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs .chat-textarea-chatbox-selected { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; } margin: 0; }
...@@ -7299,15 +7241,82 @@ body { ...@@ -7299,15 +7241,82 @@ body {
#conversejs.fullscreen .converse-chatboxes { #conversejs.fullscreen .converse-chatboxes {
width: 100vw; width: 100vw;
right: 15px; } right: 15px; }
#conversejs.fullscreen form.converse-form input[type=checkbox] {
margin-left: 1em; #conversejs form .form-group {
display: inline;
margin-bottom: 2em; } margin-bottom: 2em; }
#conversejs.fullscreen form.converse-form input[type=button], #conversejs form .form-check-label {
#conversejs.fullscreen form.converse-form input[type=submit] { margin-top: 0.3rem; }
padding-left: 1em; #conversejs form .form-control::-webkit-input-placeholder {
padding-right: 1em; /* Chrome/Opera/Safari */
margin-right: 1em; } color: #A8ABA1; }
#conversejs form .form-control::-moz-placeholder {
/* Firefox 19+ */
color: #A8ABA1; }
#conversejs form .form-control:-ms-input-placeholder {
/* IE 10+ */
color: #A8ABA1; }
#conversejs form .form-control:-moz-placeholder {
/* Firefox 18- */
color: #A8ABA1; }
#conversejs form .form-control::placeholder {
color: #A8ABA1; }
#conversejs form .clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem; }
#conversejs form#converse-register legend, #conversejs form#converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto; }
#conversejs form#converse-register fieldset.buttons, #conversejs form#converse-login fieldset.buttons {
text-align: center; }
#conversejs form#converse-register .login-anon, #conversejs form#converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs form#converse-register .save-submit, #conversejs form#converse-login .save-submit {
color: #3AA569; }
#conversejs form#converse-register .form-url, #conversejs form#converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs form.converse-form {
background: white;
padding: 1em; }
#conversejs form.converse-form legend {
color: #666;
font-size: 125%;
margin-bottom: 1.5em; }
#conversejs form.converse-form select,
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=text] {
min-width: 50%; }
#conversejs form.converse-form input[type=text],
#conversejs form.converse-form input[type=password],
#conversejs form.converse-form input[type=number],
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding: 0.5em; }
#conversejs form.converse-form input[type=button],
#conversejs form.converse-form input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin: 0.5em 0;
border: none; }
#conversejs form.converse-form input.error {
border: 1px solid #A53214;
color: #666; }
#conversejs form.converse-form .text-muted {
color: #A8ABA1 !important;
font-size: 85%;
padding-top: 0.5em; }
#conversejs form.converse-form .text-muted a {
color: #79a5ba; }
#conversejs form.converse-form .text-muted.error {
color: #A53214; }
#conversejs form.converse-centered-form {
text-align: center; }
#conversejs #user-profile-modal label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
...@@ -7858,25 +7867,6 @@ body { ...@@ -7858,25 +7867,6 @@ body {
color: #666; } color: #666; }
#conversejs #controlbox .oauth-login .icon-social:before { #conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; } font-size: 18px; }
#conversejs #controlbox #converse-register legend, #conversejs #controlbox #converse-login legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto; }
#conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login label {
margin-top: 2em; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%; }
#conversejs #controlbox #converse-register .form-url, #conversejs #controlbox #converse-login .form-url {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox .controlbox-pane .userinfo { #conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; } padding-bottom: 1em; }
#conversejs #controlbox .controlbox-pane .userinfo .username { #conversejs #controlbox .controlbox-pane .userinfo .username {
...@@ -7887,12 +7877,12 @@ body { ...@@ -7887,12 +7877,12 @@ body {
margin-bottom: 0.75em; } margin-bottom: 0.75em; }
#conversejs #controlbox #chatrooms { #conversejs #controlbox #chatrooms {
padding: 0; } padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom { #conversejs #controlbox #chatrooms .add-chatroom {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button], #conversejs #controlbox #chatrooms .add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit], #conversejs #controlbox #chatrooms .add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] { #conversejs #controlbox #chatrooms .add-chatroom input[type=text] {
width: 100%; } width: 100%; }
#conversejs #controlbox .controlbox-section { #conversejs #controlbox .controlbox-section {
margin: 1em 0 0 0; } margin: 1em 0 0 0; }
......
sass/_controlbox.scss
View file @ d4a33656
...@@ -181,35 +181,6 @@ ...@@ -181,35 +181,6 @@
} }
} }
#converse-register, #converse-login {
legend {
width: 100%;
text-align: center;
margin: 0 auto 0.5em auto;
}
label {
margin-top: 2em;
}
fieldset.buttons {
text-align: center;
}
.login-anon {
height: auto;
white-space: normal;
}
.save-submit {
color: $save-button-color;
}
input {
width: 100%;
}
.form-url {
display: block;
font-weight: normal;
margin: 1em 0;
}
}
.controlbox-pane { .controlbox-pane {
.userinfo { .userinfo {
...@@ -229,7 +200,7 @@ ...@@ -229,7 +200,7 @@
#chatrooms { #chatrooms {
padding: 0; padding: 0;
form.add-chatroom { .add-chatroom {
input[type=button], input[type=button],
input[type=submit], input[type=submit],
input[type=text] { input[type=text] {
......
sass/_core.scss
View file @ d4a33656
...@@ -89,23 +89,6 @@ body.reset { ...@@ -89,23 +89,6 @@ body.reset {
::placeholder { ::placeholder {
color: $subdued-color; color: $subdued-color;
} }
.form-control {
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
}
&:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
}
&::placeholder {
color: $subdued-color;
}
}
::selection { ::selection {
background-color: $highlight-color; background-color: $highlight-color;
...@@ -402,66 +385,6 @@ body.reset { ...@@ -402,66 +385,6 @@ body.reset {
background-color: $text-color; background-color: $text-color;
} }
form {
.clear-input {
position: absolute;
right: 0.2em;
cursor: pointer;
font-size: 0.75rem;
}
&.converse-form {
background: white;
padding: 1em;
legend {
color: $text-color;
font-size: 125%;
margin-bottom: 1.5em;
}
input[type=checkbox] {
display: block;
}
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 $error-color;
color: $text-color;
}
.text-muted {
color: $subdued-color !important;
font-size: 85%;
padding-top: 0.5em;
a {
color: lighten($link-color, 10%);
}
&.error {
color: $error-color;
}
}
}
&.converse-centered-form {
text-align: center;
}
}
.chat-textarea-chatbox-selected { .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; margin: 0;
......
sass/_forms.scss 0 → 100644
View file @ d4a33656
#conversejs {
form {
.form-group {
margin-bottom: 2em;
}
.form-check-label {
margin-top: $form-check-input-margin-y;
}
.form-control {
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
}
&:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
}
&::placeholder {
color: $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: $save-button-color;
}
.form-url {
display: block;
font-weight: normal;
margin: 1em 0;
}
}
&.converse-form {
background: white;
padding: 1em;
legend {
color: $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 $error-color;
color: $text-color;
}
.text-muted {
color: $subdued-color !important;
font-size: 85%;
padding-top: 0.5em;
a {
color: lighten($link-color, 10%);
}
&.error {
color: $error-color;
}
}
}
&.converse-centered-form {
text-align: center;
}
}
}
sass/converse.scss
View file @ d4a33656
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
} }
@import "core"; @import "core";
@import "converse/core"; @import "converse/core";
@import "forms";
@import "profile"; @import "profile";
@import "chatbox"; @import "chatbox";
@import "converse/chatbox"; @import "converse/chatbox";
......
sass/inverse.scss
View file @ d4a33656
...@@ -40,6 +40,7 @@ ...@@ -40,6 +40,7 @@
} }
@import "core"; @import "core";
@import "inverse/core"; @import "inverse/core";
@import "forms";
@import "profile"; @import "profile";
@import "chatbox"; @import "chatbox";
@import "inverse/chatbox"; @import "inverse/chatbox";
......
sass/inverse/_core.scss
View file @ d4a33656
...@@ -35,25 +35,8 @@ body { ...@@ -35,25 +35,8 @@ body {
} }
#conversejs.fullscreen { #conversejs.fullscreen {
.converse-chatboxes { .converse-chatboxes {
width: 100vw; width: 100vw;
right: 15px; // Hack due to padding added by bootstrap right: 15px; // Hack due to padding added by bootstrap
} }
form {
&.converse-form {
input[type=checkbox] {
margin-left: 1em;
display: inline;
margin-bottom: 2em;
}
input[type=button],
input[type=submit] {
padding-left: 1em;
padding-right: 1em;
margin-right: 1em;
}
}
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7