firefox-css/sidebery.css at main · feilvan/firefox-css · GitHub

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
#root {
  --tabs-font: 10pt Inter, sans-serif;
  --tabs-count-font: 0.625rem Inter, sans-serif;
  --bookmarks-bookmark-font: 0.875rem Inter, sans-serif;
  --bookmarks-folder-font: 10pt Inter, sans-serif;

  --tabs-indent: 16px;
  --tabs-height: 28px;
  --tabs-inner-gap: 6px;
  --tabs-border-radius: 4px;
  --tabs-margin: 4px;
  --nav-btn-margin: 6px;

  --tabs-pinned-width: 28px;
  --tabs-pinned-height: 28px;
}

@media (prefers-color-scheme: dark) {
  #root {
    --toolbar-bg: #101313 !important;
    --s-frame-bg: #101313;
    --active-el-bg: #202020 !important;
  }
}

@media (prefers-color-scheme: light) {
  #root {
    --toolbar-bg: #fafafc !important;
    --s-frame-bg: #fafafc;
  }
}

/* Adjust styles according to sidebar width */
@media screen and (max-width: 40px) {
  #root {
    --tabs-indent: unset;
  }
  .Tab .audio {
    left: 10px;
    transform: scale(0.8);
    transform: translateY(4px);
    z-index: 99 !important;
  }
  .Tab .title {
    visibility: collapse;
  }
  .Tab .audio-icon {
    visibility: collapse;
  }
  .BottomBar {
    visibility: collapse;
  }
  .new-tab-btns {
    visibility: collapse;
  }
  #root[data-tabs-tree-lvl-marks="true"]
    .Tab[data-pin="false"]:not([data-lvl="0"])
    .body:after {
    display: none;
  }
}

@media screen and (min-width: 40px) {
  .Tab .audio {
    left: 28px;
  }
}

.Tab {
  margin: 0 6px;
  width: unset;
}

.nav-item {
  width: 28px !important;
  height: 28px !important;
}

.Tab[data-pin="false"] .fav {
  margin: 0 var(--tabs-inner-gap) 0 var(--tabs-inner-gap);
}

.NavigationBar.-top {
  padding: 0 var(--nav-btn-margin);
}

/* Pinned tab */

#root[data-pinned-tabs-position="panel"] .PinnedTabsBar {
  padding: 0 var(--nav-btn-margin) var(--tabs-margin);
}

.Tab[data-pin="true"] .audio {
  top: 12px !important;
  left: 12px !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px transparent;
}