Initial Commit!

1 files changed, 194 insertions, 0 deletions

diff --git a/treeStyleTabs.css b/treeStyleTabs.css
new file mode 100644
index 0000000..1a63270
--- /dev/null
+++ b/treeStyleTabs.css
@@ -0,0 +1,194 @@
+/*
+ * Tree Style Tabs - Photon Theme (Customized)
+ * Based on official TST Photon theme
+ *
+ * Custom colors:
+ * - Background: rgba(0, 54, 54, 0.3)
+ * - Active/Focused tab: rgba(0, 67, 68, 0.3)
+ */
+
+/* ═══════════════════════════════════════════════════════════════════
+   🎨 COLOR VARIABLES
+   ═══════════════════════════════════════════════════════════════════ */
+
+:root {
+  --toolbar-non-lwt-bgcolor: var(--in-content-page-background);
+  --toolbar-non-lwt-textcolor: var(--in-content-page-color);
+
+  --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor));
+  --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface));
+  --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
+  --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor));
+  --tab-text-active: var(--tab-text);
+  --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor);
+  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed)));
+  --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-box-background-hover)));
+  --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, var(--in-content-button-background-mixed)));
+  --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, var(--in-content-button-background-active-mixed)));
+  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));
+  --throbber-color: var(--browser-loading-indicator, var(--tab-text));
+  --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active));
+
+  --tabbar-bg: light-dark(
+    var(--browser-bg-darker, darkgray),
+    var(--browser-bg-darker, var(--dark-frame))
+  );
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   🌳 CUSTOM BACKGROUND COLOR
+   ═══════════════════════════════════════════════════════════════════ */
+
+:root,
+body,
+#background {
+  background-color: rgba(0, 54, 54, 1) !important;
+  background-image: var(--browser-bg-images, none);
+  background-position: var(--browser-bg-position, left);
+  background-size: var(--browser-bg-size, auto);
+  background-repeat: var(--browser-bg-repeat, none);
+}
+
+:root.right,
+:root.right #background {
+  background-position: right;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   📑 TAB STYLING
+   ═══════════════════════════════════════════════════════════════════ */
+
+tab-item,
+.after-tabs button,
+.after-tabs [role="button"],
+#subpanel-container,
+#dummy-tab-color-box {
+  --tab-surface: var(--tab-surface-regular);
+  --tab-text: var(--tab-text-regular);
+  --tab-text-shadow: var(--browser-textshadow-for-header-image, none);
+}
+
+tab-item-substance,
+.after-tabs button,
+.after-tabs [role="button"],
+#subpanel-container,
+#dummy-tab-color-box {
+  background: var(--tab-surface);
+  color: var(--tab-text);
+  text-shadow: var(--tab-text-shadow);
+}
+
+tab-item * {
+  color: var(--tab-text);
+}
+
+tab-item:not(.active) tab-item-substance:hover,
+.after-tabs button:hover,
+.after-tabs [role="button"]:hover {
+  --tab-surface: var(--tab-surface-hover);
+  --tab-text: var(--tab-text-regular);
+}
+
+#subpanel-selector-anchor:hover {
+  background: var(--tab-surface-hover);
+  color: var(--tab-text-regular);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   ⭐ ACTIVE/FOCUSED TAB - CUSTOM COLOR
+   ═══════════════════════════════════════════════════════════════════ */
+
+tab-item.active {
+  --tab-surface: rgba(0, 67, 68, 0.3) !important;
+  --throbber-color: var(--throbber-color-active);
+  --tab-text: var(--tab-text-active);
+  --tab-text-inverted: var(--tab-text-active-inverted);
+}
+
+tab-item.bundled-active,
+tab-item.active tab-item-substance:hover {
+  --tab-surface: rgba(0, 67, 68, 0.3) !important;
+}
+
+tab-item.active tab-item-substance {
+  background: rgba(0, 67, 68, 1) !important;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   🎯 TAB CLOSE BUTTON
+   ═══════════════════════════════════════════════════════════════════ */
+
+tab-closebox {
+  background: none transparent;
+  border: none 0 transparent;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0.1em;
+  padding-inline: 0.1em;
+}
+
+tab-item .burster {
+  --throbber-color: var(--tab-loading-fill);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   💫 DROP SHADOWS
+   ═══════════════════════════════════════════════════════════════════ */
+
+:root {
+  --shadow-color: rgba(0, 0, 0, 0.04);
+  --shadow-blur: 0.2em;
+}
+
+:root.left tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance {
+  box-shadow: -0.3em 0.3em var(--shadow-blur) var(--shadow-color);
+}
+
+:root.right tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance {
+  box-shadow: 0.3em 0.3em var(--shadow-blur) var(--shadow-color);
+}
+
+.after-tabs button,
+.after-tabs [role="button"] {
+  box-shadow: 0 0.3em var(--shadow-blur) var(--shadow-color);
+}
+
+:root.left #tabbar {
+  box-shadow: inset -0.2em 0.2em var(--shadow-blur) var(--shadow-color);
+}
+
+:root.right #tabbar {
+  box-shadow: inset 0.2em 0.2em var(--shadow-blur) var(--shadow-color);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   📚 Z-INDEX MANAGEMENT
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Transparent tabs are shown above solid tabs.
+   We have to set z-index to show all tabs in the same layer. */
+tab-item {
+  z-index: auto;
+}
+
+.after-tabs button,
+.after-tabs [role="button"] {
+  z-index: 100;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   📋 SCROLLBAR STYLING
+   ═══════════════════════════════════════════════════════════════════ */
+
+#tabbar:not(.scrollbar-autohide) #pinned-tabs-container,
+#tabbar:not(.scrollbar-autohide) #normal-tabs-container {
+  scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed)))
+                   var(--theme-colors-toolbar, var(--in-content-box-background));
+}