r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change the color of send/cancel button

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-03-24 16:41:17 +02:00
parent 6ad70b3f06
commit 05e2761860
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/chat/input.ts
View File

@ -668,7 +668,7 @@ export default class ChatInput {
this.inlineHelper = new InlineHelper(this.rowsWrapper, this.autocompleteHelperController, this.chat, this.appUsersManager, this.appInlineBotsManager); this.inlineHelper = new InlineHelper(this.rowsWrapper, this.autocompleteHelperController, this.chat, this.appUsersManager, this.appInlineBotsManager);
this.rowsWrapper.append(this.newMessageWrapper); this.rowsWrapper.append(this.newMessageWrapper);
this.btnCancelRecord = ButtonIcon('delete danger btn-circle z-depth-1 btn-record-cancel'); this.btnCancelRecord = ButtonIcon('delete btn-circle z-depth-1 btn-record-cancel');
this.btnSendContainer = document.createElement('div'); this.btnSendContainer = document.createElement('div');
this.btnSendContainer.classList.add('btn-send-container'); this.btnSendContainer.classList.add('btn-send-container');

35
src/scss/partials/_chat.scss
View File

@ -235,6 +235,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
background-color: var(--danger-color) !important;
// background-color: var(--surface-color) !important;
// here percents can be used since there are no other transforms // here percents can be used since there are no other transforms
transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin})); transform: translateX(calc(-100% + var(--padding-horizontal) * -1 + #{-$btn-send-margin}));
@ -320,15 +322,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
} }
.btn-send { .btn-send {
color: var(--secondary-text-color); background-color: var(--primary-color) !important;
// color: var(--secondary-text-color);
z-index: 3; z-index: 3;
.tgico-send { // .tgico-send {
color: var(--primary-color) !important; // color: var(--primary-color) !important;
} // }
.tgico-check { .tgico-check {
color: var(--primary-color) !important; // color: var(--primary-color) !important;
height: 32px!important; height: 32px!important;
font-size: 2rem; font-size: 2rem;
@ -337,16 +340,16 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
} }
} }
.tgico-schedule { // .tgico-schedule {
background-color: var(--primary-color); // background-color: var(--primary-color);
color: #fff; // color: #fff;
border-radius: 50%; // border-radius: 50%;
width: 34px; // * same as for btn-icon in input // width: 34px; // * same as for btn-icon in input
height: 34px; // height: 34px;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: center; // justify-content: center;
} // }
&.send .tgico-send, &.send .tgico-send,
&.record .tgico-microphone, &.record .tgico-microphone,
@ -375,7 +378,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.btn-send { .btn-send {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.5rem; line-height: 1.5rem;
background-color: var(--surface-color) !important; color: #fff !important;
} }
.record-time { .record-time {