|
|
## Plasma 5's Breeze
|
|
|
A theme with autoshrinking sidebar showing just the favicons, with neat integration with Plasma's Breeze window decorations.
|
|
|
|
|
|
This theme assumes that you use Firefox 57+ with Dark theme, Compact density and that you set Breeze Dark as a window decoration theme for Firefox (personally I'm using Breeze everywhere, but have Breeze Dark override for Firefox, as it looks better there). Also, in Tab Center Redux's settings you should toggle the dark theme on.
|
|
|
|
|
|
<a href="https://dosowisko.net/Screenshot_20171030_203716.png" target="_blank" rel="noopener"><img src="https://dosowisko.net/Screenshot_20171030_203716.png" width="49%" /></a>
|
|
|
<a href="https://dosowisko.net/Screenshot_20171030_203804.png" target="_blank" rel="noopener"><img src="https://dosowisko.net/Screenshot_20171030_203804.png" width="49%" /></a>
|
|
|
|
|
|
### [CSS Code:](#for-tab-center-redux)
|
|
|
|
|
|
<details>
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
|
|
|
```css
|
|
|
/* Plasma 5's Breeze */
|
|
|
body.dark-theme {
|
|
|
--tab-background-normal: hsl(210, 9.289%, 21.045%);
|
|
|
--tab-background-pinned: hsl(210, 9.289%, 21.045%);
|
|
|
--tab-background-active: hsl(221, 41.4%, 53.1%);
|
|
|
--tab-background-hover: hsl(222, 28.3%, 35.55%);
|
|
|
--tab-border-color: hsla(0, 0%, 0%, 0.06);
|
|
|
--menu-background: hsl(210, 9.289%, 21.045%);
|
|
|
}
|
|
|
#pinnedtablist {
|
|
|
box-shadow: 0px 1px 0px hsla(0, 0%, 0%, 0.2);
|
|
|
z-index: 1;
|
|
|
}
|
|
|
#pinnedtablist .tab:last-of-type {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
#newtab {
|
|
|
margin-left: -1px;
|
|
|
}
|
|
|
#newtab-icon {
|
|
|
margin-right: 8px !important;
|
|
|
}
|
|
|
#searchbox {
|
|
|
padding: 0px;
|
|
|
}
|
|
|
#newtab-label {
|
|
|
margin-left: 0px;
|
|
|
}
|
|
|
#newtab-label.hidden {
|
|
|
display: block !important;
|
|
|
width: 0px;
|
|
|
margin-right: -10px;
|
|
|
}
|
|
|
.tab-context {
|
|
|
height: calc(100% + 1px);
|
|
|
position: relative;
|
|
|
top: 0.5px;
|
|
|
}
|
|
|
#pinnedtablist .tab:last-of-type .tab-context {
|
|
|
height: 100%;
|
|
|
top: 0px;
|
|
|
}
|
|
|
|
|
|
/* Loading burst */
|
|
|
.tab-loading-burst, .tab-loading-burst:before {
|
|
|
display: block;
|
|
|
}
|
|
|
body.dark-theme .tab:not(.active) .tab-loading-burst.bursting::before {
|
|
|
filter: invert(100%);
|
|
|
}
|
|
|
```
|
|
|
</details>
|
|
|
|
|
|
### [userChrome.css](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin):
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
```css
|
|
|
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
|
|
|
|
|
|
#main-window {
|
|
|
--toolbar-bgcolor: #31363b !important;
|
|
|
}
|
|
|
|
|
|
#tabbrowser-tabs {
|
|
|
visibility: collapse !important;
|
|
|
}
|
|
|
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] {
|
|
|
overflow: hidden;
|
|
|
min-width: 32px;
|
|
|
max-width: 32px;
|
|
|
position: fixed;
|
|
|
top: 36px;
|
|
|
transition: all 0.2s ease;
|
|
|
border-right: 1px solid #0c0c0d;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]:hover,
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar {
|
|
|
min-width: 260px !important;
|
|
|
max-width: 260px !important;
|
|
|
}
|
|
|
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header, #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] ~ #sidebar-splitter {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header {
|
|
|
background-color: #31363b;
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
|
|
|
/*
|
|
|
* ADJUST!
|
|
|
* You need to subtract the height of the panels above sidebar: nav bar,
|
|
|
* bokmarks bar, sidebar header, etc. -- whichever you have enabled.
|
|
|
*
|
|
|
* 36px subtracted below is the height of the nav bar with default theme.
|
|
|
* I don't have bookmarks bar enabled, and sidebar header is hidden with
|
|
|
* CSS above, so this is all I need to do.
|
|
|
*/
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar {
|
|
|
height: calc(100vh - 36px);
|
|
|
}
|
|
|
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"]:not([hidden="true"]) ~ #sidebar-splitter ~ #appcontent {
|
|
|
margin-left: 32px;
|
|
|
}
|
|
|
|
|
|
#main-window[inFullscreen] #appcontent {
|
|
|
margin-left: 0 !important;
|
|
|
}
|
|
|
|
|
|
#main-window[privatebrowsingmode="temporary"] #TabsToolbar, #main-window[inFullscreen] #TabsToolbar {
|
|
|
background-color: #11161b;
|
|
|
}
|
|
|
#main-window[privatebrowsingmode="temporary"] #tabbrowser-tabs, #main-window[inFullscreen] #tabbrowser-tabs {
|
|
|
visibility: visible !important;
|
|
|
}
|
|
|
#main-window[inFullscreen][inDOMFullscreen] #tabbrowser-tabs {
|
|
|
visibility: collapse !important;
|
|
|
}
|
|
|
#main-window[inFullscreen] #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] {
|
|
|
display: none !important;
|
|
|
}
|
|
|
#navigator-toolbox > toolbar:not(#TabsToolbar):not(#toolbar-menubar), .browserContainer > findbar, #browser-bottombox, #toolbar-menubar {
|
|
|
background-color: #31363b !important;
|
|
|
}
|
|
|
#nav-bar-customization-target {
|
|
|
margin: 0px 2px;
|
|
|
}
|
|
|
#window-controls {
|
|
|
filter: invert(75%);
|
|
|
}
|
|
|
#nav-bar toolbarpaletteitem[id^="wrapper-customizableui-special-spring"], #nav-bar toolbarspring {
|
|
|
-moz-box-flex: 1 !important;
|
|
|
}
|
|
|
.findbar-button:hover {
|
|
|
color: #ddd !important;
|
|
|
}
|
|
|
.findbar-button[checked="true"]:not(:hover) {
|
|
|
color: white !important;
|
|
|
}
|
|
|
:root[uidensity="compact"] #nav-bar[brighttext] > #PanelUI-button {
|
|
|
border-image-source: linear-gradient(transparent 4px, rgba(100%,100%,100%,.2) 4px, rgba(100%,100%,100%,.2) calc(100% - 4px), transparent calc(100% - 4px));
|
|
|
}
|
|
|
:root[uidensity="compact"] #PanelUI-button {
|
|
|
margin-inline-start: 3px;
|
|
|
border-inline-start: 1px solid;
|
|
|
border-image: linear-gradient(transparent 4px, rgba(0,0,0,.1) 4px, rgba(0,0,0,.1) calc(100% - 4px), transparent calc(100% - 4px));
|
|
|
border-image-source: linear-gradient(transparent 4px, rgba(0, 0, 0, 0.1) 4px, rgba(0, 0, 0, 0.1) calc(100% - 4px), transparent calc(100% - 4px));
|
|
|
border-image-slice: 100%;
|
|
|
border-image-slice: 1;
|
|
|
}
|
|
|
```
|
|
|
</details>
|
|
|
|
|
|
## JZersche's zDark Theme
|
|
|
A dark theme with azure accents with autoshrinking sidebar showing just the favicons, hidden scrollbar.
|
|
|
Mozilla Firefox 57.0b11 (Developer Edition)
|
|
|
|
|
|
**Visit [JZersche's zTCR Wiki Page](https://github.com/JZersche/mozilla-zdark-tcr/wiki/CSS-Tweaks-%E2%94%80-TCR-v0.6.0) for more information.**
|
|
|
|
|
|
**Note:** _**Use [Tab Center Redux 0.6.0](https://addons.mozilla.org/en-US/firefox/addon/tab-center-redux/versions/0.6.0) ─ CSS displays improperly with later versions.**_
|
|
|
|
|
|
This theme assumes that you use Firefox 57+ with the Dark theme enabled,
|
|
|
In the Tab Center Redux's settings, Enable the dark theme, and set Compact to 'Always'.
|
|
|
|
|
|
**Update 2018-12-25 | Tested and Working with Firefox Nightly 57.0b11 ─> 65.0b6**
|
|
|
**May work with older/newer versions also.**
|
|
|
|
|
|
### [Install](https://github.com/JZersche/mozilla-zdark-tcr/tree/modern)
|
|
|
[Flat](https://github.com/JZersche/mozilla-zdark-tcr/tree/flat) |
|
|
|
[Modern](https://github.com/JZersche/mozilla-zdark-tcr/tree/modern) |
|
|
|
[Modern (Large Tabs)](https://github.com/JZersche/mozilla-zdark-tcr/tree/Modern-(Large))
|
|
|
|
|
|
<br><a href="https://github.com/JZersche/mozilla-zdark-tcr/tree/flat" target="_blank" rel="noopener"><img src="https://i.imgur.com/ew9ZjNz.png" width="49%" /></a>
|
|
|
<a href="https://github.com/JZersche/mozilla-zdark-tcr/tree/modern" target="_blank" rel="nopener"><img src="https://i.imgur.com/cQfSbF4.png" width="49%" /></a>
|
|
|
|
|
|
Note: Close tabs by moving the cursor to the end of the tab and clicking. The close tab button is _hidden_.
|
|
|
|
|
|
|
|
|
## JZersche's Dark Context Menus
|
|
|
<details>
|
|
|
<summary>Show/Hide Info</summary>
|
|
|
Changes the Context Menus to match the Dark Theme.<br />
|
|
|
**2018-03-06 | Tested and Working with Firefox Developer Edition 60.0b1**
|
|
|
|
|
|
[Install (Opaque)](https://github.com/JZersche/mozilla-zdark-tcr/blob/master/Dark%20Context%20Menus.css)
|
|
|
| [(Transparency)](https://github.com/JZersche/mozilla-zdark-tcr/blob/master/Dark%20Context%20Menus%20(Translucent).css) | [(Blue)](https://github.com/JZersche/mozilla-zdark-tcr/blob/master/Azure%20Context%20Menus%20(Blue).css) | [(RGB Easy Edit)](https://github.com/JZersche/mozilla-zdark-tcr/edit/master/RGB%20Context%20Menus.css)<br />
|
|
|
**_Use the RGB Version if you want to set your own colors._**
|
|
|
|
|
|
### Hide Right-Click Context Menu Icons
|
|
|
`#contentAreaContextMenu > :-moz-any(menuitem,menu) > .menu-iconic-left {visibility:hidden!important;}`
|
|
|
<br>Add this to your userChrome.css file.<br><br><b>Note: This only hides icons on the right-click menu.</b><br><br>
|
|
|
`--uc-light-bkgnd-color:#31363b;` ─ Determines Context Menu Background Color.
|
|
|
<br>Use #064e9d for Blue ─ Add 99 to the end for transparency.
|
|
|
<br>Use #31363b for Dark ─ Add 99 to the end for transparency.
|
|
|
<br><a href="#" target="_blank" rel="noopener"><img src="https://i.imgur.com/4qvQ8Pu.png" width="98%" /></a>
|
|
|
</details>
|
|
|
|
|
|
## wwalther's Minimal Light Theme
|
|
|
|
|
|
An extremely minimal adaption to match the default light theme of Firefox.
|
|
|
|
|
|
<a href="#" target="_blank" rel="noopener"><img src="https://i.imgur.com/zWeq2GM.png" width="49%" /></a>
|
|
|
<a href="#" target="_blank" rel="noopener"><img src="https://i.imgur.com/r1359qP.png" width="49%" /></a>
|
|
|
|
|
|
### Recommended Settings
|
|
|
```
|
|
|
Firefox (Hamburger Menu) >> Customize >> Themes >> Light
|
|
|
FireFox (Hamburger Menu) >> Customize >> Density >> Compact
|
|
|
Tab Center Redux >> Settings >> Compact Mode : Always
|
|
|
```
|
|
|
|
|
|
**Move the Tab Redux Icon to the left most position on the main toolbar.**<br>
|
|
|
**Insert a flexible space to the right side of it.**
|
|
|
|
|
|
### [CSS Code:](#for-tab-center-redux)
|
|
|
|
|
|
<details>
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
```css
|
|
|
#tablist-wrapper.shrinked .tab:not(.pinned)
|
|
|
{
|
|
|
height: 32px !important;
|
|
|
}
|
|
|
.tab[notselectedsinceload="true"]
|
|
|
{
|
|
|
font-style: italic;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
</details>
|
|
|
|
|
|
### [userChrome.css](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Modifying_the_Default_Skin):
|
|
|
|
|
|
|
|
|
<details>
|
|
|
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
```css
|
|
|
@-moz-document url("chrome://browser/content/browser.xul")
|
|
|
{
|
|
|
#titlebar-buttonbox
|
|
|
{
|
|
|
height: 32px !important;
|
|
|
}
|
|
|
#titlebar
|
|
|
{
|
|
|
margin-bottom: -32px !important;
|
|
|
}
|
|
|
#nav-bar
|
|
|
{
|
|
|
margin-right: 138px;
|
|
|
height: 32px !important;
|
|
|
-moz-box-ordinal-group: 1 !important;
|
|
|
}
|
|
|
#TabsToolbar
|
|
|
{
|
|
|
-moz-box-ordinal-group: 4 !important;
|
|
|
visibility: collapse !important;
|
|
|
}
|
|
|
#toolbar-menubar
|
|
|
{
|
|
|
-moz-box-ordinal-group: 3 !important;
|
|
|
}
|
|
|
#PersonalToolbar
|
|
|
{
|
|
|
-moz-box-ordinal-group: 2 !important;
|
|
|
}
|
|
|
#sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] #sidebar-header
|
|
|
{
|
|
|
visibility: collapse;
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
|
## Tobia's Dark Theme Origin
|
|
|
|
|
|
A simple dark theme that takes the look back to Test Pilot v1.21
|
|
|
|
|
|
<img src="https://i.imgur.com/NLAECgI.png">
|
|
|
|
|
|
### Recommended Extensions
|
|
|
|
|
|
[**Owl**](http://owl.sidhant.io/), to apply a dark theme to the website contents.
|
|
|
|
|
|
### Recommended Settings
|
|
|
|
|
|
- Tab Center Redux > Settings > Dark Theme: Yes
|
|
|
- Tab Center Redux > Settings > Integrate with current theme: No
|
|
|
- Tab Center Redux > Settings > Compact mode: Always
|
|
|
|
|
|
### Custom Stylesheet
|
|
|
|
|
|
<details>
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
#topmenu { display: none }
|
|
|
.tab-close { width: 34px; height: 34px; right: 0; border-radius: 0 }
|
|
|
.tab-close:hover { background-color: #3ff !important; filter: invert(100%); cursor: pointer }
|
|
|
.tab-icon { filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="s"><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.2125 -0.7154 -0.0721 1 0" /><feComponentTransfer><feFuncA type="gamma" offset="0" amplitude="3" exponent="0.5"/></feComponentTransfer><feGaussianBlur stdDeviation="1"/><feComposite in="SourceGraphic" operator="over"/></filter></svg>#s') }
|
|
|
|
|
|
// remove the following 2 lines to get larger tabs
|
|
|
.tab { height: 29px !important }
|
|
|
.tab-close { width: 29px; height: 29px }
|
|
|
|
|
|
</details>
|
|
|
|
|
|
### UserChrome.css
|
|
|
|
|
|
<details>
|
|
|
<summary>Show/Hide CSS</summary>
|
|
|
|
|
|
#sidebar-header { display: none }
|
|
|
#tabbrowser-tabs { visibility: collapse }
|
|
|
|
|
|
</details> |
|
|
\ No newline at end of file |