da157.id
this repo has no description
1/* SPDX-License-Identifier: MPL-2.0 */
2/* SPDX-FileCopyrightText: 2024 0xda157 */
3
4@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html")
5{
6 :root,
7 .root,
8 #root {
9 --general-border-radius: var(--uc-button-radius) !important;
10 --tabs-margin: 1.5px !important;
11 --tabs-pinned-height: 30px !important;
12 --tabs-pinned-width: 30px !important;
13 --tabs-height: 30px !important;
14 --nav-btn-width: 30px !important;
15 --nav-btn-height: 28px !important;
16
17 @media -moz-pref( "browser.tabs.allow_transparent_browser") and (not (-moz-platform: windows)) {
18 background-color: transparent !important;
19 --frame-bg: transparent !important;
20 }
21 }
22
23 @media (max-width: 40px) {
24 .TabsPanel {
25 --tabs-indent: 0px !important;
26 }
27 .bookmarks-tree {
28 --bookmarks-indent: 0px !important;
29 }
30 .Tab:not([data-active="true"]) .close {
31 display: none !important;
32 }
33 }
34
35 .NavigationBar
36 .main-items
37 .nav-item[data-index="-1"]:not([data-active="true"]),
38 .NavigationBar:not(:has(.nav-item:not([data-index="-1"]))) .static-btns {
39 display: none !important;
40 }
41 @media (max-width: 66px) {
42 .NavigationBar .static-btns {
43 display: none !important;
44 }
45 }
46
47 .NavigationBar .main-items .nav-item[data-index="-1"] {
48 opacity: 1 !important;
49 z-index: 1 !important;
50 transform: scale(1, 1) !important;
51 }
52
53 .central-box {
54 margin-top: var(--tabs-margin) !important;
55 }
56
57 .TabsPanel .new-tab-btns {
58 padding: 0 var(--tabs-margin) !important;
59 }
60
61 #new-tab-btn {
62 width: 100% !important;
63 }
64
65 .NavigationBar {
66 border-radius: 6px !important;
67 margin: 0.3px !important;
68 }
69
70 #nav_bar {
71 background-color: transparent !important;
72 padding: var(--tabs-margin) !important;
73 }
74
75 @media not -moz-pref( "uc.tweak.sidebery.top-navbar") {
76 .top-horizontal-box {
77 order: 100 !important;
78 margin-bottom: var(--tabs-margin) !important;
79 }
80
81 .NavigationBar.-top .hidden-panels-popup {
82 position: absolute !important;
83 margin-top: -1000px !important;
84 top: auto !important;
85 bottom: 36px !important;
86 }
87 .NavigationBar.-top .hidden-panels-popup-layer::before {
88 display: none !important;
89 background-color: transparent !important;
90 }
91 } @media -moz-pref( "uc.tweak.sidebery.top-navbar") {
92 .top-horizontal-box {
93 margin-top: var(--tabs-margin) !important;
94 }
95 }
96
97 @media -moz-pref( "uc.tweak.sidebery.big-pinned") {
98 .PinnedTabsBar {
99 display: grid !important;
100 grid-gap: calc(3 * var(--tabs-margin)) !important;
101 grid-template-rows: 3rem;
102 grid-auto-rows: 3rem;
103 grid-template-columns: repeat(auto-fit, minmax(min(100%, 3rem), 1fr));
104 }
105
106 .Tab[data-pin="true"] {
107 width: 100% !important;
108 height: 100% !important;
109 &:not([data-active="true"]) .body {
110 background-color: color-mix(
111 in oklab,
112 var(--tabs-activated-bg) 25%,
113 transparent
114 ) !important;
115 }
116 }
117 }
118
119 /* tab audio indicator */
120 .Tab .audio {
121 top: 2px !important;
122 left: 2px !important;
123 height: 12px !important;
124 width: 12px !important;
125 }
126 .Tab .child-count {
127 display: none !important;
128 }
129 .Tab[data-audible="true"] .t-box .title,
130 .Tab[data-muted="true"] .t-box .title,
131 .Tab[data-paused="true"] .t-box .title {
132 transform: translateX(0px) !important;
133 }
134
135 /* replace new tab panel and new tab button with plus */
136 .NavigationBar #add_tp.nav-item .icon,
137 .new-tab-btn > svg {
138 fill: transparent;
139 background-color: var(--nav-btn-fg);
140 mask: url("chrome://global/skin/icons/plus.svg") !important;
141 }
142
143 .nav-item .audio,
144 .nav-item .bookmarks-badge-icon {
145 background-color: var(--frame-bg) !important;
146 }
147
148 /* new tab button */
149 .TabsPanel .new-tab-btns {
150 height: calc(var(--tabs-height) + var(--tabs-margin)) !important;
151 width: calc(100% - var(--tabs-margin) * 2) !important;
152 padding: 0px !important;
153 padding-bottom: var(--tabs-margin) !important;
154 margin: 0 var(--tabs-margin);
155 border-radius: var(--tabs-border-radius);
156
157 position: relative !important;
158 overflow: clip !important;
159
160 & .new-tab-btn {
161 width: 100% !important;
162 height: 100% !important;
163
164 justify-content: flex-start !important;
165 flex-wrap: nowrap !important;
166 overflow: clip !important;
167 min-width: unset !important;
168 position: relative !important;
169
170 &::after {
171 content: "New Tab";
172 position: relative;
173 margin-left: calc(
174 var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px
175 ) !important;
176 width: calc(
177 100% - (var(--tabs-inner-gap) + var(--tabs-inner-gap) + 2px + 16px)
178 ) !important;
179
180 font: var(--tabs-font);
181 color: var(--tabs-normal-fg);
182 white-space: nowrap;
183 display: block !important;
184 box-sizing: border-box;
185 text-align: start;
186 overflow: hidden;
187 transition: transform var(--d-fast);
188 mask: linear-gradient(-90deg, transparent, #000 8px, #000);
189 margin-right: 2px !important;
190 }
191 }
192
193 & svg {
194 margin: 0 var(--tabs-inner-gap) 0 calc(var(--tabs-inner-gap) + 2px);
195 }
196 }
197}