Skip to content

C
converse.js
Commit 28dc6e2c authored by Emmanuel Gil Peyrot's avatar Emmanuel Gil Peyrot Committed by JC Brand
Browse files
Options

Switch from SASS variables to CSS custom properties 

This will eventually allow client-side theming support.
parent 8c5df984
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 451 deletions
sass/_awesomplete.scss
View file @ 28dc6e2c
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
.awesomplete { .awesomplete {
position: relative; position: relative;
mark { mark {
background: $lightest-red; background: var(--completion-light-color);
} }
> input { > input {
...@@ -115,19 +115,19 @@ ...@@ -115,19 +115,19 @@
.suggestion-box > ul > li[aria-selected="true"], .suggestion-box > ul > li[aria-selected="true"],
div.awesomplete > ul > li[aria-selected="true"] { div.awesomplete > ul > li[aria-selected="true"] {
background: $dark-red; background: var(--completion-dark-color);
color: $inverse-link-color; color: var(--inverse-link-color);
} }
.suggestion-box li:hover mark, .suggestion-box li:hover mark,
div.awesomplete li:hover mark { div.awesomplete li:hover mark {
background: $lightest-red; background: var(--completion-light-color);
color: $inverse-link-color; color: var(--inverse-link-color);
} }
.suggestion-box li[aria-selected="true"] mark, .suggestion-box li[aria-selected="true"] mark,
div.awesomplete li[aria-selected="true"] mark { div.awesomplete li[aria-selected="true"] mark {
background: $red; background: var(--completion-normal-color);
color: inherit; color: inherit;
} }
} }
......
sass/_chatbox.scss
View file @ 28dc6e2c
This diff is collapsed.
sass/_chatrooms.scss
View file @ 28dc6e2c
This diff is collapsed.
sass/_controlbox.scss
View file @ 28dc6e2c
...@@ -6,14 +6,14 @@ ...@@ -6,14 +6,14 @@
.oauth-login { .oauth-login {
margin-left: 0; margin-left: 0;
color: $link-color; color: var(--link-color);
font-size: $font-size-large; font-size: var(--font-size-large);
&:hover { &:hover {
color: darken($link-color, 20%); color: var(--link-color-darken-20-percent);
} }
i { i {
color: $link-color; color: var(--link-color);
font-size: $font-size-huge; font-size: var(--font-size-huge);
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
...@@ -24,22 +24,22 @@ ...@@ -24,22 +24,22 @@
.xmpp-status, .xmpp-status,
.roster-contacts { .roster-contacts {
.chat-status--online { .chat-status--online {
color: $green; color: var(--chat-status-online);
} }
.chat-status--busy { .chat-status--busy {
color: $red color: var(--chat-status-busy);
} }
.chat-status--away { .chat-status--away {
color: $orange, color: var(--chat-status-away);
} }
.far.fa-circle, .far.fa-circle,
.fa-times-circle { .fa-times-circle {
color: $subdued-color; color: var(--subdued-color);
} }
} }
.room-info { .room-info {
font-size: $font-size-small; font-size: var(--font-size-small);
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
margin-left: 5px; margin-left: 5px;
} }
p.room-info { p.room-info {
line-height: $line-height; line-height: var(--line-height);
margin: 0; margin: 0;
display: block; display: block;
white-space: normal; white-space: normal;
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
background-color: white; background-color: white;
} }
margin-right: 3*$chat-gutter; margin-right: calc(3 * var(--chat-gutter));
&.logged-out { &.logged-out {
.box-flyout { .box-flyout {
...@@ -105,11 +105,11 @@ ...@@ -105,11 +105,11 @@
margin: 1.5em 0; margin: 1.5em 0;
} }
.form-errors { .form-errors {
color: $error-color; color: var(--error-color);
margin: 1em 0; margin: 1em 0;
} }
.provider-title { .provider-title {
font-size: $font-size-huge; font-size: var(--font-size-huge);
margin: 0; margin: 0;
} }
.provider-score { .provider-score {
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
} }
.form-help .url { .form-help .url {
font-weight: bold; font-weight: bold;
color: $link-color; color: var(--link-color);
} }
.input-group { .input-group {
display: table; display: table;
...@@ -138,15 +138,15 @@ ...@@ -138,15 +138,15 @@
color: gray; color: gray;
font-size: 85%; font-size: 85%;
&:hover { &:hover {
color: $text-color; color: var(--text-color);
} }
} }
} }
.conn-feedback { .conn-feedback {
color: $controlbox-head-color; color: var(--controlbox-head-color);
&.error { &.error {
color: $error-color; color: var(--error-color);
} }
p { p {
padding-bottom: 1em; padding-bottom: 1em;
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
flex-direction: column; flex-direction: column;
.brand-heading { .brand-heading {
color: $global-background-color; color: var(--global-background-color);
} }
} }
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
margin: 1em 0 0 0; margin: 1em 0 0 0;
.controlbox-heading { .controlbox-heading {
font-family: $heading-font; font-family: var(--heading-font);
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
text-transform: uppercase; text-transform: uppercase;
} }
...@@ -239,9 +239,9 @@ ...@@ -239,9 +239,9 @@
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 21; z-index: 21;
background-color: $light-background-color; background-color: var(--light-background-color);
li:hover { li:hover {
background-color: $highlight-color; background-color: var(--highlight-color);
} }
} }
} }
...@@ -257,7 +257,7 @@ ...@@ -257,7 +257,7 @@
} }
} }
li:hover { li:hover {
background-color: $light-background-color; background-color: var(--light-background-color);
} }
} }
dt a span { dt a span {
...@@ -276,7 +276,7 @@ ...@@ -276,7 +276,7 @@
.controlbox-pane { .controlbox-pane {
background-color: white; background-color: white;
border: 0; border: 0;
font-size: $font-size; font-size: var(--font-size);
left: 0; left: 0;
text-align: left; text-align: left;
overflow-x: hidden; overflow-x: hidden;
...@@ -325,16 +325,16 @@ ...@@ -325,16 +325,16 @@
.toggle-controlbox { .toggle-controlbox {
text-align: center; text-align: center;
background-color: $link-color; background-color: var(--link-color);
border-top-left-radius: $button-border-radius; border-top-left-radius: var(--button-border-radius);
border-top-right-radius: $button-border-radius; border-top-right-radius: var(--button-border-radius);
color: #0a0a0a; color: #0a0a0a;
float: right; float: right;
height: 100%; height: 100%;
margin: 0 $chat-gutter; margin: 0 var(--chat-gutter);
padding: 1em; padding: 1em;
span { span {
color: $inverse-link-color; color: var(--inverse-link-color);
} }
} }
} }
...@@ -343,11 +343,11 @@ ...@@ -343,11 +343,11 @@
#conversejs.converse-overlayed { #conversejs.converse-overlayed {
#controlbox { #controlbox {
order: -1; order: -1;
min-width: $controlbox-width !important; min-width: var(--controlbox-width) !important;
width: $controlbox-width; width: var(--controlbox-width);
.box-flyout { .box-flyout {
min-width: $controlbox-width !important; min-width: var(--controlbox-width) !important;
width: $controlbox-width; width: var(--controlbox-width);
} }
.login-trusted { .login-trusted {
...@@ -375,11 +375,11 @@ ...@@ -375,11 +375,11 @@
justify-content: space-between; justify-content: space-between;
.brand-heading { .brand-heading {
color: $text-color; color: var(--text-color);
font-size: 2em; font-size: 2em;
} }
.chatbox-btn { .chatbox-btn {
color: $controlbox-head-color; color: var(--controlbox-head-color);
margin: 0; margin: 0;
} }
} }
...@@ -396,7 +396,7 @@ ...@@ -396,7 +396,7 @@
} }
.controlbox-panes { .controlbox-panes {
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
} }
} }
} }
...@@ -438,7 +438,7 @@ ...@@ -438,7 +438,7 @@
} }
.toggle-register-login { .toggle-register-login {
line-height: $line-height-huge; line-height: var(--line-height-huge);
} }
.brand-heading-container { .brand-heading-container {
...@@ -450,7 +450,7 @@ ...@@ -450,7 +450,7 @@
font-size: 600%; font-size: 600%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
color: $blue; color: var(--brand-heading-color);
} }
.brand-subtitle { .brand-subtitle {
font-size: 90%; font-size: 90%;
...@@ -475,7 +475,7 @@ ...@@ -475,7 +475,7 @@
border: 0; border: 0;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
background-color: $controlbox-head-color; background-color: var(--controlbox-head-color);
.controlbox-head { .controlbox-head {
display: none; display: none;
......
sass/_core.scss
View file @ 28dc6e2c
...@@ -81,7 +81,7 @@ body.reset { ...@@ -81,7 +81,7 @@ body.reset {
} }
.converse-brand__text { .converse-brand__text {
font-family: $heading-font; font-family: var(--heading-font);
font-weight: normal; font-weight: normal;
width: 50%; width: 50%;
margin: auto; margin: auto;
...@@ -92,14 +92,14 @@ body.reset { ...@@ -92,14 +92,14 @@ body.reset {
} }
} }
.converse-brand__byline { .converse-brand__byline {
font-size: $font-size-small; font-size: var(--font-size-small);
width: 50%; width: 50%;
margin: auto; margin: auto;
text-align: center; text-align: center;
a { a {
text-decoration: none; text-decoration: none;
color: lighten($chatroom-head-color, 25%); color: var(--chatroom-head-color-lighten-25-percent);
} }
} }
...@@ -109,9 +109,9 @@ body.reset { ...@@ -109,9 +109,9 @@ body.reset {
position: fixed; position: fixed;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
color: $text-color; color: var(--text-color);
font-family: "Helvetica", "Arial", sans-serif; font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size; font-size: var(--font-size);
direction: ltr; direction: ltr;
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
...@@ -137,7 +137,7 @@ body.reset { ...@@ -137,7 +137,7 @@ body.reset {
} }
.brand-heading { .brand-heading {
font-family: $heading-font; font-family: var(--heading-font);
.icon-conversejs { .icon-conversejs {
font-size: 80%; font-size: 80%;
} }
...@@ -155,26 +155,26 @@ body.reset { ...@@ -155,26 +155,26 @@ body.reset {
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color; color: var(--subdued-color);
} }
::-moz-placeholder { /* Firefox 19+ */ ::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color; color: var(--subdued-color);
} }
:-ms-input-placeholder { /* IE 10+ */ :-ms-input-placeholder { /* IE 10+ */
color: $subdued-color; color: var(--subdued-color);
} }
:-moz-placeholder { /* Firefox 18- */ :-moz-placeholder { /* Firefox 18- */
color: $subdued-color; color: var(--subdued-color);
} }
::placeholder { ::placeholder {
color: $subdued-color; color: var(--subdued-color);
} }
::selection { ::selection {
background-color: $highlight-color; background-color: var(--highlight-color);
} }
::-moz-selection { ::-moz-selection {
background-color: $highlight-color; background-color: var(--highlight-color);
} }
@media screen and (max-width: $mobile-portrait-length) { @media screen and (max-width: $mobile-portrait-length) {
...@@ -208,7 +208,7 @@ body.reset { ...@@ -208,7 +208,7 @@ body.reset {
input[type=submit], input[type=button], input[type=submit], input[type=button],
input[type=text], input[type=password], input[type=text], input[type=password],
button { button {
font-size: $font-size; font-size: var(--font-size);
padding: 0.25em; padding: 0.25em;
min-height: 0; min-height: 0;
} }
...@@ -236,32 +236,32 @@ body.reset { ...@@ -236,32 +236,32 @@ body.reset {
a, a:visited, a:not([href]):not([tabindex]) { a, a:visited, a:not([href]):not([tabindex]) {
text-decoration: none; text-decoration: none;
color: $link-color; color: var(--link-color);
text-shadow: none; text-shadow: none;
&:hover { &:hover {
color: darken($link-color, 20%); color: var(--link-color-darken-20-percent);
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
} }
&.fa, &.far, &.fas { &.fa, &.far, &.fas {
color: $subdued-color; color: var(--subdued-color);
&:hover { &:hover {
color: $gray-color; color: var(--gray-color);
} }
} }
} }
canvas { canvas {
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
} }
.fa, .far, .fas { .fa, .far, .fas {
color: $subdued-color; color: var(--subdued-color);
} }
.fa:hover, .far:hover, .fas:hover { .fa:hover, .far:hover, .fas:hover {
color: $gray-color; color: var(--gray-color);
} }
.modal { .modal {
...@@ -275,7 +275,7 @@ body.reset { ...@@ -275,7 +275,7 @@ body.reset {
} }
.selected { .selected {
color: $link-color !important; color: var(--link-color) !important;
} }
.circle { .circle {
...@@ -287,7 +287,7 @@ body.reset { ...@@ -287,7 +287,7 @@ body.reset {
width: 50px; width: 50px;
height: 100vh; height: 100vh;
padding: 1rem 0; padding: 1rem 0;
background-color: $controlbox-head-color; background-color: var(--controlbox-head-color);
color: white; color: white;
text-align: center; text-align: center;
...@@ -311,7 +311,7 @@ body.reset { ...@@ -311,7 +311,7 @@ body.reset {
} }
.btn { .btn {
font-family: $heading-font; font-family: var(--heading-font);
font-weight: normal; font-weight: normal;
color: #fff; color: #fff;
.fa, .far, .fas { .fa, .far, .fas {
...@@ -444,10 +444,10 @@ body.reset { ...@@ -444,10 +444,10 @@ body.reset {
} }
.error { .error {
color: $error-color; color: var(--error-color);
} }
.info { .info {
color: $info-color; color: var(--info-color);
} }
.reg-feedback { .reg-feedback {
font-size: 85%; font-size: 85%;
...@@ -473,15 +473,15 @@ body.reset { ...@@ -473,15 +473,15 @@ body.reset {
.button-primary { .button-primary {
color: white; color: white;
background-color: $primary-color; background-color: var(--primary-color);
} }
.button-secondary { .button-secondary {
color: white; color: white;
background-color: $secondary-color; background-color: var(--secondary-color);
} }
.button-cancel { .button-cancel {
color: white; color: white;
background-color: $text-color; background-color: var(--text-color);
} }
.chat-textarea-chatbox-selected { .chat-textarea-chatbox-selected {
...@@ -489,7 +489,7 @@ body.reset { ...@@ -489,7 +489,7 @@ body.reset {
margin: 0; margin: 0;
} }
.chat-textarea-chatroom-selected { .chat-textarea-chatroom-selected {
border: 2px solid $link-color; border: 2px solid var(--link-color);
margin: 0; margin: 0;
} }
} }
...@@ -503,11 +503,11 @@ body.reset { ...@@ -503,11 +503,11 @@ body.reset {
#conversejs:not(.converse-embedded) { #conversejs:not(.converse-embedded) {
.chatbox { .chatbox {
.chat-body { .chat-body {
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
} }
} }
.flyout { .flyout {
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
} }
} }
} }
......
sass/_forms.scss
View file @ 28dc6e2c
...@@ -11,19 +11,19 @@ ...@@ -11,19 +11,19 @@
.form-control { .form-control {
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */ &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color; color: var(--subdued-color);
} }
&::-moz-placeholder { /* Firefox 19+ */ &::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color; color: var(--subdued-color);
} }
&:-ms-input-placeholder { /* IE 10+ */ &:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color; color: var(--subdued-color);
} }
&:-moz-placeholder { /* Firefox 18- */ &:-moz-placeholder { /* Firefox 18- */
color: $subdued-color; color: var(--subdued-color);
} }
&::placeholder { &::placeholder {
color: $subdued-color; color: var(--subdued-color);
} }
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
white-space: normal; white-space: normal;
} }
.save-submit { .save-submit {
color: $save-button-color; color: var(--save-button-color);
} }
.form-url { .form-url {
display: block; display: block;
...@@ -64,7 +64,7 @@ ...@@ -64,7 +64,7 @@
background: white; background: white;
padding: 1.5em; padding: 1.5em;
legend { legend {
color: $text-color; color: var(--text-color);
font-size: 125%; font-size: 125%;
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
...@@ -89,18 +89,18 @@ ...@@ -89,18 +89,18 @@
border: none; border: none;
} }
input.error { input.error {
border: 1px solid $error-color; border: 1px solid var(--error-color);
color: $text-color; color: var(--text-color);
} }
.text-muted { .text-muted {
color: $subdued-color !important; color: var(--subdued-color) !important;
font-size: 85%; font-size: 85%;
padding-top: 0.5em; padding-top: 0.5em;
a { a {
color: lighten($link-color, 10%); color: var(--link-color-lighten-10-percent);
} }
&.error { &.error {
color: $error-color; color: var(--error-color);
} }
} }
} }
......
sass/_headline.scss
View file @ 28dc6e2c
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
.chatbox.headlines { .chatbox.headlines {
.chat-head { .chat-head {
&.chat-head-chatbox { &.chat-head-chatbox {
background-color: $headline-head-color; background-color: var(--headline-head-color);
} }
} }
.chat-body { .chat-body {
background-color: $headline-head-color; background-color: var(--headline-head-color);
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
.chat-message { .chat-message {
color: $dark-orange; color: var(--headline-message-color);
} }
} }
.chat-content { .chat-content {
...@@ -21,16 +21,16 @@ ...@@ -21,16 +21,16 @@
#conversejs.converse-fullscreen { #conversejs.converse-fullscreen {
.chatbox.headlines { .chatbox.headlines {
.box-flyout { .box-flyout {
background-color: $headline-head-color; background-color: var(--headline-head-color);
} }
.chat-head { .chat-head {
&.chat-head-chatbox { &.chat-head-chatbox {
background-color: $headline-head-color; background-color: var(--headline-head-color);
} }
} }
.flyout { .flyout {
border: $flyout-padding solid $headline-head-color; border: var(--flyout-padding) solid var(--headline-head-color);
border-top: 0.8em solid $headline-head-color; border-top: 0.8em solid var(--headline-head-color);
} }
} }
} }
......
sass/_lists.scss
View file @ 28dc6e2c
...@@ -4,12 +4,12 @@ ...@@ -4,12 +4,12 @@
padding: 0.3em 0; padding: 0.3em 0;
.list-toggle { .list-toggle {
font-family: $heading-font; font-family: var(--heading-font);
display: block; display: block;
color: $text-color; color: var(--text-color);
padding: 0 0 0.5rem 0; padding: 0 0 0.5rem 0;
&:hover { &:hover {
color: $dark-gray-color; color: var(--list-toggle-color);
} }
} }
} }
...@@ -20,20 +20,20 @@ ...@@ -20,20 +20,20 @@
.list-item { .list-item {
border: none; border: none;
clear: both; clear: both;
color: $text-color; color: var(--text-color);
display: block; display: block;
height: 2em; height: 2em;
overflow: hidden; overflow: hidden;
padding-top: 0.5em; padding-top: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 var(--text-shadow-color);
word-wrap: break-word; word-wrap: break-word;
.list-item-link { .list-item-link {
&:hover { &:hover {
color: $dark-link-color; color: var(--dark-link-color);
} }
font-size: $font-size; font-size: var(--font-size);
line-height: $font-size; line-height: var(--font-size);
padding-right: 0.5em; padding-right: 0.5em;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
...@@ -42,30 +42,30 @@ ...@@ -42,30 +42,30 @@
.list-item-action { .list-item-action {
opacity: 0; opacity: 0;
font-size: $font-size-tiny; font-size: var(--font-size-tiny);
padding: 0; padding: 0;
margin: 0 0 0 0.4em; margin: 0 0 0 0.4em;
width: 1.6em; width: 1.6em;
&:before { &:before {
font-size: $font-size; font-size: var(--font-size);
} }
&.button-on { &.button-on {
color: $link-color; color: var(--link-color);
&:hover { &:hover {
color: $dark-link-color; color: var(--dark-link-color);
} }
} }
color: $subdued-color; color: var(--subdued-color);
&:hover { &:hover {
color: $gray-color; color: var(--list-toggle-hover-color);
opacity: 1; opacity: 1;
} }
} }
&.open { &.open {
background-color: $controlbox-head-color; background-color: var(--controlbox-head-color);
&:hover { &:hover {
background-color: $controlbox-head-color !important; background-color: var(--controlbox-head-color) !important;
} }
a { a {
color: white; color: white;
...@@ -76,28 +76,28 @@ ...@@ -76,28 +76,28 @@
} }
} }
.list-item-action { .list-item-action {
color: lighten($lightest-blue, 25%); color: var(--list-item-action-color);
&:hover { &:hover {
color: white; color: white;
} }
} }
.fa-circle { .fa-circle {
color: lighten($green, 25%); color: var(--list-circle-color);
} }
.fa-minus-circle { .fa-minus-circle {
color: lighten($red, 15%); color: var(--list-minus-circle-color);
} }
.fa-dot-circle { .fa-dot-circle {
color: lighten($orange, 25%); color: var(--list-dot-circle-color);
} }
.far .fa-circle, .far .fa-circle,
.fa-times-circle { .fa-times-circle {
color: lighten($subdued-color, 25%); color: var(--subdued-color-lighten-25-percent);
} }
} }
&:hover { &:hover {
background-color: lighten($controlbox-head-color, 45%); background-color: var(--controlbox-head-color-lighten-45-percent);
.fa, .far, .fas { .fa, .far, .fas {
opacity: 1; opacity: 1;
} }
......
sass/_messages.scss
View file @ 28dc6e2c
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
z-index: 0; z-index: 0;
.separator { .separator {
border: 0.5px solid $chat-head-color; border: 0.5px solid var(--chat-head-color);
margin: 0 1em; margin: 0 1em;
position: relative; position: relative;
top: 1em; top: 1em;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
.separator-text { .separator-text {
background: white; background: white;
bottom: 1px; // Offset needed due to .separator border size bottom: 1px; // Offset needed due to .separator border size
color: $message-text-color; color: var(--message-text-color);
display: inline-block; display: inline-block;
line-height: 2em; line-height: 2em;
padding: 0 1em; padding: 0 1em;
...@@ -34,14 +34,14 @@ ...@@ -34,14 +34,14 @@
} }
&.chat-info { &.chat-info {
color: $chat-head-color; color: var(--chat-head-color);
font-size: $message-font-size; font-size: var(--message-font-size);
line-height: $line-height-small; line-height: var(--line-height-small);
font-size: 90%; font-size: 90%;
padding: 0.17rem 1rem; padding: 0.17rem 1rem;
&.badge { &.badge {
color: $chat-head-text-color; color: var(--chat-head-text-color);
} }
&.chat-state-notification { &.chat-state-notification {
font-style: italic; font-style: italic;
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
font-style: italic; font-style: italic;
} }
&.chat-error { &.chat-error {
color: $warning-color; color: var(--warning-color);
font-weight: bold; font-weight: bold;
} }
} }
...@@ -86,10 +86,10 @@ ...@@ -86,10 +86,10 @@
} }
&.correcting { &.correcting {
&.groupchat { &.groupchat {
background-color: lighten($chatroom-head-color, 30%); background-color: var(--chatroom-head-color-lighten-30-percent);
} }
&:not(.groupchat) { &:not(.groupchat) {
background-color: lighten($chat-head-color, 50%); background-color: var(--chat-head-color-lighten-50-percent);
} }
} }
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
.chat-msg__text { .chat-msg__text {
padding: 0; padding: 0;
color: $message-text-color; color: var(--message-text-color);
width: 100%; width: 100%;
white-space: pre-wrap; white-space: pre-wrap;
a { a {
...@@ -182,8 +182,8 @@ ...@@ -182,8 +182,8 @@
.chat-msg__actions { .chat-msg__actions {
.chat-msg__action { .chat-msg__action {
height: $message-font-size; height: var(--message-font-size);
font-size: $message-font-size; font-size: var(--message-font-size);
padding: 0; padding: 0;
border: none; border: none;
opacity: 0; opacity: 0;
...@@ -213,16 +213,16 @@ ...@@ -213,16 +213,16 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-family: $heading-font; font-family: var(--heading-font);
font-size: 115%; font-size: 115%;
.badge { .badge {
font-size: 80%; font-size: 80%;
font-family: $normal_font; font-family: var(--normal_font);
} }
} }
.chat-msg__time { .chat-msg__time {
padding-left: 0.25em; padding-left: 0.25em;
color: lighten($text-color, 15%); color: var(--text-color-lighten-15-percent);
} }
} }
&.chat-msg--action { &.chat-msg--action {
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
width: auto; width: auto;
} }
.chat-msg__author { .chat-msg__author {
font-size: $message-font-size; font-size: var(--message-font-size);
} }
.chat-msg__time { .chat-msg__time {
margin-left: 0; margin-left: 0;
...@@ -265,7 +265,7 @@ ...@@ -265,7 +265,7 @@
-webkit-animation: colorchange-chatmessage-muc 1s; -webkit-animation: colorchange-chatmessage-muc 1s;
} }
.separator { .separator {
border: 0.5px solid $chatroom-head-color; border: 0.5px solid var(--chatroom-head-color);
} }
} }
} }
......
sass/_minimized_chats.scss
View file @ 28dc6e2c
...@@ -2,23 +2,23 @@ ...@@ -2,23 +2,23 @@
#minimized-chats { #minimized-chats {
order: 100; order: 100;
width: $minimized-chats-width; width: var(--minimized-chats-width);
margin-bottom: 0; margin-bottom: 0;
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: var(--chatbox-border-radius);
color: $inverse-link-color; color: var(--inverse-link-color);
margin-right: $chat-gutter; margin-right: var(--chat-gutter);
padding: 0; padding: 0;
.badge { .badge {
bottom: 8px; bottom: 8px;
border: 1px solid $gray-color; border: 1px solid var(--overlayed-badge-color);
} }
#toggle-minimized-chats { #toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: var(--chatbox-border-radius);
background-color: $link-color; background-color: var(--link-color);
padding: 1em 0 0 0; padding: 1em 0 0 0;
text-align: center; text-align: center;
color: white; color: white;
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
a.restore-chat { a.restore-chat {
padding: 1px 0 1px 5px; padding: 1px 0 1px 5px;
color: $chat-head-text-color; color: var(--chat-head-text-color);
line-height: 15px; line-height: 15px;
display: block; display: block;
overflow: hidden; overflow: hidden;
...@@ -43,17 +43,17 @@ ...@@ -43,17 +43,17 @@
} }
a.restore-chat:visited { a.restore-chat:visited {
color: $chat-head-text-color; color: var(--chat-head-text-color);
} }
.minimized-chats-flyout { .minimized-chats-flyout {
flex-direction: column-reverse; flex-direction: column-reverse;
bottom: 42px; bottom: 42px;
width: $minimized-chats-width; width: var(--minimized-chats-width);
.chat-head { .chat-head {
padding: 0.3em; padding: 0.3em;
border-radius: $chatbox-border-radius; border-radius: var(--chatbox-border-radius);
height: 35px; height: 35px;
margin-bottom: 0.2em; margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
font-weight: bold; font-weight: bold;
background-color: white; background-color: white;
border: 1px solid; border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color; text-shadow: 1px 1px 0 var(--text-shadow-color);
color: $warning-color; color: var(--warning-color);
border-radius: 5px; border-radius: 5px;
padding: 2px 4px; padding: 2px 4px;
font-size: 16px; font-size: 16px;
......
sass/_roster.scss
View file @ 28dc6e2c
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
width: 100%; width: 100%;
position: relative; position: relative;
margin: 0; margin: 0;
height: $roster-height; height: var(--roster-height);
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
// XXX: FIXME // XXX: FIXME
...@@ -37,10 +37,10 @@ ...@@ -37,10 +37,10 @@
.roster-filter { .roster-filter {
width: 100%; width: 100%;
margin: 0.2em; margin: 0.2em;
font-size: calc(#{$font-size} - 2px); font-size: calc(var(--font-size) - 2px);
} }
.state-type { .state-type {
font-size: calc(#{$font-size} - 2px); font-size: calc(var(--font-size) - 2px);
width: 100%; width: 100%;
} }
} }
...@@ -54,17 +54,17 @@ ...@@ -54,17 +54,17 @@
.roster-group { .roster-group {
border: none; border: none;
color: $text-color; color: var(--text-color);
font-weight: normal; font-weight: normal;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 var(--text-shadow-color);
margin: 0.75em 0 0.75em 0; margin: 0.75em 0 0.75em 0;
.group-toggle { .group-toggle {
&:hover { &:hover {
color: $dark-gray-color; color: var(--roster-group-toggle-hover-color);
} }
font-family: $heading-font; font-family: var(--heading-font);
color: $text-color; color: var(--text-color);
display: block; display: block;
width: 100%; width: 100%;
padding-top: 0; padding-top: 0;
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
li { li {
&.requesting-xmpp-contact { &.requesting-xmpp-contact {
a { a {
line-height: $line-height; line-height: var(--line-height);
&.far, &.fas, &.fa { &.far, &.fas, &.fa {
width: 1.5em; width: 1.5em;
} }
...@@ -96,11 +96,11 @@ ...@@ -96,11 +96,11 @@
.msgs-indicator { .msgs-indicator {
color: white; color: white;
background-color: $chat-head-color; background-color: var(--chat-head-color);
opacity: 1; opacity: 1;
border-radius: 10%; border-radius: 10%;
padding: 0.2em; padding: 0.2em;
font-size: $font-size-small; font-size: var(--font-size-small);
} }
.contact-name { .contact-name {
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
} }
} }
&.current-xmpp-contact span { &.current-xmpp-contact span {
font-size: $font-size; font-size: var(--font-size);
float: left; float: left;
margin-right: 0.5em; margin-right: 0.5em;
} }
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
margin-left: 5px; margin-left: 5px;
} }
&:hover { &:hover {
background-color: lighten($controlbox-head-color, 45%); background-color: var(--controlbox-head-color-lighten-45-percent);
.remove-xmpp-contact { .remove-xmpp-contact {
display: inline-block; display: inline-block;
} }
...@@ -151,7 +151,7 @@ ...@@ -151,7 +151,7 @@
} }
span { span {
&.pending-contact-name { &.pending-contact-name {
line-height: $line-height; line-height: var(--line-height);
width: 100%; width: 100%;
} }
} }
......
sass/_variables.scss
View file @ 28dc6e2c
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$visitor-color: #A8ABA1 !default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$greenish-white: #E7FBF0;
$reddish-white: #FFECE7;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$info: $green !default;
$lightest-green: #E7FBF0;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
$text-shadow-color: #FAFAFA !default;
$text-color: #666 !default;
$message-text-color: #555 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$chat-textarea-color: #666 !default;
$chat-textarea-height: 60px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: $green !default;
$roster-height: 194px !default;
$flyout-padding: 1.2em;
$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$primary-color: $orange !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
$moderator-color: $dark-red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
$message-font-size: 14px !default; $font-path: "webfonts/icomoon/fonts/" !default;
$font-size-tiny: 10px !default; #conversejs {
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
$controlbox-width: 250px !default; --chat-status-online: #3AA569; // $green
$controlbox-head-color: $light-blue !default; --chat-status-busy: #E77051; // $red
--chat-status-away: #E7A151; // $orange
$chat-gutter: 0.5em !default; --brand-heading-color: #387592; // $blue
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default; --completion-light-color: #FFB9A7; // $lightest-red
$mobile-chat-height: 400px !default; --completion-normal-color: #E77051; // $red
$small-mobile-chat-height: 300px !default; --completion-dark-color: #D24E2B; // $dark-red
$font-path: "webfonts/icomoon/fonts/" !default; --link-color: #578EA9; // $light-blue
--link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
--dark-link-color: #206485; // $dark-blue
--global-background-color: #578EA9; // $light-blue
--inverse-link-color: white;
--text-shadow-color: #FAFAFA;
--text-color: #666;
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-text-color: #555;
--save-button-color: #3AA569; // $green
--chat-textarea-color: #666;
--chat-textarea-height: 60px;
--send-button-height: 27px;
--send-button-margin: 3px;
--roster-height: 194px;
--roster-group-toggle-hover-color: #585B51; // $dark-gray-color
--flyout-padding: 1.2em;
--chat-head-color: #3AA569; // $green
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
--chat-head-text-color: white;
--highlight-color: #DCF9F6;
--primary-color: #E7A151; // $orange
--secondary-color: #387592; // $blue
--warning-color: #D24E2B; // $dark-red
--light-background-color: #FCFDFD;
--error-color: #A53214; // $darkest-red
--info-color: #1E9652; // $dark-green
--button-border-radius: 5px;
--chatbox-border-radius: 4px;
--controlbox-width: 250px;
--controlbox-head-color: #578EA9; // $light-blue
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
--chat-gutter: 0.5em;
--minimized-chats-width: 130px;
--mobile-chat-width: 100%;
--mobile-chat-height: 400px;
// TODO: figure out a way to concatenate custom properties with strings.
// --font-path: "webfonts/icomoon/fonts/";
$normal-font: "Helvetica", "Arial", sans-serif; --normal-font: "Helvetica", "Arial", sans-serif;
$heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default; --heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
$chatroom-color-dark: $darkest-red !default; --chatroom-head-color: #E77051; // $red
$chatroom-color-light: $light-red !default; --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
$chatroom-head-color: $red !default; --chatroom-head-color-lighten-30-percent: #fadfd7; // lighten($red, 30%)
$chatroom-message-them-color: $green !default; --chatroom-width: 400px;
$chatroom-width: 400px !default;
$headline-head-color: $orange !default; --headline-head-color: #E7A151; // $orange
--headline-message-color: #D2842B; // $dark-orange
$box-close-button-padding-top: 4px !default; --chatbox-button-size: 14px;
$box-close-button-padding-bottom: 4px !default; --fullpage-chatbox-button-size: 16px;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
$chatbox-button-size: 14px !default; --font-size-tiny: 10px;
$fullpage-chatbox-button-size: 16px !default; --font-size-small: 12px;
--font-size: 14px;
--font-size-large: 16px;
--font-size-huge: 20px;
$font-size-tiny: 10px !default; --message-font-size: var(--font-size);
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default; --line-height-small: 14px;
--line-height: 16px;
--line-height-large: 20px;
--line-height-huge: 27px;
$line-height-small: 14px !default; --occupants-padding: 1em;
$line-height: 16px !default;
$line-height-large: 20px !default;
$line-height-huge: 27px !default;
$occupants-padding: 1em; --embedded-emoji-picker-height: 200px;
$embedded-emoji-picker-height: 200px !default; --fullpage-chat-head-height: 62px;
--fullpage-chat-height: 100vh;
--fullpage-chat-width: 100%;
--fullpage-emoji-picker-height: 200px;
--fullpage-max-chat-textarea-height: 15em;
$fullpage-chat-head-height: 62px !default; --overlayed-chat-head-height: 55px;
$fullpage-chat-height: 100vh; --overlayed-chat-height: 450px;
$fullpage-chat-width: 100%; --overlayed-chat-width: 250px;
$fullpage-emoji-picker-height: 200px !default; --overlayed-chatbox-hover-height: 1em;
$fullpage-max-chat-textarea-height: 15em!default; --overlayed-emoji-picker-height: 100px;
--overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479; // $gray-color
$overlayed-chat-head-height: 55px !default; --list-toggle-color: #585B51; // $dark-gray-color
$overlayed-chat-height: 450px !default; --list-toggle-hover-color: #818479; // $gray-color
$overlayed-chat-width: 250px !default; --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
$overlayed-chatbox-hover-height: 1em !default; --list-circle-color: #89d6ab; // lighten($green, 25%)
$overlayed-emoji-picker-height: 100px !default; --list-minus-circle-color: #f0a794; // lighten($red, 15%)
$overlayed-max-chat-textarea-height: 200px !default; --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
}
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