pseudo-fullscreen-firefox/Sidebery-Sidebar.css at main · RESTART1230/pseudo-fullscreen-firefox · 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
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
134
#root.root {--general-margin: 1px;}

  /*   COLORS   */
#root.root {
  --toolbar-bg:                    var(--frame-bg);
  --nav-btn-active-shadow:         none;
  --frame-el-overlay-clicked-bg:   var(--frame-el-overlay-hover-bg);
  --toolbar-el-overlay-clicked-bg: var(--toolbar-el-overlay-hover-bg);
}


#root[data-frame-color-scheme=dark] {
  --frame-bg:                      hsl(252, 4%, 6%) !important;
  --tabs-activated-bg:             hsl(252, 4%, 15%);
  --tabs-activated-fg:             hsl(240, 100%, 70%);
  --ctx-menu-bg:                   hsl(252, 4%, 9%);
  --ctx-menu-separator:            hsl(252, 4%, 15%);
  --ctx-menu-shadow:               0 0 0 1px var(--ff-popup-border,black), 0 0 16px 0 black;
  --popup-bg:                      var(--ctx-menu-bg);
  --notification-bg:               var(--ctx-menu-bg);
}

#root[data-frame-color-scheme=dark] .Tab[data-pin="true"] {
  --tabs-activated-bg:             hsl(240, 38%, 32%);
}

[data-frame-color-scheme=dark] .Tab[data-active="true"] .fav-icon {fill: #fff}
[data-frame-color-scheme=dark] .popup-container {background-color: rgba(0,0,0,.6)}
[data-frame-color-scheme=dark] .popup {background-color: var(--frame-bg)}
[data-frame-color-scheme=dark] .TextInput::before {background-color: var(--frame-bg)}
[data-frame-color-scheme=dark] * {caret-color: #FF3641}
[data-frame-color-scheme=dark] ::selection {background-color: hsl(240, 38%, 18%); color: hsl(240, 79%, 80%)}
[data-frame-color-scheme=dark] .btn {background-color: #080808}


#root[data-frame-color-scheme=light] {
  --frame-bg:                      #F9F9FB;
  --tabs-activated-bg:             #E2E2E3;
  --tabs-activated-shadow:         none;
}


  /*   NAVBAR   */
#root.root {
  --nav-btn-width:                 32px;
  --nav-btn-height:                32px;
  --tabs-pinned-width:             32px;
  --tabs-pinned-height:            32px;
}

.NavigationBar .nav-item:not([data-active="true"]) .icon {opacity: .65}

.NavigationBar .nav-item[data-active="true"] .icon {fill: var(--tabs-activated-fg)}

.NavigationBar .nav-item .len {
  text-shadow: none;
  top: -2px}

.NavigationBar .nav-item .audio {
	background-color: transparent !important;
	box-shadow: none}

.Sidebar .tool-btn[data-disabled="true"] {display: none}

.Sidebar .tool-btn > svg {opacity: .5 !important}


  /*   TABS   */
.Tab,
.BookmarkNode {
  --frame-el-overlay-selected-border: none}

#root[data-pinned-tabs-position="panel"] .PinnedTabsBar,
#root[data-pinned-tabs-position="top"] .PinnedTabsBar {
	padding: 0 0 var(--tabs-margin) !important}

#root[data-pinned-tabs-position="panel"][data-pinned-tabs-list="true"] .PinnedTabsBar {padding: 0 0 calc(var(--tabs-margin) + 1px) !important}

.PinnedTabsBar::after {bottom: var(--tabs-margin)}

#root[data-pinned-tabs-position="top"] .PinnedTabsBar {padding: 0 1px var(--tabs-margin)}

.Tab[data-active="true"] .body {box-shadow: none}

.Tab[data-pin="true"] .audio {
	background-color: transparent;
	box-shadow: none}

.Tab .audio > svg {
	top: calc(50% - 7px);
	left: calc(50% - 5px)}

#root.root[data-frame-color-scheme=dark]  .ScrollBox > .top-shadow    {box-shadow: 0  1px 12px 0 #000}
#root.root[data-frame-color-scheme=dark]  .ScrollBox > .bottom-shadow {box-shadow: 0 -1px 12px 0 #000}

#root.root[data-frame-color-scheme=light] .ScrollBox > .top-shadow    {box-shadow: 0  1px 12px 0 #0004}
#root.root[data-frame-color-scheme=light] .ScrollBox > .bottom-shadow {box-shadow: 0 -1px 12px 0 #0004}


  /*   MENU   */
.CtxMenu .box {
  border-radius: 5px;
  min-width: 180px}

.CtxMenu .sub-menu {border-radius: 5px}

.CtxMenu .inline-group {padding: 0 0 2px 0 !important}

!.CtxMenu .icon-opt {min-width: 33%}

.CtxMenu .icon-opt:before,
.CtxMenu .opt:before {
  border-radius: 0;
  opacity: .1}

.CtxMenu .icon-opt:active {opacity: 1}

.CtxMenu .list-group {padding: 1px 0 3px 0}

.CtxMenu .opt {padding: 5px 10px}

.CtxMenu .opt[data-separator=true] {padding: 1px 0}

.CtxMenu .scroll-box {
  padding: 0 0 3px;
  overflow-x: hidden}

.CtxMenu .opt .label.-header {font-weight: 500}