telegramUI/styles.css at master · 4lirez/telegramUI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
@font-face{
    font-family: 'vazir';
    src: url(https://virgool.io/fonts/vazir/Vazir-Regular.ttf);
    font-display: swap;
}
@font-face{
    font-family: 'vazir';
    src: url(https://virgool.io/fonts/vazir/Vazir-Bold.ttf);
    font-weight: bold;
    font-display: swap;
}
/* black background for behind the telegram app body*/
body,html{
    background: #000 !important;
    scroll-behavior: smooth;
}

/* Vazir font for better experience in farsi text */
.im_message_body, .tg_head_peer_info, .modal-content.modal-content-animated{
    font-family: vazir;
}
/* speech bubble for sended messages */
.im_message_out .im_message_body{
    background: rgb(245, 245, 245);
    padding: 10px;
    border-radius: 10px;
}
/* speech bubble for received messages */
.im_message_in .im_message_body{
    background: aliceblue;
    padding: 10px;
    border-radius: 10px;
}
/* border for date reminder in chat */
.im_message_date_split_text{
    padding: 4px;
    border:1px dashed;
}
/* black color for auhtor name of message */
.im_message_author, .im_message_fwd_author{
    color:rgb(0, 0, 0) !important;
    font-size: 13px;
}

/* rounded corner for telegram app */
.im_page_wrap.clearfix{
    font-family: vazir;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.tg_head_split{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
/* fixed some issues after rounded corner */
.tg_head_btn.dropdown-toggle:hover{
    background:unset;
}
.dropdown.open .tg_head_btn,
.tg_head_btn:hover{
    border-top-left-radius: 10px;
}
/* a bit of margin for top of telegram app */
.tg_page_head{
    margin-top: 10px;
}

/* profile modal rounded corners */
.modal-content.modal-content-animated{
    border-radius: 10px;
}
.md_modal_head{
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

/* text little lighter */
.im_message_text {
    color: #353535;
}
/* little margin for channel messages views */
.im_message_views{
    margin-right:5px ;
}
/* removed select icon on hover on messages*/
@media (min-width: 900px){
    .im_message_selected .icon-select-tick, .im_history_selectable .im_message_outer_wrap:hover .icon-select-tick {
        opacity: 0 !important;
    }
}
/* eye icon of messages came down after changing font */
.icon-message-views{
    margin-bottom: 0.5rem;
}