colorful-frame.scss

/*---------------COLORFUL FRAME--------------*/
/*----------------------------------
This feature is inspired by Kepano's Minimal theme: https://github.com/kepano/obsidian-minimal
None of the original code was used, and was written from scratch.
----------------------------------*/
body {
  --colorful-icon-color: var(--background-secondary);
  --colorful-icon-color-alt: var(--background-secondary-alt);
  --colorful-frame-color: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
}
body.anp-colorful-frame-icon-toggle-light.theme-light,
body.anp-colorful-frame-icon-toggle-dark.theme-dark {
  --colorful-icon-color: var(--text-normal);
  --colorful-icon-color-alt: var(--text-muted);
}
.anp-colorful-frame {
  &.anp-fixed-status-bar {
    &.anp-card-layout, &.anp-border-layout {
      .status-bar {
        --status-bar-background: var(--colorful-frame-color);
        --status-bar-text-color: var(--colorful-icon-color);
        .status-bar-item.mod-clickable:hover {
          color: var(--colorful-icon-color);
          background-color: rgba(var(--ctp-crust), 0.2);
        }
      }
    }
  }
  &.anp-card-layout .workspace-split.mod-right-split .workspace-tabs,
  &.anp-card-layout .workspace-split.mod-left-split .workspace-tabs,
  &:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-left-split .workspace-tabs.mod-top,
  &:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-right-split .workspace-tabs.mod-top {
    .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
      background-color: rgba(var(--ctp-crust), 0.2);
    }
  }
  &.is-frameless.is-frameless:not(.is-hidden-frameless) {
    .sidebar-toggle-button.mod-left {
      border-radius: 0 var(--radius-m) var(--radius-m) 0;
    }
  }
  &.anuppuccin-accent-toggle.anp-colorful-frame {
    &:not(.anp-card-layout, .anp-border-layout) .mod-top .workspace-tab-header-container,
    &:not(.anp-card-layout, .anp-border-layout) .workspace-ribbon.mod-left:before,
    &.anp-card-layout,
    &.anp-card-layout .workspace-tabs.mod-top,
    &.anp-card-layout .sidebar-toggle-button,
    &.anp-card-layout .workspace-ribbon.mod-left:before {
      --tab-container-background: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
      --titlebar-background: rgba(var(--anp-colorful-frame-color, var(--ctp-accent)), var(--anp-colorful-frame-opacity, 1));
    }
    &.anp-card-layout .prompt {
      --background-modifier-hover: rgba(var(--ctp-text), 0.075)
    }
  }
  &.anuppuccin-accent-toggle.anp-colorful-frame, &.anp-colorful-frame.anp-colorful-frame.anp-colorful-frame {
    .sidebar-toggle-button {
      --background-modifier-hover: rgba(var(--ctp-text), 0.075);
    }
  }
  &.is-focused .workspace-tabs.mod-stacked .workspace-tab-container {
    .workspace-tab-header-inner {
      .workspace-tab-header-inner-title, .workspace-tab-header-inner-close-button {
        color: var(--text-muted);
      }
    }
  }
  .workspace-tabs.mod-stacked .workspace-tab-container {
    .workspace-tab-header-inner {
      .workspace-tab-header-inner-close-button {
        color: var(--text-muted);
      }
    }
  }
  &.is-focused .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active {
    .workspace-tab-header-inner {
      .workspace-tab-header-inner-title, .workspace-tab-header-inner-close-button {
        color: var(--color-accent);
      }
    }
  }
  &:not(.anp-card-layout, .anp-border-layout) .mod-top .workspace-tab-header-container,
  &.anp-colorful-frame.anp-card-layout,
  &.anp-colorful-frame.anp-card-layout .workspace-tabs.mod-top,
  &.anp-colorful-frame.anp-card-layout .sidebar-toggle-button,
  &.anp-colorful-frame.anp-card-layout .workspace-ribbon.mod-left:before,
  &:not(.anp-card-layout, .anp-border-layout) .workspace-ribbon.mod-left:before {
    --tab-container-background: hsla(var(--anp-colorful-frame-color-hsl, var(--color-accent-hsl)), var(--anp-colorful-frame-opacity, 1));
    --titlebar-background: hsla(var(--anp-colorful-frame-color-hsl, var(--color-accent-hsl)), var(--anp-colorful-frame-opacity, 1));;
  }
  &.anp-card-layout {
    --divider-color-hover: var(--background-secondary-alt);
  }
  &:not(.anp-card-layout, .anp-border-layout),
  &:not(.anp-card-layout, .anp-border-layout).is-focused {
    .mod-top {
      &:not(.mod-stacked) {
        .workspace-tab-header,
        .workspace-tab-header.is-active,
        .is-focused.workspace-tab-header,
        .workspace-tab-header-container {
          --tab-text-color: var(--colorful-icon-color-alt);
          --icon-color: var(--colorful-icon-color-alt);
          --icon-color-hover: var(--colorful-icon-color);
          --tab-text-color-focused: var(--colorful-icon-color-alt);
        }
      }
      &.mod-stacked {
        .workspace-tab-header-new-tab .clickable-icon {
          --icon-color: var(--colorful-icon-color-alt);
          --icon-color-hover: var(--colorful-icon-color);

        }
      }
      .workspace-tab-header-tab-list, .workspace-tab-header-new-tab {
        .clickable-icon, .clickable-icon:hover {
          color: var(--colorful-icon-color-alt);
        }
      }
    }
    &.anp-mini-tab-toggle, &.is-focused.anp-mini-tab-toggle {
      .mod-top {
        .workspace-tab-header, .workspace-tab-header.is-active {
          --tab-text-color-focused-active: var(--colorful-icon-color-alt);
          --tab-text-color-active: var(--colorful-icon-color-alt);
          --tab-text-color-focused: var(--colorful-icon-color-alt);
          --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
          .workspace-tab-header-inner-close-button {
            --tab-text-color-focused: var(--colorful-icon-color-alt);
            --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
          }
        }
        --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
      }
    }
  }
  &:not(.anp-card-layout, .anp-border-layout) {
    .mod-right-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
    .mod-left-split .mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
    .mod-top .workspace-tab-header-container .clickable-icon.has-active-menu,
    .mod-top .workspace-tab-header-container .clickable-icon:active {
      --icon-color-focused: var(--colorful-icon-color-alt);
    }
    .workspace-tab-header,
    .workspace-tab-header .workspace-tab-header-inner-close-button {
      --tab-text-color-focused: var(--colorful-icon-color-alt);
      --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
    }
    .workspace-tab-header.is-active,
    .workspace-tab-header.is-active .workspace-tab-header-inner-close-button {
      --tab-text-color-focused: var(--text-faint);
      --tab-text-color-focused-active-current: var(--text-normal);
    }
    .mod-left-split .mod-top .workspace-tab-header.is-active,
    .mod-right-split .mod-top .workspace-tab-header.is-active {
      background-color: rgba(var(--ctp-crust), 0.2);
      &:hover {
        background-color: rgba(var(--ctp-crust), 0.3);
      }
    }
    &.anp-colorful-frame-icon-toggle-light.theme-light,
    &.anp-colorful-frame-icon-toggle-dark.theme-dark {
      .mod-left-split .mod-top .workspace-tab-header.is-active,
      .mod-right-split .mod-top .workspace-tab-header.is-active {
        background-color: rgba(var(--ctp-text), 0.3);
      }
    }
    &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
    &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title,
    &.is-focused .mod-active:not(.mod-stacked).mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
    &.is-focused.anp-mini-tab-toggle .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title,
    .mod-left-split .mod-top .workspace-tab-header:active .workspace-tab-header-inner-icon,
    .mod-right-split .mod-top .workspace-tab-header:active .workspace-tab-header-inner-icon {
      color: var(--colorful-icon-color-alt);
    }
  }
  &.anp-card-layout .mod-vertical .workspace-tabs {
    background-color: var(--tab-container-background);
  }
}
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).is-focused.anp-mini-tab-toggle .mod-top:not(.mod-stacked) .workspace-tab-header:not(.is-active),
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle .mod-top:not(.mod-stacked) .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner-close-button {
    color: var(--colorful-icon-color-alt);
    --tab-text-color-focused-active-current: var(--colorful-icon-color-alt);
}
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout) .workspace-split.mod-right-split > .workspace-leaf-resize-handle {
  height: calc(100% - var(--header-height));
}
.anp-colorful-frame .sidebar-toggle-button.sidebar-toggle-button {
  background-color: var(--background-primary) !important;
}
.anp-colorful-frame .sidebar-toggle-button {
  padding: var(--size-4-1) !important;
  background-color: var(--background-primary);
  --tab-container-background: var(--background-primary) !important;
  height: calc(var(--header-height) - 5px);
  margin-right: 0;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: var(--tab-outline-color);
  --icon-color: var(--text-muted);
  --icon-color-hover: var(--text-muted);
  --icon-color-active: var(--text-accent);
  --icon-color-focused: var(--text-normal);
  .clickable-icon {
    --icon-color: var(--text-muted) !important;
    --icon-color-hover: var(--text-muted) !important;
    --icon-color-active: var(--text-accent) !important;
    --icon-color-focused: var(--text-normal) !important;
  }
}

