Mixed theme (patch for the theme "Photon")

The "Mixed" theme was removed at TST 3.5.23. You can use it as a user style. Please see the description how to use this also.

This style declarations include only color definitions, so you need to choose the theme "Photon" to use this effectively.

/* Vertigo colors */

/* ***** BEGIN LICENSE BLOCK ***** 
 * Version: MPL 1.1
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * The Original Code is the Tree Style Tab.
 *
 * The Initial Developer of the Original Code is YUKI "Piro" Hiroshi.
 * Portions created by the Initial Developer are Copyright (C) 2007-2019
 * the Initial Developer. All Rights Reserved.
 *
 * Contributor(s): YUKI "Piro" Hiroshi <piro.outsider.reflex@gmail.com>
 *                 lv7777 (https://github.com/lv7777)
 *
 * ***** END LICENSE BLOCK ******/

:root {
  --toolbar-non-lwt-bgcolor: var(--grey-10);
  --toolbar-non-lwt-textcolor: var(--grey-90);
  --toolbar-non-lwt-inverted-textcolor: white;
  --toolbar-non-lwt-border-color: var(--grey-40);

  --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-lighter, var(--toolbar-non-lwt-inverted-textcolor));
  --tab-active-text: var(--browser-fg-active, var(--toolbar-non-lwt-textcolor));
  --tab-active-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-inverted-textcolor));
  --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--toolbar-non-lwt-border-color)));
  --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor));

  --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #e0e8f6 /* #grey-10 - #191104, (parseInt('f9f9fa', 16) - parseInt('191104', 16)).toString(16) */));
  --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #c1d2ee /* #grey-10 - #38270c, (parseInt('f9f9fa', 16) - parseInt('38270c', 16)).toString(16) */));
  --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #d1e2fe /* #grey-10 - #281600 + #000004, (parseInt('f9f9fa', 16) - parseInt('281600', 16) + parseInt('000004', 16)).toString(16) */));

  --tab-highlighted-highlight: var(--toolbar-non-lwt-inverted-textcolor);
  --tab-highlighted-glow: #3890f3; /* = rgb(56, 144, 243) */
  --tab-highlighted-base: var(--tab-surface);

  --throbber-color: var(--browser-loading-indicator, var(--browser-bg-lightest, var(--tab-highlighted-glow)));
  --throbber-color-active: var(--browser-loading-indicator, var(--tab-highlighted-glow));

  --multiselected-color-opacity: 0.25;
}

:root,
#background {
  background-color: var(--browser-background, var(--tab-surface));
  background-image: var(--browser-bg-url, var(--browser-header-url, none));
  background-position: left;
  background-size: var(--browser-background-image-size, auto);
}
:root.right,
:root.right #background {
  background-position: right;
}

@media not (prefers-color-scheme: dark) {
  :root[color-scheme="system-color"] {
    --toolbar-non-lwt-bgcolor: -moz-dialog;
    --toolbar-non-lwt-textcolor: -moz-dialogtext;
    --toolbar-non-lwt-inverted-textcolor: -moz-dialog;
    --toolbar-non-lwt-border-color: ThreeDShadow;

    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--face-highlight-more-more-lighter)));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, var(--face-highlight-lighter)));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, var(--face-highlight-more-lighter)));
  }
}

tab-item-substance,
.after-tabs button,
.after-tabs [role="button"] {
  background: transparent;
  color: var(--tab-text);
  text-shadow: var(--browser-textshadow-for-header-image, none);
}

tab-item.active tab-item-substance,
tab-item.bundled-active tab-item-substance,
tab-item tab-item-substance:hover {
  background: var(--tab-surface);
}

tab-item * {
  color: var(--tab-text);
}

tab-item:not(.active):not(.bundled-active) tab-item-substance:hover,
.after-tabs button:hover,
.after-tabs [role="button"]:hover {
  --tab-surface: var(--tab-surface-hover);
}

tab-item.active,
tab-item.bundled-active {
  --throbber-color: var(--throbber-color-active);
  --tab-text: var(--tab-active-text);
  --tab-text-inverted: var(--tab-active-text-inverted);
}
tab-item.active {
  --tab-surface: var(--tab-surface-active);
}
tab-item.active tab-item-substance:hover,
tab-item.bundled-active {
  --tab-surface: var(--tab-surface-active-hover);
}
tab-item.bundled-active tab-item-substance:hover {
  --tab-surface: var(--tab-surface-hover);
}

tab-item:not(.active):not(.bundled-active):not(.highlighted) {
  --throbber-color: var(--browser-loading-indicator, ThreeDDarkShadow);
}

tab-item .burster {
  --throbber-color: var(--tab-loading-fill);
}


