-
Notifications
You must be signed in to change notification settings - Fork 24
/
uc-fullscreen.css
112 lines (100 loc) · 4.81 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
/* 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 {
margin-top: calc(0.5px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)) !important;
margin-bottom: -1px !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;
}
&:not([customizing]) {
#browser findbar {
padding-top: calc(7px + 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-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;
}
#navigator-toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]),
> body > toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]) {
~ #browser findbar {
margin-top: 2px !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;
}
}
}
&[customizing] {
#customization-container > #customization-content-container {
margin-top: calc(var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
z-index: 2147483647 !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. */
&[customizing] #navigator-toolbox,
#navigator-toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]) {
margin-block: 0 !important;
margin-bottom: calc(-1px - 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;
opacity: 1 !important;
}
/* :root[fullscreen-autohide][inFullscreen] #navigator-toolbox {
position: fixed !important;
display: block;
} */
/* comment out these rules if you don't want the sidebars to move up and down with the navbar */
&:not([customizing]) {
#navigator-toolbox:not(:focus-within, :hover, [popup-status], [urlbar-status]),
> body > toolbox:not(:focus-within, :hover, [popup-status], [urlbar-status]) {
~ #browser {
#sidebar-box,
#vertical-tabs-pane {
margin-top: calc(
0px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px)
) !important;
transition: all 0.25s ease-in-out 0s !important;
}
}
}
#sidebar-box,
#vertical-tabs-pane {
padding-top: calc(4px + 1px + var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px)) !important;
margin-top: 0 !important;
transition: all 0.25s cubic-bezier(0.26, 1, 0.8, 1) 0s !important;
transform-style: flat !important;
backface-visibility: hidden !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;
}