-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHangowts.css
172 lines (125 loc) · 7.54 KB
/
Hangowts.css
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
@-moz-document regexp('https://hangouts\\.google\\.com/(?!webchat/frame).*') {
/* Notes: Only URL dots must be escaped. This is how to ^ deny site subsections,
per Stylish wiki:
https://github.com/stylish-userstyles/stylish/wiki/Applying-styles-to-specific-sites
webchat/frame was excluded, because some of the rules not required for it were still applied.
*/
@media only screen and (max-width:320px) { HTML.g-Ue, HTML.g-Ue > BODY {width:320px;} DIV.g-Ue-Ja-t {max-width:320px;} DIV.Cl {max-width:255px !important;} DIV.g-Ue-OkO9ve ~ DIV.Cl {height:calc(100% - 35px) !important;} DIV.g-Ue-OkO9ve ~ DIV.Cl[style*='36px'] {height:36px !important;} DIV.Ih {width:100%;} }
/* DIV.g-Ue-Ja-t : most of it; was: 628px
• DIV.Cl : chat window. |previous| height:375px !important; width:255px !important;
22.06.2017: In case of a classic header (DIV.g-Ue-OkO9ve , w. IceCat), set height to a |calc|ulation. Avoid using minus 36px, as it will bork the layout a bit.
23.06.2017: And pair it with a rule that adapts the height w. !important.
• DIV.Ih : chat window contents.
Use important, because there are many rules applied to element via JavaScript. */
/* 320. top block, w. login stuff */
DIV.gb_4f {min-width:500px !important;}
/* stopped at min-width:682px */
/* Firefox-compatible HEADER | inside DIV.g-Ue-OkO9ve , btw. | since modified */
DIV.gb_6f, DIV.gb_cg {min-width:320px !important;}
/* No effect. .gb_cg added on 23.06.2017. */
DIV.gb_jf {height:34px;}
/* 23.06.2017 */
/* Header left AND right */
DIV.gb_jf > .gb_R {height:34px; line-height:30px;}
/* 23.06.2017. Affects right-side line-height, too. */
/* HEADER: ITEMS | since modified (probably, likely) */
DIV.gb_T .gb_bg {display:block; padding-left:0px; padding-right:0px;}
/* Original: display:flex. Original paddings are from .gb_jb */
/* LOGO (Firefox) */
/* LOGO container width (element shared with .gb_R) */
DIV.gb_Zb {min-width:172px !important;}
/* LOGO sub-container padding */
DIV.gb_1b, DIV.gb_0b {padding:0px 0px;}
/* RIGHT-SIDE ITEMS and USER/ACCOUNT LINK (Firefox). */
/* right-side container (shared with .gb_R) */
DIV.gb_ib {padding-left:0px; padding-right:0px;}
/* 06.2017 */
/* ACCOUNT LINK | contains user logo, adjusted for logo size. */
DIV.gb_db.gb_R {height:32px; width:32px;}
#gb#gb A.gb_b.gb_db.gb_R {padding-top:1px;}
DIV.gb_Wc {float:left;}
/* Does it still exist? */
/* CLASSIC HEADER STRIP (IceCat), USER LINK */
DIV.g-Ue-OkO9ve {margin-left:0px;}
/* ^ container */
DIV#gbg {background-color:#2d2d2d; border-left:solid 1px Gray; padding-right:0px;}
/* Unknown location, whole viewport, causes a horizontal scrollbar; affects min-width and min-height. Contains left-side menu. */
DIV.g-Ue-Ja-t {min-width:310px; min-height:320px;}
DIV.bdXzDb {top:29px;}
/* ^ This has z-index at 102... */
/* Follows .g-Ue-Ja-t */
DIV.g-Ue-ad {min-height:320px;}
/* Hangouts logo height adjustment: */
DIV#gba, DIV.gb_df, DIV.gb_df > .gb_R {height:24px;}
DIV.gb_df > .gb_R {line-height:22px;}
/* CONTACTS */
DIV.g-Ue-kc {width:75%; max-width:400px;}
/* original width:400px; 81%; */
/* CHAT WINDOW */
/* Below rule:
• right: can safely be set to 0px, since I got the hang wrt bottom stuff. For the most part, and for the first four chat windows only.
Because:
• On a small screen, there's a limit to how much the height can be.
• If there can be more chat windows than |primary| colours in the rainbow, then the device is fast enough to handle such loads. */
DIV.Cl {right:0px !important; border-style:solid; border-width:2px;}
DIV.Cl[style*='36px'] {width:293px !important;}
/* This makes minimised chat windows longer, so that a message received from another person is visible. */
/* Below: The tildes are used instead of pluses to cover _any_ DIV.Cl sibling elements and not adjacent sibling elements (side-by-side), because the code is dynamic, and some extra elements are often added _before_ the first DIV.Cl element and _between_ later DIV.Cl elements, thus breaking inheritance with + selectors. The tilde is used to ensure, that colors and positions are always implemented. */
/* CHAT WINDOW 1: PURPLE */
DIV.Cl {border-color:#6A5ACD;}
/* is: #6A5ACD purple; Should work. */
/* CHAT WINDOW 2: BLUE */
DIV.Cl ~ DIV.Cl {border-color:#0077ee;}
DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(36px + 4px) !important;}
/* CHAT WINDOW 3: GREEN */
DIV.Cl ~ DIV.Cl ~ DIV.Cl {border-color:#00db73;}
DIV.Cl ~ DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(2 * (36px + 4px)) !important;}
/* CHAT WINDOW 4: YELLOW */
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl {border-color:yellow;}
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(3 * (36px + 4px)) !important;}
/* CHAT WINDOW 5: ORANGE */
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl {border-color:orange;}
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(4 * (36px + 4px)) !important;}
/* CHAT WINDOW 6: RED */
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl {border-color:red;}
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(5 * (36px + 4px)) !important;}
/* CHAT WINDOW 7: PINK */
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl {border-color:HotPink;}
DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl ~ DIV.Cl[style*='36px'] {bottom:calc(6 * (36px + 4px)) !important;}
/* Above: Instead of making manually calculated bottom positions with each iteration, it's easier to use 'calc': 36px is the base height, 4px consists of the top- and bottom borders that are each 2px. While it's possible to use CSS variables, then it's resource-intensive, because the browser has to parse through each element. */
/* CHAT WINDOW: these are inside an IFRAME, which should be excluded now (26.04.2017). */
/* CHAT WINDOW TITLE (name) widths to show controls */
/* DIV.xB {width:55%;} */
/* CHAT WINDOW TITLE: Tests to see, if stuff works. Comment in, when not needed. */
/* DIV.xB {border:solid 1px yellow;} */
/* CHAT WINDOW TEXTAREA */
/* DIV.tk {width:86%;} */
/* background image */
DIV.kFx1Ae-xdwExf-eb-m IMG {display:none;}
/* 06.11.2018: previous to this date*/
DIV.g-Qx-eb {display:none; background-image:none;}
/* 06.11.2018. */
/* background image author (26.04.2017) */
HTML.g-Ue .g-Ue-ad .g-Qx-r4m2rf-wZVHld {display:none;}
/* right block */
DIV.g-Ue-v0h5Oe {display:none; top:70px; left:5px; width:auto; min-width:unset; min-width:64px; max-width:unset; min-height:160px; z-index:-1;}
/* right block rings (all) */
DIV.g-Ue-v0h5Oe UL {margin-top:0px; margin-bottom:0px; white-space:normal;}
/* right block rings (individual) */
DIV.g-Ue-v0h5Oe LI {margin-top:16px; margin-right:24px;}
/* right block rings */
DIV.g-Ue-b {margin-bottom:5px;}
}
@-moz-document regexp('https://hangouts\\.google\\.com/webchat/frame.*') {
/* Put textarea to top on focus, so it would not be hidden behind the virtual keyboard. Sometimes, the layout does adjust to the virtual keyboard, but not everytime. */
DIV.kq {position:absolute; top:36px; width:100%;}
/* .kq is added dynamically into .lZ.ca92t, which is a child of .Ef.sZ */
/* The following is either a more elegant or more permanent solution in putting the
textarea to top when focussed. It's meant to avoid defaults jumping the chat window
and changing its height in reaction to appearance of virtual keyboards. */ /*
@media only screen and (max-width:320px) { DIV.hh > DIV.Xg > DIV.sh {position:absolute; top:72px; height:calc(100% - 72px);} DIV.Ef {position:absolute; top:36px;} }
*/ /*
• DIV.sh : CHAT MESSAGE AREA__move lower | +22.06.2017.
• DIV.Ef : CHAT TEXTAREA __ move to top. | +22.06.2017. | Opt: width:100%;
DIV.lZ is the child element. Just in case. */
}