keyboard/button.css at main · sami019325/keyboard · 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
108

body{
    background-color: aqua;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.texArea::-webkit-scrollbar {
    display: none;}
.emojiBox::-webkit-scrollbar {
    display: none;}
/* Hide scrollbar for IE, Edge and Firefox */
.texArea {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.emojiBox {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

.texArea{
    min-width: 100%;
    max-width: 100%;
    display: block;
    resize:none;
    overflow: hidden;
    min-height: 50px;
    background: transparent;
    border: none;
    /* outline: none;  (it hides the mouse selection*/
    overflow: scroll;

    text-align: justify;
    font-size: 15pt;
    font-family: 'Prompt', sans-serif;
}


/* this sectioc is for the emoji keyboard */

.emojiShow{ /* emoji hide and show button */
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border:none;
    user-select: none;
    outline: none;
    padding: 3px;
    background-color:coral;
    float: right;
    font-size: 30px;

}
.emojiHiden{
    opacity: 100%;
    float: left;
    left: 20px;
    display: none;

}
.emojiHidenHolder{
    height: 30px;
    width: 30px;
    float: left;
    overflow:scroll;
    display: none;
}

.emojiBox{
    position: absolute;
    top: 67px;
    right: 20px;
    width: 230px;
    height: 400px;
    overflow: auto;
    float: right;
    border: 1 px solid black;
    background-color: coral;
    border-radius: 4px;
    padding: 5px;
    border: 5px solid coral;
}


.emoji{
position: relative;
float: right;
margin:1px ;
text-align: center;
width: 44px;
height:44px;
background-color: #F0FFFF;
border: none;
border-radius: 4px;
user-select: none;
outline: none;
font-size: 25px;


}
 .emoji:hover{
  background-color: rgb(91, 204, 81);
 }