:root{ --dark-0: #1A1E28; --dark-base: #1F2430; --dark-1: #2A3141; --dark-2: #323A4E; --dark-3: #424D67; --dark-4: #4A5673; --light-0: #E8E7E3; --light-base: #CCCAC2; --light-1: #C3C0B7; --light-2: #B9B7AC; --light-3: #B0ADA0; --light-4: #A7A395; --accent: #FFCC66; --yellow: #695380; --green: #D5FF80; --red: #f28779; --extension-icon-mask: grayscale(85%) invert(30%) sepia(13%) saturate(1019%) hue-rotate(184deg) brightness(95%) contrast(96%); } :root.incognito{ --dark-0: #1C0E34; --dark-base: #20103c; --dark-1: #2F1D4E; --dark-2: #38225D; --dark-3: #4A2D7B; --dark-4: #53338A; --light-0: #CC6B9C; --light-base: #B9407C; --light-1: #AB3B73; --light-2: #9C3569; --light-3: #8D305E; --light-4: #7D2B54; --accent: #e9207e; --yellow: #C9B336; --green: #36C987; --red: #C9365D; --extension-icon-mask: grayscale(85%) invert(17%) sepia(33%) saturate(3632%) hue-rotate(245deg) brightness(92%) contrast(90%); } :root{ --tab-border-radius: 7px; /* border radius of tabs */ --animation-duration: 200ms; /* duration of different animations [0s: turn all animations off] */ --spacing: 14px; /* spacing between tabs. [<15px: compact tabs] */ --distance-from-edge: 10px; /* distance between tabs, and left-right edges of sidebar*/ --hover-text-spacing: 0.1; /* should be left alone. with hover sidebar, if text is visible in collapsed status, increase this */ --ease-in: cubic-bezier(0.32, 0, 0.67, 0); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --collapsed-width: 60px; } /************UNCUSTOMIZED CSS************/ #tabbar-container #tabbar{ margin-bottom: 15px !important; } :root, #background{ background: var(--dark-base) !important; } #all-tabs{ margin: 10px var(--distance-from-edge); } tab-item:not(.collapsed) { margin-top: var(--spacing); border-radius: var(--tab-border-radius); border: none !important; padding-top: 9px; padding-bottom: 10px; } tab-item.collapsed{ height: 0; margin: 0 !important; padding: 0 !important; } tab-item:not([data-level="0"]):not(.pinned){ border-left: dashed 2px var(--light-4) !important; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-top: calc(var(--spacing)/2); } tab-item tab-favicon{ left: 0; filter: var(--extension-icon-mask); transition: left calc(var(--animation-duration)*2) var(--ease-out); } .highlighter { display: none !important; } tab-item .label { color: var(--light-2) !important; padding-bottom: 2px; } tab-item .twisty:before{ background: var(--light-3) !important; } tab-item.active .label { color: var(--light-0) !important; } tab-item.active { background: var(--dark-3) !important; } tab-item:not(.active).highlighted{ background: var(--dark-1) !important; } tab-item:not(active):hover { background: var(--dark-1); } tab-item:hover tab-closebox { right: 10px; opacity: 1; } tab-item:not(pinned) tab-closebox { position: absolute; margin-top: 2px; height: 20px; width: 20px; right: -30px; border-radius: 50%; padding-top: 2px; padding-left: 2px; background: var(--light-4); transition : all var(--animation-duration) var(--ease-out); } .sound-button:after { background: var(--light-3) !important; margin-top: 2px; } .counter{ color: var(--light-4) !important; background: var(--dark-2) !important; border-radius: 7px; margin: 2px 2px 0px 0px; padding: 0 4px; padding-bottom: 2px; order: -2 !important; } .counter:before, .counter:after{ content: ""} /********LEFT CONTENT TAB(static)*************/ :root.left tab-item{ padding-left: 0; } :root.left tab-item tab-favicon { transform: scale(120%); margin-right: 5px; left: 80%; } :root.left tab-item .label { transform: translateX(10px); right: 28%; } :root.left tab-item[data-child-ids] .twisty{ margin-right: 5px; } /********RIGHT CONTENT TAB(hover)*************/ :root.right tab-item .label { margin-left: 10px; margin-right: calc(var(--collapsed-width)*0.3) !important; } :root.right tab-item:not(pinned):hover tab-closebox{ right: calc(var(--collapsed-width)*0.3); } :root.right tab-item:not([data-level="0"]):not(.pinned){ border: none !important; border-right: dashed 2px var(--light-4) !important; border-radius: var(--tab-border-radius); border-top-right-radius: 0; border-bottom-right-radius: 0; } :root.right tab-item.active:not([data-level="0"]):not(.pinned){ margin-right: 5px !important; } :root.right .sound-button{ order: -1 !important; } :root.right tab-item.active.pinned { position: relative; left: 190px !important; } :root.right tab-item.active.pinned tab-favicon { transform: scale(130%) !important; margin-left: 7px; } /***********************************/ .tab .favicon .favicon-default::before { filter: var(--extension-icon-mask); // change for light theme } .tab[data-current-favicon-uri="undefined"] .favicon .favicon-default::before{ background: url("chrome://branding/content/identity-icons-brand.svg") no-repeat center !important; mask: none !important; } /***********NEW TAB BUTTON**********/ .newtab-button-box { border: none !important; margin: 0 50px; } .newtab-button { border: none !important; border-radius: 8px; padding: 8px 0 !important; margin: 0 5px; } .newtab-button::before{ background: var(--light-3) !important; } .newtab-action-selector-anchor { border: none !important; margin-right: 10px; margin-top: 3px; } .newtab-button:hover { background: var(--dark-1); } /**********PINNED TAB***************/ tab-item.pinned { margin: 5px !important; padding: 5px !important; transition : all 0.1s var(--ease-out); } /***********************************/ #all-tabs { border: none !important; }