@media (prefers-color-scheme: dark) {
  :root {
    --toolbar-non-lwt-bgcolor: #252526;
    --toolbar-non-lwt-textcolor: #efefef;
    --toolbar-non-lwt-inverted-textcolor: black;
    --toolbar-non-lwt-border-color: #4a4a4d;

    --tab-highlighted-highlight: white;
    --tab-dropmarker: var(--toolbar-non-lwt-textcolor);

    --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-less-lighter, #29363f /* #252526 + #041119 (switched R and B from #191104), (parseInt('252526', 16) + parseInt('041119', 16)).toString(16) */));
    --tab-surface-active: var(--browser-bg-active-for-header-image, var(--browser-bg-lighter, #314c5e /* #252526 + #0c2738 (switched R and B from #38270c), (parseInt('252526', 16) + parseInt('0c2738', 16)).toString(16) */));
    --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--browser-bg-more-lighter, #293b4e /* #252526 + #041628 (switched R and B from #281600 + #00004), (parseInt('252526', 16) + parseInt('041628', 16)).toString(16) */));
  }

  tab-item:not(.active):not(.bundled-active):not(.highlighted) {
    --throbber-color: var(--browser-loading-indicator, #afafaf);
  }

  /* Firefox applies dark colors to scrollbars in its in-content UI, when a
     Dark theme is applied by the platform. On the other hand, dark colors
     aren't applied to scrollbars in the sidebar also by default. Thus we need
     to imitate dark scrollbar manually. See also:
     https://github.com/piroor/treestyletab/issues/2373 */
  #tabbar {
    scrollbar-color: var(--in-content-button-background-active-mixed) var(--in-content-box-background);
  }
}


/* Mixed */

:root:not([color-scheme="system-color"]) {
  --tab-highlighter: var(--browser-tab-highlighter, var(--blue-50));
}

:root {
  --tab-surface-active-gradient-start: rgba(249, 249, 250, 0.4);
  --tab-surface-active-gradient-end:   rgba(249, 249, 250, 0);

  --multiselected-color-opacity: 0.15;
}
:root tab-item:not(.active) tab-item-substance:hover {
  --tab-surface-active-gradient-start: rgba(249, 249, 250, 0.25);
  --tab-surface-active-gradient-end:   rgba(249, 249, 250, 0);
}

@media not (prefers-color-scheme: dark) {
  :root[color-scheme="system-color"] {
    --tab-surface-active-gradient-start: var(--face-gradient-start-active);
    --tab-surface-active-gradient-end:   var(--face-gradient-end);
  }
  :root[color-scheme="system-color"] tab-item:not(.active) tab-item-substance:hover {
    --tab-surface-active-gradient-start: var(--face-gradient-start-inactive);
    --tab-surface-active-gradient-end:   var(--face-gradient-end);
  }
}

:root,
#background {
  background-color: var(--browser-background, var(--tabbar-bg));
  background-image: var(--browser-bg-url, var(--browser-header-url, none));
  background-position: left;
  background-size: var(--browser-background-image-size, auto);
}
:root.right,
:root.right #background {
  background-position: right;
}

tab-item-substance,
.after-tabs button,
.after-tabs [role="button"] {
  background-color: var(--tab-surface);
}

tab-item tab-item-substance:hover,
.after-tabs button:hover,
.after-tabs [role="button"]:hover {
  --tab-surface: var(--tab-surface-hover);
}

tab-item.active {
  --tab-surface: var(--tab-surface-active);
}

tab-item.active tab-item-substance:hover,
tab-item.bundled-active {
  --tab-surface: var(--tab-surface-active-hover);
}


:root.left tab-item:not(.faviconized).active tab-item-substance {
  background-image: linear-gradient(
                      to right,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 30%
                    );
}
:root.left tab-item:not(.faviconized) tab-item-substance:hover {
  background-image: linear-gradient(
                      to right,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

:root.right tab-item:not(.faviconized).active tab-item-substance {
  background-image: linear-gradient(
                      to left,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 30%
                    );
}
:root.right tab-item:not(.faviconized) tab-item-substance:hover {
  background-image: linear-gradient(
                      to left,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 50%
                    );
}

tab-item.faviconized.active tab-item-substance {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 40%
                    );
}
tab-item.faviconized tab-item-substance:hover {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-surface-active-gradient-start) 0,
                      var(--tab-surface-active-gradient-end) 60%
                    );
}


tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .highlighter::before {
  background-color: var(--browser-bg-active-for-header-image, var(--browser-bg-less-darker, transparent));
  --tab-highlighter-start: rgba(0, 20, 20, 0.015);
  --tab-highlighter-end: rgba(0, 20, 20, 0.2);
}

:root.left tab-item:not(.faviconized):not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .highlighter::before {
  background-image: linear-gradient(
                      to right,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

:root.right tab-item:not(.faviconized):not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .highlighter::before {
  background-image: linear-gradient(
                      to left,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

tab-item.faviconized:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .highlighter::before {
  background-image: linear-gradient(
                      to bottom,
                      var(--tab-highlighter-start) 0,
                      var(--tab-highlighter-end) 30%
                    );
}

@media (prefers-color-scheme: dark) {
  :root {
    --tab-surface-active-gradient-start: rgba(12, 39, 56, 0.4);
    --tab-surface-active-gradient-end:   rgba(12, 39, 56, 0);
  }
  tab-item:not(.active) tab-item-substance:hover {
    --tab-surface-active-gradient-start: rgba(12, 39, 56, 0.25);
    --tab-surface-active-gradient-end:   rgba(12, 39, 56, 0);
  }

  tab-item:not(.active):not(.bundled-active):not(.highlighted) tab-item-substance:hover .highlighter::before {
    --tab-highlighter-start: var(--grey-10-a015);
    --tab-highlighter-end: var(--grey-10-a20);
  }
}