forked from aminomancer/uc.css.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathuc-fullscreen.css
136 lines (120 loc) · 5.55 KB
/
uc-fullscreen.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
/* This Source Code Form is subject to the terms of the Creative Commons
* Attribution-NonCommercial-ShareAlike International License, v. 4.0.
* If a copy of the CC BY-NC-SA 4.0 was not distributed with this
* file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
* or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */
/* controls modifications made in fullscreen and/or maximized mode.
for example the navbar is hidden in fullscreen,
so we need to adjust the position of the findbar, sidebar, etc.
we also need to adjust window controls, the main menu bar, and the bookmarks toolbar. */
#fullscr-toggler {
pointer-events: none;
display: none !important;
}
:root[inFullscreen]:not([fullscreen-autohide]) #navigator-toolbox {
margin-top: revert !important;
}
:root[fullscreen-autohide][inFullscreen] #navigator-toolbox {
max-height: 0 !important;
margin-top: calc(
0.5px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)
) !important;
transition: all 0.25s ease-in-out 0s !important;
transition-delay: 0s !important;
opacity: 0 !important;
z-index: 2147483647 !important;
-webkit-transform-style: preserve-3d !important;
-webkit-backface-visibility: hidden !important;
-moz-transform-style: preserve-3d !important;
-moz-backface-visibility: hidden !important;
transform-style: preserve-3d !important;
backface-visibility: hidden !important;
}
:root[fullscreen-autohide][inFullscreen]:not([customizing]) #navigator-toolbox::after {
height: 2px !important;
}
#main-window:root[fullscreen-autohide][inFullscreen] #navigator-toolbox-background {
background: var(--toolbar-bgcolor) !important;
max-height: 0 !important;
}
/* hides the nav-bar in fullscreen, but reveals it when hovering or focusing the nav-bar, or when nav-bar related popups are opened.
requires fullscreenNavBar.uc.js to set attributes: popup-status and urlbar-status. */
:root[fullscreen-autohide][inFullscreen][customizing] #navigator-toolbox,
:root[fullscreen-autohide][inFullscreen]
#navigator-toolbox-background:is(:focus-within, :hover, [popup-status], [urlbar-status])
#navigator-toolbox {
margin-top: 0 !important;
transition: all 0.25s cubic-bezier(0.26, 1, 0.8, 1) 0s !important;
opacity: 1 !important;
}
/* :root[fullscreen-autohide][inFullscreen] #navigator-toolbox {
position: fixed !important;
display: block;
} */
:root[fullscreen-autohide][inFullscreen] #navigator-toolbox {
margin-bottom: calc(
0px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)
) !important;
}
:root[fullscreen-autohide][inFullscreen]:not([customizing]) #sidebar-box {
top: 0 !important;
}
/* uncomment out these rules if you want the sidebar to move up and down with the navbar */
/* :root[fullscreen-autohide][inFullscreen]:not([customizing])
#navigator-toolbox-background:not(:focus-within, :hover, [popup-status], [urlbar-status])
~ #browser
#sidebar-box,
:root[fullscreen-autohide][inFullscreen]:not([customizing])
> body
> box:not(:focus-within, :hover, [popup-status], [urlbar-status])
~ #browser
#sidebar-box {
top: 0 !important;
transition: all 0.25s ease-in-out 0s !important;
}
:root[fullscreen-autohide][inFullscreen]:not([customizing]) #sidebar-box {
top: calc(var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
padding-top: calc(var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
margin-top: calc(0px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)) !important;
transition: all 0.25s cubic-bezier(.26,1,.8,1) 0s !important;
transform-style: flat !important;
backface-visibility: hidden !important;
} */
:root[fullscreen-autohide][inFullscreen]:not([customizing]) #browser findbar {
top: 8px !important;
padding-top: calc(
var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)
) !important;
margin-top: calc(
-1px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)
) !important;
transition-property: transform, opacity, width, left, right, padding-top, margin-top !important;
transition-duration: 0.2s, 0.3s, 0.2s, 0.2s, 0.2s, 0.25s, 0.25s !important;
transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s !important;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out,
ease-in-out, ease-in-out !important;
}
:root[fullscreen-autohide][inFullscreen]:not([customizing])
#navigator-toolbox-background:is(:focus-within, :hover, [popup-status], [urlbar-status])
~ #browser
findbar,
:root[fullscreen-autohide][inFullscreen]:not([customizing])
> body
> box:is(:focus-within, :hover, [popup-status], [urlbar-status])
~ #browser
findbar {
margin-top: 0 !important;
transition-duration: 0.2s, 0.3s, 0.2s, 0.2s, 0.2s, 0.25s, 0.25s !important;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out,
cubic-bezier(0.26, 1, 0.8, 1), cubic-bezier(0.26, 1, 0.8, 1) !important;
}
:root[fullscreen-autohide][customizing][inFullscreen]
#customization-container
> #customization-content-container {
margin-top: calc(var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
z-index: 2147483647 !important;
}
/* DOM fullscreen, e.g. hitting the fullscreen button on youtube */
:root[inDOMFullscreen] :is(#navigator-toolbox, #fullscr-toggler, #sidebar-box, #sidebar-splitter) {
visibility: visible !important;
}