telegram/index.css at main · OgbuGideon/telegram · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
a {
  text-decoration: none;
}

/* STACKOVERFLOW https://code.visualstudio.com/api/references/icons-in-labels */
:root {
  /* STACKOVERFLOW https://www.w3schools.com/css/css3_variables_javascript.asp */
  --blue: #1e90ff;
  --white: #ffffff;
  --bgOpacity: 0.89;
}

.v-sheet-pointer:hover {
  cursor: pointer !important;
}

.menu {
  opacity: 0.98;
}

.messagesBackground {
  position: relative;
}

.messagesBackground::before {
  /* STACKOVERFLOW https://coder-coder.com/background-image-opacity/ */
  content: "";
  background-image: url("img/telegram-backgroundZ.png");
  background-size: cover;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: var(--bgOpacity);
}

.message-self {
  background-color: rgb(230, 248, 225) !important;
  position: relative;
}

.message-other {
  background-color: white !important;
  position: relative;
}

.message-self::before {
  /* STACKOVERFLOW https://stackoverflow.com/questions/59482476/how-can-i-create-a-triangle-pointer-in-vuetify-v-menu-component */
  /* STACKOVERFLOW https://css-tricks.com/snippets/css/css-triangle/ */
  position: absolute;
  content: "";
  bottom: 0px;
  right: 0px;
  transform: translateY(0px) translateX(8px);
  width: 10px;
  height: 10px;
  border-top: 10px solid transparent;
  border-left: 10px solid rgb(230, 248, 225);
  border-bottom: 0px solid transparent;
  border-right: 0px solid transparent;
}

.message-other::before {
  position: absolute;
  content: "";
  bottom: 0px;
  left: 0px;
  transform: translateY(0px) translateX(-8px);
  width: 10px;
  height: 10px;
  border-top: 10px solid transparent;
  border-right: 10px solid white;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
}

.service-msg {
  background-color: rgba(0, 0, 0, 0.23) !important;
  position: relative;
}

.appContainer {
  /* https://www.onlinepalette.com/telegram/    Hex: #30A3E6     RGB: (48 163 230)    HSL: (202 78% 55%)      */
  //background-color: rgba(48, 163, 230, 0.03);
  background-color: white;
}

.telegram-color {
  background-color: #30a3e6 !important;
}

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(55, 55, 55, 0.4);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(55, 55, 55, 0.4);
  border-radius: 3px;
}