Skip to content

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

Various concord theme styling fixes

parent ed287df4
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 39 deletions
sass/_bookmarks.scss
View file @ e2e70c22
#conversejs { #conversejs {
#controlbox { #controlbox {
.bookmarks-toggle, .bookmarks-toggle .fa { .bookmarks-toggle, .bookmarks-toggle .fa {
color: var(--chatroom-head-color) !important; color: var(--chatroom-head-bg-color) !important;
&:hover { &:hover {
color: var(--chatroom-head-color-dark) !important; color: var(--chatroom-head-bg-color-dark) !important;
} }
} }
} }
......
sass/_chatrooms.scss
View file @ e2e70c22
#conversejs.converse-embedded, #conversejs.converse-embedded,
#conversejs { #conversejs {
.badge-room-color { .badge-room-color {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
} }
.add-chatroom { .add-chatroom {
...@@ -37,7 +37,8 @@ ...@@ -37,7 +37,8 @@
.chat-head-chatroom { .chat-head-chatroom {
background-color: var(--chatroom-head-color); color: var(--chatroom-head-color);
background-color: var(--chatroom-head-bg-color);
border-bottom: var(--chatroom-head-border-bottom); border-bottom: var(--chatroom-head-border-bottom);
.chat-head__desc { .chat-head__desc {
...@@ -89,7 +90,7 @@ ...@@ -89,7 +90,7 @@
.box-flyout { .box-flyout {
overflow-y: hidden; overflow-y: hidden;
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
width: 100%; width: 100%;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
...@@ -117,11 +118,11 @@ ...@@ -117,11 +118,11 @@
.chat-topic { .chat-topic {
display: var(--chat-topic-display); display: var(--chat-topic-display);
font-weight: bold; font-weight: bold;
color: var(--chatroom-head-color); color: var(--chatroom-head-bg-color);
} }
.chat-info { .chat-info {
display: var(--chat-info-display); display: var(--chat-info-display);
color: var(--chatroom-head-color); color: var(--chatroom-head-bg-color);
line-height: normal; line-height: normal;
&.badge { &.badge {
color: var(--chat-head-text-color); color: var(--chat-head-text-color);
...@@ -145,7 +146,7 @@ ...@@ -145,7 +146,7 @@
min-width: 25%; min-width: 25%;
word-wrap: break-word; word-wrap: break-word;
.new-msgs-indicator { .new-msgs-indicator {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
} }
.chat-content { .chat-content {
height: 100%; height: 100%;
...@@ -189,7 +190,7 @@ ...@@ -189,7 +190,7 @@
.occupants-heading { .occupants-heading {
font-family: var(--heading-font); font-family: var(--heading-font);
color: var(--chatroom-head-color); color: var(--groupchats-header-color-dark);
padding-left: 0; padding-left: 0;
margin-right: 1em; margin-right: 1em;
} }
...@@ -336,7 +337,7 @@ ...@@ -336,7 +337,7 @@
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
font-size: var(--font-size-small); font-size: var(--font-size-small);
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
color: white; color: white;
&.muc-bottom-panel--nickname { &.muc-bottom-panel--nickname {
...@@ -371,7 +372,7 @@ ...@@ -371,7 +372,7 @@
.chat-textarea { .chat-textarea {
&:active, &:focus{ &:active, &:focus{
outline-color: var(--chatroom-head-color); outline-color: var(--chatroom-head-bg-color);
} }
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
&.correcting { &.correcting {
...@@ -470,9 +471,9 @@ ...@@ -470,9 +471,9 @@
.chatroom { .chatroom {
.box-flyout { .box-flyout {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
border: var(--flyout-padding) solid var(--chatroom-head-color); border: var(--flyout-padding) solid var(--chatroom-head-bg-color);
border-top: 0.8em solid var(--chatroom-head-color); border-top: 0.8em solid var(--chatroom-head-bg-color);
width: 100%; width: 100%;
.chat-head__desc { .chat-head__desc {
......
sass/_controlbox.scss
View file @ e2e70c22
...@@ -69,9 +69,9 @@ ...@@ -69,9 +69,9 @@
order: -1; order: -1;
.open-rooms-toggle, .open-rooms-toggle .fa { .open-rooms-toggle, .open-rooms-toggle .fa {
color: var(--chatroom-head-color) !important; color: var(--groupchats-header-color) !important;
&:hover { &:hover {
color: var(--chatroom-head-color-dark) !important; color: var(--chatroom-head-bg-color-dark) !important;
} }
} }
...@@ -229,7 +229,7 @@ ...@@ -229,7 +229,7 @@
} }
.controlbox-heading--groupchats { .controlbox-heading--groupchats {
color: var(--chatroom-head-color); color: var(--groupchats-header-color);
} }
.controlbox-heading--contacts { .controlbox-heading--contacts {
......
sass/_emoji.scss
View file @ e2e70c22
...@@ -135,17 +135,17 @@ ...@@ -135,17 +135,17 @@
.chatroom { .chatroom {
.emoji-picker.toolbar-menu { .emoji-picker.toolbar-menu {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
background: white; background: white;
.emoji-skintone-picker { .emoji-skintone-picker {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
} }
.emoji-picker__header { .emoji-picker__header {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-bg-color);
ul { ul {
.emoji-category { .emoji-category {
&.picked { &.picked {
border: 1px var(--chatroom-head-color) solid; border: 1px var(--chatroom-head-bg-color) solid;
border-bottom: none; border-bottom: none;
} }
} }
......
sass/_lists.scss
View file @ e2e70c22
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
} }
&:hover { &:hover {
background-color: var(--controlbox-head-color-lighten-45-percent); background-color: var(--controlbox-pane-bg-hover-color);
.fa, .far, .fas { .fa, .far, .fas {
opacity: 1; opacity: 1;
} }
......
sass/_roster.scss
View file @ e2e70c22
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
margin-left: 5px; margin-left: 5px;
} }
&:hover { &:hover {
background-color: var(--controlbox-head-color-lighten-45-percent); background-color: var(controlbox-pane-bg-hover-color);
} }
} }
} }
......
sass/_variables.scss
View file @ e2e70c22
...@@ -43,7 +43,6 @@ $mobile_portrait_length: 480px !default; ...@@ -43,7 +43,6 @@ $mobile_portrait_length: 480px !default;
--send-button-height: 27px; --send-button-height: 27px;
--send-button-margin: 3px; --send-button-margin: 3px;
--controlbox-heading-top-margin: 0.75em;
--inline-action-margin: 0.75em; --inline-action-margin: 0.75em;
--roster-height: 194px; --roster-height: 194px;
...@@ -84,12 +83,17 @@ $mobile_portrait_length: 480px !default; ...@@ -84,12 +83,17 @@ $mobile_portrait_length: 480px !default;
--button-border-radius: 5px; --button-border-radius: 5px;
--chatbox-border-radius: 4px; --chatbox-border-radius: 4px;
--groupchats-header-color: var(--chatroom-head-bg-color);
--groupchats-header-color-dark: var(--chatroom-head-bg-color-dark);
--controlbox-width: 250px; --controlbox-width: 250px;
--controlbox-head-color: var(--light-blue); --controlbox-head-color: var(--light-blue);
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
--controlbox-pane-background-color: white;
--controlbox-heading-color: inherit; --controlbox-heading-color: inherit;
--controlbox-heading-font-weight: bold; --controlbox-heading-font-weight: bold;
--controlbox-heading-top-margin: 0.75em;
--controlbox-pane-background-color: white;
--controlbox-pane-bg-hover-color: #eff4f7;
--chat-gutter: 0.5em; --chat-gutter: 0.5em;
--minimized-chats-width: 130px; --minimized-chats-width: 130px;
...@@ -106,13 +110,13 @@ $mobile_portrait_length: 480px !default; ...@@ -106,13 +110,13 @@ $mobile_portrait_length: 480px !default;
--heading-display: block; --heading-display: block;
--heading-color: white; --heading-color: white;
--chatroom-head-color: var(--redder-orange); --chatroom-head-color: white;
--chatroom-head-color-dark: #D24E2B; // $red --chatroom-head-bg-color: var(--redder-orange);
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%) --chatroom-head-bg-color-dark: #D24E2B; // $red
--chatroom-head-button-color: var(--chatroom-head-color); --chatroom-head-button-color: var(--chatroom-head-bg-color);
--chatroom-head-title-font-weight: normal; --chatroom-head-title-font-weight: normal;
--chatroom-head-title-padding-right: 0px; --chatroom-head-title-padding-right: 0px;
--chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent); --chatroom-head-description-color: var(--chatroom-head-bg-color-lighten-25-percent);
--chatroom-head-description-link-color: white; --chatroom-head-description-link-color: white;
--chatroom-head-description-display: block; --chatroom-head-description-display: block;
--chatroom-head-description-border-left: 0px; --chatroom-head-description-border-left: 0px;
...@@ -120,8 +124,8 @@ $mobile_portrait_length: 480px !default; ...@@ -120,8 +124,8 @@ $mobile_portrait_length: 480px !default;
--chatroom-head-border-bottom: 0px; --chatroom-head-border-bottom: 0px;
--chatroom-width: 500px; --chatroom-width: 500px;
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%) --chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
--chatroom-badge-color: var(--chatroom-head-color); --chatroom-badge-color: var(--chatroom-head-bg-color);
--chatroom-badge-hover-color: var(--chatroom-head-color-dark); --chatroom-badge-hover-color: var(--chatroom-head-bg-color-dark);
--headline-head-color: var(--orange); --headline-head-color: var(--orange);
--headline-message-color: #D2842B; --headline-message-color: #D2842B;
...@@ -138,10 +142,10 @@ $mobile_portrait_length: 480px !default; ...@@ -138,10 +142,10 @@ $mobile_portrait_length: 480px !default;
--message-font-size: var(--font-size); --message-font-size: var(--font-size);
--separator-text-color: var(--message-text-color); --separator-text-color: var(--message-text-color);
--chat-separator-border-bottom: 2px solid var(--chat-head-color); --chat-separator-border-bottom: 2px solid var(--chat-head-color);
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color); --chatroom-separator-border-bottom: 2px solid var(--chatroom-head-bg-color);
--message-input-border-top: 4px solid var(--chatroom-head-color); --message-input-border-top: 4px solid var(--chatroom-head-bg-color);
--message-input-color: var(--chatroom-head-color); --message-input-color: var(--chatroom-head-bg-color);
--line-height-small: 14px; --line-height-small: 14px;
--line-height: 16px; --line-height: 16px;
...@@ -191,8 +195,10 @@ $mobile_portrait_length: 480px !default; ...@@ -191,8 +195,10 @@ $mobile_portrait_length: 480px !default;
--avatar-background-color: none; --avatar-background-color: none;
--controlbox-pane-background-color: #333; --controlbox-pane-background-color: #333;
--controlbox-pane-bg-hover-color: #464646;
--controlbox-heading-color: #777; --controlbox-heading-color: #777;
--controlbox-heading-font-weight: bold; --controlbox-heading-font-weight: bold;
--groupchats-header-color: var(--redder-orange);
--chat-topic-display: none; --chat-topic-display: none;
--chat-info-display: none; --chat-info-display: none;
...@@ -203,10 +209,10 @@ $mobile_portrait_length: 480px !default; ...@@ -203,10 +209,10 @@ $mobile_portrait_length: 480px !default;
--chatbox-border-radius: 0px; --chatbox-border-radius: 0px;
--heading-display: inline; --heading-display: inline;
--heading-color: #4F545C; --heading-color: #9B4D;
--chatroom-head-color: white; --chatroom-head-color: #7E7E7E;
--chatroom-head-color-lighten-25-percent: blue; --chatroom-head-bg-color: white;
--chatroom-head-button-color: #999; --chatroom-head-button-color: #999;
--chatroom-head-title-font-weight: bold; --chatroom-head-title-font-weight: bold;
--chatroom-head-title-padding-right: 12px; --chatroom-head-title-padding-right: 12px;
......
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