.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle.is-focused .mod-active.mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame:not(.anp-card-layout, .anp-border-layout).anp-mini-tab-toggle.is-focused .mod-active.mod-top .workspace-tab-header.is-active .workspace-tab-header-inner-title {
    color: var(--background-primary);
}

//Fullscreen tweak
.anp-colorful-frame.mod-macos .sidebar-toggle-button.mod-right {
  border-radius: 0 0 0 var(--radius-m);
}

.anp-colorful-frame.is-fullscreen:not(.is-popout-window) .sidebar-toggle-button.mod-left {
  border-radius: 0 0 var(--radius-m) 0;
}

body.anp-colorful-frame.anp-card-layout .workspace,
.anp-colorful-frame.anuppuccin-accent-toggle.anp-card-layout .workspace-tabs {
  background-color: var(--tab-container-background);
}
.anp-colorful-frame.anp-card-layout,
.anp-colorful-frame.anp-card-layout .workspace-tab-container,
.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout:not(.anp-card-layout-filebrowser) .workspace-leaf-content[data-type="file-explorer"]  {
  --tab-text-color: var(--background-secondary-alt);
  //--tab-text-color-active: var(--background-secondary-alt);
  --tab-text-color-focused: var(--background-secondary-alt);
  --tab-text-color-focused-active: var(--background-secondary-alt);
  --tab-text-color-focused-highlighted: var(--background-secondary-alt);
  --tab-text-color-focused-active-current: var(--background-secondary-alt);
  --icon-color: var(--background-secondary-alt);
  --icon-color-hover: var(--background-secondary-alt);
  --icon-color-active: var(--background-secondary-alt);
  --icon-color-focused: var(--background-secondary-alt);
}
.anp-colorful-frame.anp-card-layout:not(.anp-card-layout-filebrowser) {
  &.anp-colorful-frame-icon-toggle-light.theme-light,
  &.anp-colorful-frame-icon-toggle-dark.theme-dark {
    .workspace-leaf-content[data-type="file-explorer"]  {
      --tab-text-color: var(--text-normal);
      //--tab-text-color-active: var(--text-normal);
      --tab-text-color-focused: var(--text-normal);
      --tab-text-color-focused-active: var(--text-normal);
      --tab-text-color-focused-highlighted: var(--text-normal);
      --tab-text-color-focused-active-current: var(--text-normal);
      --icon-color: var(--text-normal);
      --icon-color-hover: var(--text-normal);
      --icon-color-active: var(--text-normal);
      --icon-color-focused: var(--text-normal);
    }
  }
}
.anp-colorful-frame.anp-card-layout.anp-colorful-frame-icon-toggle-light.theme-light,
.anp-colorful-frame.anp-card-layout.anp-colorful-frame-icon-toggle-dark.theme-dark,
.anp-colorful-frame.anp-card-layout.anp-card-layout-actions .workspace-ribbon,
.anp-colorful-frame.anp-card-layout .workspace-tab-container,
.anp-colorful-frame.anp-card-layout .modal,
.anp-colorful-frame.anp-card-layout .mod-vertical .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout.anp-alternate-tab-toggle .mod-vertical .workspace-tab-header{
  --tab-text-color: var(--text-faint);
  --tab-text-color-active: var(--text-muted);
  --tab-text-color-focused: var(--text-muted);
  --tab-text-color-focused-active: var(--text-muted);
  --tab-text-color-focused-highlighted: var(--text-accent);
  --tab-text-color-focused-active-current: var(--text-normal);
  --icon-color: var(--text-muted);
  --icon-color-hover: var(--text-muted);
  --icon-color-active: var(--text-accent);
  --icon-color-focused: var(--text-normal);
}
.anp-colorful-frame.anp-card-layout:not(.anp-alternate-layout) .workspace-tab-header-status-icon {
  color: var(--icon-color);
}
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-mini-tab-toggle) .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-mini-tab-toggle) .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
    color: var(--color-accent);
}
.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header .workspace-tab-header-inner-title,
.anp-colorful-frame.anp-card-layout.anp-mini-tab-toggle .mod-vertical .workspace-tab-header .workspace-tab-header-inner-title,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-dark.theme-dark) .mod-left-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-light.theme-light) .mod-left-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-dark.theme-dark) .mod-right-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon,
.anp-colorful-frame.anp-card-layout.is-focused:not(.anp-colorful-frame-icon-toggle-light.theme-light) .mod-right-split .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
  color: var(--background-secondary-alt);
}
.anp-colorful-frame.anp-card-layout.is-focused {
  &.anp-colorful-frame-icon-toggle-light.theme-light,
  &.anp-colorful-frame-icon-toggle-dark.theme-dark {
    .mod-left-split, .mod-right-split {
      .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon {
        color: var(--text-normal);
      }
    }
  }
}
.anp-colorful-frame.anp-card-layout {
  .mod-left-split, .mod-right-split {
    .workspace-tab-container {
      background-color: transparent;
    }
  }
  .mod-left-split {
    background-color: transparent;
  }
  .mod-vertical .workspace-tab-container {
    background-color: transparent;
  }
}
.anp-colorful-frame.anp-card-layout .mod-right-split .workspace-tab-header.is-active,
.anp-colorful-frame.anp-card-layout .mod-left-split  .workspace-tab-header.is-active {
  background-color: rgba(var(--ctp-crust), 0.2);
  &:hover {
    background-color: rgba(var(--ctp-crust), 0.3);
  }
}
.anp-colorful-frame.anp-card-layout {
  &.anp-colorful-frame-icon-toggle-light.theme-light,
  &.anp-colorful-frame-icon-toggle-dark.theme-dark {
    .mod-right-split, .mod-left-split {
      .workspace-tab-header.is-active {
        background-color: rgba(var(--ctp-text), 0.3);
      }
    }
  }
}
.mod-top .workspace-tab-header-inner::after {
  display: none;
}
.anp-colorful-frame.anp-card-layout:not(.anp-mini-tab-toggle) .mod-vertical .workspace-tab-header.is-active {
  --tab-text-color-focused: var(--text-muted);
  --tab-text-color-focused-active: var(--text-normal);
}
.anp-mini-tab-toggle.anp-colorful-frame .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container-inner .workspace-tab-header.is-active {
  border-bottom: 2px solid var(--background-secondary-alt);
}
.anp-colorful-frame.anp-card-layout .workspace-drop-overlay:before {
  background-color: var(--background-secondary-alt);
  border-radius: var(--radius-m);
  opacity: 0.5;
}
.anp-colorful-frame {
  --titlebar-background: var(--anp-colorful-frame-color, var(--color-accent));
  --titlebar-background-focused: var(--anp-colorful-frame-color, var(--color-accent));
  --titlebar-text-color: var(--background-primary);
  --titlebar-text-color-focused: var(--background-secondary-alt);
}
.anp-colorful-frame.is-frameless:not(.is-hidden-frameless) {
  .sidebar-toggle-button.mod-right, .sidebar-toggle-button.mod-left {
    border-radius: var(--radius-m);
  }
}
.anp-colorful-frame:not(.is-frameless) {
  .sidebar-toggle-button.mod-right, .sidebar-toggle-button.mod-left {
    border-radius: var(--radius-m);
  }
}
body.anp-colorful-frame.anp-border-layout {
  .horizontal-main-container {
    background-color: var(--colorful-frame-color);
    --titlebar-background: var(--colorful-frame-color);
    --ribbon-background: var(--colorful-frame-color);
    --ribbon-background-collapsed: var(--colorful-frame-color);
    --card-background-color: var(--colorful-frame-color);
  }
  .workspace-ribbon {
    --icon-color: var(--colorful-icon-color);
    --icon-color-hover: var(--colorful-icon-color-alt);
    --icon-color-active: var(--colorful-icon-color-alt);
    --icon-color-focused: var(--colorful-icon-color);
    .clickable-icon:hover {
      background-color: rgba(var(--ctp-crust), 0.2);
    }
    .clickable-icon:active {
      background-color: rgba(var(--ctp-crust), 0.3);
    }
  }
  .workspace-tabs.mod-top {
    .workspace-tab-header-container {
      .clickable-icon {
    --icon-color: var(--colorful-icon-color);
    --icon-color-hover: var(--colorful-icon-color-alt);
    --icon-color-active: var(--colorful-icon-color-alt);
    --icon-color-focused: var(--colorful-icon-color);
      }
      .clickable-icon:hover {
        background-color: rgba(var(--ctp-crust), 0.2);
      }
      .clickable-icon:active {
        background-color: rgba(var(--ctp-crust), 0.3);
      }
    }
  }
  .workspace-split {
    &.mod-right-split,
    &.mod-left-split {
      .workspace-tabs.mod-top {
        > .workspace-tab-header-container {
          --icon-color: var(--colorful-icon-color);
          --icon-color-hover: var(--colorful-icon-color-alt);
          --icon-color-active: var(--colorful-icon-color-alt);
          --icon-color-focused: var(--colorful-icon-color);
          .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
            background-color: rgba(var(--ctp-crust), 0.2);
          }
          .workspace-tab-header.is-active .workspace-tab-header-inner {
            background-color: rgba(var(--ctp-crust), 0.3);
          }
          .clickable-icon:hover {
            background-color: rgba(var(--ctp-crust), 0.2);
          }
          .clickable-icon:active {
            background-color: rgba(var(--ctp-crust), 0.3);
          }
          .workspace-tab-header.is-active .workspace-tab-header-inner-icon, .is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
            color: var(--colorful-icon-color);
          }
        }
      }
    }
  }
  &.anp-mini-tab-toggle .workspace-tabs.mod-top {
    .workspace-tab-header-inner-title,
    .workspace-tab-header-status-container,
    .workspace-tab-header-inner-close-button,
    .workspace-tab-header-inner-icon {
      color: var(--background-primary);
    }
  }
}