├── Images ├── CleanShot 2023-03-01 at 07.54.55@2x.png ├── Pic.png └── pic_smaller.png ├── README.md └── userChrome.css /Images/CleanShot 2023-03-01 at 07.54.55@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tnings/MacosVibrant/9ab2e7fc4aa6c68fa220418a6c3df53a2eb547b8/Images/CleanShot 2023-03-01 at 07.54.55@2x.png -------------------------------------------------------------------------------- /Images/Pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tnings/MacosVibrant/9ab2e7fc4aa6c68fa220418a6c3df53a2eb547b8/Images/Pic.png -------------------------------------------------------------------------------- /Images/pic_smaller.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tnings/MacosVibrant/9ab2e7fc4aa6c68fa220418a6c3df53a2eb547b8/Images/pic_smaller.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MacOSVibrant 2 | 3 | ![Showcase img](https://raw.githubusercontent.com/Tnings/MacosVibrant/main/Images/Pic.png) 4 | MacOSVibrant is a one file firefox modification that **only works on MacOS**. It is themed after apple apps, such as the music app.
5 | 6 | You can use any firefox theme you want with it, but it works best with my theme, AppleStyledTheme 2. It is a theme that uses the same colors as the apple dark theme on MacOS.
7 | 8 | Currently, this theme is only made to work on dark theme, if there is demand I can update it for light theme.
9 | 10 | This theme is based off of [ProtoVibrant](https://github.com/bpwned/protovibrant), and borrows code from [Simply Silver/Peach](https://github.com/CristianDragos/FirefoxThemes/tree/master/Simplify%20Silver%20Peach) for the tabs.
11 | 12 | If you find any bugs, or have a tweak you think could make MacOSVibrant better, please make an issue and we can discuss it!
13 | 14 | I hope you enjoy this skin! 15 | -May 16 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | 2 | #main-window 3 | { 4 | background: transparent !important; 5 | } 6 | 7 | #TabsToolbar, 8 | .table-widget-empty-text 9 | { 10 | -moz-appearance: -moz-mac-source-list !important; 11 | } 12 | 13 | #TabsToolbar:-moz-lwtheme-brighttext, 14 | .table-widget-empty-text:-moz-lwtheme-brighttext 15 | { 16 | -moz-appearance: -moz-mac-source-list !important; 17 | } 18 | 19 | .tabbrowser-tab[selected="true"] .tab-label:-moz-lwtheme-brighttext 20 | { 21 | color:white !important; 22 | } 23 | 24 | .tabbrowser-tab .tab-label:-moz-lwtheme-brighttext 25 | { 26 | color:rgba(255,255,255,0.7) !important; 27 | } 28 | 29 | 30 | .tabbrowser-tab[selected="true"] .tab-background:-moz-lwtheme-brighttext 31 | { 32 | box-shadow: inset 0em -4em 0em var(--toolbar-bgcolor) !important; 33 | } 34 | 35 | #navigator-toolbox { 36 | background-color: transparent !important; 37 | } 38 | 39 | /* menubar + bookmarks */ 40 | 41 | :root #nav-bar, 42 | #PersonalToolbar, 43 | #titlebar 44 | { 45 | -moz-appearance: -moz-mac-source-list !important; 46 | -moz-font-smoothing-background-color: -moz-mac-source-list !important; 47 | } 48 | 49 | #TabsToolbar, #nav-bar, #PersonalToolbar { 50 | -moz-appearance: -moz-mac-vibrancy-dark !important; 51 | } 52 | 53 | /* simplify tabs */ 54 | 55 | #titlebar #TabsToolbar { 56 | padding: 6px 0px 2px 6px !important; 57 | background: rgba(var(--accent-color), 1) !important; 58 | } 59 | .titlebar-spacer[type="pre-tabs"] { 60 | /* border: 0 !important; */ 61 | display: none; 62 | } 63 | 64 | #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after { 65 | opacity: 0 !important; 66 | } 67 | .tab-line { 68 | height: 0px !important; 69 | } 70 | 71 | .tabbrowser-tab { 72 | margin-left: 15px !important; 73 | /* margin-right: 4px !important; */ 74 | } 75 | .tabbrowser-tab:not([visuallyselected="true"]), .tabbrowser-tab:-moz-lwtheme { 76 | 77 | } 78 | 79 | tab[selected="true"] .tab-content { 80 | 81 | } 82 | tab[selected="true"] .tab-background { 83 | 84 | } 85 | 86 | .tabbrowser-tab::after, .tabbrowser-tab::before { 87 | border-left: 0 !important; 88 | opacity: 0 !important; 89 | } 90 | 91 | .tab-close-button { 92 | transition: all 0.3s ease !important; 93 | border-radius: 30px !important; 94 | transform: translate(-3px,0px); 95 | } 96 | .tab-close-button:hover { 97 | fill-opacity: 0.2 !important; 98 | } 99 | 100 | .tabbrowser-tab > .tab-stack > .tab-background { 101 | border-radius: 50px !important; 102 | } 103 | .tabbrowser-tab > .tab-stack > .tab-background:not([selected="true"]) { 104 | transition: all 0.3s ease !important; 105 | } 106 | .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]) { 107 | border-color: #000 !important; 108 | border-color: rgba(0,0,0, 1) !important; 109 | } 110 | 111 | 112 | /* urlbar */ 113 | #urlbar-background 114 | { 115 | margin-top: 0px !important; 116 | margin-bottom: 0px !important; 117 | 118 | padding: 1px !important; 119 | 120 | background-color:white !important; 121 | box-shadow: inset 0px 0px 1px 0px #e3e3e3 !important; 122 | border-radius: 30px !important; 123 | border-color: #1a1a1a !important; 124 | } 125 | 126 | #urlbar:-moz-lwtheme, #navigator-toolbox #searchbar:-moz-lwtheme 127 | { 128 | color: #FFFFFF !important; 129 | } 130 | 131 | /* bookmarks */ 132 | .bookmark-item{ 133 | border-radius: 30px !important; 134 | transform: translate(0,-1px); 135 | } 136 | 137 | .bookmark-item:hover{ 138 | background-color: transparent !important; 139 | } 140 | 141 | 142 | 143 | .bookmark-item > .toolbarbutton-icon 144 | { 145 | 146 | display: flex !important; 147 | justify-content: center !important; 148 | 149 | border-radius: 100% !important; 150 | padding: 6px !important; 151 | height: 28px !important; 152 | width: 28px !important; 153 | color: #f9f9fb !important; 154 | background-color: rgba(80,80,80,0.1) !important; 155 | 156 | transition-property: background-color; 157 | transition-duration: 0.5s; 158 | 159 | } 160 | 161 | .bookmark-item:hover > .toolbarbutton-icon 162 | { 163 | background-color: rgba(100,100,100,0.9) !important; 164 | } 165 | 166 | .bookmark-item:active 167 | { 168 | color: rgba(160,160,160,0.9) !important; 169 | } 170 | 171 | #tabs-newtab-button .toolbarbutton-icon { 172 | border-radius: 30px !important; 173 | 174 | transition-property: background-color; 175 | transition-duration: 0.5s; 176 | } 177 | 178 | #tabs-newtab-button:hover .toolbarbutton-icon { 179 | background-color: rgba(130,130,130,0.5) !important; 180 | } 181 | 182 | #tabs-newtab-button:active .toolbarbutton-icon { 183 | background-color: rgba(180,180,180,0.7) !important; 184 | color: rgba(110,110,110,0.7) !important; 185 | } 186 | 187 | .toolbarbutton-badge-stack{ 188 | border-radius: 30px !important; 189 | } 190 | 191 | #tracking-protection-icon-container{ 192 | border-radius: 30px !important; 193 | } 194 | 195 | #identity-icon-box{ 196 | border-radius: 30px !important; 197 | } 198 | 199 | #identity-permission-box{ 200 | border-radius: 30px !important; 201 | } 202 | 203 | #star-button-box{ 204 | border-radius: 30px !important; 205 | } 206 | 207 | #reload-button{ 208 | border-radius: 30px !important; 209 | } 210 | 211 | #notification-popup-box{ 212 | border-radius: 30px !important; 213 | } 214 | 215 | #back-button:hover{ 216 | border-radius: 30px !important; 217 | } 218 | 219 | #forward-button:hover{ 220 | border-radius: 30px !important; 221 | } 222 | 223 | #PlacesToolbarItems { 224 | display: flex !important; 225 | justify-content: center !important; 226 | } 227 | 228 | tab[pending], #alltabs-popup menuitem[pending] { 229 | background-color: rgba(80, 80, 80,0.3) !important; 230 | border-radius: 30px !important; 231 | } 232 | --------------------------------------------------------------------------------