-
Notifications
You must be signed in to change notification settings - Fork 300
/
non_floating_sharp_tabs.css
133 lines (115 loc) · 5.42 KB
/
non_floating_sharp_tabs.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
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions.
* You should set layout.css.color-mix.enabled to true in about:config to make colors apply properly.
* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
:root[id]{
--tab-block-margin: 0px !important;
--tabs-shadow-size: 1px !important;
/* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */
--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important; /* this is same for fx < 119 */
}
/* Uncomment next line to force specific color for tab top line */
/* #tabbrowser-tabs{ --lwt-tab-line-color: blue !important; } */
/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
#nav-bar{
/* This overrides value in compact_proton.css */
box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
}
.tab-background[selected]{
border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
border-bottom-color: transparent !important;
}
#TabsToolbar{
--toolbarbutton-inner-padding: 7px !important;
}
/* Few exceptions for default light theme */
#navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
--toolbar-bgcolor: transparent;
}
/* Uncomment this for Fx < 119
.tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }
*/
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-badge-stack,
#TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
/* tabs newtab button needs some special styling... */
#tabs-newtab-button{
padding-inline: 0 !important;
align-items: stretch !important;
}
/* We draw the icon as background-image to get correct scaling regardless of toolbar height */
#tabs-newtab-button > .toolbarbutton-icon{
border-radius: 0 !important;
width: var(--tab-min-height) !important;
height: initial !important;
list-style-image: none;
background-image: url(chrome://global/skin/icons/plus.svg);
background-position: center;
background-repeat: no-repeat;
}
#scrollbutton-up,
#scrollbutton-down{
border-radius: 0 !important;
border-width: 0 !important;
padding-inline: 3px !important;
margin-bottom: var(--uc-compat-scrollbutton-margin,0px) !important; /* set in hide_tabs_scrollbuttons.css */
}
/* This is for hide_tabs_scrollbuttons.css compatibility since we modify scrollbutton width */
#tabbrowser-tabs[overflow]{
--uc-scrollbox-base-margin: -22px !important;
}
/* Selected tab needs to be relative so it gets drawn over nav-bar top "border" */
.tabbrowser-tab[selected]{
position: relative;
z-index: 1;
}
/* tab shaping */
.tabbrowser-tab{ padding-inline: 0 !important; }
:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{
min-height: calc(var(--tab-min-height) + 2px) !important;
}
.tab-content[pinned]{ padding-inline: 11px !important; }
.tab-background{
border-radius: 0 !important;
box-shadow: none !important;
border-top: 0 !important;
outline: none !important;
}
/* This next rule set is needed for Fx 120, otherwise themes with translucent tabs would seem to have extra border separating them from toolbar below. */
#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background:is([selected], [multiselected]):-moz-lwtheme {
background-attachment: scroll, fixed, fixed !important;
background-color: transparent !important;
background-image: linear-gradient(var(--tab-selected-bgcolor, transparent), var(--tab-selected-bgcolor, transparent)), var(--lwt-additional-images,none), var(--lwt-header-image, none) !important;;
background-position: 0 0, var(--lwt-background-alignment), right top !important;
background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat !important;
background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto !important;
}
.tab-background:not([selected])[multiselected]{
background: color-mix(in srgb, currentColor 11%, transparent) !important;
margin-inline-start: -1px;
}
/* Line to mark selected tab */
.tab-background[selected]::before,
.tabbrowser-tab:hover > stack > .tab-background::before{
display: flex;
height: 2px;
content: "";
}
.tab-stack:hover > .tab-background::before{
background-color: inherit;
}
.tab-stack > .tab-background[selected]::before{
background-color: highlight;
background-image: linear-gradient(var(--lwt-tab-line-color),var(--lwt-tab-line-color));
}
/* Photon-like tab on hover animation for the top line */
@keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
/* Disable animation for selected and pinned tabs */
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
/* moves context-line to the bottom */
.tab-context-line{
order: 2;
margin-inline: 10px !important;
}