chatServer/styles.css at master · michaelrodgam/chatServer · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/*Mobile styles*/
*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #17223b;
    color: #ff6768;
    text-align: center;
}

div{
    margin: 20px;
}

li{
    display: inline;
    margin: 10px;
    padding: 5px;
}

#liveChat{
    padding: 30px;
    border-bottom: 2px dotted #ffe78f;
    border-top: 2px dotted #ffe78f;
}

#chat{
    max-width: 200px;
    padding: 5px;
    border: 2px inset #00bcd4;
    border-radius: 10%;
}

input[type="submit"], input[type="button"]{
    margin: 5px;
    border-left: 3px ridge #00bcd4;
    border-bottom: 2px ridge #00bcd4;
    border-right: 1px ridge #00bcd4;
    padding: 5px;
    color: #ff6768;
    background-color:#263859;
    border-radius: 30%;
}

#clearChat{
    border-right: 3px ridge #00bcd4;
    border-left: 1px ridge #00bcd4;
}

#data{
    height: 250px;
    overflow-y: auto;
    border-right: 1px inset #00bcd4;
}

#user{
    padding: 15px;
    border-top: 2px dotted #ffe78f;
}

.bubble{
    background-color: #263859;
    border: 1px unset white;
    color: white;
    padding: 2px;
    border-radius: 3%;
    box-shadow: 2px 2px 1px #ff6768;

    /*for the bubble tail trick*/
    position: relative;
}

.bubble::before{
    /*Bubble trick*/
    content: '';
    position: absolute;
    left: 10%;
	top: 100%;
	border: 8px solid transparent;
    border-left-color: #263859;
    border-top-color: #263859;
}

.smaller{
    font-size: smaller;
    color: gray;
}

.redText{
    color:#ff6768;
}

.blueText{
    color:#00bcd4;
}


/*Desktop styles*/ /*Nothing for now, sorry*/
@media only screen and (min-width: 768px){

    #liveChat{
        display:grid;
        grid-template-columns: auto 100px 450px 100px auto;
        grid-template-rows: 30px 260px 150px;
        padding: 10px;

    }

    #liveChat h3{
        grid-column-start: 3;
        grid-row-start: 1;
    }

    #data{
        grid-column-start: 3;
        grid-row-start: 2;
        border: 2px inset #00bcd4;
        margin: 0;
    }

    #liveChat form{
        grid-column-start: 3;
        grid-row-start: 3;
    }

    #chat{
        height: 70px;
    }

}