├── TreeStyleTab.css ├── bindings.xml ├── userChrome.css └── userContent.css /TreeStyleTab.css: -------------------------------------------------------------------------------- 1 | /* TreeStyleTab.css */ 2 | 3 | /* Hide border on tab bar, force its state to 'scroll', adjust margin-left for width of scrollbar. */ 4 | #tabbar { 5 | border: 0; 6 | scrollbar-width: none; 7 | } 8 | /* Remove space before child tabs when sidebar collapsed. */ 9 | /* (I'd prefer for them to be at -1px, but I don't know how to target child tabs specifically.) */ 10 | #tabbar:not(:hover) .tab { 11 | margin-left: 0; 12 | } 13 | 14 | /* Hide .twisty and adjust margins so favicons have 7px on left. */ 15 | .tab .twisty { 16 | visibility: hidden; 17 | margin-left: -12px; 18 | } 19 | 20 | /* Push tab labels slightly to the right so they're completely hidden in collapsed state, but still look fine while expanded. */ 21 | .tab .label { 22 | margin-left: 7px; 23 | } 24 | 25 | /* Hide close buttons on tabs. */ 26 | .tab .closebox { 27 | visibility: collapse; 28 | } 29 | 30 | /* Hide sound playing/muted button. */ 31 | .sound-button { 32 | display: none !important; 33 | } 34 | 35 | /* Hide 'new tab' button. */ 36 | .newtab-button { 37 | display: none; 38 | } 39 | 40 | 41 | 42 | /* ##### THEME ############################################ */ 43 | @keyframes pulse { 44 | 0% { 45 | width: 0px; 46 | height: 0px; 47 | opacity: 1; 48 | } 49 | 100% { 50 | width: 350px; 51 | height: 350px; 52 | opacity: 0; 53 | top: calc(50% - 175px); 54 | left: calc(50% - 175px); 55 | } 56 | } 57 | 58 | 59 | 60 | #tabbar { 61 | border-right: 1px solid #1d1d1d; 62 | box-shadow: none !important; 63 | background-color: #383838; 64 | } 65 | 66 | 67 | 68 | .tab { 69 | background-color: transparent; 70 | border-color: #292929; 71 | box-shadow: none !important; 72 | } 73 | .tab .label { 74 | color: rgba(207,207,207,0.75) !important; 75 | } 76 | .tab:hover { 77 | background-color: #404040 !important; 78 | } 79 | .tab:hover .label { 80 | color: rgba(207,207,207,1) !important; 81 | } 82 | 83 | 84 | 85 | /* pending / unloaded tabs */ 86 | .tab.discarded { 87 | background-color: #1d1d1d; 88 | } 89 | .tab.discarded .label { 90 | color: rgba(207,207,207,0.25) !important; 91 | } 92 | .tab.discarded:hover { 93 | background-color: #292929 !important; 94 | } 95 | 96 | 97 | 98 | /* active tab */ 99 | .tab.active { 100 | background-color: #8fa876; 101 | } 102 | .tab.active .label { 103 | font-weight: bold; 104 | color: rgba(207,207,207,1) !important; 105 | } 106 | .tab.active:hover { 107 | background-color: #8fa876 !important; 108 | } 109 | 110 | 111 | 112 | /* Adjust style for tab that has sound playing. */ 113 | .tab.sound-playing .favicon::after { 114 | content: ''; 115 | position: absolute; 116 | top: 50%; 117 | left: 50%; 118 | border-radius: 50%; 119 | background: #FFFFFF; 120 | animation: pulse 2s ease-out 0s infinite; 121 | z-index: -1; 122 | opacity: 0; 123 | } 124 | 125 | /* Adjust style for tab that is muted. */ 126 | .tab.muted { 127 | opacity: 0.5; 128 | } 129 | -------------------------------------------------------------------------------- /bindings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /userChrome.css: -------------------------------------------------------------------------------- 1 | /* userChrome.css */ 2 | 3 | /* ##### TABS TOOLBAR ##################################### */ 4 | 5 | /* Hide main tabs toolbar */ 6 | #TabsToolbar { 7 | visibility: collapse; 8 | } 9 | 10 | 11 | 12 | /* ##### URL BAR ########################################## */ 13 | 14 | /* Hide (i) in URL bar */ 15 | #identity-icon { 16 | width: 0 !important; 17 | } 18 | /* Adjust lock icon to be closer to edge */ 19 | #identity-box { 20 | padding-inline-start: 2px !important; 21 | } 22 | /* Custom bindings.xml in same folder as userChrome, for simple URL */ 23 | /* CURRENTLY DOES NOT WORK, so commented-out. */ 24 | /* 25 | #urlbar { 26 | -moz-binding: url("bindings.xml#urlbar") !important; 27 | } 28 | */ 29 | 30 | /* Center URL */ 31 | #urlbar-input { 32 | text-align: center; 33 | margin-bottom: 1px; 34 | } 35 | /* Bookmark padding */ 36 | toolbarbutton.bookmark-item:not(.subviewbutton) { 37 | padding: 1px 6px !important; 38 | } 39 | /* Get rid of bookmark icon */ 40 | .bookmark-item .toolbarbutton-icon { 41 | display: none; 42 | } 43 | 44 | 45 | 46 | /* ##### SIDEBAR ########################################## */ 47 | 48 | /* Sidebar min and max width removal */ 49 | #sidebar { 50 | max-width: none !important; 51 | min-width: 0px !important; 52 | } 53 | 54 | 55 | 56 | /* Remove below if not using TreeStyleTab extension */ 57 | /* replace "treestyletab_piro_sakura_ne_jp-sidebar-action" 58 | with "_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action" 59 | if using Tab Center Redux */ 60 | 61 | /* Hide splitter */ 62 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter { 63 | display: none !important; 64 | } 65 | /* Hide sidebar header */ 66 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { 67 | visibility: collapse; 68 | } 69 | 70 | /* Shrink sidebar until hovered */ 71 | :root { 72 | --thin-tab-width: 30px; 73 | --wide-tab-width: 300px; 74 | } 75 | #sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) { 76 | min-width: var(--wide-tab-width) !important; 77 | max-width: none !important; 78 | } 79 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { 80 | overflow: hidden !important; 81 | position: relative !important; 82 | transition: all 200ms !important; 83 | min-width: var(--thin-tab-width) !important; 84 | max-width: var(--thin-tab-width) !important; 85 | z-index: 2; 86 | } 87 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover, 88 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar { 89 | transition: all 200ms !important; 90 | min-width: var(--wide-tab-width) !important; 91 | max-width: var(--wide-tab-width) !important; 92 | z-index: 1; 93 | } 94 | #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover { 95 | margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important; 96 | } 97 | -------------------------------------------------------------------------------- /userContent.css: -------------------------------------------------------------------------------- 1 | /* Clear the background of transparent images. */ 2 | /* Firefox made the background of stand-alone 3 | transparent images white, I guess to counter 4 | some images having the same color as the 5 | background. I never had that problem, and 6 | I like my transparent images transparent, 7 | so this reverses that. */ 8 | img.transparent { 9 | background: transparent !important; 10 | } 11 | 12 | /* ##### DARK 'ABOUT' PAGES ##################### */ 13 | @-moz-document url('about:blank'), url('about:newtab') { 14 | body { 15 | background-color: #383838 !important; 16 | } 17 | } 18 | 19 | 20 | /* Netflix subtitles */ 21 | @-moz-document url-prefix('https://www.netflix.com/watch/') { 22 | .player-timedtext-text-container { 23 | background-color: rgba(0,0,0,0.8) !important; 24 | padding: 6px 12px; 25 | border-radius: 6px; 26 | } 27 | .player-timedtext-text-container span { 28 | text-shadow: none !important; 29 | -webkit-font-smoothing: antialiased !important; 30 | } 31 | } 32 | --------------------------------------------------------------------------------