-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsideberyConfig.css
More file actions
118 lines (118 loc) · 5.06 KB
/
sideberyConfig.css
File metadata and controls
118 lines (118 loc) · 5.06 KB
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
/* Begin Tab Preview Crap - HACKING to get alignment of tab preview aligned correctly for Sidebery */
/* Pop-in-page tab preview fix/cosmetic changes */
div.popup[style*="--fg"][style*="--bg"] {
visibility: collapse;
.header { visibility: collapse !important; }
&:has(div[style*="background-image: url("][style*="opacity: 1;"]) {
visibility: visible !important;
border: none !important;
border-radius: 4px !important;
box-shadow: 0 0 0 1px var(--tab-selected-outline-color), 0 1px 20px -5px var(--tab-selected-outline-color) !important;
}
right: unset !important; left: calc((var(--uc-sidebar-hover-width) - (var(--uc-sidebar-width))) + 1px) !important;
@media not -moz-pref("sidebar.position_start") { left: unset !important; right: calc((var(--uc-sidebar-hover-width) - (var(--uc-sidebar-width))) + 1px) !important;}
}
/* Fix pop-in-page tab preview alignment - Specifically when maximized or uc.full.tabs is true */
@media -moz-pref("uc.full.tabs"), (width: 1728px) { /* Adjustments needed for user viewport size when MAXIMIZED */
div.popup[style*="--fg"][style*="--bg"] {
right: unset !important; left: 0px !important;
@media not -moz-pref("sidebar.position_start") { left: unset !important; right: 0px !important;}
}
}
/* Tab preview fix alignment when uc.chromeless is toggled to true */
@media -moz-pref("uc.chromeless") {
div.popup[style*="--fg"][style*="--bg"] {
right: unset !important; left: calc(var(--uc-sidebar-hover-width) + 1px) !important;
@media not -moz-pref("sidebar.position_start") { left: unset !important; right: calc(var(--uc-sidebar-hover-width) * 1px) !important;}
}
}
#sdbr_preview_root {
/* opacity: .95 !important; disabled because it wouldn't hide itself*/
right: unset !important; left: 1px !important;
@media not -moz-pref("sidebar.position_start") { left: unset !important; right: 1px !important; }
}
/* End Tab Preview Crap */
/* Collapses content on overflow */
/* Adjust styles according to sidebar width */
@media screen and (max-width: 50px) { /* Activates on Collapse */
div#root.root.Sidebar {
--tabs-indent: unset !important;
--tabs-normal-fg: unset !important;
.audio { z-index: 100 !important; box-shadow: none !important; }
.ScrollBox > .scroll-container { overflow: hidden !important; }
.Tab {
.title,
.close, .exp { visibility: collapse !important } /* Prevent tab closing from touchscreen interaction */
.audio {
left: 10px !important;
transform: scale(.80) !important;
transform: translateY(4px) !important;
fill: var(--tabs-activated-fg);
}
}
}
}
@media screen and (min-width: 50px) { /* Activates When not Collapsed */
div#root.root.Sidebar .Tab .audio {
left: 10px !important;
top: 4px !important;
}
}
div#root.root.Sidebar {
.top-shadow[data-show="true"] {
z-index: 9999 !important;
border-radius: 50%;
box-shadow: 0 1px 0 0 var(--tab-selected-outline-color),0 1px 80px 10px var(--tab-selected-outline-color) !important;
@media -moz-pref("uc.shadow.flicker") { transition: all 6000ms cubic-bezier(0.2, -2, 0.8, 10) 0ms !important; }
}
.bottom-shadow[data-show="true"] {
z-index: 9999 !important;
border-radius: 50%;
box-shadow: 0 -1px 0 0 var(--tab-selected-outline-color),0 -1px 80px 10px var(--tab-selected-outline-color) !important;
@media -moz-pref("uc.shadow.flicker") { transition: all 2000ms cubic-bezier(0.2, -2, 0.8, 6) 0ms !important; }
}
.PinnedTabsBar { /* nowrap for Pinned Icons */
overflow: scroll !important;
flex-wrap: nowrap!important;
padding: 6px 3px 6px 3px !important;
scrollbar-width: none !important;
transform: rotateX(180deg); /* Flip the container upside down */
&:hover { scrollbar-width: thin !important; }
& > .tab-wrapper { transform: rotateX(180deg); } /* Flip the children back to normal */
}
.Tab {
&[data-pin="true"] .audio {
transform: translate(5px, 8px) !important;
}
&[data-active="true"] .body {
box-shadow: 0 0 0 1px var(--tab-selected-outline-color),0 1px 20px -5px var(--tab-selected-outline-color) !important;
}
}
.scroll-container { padding: 1px 0 0 0 !important; }
.top-horizontal-box { margin-bottom: 0px !important; }
.audio {
background-color: unset !important;
box-shadow: none !important;
}
.bottom-space { height: 250px !important; }
}
/* Sidebery Colors */
#sdbr_preview_root {
--hbg: var(--toolbar-bgcolor) !important;
--hfg: var(--lwt-toolbar-field-highlight) !important;
--bg: var(--toolbar-bgcolor) !important;
--fg: var(--lwt-toolbar-field-highlight) !important;
}
div#root.root.Sidebar {
--s-frame-bg: var(--lwt-accent-color) !important;
--s-frame-fg: var(--lwt-text-color) !important;
--s-toolbar-bg: var(--toolbar-bgcolor) !important;
--s-toolbar-fg: var(--lwt-toolbar-field-highlight) !important;
--s-act-el-bg: var(--tab-selected-bgcolor)!important;
--s-act-el-fg: var(--newtab-text-primary-color) !important;
--s-popup-bg: var(--arrowpanel-background) !important;
--s-popup-fg: var( --lwt-text-color) !important;
--s-popup-border: var(--tab-selected-outline-color) !important;
--s-act-el-border: var(--tab-selected-outline-color) !important;
--s-accent: var(--tab-selected-outline-color) !important;
}