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
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 451 deletions
sass/_awesomplete.scss
View file @ 28dc6e2c
......@@ -17,7 +17,7 @@
.awesomplete {
position: relative;
mark {
background: $lightest-red;
background: var(--completion-light-color);
}
> input {
......@@ -115,19 +115,19 @@
.suggestion-box > ul > li[aria-selected="true"],
div.awesomplete > ul > li[aria-selected="true"] {
background: $dark-red;
color: $inverse-link-color;
background: var(--completion-dark-color);
color: var(--inverse-link-color);
}
.suggestion-box li:hover mark,
div.awesomplete li:hover mark {
background: $lightest-red;
color: $inverse-link-color;
background: var(--completion-light-color);
color: var(--inverse-link-color);
}
.suggestion-box li[aria-selected="true"] mark,
div.awesomplete li[aria-selected="true"] mark {
background: $red;
background: var(--completion-normal-color);
color: inherit;
}
}
......
sass/_chatbox.scss
View file @ 28dc6e2c
......@@ -3,7 +3,7 @@
display: none;
}
.flyout {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
position: absolute;
@media screen and (max-height: $mobile-landscape-height) {
......@@ -25,7 +25,7 @@
border-radius: 25%;
border: none;
cursor: pointer;
font-size: $chatbox-button-size;
font-size: var(--chatbox-button-size);
margin: 0 0.2em;
padding: 0 0 0 0.5em;
text-decoration: none;
......@@ -45,7 +45,7 @@
position: relative;
&.chat-head-chatbox {
background-color: $chat-head-color;
background-color: var(--chat-head-color);
}
.avatar {
......@@ -67,7 +67,7 @@
}
.user-custom-message {
color: lighten($chat-head-color, 50%);
color: var(--chat-head-color-lighten-50-percent);
font-size: 75%;
overflow: hidden;
text-overflow: ellipsis;
......@@ -84,8 +84,8 @@
color: white;
&.button-on:before {
padding: 0.2em;
background-color: $chat-head-text-color;
color: $chat-head-color;
background-color: var(--chat-head-text-color);
color: var(--chat-head-color);
}
}
}
......@@ -102,15 +102,15 @@
}
&.button-on:before {
border-radius: 5%;
background-color: $chat-head-text-color;
color: $chat-head-color;
background-color: var(--chat-head-text-color);
color: var(--chat-head-color);
}
}
}
.chatbox {
text-align: left;
margin: 0 $chat-gutter;
margin: 0 var(--chat-gutter);
img {
&.emoji {
......@@ -123,44 +123,44 @@
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
width: $mobile-chat-width;
width: var(--mobile-chat-width);
}
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
width: $mobile-chat-width;
width: var(--mobile-chat-width);
}
.box-flyout {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: $chat-head-color;
background-color: var(--chat-head-color);
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
z-index: 1;
overflow-y: hidden;
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: var(--mobile-chat-height);
width: var(--mobile-chat-width);
height: 100vh;
}
@media screen and (max-width: $mobile-portrait-length) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: var(--mobile-chat-height);
width: var(--mobile-chat-width);
height: 100vh;
}
}
.chat-title {
font-family: $heading-font;
font-family: var(--heading-font);
color: white;
display: block;
line-height: $line-height-large;
line-height: var(--line-height-large);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
a {
color: $chat-head-text-color;
color: var(--chat-head-text-color);
width: 100%;
}
}
......@@ -169,9 +169,9 @@
flex-direction: column;
justify-content: space-between;
height: 100%;
background-color: $chat-head-color;
border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
background-color: var(--chat-head-color);
border-bottom-left-radius: var(--chatbox-border-radius);
border-bottom-right-radius: var(--chatbox-border-radius);
@media screen and (max-height: $mobile-landscape-height) {
border-bottom-left-radius: 0;
......@@ -183,8 +183,8 @@
}
border-top: 0;
p {
color: $text-color;
font-size: $message-font-size;
color: var(--text-color);
font-size: var(--message-font-size);
margin: 0;
padding: 5px;
}
......@@ -193,8 +193,8 @@
position: relative;
width: 100%;
cursor: pointer;
background-color: $chat-head-color;
color: $light-background-color;
background-color: var(--chat-head-color);
color: var(--light-background-color);
padding: 0.5em;
font-size: 0.9em;
text-align: center;
......@@ -204,8 +204,8 @@
}
.chat-content {
height: 100%;
font-size: $message-font-size;
color: $text-color;
font-size: var(--message-font-size);
color: var(--text-color);
overflow-y: auto;
border: 0;
background-color: #ffffff;
......@@ -220,11 +220,11 @@
}
}
.chat-content-sendbutton {
height: calc(100% - #{$chat-textarea-height + $send-button-height + 2*$send-button-margin});
height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
}
.dropdown { /* status dropdown styles */
background-color: $light-background-color;
background-color: var(--light-background-color);
dd {
margin: 0;
padding: 0;
......@@ -235,7 +235,7 @@
.sendXMPPMessage {
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
@include border-bottom-radius($chatbox-border-radius);
border-bottom-radius: var(--chatbox-border-radius);
background-clip: padding-box;
background-color: white;
border: 0;
......@@ -259,33 +259,33 @@
}
.chat-textarea {
color: $chat-textarea-color;
color: var(--chat-textarea-color);
border-top-left-radius: 0;
border-top-right-radius: 0;
@include border-bottom-radius($chatbox-border-radius);
border-bottom-radius: var(--chatbox-border-radius);
padding: 0.5em;
width: 100%;
border: none;
min-height: $chat-textarea-height;
min-height: var(--chat-textarea-height);
margin-bottom: -4px; // Not clear why this is necessar :(
resize: none;
&.spoiler {
height: 42px;
}
&.correcting {
background-color: lighten($chat-head-color, 50%);
background-color: var(--chat-head-color-lighten-50-percent);
}
}
.send-button {
position: absolute;
left: $send-button-margin;
@include calc(width, '100% - #{2*$send-button-margin}');
background-color: $chat-head-color;
color: $inverse-link-color;
left: var(--send-button-margin);
width: calc(100% - 2 * var(--send-button-margin));
background-color: var(--chat-head-color);
color: var(--inverse-link-color);
font-size: 80%;
height: $send-button-height;
bottom: -$send-button-height - $send-button-margin;
height: var(--send-button-height);
bottom: calc(-var(--send-button-height) - var(--send-button-margin));
}
.chat-toolbar {
......@@ -293,21 +293,21 @@
margin: 0;
padding: 0.25em;
display: block;
border-top: 4px solid $chat-head-color;
border-top: 4px solid var(--chat-head-color);
background-color: white;
color: $chat-head-color;
color: var(--chat-head-color);
.fa, .fa:hover,
.far, .far:hover,
.fas, .fas:hover {
color: $chat-head-color;
font-size: $font-size-large;
color: var(--chat-head-color);
font-size: var(--font-size-large);
}
.unencrypted a,
.unencrypted {
color: $text-color;
color: var(--text-color);
.toolbar-menu {
a {
color: $link-color;
color: var(--link-color);
}
}
}
......@@ -353,7 +353,7 @@
}
a {
color: $link-color;
color: var(--link-color);
}
.emoji-picker-container {
background: white;
......@@ -372,13 +372,13 @@
&.insert-emoji {
padding: 0.2em;
&.picked {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
&:hover {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
a {
font-size: $font-size-huge;
font-size: var(--font-size-huge);
&:hover {
color: #8f2831;
}
......@@ -406,9 +406,9 @@
.emoji-skintone-picker {
li {
padding: 0.25em;
font-size: $font-size-huge;
font-size: var(--font-size-huge);
&:hover {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
}
}
......@@ -419,7 +419,7 @@
z-index: 99;
li {
&:hover {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
display: block;
padding: 7px;
......@@ -465,15 +465,15 @@
#conversejs.converse-embedded {
.chat-textarea {
max-height: $fullpage-max-chat-textarea-height;
max-height: var(--fullpage-max-chat-textarea-height);
}
}
#conversejs.converse-embedded,
#conversejs.converse-overlayed {
.chat-head {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
@media screen and (max-height: $mobile-landscape-height) {
border-top-left-radius: 0;
border-top-right-radius: 0;
......@@ -491,19 +491,19 @@
}
.emoji-picker {
height: $embedded-emoji-picker-height;
height: var(--embedded-emoji-picker-height);
}
.chatbox {
min-width: $overlayed-chat-width !important;
width: $overlayed-chat-width;
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
.box-flyout {
min-width: $overlayed-chat-width !important;
width: $overlayed-chat-width;
min-width: var(--overlayed-chat-width) !important;
width: var(--overlayed-chat-width);
.chat-body {
height: calc(100% - #{$overlayed-chat-head-height});
height: calc(100% - var(--overlayed-chat-head-height));
}
}
}
......@@ -511,20 +511,20 @@
#conversejs.converse-overlayed {
.flyout {
bottom: $overlayed-chatbox-hover-height;
bottom: var(--overlayed-chatbox-hover-height);
}
.box-flyout {
height: $overlayed-chat-height;
min-height: $overlayed-chat-height/2;
height: var(--overlayed-chat-height);
min-height: calc(var(--overlayed-chat-height) / 2);
}
.chat-head {
height: $overlayed-chat-head-height;
height: var(--overlayed-chat-head-height);
}
.chat-textarea {
max-height: $overlayed-max-chat-textarea-height;
max-height: var(--overlayed-max-chat-textarea-height);
}
.emoji-picker {
height: $overlayed-emoji-picker-height;
height: var(--overlayed-emoji-picker-height);
}
.chatbox {
.sendXMPPMessage {
......@@ -574,22 +574,22 @@
#conversejs.converse-fullscreen {
.flyout {
border-radius: 0;
border-top: 0.8em solid $chat-head-color;
border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid var(--chat-head-color);
border: var(--flyout-padding) solid var(--chat-head-color);
bottom: 0;
}
.chatbox-btn {
font-size: $fullpage-chatbox-button-size;
font-size: var(--fullpage-chatbox-button-size);
margin: 0 0.3em;
}
.chat-head {
height: $fullpage-chat-head-height;
font-size: $font-size-huge;
height: var(--fullpage-chat-head-height);
font-size: var(--font-size-huge);
padding: 0;
.user-custom-message {
font-size: 70%;
height: auto;
line-height: $line-height;
line-height: var(--line-height);
}
.chatbox-title {
@include make-col(10);
......@@ -599,10 +599,10 @@
}
}
.chat-textarea {
max-height: $fullpage-max-chat-textarea-height;
max-height: var(--fullpage-max-chat-textarea-height);
}
.emoji-picker {
height: $fullpage-emoji-picker-height;
height: var(--fullpage-emoji-picker-height);
}
.chatbox {
......@@ -622,26 +622,26 @@
}
.box-flyout {
background-color: $chat-head-color;
background-color: var(--chat-head-color);
box-shadow: none;
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
width: $fullpage-chat-width;
height: var(--fullpage-chat-height);
min-height: calc(var(--fullpage-chat-height) / 2);
width: var(--fullpage-chat-width);
overflow: hidden;
}
.chat-body {
height: calc(100% - #{$fullpage-chat-head-height});
background-color: $chat-head-color;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
height: calc(100% - var(--fullpage-chat-head-height));
background-color: var(--chat-head-color);
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
}
.chat-content {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
}
.chat-title {
font-size: $font-size-huge;
line-height: $line-height-huge;
font-size: var(--font-size-huge);
line-height: var(--line-height-huge);
}
.sendXMPPMessage {
ul {
......
sass/_chatrooms.scss
View file @ 28dc6e2c
......@@ -25,7 +25,7 @@
cursor: help;
.fa {
margin-right: 0.5em;
color: $text-color;
color: var(--text-color);
}
}
}
......@@ -33,11 +33,11 @@
.chat-head-chatroom {
background-color: $chatroom-head-color;
background-color: var(--chatroom-head-color);
.chatroom-description {
color: lighten($chatroom-head-color, 25%);
font-size: $font-size;
color: var(--chatroom-head-color-lighten-25-percent);
font-size: var(--font-size);
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
......@@ -52,9 +52,9 @@
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa {
color: $chat-head-text-color;
color: var(--chat-head-text-color);
&.button-on:before {
color: $chatroom-head-color;
color: var(--chatroom-head-color);
}
}
}
......@@ -62,44 +62,44 @@
.chatbox-btn {
&.button-on:before {
color: $chatroom-head-color;
color: var(--chatroom-head-color);
}
}
.chat-title {
.chatroom-jid {
font-size: $font-size-small;
font-size: var(--font-size-small);
}
}
}
.chatroom {
width: $chatroom-width;
width: var(--chatroom-width);
@media screen and (max-height: $mobile-landscape-height){
width: $mobile-chat-width;
width: var(--mobile-chat-width);
}
@media screen and (max-width: $mobile-portrait-length) {
width: $mobile-chat-width;
width: var(--mobile-chat-width);
}
.box-flyout {
overflow-y: hidden;
background-color: $chatroom-head-color;
background-color: var(--chatroom-head-color);
width: 100%;
@media screen and (max-height: $mobile-landscape-height) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: var(--mobile-chat-height);
width: var(--mobile-chat-width);
height: 100vh;
}
@media screen and (max-width: $mobile-portrait-length) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: var(--mobile-chat-height);
width: var(--mobile-chat-width);
height: 100vh;
}
.chatroom-body {
flex-direction: row;
flex-flow: nowrap;
@include border-bottom-radius($chatbox-border-radius);
border-bottom-radius: var(--chatbox-border-radius);
background-color: white;
border-top: 0;
width: 100%;
......@@ -110,13 +110,13 @@
}
.chat-topic {
font-weight: bold;
color: $chatroom-head-color;
color: var(--chatroom-head-color);
}
.chat-info {
color: $chatroom-head-color;
color: var(--chatroom-head-color);
line-height: normal;
&.badge {
color: $chat-head-text-color;
color: var(--chat-head-text-color);
}
}
.disconnect-container {
......@@ -131,7 +131,7 @@
flex-direction: column;
word-wrap: break-word;
.new-msgs-indicator {
background-color: $chatroom-head-color;
background-color: var(--chatroom-head-color);
}
.chat-content {
height: 100%;
......@@ -145,8 +145,8 @@
overflow-y: hidden;
vertical-align: top;
background-color: white;
border-left: 1px solid $text-color;
border-bottom-right-radius: $chatbox-border-radius;
border-left: 1px solid var(--text-color);
border-bottom-right-radius: var(--chatbox-border-radius);
padding: 0.5em;
.occupants-header {
......@@ -158,7 +158,7 @@
}
}
.occupants-heading {
font-family: $heading-font;
font-family: var(--heading-font);
}
.awesomplete {
ul {
......@@ -184,7 +184,7 @@
li {
cursor: default;
display: block;
font-size: $font-size-small;
font-size: var(--font-size-small);
overflow: hidden;
padding: 0.25em 0.25em 0.25em 0;
text-overflow: ellipsis;
......@@ -192,7 +192,7 @@
margin-right: 0.5em;
}
&.feature {
font-size: $font-size-tiny;
font-size: var(--font-size-tiny);
}
&.occupant {
cursor: pointer;
......@@ -251,25 +251,25 @@
}
.chatroom-form-container {
background-color: white;
border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: var(--chatbox-border-radius);
border-bottom-right-radius: var(--chatbox-border-radius);
border: 0;
color: $text-color;
font-size: $font-size;
color: var(--text-color);
font-size: var(--font-size);
height: 100%;
width: 100%;
overflow-y: auto;
.validation-message {
font-size: 90%;
color: $error-color;
color: var(--error-color);
}
input[type=button],
input[type=submit] {
margin: 0 0.5em;
}
.button-primary {
background-color: $chatroom-head-color;
background-color: var(--chatroom-head-color);
}
}
}
......@@ -278,22 +278,22 @@
.sendXMPPMessage {
.chat-toolbar {
background-color: white;
border-top: 4px solid $chatroom-head-color;
color: $chatroom-head-color;
border-top: 4px solid var(--chatroom-head-color);
color: var(--chatroom-head-color);
.fas, .fas:hover,
.far, .far:hover,
.fa, .fa:hover {
color: $chatroom-head-color;
color: var(--chatroom-head-color);
}
}
.chat-textarea {
border-bottom-right-radius: 0;
&.correcting {
background-color: lighten($chatroom-head-color, 30%);
background-color: var(--chatroom-head-color-lighten-30-percent);
}
}
.send-button {
background-color: $chatroom-head-color;
background-color: var(--chatroom-head-color);
}
}
......@@ -313,16 +313,15 @@
#conversejs.converse-overlayed {
.chatbox {
&.chatroom {
.chatroom-features {
display: none !important;
}
min-width: $chatroom-width !important;
width: $chatroom-width;
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
min-width: var(--chatroom-width) !important;
width: var(--chatroom-width);
}
.chatbox-title {
@include make-col(7);
......@@ -340,7 +339,7 @@
}
.chatroom-features {
.feature {
font-size: $font-size-tiny;
font-size: var(--font-size-tiny);
}
}
ul {
......@@ -357,7 +356,7 @@
}
}
.chat-area {
min-width: $overlayed-chat-width;
min-width: var(--overlayed-chat-width);
}
}
.sendXMPPMessage {
......@@ -411,9 +410,9 @@
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
background-color: var(--chatroom-head-color);
border: var(--flyout-padding) solid var(--chatroom-head-color);
border-top: 0.8em solid var(--chatroom-head-color);
width: 100%;
.chatbox-title {
......@@ -423,14 +422,14 @@
}
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
border-top-radius: var(--chatbox-border-radius);
.chatroom-form-container {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
border-top-left-radius: var(--chatbox-border-radius);
.chat-content {
border-top-left-radius: $chatbox-border-radius;
border-top-left-radius: var(--chatbox-border-radius);
}
&.full {
.new-msgs-indicator {
......@@ -439,15 +438,15 @@
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $occupants-padding;
border-top-right-radius: var(--chatbox-border-radius);
padding: var(--occupants-padding);
.occupants-heading {
font-size: $font-size-large;
font-size: var(--font-size-large);
}
ul {
&.occupant-list {
li {
font-size: $font-size-small;
font-size: var(--font-size-small);
}
}
}
......
sass/_controlbox.scss
View file @ 28dc6e2c
......@@ -6,14 +6,14 @@
.oauth-login {
margin-left: 0;
color: $link-color;
font-size: $font-size-large;
color: var(--link-color);
font-size: var(--font-size-large);
&:hover {
color: darken($link-color, 20%);
color: var(--link-color-darken-20-percent);
}
i {
color: $link-color;
font-size: $font-size-huge;
color: var(--link-color);
font-size: var(--font-size-huge);
margin-right: 0.5em;
}
}
......@@ -24,22 +24,22 @@
.xmpp-status,
.roster-contacts {
.chat-status--online {
color: $green;
color: var(--chat-status-online);
}
.chat-status--busy {
color: $red
color: var(--chat-status-busy);
}
.chat-status--away {
color: $orange,
color: var(--chat-status-away);
}
.far.fa-circle,
.fa-times-circle {
color: $subdued-color;
color: var(--subdued-color);
}
}
.room-info {
font-size: $font-size-small;
font-size: var(--font-size-small);
font-style: normal;
font-weight: normal;
......@@ -48,7 +48,7 @@
margin-left: 5px;
}
p.room-info {
line-height: $line-height;
line-height: var(--line-height);
margin: 0;
display: block;
white-space: normal;
......@@ -65,7 +65,7 @@
background-color: white;
}
margin-right: 3*$chat-gutter;
margin-right: calc(3 * var(--chat-gutter));
&.logged-out {
.box-flyout {
......@@ -105,11 +105,11 @@
margin: 1.5em 0;
}
.form-errors {
color: $error-color;
color: var(--error-color);
margin: 1em 0;
}
.provider-title {
font-size: $font-size-huge;
font-size: var(--font-size-huge);
margin: 0;
}
.provider-score {
......@@ -118,7 +118,7 @@
}
.form-help .url {
font-weight: bold;
color: $link-color;
color: var(--link-color);
}
.input-group {
display: table;
......@@ -138,15 +138,15 @@
color: gray;
font-size: 85%;
&:hover {
color: $text-color;
color: var(--text-color);
}
}
}
.conn-feedback {
color: $controlbox-head-color;
color: var(--controlbox-head-color);
&.error {
color: $error-color;
color: var(--error-color);
}
p {
padding-bottom: 1em;
......@@ -174,7 +174,7 @@
flex-direction: column;
.brand-heading {
color: $global-background-color;
color: var(--global-background-color);
}
}
......@@ -215,7 +215,7 @@
margin: 1em 0 0 0;
.controlbox-heading {
font-family: $heading-font;
font-family: var(--heading-font);
margin: 0 0 0.5em 0;
text-transform: uppercase;
}
......@@ -239,9 +239,9 @@
top: 0;
width: 100%;
z-index: 21;
background-color: $light-background-color;
background-color: var(--light-background-color);
li:hover {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
}
}
......@@ -257,7 +257,7 @@
}
}
li:hover {
background-color: $light-background-color;
background-color: var(--light-background-color);
}
}
dt a span {
......@@ -276,7 +276,7 @@
.controlbox-pane {
background-color: white;
border: 0;
font-size: $font-size;
font-size: var(--font-size);
left: 0;
text-align: left;
overflow-x: hidden;
......@@ -325,16 +325,16 @@
.toggle-controlbox {
text-align: center;
background-color: $link-color;
border-top-left-radius: $button-border-radius;
border-top-right-radius: $button-border-radius;
background-color: var(--link-color);
border-top-left-radius: var(--button-border-radius);
border-top-right-radius: var(--button-border-radius);
color: #0a0a0a;
float: right;
height: 100%;
margin: 0 $chat-gutter;
margin: 0 var(--chat-gutter);
padding: 1em;
span {
color: $inverse-link-color;
color: var(--inverse-link-color);
}
}
}
......@@ -343,11 +343,11 @@
#conversejs.converse-overlayed {
#controlbox {
order: -1;
min-width: $controlbox-width !important;
width: $controlbox-width;
min-width: var(--controlbox-width) !important;
width: var(--controlbox-width);
.box-flyout {
min-width: $controlbox-width !important;
width: $controlbox-width;
min-width: var(--controlbox-width) !important;
width: var(--controlbox-width);
}
.login-trusted {
......@@ -375,11 +375,11 @@
justify-content: space-between;
.brand-heading {
color: $text-color;
color: var(--text-color);
font-size: 2em;
}
.chatbox-btn {
color: $controlbox-head-color;
color: var(--controlbox-head-color);
margin: 0;
}
}
......@@ -396,7 +396,7 @@
}
.controlbox-panes {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
}
}
}
......@@ -438,7 +438,7 @@
}
.toggle-register-login {
line-height: $line-height-huge;
line-height: var(--line-height-huge);
}
.brand-heading-container {
......@@ -450,7 +450,7 @@
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
color: $blue;
color: var(--brand-heading-color);
}
.brand-subtitle {
font-size: 90%;
......@@ -475,7 +475,7 @@
border: 0;
width: 100%;
z-index: 1;
background-color: $controlbox-head-color;
background-color: var(--controlbox-head-color);
.controlbox-head {
display: none;
......
sass/_core.scss
View file @ 28dc6e2c
......@@ -81,7 +81,7 @@ body.reset {
}
.converse-brand__text {
font-family: $heading-font;
font-family: var(--heading-font);
font-weight: normal;
width: 50%;
margin: auto;
......@@ -92,14 +92,14 @@ body.reset {
}
}
.converse-brand__byline {
font-size: $font-size-small;
font-size: var(--font-size-small);
width: 50%;
margin: auto;
text-align: center;
a {
text-decoration: none;
color: lighten($chatroom-head-color, 25%);
color: var(--chatroom-head-color-lighten-25-percent);
}
}
......@@ -109,9 +109,9 @@ body.reset {
position: fixed;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
color: $text-color;
color: var(--text-color);
font-family: "Helvetica", "Arial", sans-serif;
font-size: $font-size;
font-size: var(--font-size);
direction: ltr;
z-index: 1031; // One more than bootstrap navbar
......@@ -137,7 +137,7 @@ body.reset {
}
.brand-heading {
font-family: $heading-font;
font-family: var(--heading-font);
.icon-conversejs {
font-size: 80%;
}
......@@ -155,26 +155,26 @@ body.reset {
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
color: var(--subdued-color);
}
::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color;
color: var(--subdued-color);
}
:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
color: var(--subdued-color);
}
:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
color: var(--subdued-color);
}
::placeholder {
color: $subdued-color;
color: var(--subdued-color);
}
::selection {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
::-moz-selection {
background-color: $highlight-color;
background-color: var(--highlight-color);
}
@media screen and (max-width: $mobile-portrait-length) {
......@@ -208,7 +208,7 @@ body.reset {
input[type=submit], input[type=button],
input[type=text], input[type=password],
button {
font-size: $font-size;
font-size: var(--font-size);
padding: 0.25em;
min-height: 0;
}
......@@ -236,32 +236,32 @@ body.reset {
a, a:visited, a:not([href]):not([tabindex]) {
text-decoration: none;
color: $link-color;
color: var(--link-color);
text-shadow: none;
&:hover {
color: darken($link-color, 20%);
color: var(--link-color-darken-20-percent);
text-decoration: none;
text-shadow: none;
}
&.fa, &.far, &.fas {
color: $subdued-color;
color: var(--subdued-color);
&:hover {
color: $gray-color;
color: var(--gray-color);
}
}
}
canvas {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
}
.fa, .far, .fas {
color: $subdued-color;
color: var(--subdued-color);
}
.fa:hover, .far:hover, .fas:hover {
color: $gray-color;
color: var(--gray-color);
}
.modal {
......@@ -275,7 +275,7 @@ body.reset {
}
.selected {
color: $link-color !important;
color: var(--link-color) !important;
}
.circle {
......@@ -287,7 +287,7 @@ body.reset {
width: 50px;
height: 100vh;
padding: 1rem 0;
background-color: $controlbox-head-color;
background-color: var(--controlbox-head-color);
color: white;
text-align: center;
......@@ -311,7 +311,7 @@ body.reset {
}
.btn {
font-family: $heading-font;
font-family: var(--heading-font);
font-weight: normal;
color: #fff;
.fa, .far, .fas {
......@@ -444,10 +444,10 @@ body.reset {
}
.error {
color: $error-color;
color: var(--error-color);
}
.info {
color: $info-color;
color: var(--info-color);
}
.reg-feedback {
font-size: 85%;
......@@ -473,15 +473,15 @@ body.reset {
.button-primary {
color: white;
background-color: $primary-color;
background-color: var(--primary-color);
}
.button-secondary {
color: white;
background-color: $secondary-color;
background-color: var(--secondary-color);
}
.button-cancel {
color: white;
background-color: $text-color;
background-color: var(--text-color);
}
.chat-textarea-chatbox-selected {
......@@ -489,7 +489,7 @@ body.reset {
margin: 0;
}
.chat-textarea-chatroom-selected {
border: 2px solid $link-color;
border: 2px solid var(--link-color);
margin: 0;
}
}
......@@ -503,11 +503,11 @@ body.reset {
#conversejs:not(.converse-embedded) {
.chatbox {
.chat-body {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
}
}
.flyout {
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
}
}
}
......
sass/_forms.scss
View file @ 28dc6e2c
......@@ -11,19 +11,19 @@
.form-control {
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $subdued-color;
color: var(--subdued-color);
}
&::-moz-placeholder { /* Firefox 19+ */
color: $subdued-color;
color: var(--subdued-color);
}
&:-ms-input-placeholder { /* IE 10+ */
color: $subdued-color;
color: var(--subdued-color);
}
&:-moz-placeholder { /* Firefox 18- */
color: $subdued-color;
color: var(--subdued-color);
}
&::placeholder {
color: $subdued-color;
color: var(--subdued-color);
}
}
......@@ -49,7 +49,7 @@
white-space: normal;
}
.save-submit {
color: $save-button-color;
color: var(--save-button-color);
}
.form-url {
display: block;
......@@ -64,7 +64,7 @@
background: white;
padding: 1.5em;
legend {
color: $text-color;
color: var(--text-color);
font-size: 125%;
margin-bottom: 1.5em;
}
......@@ -89,18 +89,18 @@
border: none;
}
input.error {
border: 1px solid $error-color;
color: $text-color;
border: 1px solid var(--error-color);
color: var(--text-color);
}
.text-muted {
color: $subdued-color !important;
color: var(--subdued-color) !important;
font-size: 85%;
padding-top: 0.5em;
a {
color: lighten($link-color, 10%);
color: var(--link-color-lighten-10-percent);
}
&.error {
color: $error-color;
color: var(--error-color);
}
}
}
......
sass/_headline.scss
View file @ 28dc6e2c
......@@ -2,14 +2,14 @@
.chatbox.headlines {
.chat-head {
&.chat-head-chatbox {
background-color: $headline-head-color;
background-color: var(--headline-head-color);
}
}
.chat-body {
background-color: $headline-head-color;
border-radius: $chatbox-border-radius;
background-color: var(--headline-head-color);
border-radius: var(--chatbox-border-radius);
.chat-message {
color: $dark-orange;
color: var(--headline-message-color);
}
}
.chat-content {
......@@ -21,16 +21,16 @@
#conversejs.converse-fullscreen {
.chatbox.headlines {
.box-flyout {
background-color: $headline-head-color;
background-color: var(--headline-head-color);
}
.chat-head {
&.chat-head-chatbox {
background-color: $headline-head-color;
background-color: var(--headline-head-color);
}
}
.flyout {
border: $flyout-padding solid $headline-head-color;
border-top: 0.8em solid $headline-head-color;
border: var(--flyout-padding) solid var(--headline-head-color);
border-top: 0.8em solid var(--headline-head-color);
}
}
}
......
sass/_lists.scss
View file @ 28dc6e2c
......@@ -4,12 +4,12 @@
padding: 0.3em 0;
.list-toggle {
font-family: $heading-font;
font-family: var(--heading-font);
display: block;
color: $text-color;
color: var(--text-color);
padding: 0 0 0.5rem 0;
&:hover {
color: $dark-gray-color;
color: var(--list-toggle-color);
}
}
}
......@@ -20,20 +20,20 @@
.list-item {
border: none;
clear: both;
color: $text-color;
color: var(--text-color);
display: block;
height: 2em;
overflow: hidden;
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;
.list-item-link {
&:hover {
color: $dark-link-color;
color: var(--dark-link-color);
}
font-size: $font-size;
line-height: $font-size;
font-size: var(--font-size);
line-height: var(--font-size);
padding-right: 0.5em;
overflow: hidden;
white-space: nowrap;
......@@ -42,30 +42,30 @@
.list-item-action {
opacity: 0;
font-size: $font-size-tiny;
font-size: var(--font-size-tiny);
padding: 0;
margin: 0 0 0 0.4em;
width: 1.6em;
&:before {
font-size: $font-size;
font-size: var(--font-size);
}
&.button-on {
color: $link-color;
color: var(--link-color);
&:hover {
color: $dark-link-color;
color: var(--dark-link-color);
}
}
color: $subdued-color;
color: var(--subdued-color);
&:hover {
color: $gray-color;
color: var(--list-toggle-hover-color);
opacity: 1;
}
}
&.open {
background-color: $controlbox-head-color;
background-color: var(--controlbox-head-color);
&:hover {
background-color: $controlbox-head-color !important;
background-color: var(--controlbox-head-color) !important;
}
a {
color: white;
......@@ -76,28 +76,28 @@
}
}
.list-item-action {
color: lighten($lightest-blue, 25%);
color: var(--list-item-action-color);
&:hover {
color: white;
}
}
.fa-circle {
color: lighten($green, 25%);
color: var(--list-circle-color);
}
.fa-minus-circle {
color: lighten($red, 15%);
color: var(--list-minus-circle-color);
}
.fa-dot-circle {
color: lighten($orange, 25%);
color: var(--list-dot-circle-color);
}
.far .fa-circle,
.fa-times-circle {
color: lighten($subdued-color, 25%);
color: var(--subdued-color-lighten-25-percent);
}
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
background-color: var(--controlbox-head-color-lighten-45-percent);
.fa, .far, .fas {
opacity: 1;
}
......
sass/_messages.scss
View file @ 28dc6e2c
......@@ -14,7 +14,7 @@
z-index: 0;
.separator {
border: 0.5px solid $chat-head-color;
border: 0.5px solid var(--chat-head-color);
margin: 0 1em;
position: relative;
top: 1em;
......@@ -24,7 +24,7 @@
.separator-text {
background: white;
bottom: 1px; // Offset needed due to .separator border size
color: $message-text-color;
color: var(--message-text-color);
display: inline-block;
line-height: 2em;
padding: 0 1em;
......@@ -34,14 +34,14 @@
}
&.chat-info {
color: $chat-head-color;
font-size: $message-font-size;
line-height: $line-height-small;
color: var(--chat-head-color);
font-size: var(--message-font-size);
line-height: var(--line-height-small);
font-size: 90%;
padding: 0.17rem 1rem;
&.badge {
color: $chat-head-text-color;
color: var(--chat-head-text-color);
}
&.chat-state-notification {
font-style: italic;
......@@ -51,7 +51,7 @@
font-style: italic;
}
&.chat-error {
color: $warning-color;
color: var(--warning-color);
font-weight: bold;
}
}
......@@ -86,10 +86,10 @@
}
&.correcting {
&.groupchat {
background-color: lighten($chatroom-head-color, 30%);
background-color: var(--chatroom-head-color-lighten-30-percent);
}
&:not(.groupchat) {
background-color: lighten($chat-head-color, 50%);
background-color: var(--chat-head-color-lighten-50-percent);
}
}
......@@ -148,7 +148,7 @@
.chat-msg__text {
padding: 0;
color: $message-text-color;
color: var(--message-text-color);
width: 100%;
white-space: pre-wrap;
a {
......@@ -182,8 +182,8 @@
.chat-msg__actions {
.chat-msg__action {
height: $message-font-size;
font-size: $message-font-size;
height: var(--message-font-size);
font-size: var(--message-font-size);
padding: 0;
border: none;
opacity: 0;
......@@ -213,16 +213,16 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: $heading-font;
font-family: var(--heading-font);
font-size: 115%;
.badge {
font-size: 80%;
font-family: $normal_font;
font-family: var(--normal_font);
}
}
.chat-msg__time {
padding-left: 0.25em;
color: lighten($text-color, 15%);
color: var(--text-color-lighten-15-percent);
}
}
&.chat-msg--action {
......@@ -240,7 +240,7 @@
width: auto;
}
.chat-msg__author {
font-size: $message-font-size;
font-size: var(--message-font-size);
}
.chat-msg__time {
margin-left: 0;
......@@ -265,7 +265,7 @@
-webkit-animation: colorchange-chatmessage-muc 1s;
}
.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 @@
#minimized-chats {
order: 100;
width: $minimized-chats-width;
width: var(--minimized-chats-width);
margin-bottom: 0;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $inverse-link-color;
margin-right: $chat-gutter;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
color: var(--inverse-link-color);
margin-right: var(--chat-gutter);
padding: 0;
.badge {
bottom: 8px;
border: 1px solid $gray-color;
border: 1px solid var(--overlayed-badge-color);
}
#toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
background-color: $link-color;
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
background-color: var(--link-color);
padding: 1em 0 0 0;
text-align: center;
color: white;
......@@ -31,7 +31,7 @@
a.restore-chat {
padding: 1px 0 1px 5px;
color: $chat-head-text-color;
color: var(--chat-head-text-color);
line-height: 15px;
display: block;
overflow: hidden;
......@@ -43,17 +43,17 @@
}
a.restore-chat:visited {
color: $chat-head-text-color;
color: var(--chat-head-text-color);
}
.minimized-chats-flyout {
flex-direction: column-reverse;
bottom: 42px;
width: $minimized-chats-width;
width: var(--minimized-chats-width);
.chat-head {
padding: 0.3em;
border-radius: $chatbox-border-radius;
border-radius: var(--chatbox-border-radius);
height: 35px;
margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
......@@ -68,8 +68,8 @@
font-weight: bold;
background-color: white;
border: 1px solid;
text-shadow: 1px 1px 0 $text-shadow-color;
color: $warning-color;
text-shadow: 1px 1px 0 var(--text-shadow-color);
color: var(--warning-color);
border-radius: 5px;
padding: 2px 4px;
font-size: 16px;
......
sass/_roster.scss
View file @ 28dc6e2c
......@@ -3,7 +3,7 @@
width: 100%;
position: relative;
margin: 0;
height: $roster-height;
height: var(--roster-height);
padding: 0;
overflow: hidden;
// XXX: FIXME
......@@ -37,10 +37,10 @@
.roster-filter {
width: 100%;
margin: 0.2em;
font-size: calc(#{$font-size} - 2px);
font-size: calc(var(--font-size) - 2px);
}
.state-type {
font-size: calc(#{$font-size} - 2px);
font-size: calc(var(--font-size) - 2px);
width: 100%;
}
}
......@@ -54,17 +54,17 @@
.roster-group {
border: none;
color: $text-color;
color: var(--text-color);
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;
.group-toggle {
&:hover {
color: $dark-gray-color;
color: var(--roster-group-toggle-hover-color);
}
font-family: $heading-font;
color: $text-color;
font-family: var(--heading-font);
color: var(--text-color);
display: block;
width: 100%;
padding-top: 0;
......@@ -74,7 +74,7 @@
li {
&.requesting-xmpp-contact {
a {
line-height: $line-height;
line-height: var(--line-height);
&.far, &.fas, &.fa {
width: 1.5em;
}
......@@ -96,11 +96,11 @@
.msgs-indicator {
color: white;
background-color: $chat-head-color;
background-color: var(--chat-head-color);
opacity: 1;
border-radius: 10%;
padding: 0.2em;
font-size: $font-size-small;
font-size: var(--font-size-small);
}
.contact-name {
......@@ -123,7 +123,7 @@
}
}
&.current-xmpp-contact span {
font-size: $font-size;
font-size: var(--font-size);
float: left;
margin-right: 0.5em;
}
......@@ -141,7 +141,7 @@
margin-left: 5px;
}
&:hover {
background-color: lighten($controlbox-head-color, 45%);
background-color: var(--controlbox-head-color-lighten-45-percent);
.remove-xmpp-contact {
display: inline-block;
}
......@@ -151,7 +151,7 @@
}
span {
&.pending-contact-name {
line-height: $line-height;
line-height: var(--line-height);
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_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;
$controlbox-head-color: $light-blue !default;
--chat-status-online: #3AA569; // $green
--chat-status-busy: #E77051; // $red
--chat-status-away: #E7A151; // $orange
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
--brand-heading-color: #387592; // $blue
$mobile-chat-width: 100% !default;
$mobile-chat-height: 400px !default;
$small-mobile-chat-height: 300px !default;
--completion-light-color: #FFB9A7; // $lightest-red
--completion-normal-color: #E77051; // $red
--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;
$heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default;
--normal-font: "Helvetica", "Arial", sans-serif;
--heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif;
$chatroom-color-dark: $darkest-red !default;
$chatroom-color-light: $light-red !default;
$chatroom-head-color: $red !default;
$chatroom-message-them-color: $green !default;
$chatroom-width: 400px !default;
--chatroom-head-color: #E77051; // $red
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
--chatroom-head-color-lighten-30-percent: #fadfd7; // lighten($red, 30%)
--chatroom-width: 400px;
$headline-head-color: $orange !default;
--headline-head-color: #E7A151; // $orange
--headline-message-color: #D2842B; // $dark-orange
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;
$box-close-button-padding-left: 4px !default;
$box-close-button-padding-right: 4px !default;
--chatbox-button-size: 14px;
--fullpage-chatbox-button-size: 16px;
$chatbox-button-size: 14px !default;
$fullpage-chatbox-button-size: 16px !default;
--font-size-tiny: 10px;
--font-size-small: 12px;
--font-size: 14px;
--font-size-large: 16px;
--font-size-huge: 20px;
$font-size-tiny: 10px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
--message-font-size: var(--font-size);
$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;
$line-height: 16px !default;
$line-height-large: 20px !default;
$line-height-huge: 27px !default;
--occupants-padding: 1em;
$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;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;
$fullpage-emoji-picker-height: 200px !default;
$fullpage-max-chat-textarea-height: 15em!default;
--overlayed-chat-head-height: 55px;
--overlayed-chat-height: 450px;
--overlayed-chat-width: 250px;
--overlayed-chatbox-hover-height: 1em;
--overlayed-emoji-picker-height: 100px;
--overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479; // $gray-color
$overlayed-chat-head-height: 55px !default;
$overlayed-chat-height: 450px !default;
$overlayed-chat-width: 250px !default;
$overlayed-chatbox-hover-height: 1em !default;
$overlayed-emoji-picker-height: 100px !default;
$overlayed-max-chat-textarea-height: 200px !default;
--list-toggle-color: #585B51; // $dark-gray-color
--list-toggle-hover-color: #818479; // $gray-color
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
--list-circle-color: #89d6ab; // lighten($green, 25%)
--list-minus-circle-color: #f0a794; // lighten($red, 15%)
--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