forked from aminomancer/uc.css.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
uc-fullscreen.css
121 lines (105 loc) · 5.51 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
/* 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;
/* navbar shadow in fullscreen */
position: relative;
box-shadow: 0px 0px 8px -5px hsla(240, 4%, 0%, 0.5), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.2) !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(0.26, 1, 0.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;
}