initiale Übernahme
This commit is contained in:
712
.obsidian/snippets/Colored Sidebar Items.css
vendored
Normal file
712
.obsidian/snippets/Colored Sidebar Items.css
vendored
Normal file
@@ -0,0 +1,712 @@
|
||||
/*------------------------------------------------------------------------------
|
||||
Obsidian Colored Sidebar Items by CyanVoxel v2.0.0
|
||||
|
||||
A colored sidebar CSS snippet inspired by
|
||||
the "Coloured Folders" snippet by Lithou.
|
||||
|
||||
This snippet targets folders beginning with numbered prefixes, and applies full
|
||||
color formatting based on the root colors listed below. The prefixes are both
|
||||
customizable and extensible; feel free to change, add, and remove them based on
|
||||
your own titles and vault structure! By default I have a range of 8+1 colors,
|
||||
however I've provided some other common colors as a starting point for your own
|
||||
customization. Just swap out the color variable names in the prefix groups.
|
||||
|
||||
------------------------------------------------------------------------------*/
|
||||
|
||||
:root {
|
||||
/* ================================ Colors ================================ */
|
||||
--red: #e22c3c; /* Default Prefix: 08 */
|
||||
--red-orange: #e9404b; /* Default Prefix: 09 */
|
||||
--orange: #ee6748; /* Default Prefix: None */
|
||||
--amber: #fa9f50; /* Default Prefix: None */
|
||||
--yellow: #ffd85e; /* Default Prefix: None */
|
||||
--lime: #97e768; /* Default Prefix: None */
|
||||
--mint: #52eea3; /* Default Prefix: 00 */
|
||||
--cyan: #51e1e9; /* Default Prefix: 01 */
|
||||
--cool-cyan: #43cfea; /* Default Prefix: None */
|
||||
--light-blue: #54b6f8; /* Default Prefix: 02 */
|
||||
--blue: #437cf3; /* Default Prefix: 03 */
|
||||
--blue-violet: #6f51f4; /* Default Prefix: None */
|
||||
--violet: #9446f8; /* Default Prefix: 04 */
|
||||
--purple: #c952ed; /* Default Prefix: 05 */
|
||||
--magenta: #e54f9b; /* Default Prefix: 06 */
|
||||
--hot-red: #e3365e; /* Default Prefix: 07 */
|
||||
--cool-gray: #515768; /* Default Prefix: 99 */
|
||||
|
||||
--default-text-color: #d0d0d0;
|
||||
--highlight: #fff;
|
||||
--shadow: #0b0c2c;
|
||||
|
||||
--nav-item-weight-hover: bold;
|
||||
}
|
||||
|
||||
/* Light Theme Specific Properties */
|
||||
.theme-light {
|
||||
--contrast-color: var(--shadow);
|
||||
--default-text-color: var(--shadow);
|
||||
--bg-contrast-amount: 70%;
|
||||
--fg-contrast-amount: 30%;
|
||||
--medium-contrast-amount: 60%;
|
||||
--active-contrast-amount: 30%;
|
||||
|
||||
/* Darker Versions of Bright Colors for Light Theme */
|
||||
--yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow));
|
||||
--lime: color-mix(in srgb, #97e768 90%, var(--shadow));
|
||||
--mint: color-mix(in srgb, #52eea3 85%, var(--shadow));
|
||||
--cyan: color-mix(in srgb, #51e1e9 85%, var(--shadow));
|
||||
--cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow));
|
||||
--light-blue: color-mix(in srgb, #54b6f8 90%, var(--shadow));
|
||||
}
|
||||
|
||||
/* Dark Theme Specific Properties */
|
||||
.theme-dark {
|
||||
--contrast-color: var(--highlight);
|
||||
--bg-contrast-amount: 15%;
|
||||
--fg-contrast-amount: 40%;
|
||||
--medium-contrast-amount: 20%;
|
||||
--active-contrast-amount: 10%;
|
||||
}
|
||||
|
||||
/* All Folder Titles */
|
||||
.nav-folder-title {
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Narrower Padding on Desktop*/
|
||||
@media only screen and (min-width: 768px) {
|
||||
.nav-file-title,
|
||||
.nav-folder-title {
|
||||
/* padding: 3px 5px 2px 4px !important; */
|
||||
padding-top: 3px !important;
|
||||
padding-right: 5px !important;
|
||||
padding-bottom: 2px !important;
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
============================ Folder Title Prefixes =============================
|
||||
The following groups of prefixes are divided by the numbering prefix that they
|
||||
target. For example, prefix '00' targets any folder titles beginning with '00',
|
||||
such as '00 - Maps of Content'. The only other piece of information that changes
|
||||
between the prefix groups are the color variables. Change or expand on any of
|
||||
these to suit your own folder structure and vault theme!
|
||||
*/
|
||||
|
||||
/* ------------------------------- 00 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="00"] {
|
||||
color: var(--mint);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--mint) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--mint) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--mint) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--mint) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="00"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--mint) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--mint) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="00"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--mint) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--mint) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--mint) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--mint) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 01 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="01"] {
|
||||
color: var(--amber);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--amber) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--amber) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--amber) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--amber) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="01"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--amber) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="01"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--amber) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="01"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--amber) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--cyan) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--amber) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--amber) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 02 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="02"] {
|
||||
color: var(--yellow);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.nav-folder-title[data-path^="02"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="02"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="02"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--yellow) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--yellow) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 03 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="03"] {
|
||||
color: var(--blue);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--blue) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--blue) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--blue) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--blue) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="03"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--blue) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="03"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--blue) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="03"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--blue) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--blue) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--blue) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--blue) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 04 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="04"] {
|
||||
color: var(--violet);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--violet) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--violet) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--violet) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--violet) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="04"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--violet) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="04"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--violet) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="04"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--violet) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--violet) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--violet) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--violet) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 05 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="05"] {
|
||||
color: var(--purple);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--purple) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--purple) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--purple) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--purple) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="05"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--purple) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="05"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--purple) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="05"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--purple) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--purple) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--purple) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--purple) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 06 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="06"] {
|
||||
color: var(--magenta);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.nav-folder-title[data-path^="06"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="06"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="06"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--magenta) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--magenta) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 07 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="07"] {
|
||||
color: var(--hot-red);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.nav-folder-title[data-path^="07"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="07"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="07"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--hot-red) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--hot-red) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------- 08 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="08"] {
|
||||
color: var(--amber);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--red) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--red) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--red) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(in srgb, var(--amber) 60%, transparent);
|
||||
}
|
||||
.nav-folder-title[data-path^="08"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--red) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="08"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--red) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="08"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--red) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--cyan) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--red) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--red) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------------- 99 Prefix -------------------------------- */
|
||||
.nav-folder-title[data-path^="99"] {
|
||||
color: var(--cool-gray);
|
||||
--nav-item-color-hover: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) var(--fg-contrast-amount),
|
||||
var(--contrast-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) 60%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.nav-folder-title[data-path^="99"]:hover {
|
||||
--nav-collapse-icon-color: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) 60%,
|
||||
var(--contrast-color)
|
||||
);
|
||||
}
|
||||
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) {
|
||||
--nav-indentation-guide-color: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) var(--medium-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.tree-item-children
|
||||
.nav-folder:has(.nav-folder-title[data-path^="99"])
|
||||
.nav-file-title {
|
||||
color: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) var(--medium-contrast-amount),
|
||||
var(--default-text-color)
|
||||
);
|
||||
--nav-item-background-hover: color-mix(
|
||||
in srgb,
|
||||
color-mix(in srgb, var(--cool-gray) 50%, var(--highlight))
|
||||
var(--bg-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
--background-modifier-border-focus: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) 40%,
|
||||
transparent
|
||||
);
|
||||
--nav-item-background-active: color-mix(
|
||||
in srgb,
|
||||
var(--cool-gray) var(--active-contrast-amount),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user